Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách sử dụng Firebase để làm database cho Thunkable. Cách lưu dữ liêụ, trích xuất dữ liệu theo cấu trúc json.
Đầu tiên các bạn hãy đăng ký tài khoản firebase bằng account google của mình.
Sau đó các bạn hãy vào console để tạo project mới và làm theo hướng dẫn:
Sau khi tạo project các bạn hãy tiếp tục tạo app, trong trường hợp sử dụng thunkable các bạn hãy chọn web app:
Trong bước cuối cùng của tạo app, các bạn sẽ được cung cấp API key, các bạn hãy lưu lại api key này để khai báo trong thunkable:
Sau khi đã có app, các bạn sẽ tiến hành bước cuối trong firebase là tạo database mới với testing mode:
Cuối cùng các bạn sẽ có dược database url, và chúng ta sẽ dùng url này để khai báo trong thunkable
Các bạn tạo project mới trong thunkable và khai báo ở đây:
Để có thể cung cấp chức năng login bằng email thì các bạn hãy enable phần login bằng email/password trong authentication ở đây:
vậy là chúng ta đã chuẩn bị xong phần database cho ứng dụng mới của chúng ta,
nhiều bước vậy nhưng các bạn chỉ mất 3 phút để có 1 database real time từ firebase.
bây giờ đến phần thiết kế app, hôm nay mình sẽ cùng các bạn tạo ra 1 app có chức năng ghi nhớ user/pass của các website quan trọng mà mình cần nhớ mật khẩu.
và dĩ nhiên mình sẽ hoàn toàn sử dụng thunkable và firebase trong bài hướng dẫn này.
Đầu tiên các bạn có thể copy Project của mình ở đây để có thể tham khảo block.
và các bạn hãy xem video dưới đây để xem hướng dẫn chi tiết:
Ứng dụng này mình sẽ có 3 trang:
Trang login sử dụng module Sign in từ Firebase
Với các chức năng sau đây:
SignUP: giúp user đăng ký tài khoản với ứng dụng của mình, giá trị đưa vào là email và password mà user muốn đăng ký, sau khi đăng ký user sẽ nhận được 1 email được gửi từ firebase để verify tài khoản, sau khi verify tài khoản thì user có thể login vào ứng dụng mà mình vừa tạo ra. (việc verify để tránh user spam ứng dụng của mình)
SignIn: sau khi đăng ký tài khoản thành công, user có thể dùng email và password vừa đăng ký để đăng nhập vào ứng dụng của mình, sẽ có 3 trường hợp xảy ra:
error: sai password, sau user name, mất kết nối internet.
userid: login thành công, firebase sẽ trả về userId tương ứng với email/pass mà user đã đăng ký.
isEmailverified: user đã verify email hay chưa, trong trương hợp đã đăng ký nhưng chưa verify chúng ta có thể đưa ra hành động phù hợp.
SignOut: giúp user đăng xuất ra khỏi ứng dụng, thông thường khi đăng xuất mình sẽ xoá userid của user trên app, và bắt user đăng nhập lại.
ResetPassword: chức năng này giúp cho user khôi phục mật khẩu, giá trị đưa vào là email của user, firebase sẽ gửi 1 link để giúp user khởi tạo lại mật khẩu
Phần khó nhất đã có firebase lo, các bạn chỉ việc sử dụng block đúng cách và hợp lý thì các bạn đã có 1 app có chức năng login "xịn xò".
Trang Screen Password chủ yếu sẽ sử dụng chức năng ghi dữ liệu vào firebase
Save: lưu dữ liệu theo cấu trúc json, nghĩa là các bạn sẽ có 1 cặp key:value
ví dụ các bạn muốn lưu: password là 123 thì các bạn sẽ có key là password và value là 123
các bạn hãy nhìn vào dữ liệu thật trên Firebase realtime database của mình:
và để lưu được pass/user trong trường hợp ở trên mình đã làm block như thế này:
phân cấp của json trong thunkable được biểu diễn ở dấu "/", mình đã ghi dữ liệu ở trên với key: PASSWORDS/user_ID/SITENAME và với value là object: user và pass.
Do value chỉ có 1 chỗ để truyền dữ liệu vào nên mình phải tạo ra 1 đối tượng bao gồm 2 giá trị để mình có thể ghi cùng 1 lúc. Còn 1 cách để không phải tạo object là các bạn sẽ ghi dữ liệu với 2 cặp key như sau:
key: PASSWORDS/user_ID/SITENAME/user value:input_email
key: PASSWORDS/user_ID/SITENAME/pass value:input_pass
Trang Screen_firepass chủ yếu các bạn sẽ sử dụng chức năng đọc dữ liệu từ firebase
Tương tự như ghi dữ liệu vào firebase, khi truy xuất dữ liệu các bạn cũng phải tuân thủ theo cấu trúc của json,
với dữ liệu thật, khi ta muốn lấy cặp user/pass của 1 website thuộc sở hữu của 1 user_id thì ta làm như sau:
Chúng ta sẽ Call key: PASSWORDS/user_ID/SITENAME
và output value sẽ là 1 đối tượng (object) chứa user/pass
vậy là chúng ta đã căn bản sử dụng được firebase thông qua 2 chức năng chính là SAVE và CALL
các bạn có thể download project của mình ở đây để tham khảo thêm các block.
hẹn gặp lại các bạn ở bài hướng dẫn sau,
các bạn hãy subcribe youtube và blog này để nhận được những hướng dẫn mới nhất nhé.