Hướng dẫn React Native – Phần 2: Xây dựng ứng dụng đọc tin Smartnews

Ở phần 1, mình đã hướng dẫn cách để bắt đầu dự án React Native: cách cài đặt và thử nghiệm. Phần 2 sẽ bắt đầu hướng dẫn lập trình ứng dụng di động đọc tin giống Smartnews bằng React Native.

Cái nhìn đầu tiên

Cho dù bạn là lập trình viên di động hay lập trình viên web, hay ứng dụng máy tính thì cái nhìn đầu tiên một cách tổng quát về môi trường mà mình muốn dấn thân vào có khả quan không, có tiến xa được không? Đó là điều rất quan trọng mà mình muốn chia sẽ với bạn trong bài viết này.

Qua phần 1, hi vọng bạn cũng có cảm giác phấn khích như mình khi xây dựng ứng dụng Native dễ dàng, nhưng nếu bạn chưa đọc bài “React Native là tương lai của ứng dụng di động?” thì hãy dành thời gian để đọc trước nhé, chỉ mất 5 phút thôi, rồi hãy đọc tiếp bài này nhé.

Như vậy là bạn đã có cái nhìn sơ bộ về React Native rồi, bản thân React Native tồn tại một số vấn đề nhưng dần dần đang được khắc phục, nên mình tin là những khuyết điểm trên không là gì cả nếu bạn tiếp tục phát triển ứng dụng bằng React Native. Tuy nhiên, nếu bạn muốn lập trình trò chơi 2D, 3D thì React Native không phù hợp, hoàn toàn không phù hợp, nên bạn hãy dừng lại tại đây!

Hướng dẫn lập trình ứng dụng di động Smartnews

Trên đây là hình ảnh của ứng dụng mà mình sẽ hướng dẫn lập trình ứng dụng di động đọc tin Smartnews. Smartnews là ứng dụng đọc tin rất tuyệt hiện nay, được dùng phổ biến ở Nhật, đi tàu điện cứ thấy người ta dùng Smartnews không ah.

Ứng dụng có các chức năng sau:

• Đọc file xml và chuyển đổi ra json từ chuẩn Smartnews
• Hiển thị các bài viết theo các layout: block 4 tin, block 3 tin, block 2 tin và 1 tin
• Đọc file json và hiển thị nội dung web bằng webview
• Sử dụng Tab, Navigation

Mặc dù ứng dụng đọc xml chuẩn Smarnews, tuy nhiên phần parser chỉ là phần phụ, bạn có thể sử dụng phần hiển thị từ bất kỳ nguồn json, xml. Sau loạt bài này, bạn có thể xây dựng ứng dụng tương tự Smartnews, có thể đọc tin bằng webview, hoặc chỉ bằng nội dung cơ bản của một bài viết.

Thời gian để đọc loạt bài viết này chắc lâu hơn thời gian bạn lập trình ứng dụng này đó, mình sẽ public mã nguồn của toàn bộ source code sau khi hoàn thành seri này, ứng dụng sẽ giúp cho bạn hiểu rõ ràng về React Native.

Comments