6/10/2022

Pull down refresh và Pull up loading | Phát triển ứng dụng đa nền tảng - Sharing



Pull down refresh

Kiểu kéo để làm mới (hoặc vuốt để làm mới - pull down refresh) cho phép người dùng kéo xuống danh sách dữ liệu bằng cách sử dụng thao tác chạm để truy xuất thêm dữ liệu. Cử chỉ “Kéo để làm mới” được Loren Brichter giới thiệu lần đầu tiên trong ứng dụng Tweetie và nhanh chóng nó trở nên phổ biến đến mức vô số ứng dụng đã áp dụng cử chỉ này. Ngày nay, tính năng "kéo để làm mới" là một phần tự nhiên của nhiều ứng dụng phổ biến, bao gồm Twitter, Gmail, Tweetbot và những ứng dụng khác. 

Cách hoạt động: một chỉ báo làm mới ( mũi tên vòng tròn) xuất hiện để báo hiệu cho người dùng hành động kéo xuống này sẽ làm mới lại màn hiện tại. 

Pull down refresh hoạt động tốt cho danh sách, danh sách dạng lưới hoặc bộ sưu tập được sắp xếp theo nội dung gần đây nhất, vì thế thao tác pull down refresh thích hợp trong các trường hợp như là bảng tin Facebook hay Twitter, Inbox messenger,… 

Các trường hợp không thích hợp sử dụng:  

+ Bản đồ: vì bản đồ không có hướng xác định 

+ Danh sách không có thứ tự: vì việc danh sách không có thứ tự thì làm mới sẽ không mang lại được tác dụng gì 

+ Các ứng dụng hoặc màn hình mà có tỉ lệ cập nhật thông tin thấp hoặc không thường xuyên 

+ Dữ liệu sắp xếp theo thứ tự thời gian: nên có nút làm mới vì khi sắp xếp theo thứ tự thời gian người dùng sẽ kéo từ trên xuống để xem và khi đó việc kéo lên cùng để làm mới là khó khăn 

+ Một số dạng nội dung đặc biệt khác 

Pull up loading

Pull up loading hay là lazy loading là một cách tốt để cải thiện trải nghiệm người dùng, lazy loading trì hoãn tải hoặc khởi tạo tài nguyên hoặc đối tượng cho đến khi chúng thực sự cần thiết. Ví dụ: nếu một trang web có hình ảnh mà người dùng phải cuộn xuống để xem, chúng ta có thể hiển thị trình giữ chỗ và chỉ tải hình ảnh đầy đủ một cách chậm rãi khi người dùng đến vị trí của trang đó. Hoặc là bảng tin facebook, facebook chỉ tải 1 số status và khi người dùng kéo xuống mới tiếp tục tải những status khác. 

Lợi ích của pull up loading: giảm thời gian tải ban đầu, bảo toàn băng thông, bảo tồn tài nguyên hệ thống 

Pull up loading sử dụng trong các trường hợp mà ứng dụng có nhiều thông tin mà việc tải ngay ban đầu có thể gây mất thời gian hoặc quá tải, sử dụng trong các trường hợp danh sách mà các phần tử cũ hơn ít được xem xét đến, hoặc là trường hợp mà nội dung thay đổi như là bảng tin facebook, twitter. 

Pull up loading là rất tốt để giảm băng thông tuy nhiên không lên quá lạm dụng, trong các ứng dụng có ít thông tin hoặc các ứng dụng mà nội dung ít thay đổi. 

Trong React Native 

Pull down refresh: Chức năng Kéo để Làm mới được triển khai bằng cách sử dụng thành phần RefreshControl trong React Native. RefreshControl được sử dụng bên trong ScrollView hoặc ListView để thêm kéo để làm mới chức năng. Khi ScrollView ở scrollY: 0, vuốt xuống sẽ kích hoạt sự kiện onRefresh. 

Pull up loading: Đặt vị trí ban đầu của Hình ảnh trong ScrollView, Theo dõi vị trí hiện tại của page offset, Thay đổi trạng thái khi page offset đến gần  

Trong Flutter

Pull down refresh: Đặt ListView, GridView… bên trong Widget RefreshIndicator, thuộc tính onRefresh: mô tả cách thức chương trình refresh dữ liệu. 

Pull up loading: Sử dụng ListView.builder, GridView.builder… thuộc tính controller của của ListView.builder… sẽ thực hiện việc load các dữ liệu khi người dùng thực hiện thao thác cuộn màn hình. 

6/01/2022

Phát triển ứng dụng đa nền tảng | Tài liệu, chuyên ngành


Phát triển ứng dụng đa nền tảng trình bày khái niệm cơ bản, quy trình, công cụ và các thư viện, framework hỗ trợ để xây dựng ứng dụng đa nền tảng và chủ yếu chính là React Native và Flutter (Cross platform). 

Nếu ai học KHMT thì ở module 1 các bạn cũng đã được học môn học "Phát triển ứng dụng cho thiết bị di động", môn học này giới thiệu về phát triển các ứng dụng trên mobile với các công cụ phát triển gốc trên Android (Native platform) bằng ngôn ngữ lập trình Java. Nếu bạn muốn biết thêm về ưu nhược điểm của Native platform và cross platform thì có thể xem qua bài viết trước đó trên website của mình: Native với Cross Platform: ưu và nhược điểm


Các bạn sẽ học được gì ở môn học này? Như bao môn khác, không thể nào qua 1 môn học mà các bạn có thể trở thành một nhà phát triển ứng dụng đa nền tảng được, môn học chỉ cung cấp cho bạn những thứ cơ bản nhất để nếu bạn nào có theo hướng này thì cũng sẽ cần tự mình nghiên cứu thêm rất nhiều hay là đi thực tập tại các công ty để có thể học hỏi thêm từ các doanh nghiệp.

Trong phát triển ứng dụng đa nền tảng các bạn sẽ được dạy tập chung chủ yếu vào các phần chính: 

  • Tổng quan và kiến trúc của thiết bị di động (kiến trúc android, kiến trúc iOS, kiến trúc đa nền tảng)
  • Dart và Flutter
  • Javascript và React native

(Tham khảo bài viết: Các điểm nhấn trong cú pháp của ES6)

Với bài tập lớn các bạn có thể tùy ý lựa chọn xây dựng ứng dụng đa nền tảng dựa trên Flutter hoặc React Native tùy ý. Các bạn đã được cung cấp sẵn backend khi làm bài tập lớn và công việc của mỗi nhóm chỉ là xây dựng ứng dụng frontend cho thiết bị di động với công nghệ đa nền tảng. Dĩ nhiên là các bạn được phép thêm các chức năng, chỉnh sửa để có một ứng dụng ưng ý hơn, thậm chí đây còn là điều bắt buộc khi trong kỳ mình học bản backend thầy đưa cho là một bản backend bị thiếu một số chức năng và thầy giáo không tìm được bản đầy đủ. Hoặc các bạn cũng có thể xây dựng một con backend mới hoàn toàn nếu có thời gian, nhưng nhớ là con backend các bạn xây dựng mới nên có các chức năng cũng phải giống với con backend mà thầy giáo cung cấp.

Môn học này có 1 số thầy giáo phụ trách như là thầy Nguyễn Mạnh TuấnNguyễn Tiến Thành,... Các bạn học thầy Tuấn thì có vẻ điểm sẽ cao hơn, học thầy Thành thì sẽ được làm các đề thi thử trước khi các bạn thi cuối kì.

Một số tài liệu dành cho môn học: 

Môn học này sẽ có 1 số kiến thức xung quanh môn học được thầy giáo hay hỏi trong quá trình học tập, mình sẽ viết thành các bài viết riêng đăng sau bài viết này vì chúng cũng là những vấn đề không nhỏ.