Accentsconagua
Share
În acest articol, vom lua o privire la Ionic 2, cea mai nouă versiune a platformei ionice pentru aplicații mobile cross-platform. Pentru început, vom recapitula ceea ce este ionic și pentru ce este folosit. Apoi ne vom arunca cu capul în Ionic 2. Vă voi spune ce este nou și cum diferă de Ionic 1 și vă voi ajuta să vă decideți dacă ar trebui să-l utilizați în proiectul următor sau nu.
Ionic este un cadru pentru construirea de aplicații hibride folosind HTML, CSS și JavaScript. Dispune de un set de componente și funcții UI pe care le puteți utiliza pentru a crea aplicații mobile funcționale și atractive.
Ionic este construit pe stiva Cordova. Nu puteți crea aplicații mobile numai cu ionic deoarece gestionează numai partea UI. Trebuie să lucreze cu Angular, care gestionează logica aplicațiilor, și Cordova, cadrul de aplicații cross-platform care vă permite să vă compilați aplicația într-un fișier instalabil și să o rulați în interiorul vizualizării web a dispozitivului mobil.
Aplicațiile create cu Cordova și Ionic pot rula pe dispozitive Android și iOS. De asemenea, puteți instala pluginurile Cordova pentru a vă oferi funcționalități native, cum ar fi accesul la cameră și lucrul cu dispozitive Bluetooth cu consum redus de energie.
Pentru mai multe informații despre Cordova, consultați câteva dintre cursurile și tutorialele noastre despre Envato Tuts+.
Ionic este mai mult decât un cadru UI, totuși. Compania ionică oferă, de asemenea, servicii care sprijină cadrul ION-ului ION, incluzând Creatorul Ionic, Ionic View și Cloud Ionic.
În această secțiune, vom examina unele dintre schimbările semnificative ale ionicului în versiunea 2, precum și noile caracteristici și instrumente care au fost introduse în versiunea Ionic 2.
Ionic 1 a fost construit cu ajutorul unor aplicații mobile hibride. Dar Ionic 2 este construit pentru a sprijini aplicațiile web progresive și aplicațiile electronice, de asemenea. Aceasta înseamnă că acum puteți să construiți nu numai aplicații ionice care rulează în mediul Cordova, ci și aplicații web progresive, care utilizează funcții web moderne pentru a oferi utilizatorilor o experiență asemănătoare unei aplicații.
De asemenea, puteți viza Electron, o platformă pentru construirea de aplicații de desktop încrucișate utilizând HTML, CSS și JavaScript. Electronul este destul de mult ca Cordova, dar pentru sistemele de operare desktop precum Windows, Ubuntu sau macOS.
Ionic 2 utilizează acum unghiul 2 pentru templatizarea și logica aplicațiilor. Aceasta înseamnă că dezvoltatorii vor trebui să învețe noua sintaxă Angular 2 înainte ca ei să devină productivi la crearea aplicațiilor Ionic 2. Nu vă faceți griji, totuși, deoarece conceptele sunt încă la fel ca în Angular 1. Există, de asemenea, resurse precum ngMigrate, care vă vor ajuta să vă convertiți abilitățile Angular 1 în Angular 2.
În afară de Angular 2, Ionic 2 utilizează, de asemenea, TypeScript. Pentru cei care nu sunt familiarizați cu aceasta, TypeScript este o sursă superioară de JavaScript. Aceasta înseamnă că puteți utiliza în continuare sintaxa JavaScript de la vanilla pentru a scrie aplicațiile. Dacă doriți să utilizați caracteristicile care vin împreună cu TypeScript, cum ar fi sintaxa ES6 și ES7, tastarea statică și finalizarea codului inteligent, puteți utiliza sintaxa specifică TypeScript. Există pluginuri pe care le puteți instala în editorul text sau IDE preferat pentru a profita de avantajele caracteristicilor avansate de completare a codurilor de tip TypeScript.
Așa cum am menționat, sintaxa șablonului din Ionic 2 sa schimbat semnificativ, în mare parte datorită tranziției sale la utilizarea funcției Angular 2. S-ar putea chiar să ajungeți să găsiți că noua sintaxă este mai simplă și mai concisă. Iată câteva exemple de sintaxă Ionic 1 și Ionic 2:
Ascultarea evenimentelor:
Utilizarea unui model:
Încărcarea printr-o matrice și afișarea fiecărui element:
Dacă comparăți structura de directoare a unui proiect Ionic 1 și a unui proiect Ionic 2, veți observa că majoritatea folderelor pe care sunteți obișnuiți să le vedeți într-un proiect Ionic 1 sunt încă acolo în Ionic 2. Acest lucru se datorează faptului că elementele de bază platforma nu sa schimbat cu adevărat - Ionic 2 încă mai folosește Cordova. Singurele lucruri care s-au schimbat sunt părțile care au legătură cu fișierele sursă. Iată o captură de ecran a structurii folderului unei aplicații Ionic 1:
Și aici este o aplicație construită cu Ionic 2:
Dacă te uiți mai aproape, vei observa că acum există a src pliant. Aici se află toate fișierele sursă ale proiectului dvs. și de fiecare dată când faceți modificări la un fișier din acel director, fișierul modificat este compilat și copiat pe www / build director. Anterior, fișierele sursă erau toate în www, și nu ați solicitat un pas suplimentar de compilare.
Structura directorului este, de asemenea, mai organizată. Dacă bifați src / pagini , puteți vedea că fiecare pagină are un folder propriu, iar în interiorul fiecărei pagini sunt fișierele HTML, CSS și JavaScript pentru acea pagină.
Anterior, în Ionic 1, v-ați dat doar un director gol și ați avut libertatea de a vă structura proiectul oricum doriți. Dar acest lucru a venit cu dezavantajul de a nu vă forța să faceți lucrurile cel mai bine. Ai putea obține leneș și stick cu o structură care a concentrat toate fișierele împreună, ceea ce ar putea face lucrurile dificile pentru echipe mai mari care lucrează pe aplicații complexe.
Spre deosebire de versiunea anterioară a lui Ionic, care avea doar o singură privire și simțire pentru toate platformele, Ionic 2 suportă acum trei moduri: Material Design, iOS și Windows. Ionic se potrivește cu aspectul platformei pe care se desfășoară. Deci, dacă aplicația dvs. este instalată pe Android, de exemplu, va utiliza un stil și un comportament similar cu aplicațiile Android originale.
Există suport pentru ele în Ionic, deși la momentul redactării acestui articol, el nu are decât tema Luminii implicite. Dacă doriți să modificați tema, puteți edita src / tema / variables.scss fişier.
Ionic 2, de asemenea, vine cu noi instrumente care vor face o bucurie pentru a crea aplicații mobile. Vă voi arăta câteva în această secțiune.
Ionic 2 oferă acum un generator care vă permite să creați pagini și servicii pentru aplicația dvs.:
ionic g pagina contactPage
Acest lucru va crea următoarele fișiere în app / pagini pliant:
contact-pagina / contact-page.html pagina de contact / contact-page.ts contact-page / contact-page.scss
Fiecare fișier are de asemenea un cod de boilerplate în el:
contactPage
Acest lucru servește, de asemenea, ca un ghid pentru dezvoltatorii noi, astfel încât aceștia să cunoască cele mai bune practici pentru structurarea codului lor. Iată codul TypeScript generat care gestionează logica pentru pagina de mai sus:
//contact-page.js import Component din '@ angular / core'; import NavController, NavParams de la "ionic-unghiular"; / * Clasă generată pentru pagina ContactPage. Consultați http://ionicframework.com/docs/v2/components/#navigation pentru mai multe informații despre paginile ionice și navigația. * / @Component (selector: 'page-contact-page', templateUrl: 'contact-page.html') clasa de export ContactPagePage constructor (public navCtrl: NavController, public navParams: NavParams) ionViewDidLoad .log ('ionViewDidLoad ContactPagePage'); Ionic 2 vine acum cu un instrument de raportare a erorilor pentru front-end. Aceasta înseamnă că oricând există o eroare la codul dvs., Ionic va deschide o fereastră modală chiar în previzualizarea aplicației. Acest lucru face foarte ușor pentru dezvoltatori să afle despre erori, cum se întâmplă în cadrul aplicației.
Ionic App Scripts sunt o colecție de scenarii de construcție pentru proiectele ionice. Anterior, Ionica a folosit Gulp pentru a-și manipula procesul de construire.
Ionic 2 vine cu câteva dintre aceste scripturi pentru a facilita îndeplinirea sarcinilor comune de dezvoltare. Acestea includ lucruri precum transpiling codul TypeScript la ES5, difuzarea aplicației pentru testarea în browser sau rularea pe un anumit dispozitiv.
Puteți găsi scripturile implicite în proiect package.json fişier:
"script-uri": "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts built", "ionic: build": ":" serverele cu aplicații ionice servesc ",
Componentele sunt blocurile de construcție din Ionic. Exemplele includ butoane, carduri, liste și câmpuri de introducere. O mulțime de componente noi au fost adăugate la Ionic 2, iar în această secțiune vom examina unele dintre ele.
Dacă doriți ca aplicația dvs. să aibă o vizibilitate pentru utilizatorii pentru prima dată, componenta Slides facilitează crearea acesteia. Această componentă vă permite să creați machete bazate pe pagină, pe care utilizatorul le poate deplasa pentru a citi totul despre aplicația dvs..
Foi de acțiune sunt meniuri care se glisă în sus din partea inferioară a ecranului. O foaie de acțiune este afișată pe stratul superior al ecranului, deci trebuie să o respingi prin atingerea unui spațiu alb sau pentru a selecta o opțiune din meniu. Acest lucru este folosit în mod obișnuit pentru confirmări, cum ar fi când ștergeți un fișier de pe dispozitivul dvs. iOS.
Segmentele sunt ca filele. Acestea sunt utilizate pentru gruparea conținutului înrudit în așa fel încât utilizatorul să poată vedea numai conținutul segmentului selectat în prezent. Segmentele sunt utilizate frecvent cu liste pentru a filtra elementele asociate.
Toasturile sunt versiunea subtilă a alertelor. Ele sunt frecvent utilizate pentru a informa utilizatorul că sa întâmplat ceva care nu necesită nicio acțiune a utilizatorului. Acestea sunt adesea afișate în partea de sus sau de jos a paginii pentru a nu interfera cu conținutul prezentat în prezent. De asemenea, ele dispar după un anumit număr de secunde.
O bara de instrumente este utilizată ca container pentru informații și acțiuni care se află în antetul sau subsolul aplicației. De exemplu, titlul ecranului curent, butoanele, câmpurile de căutare și segmentele sunt adesea conținute într-o bară de instrumente.
Componenta DateTime este utilizată pentru a afișa un interfață utilizator pentru selectarea datelor și orelor. Interfața de utilizare este similară cu cea generată atunci când se utilizează datetime-locală element, singura diferență fiind faptul că această componentă vine cu un ușor de utilizat JavaScript API. Anterior, Ionic nu avea o componentă pentru lucrul cu datele și orele. Trebuie fie să utilizați selectorul de date nativ al browserului, fie să instalați un plugin.
Butoanele de acțiune plutitoare (FAB) sunt butoane care sunt fixate într-o anumită zonă a ecranului. Dacă ați folosit vreodată aplicația Gmail, butonul pentru compunerea unui mesaj nou este un buton de acțiune plutitoare. Nu se limitează la o singură acțiune, deoarece se pot extinde pentru a afișa alte butoane plutitoare atunci când sunt apăsate.
Pentru mai multe informații referitoare la noile componente, consultați documentația privind componentele.
Ionic 2 este, de asemenea, ambalat cu noi caracteristici și îmbunătățiri. Acestea se datorează în principal tranziției sale la Angular 2 și TypeScript.
Un avantaj al comutării la Angular 2 este noul sistem de animație al Angular, construit pe partea de sus a aplicației Animations Web API. Rețineți că API-urile Animații web nu sunt acceptate în toate browserele - de aceea trebuie să utilizați Crosswalk pentru a instala un browser acceptat împreună cu aplicația. Singurul dezavantaj al acestui lucru este că va face ca dimensiunea instalării să fie mai mare. O altă opțiune este de a utiliza un polyfill.
Aplicațiile create cu Ionic 2 sunt mai clare decât cele create cu Ionic 1. Iată de ce:
ion-img componentă. Utilizarea acestei componente în locul standardului img vă permite să transferați cererile HTTP pentru preluarea imaginilor unui Web Worker. Acest lucru face ca încărcarea imaginilor să se realizeze, în special în interiorul listelor mari. ion-img Componenta se ocupă, de asemenea, de încărcarea leneșă, care va solicita și ar produce imaginea doar după ce va deveni vizibilă în portul de vizualizare al utilizatorului.Ionic Native este echivalentul ngCordova pentru Ionic 2. Ambele acționează ca agenți de împachetare pentru pluginurile Cordova pentru implementarea funcționalității native (de exemplu, Camera, GeoLocation). Puteți chiar folosi Ionic Native în aplicația dvs. Ionic 1, dacă doriți. Principala diferență este că Ionic Native vă permite să vă scrieți codul utilizând funcțiile ES6 și sintaxa TypeScript. Acest lucru face mai ușor să lucrați cu în Ionic 2, deoarece deja utilizează TipScript în mod implicit. Iată un exemplu de implementare a pluginului Cordova Camera în ngCordova:
$ calduraCamera.getPicture (quality: 50), apoi (functie (imageData) var image = "data: image / jpeg; base64," + imageData;
Și iată cum se face folosind Ionic Native:
import Camera de la "ionic-native"; Camera.getPicture (opțiuni) .then ((imageData) => permite base64Image = 'date: image / jpeg; base64;' + imageData;; (err) => );
Documentația sa îmbunătățit foarte mult. Îmi place mai ales faptul că există acum diferite previzualizări pentru fiecare componentă de pe fiecare platformă. Acest lucru îi dă dezvoltatorilor o idee foarte bună despre modul în care ar arăta aplicația lor. Toate acestea fără ca dezvoltatorul să scrie o singură linie de cod!
În momentul în care a scris acest articol, Ionic 2 a fost eliberat. Aceasta înseamnă că este gata să fie utilizat pentru aplicații de producție. Având în vedere toate noile caracteristici, instrumente și beneficii care apar cu Angular 2 și TypeScript, singurul lucru care vă va opri să utilizați Ionic 2 este starea proiectului dvs..
Dacă începeți doar un proiect nou, puteți utiliza în continuare Ionic 1 dacă dumneavoastră și coechipierii dvs. sunteți familiarizați doar cu Angular 1 și proiectul dvs. trebuie finalizat cât mai curând posibil. Dar dacă vi sa acordat suficient timp pentru proiect, ar trebui să luați în considerare utilizarea lui Ionic 2. Va exista un pic de curbă de învățare și veți întâlni, de asemenea, unele probleme pentru că nu este așa de testat de luptă ca Ionic 1, dar este toate merita efortul datorita caracteristicilor si imbunatatirilor noi ale lui Ionic 2.
Dacă ați început deja proiectul dvs. curent cu Ionic 1, probabil că veți dori să rămânem cu Ionic 1 și să evitați o rescriere majoră. Nu vă faceți griji prea mult despre suport, îmbunătățiri și remedierile de eroare pentru dezvoltatorii ionic 1-ionic s-au angajat să susțină Ionic 1 pentru o lungă perioadă de timp. Cât timp nu este clar. Cel puțin, va fi susținut pentru câțiva ani după ce versiunea stabilă a lui Ionic 2 va fi lansată. Dar trebuie să ținem cont și de faptul că Ionic este un proiect open-source cu peste 200 de contribuabili. Atât timp cât oamenii continuă să o folosească, putem întotdeauna să ne așteptăm la o anumită formă de sprijin din partea comunității.
Asta e! În acest articol ați învățat totul despre Ionic 2. Mai exact, ați învățat despre diferențele semnificative dintre Ionic 2 și predecesorul său. De asemenea, am analizat noile funcții adăugate la Ionic 2 și dacă ar trebui să le utilizați pentru proiectele viitoare sau nu. Într-un tutorial viitor, vom pune aceste cunoștințe în practică prin crearea unei aplicații ionice 2. Rămâneți aproape!
Dacă doriți să aflați mai multe despre Ionic 2, asigurați-vă că verificați următoarele resurse:
Și, bineînțeles, avem un curs Ionic 2 aprofundat pe care îl puteți urmări aici, pe Envato Tuts+!
