✅ Skapa inbyggda webbapplikationer på Android med Apache Cordova

Innehållsförteckning

Kombinerat med ett ramverk för användargränssnitt, till exempel jQuery Mobile eller Dojo Mobile, tillåter detta en applikation i inbyggd form men utvecklad i HTML, CSS och Javascript. Detta innebär att om vi har en webbapplikation kan vi konvertera den till en inbyggd applikation för Android, eftersom Apache Cordova kommer att fungera som en inbäddad webbserver på vår mobila enhet.
Denna Api ger oss möjligheten att bygga mobila applikationer som körs lokalt på den mobila enheten och kommer att vara baserade på webbdesign och utveckling, så med Apache Cordova kan vi komma åt via Javascript funktionerna i den mobila enheten som kameran, data, anslutningar wifi eller nätverk, tangentbord eller ljud, geolokalisering, vår egen inbyggda databas och annan tillgänglig funktionalitet.

För denna handledning kommer vi att använda Netbeans 8.0.2 som följer med Apache cordova installerat men vi kommer också att se hur man installerar det från grunden för att kunna använda det med alla andra redaktörer inklusive en så enkel som Anteckningsblock ++ eller Blåfisk.
Det är nödvändigt att ha Android sdk, Android Device Manager Y Java jre installerad, vilket också pekar körbara filer på systemvariablerna.
För att starta måste vi installera nod.js, det där är ett ramverk som låter dig skapa en server som använder javascript som ett klientspråk och Cordova installeras med pakethanteraren NPM som är en del av Node.js.
Installationen kommer att göras på Linux först, vi kommer åt terminalen i rotläge och laddar ner filen nod.js med följande kommando:

wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz

Packa upp och kopiera till en annan katalog

sudo tar -C / usr / local --strip-komponenter 1 -xzf nod-v0.10.34-linux-x86.tar.gz

Vi installerar motsvarande paket

 ls -l / usr / local / bin / nod ls -l / usr / local / bin / npm

Sedan går vi vidare till Apache Cordova installatör

sudo npm install -g cordova

För att verifiera att den har installerats korrekt kan vi skriva i terminalen cordova -v och den returnerar versionen av Apache Cordova installerad.
Efter installationen kan vi skapa applikationer med Cordova, för att skapa ett program går vi till en projektkatalog som vi har och sedan från terminalen skriver vi de föreslagna kommandona:
Kommandostrukturen kommer att vara:

cordova skapa projektkatalogkomponent.paket.klass

så till exempel kommer vår ansökan att vara:

cordova skapa misapp com.tutoriales.misapp MiApp01

Detta skapar projektets struktur och laddar ner alla nödvändiga och uppdaterade paket som vi kommer att använda i vår applikation.

cordova emulera android

Vi kan se hur katalogen skapades felapp, inom applikationens struktur och där kan vi hitta följande innehåll.
I mappen plattformar Den innehåller de nödvändiga filerna så att Cordova kan interagera med de olika enheterna, här lägger vi till plattformarna som vi vill testa vår applikation.
Exempel från terminalen kommer vi att utföra följande kommando för att använda Android -plattformen

cordova plattform lägg till android

Resultatet blir:

 # / projects / misapp / www $ cordova-plattform lägg till android Skapar Android-projekt … Skapar Cordova-projekt för Android-plattformen: Sökväg: plattformar / android Paket: com.tutoriales.misapp Namn: MiApp01 Android-mål: android-19 Kopierar mallfiler … Projekt framgångsrikt skapad.

Detta kommer att konfigurera en giltig emulator för Androd version 19 vad är han API -version 19 eller också Android 4.4 (KITKAT) det vill säga att vi kan emulera vilken enhet som helst som kör den här versionen eller lägre. Vissa plattformar som stöds är Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, I denna handledning kommer vi att fokusera på Android.
I adressboken www Det är där själva applikationen kommer att utvecklas, det kommer att vara värd för HTML-, CSS-, bilder och Javascript -filer samt alla nödvändiga resurser för vår applikation, kom ihåg att det är en webbsida som körs inbyggd i en server och även en inbäddad webbläsare som körs som en inbyggd app på Android.
När vi skapar vårt projekt i katalogen www, en generisk projektstruktur kommer att skapas definierad med koden som är nödvändig för att köra en enkel applikation av typen "Hej världen”Så vi har ett exempel eller en mall för en körbar applikation för att testa att den fungerar innan du programmerar, men för att köra den måste vi först lägga till plattformen eller plattformarna, till exempel om vi vill testa den på Android- och iOS -enheter använd följande kommando:
För Android

cordova build Android

För ios

cordova build iOS

Närhelst vi kör kommandot i applikationskatalogen vet det att detta är programmet som ska kompileras. En gång sammanställd i katalogen plattformar / plattformar / android / ant-build / det kommer att generera filer för oss.

CordovaApp-debug.apk

Vilken är den installerbara och körbara apk -filen på alla Android -enheter. För att köra den måste applikationskatalogen ha fullständig åtkomstbehörighet. Nu kommer vi att köra det för första gången med emulatorn för detta skriver vi i terminalen.

cordova emulera android

Vi kan se en generisk enhet som visar applikationen, vi klickar på den och vi kan se standardprogrammet Apache.
Nu kan vi börja skapa vår applikation genom att redigera filen index.html som finns i www -katalogen. Koden är enkel, metan upptäcker typ av enhet, visningsportarna kommer att anpassa innehållet till enhetens upplösning och skärmstorlek.
Resten av koden är HTML5, filen cordoba.js kommer att ha serverkonfiguration och index.js -filen kommer att vara där vi kommer att programmera våra skript för att ge interaktivitet till applikationen.

 Miapp01
Ansluter till enheten
Enheten är klar
Låt oss göra några ändringar med Html5 och CSS3 för att testa och vi kommer också att testa en annan enhet Låt oss skapa ett formulär med två fält inuti appskiktetNamn:
E-post:
Vi letar efter css -mappen inuti index.css -filen och vi lägger till följande kod för att utforma knappen .btn {bakgrund: # 3498db; bakgrundsbild: -webkit-linjär-gradient (topp, # 3498db, # 2980b9); bakgrundsbild: -moz-linjär-gradient (topp, # 3498db, # 2980b9); bakgrundsbild: -ms-linjär-gradient (topp, # 3498db, # 2980b9); bakgrundsbild: -o-linjär-gradient (topp, # 3498db, # 2980b9); bakgrundsbild: linjär-gradient (till botten, # 3498db, # 2980b9); -webkit-gräns-radie: 28; -moz-gräns-radie: 28; gränsradie: 28px; font-family: Arial; färg: #ffffff; typsnitt: 20px; vaddering: 10px 20px 10px 20px; text-dekoration: ingen; } .btn: sväva {bakgrund: # 3cb0fd; bakgrundsbild: -webkit-linjär-gradient (topp, # 3cb0fd, # 3498db); bakgrundsbild: -moz-linjär-gradient (topp, # 3cb0fd, # 3498db); bakgrundsbild: -ms-linjär-gradient (topp, # 3cb0fd, # 3498db); bakgrundsbild: -o-linjär-gradient (topp, # 3cb0fd, # 3498db); bakgrundsbild: linjär-gradient (till botten, # 3cb0fd, # 3498db); text-dekoration: ingen; }

När du har gjort ändringarna sparar vi filerna och körs igen med cordova -emulera android -kommandot, tidigare konfigurerade vi en annan enhet i Android Device Manager.

FÖRSTORA

Slutligen har vi våra förändringar som fungerar, i en annan handledning kommer vi att se hur man gör olika applikationer med större komplexitet.
Hittills ser vi hur man skapar applikation med HTML5, CSS3 och Javascript eller Jquery mobil för olika mobila enheter oavsett om det är en mobiltelefon eller en TV som stöder Android. En mycket viktig aspekt att tänka på är att hela designen ska ses som anpassningsbar eller lyhörd.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng