Cách tạo Web Push Notification
Người viết: NamNV609 Đã bao giờ bạn vào một trang nào mà nhận được một popup dạng như này chưa? Và bạn có thắc mắc nó là gì và hoạt động ra sao không? Vâng, định nghĩa chính xác nó là gì thì mình không rõ. Nhưng nó sử dụng OneSignal để thực hiện việc này. Nó giúp ...
Người viết: NamNV609
Đã bao giờ bạn vào một trang nào mà nhận được một popup dạng như này chưa?
Và bạn có thắc mắc nó là gì và hoạt động ra sao không? Vâng, định nghĩa chính xác nó là gì thì mình không rõ. Nhưng nó sử dụng OneSignal để thực hiện việc này. Nó giúp chúng ta nhận được thông báo khi có bài viết mới (kể cả khi không mở trang đó). Công nghệ được sử dụng ở đây được gọi là web push notification! Hôm nay chúng ta sẽ cùng đi làm một trang đơn giản. Giống như hình mình đã đưa để hiểu được khái niệm cơ bản về nó nhé. Để chế biến, chúng ta cần những nguyên liệu sau:
- Tài khoản tại OneSignal
- Tool giúp chúng ta public localhost ra internet (Ngrok hoặc LocalTunnel. Cá nhân mình chọn LocalTunnel vì nó hỗ trợ tạo subdomain) để test thằng OneSignal.
- Laravel. Mình chọn PHP cho nhanh. Vì dù sao mình cũng là coder PHP.
OK, sau khi đã có nguyên liệu. Chúng ta cùng đi sơ chế nhé.
Sơ chế
OneSignal
Sau khi đăng ký tài khoản (nếu chưa có) tại OneSignal. Chúng ta đăng nhập và thực hiện tạo một application và thực hiện cài đặt như sau:
- Trong phần App settings, tại Web Push Platforms ta chọn Google Chrome and Mozilla Firefox
- Trong phần Configure web push, tại mục Choose Integration ta chọn Custom code, tại phần Site Setup ta nhập thông tin dạng như sau (mọi người hãy sửa lại cho phù hợp nhé):
Laravel
Sau khi xử lý xong phần OneSignal. Chúng ta sang phần tạo project Laravel. Do máy mình chỉ có PHP 5.6.30 nên mình dùng Laravel phiên bản v5.4.30 (mọi người có thể cài bản nào tùy ý). Đầu tiên chúng ta tạo Laravel project bằng lệnh:
|
1 2 3 |
composer create-project laravel/laravel demo-webpush-notification v5.4.30 --prefer-dist |
Sau khi tạo project xong. Chúng ta đi thêm một vài migrations để phục vụ cho demo này. Trong demo này, chúng ta cần 03 bảng là:
- posts: Để chứa bài viết
- categories: Danh mục bài viết
- users: Chứa thông tin đăng nhập của admin (chúng ta dùng luôn migrate mặc định của Laravel cho đỡ phải tạo nhiều)
Bắt đầu nào. Bảng categories trước:
|
1 2 3 |
php artisan make:migration create_categories_table --create=categories |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?php use IlluminateSupportFacadesSchema; use IlluminateDatabaseSchemaBlueprint; use IlluminateDatabaseMigrationsMigration; class CreateCategoriesTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('categories', function (Blueprint $table) { $table->increments('id'); $table->string("name"); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('categories'); } } |
Sau đó đến bảng posts:
|
1 2 3 |
php artisan make:migration create_posts_table --create=posts |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php use IlluminateSupportFacadesSchema; use IlluminateDatabaseSchemaBlueprint; use IlluminateDatabaseMigrationsMigration; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create("posts", function (Blueprint $table) { $table->increments("id"); $table->string("title"); $table->string("description"); $table->text("content"); $table->integer("user_id")->unsigned(); $table->integer("category_id")->unsigned(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists("posts"); } } |
Sau khi xong phần migration. Chúng ta sẽ tạo models tương ứng với các bảng. Đầu tiên là model Category:
|
1 2 3 |
php artsan make:model Category |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php namespace App; use IlluminateDatabaseEloquentModel; class Category extends Model { protected $fillable = [ "name", ]; public function posts() { return $this->hasMany(AppModelsPost::class); } } |
Tiếp là model Post:
|
1 2 3 |
php artsan make:model Category |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php namespace AppModels; use IlluminateDatabaseEloquentModel; class Post extends Model { protected $fillable = [ "title", "description", "content", "user_id", "category_id", ]; public function user() { return $this->belongsTo(AppModelsUser::class); } public function category() { return $this->belongsTo(AppModelsCategory::class); } } |
Cuối cùng là thêm đoạn sau vào model User:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php namespace AppModels; # ... public function posts() { return $this->hasMany(AppModelsPost::class); } |
Và để cho tiện quản lý, chúng ta sẽ tạo thư mục chứa các file models tại app/Models và chuyển 03 model là User.php, Category.php và Post.php vào đây.
Chế biến
Sau khi sơ chế xong các nguyên liệu. Chúng ta bắt đầu chế biến từng phần một nhé. Let’s get cooking!
User homepage
Phần user homepage bạn có thể xem tại pull request này: https://github.com/namnv609/laravel-webpush-notification-demo/pull/4/files
Chi tiết bài viết
Phần chi tiết bài viết các bạn có thể xem tại pull request này: https://github.com/namnv609/laravel-webpush-notification-demo/pull/5/files
Vậy là đã xong bên phần người dùng. Bây giờ chúng ta sang bên admin.
Admin login form
Phần admin login bạn có thể xem tại pull request này: https://github.com/namnv609/laravel-webpush-notification-demo/pull/3/files
Admin quản lý danh mục bài viết
Bạn có thể xem tại pull request này: https://github.com/namnv609/laravel-webpush-notification-demo/pull/7/files
Admin quản lý bài viết
Phần quan trọng nhất đây. Đây là lúc chúng ta cần xử lý nghiệp vụ nhiều hơn bình thường. Ngoài việc thêm bài viết (post) mới vào database thì chúng ta còn gọi lên OneSignal để push notification tới các users đã đăng ký nhận tin mới. Đầu tiên, chúng ta cài một package hỗ trợ chúng ta tương tác với OneSignal API. Package đó do mình tự viết từ trước.
|
1 2 3 |
composer require namnv609/php-onesignal-sdk |
Tiếp theo, chúng ta tạo event và listener để thực hiện gửi notification cho users thông quan OneSignal API:
|
1 2 3 |
php artisan make:event NewPostAdded |
|
1 2 3 |
php artisan make:listener NewPostNotification -e NewPostAdded |
Sau khi tạo hai file thành công. Chúng ta bắt tay vào xử lý.
Đầu tiên là file app/Events/NewPostAdded.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<?php namespace AppEvents; use IlluminateBroadcastingChannel; use IlluminateQueueSerializesModels; use IlluminateBroadcastingPrivateChannel; use IlluminateBroadcastingPresenceChannel; use IlluminateFoundationEventsDispatchable; use IlluminateBroadcastingInteractsWithSockets; use IlluminateContractsBroadcastingShouldBroadcast; class NewPostAdded { use Dispatchable, InteractsWithSockets, SerializesModels; public $post; /** * Create a new event instance. * * @return void */ public function __construct($post) { $this->post = $post; } /** * Get the channels the event should broadcast on. * * @return Channel|array */ public function broadcastOn() { return []; } } |
Ở đây, chúng ta khai báo biến $post để chứa thông tin về bài viết vừa được thêm mới. Và gán dữ liệu cho nó ở constructor. Tiếp, phần chính là ở đây. Phần lắng nghe sự kiện.
Chúng ta thực hiện ở file app/Listeners/NewPostNotification.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?php
Có thể bạn quan tâm
0
|
