Như đã nói, mình chia sẻ mọi người nội dung nhật ký ghi lại quá trình mình vừa học / vừa làm ứng dụng React Native đầu tiên. Ứng dụng này sử dụng một số thư viện như react-native 0.47, redux, redux-thunk, react-navigation và một số thư viện ui kit khác như element, vector icon…kết quả của 3 ngày có thể xem sơ qua tại clip mình upload trên youtube tại link:
Ngày 20/8:
– Bắt đầu dự án từ 10am ngày 20/8 với sự hứng thú và một số hiểu biết về Redux, React navigation
– Ban đầu chỉ là gắn được stacknavigator và tabnavigator của màn hình placeholder login và chatroom
– Sau đó bổ sung thêm drawernavigator để làm drawer
– Chiều 20/8 đã hoàn thành navigation và có thể navigate từ login sang bên trong.
– Gặp stuck với overlap statusbar trên android
– Tối, tiến hành gắn redux, saga một lượt để test login flow. Sau một hồi phá thì ko thể nhấn được login để navigate và trong, truyền props vào bên trong cũng ko nhận được –> WTF. Redux saga cũng phát sinh 1 lỗi chưa fix của RN.
Ngày 21/8:
– Cả đêm không debug ra được nguyên nhân. Sáng checkout lại bản trước khi gắn redux và thử lại từ từ, thì phát hiện bug ko thẻ navigate hoặc pass props là do sử dụng biến routes.js để khởi tạo HomeNavigator (rất khó hiểu vì cách dùng ko thay đổi, nhưng khi dùng trực tiếp thì ko lỗi, đưa vào js và import vào thì lỗi)
11:00: Sau khi tìm ra được bug liên quan đến props, redux thì lỗi redux-saga ko thể fix được và được coi là 1 issue của RN và redux-saga, do đó, quyết định không sử dụng redux-saga cho dự án. Tiến hành sử dụng redux thunk.
Tiến hành tích hợp với React native debugger (https://github.com/jhen0409/react-native-debugger) và cập nhật createStore để debug ngon lành hơn. Có thể coi được dữ liệu action, state, diff từ debugger tool.
14:00: Đã nắm bắt được cách sử dụng thunk và gắn thành công việc request đăng nhập và tạo action creator cho loginRequest(), có thể dispatch được 3 action là loginrequest, loginsuccess và loginfail để đúng flow. Login đã sử dụng axios và có thể bắt được data response về thành công ở 2 trường hợp login thành công và login sai thông tin.
15:00: tiến hành đổi state cho nút submit để trạng thái loading, tìm thấy 1 số lib nhưng ko chạy, đành gắn ActivitiyIndicator của react-native và hài lòng với ẻm.
17:30: hoàn tất việc xử lý select company submit để login với screenname và có thể redirect vào màn hình chính của ứng dụng. Bây giờ cần phải thiết lập cơ chế lưu auth để tự động chuyển khi vào lại app.
19:30: thử tích hợp redux-persist để lưu login state vào asyncstorage
20:00: Hoàn tất việc tích hợp redux-persist để có thể lưu login data vào asynstorage và tạo 1 reducer trong login để init state với dữ liệu tương ứng trong action type ‘persist/REHYDRATE’. React native debugger có context menu (nhấn chuột phải) để clear Asyncstorage trong quá trình test.
20:10: Tiến hành R&D việc gán jwt token vào tất cả request từ axios
20:30: có thể set được baseurl và header authorization cho các request secure, sau khi login hoặc init từ redux-persist
Đi tắm.
21:30: có thể customize được nội dung của drawer thay vì mặc định chỉ là các draweritem. Giờ đây có thể custom được content và drawer.
22:10: connect tới redux store và lấy dữ liệu từ auth.user như fullname, company và avatar. Avatar trên beta đang self sign https nên không hiển thị được.
23:30: sau khi vật lộn với 1 bug tào lao về UI của react-native-element chỗ icon cho listitem thì cũng gắn được vào drawer content.
Đi ngủ. Đủ cho ngày hôm nay rồi.
Ngày 22/8
8:30: đã điều hướng sang view Logout với cơ chế reset stack để không thể Back về view trước
9:00: đã hoàn tất được request lên logout với action logout success và reset về login screen. Đã thử nghiên cứu toast để thông báo như trên android nhưng chưa thử vì không biết nó có global toast (cross screen) không.
9:20: sử dụng alert để báo lỗi, đồng thời tạo action cho nút OK trong alert để clear server errors từ state để tránh việc cứ hiện báo lỗi trong form login mỗi khi componentDidUpdate()
13:30: hoàn thành action/reducer cho chatlist, có thể load được danh sach room.
14:10: đã load được chatdata và lưu vào state, tách biệt riêng theo từng room
14:50: đã load được chatdata ra ngoài giao diện sau khi format.
17:30: đã xong phần tag như website dù có chút khó khăn với việc hiển thị tag canh phải summary trong chat list.
19:00: bị bug khó hiểu, ko thấy request từ axios, reset cache cũng ko được. Phải restart lại máy, bật, tắt persist thì trở lại bth.
21:30: đã gắn được pull to refresh cho danh sách chat.
23:40: đổi được title của các tabscreen, đồng thời fix được bug load more “vô tội vạ” khi vào chat room list.
23:59: gắn xong view không tìm thấy phòng chat
Ngày 23/8
0:40: đã chỉnh được trạng thái đã gửi và đã xem của 1 message.
1:00: đổi được màu sắc cho các bubble và custom màu xanh cho header
Như vậy sau 3 ngày thì có thể sử dụng khá nhuần nhuyễn kiến trúc redux, áp dụng action, reducer ngon lành cũng như thiết kế các container và presentational component theo đúng mô hình. Các buổi tiếp theo sẽ tiến hành ráp socket để hoàn thiện tính năng realtime chat như trên web, cũng như gắn push notification. Hy vọng tuần sau sẽ có cả 2 app trên ios và android.
Một phút quảng cáo: đây chỉ là ứng dụng mobile cho tính năng Chat Center của Teamcrop đang cung cấp trên nền tảng web, chat center giúp việc quản lý tập trung trải nghiệm chat trên website (live chat) , facebook (chat, comment), zalo và không giới hạn số kết nối (page, shop, web). Teamcrop là nơi đầu tiên cung cấp dịch vụ chat center với sự tích hợp đa dạng nền tảng như vậy. Có thể tham khảo tại: https://www.teamcrop.com/chat-center.