Advertisement
  1. Code
  2. Mobile Development
  3. Ionic Development

Bắt đầu với các dịch vụ Ionic: Push

Scroll to top

() translation by (you can also view the original English article)

Trong hướng dẫn này, bạn sẽ tìm hiểu về Ionic Push, một dịch vụ Ionic giúp dễ dàng gửi push notification (thông báo dạng chữ) tới người dùng của bạn.

Ionic Push cho phép bạn gửi push notification tới người dùng ứng dụng của bạn. Chúng có thể được kích hoạt bất cứ khi nào bạn chọn. Ví dụ: khi sinh nhật của người dùng, bạn có thể tự động gửi cho họ push notification để chúc mừng họ.

Iconic Push hoạt động ra sao

Ionic Push đóng vai trò trung gian giữa thiết bị của người dùng và Firebase Cloud Messaging. Bước đầu tiên là để ứng dụng gửi token từ thiết bị tới máy chủ Ionic Push. Token thiết bị này hoạt động như một ID tham chiếu đến chính thiết bị đó. Khi máy chủ có token này, họ có thể gửi yêu cầu tới máy chủ Firebase Cloud Messaging để thực sự gửi push notification tới thiết bị. Trên mỗi thiết bị Android, có dịch vụ Google Play đang chạy, được gọi là dịch vụ Google Cloud Messaging. Điều này cho phép thiết bị nhận push notification từ nền tảng Firebase Cloud Messaging.

Đây là biểu đồ hiển thị luồng push notification:

Push notification flowPush notification flowPush notification flow

Thứ mà bạn chuẩn bị tạo ra đây

Bạn sẽ xây dựng một ứng dụng đơn giản có thể nhận push notification thông qua Ionic Push. Ứng dụng cũng sẽ sử dụng dịch vụ Ionic Auth để giúp người dùng đăng nhập. Điều này cho phép chúng ta thử các push notification mục tiêu, chúng sẽ chỉ gửi thông báo tới những người dùng cụ thể. Ứng dụng sẽ có hai trang: trang đăng nhập và trang người dùng. Người dùng chỉ có thể nhận thông báo khi họ đã đăng nhập.

Để giúp bạn có khái niệm về những thông báo trông như thế nào, đây là ảnh chụp màn hình đang nhận thông báo khi ứng dụng đang mở:

in-app notificationin-app notificationin-app notification

Mặt khác, thông báo trông như thế này khi đóng ứng lại:

closed-app notificationclosed-app notificationclosed-app notification

Thiết lập push notification cho Android

Trong phần này, chúng ta sẽ cấu hình các dịch vụ đám mây Firebase và Ionic để thực hiện push notification. Thông báo đẩy trong Android chủ yếu được xử lý bởi Dịch vụ nhắn tin qua đám mây của Firebase. Ionic Push chỉ là một lớp ngoài cùng của dịch vụ này giúp dễ dàng thực hiện push notification trong ứng dụng Ionic.

Tạo ứng dụng Firebase

Bước đầu tiên là tạo dự án Firebase mới. Bạn có thể làm điều đó bằng cách truy xuất Firebase Console và nhấp vào nút Add Project. Bạn sẽ thấy biểu mẫu sau:

Create Firebase ProjectCreate Firebase ProjectCreate Firebase Project

Nhập tên dự án và nhấp vào nút Create Project.

Khi dự án được tạo, bạn sẽ được chuyển hướng đến trang quản trị dự án. Từ đó, nhấp vào biểu tượng bánh răng ngay bên cạnh tab Overview và chọn Project Settings.

Trên trang thiết lập, nhấp vào tab Cloud Message. Ở đó bạn sẽ tìm thấy Server KeySender ID. Hãy ghi lại thông tin này vì bạn sẽ cần chúng sau này.

Cloud messaging settingsCloud messaging settingsCloud messaging settings

Tạo ứng dụng Ionic

Tiếp theo, bạn cần tạo ứng dụng Ionic trên website của Ionic. Điều này cho phép bạn làm việc với dịch vụ Ionic Push cũng như các dịch vụ Ionic khác. Nếu vẫn chưa có tài khoản Ionic, bạn có thể tạo tài khoản bằng cách đăng ký. Sau khi có tài khoản, bạn sẽ được chuyển hướng đến dashboard để tạo ứng dụng mới.

Create Ionic AppCreate Ionic AppCreate Ionic App

Tạo security profile (hồ sơ bảo mật)

Khi ứng dụng của bạn được tạo, hãy đi tới Settings > Certificates và nhấp vào nút New Security Profile. Nhập tên có tính mô tả cho Profile Name và xét Type thành Development:

Create new security profileCreate new security profileCreate new security profile

Security Profile đóng vai trò để đảm bảo an toàn thông tin đăng nhập của Firebase Cloud Messaging mà trước đó bạn đã có. Khi được tạo ra, hồ sơ này sẽ được liệt kê trong một bảng. Nhấp vào nút Edit bên cạnh security profile mới được tạo. Sau đó nhấp vào tab Android. Đưa giá trị của Server Key bạn đã có trước đó từ Firebase console vào trong trường FCM Server Key. Cuối cùng, nhấp Save để lưu các thay đổi.

Add Firebase Cloud Messaging credentialsAdd Firebase Cloud Messaging credentialsAdd Firebase Cloud Messaging credentials

Khởi động một ứng dụng Ionic mới

Tạo một dự án Ionic 2 mới bằng cách sử dụng template mới nguyên:

1
ionic start --v2 pushApp blank

Khi dự án được tạo ra, hãy cài đặt plugin phonegap-plugin-push. Cung cấp Sender ID mà bạn đã nhận được từ Firebase console:

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

Tiếp theo, bạn cần cài đặt plugin Ionic Cloud. Plugin này giúp làm việc dễ dàng với các dịch vụ của Ionic bên trong ứng dụng:

1
npm install @ionic/cloud-angular --save

Cuối cùng, bạn cần cập nhật file cấu hình của Ionic để Ionic biết cụ thể dự án nào cần được gắn vào ứng dụng Ionic mà bạn tạo ra trước đó. Bạn có thể làm điều này bẳng cách copy app ID trong dashboard của ứng dụng Ionic của bạn. Bạn có thể tìm thấy ID của ứng dụng ngay dưới tên ứng dụng. Khi bạn đã copy ID này, hãy mở file .io-config.jsonionic.config.json và paste giá trị này vào app_id.

Xây dựng ứng dụng

Bây giờ bạn đã sẵn sàng để xây dựng ứng dụng. Điều đầu tiên mà bạn cần làm là kích hoạt máy chủ phát triển Ionic để có thể thấy ngay những thay đổi trong khi bạn phát triển ứng dụng:

1
ionic serve

Khi quá trình biên dịch hoàn tất, hãy truy cập URL đang phát triển trên trình duyệt của bạn.

Bổ sung ứng dụng Ionic và thiết lập Push

Mở file src/app/app.module.ts và bổ sung thiết lập cho ứng dụng (core) và push notification (push). App_id là ID của ứng dụng Ionic mà bạn đã tạo. Sender_id là ID của người gửi bạn có được từ Firebase console. Trong đối tượng pluginConfig, bạn có thể tùy chọn thiết lập cài đặt push notification. Bên dưới, chúng tôi chỉ thiết lập giá trị cài đặt của sound (âm thanh) và vibrate (báo rung) thành true để báo cho phần cứng biết rằng nó có thể phát âm thanh push notification hoặc báo rung nếu thiết bị ở chế độ im lặng. Nếu bạn muốn biết thêm về những chọn lựa cấu hình được hỗ trợ, hãy xem tài liệu Push Notification options for Android (hướng dẫn chọn lựa cho push notification).

1
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';
2
3
const cloudSettings: CloudSettings = {
4
  'core': {
5
    'app_id': 'YOUR IONIC APP ID',
6
  },
7
  'push': {
8
    'sender_id': 'YOUR FCM SENDER ID',
9
    'pluginConfig': {
10
      'android': {
11
        'sound': true,
12
        'vibrate': true
13
      }
14
    }
15
  }
16
};

Tiếp theo, hãy cho Ionic biết bạn muốn sử dụng cloudSettings:

1
imports: [
2
    BrowserModule,
3
    IonicModule.forRoot(MyApp),
4
    CloudModule.forRoot(cloudSettings) // <-- add this

5
],

Trang chủ

Trang chủ mặc định trong template mới sẽ thực hiện vai trò làm trang đăng nhập. Mở file pages/home/home.html và bổ sung các thông tin sau:

1
<ion-header>
2
  <ion-navbar>
3
    <ion-title>
4
      pushApp
5
    </ion-title>
6
  </ion-navbar>
7
</ion-header>
8
9
<ion-content padding>
10
  <button ion-button full (click)='login();'>Login</button>
11
</ion-content>

Để đơn giản, chúng tôi chỉ có nút đăng nhập thay vì cả biểu mẫu đăng nhập đầy đủ. Có nghĩa là thông tin đăng nhập mà chúng tôi sẽ sử dụng để đăng nhập được chèn thẳng vào trong code.

Tiếp theo, mở file src/pages/home/home.ts và bổ sung phần sau:

1
import { Component } from '@angular/core';
2
import { NavController, LoadingController, AlertController } from 'ionic-angular';
3
import { Push, PushToken, Auth, User, UserDetails } from '@ionic/cloud-angular';
4
import { UserPage } from '../user-page/user-page';
5
6
@Component({
7
  selector: 'page-home',
8
  templateUrl: 'home.html'
9
})
10
11
export class HomePage {
12
13
  constructor(public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) {
14
15
    if (this.auth.isAuthenticated()) {
16
      this.navCtrl.push(UserPage);
17
    }
18
19
  }
20
21
  login() {
22
23
    let loader = this.loadingCtrl.create({
24
      content: "Logging in..."
25
    });
26
27
    loader.present();
28
29
    setTimeout(() => {
30
      loader.dismiss();
31
    }, 5000);
32
33
    let details: UserDetails = {
34
      'email': 'YOUR IONIC AUTH USER',
35
      'password': "YOUR IONIC AUTH USER'S PASSWORD"
36
    };
37
38
    this.auth.login('basic', details).then((res) => {
39
40
      this.push.register().then((t: PushToken) => {
41
        return this.push.saveToken(t);
42
      }).then((t: PushToken) => {
43
44
        loader.dismiss();
45
        this.navCtrl.push(UserPage);
46
47
      }, (err) => {
48
49
        let alert = this.alertCtrl.create({
50
          title: 'Push registration failed',
51
          subTitle: 'Something went wrong with push notifications registration. Please try again.',
52
          buttons: ['OK']
53
        });
54
        alert.present();
55
56
      });
57
58
    }, () => {
59
60
      let alert = this.alertCtrl.create({
61
        title: 'Login Failed',
62
        subTitle: 'Invalid Credentials. Please try again.',
63
        buttons: ['OK']
64
      });
65
      alert.present();
66
67
    });
68
69
  }
70
71
}

Hãy chia nhỏ code ở bên trên, đầu tiên ta import các controller cần thiết để làm việc với phần điều hướng, loader (trình tải) và alert (cảnh báo):

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

Sau đó, import các dịch vụ cần thiết để làm việc với Push và Auth.

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

Sau đã thêm các dịch vụ đó, import trang User. Hãy comment (vô hiệu) nó ngay lúc này vì chúng ta chưa tạo trang đó. Đừng quên uncomment (bỏ vô hiệu) sau khi trang người dùng đã sẵn sàng.

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

Trong constructor, kiểm tra xem người dùng hiện tại có được xác thực chưa. Nếu rồi thì chuyển ngay họ đến trang người dùng:

1
constructor(public navCtrl: NavController, public push: Push, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public auth: Auth, public user: User) {
2
3
    if (this.auth.isAuthenticated()) {
4
      this.navCtrl.push(UserPage);
5
    }
6
7
}

Đối với hàm đăng nhập, hãy hiển thị loader và thiết lập nó tự vô hiệu sau 5 giây. Theo cách này nếu xảy ra sự cố với mã xác thực, người dùng không phải nhìn thấy một diễn hoạt loading không kết thúc:

1
login() {
2
    let loader = this.loadingCtrl.create({
3
      content: "Logging in..."
4
    });
5
6
    loader.present();
7
8
    setTimeout(() => {
9
      loader.dismiss();
10
    }, 5000);
11
}

Sau đó, hãy giúp người dùng đăng nhập bằng thông tin được chèn vào sẵn của người dùng đó mà trước đó bạn đã thêm vào ứng dụng của mình:

1
let details: UserDetails = {
2
    'email': 'YOUR IONIC AUTH USER',
3
    'password': "YOUR IONIC AUTH USER'S PASSWORD"
4
};
5
6
this.auth.login('basic', details).then((res) => {
7
    
8
    ...
9
10
, () => {
11
12
  let alert = this.alertCtrl.create({
13
    title: 'Login Failed',
14
    subTitle: 'Invalid Credentials. Please try again.',
15
    buttons: ['OK']
16
  });
17
  alert.present();
18
19
});

Nếu bạn chưa có người dùng có sẵn, trang tổng quan Ionic không thực sự cho phép bạn tạo người dùng mới, mặc dù bạn có thể tạo bổ sung thêm số người dùng khi bạn đã có ít nhất một người dùng. Vì vậy, cách dễ nhất để tạo người dùng mới là gọi phương thức signup() từ dịch vụ Auth. Chỉ cần uncomment code dùng cho đăng nhập ở trên và thay thế bằng code bên dưới. Lưu ý rằng bạn có thể tạo người dùng từ trình duyệt khi kế hoạch xác thực email/mật khẩu chỉ sử dụng các yêu cầu HTTP.

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

Bây giờ bạn có một người dùng để bạn có thể đăng nhập, bạn có thể tiếp tục và xóa phần code đăng ký và uncomment đoạn code đăng nhập.

Bên trong hàm callback thành công để đăng nhập, bạn cần gọi phương thức register() từ dịch vụ Push. Bước quan trọng này cho phép thiết bị nhận được push notification. Nó yêu cầu dịch vụ Ionic Push để nhận token của thiết bị. Như đã đề cập trong phần Cách hoạt động trước đó, token thiết bị này có vai trò là mã định danh duy nhất cho thiết bị để nó có thể nhận push notification.

1
this.push.register().then((t: PushToken) => {
2
    return this.push.saveToken(t);
3
}).then((t: PushToken) => {
4
5
    loader.dismiss();
6
    this.navCtrl.push(UserPage);
7
8
}, (err) => {
9
10
    let alert = this.alertCtrl.create({
11
      title: 'Push registration failed',
12
      subTitle: 'Something went wrong with push notifications registration. Please try again.',
13
      buttons: ['OK']
14
    });
15
    alert.present();
16
17
});

Điều tuyệt vời của Ionic Push là sự tích hợp với Ionic Auth. Lý do tại sao chúng tôi đăng ký token thiết bị ngay sau khi đăng nhập là vì tích hợp này. Khi bạn gọi phương thức saveToken(), nó đủ thông minh để nhận ra rằng người dùng hiện đang đăng nhập. Vì vậy, nó sẽ tự động gán người dùng này vào thiết bị. Điều này sau đó cho phép bạn gửi push notification cụ thể đến người dùng đó.

Trang người dùng

Trang người dùng là trang nhận push notification. Tạo ra nó bằng lệnh Ionic generate:

1
ionic g page userPage

Điều này sẽ tạo thư mục src/pages/user-page với ba file trong đó. Mở file user-page.html và bổ sung thông tin sau:

1
<ion-header>
2
  <ion-navbar hideBackButton="true">
3
    <ion-title>User Page</ion-title>
4
  </ion-navbar>
5
</ion-header>
6
7
<ion-content padding>
8
  <button ion-button full (click)='logout();'>Logout</button>
9
</ion-content>

Để cho đơn giản, tất cả những gì chúng tôi có là một nút để giúp người dùng đăng xuất. Mục đích chính của trang này chỉ là nhận và hiển thị push notification. Nút đăng xuất được thêm vào dễ dàng vì nhu cầu giúp người dùng đăng xuất và kiểm tra xem có thể họ vẫn nhận được thông báo sau khi đã đăng xuất hay không.

Kế tiếp, mở file user-page.ts và bổ sung các thông tin sau:

1
import { Component } from '@angular/core';
2
import { NavController, AlertController } from 'ionic-angular';
3
import { Push, Auth } from '@ionic/cloud-angular';
4
5
@Component({
6
  selector: 'page-user-page',
7
  templateUrl: 'user-page.html',
8
})
9
10
export class UserPage {
11
12
  constructor(public navCtrl: NavController, public push: Push, public auth: Auth, public alertCtrl: AlertController) {
13
14
    this.push.rx.notification()
15
      .subscribe((msg) => {
16
17
        let alert = this.alertCtrl.create({
18
          title: msg.title,
19
          subTitle: msg.text,
20
          buttons: ['OK']
21
        });
22
        alert.present();
23
24
      });
25
26
  }
27
28
  logout() {
29
    this.auth.logout();
30
    this.navCtrl.pop();
31
  }
32
33
}

Đoạn mã trên đã tự giải thích khá rõ, vì vậy tôi sẽ chỉ xem xét phần làm việc với các thông báo. Code dưới đây xử lý các thông báo. Nó sử dụng phương thức subscribe() để đăng ký bất kỳ thông báo đang đến hoặc đã mở. Khi tôi nói "đã mở", có nghĩa là người dùng đã nhấn vào thông báo trong khu vực thông báo. Khi điều này xảy ra, ứng dụng được khởi chạy và hàm callbacki mà bạn đã chuyển đến phương thức subscribe() sẽ được gọi. Mặt khác, push notification đang đến xuất hiện khi ứng dụng hiện đang được mở. Khi một push notification được gửi, hàm callback này cũng được gọi. Khác biệt duy nhất là hàm này không còn đi đến khu vực thông báo.

1
this.push.rx.notification()
2
  .subscribe((msg) => {
3
4
    let alert = this.alertCtrl.create({
5
      title: msg.title,
6
      subTitle: msg.text,
7
      buttons: ['OK']
8
    });
9
    alert.present();
10
11
  });

Đối với mỗi thông báo, tham số được chuyển đến hàm callback chứa đối tượng payload:

Push notification payloadPush notification payloadPush notification payload

Trong đoạn code bên trên, chúng tôi chỉ sử dụng titletext để làm nội dung cho cảnh báo. Tuy nhiên, chúng tôi không giới hạn trong phạm vi các cảnh báo — như bạn có thể thấy từ ảnh chụp màn hình ở trên, có đối tượng payload này lưu trữ dữ liệu bổ sung mà bạn muốn chuyển vào từng thông báo. Thực sự bạn có thể sử dụng những dữ liệu này để định hướng ứng dụng của bạn sẽ làm gì khi nhận được kiểu thông báo này. Trong ví dụ trên, is_cat được xét giá trị 1 và ta có thể thay đổi phông nền của ứng dụng thành ảnh con mèo nếu nhận được thông báo này. Sau này trong phần Sending Push Notifications, bạn sẽ tìm hiểu cách điểu chỉnh payload cho mỗi thông báo.

Chạy ứng dụng trên thiết bị

Bây giờ là lúc để kiểm tra ứng dụng trên thiết bị. Hãy tiếp tục và bổ sung nền tảng và build (biên dịch) ứng dụng cho nền tảng đó. Ở đây chúng tôi đang sử dụng Android:

1
ionic platform add android
2
ionic build android

Sao chép file .apk bên trong thư mục platforms/android/build/outputs/apk vào thiết bị của bạn và cài đặt nó.

Giải quyết lỗi khi tạo ứng dụng

Lần đầu tiên tôi thử chạy lệnh build, tôi gặp lỗi sau:

Android build errorAndroid build errorAndroid build error

Nếu bạn gặp lỗi tương tự thì hãy làm theo tôi. Nếu bạn không gặp lỗi nào thì bạn có thể chuyển sang phần tiếp theo.

Vấn đề ở đây là thành phần SDK được nêu tên không được cài đặt hoặc có thể cần phải cài đặt bản cập nhật quan trọng. Tuy nhiên, thông báo lỗi có một chút lạc lối, vì thông báo chỉ nói rằng thỏa thuận cấp phép cần phải được thông qua.

Vậy để giải quyết vấn đề này, hãy khởi chạy trình cài đặt Android SDK và sau đó kiểm tra Android Support RepositoryGoogle Repository. Sau đó, nhấp vào nút Install và đồng ý với thỏa thuận cấp phép để cài đặt các thành phần.

Gửi push notification

Bây giờ bạn đã cài đặt ứng dụng trên thiết bị của mình, đã đến lúc thực sự gửi một số push notification. Dưới đây là vài tình huống mà bạn có thể thử nghiệm:

  • khi người hiện tại chưa đăng nhập
  • khi người dùng đăng nhập
  • cho tất cả người dùng
  • cho người dùng phù hợp với truy vấn cụ thể
  • khi ứng dụng được mở
  • khi ứng dụng bị đóng

Bước đầu tiên trong việc gửi push notification là chuyển đến dashboard ứng dụng Ionic của bạn và nhấp vào tab Push. Vì là lần đầu tiên sử dụng dịch vụ, bạn sẽ thấy màn hình sau đây:

create your first pushcreate your first pushcreate your first push

Tiếp tục và nhấp vào nút Create your first Push. Thao tác này sẽ chuyển bạn đến trang để tạo push notification. Ở đây bạn có thể nhập tên của chiến dịch, tiêu đề và nội dung của thông báo và dữ liệu bổ sung bất kỳ mà bạn muốn truyền vào. Ở đây chúng tôi đang thiết lập is_cat thành 1.

push detailspush detailspush details

Tiếp theo, bạn có thể tùy chọn đặt tùy chọn push notification cho iOS hoặc Android. Vì chúng tôi sẽ chỉ gửi cho các thiết bị Android, chúng tôi chỉ thiết lập các tùy chọn cho Android:

android push optionsandroid push optionsandroid push options

Bước tiếp theo là chọn những người dùng sẽ nhận được thông báo. Ở đây bạn có thể chọn All Users (tất cả người dùng) nếu bạn muốn gửi thông báo tới tất cả các thiết bị đã đăng ký để nhận push notification.

Select users to push toSelect users to push toSelect users to push to

Nếu bạn chỉ muốn gửi những người dùng cụ thể thì bạn cũng có thể chọn lọc họ:

push to selected userspush to selected userspush to selected users

Lưu ý rằng danh sách người dùng được chọn ra từ những người dùng đã đăng ký qua dịch vụ Auth.

Bước cuối cùng là chọn thời điểm gửi thông báo. Vì chỉ là thử nghiệm, chúng tôi có thể gửi thông báo ngay lập tức. Nhấp vào nút Send This Push sẽ gửi thông báo đến những người dùng bạn đã chọn.

Schedule pushSchedule pushSchedule push

Tổng kết và các bước kế tiếp

Trong hướng dẫn này, bạn đã biết về Ionic Push và cách thức nó giúp cho các push notification thực hiện dễ dàng hơn. Thông qua Ionic dashboard, bạn có thể sửa đổi các thông báo mà bạn muốn gửi cho người dùng. Nó cũng cho phép bạn chọn gửi thông báo đến người dùng nào.

Điều này thật tuyệt nếu hiện thời bạn không có một back-end. Nhưng nếu bạn đã có back-end rồi, có lẽ bạn sẽ hỏi làm thế nào để sử dụng Ionic Push với ứng dụng web hiện tại của bạn. Vâng, câu trả lời là Ionic HTTP API. API này cho phép bạn gửi một yêu cầu HTTP từ máy chủ web của bạn đến máy chủ Ionic bất cứ khi nào một điều kiện cụ thể được đáp ứng. Yêu cầu mà bạn gửi đi sau đó sẽ kích hoạt push notification được gửi tới người dùng của bạn. Nếu bạn muốn tìm hiểu thêm, bạn có thể xem tài liệu cho Ionic Push Service.

Và khi bạn đọc xong hướng dẫn này, hãy xem qua các khoá học và hướng dẫn khác về Ionic 2!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.