Phát triển ứng dụng cơ sở dữ liệu thời gian thực với Firebase-phần 1


Realtime Database Firebase là 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 có tương tác cơ sở dữ liệu (CRUD) một cách nhanh chóng và ngay tức thời (Realtime).

Thực ra ta cũng nên bày vẽ dịch Realtime Database Firebase ra Cơ sơ dữ liệu thời gian thực firebase

hay cũng không nên dịch Cloud ra chữ nền tảng đám mây. Cứ để Cloud là được rồi.

CRUD: Là 4 thao tác không thể thiếu với mọi ứng dụng có tương tác Cơ Sở Dữ liệu. C (Create- thêm mới), R (Retrieve – truy vấn xem dữ liệu), U (Update- cập nhật dữ liệu), D (Delete- xóa dữ liệu)

Khi có sự thay đổi dữ liệu trên Database Firebase thì ngay lập tức giao diện của bất kỳ thiết bị nào có sử dụng phần mềm này sẽ tự động cập nhật (gọi là Realtime):

Dữ liệu trên Database Firebase có định dạng JSON kiểu Gson.

Trong bài này Tui sẽ hướng dẫn các bạn cách sử dụng Firebase Database trong Android Studio như thế nào, và làm một ví dụ về hiển thị danh sách Danh bạ đẩy từ Firebase Server xuống.

Các bạn làm theo các bước hướng dẫn dưới đây (Tui hướng dẫn cho cả người chưa biết gì về Android nên sẽ làm chi tiết từ bước tạo Project):

Khởi động Android Studio:

Click Chọn “Start a new Android Studio Project”, lúc này cửa sổ yêu cầu tạo tên Project sẽ hiển thị ra, ta Đặt tên Project là RealtimeDatabaseFirebase:

Mục Application Name: Đặt tên cho ứng dụng RealtimeDatabaseFirebase

Mục Company Domain: Đặt tên theo domain của bạn, không có thì đặt đại nhưng phải viết thường hết nha, ví dụ ở trên Tui đặt là: communityuni.com

bản chất nó là package để tổ chức sắp xếp lại hệ thống các lớp trong Project, cũng là cơ sở để Google quản lý ứng dụng trên Google Play, Developer nữa.

Mục Project Location: Nơi lưu trữ dữ án

Lưu ý đừng có tick vào C++ hay Kotlin, vì bài hướng dẫn này Tui trình bày về Java

Sau cung cấp đủ các thông tin rồi thì bấm Next để qua bước tiếp theo:

Ở màn hình này ta chọn API là 26 nha rồi bấm Next:

Chọn Empty Activity rồi bấm Next

Bước này là thiết lập màn hình chính chạy: Activity Name là lớp Java để xử lý nghiệp vụ, Layout Name là giao diện cho màn hình đó, để mặc định vậy bấm FINISH

Như là ta đã tạo xong được Project trong Android Studio. Bây giờ bước tiếp theo là kết nối với Firebase để sử dụng Realtime Database Firebase. Ta làm như sau:

Vào menu Tools/ chọn Firbase, lúc này cửa sổ hướng dẫn cách sử Firebase sẽ được hiển thị ra ở góc phải của cửa sổ Android Studio:

Trong màn hình trên, Firebase cung cấp rất nhiều công cụ, tuy nhiên ta chỉ quan tâm tới Realtime Database thôi nha. Vì vậy ta nhấn vào Realtime Database:

Lúc này ta thấy nút “Save and retrieve data” hiển thị ra như hình trên. Bấm vào nó nha. Trình trợ giúp cung cấp cho ta 8 bước thao tác (bao gốm kết nối và hướng dẫn lập trình, ta dùng 2 -3 bước là đủ rồi):

bước 1: Connect your app to firebase
bước 2: Add the Realtime Database to our app
bước 3: Configure Firebase Database Rules
bước 4: Write to your database
bước 5: Read from your database
bước 6: Optional: Configure ProGuard
bước 7: Prepare for Launch
Bước 8: Next steps

Ở bước 1, ta nhấn vào nút “Connect to Firebase”, lúc này hệ thống sẽ yêu cầu chúng ta đăng nhập bằng tài khoản gmail:

Ta lựa chọn tài khoản email, ở trên có sẵn 2 email của Tui: duythanhcse@gmail.com và thanhtd@uel.edu.vn, nếu tui muốn làm các email khác thì nhấn vào Use another account
Sau khi chọn Email để đăng nhập, Google yêu cầu ta cung cấp một số quyền hạn như sau:

Ta nhấn Allow để tiếp tục, lúc này màn hình Developer của Android sẽ hiển thị ra:

Ở trên có 2 server: Firebase và Google Cloud, ta chọn Firebase ta có màn hình kết quả sau:

Chú ý góc phải trên cùng có nút “GO TO CONSOLE”, nhấn vào đây để vào trang quản trị của Firebase.

Lưu ý, Sau khi ta có màn hình trên, thì lúc này ở Project Android Studio sẽ tự động xuất hiện màn hình xác nhận kết nối Firebase (nhớ để ý để quay lại Android Studio xác nhận):

Phía trên là tên ứng dụng “RealtimeDatabaseFirebase”, Tui đăng nhập với email thanhtd@uel.edu.vn, phần existing chưa có vì ta mới làm. mục Country chọn Vietnam
sau đó nhấn nút “Connect to Firebase” để tiến hành kết nối:

Ta thấy màn hình nhỏ nhỏ ở góc phải bên dưới không, nó đang báo là đang két nối ứng dụng tới Firebase (Connecting app to Firebase). Ta chờ nha, chờ đợi trong hạnh phúc:

Khi kết nối thành công, bước 1 sẽ được bật đèn xanh như hình trên, và ta nhận được thông báo là thành công ở cửa sổ nhỏ nhỏ ở góc phải bên dưới Android Studio.

Một số lưu ý khi kết nối thất bại:

Giả sử ta gặp báo lỗi như hình dưới đây:

Thì có khả năng lỗi do các vấn đề sau:

– Mỗi một email như vậy, Google cho tạo khoảng 10 tới 12 kết nối Project, nên nó có thể thất bại nếu bạn đã vượt qua, lúc này tạo 1 email mới cho lẹ. Vì muốn xóa thì cũng phải chờ 1 tháng sau Google mới thực sự xác nhận xóa.

– Nếu không phải lỗi do vượt quá số lượng kết nối,  thì tiếp tục bấm lại nút “Connect to Firebase” lần nữa, nó xuất hiện ra thông báo này thì chọn Sync:

Hi vọng là các bạn không bị lỗi.

OK ta tiếp tục bước 2 nha.

Khi bước 1 thành công thì ta nhận được thông báo “Connected” màu xanh ở trên thấy không? tiếp theo ta nhấn vào “Add the Realtime Database to Your app” để đưa đưa cơ sở dữ liệu thời gian thực vào ứng dụng của mình:

Ta nhấn “Accept Changes” để hệ thống tự động đưa các thư viện vào build.gradle nha, nếu thành công ta sẽ thấy màu xanh được bật lên như dưới đây:

Bây giờ ta đợi Android studio Refresh nha, sau đó nếu có thông báo lỗi như dưới này:

Thì ta chỉ việc xóa :15.0.0 đằng sau đi nha (Tui có thử 16.0.1 hay 16.0.3 thấy ổn):

ta sửa:

implementation ‘com.google.firebase:firebase-database:16.0.3:15.0.0’

thành:

implementation ‘com.google.firebase:firebase-database:16.0.3’

rồi bấm Try Again lại:

nếu còn lỗi: Thì phải kiểm tra xem, coi chừng Android của bạn chưa cài Google Play Service, các bước kiểm tra và tải như sau:

Vào Menu Tools/ chọn SDK Manager:

Chọn  thẻ SDK Tools/ Tick vào Google Play Services rồi bấm  Apply chờ nó tải và cài đặt vào:

Ta chờ nó cài đặt Google Play Service nha, chờ nó cài xong là OK. Nếu mà vẫn bị lỗi thì chắc do ăn ở, mua máy mới luôn đi cho rồi.

Ta quay lại Website Firebase khi kết nối thành công để kiểm tra cũng như thao tác nha:

Nhìn thấy nút “GO TO CONSOLE” ở góc phải bên trên không? bấm vào nó:

Ta sẽ được dẫn tới màn hình dưới đây:

Ta thấy ứng dụng tên là RealtimeDatabaseFirebase xuất hiện ở trên không? nhấn vào nó (lưu ý là ở Android Studio kết nối thành công thì ở đây mới tự động thấy nó nha):

Hệ thống yêu cầu cấu hình chia sẻ dữ liệu, Ta bấm vào “Choose data sharing settings” chỗ dòng cảnh báo bên trên đó:

Ta tick chọn hết, tick I Accept… rồi nhấn FINISH

ta chờ hệ thống chạy một chút xíu sẽ xong và ra màn hình dưới đây:

Ta nhìn vào danh sách bên trái màn hình Website — > nhấn vào Database:

Sau khi nhấn vào Database, bên nội dung ta Kéo xuống nhìn thấy nhóm Realtime Database thì chọn “Create Database”:

Hệ thống cung cấp 2 mode:

  • Start In locked mode, dùng để chạy thực sử (khi đã release sản phẩm)
  • Start in Test mode, dùng cho Debug lúc mà ta đang phát triển phần mềm

Do ta đang test thì chọn start intest mode, khi nào xong thì chỉnh lại Locked mode sau:

Chọn Start in test mode xong thì bấm nút Enable nha. cấu hình thành công ta sẽ có màn hình với thông báo dưới đây:

Nó thông báo về bảo mật đó, vì ta đang test mà. Muốn chỉnh lại trong thẻ RULE:

OK, bây giờ ta nhập dữ liệu cho Database Realtime này. Có 2 cách nhập:

  • nhập trực tiếp vào màn hình Web
  • nhập bằng cách import 1 file JSON theo đúng cấu trúc

thấy chữ null ở trên không bạn? ta click vào chữ null rồi dán dữ liệu JSON theo đúng cấu trúc là OK:

Hoặc ở góc phải trên cùng nhấn vào …:

Có chức năng Export JSON là xuất dữ liệu ra file JSON, Import JSON là nhập 1 file dữ liệu JSON ở ngoài và hệ thống Database Realtime của Firebase.

Đây là cấu trúc của file dữ liệu ở trên, bạn lấy mẫu này cho lẹ nha,  dùng chức năng IMPORT JSON để lưu:

Tải JSON mẫu của Tui ở đây (realtimedatabasefirebase-cf3ad-export.json): https://www.mediafire.com/file/b5gsxfqal952ne6/realtimedatabasefirebase-cf3ad-export.json/file

Chọn Browse-> trỏ tải file tải về được, nhấn IMPORT -> Có kết quả như của Tui.

Như vậy ta đã làm xong bước kết nối Firebase, tạo cơ sở dữ liệu

Bước cuối cùng là ta truy suất Cơ sở dữ liệu Realtime này lên giao diện, thay đổi và quan sát nó cập nhật giao diện tức thời (Realtime):

Quay lại Android Studio:

Chính sửa Màn hình giao diện (activity_main.xml):


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<ListView
android:id="@+id/lvContact"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

Màn hình chỉ có 1 ListView duy nhất, đặt Id là lvContact.

Trong bài này ta dùng hiển thị cơ bản thôi nha, bài sau Tui hướng dẫn nâng cao hơn.

Sau đó coding trong MainActivity.java như sau:


package com.communityuni.realtimedatabasefirebase;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

public class MainActivity extends AppCompatActivity {

ListView lvContact;
ArrayAdapter<String> adapter;
String TAG="FIREBASE";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
adapter=new ArrayAdapter<>(this,android.R.layout.simple_list_item_1);
lvContact=findViewById(R.id.lvContact);
lvContact.setAdapter(adapter);
//lấy đối tượng FirebaseDatabase
FirebaseDatabase database = FirebaseDatabase.getInstance();
//Kết nối tới node có tên là contacts (node này do ta định nghĩa trong CSDL Firebase)
DatabaseReference myRef = database.getReference("contacts");
//truy suất và lắng nghe sự thay đổi dữ liệu
myRef.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
adapter.clear();
//vòng lặp để lấy dữ liệu khi có sự thay đổi trên Firebase
for (DataSnapshot data: dataSnapshot.getChildren())
{
//lấy key của dữ liệu
String key=data.getKey();
//lấy giá trị của key (nội dung)
String value=data.getValue().toString();
adapter.add(key+"\n"+value);
}
}
@Override
public void onCancelled(DatabaseError databaseError) {
Log.w(TAG, "loadPost:onCancelled", databaseError.toException());
}
});
}
}

Chạy lên và ta có dữ liệu hiển thị như mong muốn:

Các bạn lưu ý, giờ trong Website Firebase, bạn thêm sửa xóa dữ liệ thì lập tức bất kỳ thiết bị Mobile nào đang sử dụng phần mềm nó sẽ thấy sự thay đổi này và cập nhật thời gian thực liền.

Như vậy Tui đã hướng dẫn các bạn hoàn chỉnh các bước làm thế nào để tạo một Project Android sử dụng Cơ sở dữ liệu thời gian thực, thao tác Realtime Database, cách kết nối, lập trình…

Source code của bài này: https://www.mediafire.com/file/r1bihzvc91zpa3n/RealtimeDatabaseFirebase.rar/file

Chúc các bạn thành công

4 responses

  1. […] phần 1 Tui đã hướng dẫn các bạn cách thức kết nối Android Studio tới Realtime Database […]

  2. […] Bài 1 các bạn đã biết cách kết nối và truy vấn Realtime Database Firebase, Bài 2 biết […]

  3. […] dẫn xong toàn bộ CRUD trong Realtime Database Firebase, các bạn nhớ làm theo thứ tự bài 1, bài 2, bài 3 […]

  4. […] dẫn xong toàn bộ CRUD trong Realtime Database Firebase, các bạn nhớ làm theo thứ tự bài 1, bài 2, bài 3 […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: