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.
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 AndroidMož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 AndroidZa 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
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.
Miapp01Povezivanje 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
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
