Produkt dne

Anketa

Jaký tablet si vyberete?

iPAD od Apple
Android od ACERu
Android od Samsungu
Android od ASUSu
Android od jiného výrobce
Windows 8 od Microsoftu
Tablet považuji za zbytečnost



Výsledky
Další ankety

Účastníků: 6109
Komentářů: 914

Doporučujeme

Pořiďte kvalitní repasované PC a šetřete chytře.

O nás

Informace o Palmserver.CZ a kontakty na vydavatele jsou zde. Neposkytujeme rady ohledně software ani hardware! Není to v našich silách. Prosíme, abyste kontaktní informace nezneužívali pro výše uvedené účely.

Appmethod - Vývoj pro více platforem mobilních i stolních zařízení - III.

Sponzorované odkazy:


Dnes si v prostředí Appmethod vytvoříme jednoduchou mobilní aplikaci, která bude pracovat s relační databází InterBase a využijeme i GPS a vestavěný fotoaparát. Aplikace bude umět pořídit fotografii, přidá k ní informace o tom, kdy a kde byla pořízena a spolu s případnou poznámkou uživatele ji uloží do databáze.

Uživateli také umožníme nasbíraná data procházet. Protože naše aplikace má především demonstrovat způsob, jakým se v prostředí Appmethod pracuje, omluvte prosím některá zjednodušení a případné prohřešky proti profesionálnímu návrhu.

Prostředí Appmethod
Nejdříve se pojďme seznámit s vývojovým prostředím, které se skládá z několika oken.

Obr. 1: IDE

  • Hlavní nabídka – Podobně jako jiné produkty nabízí Appmethod klasické „menu“ a nástrojovou lištu pro rychlé volby. Všechny tyto funkce jsou rovněž dostupné z kontextových nabídek příslušných objektů.
  • Okno „Structure“ – Zobrazuje použité komponenty jako hierarchickou strukturu zachycující jejich vzájemné vztahy rodič-dítě. Okno "Structure" je provázáno s dalšími pohledy, jako je "Form Designer" nebo "Live Bindings Designer". Objekt vybraný v okně "Structure" je současně zvýrazněn (vybrán) i v provázaných oknech a naopak. Lze tak snadno najít a aktivovat i komponenty, které nejsou v návrháři formulářů viditelné.
  • Inspektor objektů – Umožňuje nastavit požadované vlastnosti pro aktivní komponentu. V záložce „Events“ nalezneme přehled všech metod. Dvojklik na vybranou metodu nás přenese do editoru kódu pro její ošetření.
  • Správce projektů – Přehledně zobrazuje soubory, z kterých se projekt skládá. Zde se také volí, pro kterou platformu se má aplikace přeložit. Záložka „Data Explorer“ umožňuje definovat a spravovat databázová připojení.
  • Paleta komponent – Paleta nástrojů slouží pro vyhledání konkrétní komponenty. Okno je koncipováno jako "roletové" menu, kde jsou jednotlivé komponenty rozděleny do skupin podle zaměření.
  • Pracovní plocha – Centrální oblast určená pro vlastní vývoj. Uživatel může přepínat mezi vizuálním návrhem a editorem zdrojového kódu.
  • Okno pro výpis zpráv prostředí – Zde se vypisují chybová hlášení a další informace, které prostředí zobrazuje během práce nebo kompilace projektu.

Z hlavní nabídky si otevřeme nový projekt typu „Multi-Device Application “. Pracovat můžeme s buď s jazykem Object Pascal, nebo C++.

Obr. 2: Nový projekt

Z nabízených šablon použijeme šablonu "Header/Footer with Navigation", tedy formulář, který již obsahuje horní a spodní lištu, komponentu „TabControl“ se dvěma definovanými záložkami a komponentami pro navigaci mezi nimi.

Obr. 3: Výběr šablony

Po volbě šablony nás prostředí požádá o volbu umístění pro uložení projektu, a vytvoří všechny potřebné soubory. Pokud ve správci projektů klikneme pravým tlačítkem myši (dále PTM) na jméno projektu (1), můžeme změnit jeho název. Ten je zároveň názvem výsledného spustitelného souboru.

Obr. 4: Správce projektu

Ve správci projektů dále změníme cílovou platformu z Android na Windows. Změnu provedeme kliknutím PTM na vybranou platformu (2) a potvrzením volby „Activate“. Pro účely vývoje a odladění je použití platformy Win32 nebo Win64 výhodnější, protože překlad aplikace je rychlejší než její sestavení a nasazení na mobilní zařízení nebo odpovídající emulátor.

Stejným způsobem jako cílové operační systémy lze rovněž přepínat mezi typem překladu aplikace (3). „Debug“ produkuje větší výsledné soubory, protože obsahují podporu ladění, nastavení „Release“ je pak vhodné pro finální sestavení již otestované a odladěné aplikace.

Nyní aplikaci rozšíříme o další vizuální a nevizuální komponenty. Jednotlivé komponenty jednoduše přetáhneme myší z palety komponent přímo na formulář. Pro vyšší přehlednost jsou komponenty v paletě rozděleny do skupin. Samozřejmě je rovněž možné vyhledat příslušnou komponentu podle jejího názvu.

Na formulář postupně přidáme tyto komponenty:
  • TFDConnection (skupina komponent FireDAC) – spravuje připojení k databázi
  • Dvě instance TFDQuery (skupina komponent FireDAC) – vytváří lokální datovou sadu
  • TFDGUIxWaitCursor (skupina komponent FireDAC UI) – platformě nezávislé „přesýpací hodiny“
  • TFDPhysIBDriverLink (skupina komponent FireDAC Links) – ovladač pro databázový stroj
  • TCameraComponent (skupina komponent Additional) – ovládání fotoaparátu
  • TLocationSensor (skupina komponent Sensors) – zpřístupňuje funkce GPS
  • TImage (skupina komponent Shapes) – zobrazení a práce s obrázky
  • TListView (skupina komponent Standard) – zobrazí data jako položkový seznam
  • TEdit (skupina komponent Standard) – komponenta pro zadání textu
  • Dvě instance TButton (skupina komponent Standard) – klasické tlačítko

Obr. 5: Komponenty

V okně „Struktura“ si ověřte, že hierarchie komponent odpovídá obrázku a případně ji upravte. Jednotlivé komponenty lze v rámci stromu podle potřeby přetahovat myší. Tento krok je důležitý proto, aby se jednotlivé prvky uživatelského rozhraní zobrazovaly na správné kartě.

Připojení k databázi
Teď již jen zbývá aplikaci „oživit“. Nejdříve zprovozníme připojení k databázovému stroji InterBase. Klikneme na komponentu „FDConnection“ , v inspektoru objektů vyhledáme vlastnost „DriverName“ a z výběrového boxu zvolíme hodnotu „IB“. Dále pro vlastnost „LoginPrompt“ zrušíme zatržení. Při přihlášení k databázi tak uživatel nebude muset zadávat uživatelské jméno a heslo. V sekci „Params“ zadáme hodnoty pro připojení k databázi. Cestu k datovému souboru, uživatelské jméno (sysdba) a heslo (masterkey). Nakonec nastavíme parametr „Active“ na hodnotu „True“. Po těchto úpravách vybereme základní formulář, který se aktuálně jmenuje „HeaderFooterwithNavigation“. V inspektoru objektů se přepneme na záložku „Events“ a vyhledáme událost „OnCreate“. Příkazy, které zde uvedeme, se provedou hned při startu aplikace. Událost již obsahuje řetězec „FormCreate“. Dvojklikem nás prostředí přenese do editoru kódu, do těla příslušné procedury. Zde je třeba doplnit následující kód:

FDConnection1.Connected := False;
{$IF DEFINED(IOS) or DEFINED(ANDROID)}
FDConnection1.Params.Values['Database'] := TPath.Combine
(TPath.GetDocumentsPath, 'IBDB.IB');
{$ENDIF}
FDConnection1.Connected := True;

První příkaz zajistí, abychom byli odpojeni od databáze a mohli tak měnit nastavení připojení. Následně nastavíme cestu k databázovému souboru. Protože je navigace v systému souboru rozdílná, použijeme podmíněnou kompilaci. Jiné nastavení tak bude platit pro Windows a jiné pro Android nebo iOS. Poslední příkaz provede připojení k databázovému stroji. V reálné aplikaci by bylo vhodné ošetřit připojení pomocí bloku „Try-Catch“. Protože jsme kód vložili do události „OnCreate“ hlavního formuláře, dojde k připojení k databázi hned po startu aplikace.

Nyní klikneme PTM na komponentu „FDQuery1“ a z kontextové nabídky vybereme volbu „Query editor“. Zde zapíšeme dotaz pro získání dat z databázového stroje („select * from info;“), který bude vracet všechny záznamy z tabulky „info“ naší testovací DB a klikneme na tlačítko „Execute“. Ve spodní části dialogu je možné si zobrazit získaná data, strukturu tabulky nebo případná hlášení zaslaná databázovým strojem. Potvrdíme tlačítkem „OK“ a v inspektoru objektů nastavíme komponentě „FDQuery1“ parametr „Active“ na hodnotu „True“. Od této chvíle jsou data dostupná pro zobrazení v aplikaci.

Obr. 6: „Query“ editor

Zobrazení dat
Pro zobrazení dat získaných z databázového stroje použijeme dříve vloženou komponentu „ListView“. V inspektoru objektů ji nastavíme parametr „Align“ na hodnotu „Client“. Prvek tak se tak bude automaticky přizpůsobovat velikosti obrazovky a zaplní dostupný prostor mezi horní a spodní lištou aplikace. Pro parametr „ItemApperance“ vybereme z nabídky možnost „ImageListItemBottomDetail“. Každá položka „ListView“ tak bude umět zobrazit grafiku, dvě textová pole a bude opatřena tlačítkem pro zobrazení detailu. Na komponentě pak kliknutím na PTM zobrazíme kontextovou nabídku a klikneme na „Bind Visually“. Otevře se vizuální editor, kde myší propojíme položky dotazu s prvky „ListView“ (viz obrázek níže). LiveBindings zajistí propojení mezi datovým zdrojem (komponenta „Query1“) a prvkem, který data zobrazuje („ListView1“). Jedná se skutečně o „živou“ vazbu, takže například při výběru položky v seznamu se zároveň posune ukazatel v datové sadě zpravované komponentou „Query1“. Bez kódování tak lze vytvářet i poměrně složité databázové aplikace.

Obr. 7: LiveBindings

Obsluha fotoaparátu
Další funkcí, kterou je třeba „naprogramovat“ je načtení snímku z fotoaparátu. Ten nebudeme do databáze ukládat rovnou, ale umožníme uživateli, aby si jej nejdříve prohlédl a uložil až v případě, kdy bude s kvalitou pořízené fotografie spokojen. Snímek tak nejprve načteme do komponenty „Image“, která poskytne uživateli náhled. Příslušný kód bude spuštěn levým tlačítkem („Button1“) na spodní liště aplikace. Tlačítko si přejmenujeme („Text“ = Foto), ukotvíme jej k levému spodnímu rohu aplikace („Anchors“, „akLeft“=True, „akBottom“=True) a dvojklikem myši se přeneseme do editoru. Bez ohledu na velikost, nebo orientaci obrazovky koncového zařízení tak bude prvek na „správném“ místě. Zde doplníme následující kód:

CameraComponent1.Kind := FMX.Media.TCameraKind.BackCamera;
CameraComponent1.Active := True;
CameraComponent1.SampleBufferToBitmap(Image1.Bitmap, True); Image1.Visible := True;

První řádek kódu určuje, že bude použit zadní fotoaparát přístroje. Druhý příkaz fotoaparát aktivuje a třetí načte snímek do komponenty „Image“. Poslední řádek kódu získanou fotografii zobrazí.

Získání GPS souřadnic
Spolu s pořízeným snímkem bychom do databáze rádi uložili také informaci o tom, kde byl pořízen. Pro tento účel si vytvoříme proměnnou typu string. Do sekce „var“ v kódu přidáme zápis „lokace: String;“. Do události „FormCreate“ přidáme za připojení k databázi aktivaci GPS senzoru (LocationSensor1.Active := True;).

Nakonec vybereme komponentu „LocationSensor“a v inspektoru objektů v záložce „Events“ dvakrát klikneme na událost „OnLocationChanged“. V editoru pak doplníme následující kód:

lokace := NewLocation.Latitude.ToString + ', ' +
NewLocation.Longitude.ToString;

Při každé změně pozice zařízení tak bude do proměnné „lokace“ uložena aktuální zeměpisná šířka a délka.

Uložení dat do databáze
Pro uložení získaných dat nejdříve nastavíme komponentu „FDQuery2“. Za použití stejného postupu jako u „FDQuery1“ otevřeme „Query editor“ a vložíme SQL pro aktualizaci tabulky „INFO“: Insert into POZNAMKA(ID, DATUM, OBR) values(:id, :dt, :obr); Přepneme se do záložky „Parameters“, kde se automaticky načetly parametry vloženého dotazu. Pro každý z parametrů nastavíme typ „ptInput“ (jedná se o vstupní parametry) a odpovídající datový typ (pro „obr“ ftBlob, pro „meta“ a „pozn “ftString).

Obr. 8: Úprava parametrů

Uložení dat bude spouštět tlačítko „Button2“. Jeho vlastnost „Text“ upravíme na „Uložit“ a podobně jako u prvního tlačítka jej ukotvíme. Tentokrát však ke spodní a pravé hraně obrazovky. Do události „OnClick“ vložíme níže uvedený kód:

var
s: TStream;
begin
s := TStream.Create;
FDQuery2.Close;
Image1.Bitmap.SaveToStream(s);
FDQuery2.ParamByName('obr').LoadFromStream(s, ftBlob);
FDQuery2.ParamByName('meta').AsString := lokace;
FDQuery2.ParamByName('pozn').AsString := edit1.Text;
FDQuery2.ExecSQL;
FDQuery1.Refresh;
LinkFillControlToField1.BindList.FillList;
end;

Jak je patrné, kód deaktivuje komponentu „FDQuery2“, aby bylo možné měnit její nastavení. Poté přiřadíme jednotlivým vstupním parametrům dotazu příslušné hodnoty. Obrázek načteme z komponenty „Image1“, GPS souřadnice z proměnné „lokace“ a uživatelem zadanou poznámku z komponenty „Edit1“. Za pomoci příkazu „ExecSQL“ spustíme dříve definovaný příkaz pro vložení záznamu. Aby se přidaný záznam ihned zobrazil i v komponentě „ListView“, aktualizujeme jeho datovou sadu a také LiveBindings propojení.

Pro lepší vzhled aplikace ještě můžeme na první kartě upravit pozice komponent „Image1“ a „Edit1“ a provést jejich ukotvení k některé z hran obrazovky. Tím je naše aplikace hotova. I když syntaktické chyby hlídá editor již v průběhu zápisu kódu a navíc většinu příkazů i sám doplňuje, doporučuji aplikaci nejdříve spustit v prostředí Windows (klávesa „F9“). Bohužel tak zpravidla nelze ověřit funkce specifické pro mobilní zařízení jako je námi použitá komunikace s GPS modulem nebo práci s fotoaparátem.

Nasazení aplikace na mobilní zařízení
Nasazení mobilních aplikací se ve většině případů realizuje prostřednictvím aplikačního obchodu pro danou cílovou platformu. Společnosti Apple i Google na svých stránkách velmi podrobně popisují, jaké informace je třeba poskytnout a jaké jsou podmínky pro uveřejnění aplikace. Z pohledu Apmethod však stojí za zmínku, že aplikaci můžeme nasadit i přímo na připojené mobilní zařízení a ihned ji otestovat. Spolu s aplikací je často třeba distribuovat mnoho dalších souborů. V našem případě to je například databázový server InterBase, licenční informace a pochopitelně vlastní data. Pro tyto účely nabízí Appmethod pomocnou ruku ve formě nástroje „Deployment Manager“ (hlavní nabídka „Project/Deployment“).

Obr. 9: „Deployment manažer“

Zde lze přidávat nejen libovolné soubory pro šíření spolu s aplikací, ale volba „Add Featured Files“ Vám pomůže s nasazením zmiňovaných databázových souborů. Nakonec v okně „Správce projektů“ aktivujeme dříve popsaným způsobem platformu, na kterou hodláme aplikaci nasadit (v mém případě zařízení Google Nexus7) a necháme aplikaci přeložit (Shift+Ctrl+F9). Jak je vidět na obrázku, místo fyzického zařízení je možné zvolit také „Application Store“. Pak by byla aplikace publikována v aplikačním obchodě.

Obr. 10: Volba cílové platformy

Po úspěšném překlad vytvoří Appmethod .apk balíček a spolu s ostatními soubory jej nasadí na připojené zařízení. Po dokončení se aplikace na zařízení automaticky spustí.

Obr. 11: Finální aplikace

Pokud Vás jednoduchá ukázka použití Apmethod zaujala a máte chuť si produkt vyzkoušet, pak připomínám, že nástroj je ke stažení na stránce Appmethod. Cenové informace a možnost zakoupení najdete na stránkách webového obchodu zastoupení Embarcadero pro ČR a SR.

Články na podobné téma:

Sponzorované odkazy:




Publikováno: 23.12, 2014  Autor: Josef Tkáč   Téma: PR články
 

Související odkazy

Hodnocení článku

Průměrné hodnocení: 5
Účastníků: 1

Výborný

Zvolte počet hvězdiček:

Výborný
Velmi dobré
Dobré
Povedený
Špatné

Možnosti

Související témata

PR články

"Appmethod - Vývoj pro více platforem mobilních i stolních zařízení - III." | Přihlásit/Registrovat | 0 komentářů
Komentáře vlastní jejich autoři. Neodpovídáme za jejich obsah.
Vzhled vytvořil Webdesign Dra-Go Copyright Œ 2007-2008. Čas potřebný ke zpracování stránky: 0.22 sekund