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:
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:
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
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:
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 :
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:
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:
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)
