În această serie de tutoriale din două părți, învățați cum să creați prima dvs. aplicație Ionic 2. Acum că ați configurat mediul de dezvoltare și ați aflat despre fluxul de lucru pentru dezvoltare în Ionic 2, este timpul să vă murdăriți mâinile prin codarea aplicației.
Dacă nu ați făcut-o încă, urmați-vă împreună cu prima postare pentru a vă configura mediul de dezvoltare și pentru a vă bootstrai proiectul.
Această a doua parte va acoperi lucrurile pe care trebuie să le cunoașteți atunci când vine vorba de codificarea aplicațiilor din Ionic 2. Veți învăța cum să creați pagini pentru aplicație, cum să obțineți accesul utilizatorului și cum să utilizați pluginurile pentru a accesa funcționalitatea nativă. După ce ați terminat, veți rula aplicația într-un dispozitiv sau emulator. Dar, înainte de a ajunge la asta, să luăm o clipă pentru a vorbi despre ceea ce veți crea.
Ce veți crea
În acest tutorial, veți crea o aplicație de distribuire a fotografiilor. Debitul de bază ar trebui să fie după cum urmează:
Utilizatorul deschide aplicația și se conectează. Vor fi redirecționați către pagină pentru a alege o imagine pentru partajare.
Utilizatorul face clic pe Alegeți imaginea buton. Selectorul de imagini apare și utilizatorul alege o imagine. Această imagine va fi apoi examinată.
Utilizatorul introduce o legendă și dă clic pe Trimiteți imaginea pentru a trece imaginea în aplicația Instagram.
Acest tutorial vă va arăta doar modul de rulare a aplicației pe un dispozitiv Android, dar Cordova (cadrul pe care rulează Ionic) este cross-platform. Ionic 2 are teme încorporate pentru Android, iOS și Windows, deci este ușor să creați o versiune a aplicației dvs. și pentru aceste dispozitive.
Iată ce va arăta aplicația:
Setarea proiectului
Dacă ați urmat împreună cu tutorialul anterior, atunci ați creat deja mediul de dezvoltare Ionic 2 și proiectul dvs. a fost scos din schemă. Am folosit următoarele comenzi CLI Ionic 2 pentru a crea copacul de folder al proiectului și pentru a se pregăti pentru implementarea pe Android:
ionic plugin adăugați https://github.com/Telerik-Verified-Plugins/ImagePicker plugin pentru ioni adăugați cordova-instagram-plugin
Codarea paginii principale
Pentru restul tutorialului, veți lucra în primul rând în interiorul src dosar, deci presupuneți că src folderul este rădăcina de fiecare dată când vedeți o cale de fișier. (Dacă doriți o reîmprospătare pe căile create de șablonul de pornire Ionic, aruncați o privire la tutorialul anterior.)
În interiorul src director sunt patru dosare:
aplicaţia: aici este definit codul la nivel de aplicație. Dacă aveți nevoie să rulați un anumit cod atunci când aplicația pornește sau doriți să actualizați CSS global, atunci acesta este locul de parcurs.
bunuri: acesta este locul în care activează, cum ar fi imaginile folosite ca conținut pentru aplicație.
pagini: acesta este locul unde codul pentru paginile individuale merge. Fiecare pagină are un folder propriu, iar în interiorul fiecărui dosar sunt trei fișiere care definesc șablonul (HTML), stilul (CSS) și scriptul (TypeScript) pentru pagină.
tematică: aici mergeți dacă doriți să modificați tema Ionic 2 implicită.
Pagina de pornire
În mod prestabilit, șablonul inițial necompletat Ion are deja o pagină de pornire. Deci, tot ce trebuie să faceți este să îl editați pentru a afișa conținutul dorit. Deschide pagini / home / home.html și șterge conținutul actual. Adăugați următoarele în partea de sus a paginii:
Logare
Codul de mai sus este boilerplate pentru antetul aplicației. componentă servește ca o bară de instrumente de navigație. Acesta va afișa automat un buton înapoi ori de câte ori navigați departe de pagina implicită. stabilește titlul barului nav.
Următorul este conținutul real al paginii. Puteți defini că în interiorul componentă. Plăcuța standard poate fi aplicată specificând umplutură opțiune. În interiorul containerului, creați o listă nouă care conține câmpurile de introducere pentru a introduce numele de utilizator și parola. Crearea unei liste care să conțină câmpuri de editare este o practică standard în Ionic - vă permite să stivuieți fiecare câmp într-un mod deasupra celuilalt. Sub lista este butonul pentru conectare.
Nume de utilizatorParola
Să luăm o clipă pentru a vedea codul pentru introducerea textului și a face clic pe un buton. În Ionic, puteți defini câmpurile de introducere a textului folosind componentă. Pentru a lega câmpul de text la o proprietate de clasă definită în scriptul dvs. de pagină, utilizați [(NgModel)]. Apoi valoarea atribuită este numele proprietății clasei.
Pentru a stabili legarea datelor bidirecționale, puteți seta [valoare] la același nume de proprietate utilizat pentru [(NgModel)]. Aceasta vă permite să actualizați valoarea câmpului de text prin modificarea valorii modelului din scriptul de pagină. Mai târziu, veți vedea cum să definiți o proprietate de clasă în interiorul scriptului de pagină.
Pentru a defini butoanele, utilizați standardul buton element în HTML. Dacă vă întrebați de ce nu este , este din motive de accesibilitate. Butoanele sunt o componentă crucială a interfeței, astfel încât echipa ionică a decis să rămână accesibilă cu butoanele HTML standard. ion-buton directiva este adăugată pentru a furniza funcționalități suplimentare.
Pentru a adăuga un dispozitiv de tratare a clicurilor, utilizați (clic) directivă, cu o valoare care specifică funcția (definită în scriptul dvs. de pagină) pentru a fi executată atunci când apare evenimentul de clic.
Pagina de pornire Script
Deschide pagini / home / home.ts fișier, ștergeți tot conținutul acestuia și adăugați următoarele:
Descărcând codul de mai sus, introducem mai întâi clasa de componente angulare, care are deja toate instrucțiunile ionice.
import Component de la '@ angular / core';
Apoi, importăm controlerele pentru navigare și alerte de la ionic unghiular pachet. Aici sunt incluse toți controlorii ionici.
import NavController, AlertController de la "ionic-unghiular";
După aceea, vom importa PickerPage. Veți crea mai târziu, deci lăsați-l comentat pentru moment. Nu uitați să eliminați comentariul după ce sunteți pregătit pentru încărcare.
După import, utilizați @Component decorator pentru a specifica șablonul HTML care va fi utilizat de script:
@Component (templateUrl: 'home.html')
Acum putem defini clasa pentru scriptul de pagină de pornire. Vom exporta această clasă pentru a putea fi importată din alte fișiere din aplicație.
clasa de export HomePage ...
Fă NavController și AlertController disponibile în întreaga clasă prin definirea lor ca parametri în constructor. Acest lucru vă permite să utilizați this.navCtrl, de exemplu, atunci când doriți să utilizați NavController pentru a naviga la o altă pagină.
constructor (public navCtrl: NavController, public alertCtrl: AlertController)
Acum suntem gata să definim proprietățile controlorului nostru care pot fi menționate din șablon. Aceste proprietăți vor conține valoarea curentă a câmpului de text pentru numele de utilizator și parola:
username: string; parola: șir;
Pentru a păstra lucrurile simple, vom folosi valori codate greu pentru numele de utilizator și parola. Însă pentru aplicațiile din lumea reală, de obicei, solicitați unui server să autentifice utilizatorul.
readonly APP_USERNAME: string = 'me'; // constantele în TypeScript sunt definite prin specificarea proprietății care urmează să fie readon readon APP_PASSWORD: string = 'secret';
În interiorul Logare() , creați o alertă pentru momentul în care utilizatorul introduce un nume de utilizator sau o parolă incorecte:
a alerta = this.alertCtrl.create (title: 'Login Failed', subTitle: 'Numele de utilizator sau parola pe care ați introdus-o este incorectă', butoane: ['OK']);
Dacă acreditările sunt incorecte, arătați alerta:
alert.present ();
Dacă numele de utilizator și parola introduse de utilizator corespund valorilor codate greu, utilizați NavController pentru a împinge pagina Picker în stivă de navigare. Indiferent de pagina pe care o introduceți în stivă de navigare, va deveni pagina curentă, în timp ce afișarea unei pagini va ajunge în mod eficient la pagina anterioară. Acesta este modul în care funcționează navigația în Ionic 2.
this.navCtrl.push (PickerPage);
Picker Page
Apoi, trebuie să creați pagina de selectare. După cum știți deja, standardul este crearea unui dosar separat pentru fiecare pagină, iar fiecare dosar va avea trei fișiere în el. Din fericire, CLI-ul ionic vine și cu o comandă care ne permite să creăm noi pagini:
ionic g page pickerPage
Aceasta utilizează Genera care va crea dosarul de pagină cu cele trei fișiere din interior. Cel mai bun dintre toate, fiecare fișier vine deja cu un cod de boilerplate de la care puteți începe cu.
Picker Page Template
Odată ce sa terminat, deschideți-l pagini / Picker / picker.html și înlocuiți codul de comandă cu următoarele:
Alegeți imaginea
Legendă
Niciunul din acest cod nu este cu adevărat necunoscut, cu excepția ascuns directiva și utilizarea unei directive component.
ascuns directiva vă permite să ascundeți un element bazat pe o valoare specifică definită în scriptul dvs. de pagină. Astfel, dacă has_picked_image este Adevărat, numai atunci va face asta div fi vizibil.
...
componentă este utilizată pentru crearea cardurilor. Cardurile reprezintă o modalitate foarte bună de a afișa imagini în interiorul aplicațiilor.
Stilul paginii Picker
Deschide pagini / Picker / picker.scss fișier și adăugați următoarele:
.form-container padding-top: 20px;
Script Picker Page
Deschide Pagini / Picker / picker.ts fișier și adăugați următoarele:
O să sparg puțin. Mai întâi vom importa pluginurile pe care le-ați instalat mai devreme. Observați că toate pluginurile sunt instalate sub același pachet (ionic-native). Acest lucru este foarte frumos deoarece, în loc să trebuiască să importați fiecare plugin în propria linie, îl puteți face într-o singură linie.
import ImagePicker, Instagram de la "ionic-native";
Apoi declarăm proprietățile clasei:
picked_image: șir; // imaginea selectată de utilizator has_picked_image: boolean = false; // pentru a determina cu ușurință dacă există în prezent o imagine selectată de utilizator sau nu legendă: șir; // captionul pentru imagine readonly DEFAULT_IMAGE: string = 'http://placehold.it/500x500'; // imaginea implicită
Cand Alegeți imaginea butonul de clic, definiți opțiunile pentru selectorul de imagini. Aceste opțiuni sunt destul de explicative, dar am adăugat câteva comentarii pentru a clarifica ceea ce face fiecare.
permiteți opțiunile = maximumImagesCount: 1, // numărul maxim de imagini pe care utilizatorul poate alege lățimea: 500, // lățimea maximă în care imaginea va fi introdusă odată cu ridicarea înălțime: 500, // înălțimea maximă în care imaginea va fi în momentul în care este selectat calitatea: 50, // calitatea fotografiei. Valoarea poate fi de până la 100 pentru ieșire de calitate de 100% Tip: 1 // în ce format vor fi rezultatele după ce utilizatorul a ales o imagine. // 0 este pentru fișiere URI în timp ce 1 este pentru URI-urile de date. ;
Specificarea funcției lăţime si înălţime nu înseamnă neapărat că imaginea rezultată va folosi acea lățime și înălțime exacte. Ceea ce inseamna este ca ionicul va folosi acele dimensiuni ca lățimea sau înălțimea maximă în așa fel încât raportul de aspect să fie menținut.
Utilizăm datele URI ca tip de ieșire, deoarece pluginul Instagram acceptă numai URI de date. Aceasta înseamnă că, de asemenea, trebuie să ajustați lățimea, înălțimea și calitatea la minim, deoarece URI-urile de date pot fi foarte lungi dacă calitatea este ridicată - întreaga imagine este codificată într-un șir URI! Acest lucru ar putea face ca aplicația să se prăbușească, deci este întotdeauna o bună practică să rămânem cu imagini de calitate inferioară și mai mici atunci când lucrăm cu URI-uri de date.
Apoi, utilizați pluginul Image Picker pentru a declanșa ecranul de selectare a imaginilor. Deoarece așteptăm doar o singură imagine, putem accesa pur și simplu primul element din matricea rezultatelor. De asemenea, trebuie să prefixăm prefixul pentru URI-urile de date.
În cele din urmă, atunci când Trimiteți imaginea butonul este apăsat pe butonul acțiune metoda furnizată de pluginul Instagram va declanșa ecranul de partajare din aplicația Instagram care va fi lansată. Aceasta va avea deja imaginea pre-completă.
Cu toate acestea, legenda nu va fi copiată. Aplicația Instagram a dezactivat subtitrările pre-umplute, astfel încât câmpul de legendă va fi gol după ce se deschide aplicația Instagram. Ca soluție, pluginul Instagram copiază legătura în clipboard. Acest lucru înseamnă că utilizatorul îl poate lipi în câmpul de text al legendei din aplicația Instagram.
Ultimul pas este de a deschide app / app.module.ts fişier. Acesta este modulul rădăcină al aplicației, unde definiți toate paginile și furnizorii (cum ar fi dispozitivul de tratare a erorilor Ionic implicit) pe care îl veți folosi în întreaga aplicație.
Asigurați-vă că toate paginile pe care le-ați creat sunt definite, în caz contrar veți primi o eroare când navigați la o pagină care nu a fost definită. În mod implicit, funcția Pagina principala este deja definit aici, deci trebuie doar să adăugați PickerPage. Doar importați-o în partea de sus a fișierului și apoi adăugați-o sub declaraţii și entryComponents matrice. Rețineți că AplicațiaMea nu este o pagină; este o componentă care servește ca o coajă goală pentru paginile în care trebuie să fie încărcate.
import NgModule, ErrorHandler de la '@ angular / core'; import IonicApp, IonicModule, IonicErrorHandler de la "ionic-unghiular"; import MyApp din "./app.component"; importați HomePage din "... / pages / home / home"; import PickerPage din "... / pages / picker / picker"; @NgModule (declarații: [MyApp, HomePage, PickerPage], import: [IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [furnizați: ErrorHandler, useClass : IonicErrorHandler]) clasa de export AppModule
Dacă deschideți app / app.components.ts fișier, veți vedea următoarele:
import Component de la '@ angular / core'; import Platform de la "ionic-unghiular"; importați StatusBar, Splashscreen de la "ionic-native"; importați HomePage din "... / pages / home / home"; @Component (templateUrl: 'app.html') clasa de export MyApp rootPage = HomePage; constructor (platformă: platformă) platform.ready (), apoi (() => // Bine, platforma este gata și pluginurile noastre sunt disponibile. StatusBar.styleDefault (); Splashscreen.hide (););
Aici puteți defini pagina rădăcină - pagina pe care utilizatorul o va vedea odată ce deschide aplicația. În acest caz, Pagina principala este pagina principală. Acest lucru este, de asemenea, perfect pentru executarea codului de inițializare, deoarece codul de aici este executat doar o dată când utilizatorul lansează aplicația. Când inițializați ceva (de exemplu, solicitați permisiunea de a activa Bluetooth), veți dori întotdeauna să așteptați până la platform.ready () evenimentul este declanșat. Doar odată ce evenimentul a fost concediat, puteți fi siguri că funcțiile native sunt gata să fie apelate.
Rularea aplicației
Acum sunteți pregătit să rulați aplicația pe un dispozitiv mobil sau emulator. Puteți face acest lucru executând următoarea comandă:
ionic rula android
Asigurați-vă că aveți un dispozitiv conectat la computer sau că aveți o instanță în execuție a emulatorului atunci când executați comanda de mai sus. Dacă tot nu funcționează, verificați dacă ați activat depanarea USB în dispozitiv și executați dispozitive adb. Acest lucru va determina conectarea calculatorului dvs. la dispozitivul dvs. Pur și simplu sunteți de acord cu instrucțiunile din dispozitiv după ce vedeți promptul de autentificare.
Dacă doriți să aveți o copie a fișierului APK, astfel încât să îl puteți partaja cu un prieten, puteți genera una prin executarea următorului:
ionic construi android
Acest lucru va crea un Android-debug.apk fișier în Platforme / Android / construi / ieșiri / apk pliant.
Concluzie
Asta e! În acest tutorial, ați creat prima dvs. aplicație Ionic 2. Este o aplicație simplă și s-ar putea să fi fost chiar ușor. Dar ați învățat cum să configurați un mediu pentru dezvoltarea aplicațiilor Ionic 2 și ați învățat câteva concepte de bază pe care le puteți aplica atunci când dezvoltați aplicații în viitor. Acestea includ obținerea valorii curente dintr-un câmp de text, răspunsul la evenimentele de clic, legarea imaginilor și utilizarea pluginurilor pentru a accesa funcționalitatea nativă. Așa că te speli pe spate! Ai făcut o treabă bună să ajungi atât de departe.
Î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.
Share
Accentsconagua
