Share
Ionic este un cadru popular pentru aplicații mobile, care vă ajută să construiți rapid aplicații mobile hibride, utilizând coduri HTML, CSS și JavaScript. În această serie, învățați să configurați și să creați propriile aplicații mobile cu ionic, creând împreună o aplicație mobilă pe deplin funcțională. Începem cu o introducere la ionic și învățăm cum să începem cu uneltele.
În acest tutorial, acoperim:
Ionic este o serie de tehnologii care sunt înglobate și gestionate împreună. Îmi place să mă gândesc la ionic ca la un set de mai multe cadre. Interacțiunea dintre aceste tehnologii este ceea ce creează în final aplicația rezultată și oferă un bun dezvoltator și experiență pentru utilizatori.
Ca fundație, ionic folosește Cordova ca cadru de aplicații hibride. În esență, permite o aplicație web să fie inclusă într-o aplicație nativă care poate fi instalată pe un dispozitiv. Acesta încorporează o vizualizare web, care este o instanță de browser izolată care rulează aplicațiile web.
Acesta oferă, de asemenea, un API pe care îl puteți utiliza pentru a comunica cu dispozitivul însuși, de exemplu, pentru a solicita coordonatele GPS sau pentru a accesa camera. Multe dintre aceste caracteristici hardware suplimentare sunt activate prin sistemul de plugin Cordova, deci trebuie doar să instalați și să utilizați caracteristicile de care aveți nevoie. Te prezint mai mult la Cordova într-un tutorial mai târziu.
Angular este un cadru JavaScript bine-cunoscut pentru construirea de aplicații web, iar Ionic este construit pe partea de sus a acestuia. Angular oferă logica aplicației web folosită pentru a construi aplicația actuală.
Dacă sunteți deja familiarizat cu aceasta, atunci veți putea să ridicați rapid caracteristicile ionice. Dacă sunteți nou la Angular, puteți continua să citiți și veți începe să ridicați niște unghiuri de bază.
Nu voi mai acoperi Angular în detaliu, așa că vă recomand să faceți ceva timp pentru a învăța elementele de bază prin citirea documentației Angulare.
Caracteristica Ionic de vânzare primară este un set curat de componente de interfață cu utilizatorul, care sunt proiectate pentru mobil. Când creați o aplicație nativă, există SDK-uri native care vă oferă componente de interfață, cum ar fi filele și casetele de dialog.
Ionic oferă un set similar de componente de interfață pentru utilizarea în aplicații hibride. Ionic este îndrăgostit de pretenția că este SDK lipsă pentru aplicațiile hibride, iar acest rol îndeplineste destul de bine acest rol. În plus, ionic are o serie de alte caracteristici semnificative care o fac o alegere foarte convingătoare.
Ionic este mai mult decât un set de componente de interfață cu utilizatorul, este, de asemenea, un set de instrumente de dezvoltare și un ecosistem pentru construirea rapidă a aplicațiilor mobile hibride. Aș dori să aflu de ce aplicațiile hibride sunt potrivite pentru dezvoltatorii web, detalii despre platforma ionică și instrumentare și când este posibil ca ionul să nu fie potrivit.
Există dezbateri vechi despre calitatea diferitelor abordări pentru construirea de aplicații. Acum câteva luni am scris un articol detaliat despre cele trei tipuri de experiențe mobile. Vă recomandăm să o revizuiți dacă nu sunteți sigur de punctele forte și de punctele slabe ale acestor abordări diferite pe dispozitivele moderne.
Aplicațiile hibride reprezintă loc dulce în a oferi dezvoltatorilor web abilitatea de a utiliza abilitățile pe care deja le cunosc pentru a construi aplicații mobile care pot să arate și să se simtă ca aplicații native.
Foarte puține dintre cadrele mobile disponibile au unelte care se apropie de calitatea sculelor Ionic. Vom examina mai îndeaproape instrumentele primare disponibile în restul tutorialului, dar aș dori să acoperim câteva dintre caracteristicile pe care le veți găsi probabil utile în timp.
Ionic CLI tooling-ul este prima rată și oferă o mulțime de caracteristici care vă ajută să începeți un proiect, previzualizați-l și, în cele din urmă, construiți-l.
Ionic oferă o serie de caracteristici, unele gratuite și altele plătite, care sunt utile pentru dezvoltarea profesională, cum ar fi analiza aplicațiilor, notificările push și instrumentele de implementare.
Există o serie de add-on-uri gratuite și plătite pentru Ionic care pot fi ușor integrate în aplicația dvs. Există teme, componente unice și alte pluginuri.
Ionic nu este o potrivire perfectă pentru fiecare aplicație mobilă. Luați în considerare următoarele cazuri pentru a decide dacă ionicul este potrivit pentru proiectul dvs..
Cu alte cuvinte, dacă nu construiți o aplicație pentru dispozitive vechi și nu aveți nevoie să programați foarte mult la nivel hardware, Ionic este mai mult decât capabil să ofere o experiență de calitate pentru utilizatori.
Ionic vine cu o fantă CLI (Command Line Interface) pentru a vă ajuta să porniți, să construiți și să implementați aplicațiile. Veți folosi CLI foarte mult în timpul dezvoltării. Ionic se bazează, de asemenea, pe Cordova, deci o veți folosi indirect.
Trebuie să aveți instalat Node.js pentru a începe. Dacă nu, luați o clipă pentru al instala în sistem. Eu folosesc Node.js 5.6 pentru acest tutorial și recomand să fiu pe ultima versiune stabilă.
Instalarea Ionic și Cordova este la fel de simplă ca instalarea a două module globale de noduri. Dacă ați făcut acest lucru înainte, atunci ar trebui să arate destul de familiar. Deschideți terminalul și executați următoarea comandă:
npm install -g [email protected] [email protected]
Acest lucru poate dura câteva momente, dar ar trebui să obțineți un mesaj de succes care spune că ambele sunt instalate. Puteți verifica acest lucru executând următoarele pentru a vedea numerele de versiune de ieșire.
ionic -v & cordova -v
Ar trebui să scoată versiunea atât a ionicului, cât și a lui Cordova. În scopul acestui tutorial, folosesc versiunea 1.7.14 a lui Ionic și versiunea 6.0.0 a lui Cordova.
Există câteva caracteristici în CLI-ul ionic și puteți obține întotdeauna o referință rapidă prin alergare ajutor ionic. De asemenea, puteți consulta documentația online pentru mai mult sprijin, dacă este necesar.
Ionic nu îmbină toate instrumentele necesare pentru a construi o aplicație, se bazează pe unele SDK-uri suplimentare și software furnizate de Apple și / sau Google. Este bine să citiți și să urmăriți ghidurile de platformă furnizate de Cordova pentru a le instala pentru fiecare platformă cu care doriți să lucrați.
Puteți face acest lucru mai târziu, dar va trebui să configurați instrumentul de platformă înainte de a putea previzualiza sau emula o aplicație pe un simulator sau pe un dispozitiv.
Există un set general de pași pe care îi veți trece la dezvoltarea unei aplicații ionice. Acești pași au comenzi CLI corespunzătoare pentru a vă ajuta. Să aruncăm o privire la comenzile primare care reprezintă un flux de dezvoltare tipic pentru construirea de aplicații ionice.
Presupunând că ați primit deja o idee de bază despre ceea ce intenționați să construiți, primul pas este să creați un nou proiect. Proiectele ionice sunt bazate pe Cordova și necesită unele schele pentru Cordova pentru a înțelege mai târziu proiectul. Ionic are mai multe șabloane pre-construite pe care le puteți utiliza pentru a genera un proiect demarat, dar puteți, de asemenea, asigurați-vă propriile.
Pentru a începe un proiect, rulați proba de pornire ionică comanda. Acesta generează un nou director în directorul curent bazat pe numele pe care îl furnizați (adică. probă). În timp ce comanda rulează, descarcă fișierele din GitHub care sunt necesare pentru proiect și inițiază proiectul pentru tine. Utilizează proiectul implicit, care are o aplicație de bază cu o interfață de bază a filelor.
Alerga cd eșantionpentru a naviga în noul director. Când inspectați directorul, veți observa câteva fișiere și directoare. Nu vă îngrijorați prea mult cu fiecare fișier momentan. Iată câteva lucruri cu care va trebui să lucrați inițial.
Pentru restul tutorialului, vom lucra cu proiectul pe care tocmai l-ați generat și vom vedea cum să dezvoltăm și să previzualizăm aplicația.
Ați început un proiect, acum doriți să începeți să vă dezvoltați. În timpul dezvoltării inițiale, veți examina probabil munca dvs. într-un browser. La urma urmei, o aplicație Ionic este într-adevăr doar o aplicație web. Ionic vine cu un server de dezvoltare locală care construiește și servește aplicația dvs..
Pentru a porni serverul de dezvoltare, executați ionice. De îndată ce aceasta se execută, aceasta deschide o previzualizare a aplicației în browserul dvs. implicit. În acest moment, puteți utiliza instrumentele de dezvoltare ale browserului pentru a inspecta aplicația, a urmări erorile și orice altă sarcină pe care o veți face în mod normal atunci când creați o aplicație web.
Serverul continuă să ruleze în fundal și urmărește proiectul pentru modificarea fișierelor. Când detectează că ați editat și salvat un fișier, acesta reîncarcă automat browserul pentru dvs..
Previzualizarea aplicației Ionic care rulează în Chrome, utilizând emularea dispozitivelor în instrumentele de dezvoltareVă recomandăm să folosiți Chrome ca browser datorită instrumentelor sale minunate de dezvoltatori. O caracteristică deosebit de utilă este capacitatea de a emula dimensiunile dispozitivului, ceea ce face mai ușor să vedem cum arată aplicația pe un anumit dispozitiv. Nu este un emulator real care execută aplicația ca un dispozitiv real, ci doar imită dimensiunile aplicației.
Cordova suportă o mulțime de tipuri diferite de dispozitive mobile, numite platforme. Trebuie să înregistrați platformele pe care doriți să le vizați cu aplicația dvs. și să instalați fișierele de proiect corespunzătoare. Din fericire, acest lucru este gestionat mai ales prin CLI ionic. Ionic sprijină pe deplin platformele iOS și Android.
Pentru a adăuga o platformă, rulați platformă ionică adăugați android. A inlocui Android cu ios pentru a adăuga iOS în schimb. După adăugare, veți vedea un nou director în directorul de platforme al proiectului dvs. Acest dosar conține fișiere specifice platformei. În general, trebuie să evitați să faceți prea multe modificări în fișierele din acest director.
Dacă aveți probleme, puteți să eliminați platforma și să o adăugați din nou. Pentru a elimina o platformă, rulați platformă ionică elimina android.
La un moment dat, veți dori să începeți să examinați aplicația într-un emulator real. Emulatoarele sunt în esență versiuni software ale unui dispozitiv real. Acest lucru este foarte util pentru a testa rapid modul în care aplicația ar trebui să se comporte pe un dispozitiv real. Rețineți că emulatorii nu au toate caracteristicile unui dispozitiv fizic, deoarece sunt doar dispozitive de emulare de software.
Este posibil ca unele coduri să nu funcționeze așa cum era de așteptat, de exemplu, dacă așteptați să utilizați lista de contacte a dispozitivului. De obicei, numai funcțiile care se integrează cu hardware-ul ar putea să nu funcționeze așa cum era de așteptat, dar pentru majoritatea lucrurilor ar trebui să funcționeze bine.
Configurarea emulatorilor poate fi un pic de sarcină, în funcție de tipul de computer pe care îl utilizați și de ceea ce trebuie să testați. Emularea unui iPhone se poate face numai pe un computer care rulează OS X, dar Android poate fi emulat pe orice sistem de operare. Pentru a configura emulatori, consultați ghidurile de platformă la care am făcut referire anterior.
Odată ce ați făcut asta, puteți emula folosind ionice emulate android-c-1. Ca și înainte, înlocuiți-o Android cu ios dacă vizați iOS. Acesta construiește, instalează și lansează aplicația în simulator. Acest lucru poate dura câteva momente, astfel încât este posibil să doriți să utilizați unele dintre funcțiile de reîncărcare vii utile, așa cum ați făcut mai devreme în browser.
Puteți utiliza funcția opțională -L semnalizați ca aplicația să fie reîncărcată live în simulator (fără a fi necesară reconstruirea și reinstalarea). Acest lucru este minunat atâta timp cât nu schimbați nimic legat de modul în care este construită aplicația (cum ar fi setările Cordova). De asemenea, puteți utiliza opțiunea -c semnalizați ca mesajele de consolă să fie transmise în jurnalul terminalului. Le folosesc aproape de fiecare dată.
Cea mai bună modalitate de a previzualiza aplicația dvs. este să o instalați și să o rulați pe un dispozitiv. Acest lucru necesită configurarea unei platforme și conectarea unui dispozitiv la aparatul dvs. Acest lucru necesită o configurație care variază în funcție de tipul de dispozitiv pe care îl aveți. Puteți consulta ghidurile de platformă de mai sus pentru a conecta dispozitivul.
Odată ce aveți un dispozitiv conectat, este destul de simplu să rulați aplicația de pe linia de comandă. Utilizare ioni de rulare android-c-1 iar Ionic construiește, implementează și lansează aplicația. Din nou, puteți înlocui ios pentru Android. La fel ca și comanda emulate, puteți folosi opțiunea -L și -c pentru a permite reîncărcarea live și consola de conectare la terminal.
După ce aplicația se află pe dispozitivul dvs., o puteți deconecta și aplicația va rămâne instalată pe dispozitiv. Acest lucru este util dacă doriți să utilizați aplicația într-o anumită perioadă de timp pentru a testa modul în care se comportă sau pentru a le arăta altora.
Mă întreb frecvent despre Ionic 2 și dacă oamenii ar trebui să-l folosească. La momentul redactării, la începutul anului 2016, nu există încă un răspuns simplu. Am lucrat cu el și am construit câteva prototipuri și știu câțiva oameni care au construit aplicații de producție, dar nu este încă gata.
Vestea bună este că învățarea Ionic 1 astăzi înseamnă că învățarea Ionic 2 va fi destul de simplă. Majoritatea lucrurilor specifice ionice pe care le veți învăța în această serie rămân destul de consecvente între versiuni. Cele mai mari modificări vor apărea din cauza faptului că ionul 2 este construit pe Angular 2.
Deci, în timp ce ați putea construi două aplicații ionice 2 astăzi, nu este încă lansat oficial. Nu pierdeți nici un moment învățând acum Ionic 1. Actualizarea ar trebui să fie relativ simplă odată ce Ionic 2 este lansat oficial.
În acest tutorial am acoperit multe despre ionic.
În următoarea parte a acestei serii, veți începe să construiți o aplicație reală și funcțională folosind tehnicile prezentate în acest tutorial.
Dacă sunteți deja confortabil cu cadrul ionic, atunci vă recomandăm să luați în considerare intrarea în concursul Envato's Most Wanted pentru șabloanele ionice. Cum? Creați un șablon Ionic unic și îl trimiteți la Envato Market până la 27 aprilie 2016.
Cele cinci cele mai bune șabloane primesc 1000 $. Interesat? Citiți mai multe pe site-ul concursului pentru detalii despre cerințele și recomandările concursului.
Accentsconagua