Jednoduchá FireMonkey mobilní Android aplikace krok za krokem

vložil Radek Červinka 20. června 2016 22:48

Ukáži jak za pomoci Delphi a pár minut vytvoříte jednoduchou mobilní aplikaci pro Android s tím, že pokud máte Apple tak ji jen přeložíte pro iOS.

Veškerý vývoj bude probíhat na Windows jako Win32 aplikace a jen výsledek upravíme na zařízení. Naše aplikace umožní zadat IČO a z webu si dotáhne informace o firmě ve formě JSON, ten zpracujeme a zobrazíme.

Co budeme potřebovat

Začínáme

Vytvoříme novou aplikaci, tj. vybereme Multi device application a ze šablon Header/footer.

FMX

Tím máme základní program, který si někam uložíme.

FMX

Několik posledních verzí umí FireMonkey používat technologii View, kdy si můžeme definovat jak přesně vzhled bude vypadat na různých rozlišeních, kdy definujeme "Master" a ten pak přizpůsobujeme. Nám bude ale stačit aby se aplikace přizpůsobila sama a nebudeme nijak přesně specifikovat rozlišení, tj. budeme pracovat jen s "Master".

FMX

Přepínání View - my zůstaneme u master.

Nyní je třeba vyřešit Layout, tj. aby se aplikace přizpůsobila zařízení, když nebudeme specifikovat rozložení pro jednotlivá rozlišení. Máme na výběr několik možností Layout (představte si to jako panel, který se nějak chová), ale já místo toho použiji TListBox (další dobrá možnost je MultiView /zde byl již ukázán/ nebo TListView).

FMX

Zapomeňte na TListBox z VCL, tohle je jiná liga. Každý Item může být libovolná komponenta s různým stylem, která v sobě může nést jiné komponenty.

ListBox v akci

Vyberte ListBox a vložte ho na formulář, nastavte mu Align = alClient.

Titulek

Nyní budeme vkládat jednotlivé položky, které budou tvořit naše UI. Začneme titulkem (já ho tam už mám vložen).

FMX

Přes kontextové menu na ListBox přidáme položku

FMX

a nastavíme její styl jaký se Vám líbí

FMX

a zadáme text titulku.

Položky

Cílový stav

FMX

takže vložíme 10x TListBoxItem, styl tam kde je potřeba. Nyní editační pole což je normální TEdit, ale s nastaveným stylem a Align = Center (nic vám nebrání použít jiné Align).

Jak uděláme mazací tlačítko? Klikneme na TEdit a přes kontextové menu přidáme TClearEditButton, to je vše.

FMX

Všimněte si prosím ve stromě struktury u TEdit. Ve FireMonkey můžete komponenty libovolně kombinovat jak je Vám libo. Dalším plusem jsou styly, které dokáží kolikrát zázraky.

Takže základní UI máme - toto UI se podle toho jak přeložíte aplikaci předvede ve stylu platformy.

Vlastní program

V tomto okamžiku můžete program přeložit pro cílovou platformu, tj. některou z Windows, iOS, Mac OS X nebo Android. Doporučuji dělat veškerý vývoj na Windows a pak to teprve doladit např. na Androidu - je to nejen z hlediska rychlosti kompilace a deploy.

FMX

Zatím jsem ani nenapsal ani řádek kódu. To hned napravíme. Jak to bude fungovat? Využijeme jednu službu, která umí vracet pro IČO v URL (tj. REST API) JSON odpověď s informacemi o firmě. Takže jednoduše sestrojíme URL, přes multiplatformní THTTPClient z Delphi stáhneme data a přes multiplatformní System.JSON je projdeme a zobrazíme.

Obsluha tlačítka

uses
//  Windows,
  System.Net.httpclient,
  System.JSON;
{$R *.fmx}

procedure THeaderFooterForm.Button1Click(Sender: TObject);
var
  oClient: THTTPClient;
  oStream: TStringStream;
  iStatus: Integer;
  sResponse: string;
  oJsonValue: TJSONValue;
  s: string;
  o: TObject;
const
  ciLen = length('ico_back('); // odpoved obsahuje kus JS
begin
  oClient := THTTPClient.Create;
  oStream := TStringStream.Create;
  try
    // pro ladeni
    iStatus := oClient.Get('http://data.fin.cz/json/subject/45274649.js', oStream, nil).StatusCode;
//    iStatus := oClient.Get('http://data.fin.cz/json/subject/'+edtICO.Text+'.js', oStream, nil).StatusCode;
    iStatus := iStatus div 200;
    if iStatus <> 1 then
    begin
      edtName.Text := 'Error:'+iStatus.ToString;
      Exit;
    end;
    sResponse := oStream.DataString.Substring(ciLen);
    sResponse := sResponse.Remove(Length(sResponse) - 1);
  finally
    oStream.DisposeOf; // ignoruj ARC 
    oClient.DisposeOf;
  end;
(*
 'ico_back({id:''25247484'',count:1,name:''AB - AKCIMA, s.r.o.'',
 url:''http://rejstrik-firem.kurzy.cz/25247484/ab-akcima-sro/'',
 addr_main:{city:''Cheb'',citypart:''Cheb'',street:''Havl\u00ED\u010Dkova 1803/2'',
 zip:''35002'',no:''1803/2'',code:{city:''554481'',district:''CZ0411''}},
 vat:{id:''CZ25247484''},date:{start:''2000-08-03'',last:''2014-09-01'',end:null}})'
*)
  sResponse := NormaliseJSON(sResponse);
//  Windows.MessageBox(0, Pchar(sResponse), nil, 0);

  oJsonValue := TJSONObject.parseJSONValue(sResponse);
  if oJsonValue is TJSONObject then
  begin
    s := TJSONObject(oJsonValue).Values['id'].Value;
    edtName.Text := TJSONObject(oJsonValue).Values['name'].Value;
    o := TJSONObject(oJsonValue).Values['addr_main'];
    if o is TJSONObject then
    begin
      edtAdr1.Text := TJSONObject(o).Values['street'].Value;
      edtAdr2.Text := TJSONObject(o).Values['citypart'].Value;
      edtPost.Text := TJSONObject(o).Values['zip'].Value;
    end;
  end;

První část stáhne JSON, druhá ji projde. Je to přímočaré, až na NormaliseJSON, která trochu upravuje vrácený JSON.

function THeaderFooterForm.NormaliseJSON(const s: string): string;
var
  c: char;
  bInQuote: Boolean;
begin
  Result := '';
  bInQuote := False;
  for c in s do
  begin
    if c = '''' then
    begin
      bInQuote := not bInQuote;
      Result := Result + '"';
      continue;
    end;
    if bInQuote then
      Result := Result + c
    else
     if CharInSet(c, ['{', ',']) then
      Result := Result + c+ '"'
    else
     if CharInSet(c, [':']) then
      Result := Result + '"'+c
     else
      Result := Result + c
  end;
  Result := Result + '';
end;

Vyzkoušíme aplikaci na Windows, přeložíme pro Android a máme hotovo.

Poznámky

Pozor na řetězce od nuly v mobilních aplikacích, pokud nechcete použít přepínač, který to vypne, tak si jen vzpomeňte, že všechny funkce volané stylem string.xxxx začínají od 0 (viz. příklad).

FMX

Velikost aplikace

Odeberte z aplikace co nepotřebujete přes Project Manager.

FMX

Výslednou aplikaci (APK) přeložte jako release, v mém případě má balíček 6 119 782 bytes.

Měl to být původně video návod, ale nebylo to dobré. Navíc já mám raději textové návody, takže se omlouvám RK.

download source: source (13K)


Nabízíme Delphi školení a konzultace na různá témata, primárně ve Vaší firmě.

Tagy: , , ,

FireMonkey | Návody

Komentáře

21.6.2016 8:53:59 #

Tom

Tento navod je fajn, teraz bol mobilny balicek zadarmo k verzii Profesional.

V Delphi (10+ rokov skusenosti) sa naozaj daju pekne a rychlo vytvorit (teraz aj mobilne) veci, vyskusal som Trial a naozaj dobre sa v nom robi, ale ta politika je priserna.

Dat €1616 (+€808 za mobilny balicek mimo akcie) + DPH! to je naozaj vela pre samostatneho vyvojara.

Takze kto chce vyvijat mobilne appky nemoze pouzit Delphi (ani C++ Builder) pretoze Starter edicia mobily nepodporuje, ale musi prejst na nieco ine.

Vsetko teraz smeruje do open sourcu, vsetko je zadarmo (Android Studio, Xamarin, Visual Studio, XCode), takze pytat taketo nehorazne sumy je ozaj odvaha.

Zrejme je to smerovane na velke firmy, co si to mozu dovolit, ale tie potom nepotrebuju taketo jednoduche appky :)

Cize ak by Embt ponuklo nieco dostupne pre malych vyvojarov tak by to slo, inak je to len masirovanie ega (a pocet vyvojarov RAD mi dava za pravdu...)

Tom

21.6.2016 9:20:27 #

radekc

Prosím o žádné rychlé a instantní závěry. Myslím si, že by mobilní vývoj měl být dostupný ve verzi Prof, stejně jako FireDac, ale nic s tím neudělám. O počtu licencí podle mne nic nevíš a já jen velmi mlhavě.

Ano, použij Android Studio, napiš v něm program. Změř si dobu vývoje, pak ten stejný program portuj v XCode a pak porovnej ceny včetně práce.

Prostě si zkus napsat program v něčem jiném a pak se můžeme bavit.

radekc

21.6.2016 9:38:50 #

bohdan

Super článek. Krásný a pochopitelný příklad na mobilní aplikace.
Info o veřejné službě data.fin.cz máš z http://www.kurzy.cz/html-kody/firmy/ico.htm? Nebo je ještě nejaký jiný popis k této službě.

bohdan

21.6.2016 10:17:02 #

radekc

Ano přesně - z kurzy.cz

radekc

21.6.2016 14:35:21 #

Marek

Tohle je Radku super jednoduchý úvod pro toho, kdo ještě mobilní aplikaci v RAD Studiu nevytvářel. Dávám 5 hvězdiček :-)

Pro prvního přispěvatele Toma: nedivím se, že to Embarcadero nedává zadarmo, že si to nechá tvrdě zaplatit. Tohle jsou roky a roky vývoje a tvrdé dřiny. Kdo chce kvalitní RAD vývojový nástroj, tak si ho prostě musí zaplatit. Takže cena mě vůbec nepřekvapuje. Kdo na to nemá, ať zkusí jiné vývojové nástroje. Pokud najde něco lepšího, je to OK.

Marek

21.6.2016 14:50:34 #

Tom

Ved presne to som skusil:


Chcel som spravit mobilnu aplikaciu pre vsetky platformy, preto som si vybral Delphi (kedze mam prax v Delphi 10+ rokov).

Jeden kod = vsetky platformy, vsetko uplne super. Jediny problem je ta cena, pre malych vyvojarov nepouzitelne ani na zaciatok.

Preto som presiel na Xamarin:  Jeden kod (C#) = vsetky platformy a zdarma (pozor neviem ci Delphi vie Windows Phone!)

Xamarin je porovnatelny s Delphi, rovnaka aplikacia mi trvala rovnako dlho !!!



Preto sa snazim nejak iniciovat Embt, aby podporovali malych vyvojarov. Kto raz zacne s Xamarinom uz neprejde spat na Delphi.

Inak tie licencie a postoj Embt k Delphi je asi takto: Delphi developers are in their 40s or 50s. Where is the next generation coming from? >> https://www.quora.com/Is-Delphi-dead

Ocenujem snahu s tymto clankom, ale ako vravim: treba este nieco viac, aby sa cela tato komunita okolo Delphi rozbehla.

Ja som velky fanda Delphi, ale ked uz JA som presiel na Xamarin (pouzivam Delphi od strednej skoly, vratane Turbo Pascalu!) tak kto iny bude to Delphi pouzivat?

Proste ma rozculuje ako strasne pchaju ten mobilny vyvoj, neustale kecy a kecy, ale realne co by pomohlo (podpora malym vyvojarom) to nespravia.

Clanok je fajn, len tak dalej. Aplikaciu zverejnim za cca 1-2 mesiace.

Tom

21.6.2016 15:18:03 #

radekc

Používáš Xamarin.Forms nebo to druhé?

radekc

22.6.2016 20:54:24 #

František

pekné, funkčné ale stále "postrádam" pripojenie androidu na DB firebird

František

24.6.2016 13:40:31 #

Daniel Andraščík

Opravdu pekne a funkcne.

Ad Frantisek: Pokial je mi znamo a pokial sa nic nezmenilo, tak Firebird oficialne nepodporuje android takze to nebude chybou delphi. Predpokladam ze aj ostatne vyvojove nastroje pre Android sa nebudu vediet jednoduchym sposobom pripojit na android. Uz som sa na internete stretol s viacerymi experimentalnymi a beta kniznicami pre pouzivanie Firebirdu na Androide. Ale jednalo sa len o neoficialne pociny jednotlivcov a nezaoberal som sa tym. Mozno by si to nakoniec rozchodil i pod Delphi, kto vie.

Radku. Apka pekna vzorova a funkcna. Jedine s cim si sa mohol este trosku pohrat je ten ako to nazvat "flowing komponentov". Proste ked to nahram na mobil s mansim diplejom a kliknem na editacne pole tak mi vybehne klavesnica ktora mi to pole prekrije. Malo by to vyskrolovat vyssie aby viditelnost editu ostala. Ale to je kozmetika, ako vzrova apka je to dobre.

Co sa tyka Delphi vs Xamarin a ine. Tak je to presne o tom ze kto s cim robi a za ake peniaze. O tom ze delphi a Rad studio nie je prioritne urcene nadsencom sa ani nemusime bavit. To je jasne a je to proste fakt - amen. Proste Starter edicia je takmer k nicomu, pretoze nadsenci zvycajne potrebuju praveze plne edicie, pretoze skusaju raz to a raz tamto, tak potrebuju aspon Enterprise ediciu. A to aby koli tejto edicii clovek predal auto aby si ju mohol kupit. Aspon teda v nasich podmienkach. Pokial zarabate 5000€ vo svajciarsku, tak tych 4000€ raz za niekolko rokov za licenciu mozno aj date. Ale ceskoslovensky nadsenec svoj pol rocny az bezmala rocny plat za to neda, to sa na to bud vykasle, alebo si povedzme na rovinu, radsej to ukradne.

Co je ale skvele na tom ze ked uz ste dajme tomu firma alebo iny zbohatlik, ktory ma tu licenciu aj s mobilnym a Firedac balickom kupenu, tak naozaj vytvorit prvu funkcnu apku pre android je otazkou niekolkych hodin. Ja som mal tohto roku cez vianoce vynimocne dlhu dovolenku tak som si povedal ze skusim nieco s tym androidom spravit. Nadherne na tom bolo, ze ak ste aktivny delphi programator, tak asi za hodinu a pol som (po precitani blogu Petra Houfa http://petrhouf.blogspot.sk/ ) mal vytvorenu aplikaciu ktora bez problemov narabala s datami v SQLite, osetrovala potrebnu logiku a spravanie. Jedine co ma trochu trapilo bolo UI. Predsa len ten FireMonkey je nieco ine ako VCL. V zaklade to clovek naklika rychlo ale prave tie rozne kozmeticke detaili toho UI dokazu zozrat vela casu kym na to clovek pride.
Ak by som sa cez tie vianoce zacal ucit nejaky xamarin tak myslim ze by mi trvalo aj tyzden kym by som nieco relevantne spojazdnil pretoze nie com ceckar.

Takze pokial som firma, vlastniaca licencie tak budem rad ze delphi podporuje Andorid a XOS. Pokial som nadsenec, tak asi siahnem po niecom co je bud free alebo za ine dostupne finacie. Tak to vidim ja a obavam sa ze tak to videlo aj Embarcadero. Uvidime ako sa k tomu postavi Idera.


Daniel Andraščík

29.6.2016 15:43:08 #

Standa

Dobrý den. Dobrá aplikace na Androidu by měla veškeré dlouhotrvající operace - např. načítání dat (z databáze, z internetu) provádět na pozadí. V této ukázkové aplikaci to tak nevypadá - předpokládám, že obsluha Button1Click běží v hlavním vlákně. Je to tak?
Řeší to nějak Firemonkey, nebo se toto pravidlo ignoruje?

Standa

29.6.2016 16:11:44 #

radekc

>Dobrá aplikace na Androidu by měla veškeré dlouhotrvající operace - např. načítání dat (z databáze, z internetu) provádět na pozadí.

To mimochodem říká kdo? A co znamená dlouhotrvající operace?

Jak si to uděláš, tak to budeš mít. Nejsem si jist zda se obsluha spousti asynchrone, to asi ne - a to by bylo podle mne spatne, ale nic ti nebrani to udelat pres TThread, nebo IFuture (http://delphi.cz/post/IFuture-druhe-podani.aspx) nebo jiny mechanismus z RTL v  System.Threading

radekc

3.7.2016 13:03:24 #

PS

Či to beží na pozadí alebo nie je jedno, kolega skôr asi narážal na to, že je dôležité aby sa mal zobraziť nejaký progress indikátor:

https://material.google.com/components/progress-activity.html?authuser=3#progress-activity-behavior

PS

3.7.2016 14:47:09 #

radekc

Ohledně toho aktivity identifikátoru: - na to je std. komponenta TAniIndicator a nastavit u ni Enabled

radekc

13.7.2016 17:36:53 #

Frantšek

ešte by som teda rád videl nejaký príklad app ktorá bude čítať a zapisovať na server do DB (kludne aj MySQL, alebo iné vhodnešie)

Frantšek

13.7.2016 18:44:56 #

radekc

František: myslíš něco jako Mobile Tutorial: Using FireDAC in Mobile Applications (iOS and Android):
http://docwiki.embarcadero.com/RADStudio/Berlin/en/Mobile_Tutorial:_Using_FireDAC_in_Mobile_Applications_%28iOS_and_Android%29

radekc

13.7.2016 21:10:20 #

Frantšek

no áno nieco také, ale ten tvoj postup/popis je mi bližší (a to nie len jazykovo)

Frantšek

14.7.2016 1:03:49 #

Frantšek

nie, to nie je ono, ak som to správne pochopil to je len lokána DB, ale ja sa chcem pripojit na server mimo mobilu

Frantšek

19.7.2016 11:35:20 #

PetrH

Připojení k databázovému serveru z mobilního zařízení je poměrně obsáhlé téma. S pomocí Delphi lze realizovat téměř cokoliv, ale v tomto případě je dobré dopředu důkladně zvážit, jak se bude Váš projekt v budoucnu rozvíjet.
Základním problémem je komunikace s databází. Nejlepší variantou připojení je použití nativních klientských knihoven (rychlost, dostupnost všech serverem poskytovaných funkcí). Bohužel, i když jsou Android a iOS dva z nejpoužívanějších systémů, pro drtivou většinu databází se portace klientských knihoven nenabízí. Existují tak následující možnosti:

1) Přímá komunikace s centrální databází
Musíte koupit (např.: www.devart.com) nebo si napsat vlastní přístup k DB. U větších projektů můžete narazit s bezpečností. Tento přístup navíc předpokládá stálý přístup k datové komunikaci.

2) Vícevrstvá architektura (nejběžnější u podnikových řešení)
Tady je třeba použít takzvanou střední vrstvu (ideálně DataSnap nebo RAD Server). Manipulace s daty se provádí na aplikačním serveru s "velkým" operačním systémem, pro který jsou klientské knihovny běžně dostupné. Na mobilní zařízení se pak posílají jen výsledky nebo se z něj odesílají data ke zpracování. Komunikace probíhá na bázi REST/JSON. Podrobnější popis např. zde: http://www.itbiz.cz/clanky/mobilni-klienty-pro-podnikove-aplikace-iot. Tato varianta bude do budoucna zajímavá i z licenčního hlediska, protože Embarcadero připravuje portaci DataSnapu i RAD Serveru pro Linux (http://delphi.cz/post/Delphi-RoadMap-2016.aspx).

3) Hybridní řešení
Na mobilní zařízení lze použít lokální DB, která je uzpůsobena provozu na Androidu či iOSu. Doporučuji SQLite nebo InterBase IBLite/ToGo. Pak je však třeba vyřešit synchronizaci dat mezi lokální a centrální databází. Není to úplně jednoduché (je třeba ošetřit možné konflikty, generování primárních klíčů apod.), aplikace ale může pracovat (byť v omezeném režimu) i bez připojení k síti.

PetrH

19.7.2016 15:02:37 #

bullhead

...jedna další zajímavá možnost (clienti jedou i na mobilních platformách) od mých oblíbených TMS:
http://www.tmssoftware.com/site/remotedb.asp
B.

bullhead

Komentování ukončeno

Naše nabídka

Partial English version.

MVP
Ing. Radek Červinka - Embarcadero MVP
profil na linkedin, Twitter:@delphicz

Nabízím placené poradenství a konzultace v oblasti programování a vývoje SW.
Dále nabízíme i vývoj speciálního software na zakázku.

Neváhejte nás kontaktovat (i ohledně reklamy nebo burzy práce).

Pokud chcete podpořit tento server libovolnou částkou, můžete použít PayPal. Moc děkuji.

Delphi Certified Developer

O Delphi.cz

Delphi je jediný moderní RAD nástroj podporující tvorbu nativních aplikací pro platformu Win32, Win64 , Mac OSX a na iPhone a Android (s výhledem na další platformy díky FireMonkey) na současném trhu (včetně Windows 8.1).

V současnosti je světová komunita přes dva miliónů vývojářů.

Delphi.cz je nezávislý portál pro uživatele Delphi. Portál není koncipován pro úplné začátečníky, i když i ti se zde nebudou nudit, ale spíše na programátory, kteří již něco znají a chtějí své znalosti dále rozvíjet a sledovat novinky.

Anketa

Poslední komentáře

Comment RSS