Giới Thiệu

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một ứng dụng xem phim dựa trên kiến trúc MVVM. Ứng dụng sẽ sử dụng API từ MovieDB và chúng ta sẽ áp dụng Prism để tách biệt các thành phần trong ứng dụng, giúp việc thử nghiệm trở nên dễ dàng hơn. Phần đầu tiên này sẽ tập trung vào việc tạo giao diện chính, nơi chúng ta sẽ lấy dữ liệu và hiển thị thông qua một CollectionView. Nếu có đủ thời gian, chúng ta sẽ bổ sung thêm chức năng cuộn vô hạn, kéo để làm mới và sắp xếp các bộ phim theo kiểu thiết kế poster. Hãy bắt đầu nào!

Mục Tiêu

Cuối phần này, chúng ta sẽ có một ứng dụng có khả năng hiển thị danh sách phim như mô tả dưới đây.

Bước 1: Thêm Thư Viện Cần Thiết

Đầu tiên, hãy thêm các thư viện cần thiết (Prism, FFImageLoading và NewtonsoftJson) vào dự án của bạn (Hãy nhớ chọn tất cả các dự án khi cài đặt, tức là cả Android và iOS).

Chúng ta sẽ sử dụng Prism cho việc điều hướng ứng dụng. Nếu bạn chưa quen với Prism, hãy tham khảo bài viết trước đó của tôi.

Thư viện FFImageLoading sẽ được sử dụng để tải hình ảnh vì nó nhanh và dễ dàng tích hợp vào ứng dụng, hỗ trợ cả Android và iOS.

Tôi giả định rằng bạn đã quen thuộc với Xamarin Forms, nếu bạn là người mới bắt đầu thì nên xem các bài hướng dẫn dành cho người mới trước khi tiếp tục. Tuy nhiên, tôi sẽ cố gắng làm cho mọi thứ đơn giản và dễ hiểu.

Bước 2: Tạo Dự Án Mới

Tạo một dự án mới có tên là MovieApp và thêm các thư viện đã nêu ở trên. Tiếp theo, chúng ta sẽ thiết lập các thư mục trong dự án (Nếu bạn tạo một ứng dụng Prism, các thư mục này sẽ tự động được tạo ra, nhưng vì chúng ta bắt đầu từ đầu nên cần làm thủ công).

Nhấp chuột phải vào giải pháp MovieApp và thêm các thư mục sau:

• Common
  • Models
  • Repository
  • Constants
  • ViewModels
  • Views

Bước 3: Lấy API Key

Trước khi tiếp tục, bạn sẽ cần API key. Hãy truy cập vào trang web của MovieDB, tạo một tài khoản và lấy API key của bạn. Chúng ta sẽ sử dụng nó để thực hiện các cuộc gọi API.

Bước 4: Tạo Các Model Class

Sao chép cấu trúc JSON mẫu từ API MovieDB vào phần mềm của bạn và tạo các model class để ánh xạ dữ liệu. Chúng ta cần tạo ba class:

• Movie.cs
• MovieResponse.cs
• MovieCall.cs

Bước 5: Tạo Repository

Tiếp theo, tạo một interface IMovieRepository và một class MovieRepository để thực hiện các cuộc gọi API.

Bước 6: Tạo Các Màn Hình

Tạo hai ContentPage mới MoviesPage và MovieDetailsPage trong thư mục Views. Chúng ta sẽ chỉ tập trung vào MoviesPage trong phần này.

Bước 7: Tạo ViewModel

Mở class MoviesPageViewModel.cs và sử dụng Prism.Mvvm BindableBase để không phải gọi RaisePropertyChanged khi cập nhật các biến trong ViewModel.

Bước 8: Tạo Giao Diện Người Dùng

Cuối cùng, thiết lập MoviesPage.xaml với một RefreshView, một CollectionView và một ActivityIndicator để hiển thị danh sách phim.

Kết Luận

Bây giờ ứng dụng của bạn đã sẵn sàng để chạy và hiển thị danh sách phim mặc dù hiện tại chỉ có văn bản. Trong phần tiếp theo, chúng ta sẽ xây dựng trang chi tiết phim, thêm một số tính năng khác như chia sẻ và thậm chí lưu vào cơ sở dữ liệu cục bộ. Chúc bạn mã hóa vui vẻ!
source: viblo