Học Firebase qua Project - Phần 1: Giới thiệu và tạo giao diện cho ứng dụng nhắn tin

Học Firebase qua Project - Phần 1: Giới thiệu và tạo giao diện cho ứng dụng nhắn tin

Như các bạn đã biết Firebase hiện tại là nền tảng khá phố biến vì nó khá đơn giản để làm quen cũng như giúp ích rất nhiều khi code dự án, tự serverless, host test, db realtime. Nhưng ở Việt Nam nó không quá phổ biến và không có quá nhiều trang nói về cái này. Mấy hôm nay rảnh dỗi mình xin mạn phép giới thiệu Series làm 1 web + app Android nhắn tin đơn giản :3

Vì sao lại là Firebase, nó có cái gì đặc sắc không?

Mình đã có 1 bài viết tóm tắt qua các bạn xem thêm tại đây nhé Set custom domain free cho Firebase hosting

Bắt đầu vào việc thôi

Repo mình sẽ lưu ở Github này nhé :D TILMessage

Flow của ứng dụng

alt text
Đầu tiên sẽ Login bằng Firebase Authentication. Có thể là Login With Google hay Facebook... Tiếp đó khi nhắn tin thì tin nhắn đó sẽ được ghi vào Realtime DB. Vì bản chất là Realtime Db nên device còn lại sẽ tự sync.

Dựng giao diện Web

Mình khá lười front-end nên mình sẽ bê nguyên giao diện của ví dụ Friendly-chat của Firebase :) Mình sẽ chỉ bê HTML và CSS về. Mình sẽ có push lên Git nhé :D Các bạn bấm vào commit để coi nhé

Dựng giao diện Android

Mình sẽ làm đơn giản thôi vì chuyên môn mình không phải là design nên mình không thể design đẹp được. Mình sẽ tạo 1 listview và đổ dữ liệu ra listview.
Trong Listview sẽ có 1 con chứa các nội dung như: Ava(Cái này mình sẽ set cứng), tin nhắn, ngày giờ gửi hết
Okay đàu tiên mình sẽ tạo 1 class nhé. Ở đây mình sẽ tạo 1 class là Message và bạn lưu ý mình dùng Kotlin vì mình hơi có ác cảm chút với Java ngày trước
Mình sẽ tạo class Message như sau

data class Message(val Ava: Int, val Message: String, val Timestemp: String)

okay xong. Mình sẽ tạo 1 view con gồm các thuộc tính đó nhé :3
alt text
Nó sẽ có dạng như thế này :3 Bạn nào làm đẹp thì có thể tự làm nhé mình làm vốn xấu
Mình sẽ push lên github theo Commit nhé

Có vẻ như đã xong được phần giao diện bề ngoài rồi. Bài tiếp theo ta sẽ đi vào web trước nhé. Mình sẽ làm xử lí login trước :) Hẹn gặp lại các bạn trong bài viết tiếp theo của mình

Update(6h02 phút cùng ngày)

Có vẻ như mình đã quên cái quan trọng đó là giao diện ở Main_activity dùng để nhập tin nhắn và trả tin nhắn về.
Mình đơn giản thôi đẩy dữ liệu vào ListView cho lẹ nên mình test demo = 1 arrayList (Mình sẽ không xóa ArrayList này) Máy mình là 6inch 18:9 nên một số chỗ mình fix cứng nếu bạn nào tỉ lệ màn hình khác nên sửa lại để nhìn hợp lí nhất nhé
alt text
Đây là máy mình :3 Mình trông khá ổn. Vậy thôi mình đóng số đầu tiên lại tại đây. Cảm ơn các bạn đã theo dõi xin chào

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyễn Hoàng Minh

6 bài viết.
24 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
24 8
Đôi điều tâm sự Hmm đã bao giờ bạn bị nhờ là: "Mày ơi mấy hôm nữa câu lạc bộ làm cái ì ven, mày làm cái form nào đăng kí cái là chúng nó có vé/mail...
Nguyễn Hoàng Minh viết 5 tháng trước
24 8
White
6 2
Set custom domain free cho Firebase hosting Như tiêu đề, em vừa tìm ra cách set được Domain của Freenom cho Firebase Hosting để đỡ phải vất vả nhậ...
Nguyễn Hoàng Minh viết 6 tháng trước
6 2
White
2 0
Học Firebase qua Project Phần 2: Vẫn về xử lí đăng nhập (Phân quyền) Gọi là phân quyền thì không hẳn lắm. Những thứ gì ta cần làm chỉ là khi login...
Nguyễn Hoàng Minh viết 5 tháng trước
2 0
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 4 tháng trước
0 2
White
20 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết 2 năm trước
20 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
24 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!