Codul primului tău ionic 2 App Noțiuni de bază

Cu lansarea recentă a lui Ionic 2, ați putea fi unul dintre acei dezvoltatori de aplicații hibride care doresc să încerce acest lucru. Dar poate că sunteți copleșiți de cantitatea de învățare necesară pentru a începe.

De aceea, vreau să vă dau un început bun trecând pas cu pas prin crearea primei dvs. aplicații Ionic 2. Dacă sunteți deja familiarizați cu Ionic, atunci conceptele ar putea ușor "faceți clic" cu voi. Dar dacă sunteți un începător complet, să nu vă faceți griji - nu voi avea nicio cunoaștere prealabilă a cadrului.

Prezentare generală a aplicațiilor

În acest tutorial și în următorul, veți crea o aplicație de partajare a fotografiilor, care permite utilizatorilor să aleagă o imagine de pe dispozitivul lor și să o partajeze cu Instagram. Iată ce va arăta aplicația:

Configurați-vă mediul

Înainte de a putea începe să dezvoltați aplicații cu Ionic 2, mai întâi trebuie să configurați mediul de dezvoltare. Aceasta include următorii biți de software:

• Android SDK: aplicațiile create cu Cordova și Ionic se bazează pe aceleași instrumente de dezvoltatori utilizate de dezvoltatorii de aplicații native.
• Node.js: acest lucru este folosit în principal de către Ionic pentru scule de lucru - lucruri cum ar fi compilarea codului și verificarea erorilor.
• Un dispozitiv sau emulator Android pentru testare. Puteți instala emulatorul implicit Android cu programul de instalare SDK Android.

Nu vă voi arăta cum să vă configurați mediul de dezvoltare. Ghidul platformei Cordova face deja o treabă excelentă:

• Android Platform Guide
• Ghidul platformei iOS

Aceste două pagini vă vor arăta tot ce trebuie să știți despre configurarea Cordova pentru iOS sau Android. Odată ce mediul dev este setat, putem trece la pasul următor.

Instalați Cordova și ionic 

Pfiu! Acum puteți instala Cordova și ionic. Utilizați următoarea comandă:

npm instalați -g cordova ionic

Odată ce au terminat instalarea, presupunând că nu ați primit erori, puteți verifica dacă acestea au fost într-adevăr instalate cu următoarele comenzi: cordova --versiune și ionic --versiune. Acest lucru vă va arăta versiunile cadrelor Cordova și ionice instalate pe sistemul dvs. Pentru mine, ei se întorc 6.4.0 și 2.2.1.

Dacă doriți să vedeți informații de versiune mai detaliate, cum ar fi versiunea Ionic Framework și versiunea Ionic CLI, utilizați în schimb următoarele:

informații ionice | grep "Versiunea"

Iată un exemplu de ieșire:

Ionic Framework Versiune: 2.2.0 Ionic CLI Versiune: 2.2.1 Ionic App Lib Versiune: 2.2.0 Ionic App Scripts Versiune: 1.1.4 Nod Versiune: v6.7.0

Creați un proiect nou ionic

CLI Ionic oferă pornire ionică comandă pentru crearea cu ușurință a unui nou proiect:

pornire ionică photoSharer martor --v2 --id com.tutsplus.photosharer

Iată un șablon care vă ajută să înțelegeți ce face fiecare opțiune individuală:

pornire ionică numele aplicației șablonul de pornire utilizat --v2 --id ID al aplicației când este instalat

Șablonul de pornire folosit aici este gol. Aceasta conține doar minimul minim pentru a obține ceva afișat pe ecran. Există și altele, dar ele pot fi puțin copleșitoare.

Amintiți-vă că CLI-ul ionic satisface atât proiectele Ionic 1 cât și Ionic 2, deci trebuie să specificați în continuare --v2 opțiune pentru a bootstrap un proiect Ionic 2, deoarece Ionic 1 este încă implicit. Dar odată ce vă aflați într-un proiect Ionic 2, CLI-ul ionic este suficient de inteligent pentru a ști care versiune să folosească.

Adăugarea platformei

Implicit, Ionic nu vine cu nici o platformă pe care să o puteți desfășura. Puteți adăuga unul utilizând funcția platformă ionică adăugați comanda urmată de platforma pe care doriți să o implementați:

platformă ionică adăugați android

Dacă doriți să implementați o altă platformă, înlocuiți-o Android cu orice platformă doriți.

Instalarea Plugin-urilor

Pentru această aplicație, veți avea nevoie de două pluginuri: una pentru selectarea unei imagini din biblioteca utilizatorului și una pentru partajarea imaginii în aplicația Instagram. 

Primul este pluginul Image Picker. Aceasta oferă aplicației posibilitatea de a selecta imagini din biblioteca foto a utilizatorului.

pluginul ionic adăugați https://github.com/Telerik-Verified-Plugins/ImagePicker

Următorul este pluginul Instagram. Aceasta vă permite să transmiteți imaginea în aplicația Instagram pentru postare.

ionic plugin adăugați cordova-instagram-plugin

Cele două pluginuri pe care tocmai le-ați instalat fac parte dintr-un set curativ de pachete ES6 și TypeScript pentru pluginurile Cordova numite Ionic Native. Principala lor sarcină este de a face mai ușor să interacționeze cu pluginurile Cordova prin împachetarea apelurilor inversă din plugin promisiuni sau observabilelor. 

Flux de lucru pentru dezvoltare

Acum sunteți gata să începeți să codificați aplicația. Dar, înainte de a ajunge la asta, să aruncăm o privire mai întâi la fluxul de lucru și structura directorului Ionic 2. 

În Ionic 2, cea mai mare parte a lucrărilor de dezvoltare se face în interiorul src pliant. Aceste fișiere sunt recompilate de fiecare dată când faceți modificări în fișierele din acest folder. Spre deosebire de Ionic 1, compilarea este necesară deoarece fișierele sursă sunt scrise în TypeScript (compilat la codul ES5) și Sass (compilate în codul CSS). De fiecare dată când efectuați o modificare, codul este, de asemenea, verificat pentru erori, care sunt raportate înapoi dezvoltatorului prin consolă sau previzualizarea aplicației. După ce se face compilația, fișierele rezultate sunt copiate pe www , iar modificările sunt reflectate în previzualizarea aplicației.

Structura folderului

Pentru a obține o muncă confortabilă cu un proiect Ionic 2, trebuie să vă familiarizați cu structura folderului. Pentru început, trebuie să știți ce folosește fiecare folder pentru a ști unde să plasați fișierele sursă și unde să căutați fișierele de care aveți nevoie. 

• node_modules:acesta este locul unde sunt stocate dependențele ionice 2. De cele mai multe ori nu aveți nevoie să atingeți acest dosar decât dacă există o problemă cu una dintre dependențe și trebuie să o reinstalați.
• platforme: acesta este locul în care este plasat codul specific pentru platformă și unde este instalat programul de instalare a aplicației atunci când construiți aplicația pentru a rula pe un dispozitiv sau emulator. Asta înseamnă că toate fișierele din dvs. www și Plugin-uri dosarele sunt copiate aici de fiecare dată când construiți aplicația. 
• Plugin-uri: aici se află unde sunt stocate pluginurile, evident - atât pluginurile Ionic implicite cât și orice alte pluginuri pe care le instalați.
• resurse: aici veți pune resurse pentru aplicații, cum ar fi pictograma și ecranul de pornire.
• src: aici veti codifica majoritatea timpului. Toate șabloanele, foile de stil și fișierele TypeScript care alcătuiesc aplicația sunt stocate aici.
• www: acesta este locul în care se află fișierele dvs. compilate. Fișierele de aici sunt difuzate în previzualizarea aplicației.
• cârlige: aici sunt stocate scripturile de cârlig de dezvoltare Cordova. Acestea sunt folosite dacă aveți scripturi personalizate pe care doriți să le executați pe parcursul unei părți a ciclului de viață al dezvoltării (de exemplu, când se adaugă o platformă sau un plugin).

Rularea serverului de dezvoltare

În timp ce dezvoltați o aplicație, este util să vedeți o previzualizare live a aplicației care este actualizată în timp ce modificați codul. Pentru a lansa serverul de dezvoltare, utilizați următoarea comandă:

ionice

Aceasta va începe procesul de urmărire a modificărilor în fișierele sursă și va începe să le compilați în timp real. Implicit, Ionic va servi previzualizarea la http: // localhost: 8100 /. Veți vedea ceva de genul următor și apoi puteți să faceți o previzualizare a aplicației dvs. în browser la adresa URL raportată.

Pasii urmatori

Acum, că mediul nostru de dezvoltare este setat, suntem gata să sari în codificarea aplicației! Rămâi acordat mâine pentru postul următor, unde vă voi arăta cum să codificați aplicația, construind interfața utilizator și toate funcționalitățile de partajare a fotografiilor. Va fi distractiv!

Între timp, verificați câteva din celelalte tutoriale ale noastre despre Ionic 2!

Dacă doriți o introducere profundă și practică a cadrului Ionic 2, încercați cursul Noțiuni de bază cu ionic 2.

În acest curs, Reggie Dawson vă va învăța totul despre cadrul ionic și vă va arăta cum să construiți o aplicație mobilă de la zero. Pe parcurs, veți afla despre biblioteca componentelor ionice, despre programarea JavaScript-ului static tipizat cu TypeScript și despre integrarea unei aplicații Ionic 2 cu un API bogat media.