Izveidojiet vietējās tīmekļa lietojumprogrammas operētājsistēmā Android, izmantojot Apache Cordova

Satura rādītājs
Apvienojumā ar lietotāja saskarnes ietvaru, piemēram, jQuery Mobile vai Dojo Mobile, tas ļauj lietotnei izmantot vietējo formu, bet izstrādātas HTML, CSS un Javascript. Tas nozīmē, ka, ja mums ir tīmekļa lietojumprogramma, mēs varam to pārvērst par Android vietējo lietojumprogrammu, jo Apache Cordova mūsu mobilajā ierīcē darbosies kā iegults tīmekļa serveris.
Šī Api dod mums iespēju izveidot mobilās lietojumprogrammas, kas darbosies lokāli mobilajā ierīcē un balstīsies uz Web dizainu un izstrādi, tāpēc ar Apache Cordova mēs, izmantojot Javascript, varam piekļūt mobilās ierīces funkcijām, piemēram, kamerai, datiem, savienojumi wifi vai tīkli, tastatūra vai skaņa, ģeogrāfiskā atrašanās vieta, mūsu iegultā datu bāze un jebkura cita pieejamā funkcionalitāte.

Šajā apmācībā mēs izmantosim Netbeans 8.0.2 kas nāk līdzi Apache kordova instalēts, bet mēs arī redzēsim, kā to instalēt no nulles, lai to varētu izmantot ar jebkuru citu redaktoru, ieskaitot tik vienkāršu kā Notepad ++ vai Zilās zivis.
Ir nepieciešams, lai būtu Android sdk, Android ierīces pārzinis Y Java jre instalēta, norādot arī izpildāmos failus uz sistēmas mainīgajiem.
Lai sāktu, mums ir jāinstalē node.js, tas ir ietvars, kas ļauj izveidot serveri, kas kā klienta valodu izmanto javascript un Cordova tiek instalēta, izmantojot pakotņu pārvaldnieku ar nosaukumu NPM, kas ir daļa no Node.js.
Instalēšana vispirms tiks veikta Linux, mēs piekļūsim terminālim saknes režīmā un lejupielādēsim failu node.js ar šādu komandu:
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz

Izsaiņojiet un kopējiet citā direktorijā
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz

Mēs instalējam atbilstošās paketes
 ls -l / usr / local / bin / node ls -l / usr / local / bin / npm 

Pēc tam mēs pārejam pie Apache Cordova instalētāja
sudo npm instalēt -g cordova

Lai pārbaudītu, vai tas ir pareizi instalēts, mēs varam rakstīt terminālī kordova -v un tas atgriezīs instalēto Apache Cordova versiju.
Pēc instalēšanas mēs varam izveidot lietojumprogrammas ar Cordova, lai izveidotu lietojumprogrammu, mēs ejam uz mūsu esošo projektu direktoriju un pēc tam no termināļa rakstām ieteiktās komandas:
Komandu struktūra būs šāda:
cordova izveidot projektu direktoriju komponentu.pakete.klase

piemēram, mūsu pieteikums būs šāds:
cordova izveidot nepareizu lietotni com.tutoriales.misapp MiApp01

Tas radīs projekta struktūru un lejupielādēs visas nepieciešamās un atjauninātās paketes, kuras mēs izmantosim savā lietojumprogrammā.

cordova emulate android
Mēs varam redzēt, kā direktorijs tika izveidots nepareizi lietot, lietojumprogrammas struktūrā un tur mēs varam atrast šādu saturu.
Mapē platformas Tajā ir nepieciešamie faili, lai Cordova varētu mijiedarboties ar dažādām ierīcēm, šeit mēs pievienosim platformas, kuras vēlamies pārbaudīt mūsu lietojumprogrammu.
Piemērs no termināļa mēs izpildīsim šādu komandu, lai izmantotu Android platformu
cordova platforma pievienot android

Rezultāts būs šāds:
 # / project / misapp / www $ cordova platforma pievienot android Izveidot android projektu… Izveidot Cordova projektu Android platformai: Ceļš: platformas / android Pakotne: com.tutoriales.misapp Nosaukums: MiApp01 Android mērķis: android-19 Veidņu failu kopēšana… Projekts veiksmīgi izveidots. 

Tādējādi tiks konfigurēts derīgs emulators Androda versija 19 kas viņš ir API versija 19 vai arī Android 4.4 (KITKAT), tas ir, mēs varam līdzināties jebkurai ierīcei, kurā darbojas šī versija vai vecāka versija. Dažas atbalstītās platformas ir Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, Šajā apmācībā mēs koncentrēsimies uz Android.
Adrešu grāmatā www Šeit tiks izstrādāta pati lietojumprogramma, tajā tiks mitināti HTML, CSS, attēli un Javascript faili, kā arī visi mūsu lietojumprogrammai nepieciešamie resursi, atcerieties, ka tā ir tīmekļa lapa, kas sākotnēji darbosies serverī un arī iegulta tīmekļa pārlūkprogramma, kas darbosies kā vietējā lietotne operētājsistēmā Android.
Kad mēs izveidojam savu projektu direktorijā www, tiks izveidota vispārīga projekta struktūra definēts ar kodu, kas nepieciešams, lai palaistu vienkāršu tipa lietojumprogrammu "Sveika pasaule“Tātad mums ir izpildāmās lietojumprogrammas piemērs vai veidne, lai pārbaudītu, vai tā darbojas pirms programmēšanas, tomēr, lai to palaistu, mums vispirms jāpievieno platforma vai platformas, piemēram, ja mēs vēlamies to pārbaudīt Android un iOS ierīcēs. izmantojiet šādu komandu:
Android ierīcēm
cordova veidot Android
Ios
cordova veidot iOS

Ikreiz, kad izpildām komandu lietojumprogrammu direktorijā, tā zinās, ka šī ir lietojumprogramma, kas jāapkopo. Kad tas ir apkopots direktorijā platformas / platformas / android / ant-build / tas mums ģenerēs failus.
CordovaApp-debug.apk

Kurš būs instalējams un izpildāms apk fails jebkurā Android ierīcē. Lai to palaistu, lietojumprogrammu direktorijā jābūt pilnām piekļuves atļaujām. Tagad mēs to pirmo reizi izpildīsim ar emulatoru, tāpēc mēs to rakstām terminālī.
cordova emulate android

Mēs varam redzēt vispārēju ierīci, kas parāda lietojumprogrammu, mēs uz tās noklikšķinām un varam redzēt noklusējuma Apache lietojumprogrammu.
Tagad mēs varam sākt veidot savu lietojumprogrammu, rediģējot failu www.index.html. Kods ir vienkāršs, meta nosaka ierīces veidu, skatu lauki pielāgos saturu ierīces izšķirtspējai un ekrāna izmēram.
Pārējais kods ir HTML5, failam cordoba.js būs servera konfigurācija, un failā index.js tiks ieprogrammēti mūsu skripti, lai lietojumprogrammai piešķirtu interaktivitāti.
 Miapp01

Savienojuma izveide ar ierīci

Ierīce ir gatava

Veiksim dažas izmaiņas, lai pārbaudītu Html5 un CSS3, un mēs pārbaudīsim arī citu ierīci. Izveidosim veidlapu ar diviem laukiem lietotnes slāņa iekšpusēVārds:
E-pasts:
Mēs meklējam mapi css iekš index.css faila un pievienosim šādu kodu, lai veidotu pogu .btn {background: # 3498db; fona attēls: -webkit-linear-gradient (top, # 3498db, # 2980b9); fona attēls: -moz-linear-gradient (augšējā, # 3498db, # 2980b9); fona attēls: -ms-linear-gradient (augšējā, # 3498db, # 2980b9); fona attēls: -o-lineārs gradients (augšpusē, # 3498db, # 2980b9); fona attēls: lineārs gradients (uz leju, # 3498db, # 2980b9); -webkit-border-rādiuss: 28; -moz-border-rādiuss: 28; robežas rādiuss: 28 pikseļi; fontu saime: Arial; krāsa: #ffffff; fonta lielums: 20 pikseļi; polsterējums: 10px 20px 10px 20px; teksta dekorēšana: nav; } .btn: virziet kursoru {background: # 3cb0fd; fona attēls: -webkit-linear-gradient (top, # 3cb0fd, # 3498db); fona attēls: -moz-linear-gradient (top, # 3cb0fd, # 3498db); fona attēls: -ms-linear-gradient (top, # 3cb0fd, # 3498db); fona attēls: -o-lineārs gradients (augšējā, # 3cb0fd, # 3498db); fona attēls: lineārs gradients (uz leju, # 3cb0fd, # 3498db); teksta dekorēšana: nav; }

Kad esat veicis izmaiņas, mēs saglabājam failus un atkal palaižam ar komandu cordova emulate android, iepriekš Android ierīces pārvaldniekā konfigurējām citu ierīci.

PALIELINĀT

Visbeidzot, mūsu izmaiņas darbojas, citā apmācībā mēs redzēsim, kā izveidot dažādas lietojumprogrammas ar lielāku sarežģītību.
Līdz šim mēs redzam, kā izveidot lietojumprogrammu HTML5, CSS3 un Javascript vai Jquery mobilais dažādām mobilajām ierīcēm neatkarīgi no tā, vai tas ir mobilais tālrunis vai televizors, kas atbalsta Android. Ļoti svarīgs aspekts, kas jāpatur prātā, ir tas, ka viss dizains ir jāuzskata par pielāgojamu vai atsaucīgu.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
wave wave wave wave wave