Hành trình xây dựng ứng dụng Kungu trên Solana kết hợp sức mạnh của AI

Xin chào cộng đồng! Hôm nay, tôi xin chia sẻ một nghiên cứu điển hình (case study) hoàn chỉnh về việc xây dựng Kungu — một ứng dụng danh bạ các cộng đồng nói tiếng Tây Ban Nha trên nền tảng Solana. Đây không phải là một hướng dẫn tuyến tính, mà là một biên niên sản của quá trình phát triển thực tế, đầy ắp các câu lệnh (prompts) AI, những thay đổi thiết kế (design pivots) và giải pháp cho những lỗi bất ngờ.

Mục tiêu của bài viết là chứng minh cách thức để bắt đầu từ một khuôn mẫu (template) và phát triển nó thành một ứng dụng với bản sắc thị giác độc đáo, sử dụng AI như một "người đồng hành" trong lập trình.

1. Stack Công nghệ: Bộ công cụ tối ưu

Việc lựa chọn công cụ là yếu tố then chốt để đảm bảo sự nhanh nhẹn cho dự án:

• Nền tảng: Sử dụng Solana Mobile Monorepo từ Beeman, cài đặt thông qua bun.
• Tạo giao diện (UI): Lên ý tưởng ban đầu với Magic Patterns.
• Trợ lý mã hóa: Codex (hoặc các công cụ tương tự) được tích hợp ngay trong trình soạn thảo (WebStorm).
• Styling: Một cấu hình hiện đại và cụ thể: Uniwind (để sử dụng các lớp của Tailwind trong React Native), tailwind-variants và heroui-native.
• Điều hướng: Expo Router, cho phép điều hướng dựa trên cấu trúc tệp tin.
• Hoạt ảnh: Sử dụng thư viện react-native-reanimated.

2. Bắt đầu: Clone Monorepo và chuẩn bị AI

Bước đầu tiên là thiết lập nền móng. Monorepo của Solana cung cấp sẵn toàn bộ logic kết nối ví (wallet) để sử dụng ngay.

# 1. Clone template
bun x create-seed@latest -t gh:beeman/solana-mobile-monorepo

# 2. Mở dự án trong trình soạn thảo

Bài học chính: Để AI (Codex) thực sự hữu ích, chúng ta cần sử dụng nó trực tiếp bên trong trình soạn thảo mã. Cách này giúp AI tiếp cận được cấu trúc tệp tin dự án, tệp package.json và mã nguồn hiện có, từ đó đưa ra các phản hồi chính xác hơn nhiều.

3. Giai đoạn 1: Tạo "Danh bạ cộng đồng kiểu Rolodex"

Ý tưởng ban đầu là hiển thị các cộng đồng dưới dạng các thẻ được xếp chồng lên nhau, giống như một cuốn danh thiếp Rolodex. Để làm được điều này, chúng tôi đã sử dụng một prompt rất chi tiết gửi tới AI.

Câu lệnh (Prompt) tạo thành phần

Prompt này được thực thi ngay trong chat của trình soạn thảo, chỉ định rõ đường dẫn (apps/native) và các giới hạn để không làm ảnh hưởng tới logic của Solana.

"Hãy đóng vai một chuyên gia React Native. Tôi muốn triển khai một danh bạ cộng đồng kiểu 'Rolodex' trong dự án cụ thể này.

Bối cảnh dự án:

• Vị trí: apps/native
• Điều hướng: Expo Router (dựa trên tệp)
• Tệp đích: apps/native/app/(drawer)/(tabs)/index.tsx

Nhiệm vụ:

• Tạo Thành phần: Tạo tệp mới apps/native/components/CommunityRolodex.tsx.
• Logic Thành phần: Định nghĩa một mảng COMMUNITIES (tên, logoUrl, liên kết). Sử dụng FlatList với giao diện thẻ xếp chồng. Đảm bảo chỉ hiển thị với người dùng đã xác thực.
• Styling: Sử dụng giải pháp styling hiện có của dự án (uniwind).
• Tương tác: Sử dụng Linking.openURL cho các liên kết ngoài."

Thách thức về phong cách: Uniwind vs NativeWind

Rất nhanh chóng, chúng tôi phát hiện ra dự án không sử dụng NativeWind mà là uniwind. Điều này đòi hỏi một prompt mới tập trung hoàn toàn vào phong cách, yêu cầu AI sử dụng className và dựa trên các thành phần của heroui-native.

4. Giai đoạn 2: Pivots thiết kế sang phong cách Neo-Brutalism

Hiệu ứng Rolodex cảm giác hơi chật chội trên giao diện di động. Thay vì cố gắng ép buộc nó, chúng tôi đã đưa ra một quyết định thiết kế táo bạo: chuyển sang phong cách Neo-Brutalist.

Chủ nghĩa Neo-Brutalism trong UI được đặc trưng bởi màu tương phản cao, viền và bóng cứng cáp, cùng với kiểu chữ mạnh mẽ. Nó ưu tiên sự trung thực của các vật liệu kỹ thuật số.

Điều này đồng nghĩa với việc thống nhất toàn bộ giao diện người dùng (UI) của ứng dụng theo hướng thẩm mỹ mới này, loại bỏ hoàn toàn diện mạo ban đầu của template.

5. Giai đoạn 3: Tái cấu trúc điều hướng và UI

Khi phong cách mới đã được định hình, cấu trúc của ứng dụng cũng cần phải thay đổi theo.

• Từ Drawer sang Tab Bar: Chúng tôi thay thế menu bên (Drawer) bằng thanh điều hướng dưới cùng (Bottom Tab Bar) — một tiêu chuẩn vàng trong UX di động.
• Màn hình Home như một Ví: Chúng tôi lấy cảm hứng từ cách bố trí giao diện của Jupiter (Jup.ag) để thiết kế lại màn hình chính, tập trung vào tính năng sử dụng và hiển thị tài sản, nhưng vẫn giữ vững thẩm mỹ Neo-Brutalist.
• Điều chỉnh Icon và Phông chữ: Một thách thức phổ biến là các icon và văn bản trong Tab Bar mới quá lớn. Chúng tôi cần một prompt cụ thể để AI điều chỉnh kích thước và căn chỉnh chúng theo thiết kế nhỏ gọn, tối giản mới.

6. Xử lý sự cố: Khắc phục lỗi thực tế

Không dự án nào là không gặp lỗi. Dưới đây là hai vấn đề quan trọng nhất xuất hiện:

Lỗi Build trên Android (Gradle Cache)

Khi biên dịch, một lỗi xuất hiện trong thư mục .../android/app/build/intermediates/.... Vấn đề này không liên quan đến mã React Native, mà nằm ở bộ nhớ đệm của Gradle.

Giải pháp nhanh từ terminal:

cd android && ./gradlew clean && cd ..

Bất nhất trong chế độ Sáng/Tối (Dark/Light Mode)

Khi triển khai tính năng thay đổi chủ đề, lệnh bun run check-types đã báo một lỗi kiểu trong TypeScript. Hệ thống không thể đảm bảo rằng systemColorScheme luôn là 'light' hoặc 'dark'.

Giải pháp (Ánh xạ an toàn):

// Mapeo an toàn để TypeScript không phàn nàn
const themeToSet = (systemColorScheme === 'light' || systemColorScheme === 'dark') 
  ? systemColorScheme 
  : 'dark'; // Mặc định là 'dark' nếu giá trị không mong muốn xảy ra

Kết luận: Quy trình hữu cơ dưới sự hỗ trợ của AI

Kungu đã tiến hóa từ một ý tưởng đơn giản về "thẻ Rolodex" thành một ứng dụng Web3 với bản sắc thị giác mạnh mẽ và cấu trúc chuyên nghiệp. Bài học quan trọng nhất là đừng sợ hãi khi phải thay đổi hướng (pivot). Thiết kế ban đầu không hiệu quả, nhưng nó đã dẫn chúng ta đến một giải pháp thú vị và độc đáo hơn nhiều.

Sử dụng AI như một người đồng hành (copilot) cho phép chúng ta chuyển giao việc tạo mã lặp đi lặp lại và tập trung vào các quyết định chiến lược về UX và thiết kế.

Hy vọng biên niên sản chi tiết này sẽ là nguồn cảm hứng cho các dự án của riêng bạn! Bạn có dám thử chủ nghĩa Neo-Brutalism trong ứng dụng của mình không? Hãy để lại bình luận bên dưới nhé! 🚀