Opret native webapplikationer på Android med Apache Cordova

Kombineret med en ramme for brugergrænseflader, såsom jQuery Mobile eller Dojo Mobile, tillader dette en applikation i native form, men udviklet i HTML, CSS og Javascript. Dette indebærer, at hvis vi har en webapplikation, kan vi konvertere den til en native applikation til Android, da Apache Cordova vil fungere som en integreret webserver på vores mobile enhed.
Denne Api giver os mulighed for at bygge mobile applikationer, der kører lokalt på mobilenheden og vil være baseret på webdesign og udvikling, så med Apache Cordova kan vi via Javascript få adgang til funktionaliteterne på den mobile enhed såsom kameraet, data, forbindelser wifi eller netværk, tastatur eller lyd, geolocation, vores egen integrerede database og enhver anden tilgængelig funktionalitet.

Til denne tutorial vil vi bruge Netbeans 8.0.2 der følger med Apache cordova installeret, men vi vil også se, hvordan du installerer det fra bunden for at kunne bruge det med enhver anden editor, herunder en så enkel som Notesblok ++ eller Bluefish.
Det er nødvendigt at have Android sdk, Android Enhedshåndtering Y Java jre installeret, og peger også eksekverbare filer på systemvariablerne.
For at starte skal vi installere node.js, at er en ramme, der giver dig mulighed for at oprette en server, der bruger javascript som klientsprog og Cordova installeres ved hjælp af pakkehåndtereren NPM, som er en del af Node.js.
Installationen udføres først på Linux, vi får adgang til terminalen i rodtilstand og downloader filen node.js med følgende kommando:

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

Pak ud og kopier til et andet bibliotek

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

Vi installerer de tilsvarende pakker

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

Derefter går vi videre til Apache Cordova installatør

sudo npm install -g cordova

For at kontrollere, at den er installeret korrekt, kan vi skrive i terminalen cordova -v og den returnerer den installerede version af Apache Cordova.
Efter installationen kan vi oprette applikationer med Cordova, for at oprette et program går vi til et projektmappe, som vi har, og derefter skriver vi fra terminalen de foreslåede kommandoer:
Kommandostrukturen vil være:

cordova opret projektkatalog komponent. pakke.klasse

så for eksempel vil vores ansøgning være:

cordova opret misapp com.tutoriales.misapp MiApp01

Dette vil skabe projektets struktur og downloade alle de nødvendige og opdaterede pakker, som vi vil bruge i vores applikation.

cordova emulere android

Vi kan se, hvordan biblioteket blev oprettet forkert anvendelseinden for applikationens struktur og der kan vi finde følgende indhold.
I mappen platforme Den indeholder de nødvendige filer, så Cordova kan interagere med de forskellige enheder, her tilføjer vi de platforme, som vi vil teste vores applikation.
Eksempel fra terminalen vil vi udføre følgende kommando for at bruge Android -platformen

cordova platform tilføj android

Resultatet bliver:

 # / projects / misapp / www $ cordova platform tilføj android Opretter android projekt … Opretter Cordova projekt til Android platform: Sti: platforme / android Pakke: com.tutoriales.misapp Navn: MiApp01 Android mål: android-19 Kopiering af skabelon filer … Projekt med succes oprettet. 

Dette vil konfigurere en gyldig emulator til Androd version 19 hvad er han API -version 19 eller også Android 4.4 (KITKAT), det vil sige, at vi kan efterligne enhver enhed, der kører denne version eller lavere. Nogle understøttede platforme er Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, I denne vejledning fokuserer vi på Android.
I adressebogen www Det er her selve applikationen vil blive udviklet, der vil blive hostet HTML-, CSS-, billeder og Javascript -filer samt alle de nødvendige ressourcer til vores applikation, husk at det er en webside, der kører indbygget på en server og også en integreret webbrowser, der kører som en indbygget app på Android.
Når vi opretter vores projekt i biblioteket www, vil der blive oprettet en generisk projektstruktur defineret med den kode, der er nødvendig for at køre en simpel applikation af typen "Hej Verden“Så vi har et eksempel eller en skabelon til en eksekverbar applikation til at teste, at det fungerer før programmering, men for at køre det skal vi først tilføje platformen eller platformene, for eksempel hvis vi vil teste det på Android- og iOS -enheder, brug følgende kommando:
Til Android

cordova build Android

Til ios

cordova build iOS

Når vi udfører kommandoen i applikationsmappen, ved den, at dette er det program, der skal kompileres. Når det er blevet samlet i biblioteket platforme / platforme / android / ant-build / det vil generere filer til os.

CordovaApp-debug.apk

Hvilken vil være den installerbare og eksekverbare apk -fil på enhver Android -enhed. For at køre det skal applikationsmappen have fuld adgangstilladelse. Nu vil vi udføre det for første gang med emulatoren for dette skriver vi i terminalen.

cordova emulere android

Vi kan se en generisk enhed, der viser applikationen, vi klikker på den, og vi kan se standard Apache -applikationen.
Nu kan vi begynde at oprette vores applikation ved at redigere filen index.html, der findes i www -biblioteket. Koden er enkel, metaen registrerer typen af ​​enhed, visningsportene tilpasser indholdet til enhedens opløsning og skærmstørrelse.
Resten af ​​koden er HTML5, cordoba.js -filen vil have serverkonfiguration, og filen index.js vil være, hvor vi programmerer vores scripts til at give applikationen interaktivitet.

 Miapp01
Tilslutning til enhed
Enheden er klar
Lad os foretage nogle ændringer med Html5 og CSS3 for at teste, og vi vil også teste en anden enhed Lad os oprette en formular med to felter inde i applagetNavn:
E-mail:
Vi leder efter css -mappen inde i index.css -filen, og vi tilføjer følgende kode for at style knappen .btn {baggrund: # 3498db; baggrundsbillede: -webkit-lineær-gradient (top, # 3498db, # 2980b9); baggrundsbillede: -moz-lineær-gradient (top, # 3498db, # 2980b9); baggrundsbillede: -ms-lineær-gradient (top, # 3498db, # 2980b9); baggrundsbillede: -o-lineær-gradient (top, # 3498db, # 2980b9); baggrundsbillede: lineær-gradient (til bunden, # 3498db, # 2980b9); -webkit-grænse-radius: 28; -moz-border-radius: 28; grænse-radius: 28px; font-familie: Arial; farve: #ffffff; skrifttype: 20px; polstring: 10px 20px 10px 20px; tekst-dekoration: ingen; } .btn: svæve {baggrund: # 3cb0fd; baggrundsbillede: -webkit-lineær-gradient (top, # 3cb0fd, # 3498db); baggrundsbillede: -moz-lineær-gradient (top, # 3cb0fd, # 3498db); baggrundsbillede: -ms-lineær-gradient (top, # 3cb0fd, # 3498db); baggrundsbillede: -o-lineær-gradient (top, # 3cb0fd, # 3498db); baggrundsbillede: lineær-gradient (til bunden, # 3cb0fd, # 3498db); tekst-dekoration: ingen; } 

Når du har foretaget ændringerne, gemmer vi filerne og kører igen med cordova -emulat Android -kommandoen, tidligere konfigurerede vi en anden enhed i Android Device Manager.

FORSTØRRE

Endelig har vi vores ændringer i gang, i en anden vejledning vil vi se, hvordan vi laver forskellige applikationer med større kompleksitet.
Indtil videre ser vi, hvordan man opretter applikation med HTML5, CSS3 og Javascript eller Jquery mobil til forskellige mobile enheder uanset om det er en mobiltelefon eller et tv, der understøtter Android. Et meget vigtigt aspekt at huske på er, at hele designet skal betragtes som tilpasningsdygtigt eller lydhørt.Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt