Dự án: Ứng dụng Dogglers (Những chú chó)

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

Lưu ý: Lớp học lập trình này đã cũ và không còn được duy trì. Thay vào đó, vui lòng tham khảo khoá học Kiến thức cơ bản về cách tạo ứng dụng Android bằng Compose để biết các phương pháp mới nhất được đề xuất.

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à Dogglers (Những chú chó) mà bạn sẽ tự mình xây dựng. Trong lớp học lập trình này, bạn sẽ được hướng dẫn từng bước để hoàn thành dự án xây dựng ứng dụng Dogglers, bao gồm cả quá trình thiết lập và kiểm thử dự án trong Android Studio.

Lớp học lập trình này khác với các lớp học khác trong khoá học này. Không giống các lớp học lập trình trước đây, lớp học lập trình này không nhằm mục đích hướng dẫn từng bước về cách xây dựng ứng dụng. Thay vào đó, lớp học hướng đến việc thiết lập một dự án mà bạn sẽ hoàn tất một cách độc lập, đồng thời đưa ra hướng dẫn về cách tự hoàn tất ứng dụng cũng như tự kiểm tra.

Thay vì đưa ra mã nguồn giải pháp, chúng tôi sẽ cung cấp một bộ công cụ kiểm thử trong ứng dụng mà bạn sẽ tải xuống. Bạn sẽ chạy các bài kiểm thử này trong Android Studio (chúng tôi sẽ hướng dẫn bạn cách thực hiện việc này sau trong lớp học lập trình) để xem mã nguồn của bạn có vượt qua được các bài kiểm thử hay không. Bạn có thể sẽ phải thử vài lần, kể cả các nhà phát triển chuyên nghiệp cũng hiếm khi vượt qua được ngay từ lượt kiểm thử đầu tiên! Sau khi mã nguồn của bạn vượt qua mọi bài kiểm thử, bạn có thể coi như dự án này đã hoàn tất.

Chúng tôi hiểu rằng có thể bạn muốn có mã nguồn giải pháp chỉ để kiểm tra lại. Chúng tôi cố ý không cung cấp mã nguồn giải pháp vì muốn bạn thực hành như một nhà phát triển chuyên nghiệp. Để làm được như vậy, có thể bạn sẽ phải vận dụng một số kỹ năng mà bạn chưa thực hành nhiều, chẳng hạn như:

• Dùng Google để tra cứu các thuật ngữ, thông báo lỗi và các đoạn mã trong ứng dụng mà bạn thấy lạ;
• Kiểm thử mã, đọc lỗi, sau đó điều chỉnh mã rồi kiểm thử lại;
• Quay lại nội dung trước đó trong Android Basics (Thông tin cơ bản về Android) để ôn lại kiến thức đã học;
• So sánh mã nguồn mà bạn biết là mã hoạt động tốt (chẳng hạn như mã nguồn được cung cấp trong dự án hoặc mã nguồn giải pháp trước đây từ các ứng dụng khác ở Bài 2) với mã nguồn mà bạn đang viết.

Việc này thoạt nhìn có vẻ sẽ rất khó khăn, nhưng chúng tôi chắc chắn 100% nếu bạn có thể hoàn thành Bài 2 thì bạn đã sẵn sàng cho dự án này. Hãy bình tĩnh và đừng bỏ cuộc. Bạn có thể làm được!

Đ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 2 của khoá học Kiến thức cơ bản về Kotlin trên Android (Android Basics in Kotlin).

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

• Bạn sẽ xây dựng một ứng dụng có tên Dogglers, ứng dụng này hiển thị thông tin trong RecyclerView sử dụng các kỹ năng bạn đã học được ở Bài 2.

Bạn cần có

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

2. Tổng quan về ứng dụng

Chào mừng bạn đến với dự án: Ứng dụng Dogglers (Những chú chó)!

Tại Google, chúng tôi trìu mến gọi đồng nghiệp của mình là các Googler (Thành viên Google). Khi nhiều thành viên Google nuôi chó cưng, chúng tôi nghĩ việc tạo ra một ứng dụng với cái tên Dogglers dành cho những người bạn chó cưng này sẽ thật vui. Nhiệm vụ của bạn là triển khai Dogglers, ứng dụng này sẽ hiển thị danh sách cuộn có những chú chó cưng của nhân viên Google cùng một chút thông tin về mỗi chú chó, chẳng hạn như tên, tuổi, sở thích và một bức ảnh. Trong dự án này, bạn sẽ xây dựng bố cục cho các mục RecyclerView trong ứng dụng Dogglers và triển khai bộ chuyển đổi để danh sách các chú chó được hiển thị theo ba cách: theo bố cục cuộn ngang, cuộn dọc và lưới cuộn dọc.

Khi chạy ứng dụng này, bạn sẽ thấy các tuỳ chọn bố cục ngang, dọc và lưới.

Tuỳ chọn đầu tiên là chế độ xem tuần hoàn cuộn theo chiều dọc trong đó các mục chiếm toàn bộ chiều rộng của màn hình.

Tuỳ chọn thứ hai hiển thị danh sách những chú chó ở chế độ xem tuần hoàn cuộn theo chiều ngang.

Tuỳ chọn thứ ba hiển thị các chú chó theo bố cục theo kiểu lưới cuộn dọc, trong đó mỗi hàng sẽ hiển thị hai chú chó.

Tất cả các bố cục này đều được cùng một lớp bộ chuyển đổi hỗ trợ. Nhiệm vụ của bạn là xây dựng bố cục cho thẻ chế độ xem tuần hoàn, sau đó triển khai bộ chuyển đổi để mỗi mục được điền sẵn thông tin về từng chú chó.

3. Bắt đầu

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

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

URL tải mã nguồn ban đầu:

https://github.com/google-developer-training/android-basics-kotlin-dogglers-app/tree/main

Tên nhánh có mã khởi đầu: main

1. Chuyển đến trang kho lưu trữ GitHub được cung cấp cho dự án.
2. Xác minh rằng tên nhánh khớp với tên nhánh được chỉ định trong lớp học lập trình. Ví dụ: trong ảnh chụp màn hình sau đây, tên nhánh là main.

3. Trên trang GitHub cho dự án này, nhấp vào nút Code (Mã). Thao tác này sẽ khiến một cửa sổ bật lên.

4. Trong cửa sổ bật lên, 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.
5. 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)).
6. 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 (Mở).

Lưu ý: Nếu Android Studio đã mở thì chuyển sang chọn tuỳ chọn File (Tệp) > Open (Mở) trong trình đơn.

3. Trong trình duyệt tệp, hãy chuyển đến vị trí của thư mục dự án chưa giải nén (thường nằm trong thư mục Downloads (Tệp đã tải xuống)).
4. Nhấp đúp vào thư mục dự án đó.
5. Chờ Android Studio mở dự án.
6. Nhấp vào nút Run (Chạy) để tạo bản dựng và chạy ứng dụng. Đảm bảo ứng dụng được xây dựng như mong đợi.

Dự án được sắp xếp thành các gói riêng biệt. Mặc dù đã triển khai hầu hết các chức năng, nhưng bạn vẫn cần phải triển khai DogCardAdapter. Bạn cũng cần sửa đổi hai tệp bố cục. Các tệp khác được thảo luận khi cần trong hướng dẫn sau.

Triển khai bố cục

Cả bố cục dọc và ngang đều giống nhau. Vì vậy, bạn chỉ cần triển khai một tệp bố cục cho cả hai. Bố cục lưới hiển thị tất cả thông tin giống nhau nhưng tên, tuổi và sở thích của các chú chó được xếp theo chiều dọc, vì vậy bạn cần có bố cục riêng cho trường hợp này. Cả hai bố cục đều cần có bốn chế độ xem để hiển thị thông tin về mỗi chú chó.

1. Một ImageView có ảnh của chú chó
2. TextView có tên của chú chó
3. TextView có tuổi của chó
4. Một TextView với sở thích của chú chó

Bạn cũng sẽ thấy mỗi thẻ có đường viền và bóng được thiết kế cụ thể. Điều này là do MaterialCardView (đã được thêm vào tệp bố cục trong dự án khởi đầu). Trong mỗi MaterialCardView là một ConstraintLayout, tại đây bạn sẽ cần thêm các chế độ xem còn lại.

Mẹo: Bạn có thể sử dụng bất kỳ mã nhận dạng nào bạn đã chọn cho mỗi chế độ xem, nhưng lưu ý cả hai bố cục này sẽ sử dụng cùng một lớp ViewHolder, vì vậy bạn phải đảm bảo các chế độ xem trong mỗi bố cục sử dụng cùng một mã nhận dạng. Ví dụ: cả bố cục lưới và bố cục ngang/dọc đều có thể có một TextView với mã nhận dạng dog_name.

Có hai tệp XML bạn cần xử lý để triển khai bố cục: vertical_horizontal_list_item.xml cho bố cục ngang và dọc, và grid_list_item.xml cho bố cục lưới.

1. Xây dựng bố cục cho danh sách dọc và ngang.

Mở vertical_horizontal_list_item.xml, và ở ConstraintLayout bên trong, hãy tạo bố cục phù hợp với hình ảnh.

2. Xây dựng bố cục lưới.

Mở grid_list_item.xml, và ở ConstraintLayout bên trong, hãy tạo bố cục phù hợp với hình ảnh.

Triển khai bộ chuyển đổi

Sau khi xác định bố cục, nhiệm vụ tiếp theo là triển khai bộ chuyển đổi RecyclerView. Mở DogCardAdapter.kt trong gói bộ chuyển đổi. Bạn sẽ thấy có nhiều TODO nhận xét giúp làm rõ những gì bạn cần triển khai.

Bạn sẽ cần thực hiện năm bước để triển khai bộ chuyển đổi.

1. Xác định một biến hoặc hằng số cho danh sách dữ liệu về các chú chó. Bạn có thể tìm thấy danh sách này trong gói dữ liệu trong đối tượng có tên là DataSource và có dạng như sau:

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

Thuộc tính dogs thuộc loại List<Dog>. Bạn có thể tìm thấy lớp Dog trong gói model (mô hình) và xác định bốn thuộc tính: một hình ảnh (được biểu diễn bằng một mã tài nguyên) và ba thuộc tính String.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Đặt biến bạn xác định trong DogCardAdapter thành danh sách dogs trong đối tượng DataSource.

2. Triển khai DogCardViewHolder. Trình giữ chế độ xem phải liên kết bốn chế độ xem cần được đặt cho mỗi thẻ chế độ xem tuần hoàn. Trình giữ chế độ xem đó cũng sẽ được chia sẻ cho cả bố cục grid_list_item và vertical_horizontal_list_item vì tất cả các chế độ xem sẽ được chia sẻ giữa cả hai bố cục. DogCardViewHolder phải bao gồm các thuộc tính cho các mã chế độ xem sau đây: dog_image, dog_name, dog_age và dog_hobbies.
3. Trong onCreateViewHolder(), bạn muốn phóng to bố cục grid_list_item hoặc vertical_horizontal_list_item. Làm cách nào để biết cần bố cục nào? Trong định nghĩa của bộ chuyển đổi, bạn có thể thấy một giá trị được gọi là bố cục thuộc loại Int được truyền vào khi tạo thực thể của bộ chuyển đổi.

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

Giá trị này tương ứng với giá trị được xác định trong đối tượng Layout, nằm trong gói const.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

Giá trị của bố cục sẽ là 1, 2 hoặc 3, nhưng bạn có thể kiểm tra giá trị này với các giá trị nhận dạng VERTICAL, HORIZONTAL và GRID từ đối tượng Layout.

Đối với bố cục GRID, phóng to bố cục grid_list_item; còn đối với bố cục HORIZONTAL và VERTICAL, hãy phóng to bố cục vertical_horizontal_list_item. Phương thức này sẽ trả về một bản sao DogCardViewHolder đại diện cho bố cục được phóng to.

Mẹo: Bạn có thể sử dụng câu lệnh có điều kiện, như nếu hoặc khi, để đặt biến dựa trên loại bố cục (grid_list_item đối vớiGRID vàvertical_horizontal_list_item đối vớiVERTICAL hoặcHORIZONTAL). Sau khi có được mã bố cục đúng, bạn chỉ cần chuyển mã đó vào phương thức để phóng to cục.

4. Triển khai getItemCount() để trả về độ dài danh sách các chú chó.
5. Cuối cùng, bạn cần triển khai onBindViewHolder() để đặt dữ liệu trong mỗi thẻ chế độ xem tuần hoàn. Sử dụng position để truy cập vào dữ liệu đúng về các chú chó trong danh sách, đồng thời đặt hình ảnh và tên các chú chó. Sử dụng tài nguyên chuỗi, dog_age và dog_hobbies để định dạng độ tuổi và sở thích một cách phù hợp.

Mẹo: Trong phương thức onBindViewHolder(), chúng tôi đã xác định một biến resources mà bạn có thể dùng để tham chiếu các tài nguyên chuỗi mà không cần phải luôn sử dụng context?.resources.

Sau khi triển khai xong bộ chuyển đổi, chạy ứng dụng của bạn trên trình mô phỏng để xác minh rằng mọi thứ được triển khai đúng cách.

4. Kiểm thử ứng dụng

Dự án Dogglers chứa mục tiêu "androidTest" với một số trường hợp kiểm thử.

Chạy bài kiểm thử

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

Đối với trường hợp kiểm thử đơn lẻ, hãy mở một lớp trường hợp kiểm thử (test case) rồi nhấp vào mũi tên màu xanh lục ở bên trái phần khai báo về lớp đó. Sau đó, chọn tuỳ chọn Run (Chạy) trên trình đơn. Thao tác này sẽ chạy tất cả các kiểm thử trong trường hợp kiểm thử.

Thông thường, bạn sẽ chỉ muốn chạy một kiểm thử, ví dụ, nếu chỉ một kiểm thử không đạt và các kiểm thử khác đạ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).

Nếu có nhiều trường hợp kiểm thử, bạn cũng có thể chạy toàn bộ 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).

Vui lòng lưu ý Android Studio sẽ mặc định chuyển đến mục tiêu cuối cùng mà bạn đã chạy (ứng dụng, mục tiêu kiểm thử, v.v.). Do đó, nếu trình đơn vẫn cho thấy Run > Run 'app' (Chạy > Chạy "ứng dụng"), thì bạn có thể chạy mục tiêu kiểm thử này bằng cách chọn Run > Run (Chạy > Chạy).

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

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.

Mẹo: Để các lượt kiểm thử đạt, không đạt hoặc cả đạt và không đạt xuất hiện trong ngăn bên trái, bạn có thể dùng hai nút ở góc trên cùng bên trái. Thao tác chọn dấu kiểm sẽ làm xuất hiện các lượt kiểm thử đã đạt, thao tác chọn biểu tượng hình tròn có một đường kẻ ngang xuyên qua sẽ làm xuất hiện danh sách lượt kiểm thử không đạt. Theo mặc định, chỉ các lượt kiểm thử không đạt mới được liệt kê.

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.

Ví dụ: trong thông báo lỗi ở trên, kiểm thử sẽ hướng đến việc kiểm tra xem một chuỗi có chứa từ "Nox" có hiển thị hay không. Tuy nhiên, quy trình kiểm thử không thành công. Có thể không thể tìm thấy văn bản, điều này có nghĩa là văn bản đó có thể chưa được hiển thị.