Xây dựng ứng dụng Web Single Page App với Vue js 2 và Firebase

648
26-01-2018
Xây dựng ứng dụng Web Single Page App với Vue js 2 và Firebase

Firebase là gì? Đây một dịch vụ cơ sở dữ liệu thời gian thực hoạt động trên nền tảng đám mây được cung cấp bởi Google nhằm giúp các lập trình phát triển nhanh các ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu..

Firebase là sự kết hợp hoàn hảo cho Vue.js. Để tích hợp các dịch vụ Firebase với ứng dụng Vue.js 2, bạn có thể dùng thư viện VueFire.

Trong bài viết này, Bizfly Cloud sẽ hướng dẫn chi tiết cho bạn cách thiết lập một cơ sở dữ liệu thời gian thực Firebase và liên kết dữ liệu theo thời gian thực trong ứng dụng Vue của bạn.

Thiết lập Firebase

Trước khi bắt đầu xây dựng ứng dụng Vue, trước tiên chúng ta cần phải thiết lập cơ sở dữ liệu thời gian thực Firebase.

Để thiết lập Firebase, trước tiên bạn cần vào tranghttps://firebase.google.com/ tạo một tài khoản và đăng nhập vào bảng điều khiển Firebase. Bảng điều khiển Firebase cung cấp cho bạn quyền truy cập vào tất cả các dịch vụ và các tùy chọn cấu hình. Trước tiên, chúng ta cần tạo một dự án Firebase mới:

Ảnh 1.

Click vào liên kết Cơ sở dữ liệu để truy cập cơ sở dữ liệu thời gian thực. Bạn có thể sử dụng trình chỉnh sửa trực tuyến để thêm nội dung vào cơ sở dữ liệu, ví dụ:
Ảnh 2.

II. Thêm Thư viện Firebase và VueFire vào dự án

Thư viện VueFire (https://github.com/vuejs/vuefire) giúp bạn dễ dàng kết nối dữ liệu Firebase với thuộc tính dữ liệu Vue.js. Để thêm VueFire và thư viện lõi Firebase vào dự án thực hiện lệnh sau:

$ npm install firebase vuefire --save

Trong tập tin main.js, chúng ta có thể nhúng VueFire. Bạn cũng cần gọi Vue.use (VueFire) để làm cho thư viện có sẵn trong dự án:

Ảnh 4.

Kết nối VUE với FIREBASE

Sau khi khởi tạo xong project vue js, bây giờ chúng ta có thể thiết lập kết nối với cơ sở dữ liệu Firebase. Điền các thông tin cấu hình của Firebase trong tệp tin App.vue

Ảnh 5.

Bạn có thể lấy các thông tin cấu hình từ bảng điều khiển Firebase rất dễ dàng. Mở trang tổng quan của dự án và click vào liên kết Add Firebase vào ứng dụng web của bạn.

Với trường hợp Firebase được lưu trữ trong ứng dụng, bây giờ chúng ta có thể tham chiếu cơ sở dữ liệu bằng cách sử dụng cuộc gọi app.database ().

Hiển thị dữ liệu ra màn hình

Thư viện VueFire sẽ giúp dễ ràng buộc các thuộc tính Vue.js với dữ liệu Firebase. Chỉ cần thêm phần sau vào đối tượng cấu hình thành phần:

Ảnh 6.

Bây giờ biến users cho phép truy cập từ cơ sở dữ liệu Firebase, để chúng ta có thể xuất dữ liệu ra màn hình :

Ảnh 7.

Thêm mới dữ liệu

Bây giờ, chúng ta sẽ thêm mới một bản ghi vào cơ sở dữ liệu của firebase,với dữ liệu mới là một Object newUser:

Ảnh 8.

Bằng cách sử dụng chỉ thị mô hình v-model : newUser được ràng buộc dữ liệu 2 chiều với biến newUser.
Ảnh 9.

Ảnh 10.

Sau đây là ví dụ:
Ảnh 11.

Chức năng xóa bản ghi trong firebase

Trong bước tiếp theo, chúng ta sẽ thêm chức năng xóa, để người dùng có thể xóa các mục từ danh sách. Đầu tiên hãy thêm một nút xóa vào mỗi bản bản ghi người dùng có thể nhấp vào để xóa:

Ảnh 12.

Ảnh 13.

Ảnh 14.

Kết luận

Vue.js 2 giúp dễ dàng thực hiện các thao tác trên giao diện người dùng với ứng dụng Single Page App. Nếu bạn muốn có đồng bộ dữ liệu thời gian thực trong ứng dụng của bạn Firebase là một lựa chọn tuyệt vời.

Theo Bizfly Cloud chia sẻ

>> Xem thêm: Tìm hiểu về Cross-origin resource sharing (CORS)

SHARE