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

5 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
5 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 20 ngày trước
5 2
Bài viết liên quan
White
10 3
Firebase là một nền tảng di động giúp bạn nhanh chóng phát triển các ứng dụng chất lượng cao, phát triển ứng dụng cho người dùng lớn, và kiếm được ...
Võ Nhật Nam viết hơn 1 năm trước
10 3
White
19 4
Tạo ứng dụng chat với 50 dòng code, Firebase và AngularJS Từ lúc viết blog tới giờ, mình chưa có bài nào hướng dẫn các bạn tạo ra một sản phẩm từ ...
Huy Hoàng Phạm viết hơn 2 năm trước
19 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
0 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á!