Trong bài viết Giới thiệu về Firebase, tổng quan về Firebase đã được cung cấp. Bạn đã được hướng dẫn cách thiết lập tài khoản Firebase và tạo dự án Firebase hoàn toàn miễn phí! Trong bài viết này, bạn xây dựng dựa trên những gì bạn đã học bằng cách thiết lập cơ sở dữ liệu dựa trên Đám mây NoSQL và sau đó tạo một trang web rất đơn giản để thêm các mục vào đó. Cơ sở dữ liệu sẽ chỉ lưu trữ các cách chơi chữ cùng với một danh mục và định danh. Hình 1 cho thấy trang web sẽ được sử dụng để thêm các mục.
Hình 1: Một trang web ghi vào cơ sở dữ liệu Firestore NoSQL.
Thiết lập Cơ sở dữ liệu Cloud Firestore của bạn trong Firebase
Để bắt đầu, hãy quay lại Firebase và tạo một dự án mới. Bạn có thể truy cập Firebase bằng cách truy cập https://console.firebase.google.com/. Trang này sẽ cung cấp cho bạn tùy chọn để thêm một dự án mới, như thể hiện trong Hình 2. Bạn có thể tìm thêm thông tin về cách tạo dự án trong bài viết trước.
Hình 2: Thêm một dự án Firebase mới.
Tôi đã đặt tên cho dự án của mình là "Dự án chơi chữ". Khi bạn đã tạo một dự án mới, bạn sẽ được đưa đến Bảng điều khiển Firebase như thể hiện trong Hình 3.
Hình 3: Bảng điều khiển Firebase
Trong Bảng điều khiển, bạn có thể tạo cơ sở dữ liệu mà trang web sẽ sử dụng. Bước đầu tiên để thực hiện việc này là nhấp vào tùy chọn Cơ sở dữ liệu trên menu điều hướng bên trái. Thao tác này sẽ hiển thị một màn hình như trong Hình 4 cho phép bạn tạo Cloud Firestore, đây sẽ là cơ sở dữ liệu NoSQL của bạn.
Hình 4: Màn hình bắt đầu để tạo Cloud Firestore
Nhấp vào nút Tạo cơ sở dữ liệu sẽ bắt đầu quá trình xem qua các bước để tạo cơ sở dữ liệu. Quyết định đầu tiên cần được thực hiện, như thể hiện trong Hình 5, là liệu cơ sở dữ liệu sẽ được khởi động ở chế độ sản xuất hay chế độ thử nghiệm. Để giữ cho bài viết này đơn giản và tập trung vào việc thêm dữ liệu, chế độ kiểm tra sẽ được chọn. Khi cơ sở dữ liệu sẵn sàng sản xuất được tạo, bạn sẽ muốn tăng cường bảo mật hơn cho nó so với những gì được cung cấp trong chế độ thử nghiệm.
Hình 5: Chọn chế độ cho cơ sở dữ liệu Firestore của bạn
Với chế độ được chọn, bước tiếp theo là xác định vị trí mà bạn muốn tạo cơ sở dữ liệu. Bạn đang tạo cơ sở dữ liệu của mình trên Đám mây, vì vậy bạn có thể lựa chọn vị trí cho máy chủ nào bạn muốn sử dụng. Bằng cách nhấp vào menu thả xuống vị trí Cloud Firestore được hiển thị trong Hình 6, bạn sẽ có thể chọn một vị trí nhiều vùng hoặc khu vực. Tôi đề nghị rằng nếu bạn ở Bắc Mỹ, bạn chọn vị trí nam5 (trung tâm chúng tôi). Nếu bạn ở nơi khác, hãy chọn khu vực gần vị trí của bạn nhất.
Hình 6: Chọn một vùng cho cơ sở dữ liệu Firestore của bạn
Với khu vực của bạn được chọn, hãy nhấp vào nút Xong và Firebase sẽ cung cấp cơ sở dữ liệu Cloud Firestore của bạn. Sau khi cấp phép xong, bạn sẽ sẵn sàng đến trang Bảng điều khiển cơ sở dữ liệu như thể hiện trong Hình 7, nơi bạn có thể bắt đầu sử dụng cơ sở dữ liệu của mình trực tuyến.
Hình 7: Bảng điều khiển Cơ sở dữ liệu trong Firebase
Bộ sưu tập và Tài liệu trong NoSQL
Nếu bạn đã theo dõi, thì tại thời điểm này, bạn đã tạo cơ sở dữ liệu dựa trên Đám mây NoSQL trong Firestore đám mây của Firebase. Việc đi vào chi tiết của NoSQL nằm ngoài phạm vi của bài viết này, nhưng tôi sẽ cung cấp điểm nổi bật về những gì bạn cần biết để thực hiện việc bổ sung dữ liệu mẫu đã được hứa hẹn trong bài viết này.
Cơ sở dữ liệu NoSQL được tạo thành từ bộ sưu tập chứa tài liệu . Về cơ bản, một tài liệu chứa các trường mà bạn định lưu trữ. Ví dụ, trong bài viết này, một tập hợp các cách chơi chữ đang được tạo ra. Bộ sưu tập Puns sẽ chứa các tài liệu. Mỗi tài liệu sẽ là một cách chơi chữ khác nhau.
Trong Firebase, bạn có thể nhấp vào liên kết “+ Bắt đầu bộ sưu tập” được hiển thị trong Hình 7 để mở hộp thoại cho phép bạn tạo bộ sưu tập Puns. Bạn sẽ được nhắc như trong Hình 8 để thêm ID bộ sưu tập. Trong trường hợp này, chúng tôi sẽ gọi bộ sưu tập là "Puns".
Hình 8: Tạo bộ sưu tập Cloud Firestore
Sau khi bộ sưu tập được tạo, bạn sẽ có thể tạo tài liệu trong bộ sưu tập như thể hiện trong Hình 9. Một lần nữa, về cơ bản, một tài liệu là một bản ghi trong cơ sở dữ liệu NoSQL của bạn. Bởi vì đây là NoSQL, không có quy tắc nghiêm ngặt nào buộc bạn phải đảm bảo rằng mọi trường đều nằm trong mọi tài liệu (bản ghi) hoặc mọi tài liệu trong một bộ sưu tập đều khớp với nhau. Việc này còn lại để bạn làm.
Hình 9: Thêm tài liệu vào bộ sưu tập
Mỗi tài liệu bạn tạo sẽ cần phải có ID tài liệu. Bạn có thể nhập ID này hoặc bạn có thể chọn để trống và một ID sẽ được tạo tự động. Để giữ cho mọi thứ dễ đọc hơn trong ví dụ bằng cách chơi chữ, tôi sẽ cung cấp cho tài liệu đầu tiên một ID là Pun0001.
Khi sử dụng bảng điều khiển để thêm tài liệu, đối với mỗi tài liệu, bạn không chỉ phải chỉ định các giá trị dữ liệu mà còn phải chỉ định tên của các trường và kiểu. Một menu thả xuống cho phép bạn chọn kiểu dữ liệu bạn muốn thêm.
Trong hình 10, hai trường chuỗi đã được thêm vào sẽ được sử dụng cho ví dụ Pun. Đây là một Danh mục và văn bản cho cách chơi chữ ( PunText ).
Hình 10: Thiết lập tài liệu chơi chữ.
Khi nhấp vào nút Lưu trên hộp thoại trong Hình 10, tài liệu (về cơ bản là một bản ghi) sẽ được tạo như trong Hình 11. Tại thời điểm này, một cơ sở dữ liệu Cloud Firestore đã được tạo trên Đám mây và một bản ghi ( tài liệu) đã được thêm vào! Chính xác hơn, một bộ sưu tập có tên “Puns” đã được tạo ra có tài liệu tên là “Pun0001” chứa các trường có tên là Category và PunText.
Hình 11: Cơ sở dữ liệu Cloud Firestore với một tài liệu đã được thêm vào!
Lưu ý rằng tại thời điểm này, nếu bạn muốn thêm các bản ghi bổ sung bằng bảng điều khiển, bạn sẽ nhấp vào liên kết “+ Thêm tài liệu” được hiển thị ở giữa Hình 11. Sau đó, bạn có thể thêm các cách chơi chữ bổ sung với ID, danh mục và văn bản chơi chữ. Bạn nên cẩn thận để đảm bảo rằng mỗi lần bạn thêm một cách chơi chữ mới, bạn sẽ sử dụng các tên trường giống nhau.
Mặc dù bạn có thể nghĩ rằng thật tẻ nhạt khi phải nhập lại tên trường, nhưng điều này là do tính linh hoạt của NoSQL. Một cách để giải quyết vấn đề này là tạo một ứng dụng web sẽ thực hiện phần công việc đó cho bạn!
Lưu ý:Bạn sẽ nhận thấy trong Hình 11 rằng có một số nơi bạn có thể bắt đầu các bộ sưu tập mới. Việc đào sâu vào cấu trúc của bộ sưu tập và tài liệu NoSQL nằm ngoài phạm vi của bài viết này.
Tạo ứng dụng web để truy cập Cloud Firestore
Khi thiết lập Cloud Firestore, bạn hiện có thể thêm dữ liệu từ bên ngoài trang web Firebase. Để thực hiện việc này, trước tiên bạn cần lấy một số thông tin từ Firebase để cho phép bạn liên kết ứng dụng web của mình với dự án Firebase mà bạn đã tạo.
Bắt đầu bằng cách nhấp vào liên kết Tổng quan dự án ở phần trên bên trái của menu điều hướng. Điều này sẽ đưa bạn đến trang tổng quan cho dự án của bạn như thể hiện trong Hình 12.
Hình 12: Trang tổng quan về Dự án Firebase
Trên trang này, bạn sẽ thấy có các biểu tượng cho bốn loại dự án có thể được chọn. Chúng dành cho iOS, Android, web và Unity. Nhấp vào biểu tượng để cho biết một ứng dụng web đang được thực hiện. Thao tác này sẽ hiển thị hộp thoại trong Hình 13 yêu cầu đặt tên cho ứng dụng. Tên đang được tạo được sử dụng để phối hợp ứng dụng web bạn tạo với dự án Firebase và các tính năng trong dự án Firebase. Đối với bản trình diễn này, tôi đang sử dụng tên “Ứng dụng web Punny của tôi” và nhấp vào nút Đăng ký ứng dụng.
Sau khi nhấp vào, bạn sẽ thấy một màn hình bao gồm mã HTML mà bạn sẽ thêm vào ứng dụng Web của mình. Mã HTML này là thứ liên kết Firebase với ứng dụng của bạn.
Hình 13: Mã Firebase cho ứng dụng web.
Bạn sẽ muốn sao chép mã này để dán vào trang HTML mà chúng ta sẽ tạo sau trong các bước tiếp theo của bài viết này. Nếu bạn rời khỏi trang được hiển thị trong Hình 13, bạn luôn có thể quay lại mã ứng dụng này từ bảng điều khiển Firebase. Chỉ cần nhấp vào bánh răng bên cạnh liên kết Tổng quan về dự án ở góc trên bên phải và chọn Cài đặt dự án. Trang kết quả sẽ bao gồm thông tin về dự án của bạn
Tạo Trang web / Ứng dụng để truy cập Firestore
Với mọi thứ được thiết lập ở phía Firebase, đã đến lúc tạo trang web cho phép thêm dữ liệu. Liệt kê 1 chứa HTML cơ bản để hiển thị trang được hiển thị trong Hình 1 trước đó.
Liệt kê 1: HTML cơ bản cho Trang Punny.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<script src="./pun.js"></script>
</body>
</html>
Liệt kê 1 là HTML cơ bản. Ba trường đang được thiết lập để cho phép người dùng nhập dữ liệu. Mỗi người được cấp một ID cần thiết để liên kết dữ liệu đã nhập với tài liệu sẽ được thêm vào Firestore. một nút cũng được bao gồm với một sự kiện để lưu trữ dữ liệu. Hiện tại, chức năng đó vẫn chưa được viết; đó là mục tiêu của bài viết này! Tôi cũng đã bao gồm một liên kết đến một tệp JavaScript bên ngoài có tên là pun.js. Ban đầu, tệp đó trống, nhưng tệp đó sẽ sớm được thay đổi!
Trong Liệt kê 1, bạn sẽ muốn dán mã đã được sao chép từ Firebase trước đó. Đoạn mã được hiển thị trong Hình 13 nên được dán gần cuối thẻ body của bạn, trong trường hợp này là ngay trước khi bao gồm tập lệnh chơi chữ. Tôi đã dán mã cho ứng dụng chơi chữ của mình vào Liệt kê 2.
Liệt kê 2: Trang html có thêm mã Firestore.
<html>
<head>
<title>Punny or Not</title>
</head>
<body>
<div class="main-form">
<h1 id="punTimes">Punny or Not!</h1>
Pun Number/ID: <input type="text" placeholder="Pun ID: " id="PunID"><br /><br />
Pun Category: <input type="text" placeholder="Category: " id="Category"><br /><br />
Pun Text: <input type="text" placeholder="Enter Text here..." id="PunText"> <br /><br />
<br /><br />
<button id="saveButton" onclick="storeData()" >Submit</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAJUQUXm_oYXAo2M1yukGT8lnTKeuMd53o",
authDomain: "the-pun-project.firebaseapp.com",
databaseURL: "https://the-pun-project.firebaseio.com",
projectId: "the-pun-project",
storageBucket: "the-pun-project.appspot.com",
messagingSenderId: "354041199852",
appId: "1:354041199852:web:4f9a613485174688f0f9c9",
measurementId: "G-4672MVCRK2"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="./pun.js"></script>
</body>
</html>
Với việc bổ sung tập lệnh vào HTML, bạn đã kết nối ứng dụng của mình để truy cập Firebase. Tuy nhiên, bạn cần phải thêm một dòng mã nữa. Mặc dù mã được tạo sẽ cung cấp các kết nối đến Firebase, nhưng bạn cần thêm một liên kết bổ sung để lấy mã sẽ truy cập cơ sở dữ liệu Cloud Firestore trong Firebase. Bạn sẽ muốn thêm dòng nguồn tập lệnh sau vào danh sách:
Điều này có thể được thêm vào ngay sau cuộc gọi tới:
Bước tiếp theo là thêm logic sẽ liên kết các trường đã nhập từ người dùng với các trường sẽ được thêm vào cơ sở dữ liệu Firestore. Điều này sẽ được thực hiện trong tệp chơi chữ.js để giữ cho mã sạch.
Trước tiên, quá trình này là tạo một biến cơ sở dữ liệu sẽ được liên kết với cơ sở dữ liệu Firebase Cloud Firestore. Sau đó, các biến sẽ cần được tạo để có thể lấp đầy các giá trị mà người dùng đã nhập trên trang của chúng tôi. Điều này sẽ được thực hiện với các lệnh gọi document.getElementById () tiêu chuẩn. Cuối cùng, biến lấp lánh từ trang web cần được thêm vào cơ sở dữ liệu Cloud Firestore dưới dạng các trường trong tài liệu trong bộ sưu tập Puns. Liệt kê 3 cho thấy JavaScript có thể thực hiện tất cả những điều này.
Liệt kê 3: Tệp JavaScript pun.js
var db = firebase.firestore();
function storeData() {
var inputPun = document.getElementById("PunID").value;
var inputCategory = document.getElementById("Category").value;
var inputText = document.getElementById("PunText").value;
db.collection("Puns").doc(inputPun).set({
Category: inputCategory,
PunText: inputText
})
.then(function() {
console.log("Doc successful");
})
.catch(function(error) {
console.error("Error writing doc", error);
});
}
Lưu ý rằng trong Liệt kê 3, cơ sở dữ liệu được tạo bằng biến có tên là db. Biến này sau đó được sử dụng để tạo tài liệu mới (bản ghi) bằng cách chỉ định tên của tập hợp được gọi là Puns trong quy trình được hiển thị trong Hình 8. Tiếp theo là tên tài liệu, trong trường hợp này là ID chơi chữ của chúng tôi được thu thập từ người dùng và đưa vào biến inputPun. Trong tài liệu, hai trường đang được thêm vào, được thực hiện trong tập hợp. Để thêm các trường, tên của trường được liệt kê, sau đó là dấu hai chấm và phân tích giá trị chuỗi sẽ được thêm vào. Trong trường hợp này, inputCategory đang được thêm vào trường Category và inputText đang được thêm vào trường PunText.
Danh sách này cũng bao gồm một số logic kiểm tra và lỗi để ghi thông báo vào bảng điều khiển. Nếu bạn mở bảng điều khiển dành cho nhà phát triển của trình duyệt, thì bạn sẽ thấy thông báo “Tài liệu thành công” được hiển thị khi một tài liệu được thêm vào Cloud Firestore của bạn như thể hiện trong Hình 14.
Hình 14: Đã thêm tài liệu thành công.
Có thể xác nhận rằng tài liệu đã được thêm bằng cách quay lại dự án trong bảng điều khiển Firebase và xem cơ sở dữ liệu (thực hiện bằng cách nhấp vào Cơ sở dữ liệu trên menu điều hướng bên trái). Hình 15 cho thấy rằng việc bổ sung cách chơi chữ mới đã thành công.
Hình 15: Bộ sưu tập Puns với tài liệu pun002 mới
Kết thúc
Rất nhiều điều đã được đề cập trong bài viết này về cách thêm tài liệu vào cơ sở dữ liệu Firebase Cloud Firestore NoSQL. Bạn đã học cách thực hiện việc này từ cả Bảng điều khiển và từ một ứng dụng web đơn giản. Đây chỉ là phần khởi động để cho thấy việc thêm có thể dễ dàng như thế nào. Phải nói rằng, chỉ thêm một bước trong hệ thống CRUD. Vẫn còn nhiều điều để học hỏi! Ồ, và nếu bạn thích chơi chữ, hãy xem cuốn sách của tôi, Punny or Not Book of Puns, có trên Amazon!
# # #
