Share
Deci ați auzit despre Ionic și vă întrebați cum să începeți? În acest tutorial veți învăța cum să configurați un mediu de dezvoltare ionică pe calculatorul dvs., precum și cum să creați un proiect ionic.
Felicitări, dacă vizionați acest articol prin intermediul unui computer, aveți una dintre cele mai importante cerințe pentru dezvoltarea aplicațiilor ionice: veți avea nevoie de un calculator personal fizic (PC) pentru a face acest lucru. Acesta poate fi un computer care rulează Windows, Mac sau Linux.
Din moment ce construim aplicații ionice folosind tehnologii web, veți avea nevoie și de instrumente de dezvoltare web instalate. Acesta include un browser web (de preferat Google Chrome) pentru a rula și depana aplicațiile noastre și un editor de text (cum ar fi Sublime, Atom sau Visual Studio Code) pentru a scrie și edita codul nostru. Dacă sunteți nou în dezvoltare, aș recomanda Visual Studio Code așa cum este folosit în mod obișnuit și gratuit.
Cu aceste cerințe de bază instalate pe computer, să mergem mai departe și să instalăm dependențele de care avem nevoie pentru a construi aplicații ionice.
Din păcate, nu există un singur pachet de instalare care să instaleze automat un mediu de dezvoltare Ionic pe calculatorul dvs. Indiferent de sistemul dvs. de operare, trebuie să instalați manual fiecare dependența necesară. Deci, să mergem mai departe și să începem să înființăm mediul nostru de dezvoltare ionică.
Prima dependență de care trebuie să instalăm este Node.js, care este un cadru JavaScript de la server. Vom folosi Node.js pentru managerul de pachete de noduri (npm), ceea ce ne va permite să instalăm toate pachetele și instrumentele de care avem nevoie pentru proiectele noastre. Vom utiliza, de asemenea, Node.js pentru a rula un serviciu de dezvoltare a serverului care ne va permite să previzualizăm aplicații în browser.
Ionic recomandă ca, la instalarea Node.js, să selectați cea mai recentă versiune de asistență pe termen lung (LTS). În cazul meu, după cum puteți vedea mai sus, aceasta este versiunea 8.9.1 LTS. Ionic recomandă utilizarea versiunilor LTS deoarece acestea sunt mai stabile.
Deci, pur și simplu descărcați versiunea LTS, treceți prin instrucțiunile de instalare și odată ce ați terminat instalarea, veți fi gata să continuați cu pasul următor.
Cu Node.js instalat, sunteți gata să instalați Cordova și ionic. Iată în cazul în care lucrurile s-ar putea obține un pic dificil pentru unii, mai ales cei care nu au lucrat niciodată cu interfața de linie de comandă (CLI) înainte. Ar putea părea puțin cam descurajant la început și s-ar putea să simțiți că veți sfârși prin a rupe ceva pe calculatorul dvs. iubit! Ei bine, nu veți face așa, relaxați-vă și încercați să urmați.
Pe Mac și Linux, căutați Terminal, care este CLI pe care îl vom folosi pentru a instala Cordova și Ionic. În Windows, căutați Prompt de comandă. Acesta este echivalentul Terminalului pe un PC Windows.
Cu Terminalul deschis pe Mac sau Linux, tastați următoarea comandă și rulați-o apăsând introduce pe tastatură.
sudo npm instalați -g cordova ionic
Ulterior, s-ar putea să vi se solicite introducerea unei parole. Dacă da, introduceți parola pe care o utilizați pentru a vă conecta la computer și apăsați introduce din nou.
Din linia de comandă pentru Windows, tastați următoarea comandă și executați-o apăsând introduce pe tastatură.
npm instalați -g cordova ionic
După cum probabil ați observat, folosim Node Package Manager (npm) pentru a instala atât Ionic cât și Cordova deasupra, deci este foarte important să instalați Node.js mai întâi! S-ar putea să fi observat și faptul că pe Mac și Linux pe care le folosim sudo în fața poruncii noastre. Acest lucru este necesar pentru a permite instalarea Ionic și Cordova la nivel global pe aceste sisteme.
Procesul de instalare poate dura câteva minute, în funcție de conexiunea la internet, dar după ce ați terminat, ar trebui să vedeți ceva de genul:
Cool, deci cu Ionic și Cordova instalate cu succes, să trecem la secțiunea următoare și să instalăm software suplimentar pe care trebuie să-l construim cu succes aplicațiile iOS și Android de la proiectele noastre ionice.
Nu aveți nevoie să instalați aceste instrumente software chiar acum; puteți continua să construiți aplicații ionice utilizând tehnologiile web pe care le-am discutat mai devreme. Așa că nu ezitați să renunțați la această parte dacă sunteți dornici să faceți doar primul proiect Ionic.
Cu toate acestea, dacă doriți să rulați aplicațiile pe un dispozitiv mobil real, cum ar fi un telefon Android sau un iPhone, va trebui în cele din urmă să instalați instrumentele specifice platformei pentru aceste platforme. Vom analiza mai atent dezvoltarea de dispozitive Android și iOS în viitoarele tutoriale.
Dacă doriți să puteți compila aplicații Android din proiectul dvs. Ionic, va trebui să instalați mai întâi kitul de dezvoltare Java (JDK) 8 sau o versiune ulterioară. Accesați site-ul web JDK, acceptați acordul de licență și selectați opțiunea de descărcare relevantă pe baza sistemului dvs. de operare. Apoi urmați instrucțiunile de instalare.
După ce ați instalat JDK, trebuie să instalați Android Studio, IDE Android (mediu de dezvoltare integrat).
Cu aceste două pachete instalate, veți putea să compilați și să pachetați o aplicație Android din proiectul dvs. Ionic.
Construirea aplicațiilor iOS din proiectele dvs. Ionic este posibilă numai pe un computer Mac OS, din păcate, ceea ce înseamnă că nu veți putea să compilați sau să construiți aplicații iOS de pe un computer care rulează Windows sau Linux. (Deși aveți posibilitatea să codificați aplicația acum pe un computer Windows și, ulterior, să o creați pentru iOS de pe un Mac.)
Pentru a compila aplicațiile iOS pe sistemul dvs. de operare Mac OS, va trebui să instalați Xcode. Pur și simplu mergeți la AppStore pe Mac și căutați Xcode. Aceasta este o descărcare gratuită.
După ce ați instalat cu succes Xcode, va trebui să instalați și alte instrumente de linie de comandă pentru Xcode. Pentru aceasta, deschideți terminalul și executați următoarea comandă.
xcode-select - install
Acest lucru va instala instrumente suplimentare pe care Cordova le va utiliza pentru a vă construi proiectele iOS.
Pentru a vă putea construi proiectele iOS din linia de comandă, va trebui, de asemenea, să executați următoarea comandă.
sudo npm instalați -g ios-deploy
Cu totul setat, sunteți gata să construiți aplicații iOS din proiectele dvs. Ionic.
Ionic utilizează linia de comandă - și în special CLI-ul Ionic, care a fost instalat automat în timpul procesului de configurare - pentru a crea, testa și a construi aplicațiile dvs. ionice. Deci, aveți din nou curajul să deschideți Terminal sau Command Prompt (în funcție de sistemul dvs. de operare).
Un cuvânt rapid de sfaturi înainte de a continua: învățați să îmbrățișați instrumentul CLI Ionic. Acum a devenit oficial noul tău prieten, așa că învață să-l iubești!
Primul lucru pe care trebuie să-l facem este să specificăm unde vrem să salvăm proiectul nostru ionic. În scopul acestui exercițiu, îl vom salva pur și simplu pe desktop-ul nostru. Deci, navigați la desktop cu următoarea comandă.
cd Desktop
Avem câteva opțiuni pentru tipul de aplicație ionică pe care am dori să o creăm și acestea sunt clasificate ca șabloane de proiect Ionic. Pentru începători, există trei tipuri de șabloane: a Gol șablon, a Tab-uri șablon și a SideMenu șablon. Vom folosi șablonul filelor în acest exemplu, așa că să mergem mai departe și să ne creăm proiectul.
Vom numi proiectul nostru ionic DemoApp. Deci, pentru a crea proiectul DemoApp folosind șablonul filelor și salvați-l pe desktopul nostru, trebuie să executați următoarea comandă în CLI.
ionic Start tab-uri DemoApp
Această comandă va dura puțin timp până când se va descărca toate pachetele șablonului de proiect și dependențele de aplicații. În timpul instalării s-ar putea să fiți întrebat dacă doriți să instalați kitul gratuit Ionic Pro SDK și să vă conectați aplicația. Răspuns Nu și apăsați introduce din nou, pentru a continua instalarea. După ce ați terminat instalarea, ar trebui să vedeți ceva de genul:
Felicitări! Ați creat cu succes primul proiect Ionic.
Odată cu finalizarea proiectului, suntem acum gata să vizualizăm aplicația noastră Ionic. Pentru a face acest lucru, navigați la folderul de proiect nou creat prin CLI executând cd ./DemoApp și o dată în interiorul acestui director rulați fie ionice sau ionic.
ionice și ionic sunt comenzi Ionic CLI care vor compila aplicația dvs. și vor porni un server local dev, permițându-vă să vizualizați aplicația dvs. Ionic în interiorul unui browser web de pe computer.
În imaginea de mai sus, am rulat ionic și, după cum puteți vedea, pot vedea proiectul meu ionic compilat ca o aplicație web. Încă nu am reușit să-l compilam ca pe o aplicație nativă, dar vom face acest lucru în tutoriale ulterioare.
Îmi amintesc că atunci când am început să dezvolt aplicații ionice, a fost foarte confuz la început, mai ales că a trebuit să fac o mulțime de lucrări inițiale prin CLI. Ca pe cineva care nu era obișnuit să lucreze cu CLI deloc, aceasta a fost o călătorie înfricoșătoare pentru mine - așa că îmi pot imagina cum s-ar simți vreunul dintre voi acolo. Sfatul meu pentru tine este să-l îmbrățișezi - vei fi mai confortabil și obișnuit cu asta, și nu-ți face griji, nu vei sparge nimic pe calculatorul tău iubit!
Am acoperit o mulțime de teren în acest post, dar cu această cunoaștere sunteți peste unul dintre cele mai mari obstacole în calea codării aplicațiilor ionice. Rămâi acordat pentru următorul post din această serie!
Până atunci, verificați câteva dintre cele mai bune postări despre codarea aplicațiilor ionice sau încercați unul dintre cursurile noastre video cuprinzătoare despre dezvoltarea aplicațiilor ionice!
Accentsconagua