Dự án: Ứng dụng về các loài lưỡng cư

1. Trước khi bắt đầu

Lớp học lập trình này giới thiệu một ứng dụng mới có tên là Amphibians (Động vật lưỡng cư) mà bạn sẽ tự mình xây dựng. Lớp học lập trình này hướng dẫn bạn qua các bước để hoàn thành dự án ứng dụng Amphibians, bao gồm cả việc thiết lập và kiểm thử trong Android Studio.

Điều kiện tiên quyết

  • Dự án này dành cho những người dùng đã hoàn thành Bài 4 của khóa học Kiến thức cơ bản về Android trong Kotlin.

Sản phẩm bạn sẽ tạo ra

  • Triển khai kết nối mạng trong ứng dụng sử dụng Retrofit và Moshi và xử lý lỗi thích hợp.

Bạn cần có

  • Một máy tính đã cài đặt Android Studio.

2. Tổng quan về ứng dụng hoàn thiện

Chào mừng bạn đến với Dự án: Amphibians!

Cho đến thời điểm này, tất cả các ứng dụng bạn xây dựng đều dựa vào dữ liệu được lưu trữ cục bộ. Lần này, bạn sẽ dùng một ứng dụng hiển thị thông tin về các loài động vật lưỡng cư và sử dụng kiến thức của bạn về kết nối mạng, phân tích cú pháp JSON và xem các mô hình để cho phép ứng dụng sử dụng dữ liệu từ mạng. Ứng dụng sẽ nhận dữ liệu từ một API tuỳ chỉnh trong dự án này và hiển thị dữ liệu đó ở chế độ xem danh sách.

Trong ứng dụng cuối cùng, màn hình đầu tiên người dùng nhìn thấy sẽ hiển thị tên của từng loài trong chế độ xem tuần hoàn.

7697a4e0c9bb5a76.png

Khi nhấn vào một mục trong danh sách, người dùng sẽ được chuyển đến màn hình chi tiết trên đó cũng hiển thị tên của các loài cũng như thông tin mô tả chi tiết.

9797605a20dc68d1.png

Mặc dù phần giao diện người dùng của ứng dụng này đã được tạo cho bạn, nhưng việc chạy dự án khởi động sẽ không hiển thị bất kỳ dữ liệu nào. Bạn cần triển khai phần kết nối mạng của ứng dụng, sau đó hiển thị dữ liệu đã tải xuống trong bố cục.

3. Bắt đầu

Tải mã dự án xuống

Lưu ý tên thư mục là android-basics-kotlin-amphibians-app. Chọn thư mục này khi bạn mở dự án trong Android Studio.

Để lấy mã nguồn cho lớp học lập trình này và mở đoạn mã đó trong Android Studio, hãy thực hiện các bước sau.

Lấy mã

  1. Nhấp vào URL được cung cấp. Thao tác này sẽ mở trang GitHub của dự án trong một trình duyệt.
  2. Trên trang GitHub của dự án, hãy nhấp vào nút Code (Mã), một hộp thoại sẽ xuất hiện.

5b0a76c50478a73f.png

  1. Trong hộp thoại này, hãy nhấp vào nút Download ZIP (Tải tệp ZIP xuống) để lưu dự án vào máy tính. Chờ quá trình tải xuống hoàn tất.
  2. Xác định vị trí của tệp trên máy tính (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  3. Nhấp đúp vào tệp ZIP để giải nén. Thao tác này sẽ tạo một thư mục mới chứa các tệp dự án.

Mở dự án trong Android Studio

  1. Khởi động Android Studio.
  2. Trong cửa sổ Welcome to Android Studio (Chào mừng bạn đến với Android Studio), hãy nhấp vào Open an existing Android Studio project (Mở một dự án hiện có trong Android Studio).

36cc44fcf0f89a1d.png

Lưu ý: Nếu Android Studio đã mở sẵn thì thay vào đó, hãy chọn tuỳ chọn sau đây trong trình đơn File > New > Import Project (Tệp > Mới > Nhập dự án).

21f3eec988dcfbe9.png

  1. Trong hộp thoại Import Project (Nhập dự án), hãy chuyển đến nơi chứa thư mục dự án đã giải nén (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
  2. Nhấp đúp vào thư mục dự án đó.
  3. Chờ Android Studio mở dự án.
  4. Nhấp vào nút Run (Chạy) 11c34fc5e516fb1c.png để xây dựng và chạy ứng dụng. Hãy đảm bảo ứng dụng được dựng như mong đợi.
  5. Duyệt qua các tệp dự án trong cửa sổ công cụ Project (Dự án) để xem cách ứng dụng được thiết lập.

Triển khai dịch vụ API

Giống như trong các dự án trước đây, hầu hết ứng dụng đã được triển khai cho bạn. Bạn chỉ cần triển khai phần kết nối mạng bằng cách sử dụng những kiến thức đã học trong Bài 4. Vui lòng làm quen với mã khởi động. Hầu hết các khái niệm đều đã trở nên quen thuộc từ Bài 1 đến 3. Các bước sau đây nêu ra các phần cụ thể của mã khi cần thiết để hoàn thành từng bước.

Ứng dụng hiển thị danh sách dữ liệu về động vật lưỡng cư từ mạng. Dữ liệu về động vật lưỡng cư xuất phát từ một đối tượng JSON được API trả về. Xem tệp Amphibian.kt trong gói mạng. Lớp học này mô hình hóa một đối tượng động vật lưỡng cư duy nhất, danh sách các đối tượng đó sẽ được trả về từ API. Mỗi động vật lưỡng cư có ba thuộc tính: tên, loại và mô tả.

data class Amphibian(
    val name: String,
    val type: String,
    val description: String
)

Phần phụ trợ cho API này khá đơn giản. Có hai thông tin chính bạn cần để truy cập dữ liệu về động vật lưỡng cư: URL cơ sở và điểm cuối để lấy danh sách động vật lưỡng cư.

  1. URL cơ sở: https://developer.android.com/courses/pathways/android-basics-kotlin-unit-4-pathway-2/
  2. LẤY danh sách động vật lưỡng cư: android-basics-kotlin-unit-4-pathway-2-project-api.json

Dự án đã có phần phụ thuộc Retrofit và Moshi. Trong gói mạng, bạn sẽ thấy tệp AmphibianApiService.kt. Tệp này có chứa TODO nhận xét. Thực hiện năm nhiệm vụ sau để triển khai ứng dụng động vật lưỡng cư.:

  1. Tạo một biến để lưu trữ URL cơ sở của API.
  2. Tạo đối tượng Moshi bằng hàm Kotlin adapter factory mà Retrofit sẽ sử dụng để phân tích cú pháp JSON.
  3. Tạo phiên bản aRetrofit sử dụng bộ chuyển đổi Moshi.
  4. Triển khai giao diện AmphibianApiService với hàm suspend cho mỗi phương thức API (đối với ứng dụng này, chỉ có một phương thức để LẤY danh sách động vật lưỡng cư).
  5. Tạo đối tượng AmphibianApi để hiển thị dịch vụ Retrofit được khởi tạo chậm sử dụng giao diện AmphibianApiService.

Triển khai ViewModel

Sau khi API được triển khai, bạn sẽ thực hiện yêu cầu API động vật lưỡng cư và lưu trữ các giá trị cần được hiển thị. Bạn sẽ thực hiện việc này trong lớp AmphibianViewModel.kt có trong gói giao diện người dùng.

Bạn sẽ thấy phía trên phần khai báo về lớp là một enum được gọi là AmphibianApiStatus.

enum class AmphibianApiStatus {LOADING, ERROR, DONE}

Ba giá trị khả dĩ là LOADING, ERROR và DONE được dùng để hiển thị trạng thái của yêu cầu đối với người dùng.

Trong lớp AmphibianViewModel.kt, bạn sẽ cần triển khai một số biến LiveData, một hàm để tương tác với API và một hàm để xử lý việc thiết lập động vật lưỡng cư trên màn hình chi tiết.

  1. Thêm một _status một biến MutableLiveData riêng tư có thể giữ một enum AmphibianApiStatus và thuộc tính sao lưu status cho trạng thái đó.
  2. Thêm một biến amphibians và thuộc tính sao lưu riêng tư _amphibians cho danh sách động vật lưỡng cư thuộc loại List<Amphibian>.
  3. Thêm một biến _amphibian thuộc loại MutableLiveData<Amphibian> và thuộc tính sao lưu amphibian cho đối tượng động vật lưỡng cư đã chọn, thuộc loại LiveData<Amphibian>. Nó sẽ được dùng để lưu trữ động vật lưỡng cư đã chọn trên màn hình chi tiết.
  4. Xác định hàm có tên là getAmphibianList(). Chạy một coroutine bằng ViewModelScope, bên trong coroutine, thực hiện yêu cầu GET để tải dữ liệu về động vật lưỡng cư xuống bằng cách gọi phương thức getAmphibians() của dịch vụ Retrofit. Bạn sẽ cần sử dụng try và catch để xử lý các lỗi một cách thích hợp. Trước khi yêu cầu, hãy đặt giá trị của _status thành AmphibianApiStatus.LOADING . Yêu cầu thành công sẽ đặt _amphibians thành danh sách động vật lưỡng cư từ máy chủ và đặt _status thành AmphibianApiStatus.DONE. Trong trường hợp xảy ra lỗi, bạn phải đặt _amphibians thành danh sách trống và _status đặt thành AmphibianApiStatus.ERROR.
  5. Triển khai phương thức onAmphibianClicked() để đặt thuộc tính _amphibian bạn đã xác định cho đối số động vật lưỡng cư được chuyển vào hàm. Phương pháp này đã được gọi khi một động vật lưỡng cư được chọn, để phương pháp này được hiển thị trên màn hình chi tiết.

Cập nhật giao diện người dùng từ ViewModel

Sau khi triển khai ViewModel, bạn chỉ cần chỉnh sửa lớp phân mảnh và tệp bố cục để sử dụng các liên kết dữ liệu.

  1. Mô hình ViewModel xem đã được tham chiếu trong AmphibianListFragment. Trong phương thức onCreateView(), sau khi bố cục được tăng cường, bạn chỉ cần gọi phương thức getAmphibianList() từ ViewModel.
  2. Trong fragment_amphibian_list.xml, các thẻ <data> cho biến liên kết dữ liệu đã được thêm vào các tệp bố cục. Bạn chỉ cần triển khai các TODO (VIỆC CẦN LÀM) để giao diện người dùng cập nhật dựa trên mô hình chế độ xem. Đặt các đường liên kết phù hợp cho listData và apiStatus.
  3. Trong fragment_amphibian_detail.xml, hãy triển khai TODO (VIỆC CẦN LÀM) để đặt các thuộc tính văn bản thích hợp cho tên và nội dung mô tả động vật lưỡng cư.

4. Hướng dẫn kiểm thử

Chạy kiểm thử

Để chạy kiểm thử, bạn có thể làm theo một trong những cách sau:

Với trường hợp kiểm thử đơn lẻ, mở một lớp trường hợp kiểm thử và nhấp vào mũi tên xanh lá ở phía bên trái phần khai báo lớp. Sau đó, chọn tuỳ chọn Run (Chạy) trên trình đơn. Thao tác này sẽ chạy toàn bộ chương trình kiểm thử trong trường hợp kiểm thử.

a32317d35c77142b.png

Thông thường, bạn sẽ chỉ muốn chạy một chương trình kiểm thử, chẳng hạn như khi một kiểm thử không đạt còn các kiểm thử khác thì đạt. Bạn có thể chạy một kiểm thử duy nhất tương tự như cách thực hiện trên toàn bộ trường hợp kiểm thử. Sử dụng mũi tên màu xanh lục rồi chọn tuỳ chọn Run (Chạy).

ac6244434cfafb60.png

Nếu có nhiều trường hợp kiểm thử, bạn cũng có thể chạy toàn bộ các bài kiểm thử. Tương tự như cách chạy ứng dụng, bạn có thể thấy tuỳ chọn này trên trình đơn Run (Chạy).

7a925c5e196725bb.png

Xin lưu ý rằng chế độ mặc định trong Android Studio là mục tiêu bạn chạy gần nhất (ứng dụng, mục tiêu kiểm thử, v.v.). Do đó, nếu trình đơn vẫn thể hiện Chạy > Chạy "ứng dụng", thì bạn có thể chạy mục tiêu kiểm thử bằng cách chọn Chạy > Chạy.

ee1e227446c536fe.png

Sau đó chọn mục tiêu kiểm thử trong trình đơn bật lên.

d570c947769db65c.png

Kết quả chạy kiểm thử sẽ xuất hiện trên thẻ Run (Chạy). Trong ngăn bên trái, bạn sẽ thấy danh sách các lượt kiểm thử không đạt (nếu có). Các lượt kiểm thử không đạt được đánh dấu bằng dấu chấm than màu đỏ bên cạnh tên chức năng. Các lượt kiểm thử đạt sẽ được đánh dấu bằng dấu kiểm màu xanh lục.

6d68f2bf589501ae.png

Nếu kiểm thử không đạt, thì văn bản đầu ra sẽ cung cấp thông tin giúp bạn khắc phục vấn đề khiến kiểm thử không đạt.

92f3c8219c03651d.png

Ví dụ: trong thông báo lỗi ở trên, quy trình kiểm thử đang kiểm tra xem TextView có đang sử dụng một tài nguyên chuỗi cụ thể hay không. Tuy nhiên, quy trình kiểm thử không thành công. Văn bản sau "Expected" (Dự kiến) và "Got" (Đã nhận) không khớp, có nghĩa là giá trị mà kiểm thử dự kiến không khớp với giá trị từ ứng dụng đang chạy. Trong ví dụ này, chuỗi được dùng trong TextView không phải là squeeze_count trên thực tế như dự kiến của bài kiểm thử.