Share
Unul dintre punctele forte ale lui Ionic este în serviciile pe care le oferă pe partea de sus a cadrului. Acestea includ serviciile pentru autentificarea utilizatorilor aplicației, notificările push și analizele. În această serie, învățăm despre aceste servicii creând aplicații care le utilizează.
În acest post, vom examina Ionic Deploy. Acest serviciu vă permite să publicați modificările aplicației dvs. Ionic fără a fi nevoie să o recompilați și să o trimiteți din nou la magazinul de aplicații. Acest lucru este foarte util pentru împingerea rapidă a remedierilor de eroare, a actualizărilor minore și a altor modificări cosmetice ale aplicației. Cu ajutorul funcției "Deploy Channels" puteți efectua, de asemenea, teste A / B introducând diferite modificări de cod la diferite canale de implementare.
Nu toate modificările pe care doriți să le introduceți în aplicație pot fi împinse utilizând Ionic Deploy. Numai modificările aduse HTML, CSS, JavaScript și activele dvs. www directorul poate fi împins în acest fel. Modificările binare, cum ar fi actualizările versiunii platformei Cordova, pluginurile Cordova (fie actualizarea celor existente, fie adăugarea unor noi) și activele aplicației, cum ar fi pictograma și ecranul de pornire, nu pot fi împinse utilizând funcția Ionic Deploy.
În aplicația dvs. Ionic puteți avea cod care va verifica implementările disponibile (actualizări). În mod implicit, va verifica implementările în producere canal. Dar, de asemenea, puteți specifica alte canale pentru a primi actualizări de la.
Apoi puteți să vă împingeți modificările folosind încărcare ionică comanda. Aceasta va încărca modificările dvs. în Cloud-ul Ionic. Odată ce sunt încărcate, puteți alege ce canal doriți să desfășurați și dacă doriți să desfășurați acum sau mai târziu.
Implementarea pe un canal monitorizat de aplicație va declanșa executarea codului din aplicație. Acest cod este apoi responsabil pentru descărcarea actualizării, extragerea acesteia și reîncărcarea aplicației pentru a aplica modificările.
În acest post, veți utiliza linia de comandă pentru a împinge modificările și pentru a testa dacă implementarea funcționează conform așteptărilor. Pentru a menține lucrurile simple, modificările pe care le vom introduce vor fi în principal către UI. Pentru fiecare implementare, vom schimba numărul de versiune afișat pentru aplicație. De asemenea, vom schimba imaginea afișată în aplicație pentru a arăta că activele pot fi actualizate, de asemenea.
Acum, dacă aveți o idee despre modul în care funcționează sistemul ionic și ce veți construi, este timpul să vă murdăriți mâinile creând de fapt o aplicație care utilizează implementarea ionică. Începeți cu bootstrapping o nouă aplicație Ionic:
pornire ionică - v2 deployApp tabs
Comanda de mai sus va crea o aplicație nouă utilizând șablonul filelor. Navigați în interiorul deployApp După ce ați terminat instalarea:
cd deployApp
Apoi, trebuie să instalați @ Ionic / nor-unghiular pachet. Aceasta este biblioteca JavaScript pentru serviciul Cloud Ionic. Ne permite să interacționăm cu serviciul Ionic Deploy și alte servicii ionice prin codul JavaScript.
npm install @ ionic / cloud-unghiular
După ce ați terminat instalarea, puteți inițializa o nouă aplicație Ionic bazată pe această aplicație. Înainte de a face acest lucru, asigurați-vă că aveți deja un cont Ionic. Instrumentul din linia de comandă vă va solicita să vă conectați cu contul dvs. Ionic, dacă nu ați făcut deja acest lucru.
ionic io init
Aceasta va crea o nouă aplicație numită "deployApp" (sau orice ați numit aplicația dvs. atunci când ați lansat o nouă aplicație Ionic), sub tabloul de bord al aplicațiilor Ionic.
După ce ați verificat dacă aplicația este listată în tabloul de bord Ionic, reveniți la terminal și instalați pluginul Deploy:
cordova plugin adăugați ionic-plugin-deploy - salvează
Rețineți că acest plugin este cel care face de fapt ridicarea greoaie. @ Ionic / nor-unghiular pachetul expune pur și simplu API-urile necesare pentru a lucra cu ușurință cu serviciile ionice în interiorul unei aplicații ionice.
Acum că ați făcut toate setările necesare, este timpul să adăugați codul pentru verificarea și aplicarea actualizărilor. Dar înainte de a face acest lucru, mai întâi să difuzați aplicația prin browserul dvs.:
ionice
Acest lucru vă permite să verificați dacă codul pe care l-ați adăugat funcționează sau nu. În acest fel, puteți face corecțiile necesare de îndată ce veți vedea o eroare.
Deschide src / app / app.module.ts fişier. Sub Ecran splash importați, importați serviciile necesare pentru lucrul cu Cloud Ionic:
import SplashScreen de la '@ ionic-native / splash-screen'; // adăugați următoarele: import CloudSettings, CloudModule din '@ ionic / cloud-angular';
Apoi, adăugați APP_ID din aplicația dvs. ionică. Puteți găsi acest lucru pe tabloul de bord al aplicației Ionic, chiar sub numele aplicației.
const cloudSettings: CloudSettings = 'core': 'app_id': 'ID-ul IONIC APP ID';
Odată ce ați adăugat acest lucru, îl puteți include acum ca unul dintre modulele aplicației:
@NgModule (declarații: [// ...], importurile: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ], );
Apoi, deschideți src / app / app.component.ts fişier. Chiar sub TabsPage import, includeți următoarele:
importați TabsPage din "... / pages / tabs / tabs"; // adaugă: import AlertController, LoadingController de la "ionic-unghiular"; importați Deploy de la '@ ionic / cloud-angular'; // importați serviciul Deploy din pachet @ ionic / cloud-unghiular
În constructor(), adăugați serviciile pe care le-am importat mai devreme:
constructor (platformă: Platformă, statusBar: StatusBar, splashScreen: SplashScreen, implementare publică: Implementare, alertă privatăCtrl: AlertController, private loadingCtrl: LoadingController) // ...
Deoarece dezvoltăm în continuare aplicația, setați canalul de implementare la dev:
this.deploy.channel = 'dev';
Mai târziu, dacă doriți să treceți la canalul de producție, puteți să eliminați pur și simplu această linie ca producere este canalul implicit pentru implementări. Dacă ați creat un alt canal, puteți să îl includeți și aici.
Puteți accesa o serie de instantanee care au fost descărcate anterior de aplicație. instantanee variabila este o matrice care contine ID-urile fiecarei instantanee.
Accentsconagua
this.deploy.getSnapshots () și apoi ((snapshots) => console.log ('acum obținerea instantaneelor ...'); console.log (snapshots);));Nu vom folosi instantanee pentru această aplicație, dar este bine de știut că aplicația stochează acest tip de informații pentru o utilizare ulterioară. În exemplul de mai jos, vom trece prin lista de fotografii vechi și vom șterge fiecare dintre ele pentru a elibera spațiu pe dispozitiv.
snapshots.forEach ((snapshot_id) => this.deploy.getMetadata (snapshot_id) .then ((metadata) => // face ceva cu metadate); // ștergeți snapshot this.deploy.deleteSnapshot (snapshot_id); );
Pentru a verifica actualizările, utilizați Verifica() metodă. Aceasta returnează o valoare booleană care vă spune dacă este disponibil un instantaneu nou sau nu. În mod implicit, ultima implementare va crea un instantaneu nou. Deci, numai cea mai recentă implementare va fi aplicată dacă ați împins două actualizări consecutiv.
this.deploy.check () și apoi ((snapshotAvailable: boolean) => // ...);
Dacă este disponibil un instantaneu pentru descărcare, puteți obține informații suplimentare despre acesta apelând getMetaData () metodă. Aceste metadate pot fi adăugate la o aplicație prin tabloul de bord al aplicației Ionic. Valorile perechi cheie pot fi adăugate aici și fiecare dintre acestea devine disponibil ca proprietate pentru metadate obiect. Mai târziu, vom folosi metadate pentru a personaliza mesajele afișate în aplicație de fiecare dată când devine disponibilă o nouă actualizare.
dacă (snapshotAvailable) // obțineți metadatele this.deploy.getMetadata () și apoi ((metadata) => console.log ("acum obține metadate ..."); console.log (metadate);); Apoi, afișați un mesaj de avertizare de confirmare pentru a permite utilizatorului să decidă dacă doresc sau nu să descarce actualizarea:
a alerta = this.alertCtrl.create (title: 'Version' + metadata.version + 'este disponibil', mesaj: 'Doriți să descărcați această actualizare?', butoane: (de exemplu, adăugați un cod de analiză pentru a număra câte utilizatori nu au aplicat actualizarea), text: "Yes", handler: () => // continuați cu descărcarea actualizării]); alert.present ();
S-ar putea să fiți preocupat de faptul că acest lucru ar deranja utilizatorul dacă continuă să primească promptul de a-și actualiza aplicația dacă continuă să răspundă "Nu". De cele mai multe ori, însă, nu este, de fapt, un lucru bun. Nu ar trebui să existe nici un motiv pentru ca un utilizator să respingă o actualizare dacă își îmbunătățește experiența.
Când utilizatorul este de acord, puteți continua și descărcați actualizarea. Acest lucru poate dura ceva timp, în funcție de conexiunea la internet și de dispozitivul dvs. Odată ce actualizarea este descărcată, afișați un încărcător pentru a atrage atenția utilizatorului în timp ce extrage. Odată ce este extras, reîncărcați aplicația și ascundeți încărcătorul.
this.deploy.download (), apoi (() => // descărcarea se face console.log ('descărcat completat!'); // show loader let loading = this.loadingCtrl.create (content: 'Now reloading aplicația ...); loading.present (); // extrage actualizarea this.deploy.extract (), apoi (() => console.log ('extract finalizat!'), this.deploy.load ); // reîncărcați aplicația pentru a aplica modificările console.log ('reload completed!'); loading.dismiss ();););Uitați-vă la ceea ce a fost actualizat app.components.ts fișierul ar trebui să arate după toate aceste schimbări.
Acum, când se adaugă codul pentru verificarea implementărilor, putem să construim aplicația și să o instalăm pe un dispozitiv. Restul modificărilor pe care le vom introduce vor fi în primul rând împinse prin serviciul Ionic Deploy.
Continuați și adăugați platforma Android la proiectul dvs. ionic și construiți .apk fișier cu următoarele comenzi:
platformă ionică adăugați și android Android android construi
Acest lucru va crea un Android-debug.apk fișier în interiorul Platforme / Android / construi / ieșiri / apk pliant. Copiați-l pe dispozitiv și instalați-l.
Acum este momentul să împingem câteva modificări la aplicație. Pentru a încerca acest lucru, faceți doar câteva modificări minore în interfața de utilizare a aplicației. Acum puteți încărca modificările:
încărcare ionică
Odată ce ați terminat încărcarea, va apărea o listă nouă activitate recenta. Apasă pe Editați | × link-ul acelei intrări. Acest lucru vă va permite să adăugați o notă, informații despre versiuni și metadate la versiunea respectivă. Este întotdeauna o idee bună să adăugați o notă, astfel încât să știți ce înseamnă eliberarea respectivă. Odată ce ați făcut acest lucru, faceți clic pe metadate și adăugați următoarele:
Apoi faceți clic pe Salvați pentru a vă angaja modificările. În cele din urmă, faceți clic pe lansa pentru a lansa eliberarea. După ce aplicația preia modificarea, metadatele pe care le furnizați devin disponibile.
Puteți vedea că arată acum numărul versiunii lansării:
Uneori veți împinge o actualizare cu Ionic Deploy, dar, de asemenea, reconstruiți și expediați aceste pachete în aplicația inclusă în App Store. Feriți-vă, totuși, deoarece Ionic nu știe că aplicația dvs. conține deja acea actualizare, iar aplicația dvs. îi va cere utilizatorului să descarce cele mai recente actualizări la prima utilizare a aplicației dvs..
Caracteristica de versiune poate preveni acest lucru. Cu funcția de versiune, puteți specifica versiunea aplicației care poate primi actualizările:
Puteți adăuga informații de versiune făcând clic pe EDITAȚI | × link pe o versiune specifică, și apoi mergeți la Versionare tab. De acolo, puteți specifica versiunile (fie iOS sau Android) pe care doriți să le vizați.
Ceea ce face ionic este compararea acestei versiuni cu cea pe care ați specificat-o în dvs. config.xml fişier:
Dacă versiunea aplicației cade între minim și maxim specificat, eliberarea este preluată. Și dacă versiunea aplicației este egală cu echivalent versiune, versiunea este ignorată. Deci, pentru captura de ecran de mai sus, dacă versiunea indicată în config.xml fișierul este 0.0.1, lansarea va fi ignorată de aplicație.
Următoarea schimbare pe care o vom face este să afișăm o imagine.
Primul lucru pe care trebuie să-l faceți este să găsiți o imagine. Pune-o înăuntru src / active / img folder și conectați-l din src / pagini / home / home.html fişier:
Acasă 
Versiunea 4
Încărcați modificările ca o nouă versiune pentru Ionic Deploy.
încărcare ionică
Odată încărcat, accesați tabloul de bord al aplicației Ionic și actualizați versiunea cu o notă și cu cea corespunzătoare versiune în metadate. Salvați modificările și implementați-o.
Deschiderea aplicației ar trebui să ridice acum această nouă versiune, iar actualizarea acesteia va aplica modificările interfeței UI.
În mod implicit, Ionic Deploy are trei canale pe care le puteți implementa: dev, înscenare, și producere. Dar, de asemenea, puteți crea noi canale pentru aplicația dvs. pentru a asculta actualizări. Puteți face acest lucru făcând clic pe pictograma roată din Ionic Deploy fila din tabloul de bord al aplicației:
Acest lucru este util pentru lucruri precum testul A / B, astfel încât să puteți împinge anumite modificări doar pentru anumiți utilizatori.
Nu uitați să vă actualizați codul pentru a utiliza respectivul canal de implementare specific:
this.deploy.channel = 'eu';
Dacă ați împins ceva ce nu ar trebui să aveți, puteți utiliza caracteristica de revizuire. Cu această caracteristică, puteți împinge o versiune anterioară înapoi la utilizatorii dvs..
Rețineți că nu puteți remedia codul rupt prin rulare înapoi! De exemplu, dacă aveți o eroare de sintaxă în codul dvs. JavaScript, acesta va rupe întreaga aplicație, iar codul pentru verificarea actualizărilor nu va fi rulat vreodată. Pentru a remedia aceste tipuri de erori, singurul lucru pe care îl puteți face este să lansați o nouă versiune în magazinul de aplicații.
Puteți reveni făcând clic pe Întoarceți-vă aici link pe orice implementare dată.
Acest lucru vă va cere să confirmați dacă doriți să vă întoarceți sau nu. După confirmare, acesta va fi setat automat ca versiunea curentă. Deci, codul pentru preluarea de noi versiuni îl va recunoaște ca cea mai recentă versiune și va cere utilizatorilor să se actualizeze. Comunicatele cu rulouri înapoi vor avea o pictogramă de reîmprospătare portocalie.
De asemenea, puteți lansa o versiune specifică făcând clic pe lansa link-ul de lângă versiunea pe care doriți să o implementați.
Puteți automatiza implementarea actualizărilor aplicațiilor pe Ionic Deploy cu cârligele Git. Cârligele Git vă permit să executați scripturi înainte sau după evenimente specifice Git, cum ar fi comiterea, împingerea și primirea. În acest caz, vom folosi pre-push cârlig pentru a încărca modificările noastre la Cloud Ionic chiar înainte de git push comanda face lucrul ei.
Începeți prin redenumirea eșantionului pre-push script la numele real recunoscut de Git:
mv .git / cârlige / pre-push.sample .git / hooks / pre-push
Deschideți fișierul din editorul de text și înlocuiți conținutul acestuia cu următoarele:
#! / bin / sh echo acum împingând modificările la încărcarea ionică a dispozitivului ionic
Acum, comiteți modificările și le împingeți la un repo de la distanță:
adăugați git. git commit -m "face unele schimbări ..." git push master de origine
Chiar înainte de git push comanda este executată, încărcare ionică va fi executat.
De asemenea, puteți să lansați automat lansarea dacă doriți:
#! / bin / sh echo acum împingând modificările la ionic deplasare încărcare ionică --deploy dev
Acest lucru nu va funcționa pentru exemplul nostru, totuși, deoarece nu puteți specifica metadatele!
Dacă doriți să continuați procesul de implementare, vă recomandăm să verificați API-ul HTTP pentru implementarea ionic. Aceasta vă permite să implementați programatic modificările aplicației dvs. de pe serverul de integrare continuă. Acesta vă permite să actualizați numerele de versiune și metadatele pe implementările dvs. Toate acestea se pot face automat și fără a atinge tabloul de bord al aplicației Ionic.
Asta e! În acest tutorial ați învățat despre implementarea Ionic și cum îl puteți utiliza pentru a împinge actualizările aplicației dvs. Ionic. Aceasta este o caracteristică puternică care vă permite să construiți un sistem robust de versiune și actualizare în aplicația dvs..
Rămâi acordat pentru mai mult conținut pe servicii ionice și în cloud, cum ar fi Ionic Deploy! Dacă doriți o introducere completă a începutului cu dezvoltarea aplicațiilor Ionic 2, verificați cursul nostru aici pe Envato Tuts+.
Și verificați câteva dintre celelalte postări despre dezvoltarea aplicațiilor mobile ionice și cross-platform.
