Mở đầu, bài viết này thuật lại quá trình mình viết ứng dụng đọc spiderum của riêng mình, ứng dụng không nhằm mục đích thương mại hay được release lên store nào cả, mục tiêu học tập chia sẻ là chính. Toàn bộ source code của ứng dụng available at https://github.com/zrg-team/rn_spiderum.

    Do thời gian viết ngắn và chưa có thời gian trau chuốt nên ứng dụng có thể còn tồn tại bugs và code chưa được optimaze tốt. Feel free to help me
Ủng hộ offical application từ spiderum nhé !



I. Bối cảnh

    Tôi có thói quen đọc spiderum mỗi khi có thời gian rãnh : trong lúc trên xe bus đến công ty, trong lúc đi bộ đi ăn trưa, hoặc ngồi đợi một thứ gì đó, ...
Website spiderum hiện tại cũng tối ưu rất tốt giao diện mobile, tuy nhiên nó không hỗ trợ offline và cũng có bố cục theo phong cách máy tính

    Tôi cũng mò mẫm trên playstore: có một vài ứng dụng không chính thức thì kết quả là ứng dụng hoặc chậm hoặc xấu hoặc không làm việc trong tình trạng ngắt mạng thứ mà tôi cần nhất cho một ứng dụng mobile. Vậy nên tôi quyết định tự viết một ứng dụng nhỏ để đọc spiderum cho riêng mình, tất nhiên là mình cũng không có ý định kiếm thu nhập hay public ứng dụng lên store gì cả

II. Mục tiêu

  Mục tiêu mà tôi hướng đến khi xây dựng ứng dụng :

  + Giao diện đơn giản, dễ dùng

  + Tải bài viết nhanh

  + Hỗ trợ đọc offine

  + Trải nghiệm đọc tốt

  + Ứng dụng sinh động

  + Thời gian khởi động ứng dụng ngắn


    Bên cạnh đó là một vài yêu cầu phi nghiệp vụ : có thể chạy trên cả android và ios, ứng dụng dễ fix bugs, mở rộng, thơi gian mở ứng dụng nhanh, không bị crash , ...

    Ngoài ra thời gian hoàn thiện cũng không được quá dài, vì mình cũng đang bận bịu với công việc của công ty và dự án của bản thân. Thời gian mà mình estimate cho project này vào khoảng 16h


III. Xắn tay áo lên nào

    Có khoảng 14 - 16h để hoàn thành

     Để viết ứng dụng cho mobile thì có một số công nghệ mà mình có thể cân nhắc đến:

 + Cordova: CSS HTML JS, một vài module native. Là một công nghệ cross-platform lâu đời nó sẽ giúp tốc độ xây dựng ứng dụng nhanh, nguồn tham khảo nhiều, tuy nhiên hiệu năng của nó sẽ chậm và công nghệ cũng cũ kĩ

 + PWA: CSS HTML JS same as Cordova, CSS HTML JS, cho phép cài ứng dụng trực tiếp từ website nhưng về cơ bản vẫn hoạt động trên một trình duyệt. Và khả năng đưa lên ios cũng chưa rõ ràng

 + Native: Nhanh , mạnh gần như hoàn hảo chỉ tội khó mà có thể hoàn thiện ứng dụng cho android và ios trong 16h ít ỏi

 + React-native: Cross-platform cộng đồng nhiều, tutorial nhiều, performance tốt (tuy không bằng flutter và native).

 + Flutter: Mới lạ, hiệu năng tốt, cách viết cũng hiện đại, dễ làm quen. Thư viện, cộng đồng thì chưa được như react-native hay native

    Thời gian không có nhiều mình dành 1 giờ hoặc hơn để tìm các ứng dụng tương tự xem chúng viết bằng gì, dạo quanh xem có template nào để có thể xây dựng nó nhanh không ? Cuối cùng thời gian không có nhiều mình lựa chọn 1 nền tảng thân thuộc mong là nó giúp mình đẩy nhanh quá trình phát triển. Mình cũng đọc được 1 số đánh giá tích cực trên các phiên bản mới của react-native 0.6x nên cũng muốn thử => Done REACT-NATIVE and 15h còn lại

1. Codebase
    Đã làm việc với react-native từ trước nên codebase không phải vấn đề lớn với mình. Code base mà mình đã xây dựng từ lâu và áp dụng cho hầu hết các công ty mà mình đã từng đi qua. Mục tiêu cơ bản của nó là: cấu trúc hướng module, dễ phát triển và debug, dễ dàng để phân chia công việc, hướng đến việc tối ưu hiệu năng bằng việc giảm quá trình render, singleton những thành phần hay dùng ...

  • assets: dữ liệu cứng trong ứng dụng bao gồm hình ảnh, json file, etc
  • common: Components, functions chung
  • configs: nothing to say
  • modules: Mỗi ứng dụng sẽ được tạo thành từ nhiều module, bên trong mỗi module sẽ bao gồm các thành phần độc lập của riêng nó bao gồm state, endpoint, config, components, etc
  • pages: Các trang của ứng dụng 

    Source code ban đầu đã được lên xong trong tầm 15 - 30 phút

    Codebase như trên cũng có thể ứng dụng cho PWA, Server Side Rendering Web, Flutter, etc

    Công nghệ sử dụng: react, redux, redux-saga, react-navigation, ...

    Sau khi có source base mình dành 1 ít thời gian để tối ưu và check xem có đáp ứng được nhu cầu sử dụng không ? Với mình một ứng dụng tốn quá 3s để mở trang đầu tiên đều là do ứng dụng có vấn đề. Có thể bạn cần load nhiều api hay authentication gì đó nhưng theo mình cứ show lên sau đó hiển thị update mới sau hoặc hiển thị lỗi sau đó thì tốt hơn (đây là ý kiến cá nhân của mình)

2. Xây dựng các trang 
    Để bắt tay vào làm việc mình phải hình dung được trong đầu rằng ứng dụng sẽ mở lên như thế nào, người dùng sẽ chọn tin như thế nào và đọc tin như thế nào, công việc mà họ có thể làm trên ứng dụng, khi ứng dụng không có mạng thì nó sẽ hoạt động như thế nào ? etc

    Nhìn vào trang chủ của spiderum mình thấy các phần mà bản thân mình quan tâm nhất: bài viết mới, bài viết đang nóng, bài viết có nhiều người đọc nhất . Ok Mình sẽ show hết tất cả chúng ra ngay khi người dùng vào ứng dụng , vậy thì màn hình chính của ứng dụng sẽ bao gồm các tab và mỗi tab sẽ chứa bài viết theo từng phần như trên, Vậy màn hình chủ sẽ bao gồm các tab sau :

  + Bài viết hot: tất nhiên ai mà chẳng muốn đọc bài viết đang hot

  + Bài viết mới

  + Bài viết top

  + Danh sách categories: yes mình thường đọc bài viết trong 1 số chủ để ưa thích nên màn hình này cũng cực kì quan trọng

  + Options

 Một số màn hình có thể có : trang bookmark, thay đổi theme, trang thông tin của người viết, etc

a. Trang danh sách bài viết

  Đây là trang chủ đạo của ứng dụng , ngay từ đầu mình xác định đây là màn hình mà người dùng (mình) sẽ gặp và tương tác nhiều nhất.

    Danh sách bài viết phải rõ ràng và đầy đủ thông tin. Không giống như các ứng dụng đọc tin tức, danh sách thường tập trung tối ưu để hiển thị nhiều tin tức nhất có thể, giảm lược description, thông tin của author, số lượng bình luận, lượt xem, làm nhỏ hình ảnh etc . Bản thân mình luôn coi việc lựa chọn bài viết để đọc là một giai đoạn rất quan trọng trên spiderum, bởi mỗi bài viết trên spiderum thường tốn nhiều thời gian để đọc, ngiền ngẫm, cho đến việc thao khảo các bình luận của người khác . Vậy nên mình chọn cách mở rộng hơn diện tích mỗi bài viết trong danh sách: Phải có đủ không gian để hiển thị được hình ít nhất là một phần, phải có description, thông tin về tác giả cũng phải rõ ràng và đầy đủ nhất, thông tin số phút đọc, số lượt xem và bình luận cũng không kém


    Vì không gian trên thanh header còn nhiều nên mình quyết định đưa các tin top lên phần header của ứng dụng để dễ dàng truy cập đến.

      Hiệu ứng loading tin được thêm vào để để trông hiện đại hơn.

      Cuối cùng sau khi load được bài viết nếu người dùng quay lại vào lần sau nhưng có vấn đề về kết nối thì ứng dụng sẽ show ra các bài viết từ lần load trước đó và cũng có thể đọc được . Ngoài ra nêu kéo xuống dưới cùng bài viết cũng được load thêm














b. Trang đọc bài viết
So với tranh danh sách bài viết trang này thậm chí còn quan trọng hơn nhiều. Mục tiêu của mình với trang này là :

 + Hiển thị được đầy đủ bài viết: bao gồm text, hình ảnh, video, cũng như các thành phần bổ trợ khác như in đậm, heading, ...

 + Hiển thị thông tin về người viết bài, thông tin chung về số lần đọc, comment, ...

 + Đối với trang web như spiderum thì comment của người dùng cũng là 1 tài nguyên quan trọng. Nên mình tập trung hiển thị đầy đủ thông tin này (cũng vì thói quen bản thân là thích đọc comment :) )

 + Vì đây là trang mà người sử dụng dành nhiều thời gian nên hiệu ứng cực kì quan trọng nó làm mình không cảm thấy nhàm chán khi ra vào nhiều lần: hiệu ứng loading, hiệu ứng parallax

 + Đặc biệt phần "continue reading" cũng là phần mà mình đặc biệt chú trọng. Thay vì phải đọc sau đó thoát ra chọn bài viết, mình muốn người đọc có thể tiếp tục đọc các bài viết mà không phải di chuyển giữa các màn hình quá nhiều

 + Ngoài ra trang phải loading nhanh và có thể custom cỡ chữ, đánh bookmark cũng là yêu cầu cần làm

 + Cuối cùng hiệu ứng "Share element" hay còn gọi là "Hero" là hiệu ứng mình thích nhất và bắt buộc phải có trên các ứng dụng mình làm <3

Về công nghệ ban đầu mình chỉ định hiển thì trên webview, tuy nhiên nó chậm, khó custom và cũng khó implement hiệu ứng vào . Vì vậy mình quyết định parse bài viết ra code mà native android có thể hiểu được và hiển thị . Do chưa thể test hết toàn bộ bài viết nên mình nghĩ phần này còn khá nhiều bug và phần này cũng là phần tốn nhiều time nhất của mình


























( Còn tiếp )