Tạo một ứng dụng Art Space

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

Bạn áp dụng những gì đã học trong chương này để tạo không gian nghệ thuật kỹ thuật số của riêng mình. Ứng dụng hiển thị loạt tác phẩm nghệ thuật bạn có thể giới thiệu. Không giống như các lớp học lập trình trước đây là bạn được hướng dẫn từng bước để làm theo. Tại đây bạn chỉ được cung cấp các hướng dẫn và đề xuất về ứng dụng bạn có thể tạo ra nhờ các khái niệm đã học được từ trước đến nay. Bạn được khuyến khích vận dụng khả năng sáng tạo của mình để tự tạo ra ứng dụng chỉ bằng một vài hướng dẫn hạn chế.

Việc tự tạo ứng dụng là một thách thức nhưng đừng lo vì bạn có nhiều thời gian để thực hành! Bạn có thể vận dụng những kỹ năng đã học được trong bối cảnh mới này. Bạn luôn có thể tham khảo các lớp học lập trình trước nếu không chắc chắn về cách triển khai một số phần của ứng dụng.

Khi tự tạo ứng dụng này và giải quyết các vấn đề gặp phải trong quá trình thực hiện, bạn sẽ tiếp thu nhanh hơn và ghi nhớ các khái niệm lâu hơn. Ngoài ra, ứng dụng này còn được tùy chỉnh hoàn toàn để bạn có thể sử dụng nó giới thiệu các tác phẩm sáng tạo như một phần trong danh mục nhà phát triển của mình!

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

  • Có thể tạo và chạy dự án trong Android Studio.
  • Trải nghiệm với cú pháp Kotlin, bao gồm biểu thức Booleanwhen.
  • Có khả năng sử dụng các tính năng cơ bản của Jetpack Compose, chẳng hạn như việc sử dụng trạng thái với đối tượng MutableState.
  • Trải nghiệm với hàm kết hợp, bao gồm các thành phần kết hợp là Text, ImageButton

Kiến thức bạn sẽ học được

  • Cách xây dựng nguyên mẫu có độ hoàn thiện thấp và biên dịch thành mã.
  • Cách tạo bố cục đơn giản bằng các yếu tố có thể kết hợp là RowColumn, đồng thời sắp xếp chúng với các tham số horizontalAlignmentverticalArrangement.
  • Cách tùy chỉnh các thành phần Compose với một đối tượng Modifier.
  • Cách xác định và sửa đổi trạng thái khi được kích hoạt, chẳng hạn như nhấn vào nút.

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

  • Một ứng dụng Android có thể hiển thị tác phẩm nghệ thuật, ảnh gia đình hoặc thậm chí là bộ sưu tập NFT của bạn!

Bạn cần có

  • Một máy tính đã cài đặt Android Studio.
  • Ảnh hoặc tác phẩm nghệ thuật số để hiển thị trong ứng dụng.

Ví dụ dưới đây cho thấy giao diện của ứng dụng sau khi hoàn tất dự án này:

Ứng dụng sẽ hiển thị các tác phẩm nghệ thuật khác nhau có nội dung mô tả khi người dùng nhấn vào nút Trước đó hoặc Tiếp theo.

Một mẫu của ứng dụng Art Space trưng bày bộ sưu tập tác phẩm nghệ thuật chọn lọc do Nhóm đào tạo cơ bản của Android cung cấp.

2. Xây dựng giao diện người dùng tĩnh với các thành phần kết hợp

Tạo một nguyên mẫu có độ hoàn thiện thấp

Nguyên mẫu có độ hoàn thiện thấp là một bản vẽ hoặc mô hình đơn giản, cung cấp ý tưởng cơ bản về giao diện của ứng dụng.

Tạo một nguyên mẫu có độ hoàn thiện thấp:

  1. Hãy nghĩ nội dung bạn muốn hiển thị trong ứng dụng Art Space và đối tượng mục tiêu là ai.
  2. Trên phương tiện ưa thích, hãy thêm các thành phần tạo nên ứng dụng của bạn. Một số thành phần cần xem xét bao gồm:
  • Hình ảnh tác phẩm nghệ thuật
  • Thông tin về tác phẩm nghệ thuật, chẳng hạn như tiêu đề, nghệ sĩ và năm phát hành
  • Bất kỳ thành phần nào khác, chẳng hạn như các nút giúp ứng dụng trở nên tương tác và linh động.
  1. Đặt các thành phần này vào nhiều vị trí khác nhau rồi đánh giá theo cách trực quan. Đừng lo về việc hoàn thiện ứng dụng ngay lần đầu tiên. Bạn luôn có thể chọn ngay một mẫu thiết kế rồi liên tục cải thiện mẫu thiết kế đó sau.
  1. Bạn có thể nghĩ ra một mẫu thiết kế có độ chân thực thấp giống như hình ảnh sau:

Một nguyên mẫu có độ hoàn thiện thấp sẽ hiển thị phần giữ chỗ cho hình ảnh, văn bản và các biểu tượng.

Hình 1. Các phần tử giữ chỗ trong mô hình giao diện người dùng giúp trực quan hóa sản phẩm cuối cùng.

Chuyển đổi mẫu thiết kế thành mã

Dùng nguyên mẫu để biên dịch mẫu thiết kế thành mã:

  1. Xác định các thành phần cần thiết trên giao diện người dùng để tạo ứng dụng.

Chẳng hạn: trong ví dụ về thiết kế, bạn cần có một thành phần kết hợp Image, hai thành phần kết hợp Text và hai thành phần kết hợp Button trong mã.

  1. Xác định nhiều phần logic của các ứng dụng và vẽ ranh giới xung quanh chúng.

Bước này giúp bạn chia màn hình thành các thành phần kết hợp với kích thước nhỏ và mường tượng về hệ thống phân cấp của các thành phần kết hợp đó.

Trong ví dụ này, bạn có thể chia màn hình thành 3 phần:

  • Tường tác phẩm nghệ thuật
  • Phần mô tả tác phẩm nghệ thuật
  • Bộ điều khiển màn hình

Bạn có thể sắp xếp từng phần trong số này với các thành phần kết hợp trong bố cục, chẳng hạn như yếu tố có thể kết hợp một thành phần kết hợp Row hoặc Column.

Ranh giới được vẽ trên nguyên mẫu có độ hoàn thiện thấp sẽ vạch ra 3 phần riêng biệt.

Hình 2. Ranh giới của các phần giúp nhà phát triển có khái niệm về các thành phần kết hợp.

  1. Đối với mỗi phần của ứng dụng chứa nhiều thành phần trên giao diện người dùng, hãy vẽ các ranh giới xung quanh chúng.

Các ranh giới này giúp bạn hiểu được mối quan hệ giữa các thành phần trong phần này.

Các ranh giới nhỏ hơn được vẽ trong từng phần của nguyên mẫu có độ hoàn thiện thấp, để phân tách văn bản và các nút.

Hình 3. Các đường ranh giới xung quanh văn bản và nút giúp nhà phát triển sắp xếp các thành phần kết hợp.

Giờ đây, bạn có thể dễ dàng xem cách sắp xếp các thành phần kết hợp, chẳng hạn như thành phần kết hợp TextButton, với bố cục các thành phần kết hợp

Sau đây là một vài ghi chú về các thành phần kết hợp bạn có thể áp dụng:

  • Thành phần kết hợpRow hoặc Column Hãy thử nghiệm bằng các tham số horizontalArrangementverticalAllignment trong các thành phần kết hợp là RowColumn để phù hợp với mẫu thiết kế của bạn.
  • Thành phần kết hợpImage Hãy nhớ điền tham số vào contentDescription. Như đã đề cập trong lớp học lập trình trước, TalkBack dùng tham số contentDescription để tăng khả năng hỗ trợ tiếp cận của ứng dụng. Nếu thành phần kết hợp Image chỉ được dùng với mục đích trang trí hoặc có phần tử Text mô tả thành phần kết hợp Image, thì bạn có thể đặt tham số contentDescription thành null.
  • Thành phần kết hợp Text Bạn có thể thử nghiệm với nhiều giá trị tham số fontSize, textAlignfontWeight để tạo kiểu cho văn bản. Bạn cũng có thể dùng hàm buildAnnotatedString để áp dụng nhiều kiểu cho một thành phần kết hợp Text.
  • Thành phần kết hợp Surface Bạn có thể thử nghiệm với nhiều giá trị khác nhau của Elevation, ColorBorderStroke cho Modifier.border để tạo các giao diện người dùng khác nhau trong thành phần kết hợp Surface.
  • Giãn cách và căn chỉnh Bạn có thể dùng các đối số Modifier, chẳng hạn như paddingweight, để giúp sắp xếp các thành phần kết hợp.
  1. Chạy ứng dụng trong trình mô phỏng hoặc thiết bị Android để đảm bảo ứng dụng được biên dịch.

Ví dụ về một ứng dụng Art Space hiển thị Still Life of Blue Rose và Other Flowers by Owen Scott.

Hình 4. Ứng dụng này hiển thị nội dung tĩnh, nhưng chưa thể tương tác với người dùng.

3. Tạo tính tương tác cho ứng dụng

Xác định độ tương tác của người dùng

Lợi thế của việc xây dựng không gian nghệ thuật số là bạn có thể tạo không gian tương tác và linh động cho người dùng. Trong thiết kế ban đầu, bạn đã tạo ra hai nút để người dùng tương tác. Tuy nhiên, đó là không gian nghệ thuật của riêng bạn! Bạn có thể thay đổi thiết kế và cách người dùng có thể tương tác với ứng dụng theo bạn ý muốn. Bây giờ, hãy dành một phút để suy nghĩ về cách bạn muốn người dùng tương tác với ứng dụng và cách ứng dụng sẽ phản hồi dựa trên các tương tác đó. Sau đây là một số hoạt động tương tác bạn có thể thêm vào ứng dụng của mình:

  • Hiển thị tác phẩm nghệ thuật tiếp theo hoặc trước đó khi nhấn nút.
  • Tua nhanh tác phẩm nghệ thuật được hiển thị đến album tiếp theo khi vuốt.
  • Hiển thị chú giải công cụ để biết thêm thông tin khi người dùng nhấn và giữ nút.

Tạo trạng thái cho các phần tử động

Việc trên phần giao diện người dùng sẽ hiển thị tác phẩm nghệ thuật tiếp theo hoặc trước đó khi nhấn vào một nút:

  1. Trước tiên, hãy xác định những thành phần trên giao diện người dùng cần thay đổi khi người dùng tương tác.

Trong trường hợp này, các thành phần trên giao diện người dùng là hình ảnh tác phẩm nghệ thuật, tiêu đề tác phẩm nghệ thuật, nghệ sĩ và năm.

  1. Nếu cần, hãy tạo một trạng thái cho từng phần tử giao diện người dùng động bằng đối tượng MutableState.
  2. Hãy nhớ thay thế các giá trị được mã hóa cứng với states đã xác định.

Viết logic có điều kiện cho tương tác

  1. Hãy suy nghĩ về hành vi bạn cần khi người dùng nhấn vào các nút, bắt đầu bằng nút Tiếp theo.

Khi người dùng nhấn vào nút Tiếp theo, họ sẽ thấy hình minh họa tiếp theo trong trình tự. Tạm thời, có thể khó xác định tác phẩm nghệ thuật tiếp theo nào sẽ hiển thị.

  1. Thêm giá trị nhận dạng, hay mã nhận dạng, ở dạng số trình tự bắt đầu bằng số 1 cho mỗi tác phẩm nghệ thuật.

Giờ đây rõ ràng là tác phẩm nghệ thuật tiếp theo đề cập đến tác phẩm nghệ thuật có mã nhận dạng tiếp theo trong trình tự.

Do tác phẩm nghệ thuật không phải là vô hạn nên bạn cũng có thể xác định hành vi của nút Tiếp theo khi hiển thị tác phẩm nghệ thuật cuối cùng trong chuỗi. Một hành vi phổ biến là quay lại tác phẩm nghệ thuật đầu tiên sau tác phẩm nghệ thuật cuối cùng.

  1. Trước tiên, hãy viết mã giả để ghi lại logic của mã không cần cú pháp Kotlin.

Nếu có 3 tác phẩm nghệ thuật cần hiển thị, mã giả cho logic của nút Tiếp theo sẽ trông giống như đoạn mã sau:

if (current artwork is the first artwork) {
    // Update states to show the second artwork.
}
else if (current artwork is the second artwork) {
    // Update states to show the third artwork.
}
else if (current artwork is the last artwork) {
   // Update state to show the first artwork.
}
  1. Chuyển mã giả thành mã Kotlin.

Bạn có thể dùng câu lệnh when để tạo logic điều kiện thay vì câu lệnh if else để giúp mã dễ đọc hơn khi có nhiều tác phẩm nghệ thuật.

  1. Để thực thi logic này khi nhấn nút, hãy đặt nó vào bên trong thành phần kết hợp Button đối số onClick().
  2. Lặp lại các bước như vậy để tạo logic cho nút Trước đó.
  3. Chạy ứng dụng rồi nhấn vào các nút để xác nhận các nút đó thay đổi hiển thị thành tác phẩm nghệ thuật trước hoặc tiếp theo.

4. Thử thách: Thiết kế cho nhiều kích thước màn hình

Một trong những điểm mạnh của Android là ứng dụng này hỗ trợ nhiều thiết bị và kích thước màn hình. Điều này có nghĩa là ứng dụng bạn tạo ra có thể tiếp cận nhiều đối tượng và được sử dụng theo nhiều cách. Để đảm bảo trải nghiệm tốt nhất cho mọi người dùng, bạn nên thử nghiệm ứng dụng trên các thiết bị nó dự định hỗ trợ. Ví dụ: trong ứng dụng mẫu hiện tại, ban đầu bạn có thể thiết kế, xây dựng và thử nghiệm ứng dụng cho thiết bị di động ở chế độ dọc. Tuy nhiên, đối với một số người dùng có thể thấy ứng dụng thú vị hơn khi sử dụng trên màn hình lớn hơn ở chế độ ngang.

Mặc dù máy tính bảng không phải là thiết bị được hỗ trợ chính cho ứng dụng này, nhưng bạn vẫn muốn đảm bảo nó sẽ không gặp lỗi nếu người dùng sử dụng trên màn hình lớn hơn.

Thử nghiệm ứng dụng cho màn hình lớn hơn trên máy tính bảng:

  1. Nếu bạn không có một thiết bị máy tính bảng Android, hãy tạo một Thiết bị Android ảo (AVD).
  2. Tạo và chạy ứng dụng ở chế độ máy tính bảng AVD trong chế độ ngang.
  3. Kiểm tra một cách trực quan để đảm bảo không có giao diện nào không chấp nhận được, chẳng hạn như một số thành phần trên giao diện người dùng bị cắt bớt, căn chỉnh bị lệch hoặc thao tác bằng nút không hoạt động như mong đợi.

Màn hình máy tính bảng của ứng dụng Art Space, hiển thị nội dung giao diện người dùng bị đẩy sang một bên màn hình và còn lại một khoảng trống lớn ở bên kia màn hình.

Hình 5. Ứng dụng cần được chỉnh sửa lại để hiển thị chính xác trên thiết bị lớn hơn.

  1. Thay đổi mã để sửa mọi lỗi được phát hiện. Hãy tham khảo hướng dẫn cơ bản về tính tương thích với chất lượng ứng dụng trên màn hình lớn.
  2. Kiểm tra lại ứng dụng ở chế độ máy tính bảng và điện thoại để đảm bảo bản sửa lỗi hoạt động trên cả hai loại thiết bị.

Màn hình máy tính bảng của ứng dụng Art Space hiển thị các thành phần giao diện người dùng như dự tính với hình ảnh được căn giữa và bảng áp phích nghệ thuật.

Hình 6. Ứng dụng hiện trông ổn trên màn hình lớn.

5. Chúc bạn may mắn!

Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn tạo ra không gian nghệ thuật của riêng mình! Hãy nhớ bạn không cần phải tạo ra ứng dụng hoàn hảo ngay ở lần đầu tiên. Bạn có thể thiết kế vài ứng dụng từ kiến thức Android hiện tại của mình và cải thiện nó sau khi bạn tiến bộ về kỹ năng.

Sau khi làm xong, hãy trưng bày tác phẩm trong danh mục của mình và cùng bạn bè, gia đình sử dụng nó . Nếu bạn muốn chia sẻ ứng dụng của mình lên mạng xã hội, hãy dùng hashtag #AndroidBasics.