Obsah
V kombinaci s rámcem uživatelského rozhraní, jako je jQuery Mobile nebo Dojo Mobile, to umožňuje aplikaci v nativní formě, ale vyvinutou v HTML, CSS a Javascriptu. To znamená, že pokud máme webovou aplikaci, můžeme ji převést na nativní aplikaci pro Android, protože Apache Cordova bude fungovat jako integrovaný webový server na našem mobilním zařízení.Toto rozhraní Api nám dává možnost vytvářet mobilní aplikace, které poběží lokálně na mobilním zařízení a budou založeny na návrhu a vývoji webu, takže s Apache Cordova můžeme prostřednictvím Javascriptu přistupovat k funkcím mobilního zařízení, jako je kamera, data, připojení wifi nebo sítě, klávesnice nebo zvuk, geolokace, vlastní vestavěná databáze a další dostupné funkce.
Je nutné mít Android sdk, Správce zařízení Android Y Java jre nainstalován a také ukazuje spustitelné soubory na systémové proměnné.
Abychom mohli začít, musíme nainstalovat node.js, že je framework, který vám umožní vytvořit server, který jako jazyk klienta používá javascript a Cordova se instaluje pomocí správce balíčků s názvem NPM, který je součástí Node.js.
Instalace bude nejprve provedena na Linuxu, přistoupíme k terminálu v režimu root a stáhneme soubor node.js s následujícím příkazem:
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz
Rozbalte a zkopírujte do jiného adresáře
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz
Nainstalujeme odpovídající balíčky
ls -l / usr / local / bin / node ls -l / usr / local / bin / npm
Poté přejdeme k instalačnímu programu Apache Cordova
sudo npm install -g cordova
Abychom ověřili, že byla správně nainstalována, můžeme do terminálu zapsat cordova -v a vrátí nainstalovanou verzi Apache Cordova.
Po instalaci můžeme pomocí Cordovy vytvářet aplikace, pro vytvoření aplikace přejdeme do adresáře projektu, který máme, a poté z terminálu napíšeme navrhované příkazy:
Struktura příkazu bude:
cordova vytvořit adresář projektu component.package.class
naše aplikace bude například:
cordova create misapp com.tutoriales.misapp MiApp01
Tím se vytvoří struktura projektu a stáhnou se všechny potřebné a aktualizované balíčky, které v naší aplikaci použijeme.
cordova emulovat androidVidíme, jak byl adresář vytvořen misapp, ve struktuře aplikace a tam můžeme najít následující obsah.
Ve složce platformy Obsahuje potřebné soubory, aby Cordova mohla komunikovat s různými zařízeními, zde přidáme platformy, které chceme naši aplikaci otestovat.
Příklad z terminálu provedeme následující příkaz pro použití platformy Android
platforma cordova přidat android
Výsledkem bude:
# / projects / misapp / www $ cordova platform add android Vytváření projektu pro Android… Vytváření projektu Cordova pro platformu Android: Cesta: platformy / android Balíček: com.tutoriales.misapp Název: MiApp01 Cíl pro Android: android-19 Kopírování souborů šablon… Projekt úspěšně vytvořeno.
Tím se nakonfiguruje platný emulátor pro Androd verze 19 co je zač Verze API 19 nebo také Android 4.4 (KITKAT), to znamená, že můžeme emulovat jakékoli zařízení, na kterém běží tato verze nebo nižší. Některé podporované platformy jsou Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, V tomto tutoriálu se zaměříme na Android.
V adresáři www Právě zde bude vyvíjena samotná aplikace, budou zde hostovány soubory HTML, CSS, obrázky a Javascript a všechny potřebné zdroje pro naši aplikaci. Pamatujte, že se jedná o webovou stránku, která poběží nativně na serveru a také vestavěný webový prohlížeč, který poběží jako nativní aplikace pro Android.
Když vytvoříme náš projekt v adresáři www, bude vytvořena obecná struktura projektu definováno kódem nezbytným pro spuštění jednoduché aplikace typu "Ahoj světe"Máme tedy příklad nebo šablonu spustitelné aplikace, která otestuje, že funguje před programováním, ale abychom ji mohli spustit, musíme nejprve přidat platformu nebo platformy, například pokud ji chceme otestovat na zařízeních Android a iOS, použijte následující příkaz:
Pro Android
cordova build AndroidPro iOS
cordova build iOS
Kdykoli spustíme příkaz v adresáři aplikace, bude vědět, že toto je aplikace ke kompilaci. Po kompilaci do adresáře platformy / platformy / android / ant-build / bude nám generovat soubory.
CordovaApp-debug.apk
Což bude instalovatelný a spustitelný soubor APK na jakémkoli zařízení Android. Chcete -li jej spustit, musí mít adresář aplikace plná přístupová oprávnění. Nyní to provedeme poprvé pomocí emulátoru, protože to napíšeme do terminálu.
cordova emulovat android
Nyní můžeme začít vytvářet naši aplikaci úpravou souboru index.html, který se nachází v adresáři www. Kód je jednoduchý, meta detekuje typ zařízení, výřezy přizpůsobí obsah rozlišení a velikosti obrazovky zařízení.
Zbytek kódu je HTML5, soubor cordoba.js bude mít konfiguraci serveru a soubor index.js bude místem, kde budeme programovat naše skripty tak, aby dávaly aplikaci interaktivitu.
Miapp01Připojení k zařízení
Zařízení je připraveno
Provedeme nějaké změny s Html5 a CSS3 k testování a také otestujeme další zařízení Vytvoříme formulář se dvěma poli uvnitř vrstvy aplikaceNázev:
E-mailem:
Hledáme složku css uvnitř souboru index.css a přidáme následující kód pro stylizaci tlačítka .btn {background: # 3498db; obrázek na pozadí: -webkit-lineární gradient (nahoře, # 3498db, # 2980b9); obrázek na pozadí: -moz-lineární-gradient (nahoře, # 3498db, # 2980b9); obrázek na pozadí: -ms-lineární gradient (nahoře, # 3498db, # 2980b9); obrázek na pozadí: -o-lineární gradient (nahoře, # 3498db, # 2980b9); obrázek na pozadí: lineární gradient (dolů, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; poloměr ohraničení: 28 pixelů; rodina písem: Arial; barva: #ffffff; velikost písma: 20px; polstrování: 10px 20px 10px 20px; textová dekorace: žádná; } .btn: hover {pozadí: # 3cb0fd; obrázek na pozadí: -webkit-lineární gradient (nahoře, # 3cb0fd, # 3498db); obrázek na pozadí: -moz-lineární-gradient (nahoře, # 3cb0fd, # 3498db); obrázek na pozadí: -ms-lineární gradient (nahoře, # 3cb0fd, # 3498db); obrázek na pozadí: -o-lineární gradient (nahoře, # 3cb0fd, # 3498db); obrázek na pozadí: lineární gradient (dolů, # 3cb0fd, # 3498db); textová dekorace: žádná; }
Když provedete úpravy, uložíme soubory a znovu spustíme příkazem cordova emulate android, dříve jsme ve Správci zařízení Android nakonfigurovali jiné zařízení.
ZVĚTŠIT
Zatím vidíme, jak vytvořit aplikaci pomocí HTML5, CSS3 a Javascript nebo Jquery mobile pro různá mobilní zařízení bez ohledu na to, zda se jedná o mobilní telefon nebo televizi, která podporuje Android. Velmi důležitým aspektem, který je třeba mít na paměti, je, že celý design by měl být považován za přizpůsobivý nebo citlivý.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
