Tiếp theo phần trước với việc tạo trang đăng nhập và đăng ký, phần này ta sẽ sử dụng HttpClient để gửi nhận Request tới các API và sử dụng Binding để xử lý thông tin input từ phía người dùng.

Bước 1: Cài đặt các phương thức kết nối API

Tìm tới file IPeopleService.cs trong People.Services và thêm 2 phương thức mới cho interface này:

Tiếp theo ta thêm một thuộc tính Token private ở class PeopleService dùng để lưu access token khi đăng nhập thành công.

Lần lượt khai báo cho 2 phương thức LoginAsync và RegisterAsync:

Vì các API đều nhận dữ liệu JSON theo phương thức POST, nên ta sử dụng một đối tượng thuộc class HttpRequestMessage, và sử dụng JsonConvert để tạo request và gửi bằng phướng thức SendAsync của đối tượng HttpClient, kết quả rả về là một đối tượng thuộc class HttpResponeMessage mà ta có thể sử dụng để kiểm tra Http Status hoặc đọc dữ liệu trả về.

Riêng đối với các API đã được bảo vệ bằng cách phải có token mới truy cập được thì ta sử dụng thuộc tính Header.Authorization như sau

Bước 2: Tạo các thuộc tính trên ViewModel

Các thuộc tính này nhằm mục đích chứa dữ liệu tương ứng khi người dùng nhập vào trên giao diện, dựa theo cơ chế binding của Mvvm. Vậy trên LoginViewModel và RegisterViewModel sẽ có các thuộc tính sau:

Bước 3: Cài đặt các Command Login & Register

Ta sẽ cài đặt “chuyện gì xảy ra” khi nhấn vào button login (trên LoginView) và button register (trên RegisterView), như bài trước mình đã đề cặp đối với MVVM bạn không cần phải xử lý từng event trên tầng View mà chỉ cần xây dựng các command để các thành phần giao diện tương tác (như button) binding tới.

Ta có flow cơ bản của Login là:

  • Trạng thái ban đầu button Login bị Disabled
  • Người dùng nhập Username & Password
  • Button Login được Enabled
  • Người dùng nhấn button Login
  • Kiểm tra bằng cách gọi API,
  • Nếu không thành công -> báo lỗi -> trở lại giao diện Login
  • Nếu thành công -> chuyển sang trang chủ của ứng dụng (trang danh bạ)

Nhận xét, ta thấy người dùng chỉ có thể nhấn button Login khi 2 input Username & Password có giá trị, ứng với 2 thuộc tính Username & Password ở ViewModel có giá trị. Vậy ta khai báo command LoginCommand cho button Login như sau:

Ở đây mình có 1 đối tượng IPeopleService _peopleService nhận giá trị tương ứng với 1 đối tượng thuộc class PeopleService trong hàm Constructor dựa theo cơ chế Dependency Injection, bạn có thể tham khảo thêm ở link cuối bài.

Quay lại với LoginCommand bạn thấy LoginCommand lần này cũng là một đối tượng thuộc class MvxCommand nhưng khai báo có 2 tham số, thêm 1 tham số CanExecute so với command thông thường, tham số này sẽ ứng với một phương thức dùng để xác nhận trạng thái của command là có được thực thi hay không, ứng với tầng view là Button có được Enabled hay không. Vì vậy khi điều kiên ở đây là false thì button tương ứng sẽ bị Disabled mà bạn không cần phải xử lý gì thêm trên tầng View.

Tuy nhiên vấn đề đặt ra là, làm sao để command này biết là điều kiện đã thay đổi để cập nhật lại trạng thái? Ta thấy với điều kiện trên thì trạng thái sẽ thay đổi khi giá trị của thuộc tính Username hoặc Password thay đổi. Để biết giá trị các thuộc tính thay đổi ta phải chuyển chúng sang dạng full propery và gọi phương thức RaiseCanExecuteChanged để nhắc command cập nhật lại trạng thái:

Tương tự ta cài đặt RegisterCommand cho RegisterViewModel

Ở đây thay vì chuyển sang một trang mới, khi người dùng đăng ký thành công ứng dụng sẽ chuyển lại trang LoginView trước đó, để đóng và back lại ta chỉ cần sử dụng Close(this);.

Bước 4: Binding các thuộc tính

Cuối cùng ta sẽ binding các thuộc tính và command tương ứng với các đối tượng trên View.

Trên Xamarin Android ta sử dụng MvxBind với các control trong tập tin layout (axml)

Tương tự ta binding trên ViewController của iOS

F5 để chạy Debug và kiểm tra kết quả.

Tham khảo