✅ Izradite izvorne web aplikacije na Androidu s Apache Cordovom

Sadržaj

U kombinaciji s okvirom korisničkog sučelja, poput jQuery Mobile ili Dojo Mobile, ovo omogućuje aplikaciju u izvornom obliku, ali razvijenu u HTML -u, CSS -u i Javascriptu. To znači da ako imamo web aplikaciju možemo je pretvoriti u izvornu aplikaciju za Android jer će Apache Cordova funkcionirati kao ugrađeni web poslužitelj na našem mobilnom uređaju.
Ovaj Api daje nam mogućnost izgradnje mobilnih aplikacija koje će se lokalno pokretati na mobilnom uređaju i temeljit će se na web dizajnu i razvoju, pa s Apache Cordovom možemo pristupiti putem Javascripta funkcijama mobilnog uređaja, poput kamere, podataka, veze wifi ili mreže, tipkovnica ili zvuk, geolokacija, vlastita ugrađena baza podataka i sve druge dostupne funkcije.

Za ovaj vodič koristit ćemo se Netbeans 8.0.2 to dolazi sa Apache cordova instaliran, ali također ćemo vidjeti kako ga instalirati od nule kako bismo ga mogli koristiti sa bilo kojim drugim uređivačem, uključujući i jedan jednostavan Notepad ++ ili Plava riba.
Potrebno je imati Android sdk, Upravitelj Android uređaja Y Java jre instaliran, također upućujući izvršne datoteke na sistemske varijable.
Za početak moramo instalirati node.js, to je okvir koji vam omogućuje stvaranje poslužitelja koji koristi javascript kao jezik klijenta i Cordova se instalira pomoću upravitelja paketa pod nazivom NPM koji je dio Node.js.
Instalacija će se prvo izvršiti na Linuxu, pristupit ćemo terminalu u root modu i preuzeti datoteku node.js sa sljedećom naredbom:

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

Raspakirajte i kopirajte u drugi direktorij

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

Instaliramo odgovarajuće pakete

 ls -l / usr / lokalno / bin / čvor ls -l / usr / lokalno / bin / npm

Zatim nastavljamo s instalacijskim programom Apache Cordova

sudo npm install -g cordova

Da bismo provjerili je li ispravno instaliran, možemo pisati u terminal cordova -v i vratit će instaliranu verziju Apache Cordove.
Nakon instalacije možemo stvarati aplikacije s Cordovom, za izradu aplikacije idemo u direktorij projekta koji imamo, a zatim s terminala upisujemo predložene naredbe:
Struktura naredbe bit će:

cordova izradi komponentu imenika projekta.paket.klase

pa će na primjer naša aplikacija biti:

cordova izradi misapp com.tutoriales.misapp MiApp01

To će stvoriti strukturu projekta i preuzeti sve potrebne i ažurirane pakete koje ćemo koristiti u našoj aplikaciji.

Cordova oponaša Android

Možemo vidjeti kako je imenik nastao misapp, unutar strukture aplikacije i tamo možemo pronaći sljedeći sadržaj.
U mapi platforme Sadrži potrebne datoteke kako bi Cordova mogla komunicirati s različitim uređajima, ovdje ćemo dodati platforme na kojima želimo testirati našu aplikaciju.
Primjer s terminala izvršit ćemo sljedeću naredbu za korištenje Android platforme

platforma cordova dodaj android

Rezultat će biti:

 # / projects / misapp / www $ cordova platforma dodaj android Izrada android projekta … Stvaranje Cordova projekta za Android platformu: Put: platforme / android Paket: com.tutoriales.misapp Naziv: MiApp01 Android cilj: android-19 Kopiranje datoteka predložaka … Projekt uspješno stvorena.

Ovo će konfigurirati važeći emulator za Androd verzija 19 što je on API verzija 19 ili također Android 4.4 (KITKAT) što znači da možemo oponašati bilo koji uređaj koji radi na ovoj ili starijoj verziji. Neke podržane platforme jesu Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, U ovom vodiču ćemo se usredotočiti na Android.
U adresaru www Tamo će se razvijati sama aplikacija, bit će smješteni HTML, CSS, slike i Javascript datoteke, kao i svi potrebni resursi za našu aplikaciju. Ne zaboravite da je to web stranica koja će se izvorno pokretati unutar poslužitelja, a također ugrađeni web preglednik koji će raditi kao izvorna aplikacija na Androidu.
Kada svoj projekt kreiramo unutar direktorija www, bit će stvorena generička struktura projekta definirano s kodom potrebnim za pokretanje jednostavne aplikacije tipa "Pozdrav svijete„Dakle, imamo primjer ili predložak izvršne aplikacije kako bismo provjerili funkcionira li prije programiranja, međutim, da bismo je pokrenuli, prvo moramo dodati platformu ili platforme, na primjer ako je želimo testirati na Android i iOS uređajima upotrijebite sljedeću naredbu:
Za android

cordova graditi Android

Za ios

cordova izgraditi iOS

Kad god izvršimo naredbu unutar direktorija aplikacije, znat će da je to aplikacija za kompajliranje. Jednom prevedeno u direktorij platforme / platforme / android / ant-build / generirat će datoteke za nas.

CordovaApp-debug.apk

Što će biti instalacijska i izvršna apk datoteka na bilo kojem Android uređaju. Da biste ga pokrenuli, direktorij aplikacije mora imati dopuštenja za potpuni pristup. Sada ćemo ga po prvi put izvesti s emulatorom za to pišemo u terminalu.

Cordova oponaša Android

Možemo vidjeti generički uređaj koji prikazuje aplikaciju, kliknemo na nju i vidimo zadanu aplikaciju Apache.
Sada možemo početi stvarati našu aplikaciju uređivanjem datoteke index.html koja se nalazi u direktoriju www. Kôd je jednostavan, meta otkriva vrstu uređaja, vizualni okviri prilagođavaju sadržaj rezoluciji i veličini zaslona uređaja.
Ostatak koda je HTML5, datoteka cordoba.js imat će konfiguraciju poslužitelja, a datoteka index.js bit će mjesto na kojem ćemo programirati naše skripte za davanje interaktivnosti aplikaciji.

 Miapp01
Povezivanje s uređajem
Uređaj je spreman
Učinimo neke promjene s HTML5 i CSS3 za testiranje, a testirat ćemo i drugi uređaj. Izradimo obrazac s dva polja unutar sloja aplikacijeIme:
E-mail:
Tražimo mapu css unutar datoteke index.css i dodat ćemo sljedeći kôd za oblikovanje gumba .btn {background: # 3498db; background-image: -webkit-linear-gradient (top, # 3498db, # 2980b9); background-image: -moz-linear-gradient (top, # 3498db, # 2980b9); background-image: -ms-linear-gradient (top, # 3498db, # 2980b9); background-image: -o-linear-gradient (top, # 3498db, # 2980b9); background-image: linear-gradient (do dna, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-border-radius: 28; rub-radijus: 28px; font-family: Arial; boja: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; ukras teksta: nema; } .btn: hover {background: # 3cb0fd; background-image: -webkit-linear-gradient (top, # 3cb0fd, # 3498db); background-image: -moz-linear-gradient (top, # 3cb0fd, # 3498db); background-image: -ms-linear-gradient (top, # 3cb0fd, # 3498db); background-image: -o-linear-gradient (top, # 3cb0fd, # 3498db); background-image: linear-gradient (do dna, # 3cb0fd, # 3498db); ukras teksta: nema; }

Kad izvršite izmjene, spremamo datoteke i ponovno ih pokrećemo pomoću naredbe cordova emulate android, prethodno smo konfigurirali drugi uređaj u Upravitelju Android uređaja.

POVEĆAJTE

Konačno, naše promjene rade, u drugom vodiču ćemo vidjeti kako napraviti različite aplikacije s većom složenošću.
Do sada vidimo kako stvoriti aplikaciju pomoću HTML5, CSS3 i Javascript ili Jquery mobile za različite mobilne uređaje bez obzira radi li se o mobilnom telefonu ili televizoru koji podržava Android. Vrlo važan aspekt koji treba imati na umu je da se o cijelom dizajnu treba razmišljati kao o prilagodljivom ili osjetljivom.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod