Remote code gì nhỉ ?

Đợt dịch này lâu quá mọi người ạ 🙁 Vẫn chưa hết nên cty vẫn làm remote. Remote nhiều chán và có nhiều time hơn nên mình làm cái app, áp dụng các kiến thức đã biết, mang tính học tập là chủ yếu. Giao diện, tính năng chưa được đẹp, chuẩn cho lắm, mn góp ý để đẹp hơn nhé 😀

Ngoài ra mn hãy ủng hộ các sản phẩm khác của mình nhé

• Web chia sẻ: chia sẻ các đợt săn sale, các đầu sách, đồ công nghệ hay, … Link facebook: https://www.facebook.com/webchiase
• Youtube game on: làm việc ngành IT căng thẳng, hãy cùng mình giải trí với những tựa game “nhẹ nhàng, vui vẻ” với Kênh youtube Game on nhé  Link youtube: https://www.youtube.com/channel/UC7F1tHLur7npswX0ADKdQ2A

Mọi người remote thì làm gì ạ ? Có gì hay thì cũng share lại vs mình nhé. Ok nào giờ bắt đầu thôi !!!

I. Tổng hợp về các tính năng

1. Dạo qua về ý tưởng

Cái khó nhất khi tự làm một cái gì đó “trông ra gì” là quyết định “App sẽ có những chức năng gì, cần hiển thị những gì ở mỗi chức năng, liên kết giữa chúng ra sao, giao diện sao cho ngầu, hiệu ứng sao cho đẹp, …”.

Thực sự là quá trời ý tưởng, những cái muốn làm, muốn đưa vào thì rất nhiều – khó mà chọn hết được.

Nhưng cuối cùng thì mình lựa chọn … 2 tính năng sau để làm, cơ bản vì nó khá phổ thông, dễ tham khảo:

• Thông tin thời tiết: nó sẽ lấy thông tin thời tiết :3 Sẽ có về gọi api, sử dụng repository design pattern, flow, couroutine trong kotlin, …
• Đặt báo thức: cũng đơn giản là nó để tạo báo thức. Sẽ có về Room, CoordinatorLayout, BottomSheetDialogFragment, gửi thông tin giữa các Fragment, …

Ví dụ:

App có tính năng gì, mình có xem một case study ở đây

https://blog.tubikstudio.com/case-study-toonie-alarm-app-ui-design/

Giao diện sao cho ngầu – search google thì kiếm được một số cái trong vài trăm triệu cái

Về chi tiết chức năng, liên kết giữa chúng, sau đây mình sẽ nói rõ hơn nhé !!!

2. Chi tiết

a. Thời tiết

– Lấy thông tin thời tiết hiện tại của thành phố theo lựa chọn (Hiện tại mới có Hà Nội)

Các thông tin sẽ hiển thị bao gồm:

• Tên thành phố
• Thời gian hiện tại
• Nhiệt độ, miêu tả về thời tiết hiện tại
• Nhiệt độ max/min hiện tại (chỗ này sai sai : )) – vì nó đang lấy thời tiết thời điểm hiện tại nên min == max :v)

– Dự báo thời tiết bảy ngày tới

Các thông tin hiển thị mỗi item:

• Thời gian
• Nhiệt độ min/max (cái này mới đúng :v)
• Miêu tả cơ bản (Dòng Dự báo)
• Độ ẩm/Chỉ số UV/Tốc độ gió (tính kiếm cái icon cho đẹp mà chưa kịp làm)

Có một tab ở dưới sẽ giúp bạn chuyển đổi qua lại giữa thông tin thời tiết Hiện tại và Dự báo.

b. Báo thức

– Màn danh sách báo thức

Các thông tin sẽ hiển thị bao gồm

• Giờ báo thức, miêu tả về nó
• Ngày báo thức (một lần hoặc lặp lại)
• Bật/tắt báo thức
• Nút thêm báo thức

– Màn tạo báo thức

– Màn báo thức

Đợi điều bất ngờ nhé mn : ))

P/s: App hiện tại đang mang tính học tập, trau dồi kiến thức là chủ yếu nên về logic hiển thị, xử lý có thể sai một số chỗ. Ae thông cảm nhé 😀

Ok, xong phần tính năng. Giờ chúng ta sang phần 2, xem nó được tạo nên thế nào nhé mn. Let’s go !!!

II. Chi tiết về cách code

1. Áp dụng chung cho cả app

• Kiến trúc thiết kế mình áp dụng cho cả app: MVVM

Chắc không cần phải nói quá nhiều về nó nữa, Google cũng … recommended rồi.

• Ngôn ngữ sử dụng: Kotlin

Kotlin đang phát triển mạnh. Đang được kì vọng là ngôn ngữ … có thể thay thế được Java – một ngôn ngữ lập trình lâu đời và hiện vẫn đang được dùng rất phổ biến.

Hãy đọc Series Kotlin vi diệu của mình để hiểu thêm về nó nhé 😀

• Lib sử dụng

Koin: sử dụng cho dependency injection.

Databinding: kết nối các thành phần trên view trực tiếp với nguồn dữ liệu. Rất là tiện lợi, code trở nên gọn hơn nhé mn.

Glide: một thư viện load ảnh đã quá phổ biến.

Coroutines: bạn đã từng nghe tới RxJava, RxAndroid – một thư viện giúp chạy các task vụ bất đồng bộ ?? Và nếu bạn dùng Kotin thì hãy thử ngay coroutines nhé

ViewModel, LiveData: code MVVM thì nhất định phải dùng 2 cái này rồi

• Thiết kế

Mình sẽ làm theo Material Design. Cho các bạn chưa biết thì nó là các quy tắc thiết kế giao diện, màu sắc, chữ viết, … được phát triển bởi Google. Thông qua nhiều thử nghiệm, trên nhiều môi trường, … nhằm đưa ra một thiết kế đẹp nhất.

Đã được áp dụng rộng rãi trong thực tế, trên trong Android, IOS, Flutter và Web

Cơ mà nó cho dân design là chủ yếu nên mình sẽ dùng nó ở mức tàm tạm thôi nhé : )) Chứ ko lại phải sang làm design mất :v

2. Chi tiết từng phần

Hẹn các bạn ở … phần sau chúng ta sẽ đi chi tiết cho các màn nhé 😐 (Say What 😐)

Tổng kết

Là một Android developer thấy cũng nên làm được một cái gì đó là “của mình” nên nhân dịp này mình tự code xem sao. Thấy cũng hay, học tập được thêm nhiều thứ.

Hẹn các bạn ở phần 2, chi tiết hơn về các lib sử dụng cho từng màn.

Mọi có ý kiến đóng góp cho app, hay hỏi gì thì để lại comment nhé 😀 Tks !!!