Tôi đã viết ứng dụng spiderum của mình như thế nào (phần cuối)

    Sau phần đầu tiên nhận được sự quan tâm từ cộng đồng người dùng spiderum.com. Mình quyết định dành thêm chút thời gian để hoàn thiện ứng dụng "spiderum từ cộng đồng". Cũng như bài viết đầu mình chia sẽ, ứng dụng hoàn toàn không thu lời nhuận, tập trung vào trải nghiệm đọc và toàn bộ source code của ứng dụng có thể download tại: https://github.com/zrg-team/rn_spiderum.

    Đáng lẽ mình đã có thời gian viết bài viết này sớm hơn nhưng do cuối năm nên công ty có nhiều vấn đề cần giải quyết, thôi thì để bài viết này mở hàng năm 2020 vậy. À, như anh em đã biết ứng dụng offical từ spiderum đã hoàn thiện tuy nhiên còn một số thứ mình chưa hài lòng lắm: 

‣ Thời gian mở ứng dụng khá lâu

‣ Thỉnh thoảng gặp lỗi khiến app bị crash

‣ Chưa có giao diện nền tối

Mong admin sẽ hoàn thiện sớm ❤️️

Link Offical Application

Còn về ứng dụng này mình chỉ cố gắng hoàn thiện các chức năng đã plan từ đầu. Và bài viết này sẽ viết về quá trình hoàn thiện nó

Có lẽ giống như bao thanh niên khác trên spiderum, mình thường đọc bài vào buổi tối thường là trước khi đi ngủ, nên việc màu của ứng dụng quá sáng sẽ làm mình cảm thấy khó chịu và mất tập trung. 

Làm 1 vài thao tác đơn giản trên google bạn có thể tìm thấy hàng tá lý do tại sao ứng dụng lại nên có nên tối:

Biết về tác dụng của nền tối rồi đấy nhưng việc thêm "giao diện nền tối" vào ứng dụng cũng không dễ dàng nó đòi hỏi code của ứng dụng cần có sự đồng bộ trong việc sử dụng màu sắc và có cách tổ chức hợp lý ngay từ đầu. Màu sắc của chữ sẽ thay đổi như thế nào nếu background được chuyển sang nền khác, các lớp của ứng dụng có màu sắc như thế nào để phân biệt. Nếu thiếu sót hậu quả có thể là màu sắc không hợp lý, nghiêm trọng hơn là màu chữ và nền quá giống nhau dẫn đến không thể đọc, ... . Đó là vấn đề của end-user còn về developer việc thay đổi màu sẽ dẫn đến một mớ hỗn loạn các câu điều kiện (if else), và mớ lúc nhúc các bugs có thể xảy ra, ... . May mắn mình đã hoàn thiện được nó trên ứng dụng hiện tại nhờ vào việc sử dụng 1 UI libraries hỗ trợ từ đầu

Libraries cung cấp một component wrap toàn bộ ứng dụng lại, sau đó truyền  các thông tin màu sắc, theme, ... thông qua props vào các component con , từ đó dễ dàng apply vào style của chúng

Ở giai đoạn lên ý tưởng mình đã hoàn toàn bỏ quên chức năng này. Vấn đề xảy ra sau 1 khoảng thời gian sử dụng cũng như develop, mình xóa mất bài đã đánh dấu và đang đọc dỡ. 

Ý tưởng ban đầu là thêm vào 1 màn hình để chuyên tìm kiếm bao gồm search theo bài viết hoặc theo tác giả, tuy nhiên sau thời gian cân nhắc việc tìm kiếm tác giả có vẻ không cần thiết lắm vì hiện tại cũng chưa có chức năng đánh dấu tác giả và ứng dụng cũng không có chức năng liên kết tài khoản. Ngoài ra phần show random 5 bài viết trong màn hình home cũng không được hợp lý và hữu dụng lắm vậy nên mình quyết định chuyển nó thành trung tâm tìm kiếm bài viết của ứng dụng

Mỗi lần người dùng click vào icon search input sẽ hiện ra cùng với bàn phím để nhập (thế là đủ)

Trước đây phần đọc tin mình dùng cheerio (một thư viện mô phỏng Jquery) để chuyển html thành các thành phần mà react-native có thể hiểu được. Nó hoạt động thế này: 

‣ Step ➊: quét tất cả các div, p, li, a, img, ... . Xác định xem là dạng gì ?

‣ Step ➋:  Sau khi xác định kiểu, thì cần tìm các tham số cần thiết để render thành phần đó

‣ Step ➌: UI sẽ quét qua để render tương ứng

Kết quả không quá tệ, ở phiên bản đầu tiên mọi người có thể đọc text, link, xem hình ảnh, và video. Nhưng vấn để xảy ra khi các thuộc tính đậm, nghiêng, link nằm xem kẽ vào 1 chuỗi lớn

Mình quyết định chuyển qua dùng "react-native-render-html" và chỉ custom lại một số render của nó cho phù hợp cũng như nâng cao performace

✔ Giảm thời gian loading ban đầu của ứng dụng. Sau một số tinh chỉnh kết quả đặt được khá khả quan:

✔ Khả năng hiển thị bài viết phức tạp và nhiều hình. Nhận diện và thay đổi cách hiển thị tập trung vào performance

✔ Lazy loading image trong bài viết

✔ Thêm thông tin về tính năng đọc liên tiếp, cải thiện performance (trong lúc đọc tin bạn có thể lướt qua lại trên bài viết để đọc tiếp các bài tiếp nối)

✔ Tinh chỉnh để build được trên ios

✔ Tăng giảm font chữ hiệu quả hơn

✔ Phần random tin tức được đưa vào màn hình options

... Và nhiều cải tiến khác

Tình trạng hiện tại của ứng dụng:

✘ Ứng dụng không thể thỏa mãn được tất cả user, có người sẽ không thích phần màu sắc hoặc cách bố trí hoặc cả hai :'(

✘ Ứng dụng cũng không có đầy đủ tính năng như "spiderum official" app, vì nó chỉ tập trung vào trãi nghiệm đọc

✘ Chưa có phiên bản ios

✘ Lỗi , tất nhiên :)

Yep, có cả hằng hà xa số thứ cần cải thiện ở ứng dụng này. Nhưng với mình việc viết ứng dụng và bài viết này đã cho mình những trãi nghiệm chưa từng có. Đó là lần đầu tiên mình được viết ra những suy nghĩ, tư duy của bản thân khi làm việc, giải thích cho người khác những công việc đang làm, những khó khăn đang gặp phải. Và rằng đằng sau công việc gõ kì cạch trước máy tính là hàng tá suy nghĩ, trãi nghiệm thú vị ❤️️

Từ sau bài viết này mình sẽ còn chia sẽ về lập trình game hi vọng nó thú vị với bạn

Nếu bạn muốn download để trải nghiệm:
https://github.com/zrg-team/rn_spiderum/releases/tag/v1.0.6