Share
În acest tutorial, veți afla despre Ionic Push, un serviciu ionic care face ușor trimiterea de notificări push către utilizatorii dvs..
Ionic Push vă permite să trimiteți notificări push utilizatorilor aplicației dvs. Acestea pot fi declanșate ori de câte ori alegeți. De exemplu, când este ziua de naștere a utilizatorului, le puteți trimite automat o notificare push pentru a le saluta.
Ionic Push servește ca un om de mijloc între dispozitivul utilizatorului și Firebase Cloud Messaging. Primul pas este ca aplicația să trimită tokenul dispozitivului la serverul Ionic Push. Acest jet de dispozitiv servește drept un ID care se referă la dispozitivul respectiv. Odată ce serverul are acel token, acesta poate face acum o cerere către serverul Firebase Cloud Messaging pentru a trimite de fapt o notificare push către dispozitiv. Pe fiecare dispozitiv Android, se difuzează un serviciu Google Play, numit serviciul Google Cloud Messaging. Aceasta permite dispozitivului să primească notificări push de la platforma Firebase Cloud Messaging.
Iată o diagramă care arată fluxul de notificări push:
Veți construi o aplicație simplă, care poate primi notificări push prin intermediul Ionic Push. De asemenea, va folosi serviciul Ionic Auth pentru a vă conecta utilizatorii. Aceasta ne permite să încercăm notificări push push, care vor trimite notificările numai anumitor utilizatori. Aplicația va avea două pagini: pagina de conectare și pagina de utilizator. Utilizatorii ar trebui să aibă posibilitatea de a primi notificări numai atunci când sunt conectați.
Pentru a vă oferi o idee despre modul în care vor apărea notificările, iată o captură de ecran a notificării primite în timp ce aplicația este în prezent deschisă:
Pe de altă parte, iată cum arată o notificare atunci când aplicația este închisă:
În această secțiune, vom configura serviciile Firebase și Ionic cloud pentru a permite notificările push. Comunicările push în Android sunt gestionate în principal de serviciul de mesaje spam al Firebase. Ionic Push este doar un strat pe partea de sus a acestui serviciu care face mai ușor să lucreze cu notificări push în aplicațiile ionice.
Primul pas este crearea unui nou proiect Firebase. Puteți face acest lucru mergând la Consola Firebase și făcând clic pe Adăugați un proiect buton. Veți vedea următorul formular:
Introduceți numele proiectului și faceți clic pe Creați un proiect buton.
Odată ce proiectul este creat, veți fi redirecționat către tabloul de bord al proiectului. De acolo, faceți clic pe pictograma roată din dreptul acesteia Prezentare generală și selectați Setările proiectului.
În pagina de setări, faceți clic pe Cloud Messaging tab. Acolo veți găsi Server Key și ID-ul expeditorului. Luați act de acestea, după cum veți avea nevoie mai târziu.
Apoi, trebuie să creați o aplicație Ionic pe site-ul web Ionic. Acest lucru vă permite să lucrați cu serviciul Ionic Push și alte servicii ionice. Dacă nu aveți deja un cont Ionic, puteți crea unul prin înscrierea. Odată ce ați creat un cont, veți fi redirecționat către tabloul de bord, unde puteți crea o aplicație nouă.
După ce ați creat aplicația, mergeți la Setări > Certificate și faceți clic pe Noul profil de securitate buton. Introduceți un nume descriptiv pentru Numele profilului și setați Tip la Dezvoltare deocamdata:
Profilele de securitate reprezintă o modalitate de a stoca în siguranță datele de acreditare ale serviciului Messaging Cloud Firebase pe care le-ați primit mai devreme. Odată ce a fost creat, va fi afișat într-un tabel. Faceți clic pe Editați | × butonul de lângă profilul de securitate nou creat. Apoi faceți clic pe Android tab. Lipiți valoarea pentru Server Key pe care le-ați primit mai devreme de la consolă Firebase în Cheie server FCM camp. În cele din urmă, faceți clic pe Salvați pentru a salva modificările.
Creați un nou proiect Ionic 2 utilizând șablonul gol:
pornire ionică --v2 pushApp necompletat
Odată ce proiectul este creat, instalați PhoneGap-plugin-push conecteaza. Furnizați ID-ul de expeditor pe care l-ați primit mai devreme de la consola Firebase:
adăugați cordoba plugin phonegap-plugin-push - variabilă SENDER_ID = YOUR_FCM_SENDER_ID - salvați
Apoi, trebuie să instalați pluginul Cloud Ionic. Acest lucru facilitează lucrul cu serviciile ionice din interiorul aplicației:
npm install @ ionic / cloud-unghiular
În cele din urmă, trebuie să actualizați fișierele configurare ionică, astfel încât Ionic să știe că acest proiect specific trebuie atribuit aplicației ionice pe care ați creat-o mai devreme. Puteți face acest lucru prin copierea ID-ului aplicației în pagina de bord a aplicației Ionic. Puteți găsi ID-ul aplicației chiar sub numele aplicației. Odată ce ați copiat-o, deschideți-o .io-config.json și ionic.config.json fișiere și lipiți valoarea pentru APP_ID.
Acum sunteți gata să construiți aplicația. Primul lucru pe care trebuie să-l faceți este să declanșați serverul de dezvoltare Ionic astfel încât să puteți vedea imediat modificările pe măsură ce dezvoltați aplicația:
ionice
Odată ce procesul de compilare este terminat, accesați adresa de dezvoltare a browserului.
Deschide src / app / app.module.ts fișier și adăugați setările aplicației (miez) și notificări push (Apăsați). APP_ID este ID-ul aplicației ionice pe care ați creat-o mai devreme. ID-ul expeditorului este ID-ul expeditorului pe care l-ați primit mai devreme de la consola Firebase. Sub pluginConfig obiect, puteți seta opțional setările de notificare push. Mai jos setăm numai sunet și vibra setările pentru Adevărat pentru a le spune hardware-ului că poate reda sunete de notificare push sau vibra dacă dispozitivul este în modul silențios. Dacă doriți să aflați mai multe despre opțiunile de configurare disponibile, consultați documentele din opțiunile Notificare Push pentru Android.
import CloudSettings, CloudModule de la '@ ionic / cloud-angular'; const 'cloudSettings: CloudSettings = ' core ': ' app_id ':' ID-ul dvs. IONIC APP ',' push ': ' sender_id ':' ID-ul distribuitorului FCM ',' pluginConfig ' "sunet": adevărat, "vibrați": adevărat;
Apoi, lăsați Ionic să știe că doriți să utilizați cloudSettings:
importurile: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ],
Pagina de pornire implicită din șablonul gol va servi ca pagină de conectare. Deschide pagini / home / home.html fișier și adăugați următoarele:
pushApp
Pentru a păstra lucrurile simple, avem doar un buton de autentificare în locul unui formular de autentificare completă. Aceasta înseamnă că acreditările pe care le vom folosi pentru conectare sunt încorporate în codul propriu-zis.
Apoi, deschideți src / pagini / home / home.ts fișier și adăugați următoarele:
import Component de la '@ angular / core'; import NavController, LoadingController, AlertController de la "ionic-unghiular"; import Push, PushToken, Auth, User, UserDetails de la '@ ionic / cloud-angular'; import UserPage din "... / pagina de utilizator / pagina de utilizator"; @Component (selector: 'home-home', templateUrl: 'home.html') clasa de export HomePage constructor (public navCtrl: NavController, public push: Auth, utilizator public: Utilizator) if (this.auth.isAuthenticated ()) this.navCtrl.push (UserPage); login () let loader = this.loadingCtrl.create (conținut: "Conectare ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000); lăsați detalii: UserDetails = 'email': 'IONIC AUTO USER', 'parola': "PAROLA UTILIZATORULUI IONIC AUTOR"; aceasta (a), (), (), apoi ((res) => this.push.register ) .then ((t: PushToken) => loader.dismiss (); this.navCtrl.push (UserPage); (err) => let alert = this.alertCtrl.create (title: eșuat ', subtitlu: "Ceva a mers prost în ceea ce privește înregistrarea notificărilor push. Încercați din nou.", butoane: [' OK ']); .alertCtrl.create (title: 'Conectare nereușită', subtitlu: 'Credentiale nevalide. Încearcă din nou.', butoane: ['OK']);
Descărcând codul de mai sus, mai întâi importăm controlorii necesari pentru lucrul cu navigarea, încărcătoarele și alertele:
import NavController, LoadingController, AlertController de la "ionic-unghiular";
Apoi importați serviciile necesare pentru lucrul cu Push and Auth.
import Push, PushToken, Auth, User, UserDetails de la '@ ionic / cloud-angular';
Odată ce acestea sunt adăugate, importați Utilizator pagină. Faceți un comentariu acum, deoarece nu am creat încă această pagină. Nu uitați să dezinstalați acest lucru mai târziu odată ce pagina de utilizator este gata.
// import UserPage de la "... / pagina de utilizator / pagina de utilizator";
În constructor, verificați dacă utilizatorul curent este autentificat. Navigați imediat la pagina de utilizator dacă acestea sunt:
constructor (public navCtrl: NavController, push public: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public public: Auth, public user: User) if.auth.isAuthenticated () this.navCtrl.push userpage);
Pentru Logare , afișați încărcătorul și setați-l să respingă automat după 5 secunde. În acest fel, dacă ceva nu merge bine cu codul de autentificare, utilizatorul nu este lăsat cu o animație infinită de încărcare:
login () let loader = this.loadingCtrl.create (conținut: "Conectare ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
După aceea, conectați utilizatorul cu acreditările codate greu ale unui utilizator care a fost deja adăugat în aplicația dvs.:
Accentsconagua
lăsați detalii: UserDetails = 'email': 'IONIC AUTO USER', 'parola': "PAROLA UTILIZATORULUI IONIC AUTOR"; this.auth.login ('basic', details) .then ((res) => ..., () => alert = this.alertCtrl.create (title: 'Login Failed', subTitle: . Încercați din nou. ', Butoane: [' OK ']); alert.present (););Dacă nu aveți încă un utilizator existent, tabloul de bord Ionic nu vă permite să creați noi utilizatori, deși puteți crea utilizatori suplimentari odată ce aveți deja cel puțin un utilizator. Deci, cel mai simplu mod de a crea un nou utilizator este de a apela Inscrie-te() de la serviciul Auth. Doar dezactivați codul de conectare de mai sus și înlocuiți-l cu cel de mai jos. Rețineți că puteți crea utilizatorul din browser deoarece schema de autentificare prin e-mail / parolă utilizează doar cererile HTTP.
this.auth.signup (detalii) .then ((res) => console.log ('Utilizatorul a fost creat!', res););Acum, că aveți un utilizator pe care îl puteți conecta, puteți continua și eliminați codul de înscriere și dezactivați codul de conectare.
În cadrul funcției de apel de reușită pentru autentificare, trebuie să apelați Inregistreaza-te() de la serviciul Push. Acest pas crucial permite dispozitivului să primească notificări push. Face o cerere către serviciul Ionic Push pentru a obține un jet de dispozitiv. După cum se menționează în Cum functioneaza secțiunea anterioară, acest jet de dispozitiv servește ca un identificator unic pentru dispozitiv, astfel încât acesta să poată primi notificări push.
((t: PushToken) => return this.push.saveToken (t);), apoi ((t: PushToken) => loader.dismiss .push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Push registration failed', subTitle: 'Something went wrong with push notification registration. : ['OK']); alert.present (););
Lucrul minunat despre Ionic Push este integrarea sa cu Ionic Auth. Motivul pentru care înregistrăm token-urile dispozitivului imediat după conectare este din cauza acestei integrări. Când apelați saveToken () , este suficient de inteligent pentru a recunoaște că un utilizator este în prezent conectat. Deci, îl atribuie în mod automat acestui utilizator dispozitivului. Acest lucru vă permite să trimiteți în mod special o notificare push către respectivul utilizator.
Pagina de utilizator este pagina care primește notificări push. Creați-o cu comanda Ionic generate:
ion g pagina de utilizator
Aceasta va crea src / pagini / user-page director cu trei fișiere în el. Deschide user-pagină.html fișier și adăugați următoarele:
Pagina utilizatorului
Pentru a păstra lucrurile simple, tot ce avem este un buton pentru conectarea utilizatorului. Scopul principal al acestei pagini este de a primi și afișa numai notificări push. Butonul de deconectare este pur și simplu adăugat din cauza necesității de a loga utilizatorul și de a testa dacă ar putea primi în continuare notificări după deconectare.
Apoi, deschideți user-page.ts fișier și adăugați următoarele:
import Component de la '@ angular / core'; import NavController, AlertController de la "ionic-unghiular"; import Push, Auth de la '@ ionic / cloud-angular'; @Component (selector: 'page-user-page', templateUrl: 'user-page.html',) AlertController) this.push.rx.notification () .subscribe ((msg) => let alert = aceasta.alertCtrl.create (title: msg.title, subTitle: msg.text, butoane: ['OK'] ); alert.present ();); logout () this.auth.logout (); this.navCtrl.pop ();
Codul de mai sus este destul de auto-explicativ, așa că voi trece doar partea care se ocupă de notificări. Codul de mai jos gestionează notificările. Utilizează Abonati-va() metoda de abonare pentru orice notificare de intrare sau deschidere push. Când spun "deschis", înseamnă că utilizatorul a făcut clic pe notificarea din zona de notificări. Când se întâmplă acest lucru, aplicația este lansată și funcția de apel inversă pe care ați trecut-o Abonati-va() metoda este chemată. Pe de altă parte, o notificare de împingere primită apare când aplicația este deschisă în prezent. Când este trimisă o notificare push, această funcție de apel inversă este de asemenea apelată. Singura diferență este că nu mai merge în zona de notificare.
acest mesaj.push.rx.notificare () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, butoane: ['OK']); alert.present (););
Pentru fiecare notificare, argumentul transmis funcției callback conține încărcătura obiect:
În codul de mai sus, folosim doar titlu si text să furnizeze ca conținut pentru alertă. Nu ne limităm doar la alerte, totuși - așa cum puteți vedea din captura de ecran de mai sus, este asta încărcătură utilă obiect care stochează datele suplimentare pe care doriți să le transmiteți la fiecare notificare. Puteți utiliza aceste date pentru a direcționa ce va face aplicația dvs. atunci când primește acest tip de notificare. În exemplul de mai sus, is_cat este setat sa 1, și putem avea aplicația să își schimbe fundalul într-o imagine a unei pisici dacă primește această notificare. Mai târziu, în Trimiterea notificărilor push secțiune, veți afla cum să personalizați sarcina utilă pentru fiecare notificare.
Acum este momentul să testați aplicația pe un dispozitiv. Continuați și adăugați platforma și construiți aplicația pentru platforma respectivă. Aici folosim Android:
platformă ionică adăugați și android Android android construi
Copiați .apk fișier în interiorul Platforme / Android / construi / ieșiri / apk folder pe dispozitiv și să îl instalați.
Prima dată când am încercat să alerg construi comanda, am primit următoarea eroare:
Dacă aveți aceeași eroare, continuați. Dacă nu ați întâlnit erori, puteți trece la următoarea secțiune.
Problema aici este că componentele SDK menționate nu au fost instalate sau este posibil să existe o actualizare importantă care trebuie instalată. Cu toate acestea, mesajul de eroare este puțin înșelător, deoarece afirmă doar că acordul de licență trebuie acceptat.
Deci, pentru a rezolva problema, lansați programul de instalare Android SDK și apoi verificați Spațiul de asistență Android și Google Depozit. După aceea, faceți clic pe Instalare butonul și sunt de acord cu acordul de licență pentru a instala componentele.
Acum că ați instalat aplicația pe dispozitiv, este momentul să trimiteți, de fapt, câteva notificări push. Iată câteva scenarii pe care le puteți testa:
Primul pas în trimiterea unei notificări push este să accesați tabloul de bord al aplicației Ionic și să dați clic pe Apăsați tab. Deoarece aceasta este prima dată când utilizați serviciul, ar trebui să vedeți următorul ecran:
Mergeți mai departe și faceți clic pe Creați primul dvs. Push buton. Aceasta vă va redirecționa către pagina pentru crearea unei notificări push. Aici puteți introduce numele campaniei, titlul și textul notificării și orice date suplimentare pe care doriți să le transmiteți. is_cat la 1.
Apoi, puteți seta opțional opțiunile de notificare push pentru iOS sau Android. Deoarece vom trimite doar pe dispozitive Android, setăm doar opțiunile pentru Android:
Următorul pas este să selectați utilizatorii care vor primi notificarea. Aici puteți selecta Toți utilizatorii dacă doriți să trimiteți notificarea tuturor dispozitivelor înregistrate pentru notificări push.
Dacă doriți să trimiteți numai anumiți utilizatori, puteți, de asemenea, să le filtrați:
Rețineți că lista de utilizatori este populată de utilizatorii care sunt înregistrați prin intermediul serviciului Auth.
Ultimul pas este selectarea momentului de trimitere a notificării. Deoarece testăm doar, îl putem trimite imediat. Dând clic pe Trimiteți această apăsare butonul va trimite notificarea utilizatorilor selectați.
În acest tutorial, ați învățat despre Ionic Push și modul în care face notificările push să fie mai ușor de implementat. Prin tabloul de bord Ionic, ați putut personaliza notificările pe care le trimiteți utilizatorilor. De asemenea, vă permite să selectați utilizatorii cărora doriți să îi trimiteți notificările.
Acest lucru funcționează bine dacă nu aveți deja un back-end existent. Dar dacă aveți deja un back-end, s-ar putea să vă întrebați cum puteți folosi Ionic Push cu aplicația dvs. web existentă. Ei bine, răspunsul pentru asta este API-ul Ionic HTTP. Acest lucru vă permite să trimiteți o solicitare HTTP de pe serverul dvs. web la serverul lui Ionic ori de câte ori este îndeplinită o anumită condiție. Solicitarea pe care o trimiteți va declanșa o notificare push care va fi trimisă utilizatorilor dvs. Dacă doriți să aflați mai multe, puteți să verificați documentele pentru serviciul Ionic Push.
Și în timp ce sunteți aici, verificați câteva dintre celelalte cursuri și tutoriale despre Ionic 2!
