Kurkite vietines žiniatinklio programas „Android“ naudodami „Apache Cordova“

Kartu su vartotojo sąsajos sistema, tokia kaip „jQuery Mobile“ ar „Dojo Mobile“, tai leidžia naudoti programą savąja forma, bet sukurta HTML, CSS ir „Javascript“. Tai reiškia, kad jei turime žiniatinklio programą, galime ją paversti „Android“ savąja programa, nes „Apache Cordova“ veiks kaip įterptinis žiniatinklio serveris mūsų mobiliajame įrenginyje.
Šis „Api“ suteikia mums galimybę kurti mobiliąsias programas, kurios bus paleistos lokaliai mobiliajame įrenginyje ir bus pagrįstos žiniatinklio dizainu bei kūrimu, todėl su „Apache Cordova“ per „Javascript“ galime pasiekti mobiliojo įrenginio funkcijas, tokias kaip fotoaparatas, duomenys, „Wi -Fi“ ar tinklų jungtys, klaviatūra ar garsas, geografinė vieta, mūsų įterpta duomenų bazė ir visos kitos galimos funkcijos.

Šiai pamokai naudosime „Netbeans“ 8.0.2 kad ateina su Apache kordova įdiegta, bet taip pat pamatysime, kaip ją įdiegti nuo nulio, kad galėtume ją naudoti su bet kuriuo kitu redaktoriumi, įskaitant tokį paprastą Užrašinė ++ arba Mėlynžuvė.
Būtina turėti „Android“ sdk, „Android“ įrenginių tvarkytuvė Y Java jre įdiegtas, taip pat nurodydamas vykdomuosius failus į sistemos kintamuosius.
Norėdami pradėti, turime įdiegti node.js, tai yra sistema, leidžianti sukurti serverį, kuriame kliento kalba naudojama „JavaScript“ ir „Cordova“ yra įdiegta naudojant paketų tvarkyklę pavadinimu NPM, kuri yra „Node.js“ dalis.
Pirmiausia bus įdiegta „Linux“, prieisime prie terminalo šakniniu režimu ir atsisiųsime failą node.js su tokia komanda:

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

Išpakuokite ir nukopijuokite į kitą katalogą

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

Mes įdiegiame atitinkamus paketus

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

Tada pereiname prie „Apache Cordova“ diegimo programos

sudo npm įdiegti -g cordova

Norėdami patikrinti, ar jis tinkamai įdiegtas, galime parašyti terminale kordova -v ir ji grąžins įdiegtą „Apache Cordova“ versiją.
Įdiegę galime sukurti programas naudodami „Cordova“, norėdami sukurti programą, einame į turimą projektų katalogą ir tada iš terminalo rašome siūlomas komandas:
Komandos struktūra bus tokia:

cordova sukurti projekto katalogo komponentą.pakuotė.klasė

Taigi, pavyzdžiui, mūsų programa bus:

cordova sukurti klaidingą programą com.tutoriales.misapp MiApp01

Tai sukurs projekto struktūrą ir atsisiųs visus būtinus ir atnaujintus paketus, kuriuos naudosime savo programoje.

„Cordova“ imituoja „Android“

Galime pamatyti, kaip buvo sukurtas katalogas netinkamai pritaikyti, programos struktūroje ir ten galime rasti šį turinį.
Aplanke platformos Jame yra būtini failai, kad „Cordova“ galėtų sąveikauti su skirtingais įrenginiais, čia pridėsime platformas, kurias norime išbandyti.
Terminalo pavyzdys, norėdami naudoti „Android“ platformą, vykdysime šią komandą

„Cordova“ platforma, skirta „Android“

Rezultatas bus toks:

 # / projektai / misapp / www $ cordova platforma pridėti „Android“ Kuriamas „Android“ projektas … Kuriamas „Cordova“ projektas, skirtas „Android“ platformai: Kelias: platformos / „Android“ Paketas: com.tutoriales.misapp Pavadinimas: „MiApp01 Android“ tikslas: „Android-19“ Kopijuojami šablono failai … Projektas sėkmingai sukurtas. 

Tai sukonfigūruos galiojantį emuliatorių Androdo versija 19 kas jis API versija 19 arba taip pat „Android“ 4.4 (KITKAT), tai yra, mes galime imituoti bet kurį įrenginį, kuriame veikia ši ar senesnė versija. Kai kurios palaikomos platformos yra „Amazon Fire OS“, „Android“, „BlackBerry“, „Firefox“ OS, „iOS“, „Windows Phone“, Šioje pamokoje mes sutelksime dėmesį į „Android“.
Adresų knygoje www Čia bus kuriama pati programa, jame bus talpinami HTML, CSS, vaizdai ir „Javascript“ failai, taip pat visi mūsų programai reikalingi ištekliai, atminkite, kad tai yra tinklalapis, kuris iš pradžių bus paleistas serveryje ir taip pat įterpta žiniatinklio naršyklė, kuri bus paleista kaip „Android“ savoji programa.
Kai mes kuriame savo projektą kataloge www, bus sukurta bendra projekto struktūra apibrėžta kodu, būtinu paleisti paprastą tipo programą "Labas pasauli„Taigi, mes turime vykdomosios programos pavyzdį ar šabloną, kad patikrintume, ar ji veikia prieš programavimą, tačiau, norėdami ją paleisti, pirmiausia turime pridėti platformą ar platformas, pavyzdžiui, jei norime ją išbandyti„ Android “ir„ iOS “įrenginiuose. naudokite šią komandą:
Skirta „Android“

„cordova“ sukurti „Android“

Dėl ios

„cordova“ sukurti „iOS“

Kai vykdysime komandą programų kataloge, ji žinos, kad tai yra programa, kurią reikia sudaryti. Surinkta į katalogą platformos / platformos / android / ant-build / jis sugeneruos mums failus.

„CordovaApp-debug.apk“

Kuris bus įdiegiamas ir vykdomas apk failas bet kuriame „Android“ įrenginyje. Norėdami jį paleisti, programų katalogas turi turėti visas prieigos teises. Dabar pirmą kartą jį vykdysime naudodami emuliatorių, kurį rašome terminale.

„Cordova“ imituoja „Android“

Mes matome bendrąjį įrenginį, kuriame rodoma programa, spustelime ją ir matome numatytąją „Apache“ programą.
Dabar galime pradėti kurti savo programą redaguodami failą index.html, esantį www kataloge. Kodas yra paprastas, meta nustato įrenginio tipą, peržiūros sritys pritaikys turinį prie įrenginio skiriamosios gebos ir ekrano dydžio.
Likusi kodo dalis yra HTML5, „cordoba.js“ failas turės serverio konfigūraciją, o „index.js“ failas bus tas, kuriame užprogramuosime scenarijus, kad programa būtų interaktyvi.

 Miapp01
Prisijungimas prie įrenginio
Įrenginys paruoštas
Atlikime keletą pakeitimų naudodami HTML5 ir CSS3, kad išbandytume, taip pat išbandysime kitą įrenginį. Sukurkime formą su dviem laukais programos sluoksnyjeVardas:
El. Paštas:
Ieškome failo index.css aplanko css ir pridėsime šį kodą, kad suformuotume mygtuką .btn {background: # 3498db; fono vaizdas: -webkit-linear-gradient (viršuje, # 3498db, # 2980b9); fono vaizdas: -moz-linear-gradient (viršuje, # 3498db, # 2980b9); fono vaizdas: -ms-linear-gradient (viršuje, # 3498db, # 2980b9); fono vaizdas: -o-linear-gradientas (viršuje, # 3498db, # 2980b9); fono vaizdas: linijinis gradientas (į apačią, # 3498db, # 2980b9); -webkit-border-spindulys: 28; -moz-border-spindulys: 28; ribos spindulys: 28 taškų; šriftų šeima: Arial; spalva: #ffffff; šrifto dydis: 20 taškų; paminkštinimas: 10px 20px 10px 20px; teksto dekoravimas: nėra; } .btn: užveskite pelę {background: # 3cb0fd; fono vaizdas: -webkit-linear-gradient (viršuje, # 3cb0fd, # 3498db); fono vaizdas: -moz-linear-gradient (viršuje, # 3cb0fd, # 3498db); fono vaizdas: -ms-linear-gradient (viršuje, # 3cb0fd, # 3498db); fono vaizdas: -o-linear-gradientas (viršuje, # 3cb0fd, # 3498db); fono vaizdas: linijinis gradientas (į apačią, # 3cb0fd, # 3498db); teksto dekoravimas: nėra; } 

Kai atliksite pakeitimus, išsaugosime failus ir vėl paleisime naudodami „cordova emulate android“ komandą, anksčiau „Android“ įrenginių tvarkytuvėje sukonfigūravome kitą įrenginį.

DIDELIS

Galiausiai mūsų pakeitimai veikia, kitoje pamokoje pamatysime, kaip padaryti sudėtingesnes įvairias programas.
Iki šiol matome, kaip sukurti programą HTML5, CSS3 ir „Javascript“ arba „Jquery“ mobiliesiems skirtingiems mobiliesiems įrenginiams, nepriklausomai nuo to, ar tai mobilusis telefonas, ar televizorius, palaikantis „Android“. Labai svarbus aspektas, kurį reikia nepamiršti, yra tai, kad visas dizainas turėtų būti laikomas pritaikomu ar reaguojančiu.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką