Lag native webapplikasjoner på Android med Apache Cordova

Kombinert med et rammeverk for brukergrensesnitt, for eksempel jQuery Mobile eller Dojo Mobile, tillater dette et program i opprinnelig form, men utviklet i HTML, CSS og Javascript. Dette innebærer at hvis vi har en webapplikasjon, kan vi konvertere den til en native applikasjon for Android, siden Apache Cordova vil fungere som en innebygd webserver på mobilenheten vår.
Denne Api gir oss muligheten til å bygge mobile applikasjoner som vil kjøre lokalt på den mobile enheten og vil være basert på webdesign og utvikling, så med Apache Cordova kan vi få tilgang til funksjonaliteten til den mobile enheten som kamera, data, tilkoblinger wifi eller nettverk, tastatur eller lyd, geolocation, vår egen innebygde database og annen tilgjengelig funksjonalitet.

For denne opplæringen vil vi bruke Netbeans 8.0.2 som følger med Apache cordova installert, men vi vil også se hvordan du installerer det fra bunnen av for å kunne bruke det med en hvilken som helst annen redaktør, inkludert en så enkel som Notisblokk ++ eller Bluefish.
Det er nødvendig å ha Android sdk, Android Enhetsbehandling Y Java jre installert, og peker også kjørbare filer på systemvariablene.
For å starte må vi installere node.js, det er et rammeverk som lar deg lage en server som bruker javascript som klientspråk og Cordova installeres ved hjelp av pakkelederen NPM som er en del av Node.js.
Installasjonen vil bli utført på Linux først, vi får tilgang til terminalen i rotmodus og laster ned filen node.js med følgende kommando:

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

Pakk ut og kopier til en annen katalog

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

Vi installerer de tilsvarende pakkene

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

Deretter går vi videre til Apache Cordova installasjonsprogram

sudo npm install -g cordova

For å bekrefte at den er installert riktig kan vi skrive i terminalen cordova -v og den vil returnere versjonen av Apache Cordova installert.
Etter installasjonen kan vi lage applikasjoner med Cordova, for å opprette et program går vi til en prosjektkatalog som vi har, og deretter skriver vi de foreslåtte kommandoene fra terminalen:
Kommandostrukturen vil være:

cordova opprett prosjektkatalog komponent. pakke.klasse

så for eksempel vil søknaden vår være:

cordova create misapp com.tutoriales.misapp MiApp01

Dette vil skape strukturen i prosjektet og laste ned alle nødvendige og oppdaterte pakker som vi skal bruke i applikasjonen vår.

cordova emulere android

Vi kan se hvordan katalogen ble opprettet feilapp, innenfor strukturen til applikasjonen og der kan vi finne følgende innhold.
I mappen plattformer Den inneholder de nødvendige filene slik at Cordova kan samhandle med de forskjellige enhetene. Her vil vi legge til plattformene som vi vil teste applikasjonen vår.
Eksempel fra terminalen vil vi utføre følgende kommando for å bruke Android -plattformen

cordova plattform legg til android

Resultatet blir:

 # / projects / misapp / www $ cordova platform add android Oppretter android project … Oppretter Cordova project for Android platform: Path: platforms / android Package: com.tutoriales.misapp Name: MiApp01 Android target: android-19 Kopierer malfiler … Prosjekt vellykket opprettet. 

Dette vil konfigurere en gyldig emulator for Androd versjon 19 hva er han API -versjon 19 eller også Android 4.4 (KITKAT), det vil si at vi kan etterligne alle enheter som kjører denne versjonen eller lavere. Noen plattformer som støttes er Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, I denne opplæringen vil vi fokusere på Android.
I adresseboken www Det er her selve applikasjonen vil bli utviklet, det vil være vert for HTML-, CSS-, bilder og Javascript -filer samt alle nødvendige ressurser for applikasjonen vår. Husk at det er en nettside som vil kjøre opprinnelig på en server og også en innebygd nettleser som vil kjøre som en opprinnelig app på Android.
Når vi oppretter prosjektet vårt i katalogen www, vil det bli opprettet en generisk prosjektstruktur definert med koden som er nødvendig for å kjøre en enkel applikasjon av typen "Hei Verden“Så vi har et eksempel eller en mal for en kjørbar applikasjon for å teste at den fungerer før du programmerer, men for å kjøre den må vi først legge til plattformen eller plattformene, for eksempel hvis vi vil teste den på Android- og iOS -enheter bruk følgende kommando:
For Android

cordova build Android

For ios

cordova build iOS

Når vi utfører kommandoen i applikasjonskatalogen, vet den at dette er programmet som skal kompileres. En gang samlet i katalogen plattformer / plattformer / android / ant-build / det vil generere filer for oss.

CordovaApp-debug.apk

Som vil være den installerbare og kjørbare apk -filen på en hvilken som helst Android -enhet. For å kjøre den må applikasjonskatalogen ha full tilgangstillatelse. Nå skal vi utføre det for første gang med emulatoren for dette skriver vi i terminalen.

cordova emulere android

Vi kan se en generisk enhet som viser applikasjonen, vi klikker på den og vi kan se standard Apache -applikasjon.
Nå kan vi begynne å lage programmet ved å redigere index.html -filen som finnes i www -katalogen. Koden er enkel, metaen oppdager typen enhet, visningsportene vil tilpasse innholdet til oppløsning og skjermstørrelse på enheten.
Resten av koden er HTML5, cordoba.js -filen vil ha serverkonfigurasjon og index.js -filen vil være der vi skal programmere skriptene våre for å gi applikasjonen interaktivitet.

 Miapp01
Koble til enheten
Enheten er klar
La oss gjøre noen endringer med Html5 og CSS3 for å teste, og vi vil også teste en annen enhet La oss lage et skjema med to felt inne i applagetNavn:
E-post:
Vi ser etter css -mappen inne i index.css -filen, og vi legger til følgende kode for å style knappen .btn {bakgrunn: # 3498db; bakgrunnsbilde: -webkit-lineær-gradient (topp, # 3498db, # 2980b9); bakgrunnsbilde: -moz-lineær-gradient (topp, # 3498db, # 2980b9); bakgrunnsbilde: -ms-lineær-gradient (topp, # 3498db, # 2980b9); bakgrunnsbilde: -o-lineær-gradient (topp, # 3498db, # 2980b9); bakgrunnsbilde: lineær-gradient (til bunn, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; kant-radius: 28px; font-family: Arial; farge: #ffffff; skriftstørrelse: 20px; polstring: 10px 20px 10px 20px; tekst-dekorasjon: ingen; } .btn: svev {bakgrunn: # 3cb0fd; bakgrunnsbilde: -webkit-lineær-gradient (topp, # 3cb0fd, # 3498db); bakgrunnsbilde: -moz-lineær-gradient (topp, # 3cb0fd, # 3498db); bakgrunnsbilde: -ms-lineær-gradient (topp, # 3cb0fd, # 3498db); bakgrunnsbilde: -o-lineær-gradient (topp, # 3cb0fd, # 3498db); bakgrunnsbilde: lineær-gradient (til bunn, # 3cb0fd, # 3498db); tekst-dekorasjon: ingen; } 

Når du har gjort endringene, lagrer vi filene og kjører igjen med cordova -emulere android -kommandoen, tidligere konfigurerte vi en annen enhet i Android Device Manager.

FORSTØRRE

Endelig har vi endringene våre i gang. I en annen opplæring vil vi se hvordan vi lager forskjellige applikasjoner med større kompleksitet.
Så langt ser vi hvordan du lager applikasjon med HTML5, CSS3 og Javascript eller Jquery mobil for forskjellige mobile enheter uansett om det er en mobiltelefon eller en TV som støtter Android. Et veldig viktig aspekt å huske på er at hele designet skal betraktes som tilpasningsdyktig eller responsivt.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng