Ionic सर्विसेज के साथ आरंभ करें: Push

इस ट्यूटोरियल में, आप Ionic Push के बारे में जानने वाले है, एक Ionic सर्विस, जो आपके यूजर को पुश नोटिफिकेशन भेजना आसान बनाती है।

Ionic Push आपको अपनी ऐप के यूजर को पुश नोटिफिकेशन भेजने की अनुमति देता है। जब भी आप सेलेक्ट करते हैं तो यह ट्रिगर हो सकता है। उदाहरण के लिए, जब यूजर का जन्मदिन होता है, तो आप उन्हें शुभकामना देने के लिए ऑटोमेटिक रूप से एक पुश नोटिफिकेशन भेज सकते हैं।

यह काम किस प्रकार करता है

Ionic Push यूजर के डिवाइस और फायरबेस क्लाउड मैसेजिंग के बीच एक मध्य-व्यक्ति के रूप में कार्य करता है। पहला कदम आपके लिए अपने डिवाइस टोकन को Ionic Push सर्वर पर भेजना है। यह डिवाइस टोकन एक ID के रूप में कार्य करता है जो उस खास डिवाइस को रेफर करता है। एक बार सर्वर के पास टोकन आने के बाद, वे अब फायरबेस क्लाउड मैसेजिंग सर्वर से रिक्वेस्ट कर सकता हैं कि वास्तव में डिवाइस को पुश नोटिफिकेशन भेजा जाए। प्रत्येक Android डिवाइस पर, एक Google Play सर्विस चल रही होती है, जिसे Google क्लाउड मैसेजिंग सर्विस कहा जाता है। यह डिवाइस को फायरबेस क्लाउड मैसेजिंग प्लेटफार्म से पुश नोटिफिकेशन प्राप्त करने में सक्षम बनाता है।

यहां एक चार्ट है जो पुश नोटिफिकेशन फ्लो को दिखाता है:

आप क्या बनाने जा रहे हैं

आप एक साधारण ऐप बनाने जा रहे हैं, जो Ionic Push के माध्यम से पुश नोटिफिकेशन प्राप्त कर सकता है। यह यूजर को लॉगइन करने के लिए Ionic Auth Service का भी उपयोग करेगा। यह हमें टारगेट पुश नोटिफिकेशन को आजमाने की अनुमति देता है जो केवल ख़ास यूजर को नोटिफिकेशन भेजेगा। ऐप में दो पेजेस होंगे: लॉगइन पेज और यूजर पेज। यूजर केवल उस समय नोटिफिकेशन प्राप्त करने योग्य होगा जब वह लॉगइन हो।

नोटिफिकेशन कैसा दिखेगा इसका आप को एक आईडिया देने के लिए, यहां एक नोटिफिकेशन को प्राप्त करने के बाद लिया गया एक स्क्रीनशॉट है यह उस दौरान है जब ऐप खुली हुई है।

दूसरी ओर, यह वह नोटिफिकेशन है जो तब दिखता है जब ऐप बंद होती है:

Android के लिए पुश नोटिफिकेशन सेट करना

इस सेक्शन में, हम पुश नोटिफिकेशन को अनुमति देने के लिए Firebase ओर Ionic क्लाउड सर्विसेज को कनफिगर करेंगे। Android में पुश नोटिफिकेशन मुख्य रूप से Firebase क्लाउड मैसेजिंग सर्विस द्वारा नियंत्रित की जाती है। Ionic Push इस सर्विस के टॉप पर एक लेयर है जो Ionic एप्स में पुश नोटिफिकेशन के साथ काम करना आसान बनाती है।

एक Firebase ऐप बनाएं

पहला कदम एक नया Firebase प्रोजेक्ट बनाना है। आप ऐसा कर सकते हैं कि Firebase कंसोल पर जाकर Add project बटन पर क्लिक करें। आप निम्न फॉर्म देखेंगे:

प्रोजेक्ट का नाम एंटर करें और Create Project बटन पर क्लिक करें।

प्रोजेक्ट बन जाने के बाद, आप प्रोजेक्ट रिपोर्ट पर रीडायरेक्ट हो जाएंगे। वहां से, Overview टैब के बगल में गियर आइकन पर क्लिक करें और Project Settings को चुने।

सैटिंग्स पेज पर, Cloud Messaging टैब पर क्लिक करें। वहां आपको Server Key ओर Sender ID मिलेगी। इन पर ध्यान दें क्योंकि आपको बाद में इनकी आवश्यकता होगी।

एक Ionic ऐप बनाएं

इसके बाद, आप Ionic वेबसाइट पर एक Ionic ऐप बनाना होगा। यह आपको Ionic Push सर्विस और अन्य Ionic सर्विसेज के साथ भी काम करने की अनुमति देता है। यदि आपके पास पहले से कोई Ionic अकाउंट नहीं है, तो आप साइन अप कर के एक बना सकते हैं। एक बार जब आप एक अकाउंट बना लेते हैं, तो आप उस डैश बोर्ड पर रीडायरेक्ट हो जाएंगे जहां आप एक नया ऐप बना सकते हैं।

एक सुरक्षा प्रोफाइल बनाएं

एक बार जब आपका ऐप बन जाता है, तो Settings > Certificates पर जाएं और New Security Profile बटन पर क्लिक करें। Profile Name के लिए एक डिस्क्रिप्टिव नाम एंटर करें और अभी के लिए Type को Development पर सेट करें।

सिक्योरिटी प्रोफाइल Firebase Cloud Messaging क्रेडेंशियल को सुरक्षित रूप से स्टोर करने का एक तरीका है जो आपको पहले मिला था। इसके बन जाने के बाद, इस एक टेबल में लिस्टेड किया जाएगा। नई बनाई गई सिक्योरिटी प्रोफाइल के बगल में Edit बटन पर क्लिक करें। इसके Android टैब पर क्लिक करें। Server Key के लिए वैल्यू बेस्ड करें जो आपको पहले Firebase कंसोल से FCM Server Key फील्ड में मिली थी। अंत में, परिवर्तनों को सेव करने के लिए Save पर क्लिक करें।

एक नई Ionic ऐप को बूटस्ट्रैप करना

ब्लैंक टेंप्लेट का प्रयोग करते हुए एक नया Ionic 2 प्रोजेक्ट बनाएं:

ionic start --v2 pushApp blank

प्रोजेक्ट बन जाने के बाद, phonegap-plugin-push लॉगइन को इंस्टॉल करें। आपके द्वारा पहले Firebase कंसोल से प्राप्त Sender ID को सप्लाई करें:

cordova plugin add phonegap-plugin-push --variable SENDER_ID=YOUR_FCM_SENDER_ID --save

इसके बाद, आपको Ionic Cloud प्लगइन इंस्टॉल करने की आवश्यकता है। इससे ऐप के अंदर Ionic सर्विसेज के साथ काम करना आसान हो जाता है:

npm install @ionic/cloud-angular --save

अंत में, आप को ionic कॉन्फ़िग फाइल को अपडेट करना होगा ताकि Ionic को पता चले कि यह विशिष्ट प्रोजेक्ट पहले बनाए गए Ionic ऐप को सौंपा जाना चाहिए। आप अपने Ionic ऐप के डैशबोर्ड पेज में ऐप ID को कॉपी करके ऐसा कर सकते हैं। आप ऐप के नाम के ठीक नीचे ऐप ID पा सकते हैं। एक बार जब आप इसे कॉपी कर लेते हैं, तो .io-config.json और ionic.config.json फाइलें खोलें और app_id के लिए वैल्यू पेस्ट करें।

ऐप को बनाना

अब आप ऐप बनाने के लिए तैयार हैं। पहली चीज जो आपको करने की जरूरत है वह है Ionic डेवलपमेंट सर्वर को फायर करना ताकि आप ऐप को डिवेलप करते हुए तुरंत बदलाव देख सके:

ionic serve

एक बार कंपाइल का प्रोसेस पूरा हो जाने के बाद, अपने ब्राउज़र पर डेवलपमेंट URL तक पहुंचे।

Ionic ऐप और Push सेटिंग्स जोड़ें

src/app/app.module.ts फाइल को खोलें और ऐप (core) और पुश नोटिफिकेशन (push) के लिए सेटिंग्स को जोड़ें। app_id आपके द्वारा पहले बनाए गए Ionic ऐप की ID है। sender_id भेजने वाले की ID है जो आपको पहले Firebase कंसोल से मिली थी। pluginConfig ऑब्जेक्ट के अंडर में, आप वैकल्पिक रूप से पुश नोटिफिकेशन सेटिंग्स सेट कर सकते हैं। नीचे हम केवल sound और vibrate की सेटिंग को true पर सेट कर रहे हैं हार्डवेयर को यह बताने के लिए कि वह पुश नोटिफिकेशन साउंड को चला सकता है या वाइब्रेट कर सकता है अगर डिवाइस साइलेंट मोड में है। यदि आप और अधिक जानना चाहते हैं कि कौन-कौन से कंफीग्रेशन ऑप्शन उपलब्ध है, तो Android के लिए पुश नोटिफिकेशन ऑप्शंस पर डॉक्यूमेंटेशन को देखें।

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'YOUR IONIC APP ID',
  },
  'push': {
    'sender_id': 'YOUR FCM SENDER ID',
    'pluginConfig': {
      'android': {
        'sound': true,
        'vibrate': true
      }
    }
  }
};

इसके बाद, Ionic को बताएं कि आप cloudSettings का उपयोग करना चाहते हैं:

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings) // <-- add this
],

होम पेज

ब्लैंक टेंप्लेट में डिफॉल्ट होम पेज लॉगइन पेज के रूप में काम करेगा। pages/home/home.html फाइल को खोलें और उसमे निम्नलिखित को जोड़ें:

<ion-header>
  <ion-navbar>
    <ion-title>
      pushApp
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)='login();'>Login</button>
</ion-content>

चीजों को सरल रखने के लिए, हमारे पास पूरी तरह से विकसित लॉगइन फॉर्म के बजाय केवल एक लॉगइन बटन है। इसका मतलब यह है कि हम जिन क्रैडेंशियल का उपयोग लॉगिंग के लिए करने जा रहे हैं, वह कोड में एंबेड हैं।

इसके बाद, src/pages/home/home.ts फाइल को खोलें और उसमें निम्नलिखित कोड को जोड़ें:

import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Push, PushToken, Auth, User, UserDetails } from '@ionic/cloud-angular';
import { UserPage } from '../user-page/user-page';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class 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: "Logging in..."
    });

    loader.present();

    setTimeout(() => {
      loader.dismiss();
    }, 5000);

    let details: UserDetails = {
      'email': 'YOUR IONIC AUTH USER',
      'password': "YOUR IONIC AUTH USER'S 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: 'Something went wrong with push notifications registration. Please try again.',
          buttons: ['OK']
        });
        alert.present();

      });

    }, () => {

      let alert = this.alertCtrl.create({
        title: 'Login Failed',
        subTitle: 'Invalid Credentials. Please try again.',
        buttons: ['OK']
      });
      alert.present();

    });

  }

}

ऊपर दिए गए कोड को ब्रेक करके, पहले हम नेविगेशन, लोडर और अलर्ट के साथ काम करने के लिए आवश्यक कंट्रोलर को इंपोर्ट करते हैं:

import { NavController, LoadingController, AlertController } from 'ionic-angular';

फिर Push और Auth के साथ काम करने के लिए आवश्यक सर्विसेज को इंपोर्ट करें।

import { Push, PushToken, Auth, User, UserDetails } from '@ionic/cloud-angular';

एक बार जब वे जोड़ दिए जाते हैं, तो User पेज को इंपोर्ट करें। अभी के लिए इसे कमेंट कर दें क्योंकि हमने अभी तक वह पेज नहीं बनाया है। यूज़र पेज तैयार होने के बाद इसे बाद में अन-कमेंट करना ना भूले।

//import { UserPage } from '../user-page/user-page';

कंस्ट्रक्टर में, जांच करें कि वर्तमान यूजर ऑथेंटिकेटेड है या नहीं। यदि वह है तो तुरंत यूजर पेज पर जाएं:

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 फंक्शन के लिए, लोडर को दिखाएं और इसे 5 सेकंड के बाद ऑटोमेटिक रूप से डिस्मिस करने के लिए सेट करें। इस तरह से यदि ऑथेंटिकेशन कोड में कुछ गड़बड़ी होती है, तो यूजर को अनंत (infinite) लोडिंग एनिमेशन के साथ नहीं छोड़ा जाता है:

login() {
    let loader = this.loadingCtrl.create({
      content: "Logging in..."
    });

    loader.present();

    setTimeout(() => {
      loader.dismiss();
    }, 5000);
}

उसके बाद, यूजर को उस यूजर के हार्ड-कोडेड क्रैडेंशियल के साथ लॉगिन करें जो आपके ऐप में पहले से ही जोड़ा गया है:

let details: UserDetails = {
    'email': 'YOUR IONIC AUTH USER',
    'password': "YOUR IONIC AUTH USER'S PASSWORD"
};

this.auth.login('basic', details).then((res) => {
    
    ...

, () => {

  let alert = this.alertCtrl.create({
    title: 'Login Failed',
    subTitle: 'Invalid Credentials. Please try again.',
    buttons: ['OK']
  });
  alert.present();

});

यदि आपके पास अभी तक कोई मौजूद यूजर नहीं है, तो Ionic डैशबोर्ड आपको वास्तव में एक नया यूजर बनाने की अनुमति नहीं देता है, हालांकि आप एक अतिरिक्त यूजर बना सकते हैं जब आपके पास पहले से ही एक यूजर बना हो। नया यूजर बनाने का सबसे आसान तरीका है कि आप Auth सर्विस के signup() मेथड को कॉल करें। बस ऊपर दिए गए लॉगइन कोड को अन-कमेंट करें और इस नीचे दिए गए कोड के साथ बदल दे। ध्यान दें कि आप ब्राउज़र से यूजर बना सकते हैं क्योंकि ई-मेल/पासवर्ड ऑथेंटिकेशन स्कीम केवल HTTP रिक्वेस्ट का उपयोग करती हैं।

this.auth.signup(details).then((res) => {
    console.log('User was created!', res);
});

अब जब आपके पास एक यूजर है जिसे आप लॉग इन कर सकते हैं, तो आप आगे बढ़ सकते हैं और साइन अप कोड को रिमूव कर सकते हैं और लॉगइन कोड को अन-कमेंट कर सकते हैं।

लॉगइन के लिए सक्सेस कॉल बैक फंक्शन के अंदर, आपको Push सर्विस से register() मेथड को कॉल करने की आवश्यकता है। यह महत्वपूर्ण कदम डिवाइस को Push नोटिफिकेशन प्राप्त करने में सक्षम बनाता है। यह एक डिवाइस टोकन प्राप्त करने के लिए Ionic Push सर्विस के लिए रिक्वेस्ट करता है। जैसा कि How It Works सेक्शन में पहले बताया जा चुका है, यह डिवाइस टोकन डिवाइस के लिए एक खास आइडेंटीफायर के रूप में कार्य करता है ताकि इसे पुश नोटिफिकेशन प्राप्त हो सके।

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: 'Something went wrong with push notifications registration. Please try again.',
      buttons: ['OK']
    });
    alert.present();

});

Ionic Push के बारे में बड़ी बात यह है कि इसका Ionic Auth के साथ इंटीग्रेशन है। इस इंटीग्रेशन के कारण हम डिवाइस टोकन को सही तरीके से रजिस्टर कर रहे हैं। जब आप saveToken() मेथड को कॉल करते हैं, तो यह पहचानने के लिए पर्याप्त रूप से स्मार्ट है कि यूज़र वर्तमान में लॉगइन है। इसलिए यह ऑटोमेटिक रूप से इस यूजर को डिवाइस को असाइन करता है। यह तब आपको विशेष रूप से उस यूजर को एक पुश नोटिफिकेशन भेजने की अनुमति देता है।

यूजर पेज

यूजर पेज वह पेज है जो पुश नोटिफिकेशन प्राप्त करता है। इसे Ionic generate कमांड के साथ बनाएं:

ionic g page userPage

यह तीन फाइलों के साथ src/pages/user-page डायरेक्टरी बनाएगा। user-page.html फाइल को खोलें और उसमें निम्नलिखित कोड को जोड़ें:

<ion-header>
  <ion-navbar hideBackButton="true">
    <ion-title>User Page</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)='logout();'>Logout</button>
</ion-content>

चीजों को आसान रखने के लिए, हमारे पास यूज़र को लॉग आउट करने के लिए एक बटन है। इस पेज का मुख्य उद्देश्य केवल पुश नोटिफिकेशंस प्राप्त करना और प्रदर्शित करना है। लोग आउट बटन को केवल यूजर को लॉग आउट करने और टेस्ट करने की आवश्यकता के कारण जोड़ा जाता है यदि वे लॉग आउट करने के बाद भी नोटिफिकेशन प्राप्त कर सकते हो।

इसके बाद, user-page.ts फाइल को खोलें और उसमें निम्नलिखित को जोड़ें:

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Push, Auth } from '@ionic/cloud-angular';

@Component({
  selector: 'page-user-page',
  templateUrl: 'user-page.html',
})

export class 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();
  }

}

ऊपर दिए गए कोड बहुत ही आत्मा-व्याख्यात्मक (self-explanatory) है, इसलिए मैं केवल उसी हिस्से पर जाऊंगा जो नोटिफिकेशन से संबंधित हैं। नीचे दिया गया कोड नोटिफिकेशंस को हैंडल करता है। यह किसी भी इनकमिंग या खुले हुए पुश नोटिफिकेशन को सब्सक्राइब करने के लिए के लिए subscribe() मेथड का इस्तेमाल करता है। जब मैं “खुला हुआ” कहता हूं, तो इसका मतलब है कि यूज़र ने नोटिफिकेशंस एरिया में नोटिफिकेशन पर टाइप किया है। जब ऐसा होता है, तो ऐप लॉन्च किया जाता है, और कॉल बैक फंक्शन जो आपने subscribe() मेथड से पास किया है उसे कॉल किया जाता है। दूसरी ओर, एक इनकमिंग पुश नोटिफिकेशन तब होता है जब ऐप वर्तमान में खोला जाता है। जब एक पुश नोटिफिकेशन भेजा जाता है, तो यह कॉल बैक फंक्शन भी कॉल किया जाता है। अंतर केवल इतना है कि यह अब नोटिफिकेशन एरिया में नहीं जाता है।

this.push.rx.notification()
  .subscribe((msg) => {

    let alert = this.alertCtrl.create({
      title: msg.title,
      subTitle: msg.text,
      buttons: ['OK']
    });
    alert.present();

  });

प्रत्येक नोटिफिकेशन के लिए, कॉलबैक फंक्शन को दिए आर्गुमेंट में ऑब्जेक्ट पेलोड (payload) शामिल होता है:

ऊपर दिए गए कोड में, हम केवल अलर्ट के लिए कंटेंट के रूप में सप्लाई करने के लिए title और text का उपयोग कर रहे हैं। हम केवल अलर्ट तक ही सीमित नहीं है, हालांकि - जैसा कि आप ऊपर दिए गए स्क्रीनशॉट से देख सकते हैं, या payload ऑब्जेक्ट है जो अतिरिक्त डेटा स्टोर करता है जिसे आप प्रत्येक नोटिफिकेशन में पास करना चाहते हैं। आप वास्तव में इन डेटा का उपयोग यह निर्देशित करने के लिए कर सकते हैं कि इस तरह की नोटिफिकेशन प्राप्त होने पर आपका ऐप क्या करने जा रहा है। ऊपर दिए गए उदाहरण में, is_cat को 1 पर सेट किया गया है, और 9 नोटिफिकेशन प्राप्त करता है, तो हम ऐप को इसके बैकग्राउंड में एक बिल्ली की पिक्चर में बदल सकते हैं। बाद में Sending Push Notifications सेक्शन में, आप सीखेंगे की प्रत्येक नोटिफिकेशन के लिए पेलोड को कैसे कस्टमाइज किया जाए।

डिवाइस पर ऐप को चलाना

अब डिवाइस पर ऐप का टेस्ट करने का समय आ गया है। आगे बढ़े और प्लेटफॉर्म को जोड़ें और उस प्लेटफार्म के लिए एक ऐप बनाएं। यहां हम Android का उपयोग कर रहे हैं:

ionic platform add android
ionic build android

platforms/android/build/outputs/apk फोल्डर के अंदर .apk फाइल को अपने डिवाइस पर कॉपी करें और इसे इंस्टॉल करें।

बिल्ड एरर्स को हल करना

पहली बार जब मैंने build कमांड चलाने की कोशिश की, तो मुझे निम्नलिखित एरर मिला:

अगर आपको भी यह एरर मिला है तो यह फॉलो करें। यदि आपको कोई एरर नहीं मिलता है, तो आप अगले सेक्शन पर आगे बढ़ सकते हैं।

यहां समस्या यह है कि उल्लेख किए गए SDK कॉम्पोनेंट्स इंस्टॉल नहीं थे, या एक महत्वपूर्ण अपडेट हो सकता है जिससे इंस्टॉल करने की आवश्यकता हो। हालांकि, एरर मैसेज थोड़ा भ्रामक (मिसलीडिंग वाला) है, क्योंकि यह केवल यह कहता है कि लाइसेंस एग्रीमेंट को स्वीकार करने की जरूरत है।

इसलिए समस्या को हल करने के लिए, Android SDK इंस्टालर को लॉन्च करें और फिर Android Support Repository और Google Repository को चेक करें। उसके बाद, Install बटन पर क्लिक करें और कॉम्पोनेंट्स को इंस्टॉल करने के लिए लाइसेंस एग्रीमेंट को एग्री (agree) करें।

पुश नोटिफिकेशन भेजना

अब जब आप अपने डिवाइस पर ऐप इंस्टॉल कर चुके हैं, तो अब वास्तव में कुछ पुश नोटिफिकेशन भेजने का समय है। यह कुछ सिनेरियो दिए गए हैं जिन्हें आप टेस्ट कर सकते हैं:

• जब कोई यूजर वर्तमान में लॉगिन नहीं है
• जब कोई यूजर लॉगइन होता है
• सभी यूजर्स के लिए
• उन यूजर्स के लिए जो किसी खास क्वेरी से मेल खाते हैं
• जब एप्लीकेशन खोला जाता है
• जब एप्लीकेशन बंद किया जाता है

पुश नोटिफिकेशन भेजने में पहला कदम अपने Ionic ऐप के डैशबोर्ड पर जाना और Push टैब पर क्लिक करना है। क्योंकि यह इस सर्विस का उपयोग करने में आप की पहली कोशिश है, आपको नीचे दी गई स्क्रीन दिखनी चाहिए:

आगे बढ़े और Create your first Push बटन पर क्लिक करें। यह आपको पोस्ट नोटिफिकेशन बनाने के लिए पेज पर रीडायरेक्ट करेगा। यहां आप कैंपेन का नाम, नोटिफिकेशन का टाइटल और टेक्स्ट, और कोई भी अतिरिक्त डाटा जिसे आप पास करना चाहते हैं, एंटर कर सकते हैं। यहां हम is_cat सेटिंग को 1 पर कर रहे हैं।

इसके बाद, आप वैकल्पिक रूप से IOS या Android के लिए पोस्ट नोटिफिकेशन ऑप्शन सेट कर सकते हैं। क्योंकि हम केवल Android डिवाइसेज पर भेजने जा रहे हैं, हम केवल Android के लिए ऑप्शंस सेट करते हैं।

अगला स्टेप उन यूजर्स को सिलेक्ट करना है जो नोटिफिकेशन प्राप्त करेंगे। यहां आप All Users को सिलेक्ट कर सकते हैं यदि आप हम सभी डिवाइसेज पर नोटिफिकेशन भेजना चाहते हैं जो पुश नोटिफिकेशन के लिए रजिस्टर हैं।

यदि आप केवल स्पेसिफिक यूज़र्स को भेजना चाहते हैं तो आप उन्हें फिल्टर भी कर सकते हैं:

ध्यान दें कि यूजर्स की लिस्ट उन यूजर्स से पॉप्युलेट की जाती है जो Auth सर्विस के माध्यम से रजिस्टर है।

अंतिम स्टेप सिलेक्ट करना है कि कब नोटिफिकेशन को भेजा जाना है। क्योंकि हम केवल टेस्ट कर रहे हैं, हम इसे तुरंत भेज सकते हैं। Send This Push बटन पर क्लिक करने पर नोटिफिकेशन आपके सिलेक्टेड यूजर्स को भेज दिया जाएगा।

निष्कर्ष और अगले स्टेप्स

इस ट्यूटोरियल में, आपने Ionic Push के बारे में सीखा है और यह पुश नोटिफिकेशन को इंप्लीमेंट करना आसान बनाता है। Ionic डैशबोर्ड के माध्यम से, आप उन नोटिफिकेशन को कस्टमाइज करने में सक्षम है जो आप यूज़र्स को भेज रहे हैं। यह आपको यह भी चुनने की अनुमति देता है कि आप किन यूजर्स को नोटिफिकेशन भेजना चाहते हैं।

यदि आपके पास पहले से ही कोई बैकएंड मौजूद नहीं है तो यह बहुत अच्छा काम करता है। लेकिन अगर आपके पास पहले से ही एक बैकएंड है, तो आप शायद ये पूछेंगे कि आपकी मौजूदा वेब एप्लीकेशन के साथ Ionic Push का उपयोग कैसे कर सकते हैं। वेल, उसके लिए जवाब Ionic HTTP API है। जब भी आप किसी खास कंडीशन को पूरा करते हैं, तो आप अपने वेब सर्वर से Ionic के सर्वर पर HTTP रिक्वेस्ट भेज सकते हैं। आपके द्वारा भेजी गई रिक्वेस्ट आपके यूजर को भेजे जाने के लिए एक पुश नोटिफिकेशन ट्रिगर करेगा। यदि आप और अधिक सीखना चाहते हैं, तो Ionic Push Service के डॉक्यूमेंटेशन को देख सकते हैं।

और जबकि आप यहां हैं, तो Ionic 2 पर हमारे कुछ अन्य कोर्सेज और ट्यूटोरियल्स को भी देख लें!

• Ionic 2
  अपनी पहली Ionic 2 ऐप को कोड करें: एक फोटो शेयर करने वाली ऐप
  Wernher-Bel Ancheta
• Ionic
  Ionic 2 के साथ शुरुआत करें
  Reginald Dawson
• Ionic
  Ionic 2 का उपयोग करके एक कैमरा वाली ऐप कैसे बनाएं
  Ashraff Hathibelagal