Share
In deze tutorial leert u meer over Ionic Push, een Ionische service waarmee u eenvoudig pushmeldingen naar uw gebruikers kunt verzenden.
Met Ionic Push kunt u pushmeldingen verzenden naar de gebruikers van uw app. Deze kunnen worden geactiveerd wanneer u maar wilt. Als het bijvoorbeeld de geboortedatum van de gebruiker is, kunt u hem automatisch een pushmelding sturen om ze te begroeten.
Ionic Push fungeert als een tussenpersoon tussen het apparaat van de gebruiker en de Firebase Cloud Messaging. De eerste stap is dat de app zijn apparaattoken naar de Ionic Push-server verzendt. Dit apparaat-token dient als een ID dat naar dat specifieke apparaat verwijst. Zodra de server dat token heeft, kunnen ze nu een verzoek indienen bij de Firebase Cloud Messaging-server om daadwerkelijk een pushmelding naar het apparaat te verzenden. Op elk Android-apparaat wordt een Google Play-service uitgevoerd, de Google Cloud Messaging-service. Hierdoor kan het apparaat pushmeldingen ontvangen van het Firebase Cloud Messaging-platform.
Hier is een diagram met de stroom van pushmeldingen:
Je gaat een eenvoudige app bouwen die pushmeldingen kan ontvangen via Ionic Push. Het zal ook de Ionic Auth-service gebruiken om gebruikers in te loggen. Hiermee kunnen we gerichte pushmeldingen uitproberen die de meldingen alleen naar specifieke gebruikers verzenden. De app heeft twee pagina's: de inlogpagina en de gebruikerspagina. Gebruikers moeten alleen meldingen kunnen ontvangen wanneer ze zijn aangemeld.
Om u een idee te geven hoe de meldingen eruit zouden zien, hier is een screenshot van de melding die wordt ontvangen terwijl de app momenteel is geopend:
Aan de andere kant, hier is hoe een melding eruitziet wanneer de app wordt gesloten:
In deze sectie configureren we de Firebase- en Ionic-cloudservices om pushmeldingen toe te staan. Pushmeldingen in Android worden voornamelijk afgehandeld door de Firebase Cloud Messaging-service. Ionic Push is slechts een laag bovenop deze service die het gemakkelijker maakt om te werken met pushmeldingen in Ionic-apps.
De eerste stap is om een nieuw Firebase-project te maken. U kunt dit doen door naar de Firebase-console te gaan en op de knop te klikken Voeg een project toe knop. U ziet het volgende formulier:
Voer de naam van het project in en klik op de Maak een project knop.
Nadat het project is gemaakt, wordt u doorgestuurd naar het projectdashboard. Klik vanaf daar op het tandwielpictogram naast de Overzicht tab en selecteer Project instellingen.
Klik op de instellingenpagina op de Cloud Messaging tab. Daar vindt u de Server sleutel en zender ID. Houd hier rekening mee, want u hebt ze later nodig.
Vervolgens moet je een Ionische app maken op de Ionic-website. Hierdoor kunt u ook werken met de Ionic Push-service en andere Ionische services. Als u nog geen Ionic-account hebt, kunt u er een maken door u aan te melden. Nadat u een account hebt gemaakt, wordt u omgeleid naar het dashboard waar u een nieuwe app kunt maken.
Zodra uw app is gemaakt, gaat u naar instellingen > certificaten en klik op de Nieuw beveiligingsprofiel knop. Voer een beschrijvende naam in voor de Profielnaam en stel de Type naar Ontwikkeling voor nu:
Beveiligingsprofielen dienen als een manier om de Firebase Cloud Messaging-inloggegevens die u eerder hebt opgeslagen, veilig op te slaan. Nadat het is gemaakt, wordt het in een tabel weergegeven. Klik op de Bewerk knop naast het nieuw gemaakte beveiligingsprofiel. Klik vervolgens op de Android tab. Plak de waarde voor de Server sleutel die u eerder van de Firebase-console kreeg naar de FCM-servercode veld. Klik ten slotte op Opslaan om de wijzigingen op te slaan.
Maak een nieuw Ionic 2-project met behulp van de lege sjabloon:
ionische start --v2 pushApp blank
Nadat het project is gemaakt, installeert u de PhoneGap-plugin-push inpluggen. Geef de afzender-ID op die u eerder van de Firebase-console heeft ontvangen:
cordova plugin add phonegap-plugin-push --variable SENDER_ID = YOUR_FCM_SENDER_ID --save
Vervolgens moet u de Ionic Cloud-plug-in installeren. Dit maakt het gemakkelijk om met Ionic-services in de app te werken:
npm install @ ionic / cloud-angle - save
Ten slotte moet u de Ionic-configuratiebestanden bijwerken zodat Ionic weet dat dit specifieke project moet worden toegewezen aan de Ionic-app die u eerder hebt gemaakt. U kunt dat doen door de app-ID te kopiëren op de dashboardpagina van uw Ionische app. U vindt de app-ID direct onder de naam van de app. Nadat u het hebt gekopieerd, opent u de .io-config.json en ionic.config.json bestanden en plak de waarde voor de APP_ID.
Nu ben je klaar om de app te bouwen. Het eerste dat u moet doen, is de Ionic-ontwikkelingsserver opstarten zodat u de wijzigingen onmiddellijk kunt zien terwijl u de app ontwikkelt:
ionische serveren
Zodra het compilatieproces is voltooid, opent u de ontwikkelings-URL in uw browser.
Open de src / app / app.module.ts bestand en voeg de instellingen voor de app toe (kern) en pushmeldingen (Duwen). De APP_ID is de ID van de Ionische app die u eerder hebt gemaakt. De zender ID is de afzender-ID die u eerder van de Firebase-console hebt ontvangen. Onder de pluginConfig object, kunt u optioneel instellingen voor pushmeldingen instellen. Hieronder stellen we alleen de geluid en trillen instellingen naar waar om de hardware te laten weten dat het pushmeldingen kan afspelen of kan trillen als het apparaat in de stille modus staat. Als je meer wilt weten over welke configuratie-opties beschikbaar zijn, bekijk dan de documenten op de Push Notification-opties voor Android.
importeer CloudSettings, CloudModule van '@ ionic / cloud-angular'; const cloudSettings: CloudSettings = 'core': 'app_id': 'YOUR IONIC APP ID',, 'push': 'sender_id': 'YOUR FCM SENDER ID', 'pluginConfig': 'android': 'geluid': waar, 'trillen': waar;
Laat Ionic vervolgens weten dat je de. Wilt gebruiken cloudSettings:
invoer: [BrowserModule, IonicModule.forRoot (MyApp), CloudModule.forRoot (cloudSettings) // <-- add this ],
De standaard startpagina in de lege sjabloon zal dienen als inlogpagina. Open de pages / home / home.html bestand en voeg het volgende toe:
pushApp
Om het eenvoudig te houden, hebben we alleen een inlogknop in plaats van een volledig login-formulier. Dit betekent dat de inloggegevens die we gaan gebruiken om in te loggen, zijn ingesloten in de code zelf.
Open vervolgens de src / pages / home / home.ts bestand en voeg het volgende toe:
Accentsconagua
Component importeren vanuit '@ angular / core'; importeer NavController, LoadingController, AlertController van 'ionic-angular'; import Push, PushToken, Auth, Gebruiker, Gebruikersdetails van '@ ionic / cloud-angular'; importeer UserPage uit '... / user-page / user-page'; @Component (selector: 'page-home', templateUrl: 'home.html') exportklasse HomePage constructor (public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) if (this.auth.isAuthenticated ()) this.navCtrl.push (UserPage); login () let loader = this.loadingCtrl.create (content: "Inloggen ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000); laat details weten: UserDetails = 'email': 'YOUR IONIC AUTH USER', 'password': "YOUR IONIC AUTH USERS PASSWORD"; this.auth.login ('basic', details) .then ((res) => this.push.register (). then ((t: PushToken) => return this.push.saveToken (t); ) .then ((t: PushToken) => loader.dismiss (); this.navCtrl.push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Push registration] failed ', subTitle:' Er is iets misgegaan met de registratie van pushmeldingen. Probeer het opnieuw. ', knoppen: [' OK ']); alert.present (););, () => let alert = this .alertCtrl.create (title: 'Login Failed', subTitle: 'Invalid Credentials. Probeer het opnieuw.', knoppen: ['OK']); alert.present ();); Als we de bovenstaande code doorbreken, importeren we eerst de controllers die nodig zijn voor het werken met navigatie, laders en waarschuwingen:
importeer NavController, LoadingController, AlertController van 'ionic-angular';
Importeer vervolgens de benodigde services voor het werken met Push en Auth.
import Push, PushToken, Auth, Gebruiker, Gebruikersdetails van '@ ionic / cloud-angular';
Zodra deze zijn toegevoegd, importeert u de Gebruiker pagina. Kom er nu op terug, want we hebben die pagina nog niet gemaakt. Vergeet niet om dit later te onthullen zodra de gebruikerspagina klaar is.
// importeer UserPage uit '... / user-page / user-page';
Controleer in de constructor of de huidige gebruiker is geverifieerd. Navigeer onmiddellijk naar de gebruikerspagina als ze:
constructor (public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) if (this.auth.isAuthenticated ()) this.navCtrl.push ( userpage);
Voor de Log in functie, laat de lader zien en stel deze in om na 5 seconden automatisch te worden uitgeschakeld. Op deze manier, als er iets misgaat met de authenticatiecode, blijft de gebruiker niet achter met een oneindige laadanimatie:
login () let loader = this.loadingCtrl.create (content: "Inloggen ..."); loader.present (); setTimeout (() => loader.dismiss ();, 5000);
Log daarna de gebruiker in met de hardcoded referenties van een gebruiker die al in uw app is toegevoegd:
laat details weten: UserDetails = 'email': 'YOUR IONIC AUTH USER', 'password': "YOUR IONIC AUTH USERS PASSWORD"; this.auth.login ('basic', details) .then ((res) => ..., () => let alert = this.alertCtrl.create (title: 'Login Failed', subTitle: 'Invalid Credentials Probeer het opnieuw. ', Knoppen: [' OK ']); alert.present (););Als u nog geen bestaande gebruiker heeft, staat het Ionic-dashboard u niet echt toe om nieuwe gebruikers te maken, hoewel u extra gebruikers kunt maken als u al ten minste één gebruiker hebt. Dus de eenvoudigste manier om een nieuwe gebruiker aan te maken is door de inschrijven() methode van de Auth-service. Noteer gewoon de inlogcode hierboven en vervang deze door onderstaande code. Houd er rekening mee dat u de gebruiker vanuit de browser kunt maken, omdat het verificatieprogramma voor e-mail / wachtwoord alleen HTTP-verzoeken gebruikt.
this.auth.signup (details) .then ((res) => console.log ('User was created!', res););Nu u een gebruiker hebt die u kunt aanmelden, kunt u doorgaan en de aanmeldingscode verwijderen en de inlogcode verwijderen.
Binnen de succes-callback-functie voor inloggen, moet u de registreren() methode van de Push-service. Door deze cruciale stap kan het apparaat pushmeldingen ontvangen. Het doet een verzoek aan de Ionic Push-service om een apparaattoken te krijgen. Zoals vermeld in de Hoe het werkt In dit gedeelte fungeert dit apparaattoken als een unieke ID voor het apparaat zodat het pushmeldingen kan ontvangen.
this.push.register (). then ((t: PushToken) => retourneer this.push.saveToken (t);) then ((t: PushToken) => loader.dismiss (); this.navCtrl .push (UserPage);, (err) => let alert = this.alertCtrl.create (title: 'Push registration failed', subtitel: 'Er is iets fout gegaan bij de registratie van pushmeldingen. Probeer het opnieuw.', Knoppen : ['OK']); alert.present (););
Het mooie van Ionic Push is de integratie met Ionic Auth. De reden waarom we de apparaattokens registreren direct na het inloggen, is vanwege deze integratie. Wanneer u de belt saveToken () methode, het is slim genoeg om te herkennen dat een gebruiker op dit moment is ingelogd. Het wijst deze gebruiker dus automatisch toe aan het apparaat. Hiermee kunt u vervolgens specifiek een pushmelding naar die gebruiker verzenden.
De gebruikerspagina is de pagina die pushmeldingen ontvangt. Maak het met de Ionic Generation-opdracht:
ionische g pagina userPage
Hiermee maakt u de src / pages / user-page map met drie bestanden erin. Open de user-pagina.html bestand en voeg het volgende toe:
Gebruikerspagina
Om alles eenvoudig te houden, is alles wat we hebben een knop om de gebruiker te loggen. Het belangrijkste doel van deze pagina is om alleen pushmeldingen te ontvangen en weer te geven. De uitlogknop is eenvoudig toegevoegd vanwege de noodzaak om de gebruiker uit te loggen en te testen of deze nog steeds meldingen kan ontvangen na het uitloggen.
Open vervolgens de user-page.ts bestand en voeg het volgende toe:
Component importeren vanuit '@ angular / core'; importeer NavController, AlertController van 'ionic-angular'; importeer Push, Auth vanuit '@ ionic / cloud-angular'; @Component (selector: 'page-user-page', templateUrl: 'user-page.html',) exportklasse UserPage constructor (public navCtrl: NavController, public push: Push, public auth: Auth, public alertCtrl: AlertController) this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, buttons: ['OK'] ); alert.present ();); logout () this.auth.logout (); this.navCtrl.pop ();
De bovenstaande code spreekt voor zich, dus ik zal alleen het gedeelte behandelen dat te maken heeft met meldingen. De onderstaande code behandelt de meldingen. Het gebruikt de abonneren () methode om u te abonneren op een inkomende of geopende push-melding. Wanneer ik zeg 'geopend', betekent dit dat de gebruiker op de melding in het meldingengebied heeft getikt. Wanneer dit gebeurt, wordt de app gestart en de callback-functie die u hebt doorgegeven aan de abonneren () methode wordt aangeroepen. Aan de andere kant gebeurt er een binnenkomende pushmelding wanneer de app op dat moment wordt geopend. Wanneer een pushmelding wordt verzonden, wordt deze callback-functie ook gebeld. Het enige verschil is dat het niet langer naar het systeemvak gaat.
this.push.rx.notification () .subscribe ((msg) => let alert = this.alertCtrl.create (title: msg.title, subTitle: msg.text, buttons: ['OK']); alert.present (););
Voor elke melding bevat het argument dat aan de callback-functie wordt doorgegeven de payload van het object:
In de bovenstaande code gebruiken we alleen de titel en de tekst om te leveren als de inhoud voor de waarschuwing. We beperken ons echter niet tot alleen maar waarschuwingen, zoals u kunt zien in de bovenstaande schermafbeelding, is dit het geval payload object dat extra gegevens opslaat die u wilt doorgeven aan elke melding. U kunt deze gegevens ook gebruiken om te bepalen wat uw app gaat doen wanneer deze dergelijke meldingen ontvangt. In het bovenstaande voorbeeld, is_cat ingesteld op 1, en we kunnen de app de achtergrond laten veranderen in een kattenfoto als deze deze melding ontvangt. Later in de Pushmeldingen verzenden sectie, leert u hoe u de payload voor elke melding kunt aanpassen.
Nu is het tijd om de app op een apparaat uit te proberen. Ga je gang en voeg het platform toe en bouw de app voor dat platform. Hier gebruiken we Android:
ionisch platform add android ionic build android
Kopieer de .apk bestand in de platforms / android / build / uitgangen / APK map naar uw apparaat en installeer het.
De eerste keer dat ik probeerde de bouwen opdracht, kreeg ik de volgende foutmelding:
Als je dezelfde fout hebt, volg dan. Als u nog geen fouten tegenkomt, kunt u doorgaan naar het volgende gedeelte.
Het probleem hier is dat de genoemde SDK-componenten niet zijn geïnstalleerd of dat er een belangrijke update moet worden geïnstalleerd. De foutmelding is echter een beetje misleidend, omdat er alleen staat dat de licentieovereenkomst moet worden geaccepteerd.
Dus start het Android SDK-installatieprogramma om het probleem op te lossen en controleer de Android-ondersteuningsrepository en Google Repository. Klik daarna op de Installeren knop en ga akkoord met de licentieovereenkomst om de componenten te installeren.
Nu je de app op je apparaat hebt geïnstalleerd, is het nu tijd om enkele pushmeldingen te verzenden. Hier zijn een paar scenario's die u kunt uitproberen:
De eerste stap bij het verzenden van een pushmelding is om naar uw Ionic-app-dashboard te gaan en op de knop te klikken Duwen tab. Aangezien dit de eerste keer is dat u de service gebruikt, ziet u het volgende scherm:
Ga je gang en klik op de Maak je eerste Push knop. Hiermee wordt u omgeleid naar de pagina voor het maken van een pushmelding. Hier kunt u de naam van de campagne, titel en tekst van de melding invoeren en eventuele aanvullende gegevens die u wilt doorgeven. Hier plaatsen we is_cat naar 1.
Vervolgens kunt u optioneel de opties voor pushmeldingen instellen voor iOS of Android. Aangezien we alleen naar Android-apparaten gaan verzenden, stellen we alleen de opties voor Android in:
De volgende stap is om de gebruikers te selecteren die de melding zullen ontvangen. Hier kunt u selecteren Alle gebruikers als u de melding naar alle apparaten wilt verzenden die zijn geregistreerd voor pushmeldingen.
Als u alleen naar specifieke gebruikers wilt verzenden, kunt u ook naar hen filteren:
Houd er rekening mee dat de gebruikerslijst wordt ingevuld door gebruikers die zijn geregistreerd via de Auth-service.
De laatste stap is om te selecteren wanneer de melding moet worden verzonden. Omdat we alleen testen, kunnen we deze onmiddellijk verzenden. Klik op de Verzend deze push knop stuurt de melding naar uw geselecteerde gebruikers.
In deze zelfstudie hebt u geleerd over Ionic Push en hoe het pushmeldingen eenvoudiger te implementeren maakt. Via het Ionic-dashboard kon u de meldingen aanpassen die u naar gebruikers verzendt. Hiermee kunt u ook selecteren naar welke gebruikers u de meldingen wilt verzenden.
Dit werkt prima als je al geen bestaande back-end hebt. Maar als u al een back-end hebt, vraagt u mogelijk hoe u Ionic Push kunt gebruiken met uw bestaande webtoepassing. Welnu, het antwoord is de Ionische HTTP-API. Hiermee kunt u een HTTP-verzoek van uw webserver naar de server van Ionic verzenden wanneer aan een specifieke voorwaarde is voldaan. Het verzoek dat u verzendt, activeert vervolgens een pushmelding die naar uw gebruikers wordt verzonden. Als u meer wilt weten, kunt u de documentatie voor de Ionic Push-service bekijken.
En terwijl je hier bent, bekijk enkele van onze andere cursussen en tutorials over Ionic 2!
