Giới thiệu về Quasar Framework: Xây dựng các ứng dụng đa nền tảng

[theanh]

Trong bài viết này, tôi sẽ giải thích cách sử dụng Quasar Framework và giao diện người dùng hiện đại của nó (tuân theo hướng dẫn của Material) để xây dựng ứng dụng ghi chú. Ứng dụng sẽ lấy dữ liệu từ Firebase và lưu trữ dữ liệu của mình. Hướng dẫn này dành cho bất kỳ ai quan tâm đến việc xây dựng các ứng dụng đa nền tảng hoạt động tốt trên tất cả các thiết bị cùng một lúc. Cuối bài viết, bạn sẽ hiểu rõ Quasar là gì, cách bắt đầu tạo ứng dụng bằng Quasar và cách sử dụng Firebase.

Để theo dõi bài viết này, bạn cần có:

• hiểu biết về HTML, CSS và JavaScript;
• ít nhất một chút kinh nghiệm với Vue.js;
• Node.js phiên bản 10 trở lên và npm phiên bản 5 trở lên được cài đặt trên máy của bạn.
• hiểu biết về cách giao diện dòng lệnh (CLI) hoạt động.

Ứng dụng đã triển khai có thể xem và mã cuối cùng có trên Github.

What Quasar Framework có phải là không?​

Quasar Framework là một framework đa nền tảng dựa trên Vue.js mã nguồn mở có phương châm là: "viết mã một lần và đồng thời triển khai dưới dạng trang web, ứng dụng di động và/hoặc ứng dụng Electron". Nó có nhiều tính năng cho phép bạn, với tư cách là nhà phát triển web, xây dựng ứng dụng trên máy tính để bàn và thiết bị di động và tạo ứng dụng web tiến bộ (PWA) bằng các công nghệ như Cordova, Electron và web (Vue.js).

Tại sao lại là Quasar Framework?​

Quasar là một bộ giao diện người dùng dễ sử dụng nhưng mạnh mẽ bao gồm nhiều thành phần giao diện người dùng, thành phần bố cục và trình trợ giúp. Cùng nhau, các thành phần này cung cấp một bộ công cụ đầy đủ tính năng để xây dựng các ứng dụng giao diện người dùng phản hồi mà không cần bạn phải sử dụng nhiều thư viện giao diện người dùng khác nhau. Nó thực hiện những công việc nặng nhọc cho bạn, cho phép bạn tập trung vào các tính năng chứ không phải là những thứ rập khuôn.

Tóm lại, Quasar cung cấp hỗ trợ cho nhiều chế độ xây dựng, bao gồm:

• ứng dụng một trang;
• ứng dụng web tiến bộ;
• kết xuất phía máy chủ;
• ứng dụng di động (iOS và Android), sử dụng Cordova hoặc Сapacitor;
• ứng dụng máy tính để bàn đa nền tảng, sử dụng Electron;
• tiện ích mở rộng trình duyệt.

Bắt đầu​

Để bắt đầu, hãy xem cách cài đặt Quasar trên máy cục bộ của bạn và thiết lập một dự án.

Cài đặt​

Có ba cách để bắt đầu sử dụng Quasar:

• nhúng vào một dự án hiện có thông qua mạng phân phối nội dung (CDN);
• cài đặt bằng CLI Vue.js Quasar plugin;
• cài đặt bằng Quasar CLI.

Đối với hướng dẫn này, chúng ta sẽ sử dụng phương pháp thứ ba, đó là Quasar CLI. Điều đầu tiên cần làm là cài đặt Quasar CLI toàn cục trên máy tính của bạn hoặc kiểm tra xem nó đã được cài đặt hay chưa bằng cách chạy các lệnh sau trong CLI của bạn:

quasar -v #kiểm tra xem quasar đã được cài đặt trước đó chưayarn global add @quasar/cli# hoặcnpm install -g @quasar/cli

Sau khi hoàn tất, giờ bạn có thể chuyển sang thiết lập dự án.

Thiết lập dự án​

Chạy lệnh sau trong CLI của bạn:

quasar create

Sau đó, bạn sẽ được hỏi một số câu hỏi. Sau đây là cấu hình đầy đủ của tôi cho ứng dụng mà chúng ta sẽ xây dựng.



Bây giờ chúng ta có thể di chuyển vào thư mục dự án và khởi động ứng dụng bằng các lệnh sau:

cd quasar dev

Sau khi hoàn tất các bước trên, ứng dụng của chúng ta sẽ chạy trên http://localhost:8080. Đây là những gì chúng ta nên thấy:

Cấu trúc thư mục của Quasar​

Cấu trúc ứng dụng mặc định cho Quasar được thiết kế để trở thành điểm khởi đầu tuyệt vời cho các nhà phát triển xây dựng bất kỳ loại ứng dụng nào. Bạn có thể sắp xếp ứng dụng theo bất kỳ cách nào bạn thích và tạo thư mục bất cứ khi nào bạn cần.

.├── public/ # tài sản tĩnh thuần túy (sao chép trực tiếp)├── src/│ ├── asset/ # tài sản động (xử lý bởi Webpack)│ ├── components/ # thành phần .vue được sử dụng trong các trang và bố cục│ ├── css/ # tệp CSS/Stylus/Sass/… cho ứng dụng của bạn│ ├── layouts/ # tệp .vue bố cục│ ├── pages/ # tệp .vue trang│ ├── boot/ # tệp khởi tạo (mã khởi tạo ứng dụng)│ ├── router/ # Vue Router│ ├── store/ # Vuex Store│ ├── App.vue # thành phần Vue gốc của ứng dụng của bạn│ └── index.template.html # mẫu cho index.html├── .editorconfig # cấu hình trình soạn thảo├── .gitignore # GIT bỏ qua đường dẫn├── .postcssrc.js # cấu hình PostCSS├── babel.config.js # cấu hình Babel├── package.json # tập lệnh npm và các phụ thuộc├── quasar.conf.js # tệp cấu hình ứng dụng Quasar└── README.md # tệp readme cho ứng dụng của bạn

Thư mục nguồn bao gồm khoảng bảy thư mục chính mà người mới bắt đầu nên quan tâm:

• quasar.conf.js
  Đây là bộ não đằng sau bất kỳ ứng dụng Quasar nào, vì hầu hết các cấu hình được thực hiện trong tệp này. Thật đáng kinh ngạc, Quasar xử lý hầu hết các cấu hình phức tạp cần thiết cho nhiều công cụ và gói khác nhau mà bạn có thể sử dụng trong một ứng dụng. Một số cấu hình này dành cho:Các thành phần, chỉ thị và plugin Quasar cần thiết trong ứng dụng của bạn;
• Gói biểu tượng;
• Hoạt ảnh CSS;
• PWA tệp kê khai và Các tùy chọn Workbox;
• Trình đóng gói Electron và/hoặc Trình xây dựng Electron;
• và nhiều hơn nữa.

[*] src/assets
Thư mục assets chứa các tài sản chưa biên dịch của bạn, chẳng hạn như tệp Stylus hoặc Sass, hình ảnh và phông chữ.
[*] src/components
Đây là nơi lưu trữ tất cả các thành phần có thể tái sử dụng của bạn. Các thành phần này tạo nên các phần khác nhau của ứng dụng và có thể được sử dụng lại và nhập vào các trang, bố cục và thậm chí các thành phần khác của bạn.
[*] src/css
Bạn sẽ không tìm thấy điều này trong Vue.js, nhưng Quasar cung cấp điều này để chúng ta có thể có tất cả CSS toàn cục của mình ở dạng Sass. Nó bao gồm hai tệp: app.sass là nơi chứa tất cả các kiểu của chúng ta, trong khi quasar.variables.sass chứa tất cả các biến có thể sử dụng lại mà chúng ta muốn sử dụng khi tạo kiểu cho ứng dụng của mình. Bạn có thể bỏ qua thư mục CSS nếu bạn cảm thấy nó không có ích với mình.
[*] src/layouts
Điều này giúp chúng ta tạo các bố cục được xác định cho một ứng dụng mà không cần lặp lại mã. Điều này hữu ích khi bạn muốn bao gồm các thanh bên hoặc thanh cố định ở dưới cùng hoặc có các bố cục riêng biệt cho thiết bị di động và máy tính để bàn.
[*] src/pages
Thư mục pages chứa các chế độ xem và tuyến đường của ứng dụng. Các trang của chúng tôi được đưa vào ứng dụng và được quản lý thông qua Vue Router trong /src/router/routes.js. Điều này có nghĩa là mỗi trang cần được tham chiếu tại đó.
[*] src/router
Thư mục này chứa cấu hình định tuyến của ứng dụng. Nó bao gồm hai thư mục:

• /src/router/index.js chứa mã khởi tạo Vue Router.
• /src/router/routes.js chứa các tuyến đường của ứng dụng, tải các bố cục của chúng ta cùng với các tuyến đường hoặc trang trong ứng dụng.
  Bạn có thể không cần làm gì với tệp index.js trong một dự án nhỏ, nhưng nếu dự án của bạn có các tuyến đường, bạn sẽ cần thêm chúng vào tệp routes.js.

Xây dựng ứng dụng ghi chú​

Khi xây dựng ứng dụng bằng Quasar, điều đầu tiên chúng ta muốn làm là tạo bố cục. Quasar đã làm cho quá trình này dễ dàng hơn nhiều so với bất kỳ khuôn khổ nào khác bằng cách sử dụng trình xây dựng bố cục. Đối với ứng dụng ghi chú của chúng ta, chúng ta sẽ muốn thứ gì đó như sau, khá giống với bố cục mặc định nhưng có một vài sửa đổi:

Bố cục ứng dụng​

Trong thanh bên của tài liệu của Quasar, bạn sẽ thấy tùy chọn "Bố cục và Lưới". Khi bạn nhấp vào tùy chọn đó, một danh sách thả xuống sẽ xuất hiện với nhiều tùy chọn hơn, một trong số đó là "Trình tạo bố cục". Nhấp vào “Layout Builder”, bạn sẽ được đưa đến đây:



Điều này cho phép chúng ta chọn các tùy chọn mà chúng ta muốn và loại bỏ các tùy chọn mà chúng ta không muốn. Sau đó, chúng tôi sẽ tạo mã để dán vào tệp bố cục.



Tùy chọn đầu tiên giúp chúng ta chọn các phần bố cục, trong khi tùy chọn thứ hai cho phép chúng ta định cấu hình các phần bố cục. Cuối cùng, chúng ta xuất bố cục đã tạo.

Nếu bạn muốn có bố cục giống hệt như của tôi, hãy sử dụng mã bên dưới:

[IMG]https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg[/IMG]
  Tiêu đề          export default { data() { return { left: false }; }};

Xóa bố cục mặc định và dán mã ở trên hoặc mã mà bạn đã tạo vào src/layouts/MainLayout.vue.

Mã ở trên được chia thành ba phần: tiêu đề (thanh điều hướng), ngăn kéo (thanh bên) và vùng chứa trang (chứa chế độ xem bộ định tuyến).

Chúng tôi đã sử dụng giao diện người dùng hiện đại để định kiểu cho toàn bộ trang. Như tôi đã nói trước đó, khi sử dụng Quasar, bạn sẽ không cần các thư viện nặng bổ sung như Hammer.js, Moment.js hoặc Bootstrap.

Chúng ta sẽ thêm dữ liệu vào thanh bên và chỉnh sửa thanh điều hướng. Sau khi lưu, bạn sẽ thấy ứng dụng của chúng ta trông như thế này:



Chúng ta hãy làm việc trên bố cục, thêm một số mục vào thanh bên và thay đổi tiêu đề của ứng dụng. Nếu bạn quét mã bố cục mà chúng ta đã thêm, bạn sẽ thấy nơi chúng ta phải chỉnh sửa và thêm các mục khác nhau này.

Đây là giao diện bố cục của tôi sau khi tôi đã thêm các mục vào thanh bên và thay đổi tiêu đề:



Và đây là mã:

      Ghi chú của tôi          Trang chủ      Giới thiệu          Được thiết kế và xây dựng cho bài viết này.    export default { data() { return { left: false }; }};

Chúng tôi đã xóa logo trong thanh điều hướng và chỉnh sửa văn bản, sau đó thêm danh sách vào thanh bên, sử dụng giao diện người dùng hiện đại của Quasar. Kiểm tra các mục danh sách và sao chép mã của bất kỳ mục nào bạn muốn sử dụng.

Thiết kế ứng dụng​

Trước đó, tôi đã nói rằng tôi sẽ sử dụng giao diện người dùng hiện đại của Quasar (tuân theo các hướng dẫn của Material) để xây dựng ứng dụng ghi chú và đó là những gì chúng tôi sẽ thực hiện ngay bây giờ. Thật khó để giải thích toàn bộ quy trình trong một bài viết như thế này, nhưng phần "Phong cách & Bản sắc" trong tài liệu của Quasar đã trình bày rất rõ.

Đây sẽ là ứng dụng một trang (index.vue) và đây là mã, không áp dụng bất kỳ kiểu nào:

           Bạn có 3 Ghi chú     Kẻ có trí tưởng tượng mà không học hành thì có cánh nhưng không có chân.               Kẻ có trí tưởng tượng mà không học hành thì có cánh nhưng không có chân.               Kẻ có trí tưởng tượng mà không học thì có cánh nhưng không có chân.            import db from "src/boot/firebase";export default { name: "PageIndex", data() { return { basic: false, fixed: false, newNoteContent: "" }; }};

Trong đoạn mã trên, chúng ta có một trường nhập liệu từ Quasar. Chúng ta đã đính kèm một v-model để lấy dữ liệu từ trường nhập liệu sau khi nhấp vào nút "Gửi". Chúng ta cũng có một danh sách các mục sẽ được sử dụng để hiển thị từng ghi chú và mỗi mục danh sách có một biểu tượng được sử dụng để xóa mục cụ thể đó khi nhấp vào.

Thiết lập Dữ liệu cục bộ​

Lúc này, thiết kế ứng dụng của chúng ta đã hoàn tất. Việc tiếp theo chúng ta sẽ làm là tạo một mảng chứa tất cả các ghi chú của mình. Chúng tôi sẽ đảm bảo rằng chúng tôi có thể thêm vào và xóa khỏi mảng này trước khi thiết lập Firebase.

Đây là mảng mà chúng tôi sẽ sử dụng trong ứng dụng của mình ngay bây giờ. Sau đó, chúng tôi sẽ xóa mảng này hoặc chú thích mã.

ghi chú: [ { id: 1, noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse Repudiandae nisi velit Provident corporis commododi eius fugiat reiciendis non aliquam." }, { id: 2, noteContent: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea vereprehenderit aspernatur mollitia saepe cupiditate pariatur natus accusantium esse Repudiandae nisi velit Provident corporis commodi eius fugiat reiciendis non aliquam." " }

Đang tìm nạp dữ liệu​

Bây giờ chúng ta đã có mảng của mình. Hãy thêm những dữ liệu này vào ứng dụng của chúng tôi. Vì chúng tôi hiểu Vue.js nên tất cả những gì chúng tôi sẽ làm là lặp qua mảng này bằng lệnh v-for, sử dụng dữ liệu lấy từ mảng rồi đặt nội dung ở bất cứ nơi nào chúng tôi muốn nó xuất hiện.

    {{ noteContent.note }}

Chúng tôi cũng đã thêm trình xử lý sự kiện nhấp vào nút xóa để nó tải hàm này bất cứ khi nào được tạo.

Thêm ghi chú​

Hãy xem cách thêm ghi chú vào ứng dụng của chúng ta bằng cách sử dụng trường nhập. Chúng ta sẽ sử dụng phương thức unShift() của JavaScript, phương thức này sẽ thêm một hoặc nhiều phần tử vào đầu mảng và trả về độ dài mới của mảng.

Điều đầu tiên cần làm là thêm trình xử lý sự kiện nhấp vào nút.

Sau đó, tiến hành tạo phương thức này trong vùng tập lệnh.

phương thức: { addNote() { let newNote = { id: this.notes.length + 1, note: this.newNoteContent }; this.notes.unshift(newNote); this.newNoteContent = ""; }}

Trong đoạn mã trên, chúng ta đã tạo một đối tượng cho ghi chú mới, bao gồm ID và chính ghi chú đó, sau đó chúng ta đã thêm newNote này vào mảng notes thông qua phương thức unShift().

Xóa ghi chú​

Cuối cùng, trước khi tiến hành sử dụng Firebase trong ứng dụng của mình, hãy cùng xem cách xóa ghi chú. Đầu tiên là thêm trình lắng nghe sự kiện vào biểu tượng xóa:

Sau đó, chúng ta sẽ tạo một phương thức:

deleteNote(noteContent) { let noteId = noteContent.id; //thực hiện thao tác này để lấy id thực của các ghi chú let index = this.notes.findIndex(noteContent => noteContent.id === noteId); this.notes.splice(index, 1);}

Trong mã này, chúng ta lấy id của ghi chú cụ thể mà chúng ta muốn xóa thông qua tham số được truyền vào phương thức sự kiện nhấp đã được tạo. Sau đó, chúng tôi sử dụng phương thức splice để chỉ xóa mục đó khỏi mảng.

Firebase​

Bây giờ hai chức năng này đã hoạt động, chúng ta hãy xem cách chúng ta có thể sử dụng Firebase trong Quasar để thêm, lấy và xóa dữ liệu. Firebase cũng sẽ cung cấp cho chúng ta khả năng đồng bộ hóa dữ liệu theo thời gian thực trên tất cả các thiết bị. Dữ liệu trong ứng dụng của chúng ta sẽ không nhiều, vì nó chỉ dành cho mục đích học tập. Trong trường hợp bạn đang nghĩ đến một thứ gì đó lớn lao mà hàng triệu người sẽ sử dụng, hãy xem trang giá.

Firebase là phần mềm phát triển ứng dụng của Google cho phép chúng tôi phát triển các ứng dụng iOS, Android và web.

Thiết lập Cloud Firestore​

Để bắt đầu, hãy truy cập firebase.google.com và nhấp vào liên kết "Đi đến bảng điều khiển" ở góc trên bên phải màn hình hoặc nút "Bắt đầu" (đảm bảo rằng bạn đăng nhập bằng tài khoản Google của mình).



Điều này sẽ đưa chúng ta đến khu vực bảng điều khiển, nơi chúng ta có thể tạo một dự án. Nhấp vào nút "Thêm dự án" và một biểu mẫu để tạo dự án của bạn sẽ xuất hiện. Câu hỏi đầu tiên sẽ yêu cầu tên dự án, có thể là bất kỳ tên nào; đối với bài viết này, chúng tôi sẽ gọi là "notesApp". Chúng ta cũng hãy tắt Google Analytics vì ứng dụng của chúng ta là một ứng dụng nhỏ.



Nhấp vào nút “Tạo dự án” (có thể mất vài giây, vì vậy hãy kiên nhẫn). Sau đó, nhấp vào “Tiếp tục” để chúng ta có thể tạo Firestore đám mây của mình.

Trong thanh bên, nhấp vào “Firestore”, rồi nhấp vào “Tạo cơ sở dữ liệu”.



Điều này sẽ mở ra một hộp thoại. Nhấp vào "Bắt đầu ở chế độ thử nghiệm", điều này sẽ giúp chúng ta dễ dàng bắt đầu làm việc với cơ sở dữ liệu của mình. Hãy lưu ý rằng, “Các quy tắc bảo mật mặc định cho chế độ thử nghiệm cho phép bất kỳ ai có tham chiếu cơ sở dữ liệu của bạn xem, chỉnh sửa và xóa tất cả dữ liệu trong cơ sở dữ liệu của bạn trong 30 ngày tới”.



Nhấp vào “Tiếp theo”, giữ nguyên vị trí Cloud Firestore mặc định, sau đó nhấp vào nút “Bật”. Sau khi tải xong, cơ sở dữ liệu của chúng ta sẽ hoàn toàn sẵn sàng để sử dụng.



Lưu ý: Cơ sở dữ liệu Firebase bao gồm các bộ sưu tập và các bộ sưu tập này chứa các tài liệu và mỗi tài liệu là một đối tượng JavaScript có các trường trong đó.

Chúng ta hãy bắt đầu bằng cách tạo một bộ sưu tập mới cho các ghi chú của mình.

Để tạo một bộ sưu tập, hãy nhấp vào "Bắt đầu bộ sưu tập". Một hộp thoại sẽ bật lên để bạn nhập ID bộ sưu tập — nghĩa là tên. Sau đó, nhấp vào nút “Tiếp theo”.



Bây giờ bạn có thể bắt đầu tạo tài liệu và trường cho từng ghi chú. Tự động tạo ID của tài liệu để đảm bảo rằng nó là duy nhất bằng cách nhấp vào "Tự động tạo ID" bên cạnh trường tài liệu.



Nhấp vào “Lưu” và tiếp tục tạo thêm tài liệu. Cuối cùng, cơ sở dữ liệu của tôi trông như thế này:



Bây giờ chúng ta đã hoàn tất, hãy cùng xem cách kết nối Firebase với ứng dụng của mình. Vào “Tổng quan dự án” trong thanh bên và thêm mục này vào ứng dụng web bằng cách nhấp vào nút “Web”.



Một biểu mẫu sẽ xuất hiện để chúng ta "Thêm Firebase" vào ứng dụng web của mình. Chúng ta sẽ đặt cùng một tên, "notesApp" và đăng ký ứng dụng (không chọn trường "Lưu trữ Firebase").

Sau khi tải xong, nó sẽ đưa ra một SDK để giúp chúng ta khởi tạo cơ sở dữ liệu trong ứng dụng. Chúng ta sẽ không thực hiện theo cách này, mặc dù chúng ta sẽ cần một số thông tin từ SDK đã tạo. Cách đúng để thực hiện việc này trong Quasar là nhập các mô-đun mà chúng ta cần và sử dụng tệp khởi động.

Vì vậy, hãy để tab đó mở và chúng ta hãy xem cách thêm SDK Firebase và khởi tạo Firebase trong ứng dụng Quasar của chúng ta.

Điều đầu tiên cần làm là cài đặt Firebase trong dự án của chúng ta bằng npm.

npm install --save firebase

Sau khi cài đặt hoàn tất, chúng ta sẽ khởi tạo kết nối của ứng dụng với Firebase bằng cách tạo tệp khởi động để có thể truy cập ngay vào cơ sở dữ liệu khi ứng dụng đã sẵn sàng.

Tệp khởi động giúp chúng ta chạy mã trước khi thành phần gốc Vue.js của ứng dụng được khởi tạo. Tài liệu của Quasar có thêm thông tin về tệp khởi động và thời điểm sử dụng tệp khởi động.

Để tạo tệp khởi động, chúng ta sẽ chạy lệnh này trong CLI của mình:

quasar new boot firebase

Lưu ý: Bạn không cần sử dụng Firebase làm tên của tệp khởi động.

Sau khi thực hiện xong, bạn sẽ thấy rằng tệp hiện đã được tạo trong thư mục boot. Để sử dụng tệp khởi động mới được tạo này, chúng ta cần thêm tệp này vào mảng khởi động của tệp quasar.config.js.



Chúng ta hãy quay lại tệp khởi động mới tạo. Xóa toàn bộ mã ở đó vì chúng ta không cần chúng. Chúng ta sẽ nhập các mô-đun cần thiết và định cấu hình cơ sở dữ liệu của mình. Dán mã sau vào:

import firebase from "firebase/app";import "firebase/firestore";const firebaseConfig = { // ...};// Khởi tạo Firebasefirebase.initializeApp(firebaseConfig);

Ở đây, chúng ta đã nhập Firebase và Firestore, và chúng ta đã khởi tạo Firebase, sử dụng cấu hình mà chúng ta sẽ thêm vào ngay bây giờ.

Tại thời điểm này, chúng ta gần như đã hoàn tất việc cấu hình ứng dụng của mình. Chúng ta cần thêm cấu hình duy nhất của mình, được cung cấp trong SDK được tạo khi chúng ta thêm Firebase vào ứng dụng web của mình. Chỉ sao chép cấu hình và dán vào mảng của chúng ta.



Bây giờ chúng ta sẽ có thứ gì đó như thế này:

import firebase from "firebase/app";import "firebase/firestore";const firebaseConfig = { apiKey: "AIzaSyDRcq5PXJSi5c5C8rl6Q6nudIJqTFaxXeA", authDomain: "notesapp-ffd7c.firebaseapp.com", projectId: "notesapp-ffd7c", storageBucket: "notesapp-ffd7c.appspot.com", messagingSenderId: "18944010047", appId: "1:18944010047:web:ddfb46fc6bc8bba375158a"};// Khởi tạo Firebasefirebase.initializeApp(firebaseConfig);

Một điều cuối cùng, vì chúng ta đang sử dụng Firestore, là chúng ta sẽ cần khởi tạo Firestore đám mây bằng cách thêm mã này vào tệp khởi động của mình (dòng cuối cùng):

let db = firebase.firestore();export default db;

db này sẽ cho chúng ta quyền truy cập vào cơ sở dữ liệu Firestore của mình. Chúng ta cũng đã xuất nó để có thể sử dụng ở bất kỳ đâu trong ứng dụng của mình.

Lúc này, bạn có thể vẫn còn hơi bối rối, nhưng nếu bạn đã làm theo hướng dẫn này, thì bạn sẽ khởi tạo Firebase đúng cách cho ứng dụng của mình. Bạn có thể đọc thêm về cách thêm Firebase vào dự án JavaScript của mình trong tài liệu.

Lấy dữ liệu từ Firebase​

Nếu bạn đã làm theo hướng dẫn cho đến nay, mọi thứ sẽ hoạt động tốt khi bạn khởi chạy ứng dụng của mình. Bây giờ, hãy lấy các ghi chú được tạo trong cơ sở dữ liệu và hiển thị chúng trong ứng dụng của chúng ta.

Đối với điều này, chúng ta sẽ sử dụng hook .onSnapshot, hook này sẽ được kích hoạt bất kỳ lúc nào dữ liệu trong bộ sưu tập của chúng ta thay đổi. Điều này sẽ cho chúng ta biết liệu một tài liệu đã được thêm, xóa hay cập nhật. Đối với hướng dẫn này, chúng ta sẽ chỉ xử lý việc thêm và xóa tài liệu. Sử dụng các hook như thế này giúp có thể đồng bộ hóa theo thời gian thực trên các thiết bị. Hãy bắt đầu nào.

Điều đầu tiên cần làm là chúng ta truy cập vào cơ sở dữ liệu bằng cách nhập nó vào trang chỉ mục của ứng dụng.

import db from 'src/boot/firebase';

Sau đó, tạo một hook được gắn kết, vì chúng ta muốn lấy dữ liệu ngay sau khi ứng dụng đã tải.

mounted() { db.collection("notes").onSnapshot(snapshot => { snapshot.docChanges().forEach(change => { let noteChange = change.doc.data(); if (change.type === "added") { console.log("Ghi chú mới: ", noteChange); this.notes.unshift(noteChange); } if (change.type === "modified") { console.log("Ghi chú đã sửa đổi: ", noteChange); } if (change.type === "removed") { console.log("Removed note: ", noteChange); } }); });}

Trong đoạn mã trên, chúng ta chỉ cần lấy bộ sưu tập notes của mình và mỗi khi có thay đổi trong bộ sưu tập, phương thức onSnapShot sẽ được kích hoạt, phương thức này sẽ trả về snapShot của tất cả dữ liệu của chúng ta. Tất cả dữ liệu này sẽ là các đối tượng có thuộc tính type. Các thuộc tính type này sẽ cho chúng ta biết loại thay đổi đã xảy ra và cho phép chúng ta truy cập vào dữ liệu đã được thêm, sửa đổi hoặc xóa.

Điều này có vẻ khó hiểu, nhưng bạn sẽ hiểu những gì chúng ta đang làm khi đọc tiếp.

Nếu bạn lưu mã của mình và kiểm tra môi trường bảng điều khiển, bạn sẽ thấy rằng mỗi ghi chú đã được đăng xuất. Bây giờ chúng ta có thể đẩy các đối tượng này vào mảng notes mà chúng ta đã tạo trước đó để có thể hiển thị dữ liệu theo thời gian thực trong ứng dụng của mình.

Điều đầu tiên cần làm là xóa hoặc bình luận các đối tượng trong mảng notes để chúng ta có thứ gì đó như thế này:

notes: []

Sau đó, truyền các đối tượng vào mảng này:

this.notes.unshift(noteChange);

Mã của bạn bây giờ sẽ trông như thế này:

if (change.type === "added") { this.notes.unshift(noteChange);}

Lúc này, nếu bạn tải ứng dụng, bạn sẽ thấy rằng mình đã lấy dữ liệu thành công từ Firebase.

Thêm dữ liệu vào Firebase​

Hãy cùng xem cách thêm ghi chú vào bộ sưu tập ghi chú của chúng ta trong ứng dụng này. Tại thời điểm này, nếu bạn thử sử dụng trường nhập để thêm ghi chú, nó sẽ hoạt động nhưng ghi chú sẽ biến mất khi bạn làm mới trang vì nó không được lưu trữ trong bất kỳ cơ sở dữ liệu nào.

Để thực hiện việc này với Firebase, tất cả những gì cần làm là cập nhật phương thức addNote() mà chúng ta đã tạo trước đó.

addNote() { let newNote = { // id: this.notes.length + 1, note: this.newNoteContent }; // this.notes.unshift(newNote); db.collection("notes") .add(newNote) .then(docRef => { console.log("Tài liệu được viết bằng ID: ", docRef.id); }) .catch(error => { console.error("Lỗi khi thêm tài liệu: ", error); }); this.newNoteContent = "";},

Điều đầu tiên chúng ta làm ở đây là xóa ID được sử dụng khi chúng ta sử dụng mảng trước đó, vì bây giờ chúng ta sẽ tự động tạo ID từ Firebase. Chúng ta cũng xóa phương thức unshift(); phương thức này không còn hữu ích nữa vì dữ liệu đang được lấy cho ứng dụng của chúng ta sau khi có bản cập nhật bằng hook snapShot.

Nếu chúng ta xem mã chịu trách nhiệm cập nhật db của Firestore, tất cả những gì chúng ta truyền cho bộ sưu tập (notes) là đối tượng mới (newNote) và hàm này sẽ tự động tạo ID cho từng tài liệu của chúng ta. Tài liệu có thêm thông tin về thêm dữ liệu vào Firebase.

Xóa dữ liệu khỏi Firebase​

Chúng ta gần hoàn thành ứng dụng của mình, nhưng chúng ta cần có khả năng xóa dữ liệu trong ứng dụng của mình khỏi Firebase. Hiện tại, hàm delete hoạt động, nhưng nếu bạn tải lại ứng dụng, dữ liệu đã xóa sẽ xuất hiện lại.

Như đã làm trước đây, chúng ta sẽ xóa dữ liệu (hoặc tài liệu) này khỏi Firebase bằng ID duy nhất do Firebase tạo ra.

Hiện tại, chúng ta không có quyền truy cập vào ID. Để truy cập, chúng ta sẽ thêm ID đó vào đối tượng noteChange:

noteChange.id = change.doc.id;

Sau khi thiết lập xong, việc xóa dữ liệu sẽ dễ dàng như việc thêm dữ liệu. Tất cả những gì chúng ta phải làm là đi đến phương thức deleteNote(noteContent) mà chúng ta đã tạo trước đó, xóa mã trước đó và sử dụng mã này:

deleteNote(noteContent) { let noteId = noteContent.id; db.collection("notes") .doc(noteId) .delete() .then(() => { console.log("Đã xóa tài liệu thành công!"); }) .catch(error => { console.error("Lỗi khi xóa tài liệu: ", error); });}

Điều này kiểm tra bộ sưu tập ghi chú để tìm tài liệu có ID đã chỉ định rồi xóa tài liệu đó. Nhưng nếu chúng ta lưu mã ngay bây giờ và nhấp vào biểu tượng xóa, dữ liệu sẽ bị xóa nhưng sẽ không rời khỏi giao diện của ứng dụng trừ khi chúng ta làm mới mã, nghĩa là móc snapshot cần được cập nhật. Đi đến hook snapshot cho removed và thêm mã này:

if (change.type === "removed") { console.log("Removed note: ", noteChange); let index = this.notes.findIndex( noteContent => noteContent.id === noteChange.id ); this.notes.splice(index, 1);}

Điều này chỉ đơn giản là lấy ID của bài đăng mà chúng tôi đã xóa và xóa nó khỏi giao diện.

Sau khi hoàn tất, chúng tôi đã xây dựng một ứng dụng với Quasar hoạt động với Firebase. Một lợi thế lớn của Quasar là nó cho phép chúng tôi triển khai đồng thời dự án của mình dưới dạng trang web, ứng dụng di động hoặc ứng dụng Electron.

Để triển khai cho iOS, Cordova cần được cài đặt trên máy cục bộ của chúng tôi. MacBook là lựa chọn tốt nhất. Điều hướng đến CLI của bạn và cài đặt Cordova trên toàn cầu:

$ npm install - g cordova

Để cài đặt trên Windows, bạn sẽ sử dụng Electron. Tài liệu giải thích chính xác cách thực hiện việc này.

Kết luận​

Trong hướng dẫn này, chúng tôi đã xây dựng một ứng dụng ghi chú bằng Quasar và Firebase. Bằng cách làm theo hướng dẫn này, giờ đây bạn đã có thể cải thiện và thêm các tính năng và chức năng của riêng mình. Sau đây là một số ý tưởng để bạn bắt đầu:

• Triển khai chức năng để sửa đổi ghi chú.
• Thêm ngày để bạn có thể sắp xếp dữ liệu theo ngày.
• Tạo kiểu cho ứng dụng và làm cho ứng dụng sáng tạo hơn.
• Thêm hình ảnh.
• Nhiều hơn nữa.

Tài nguyên hữu ích​

• Tài liệu về Quasar
• Tài liệu về Firebase

Đọc thêm​

• Cách tăng cường quy trình thiết kế của bạn bằng Setapp
• Hoạt ảnh CSS có thể cấu hình trong Vue với AnimXYZ
• Kỷ nguyên của nền tảng nguyên thủy cuối cùng cũng đã đến
• Tạo biểu mẫu nhiều bước hiệu quả để có trải nghiệm người dùng tốt hơn