Giới Thiệu

Nếu bạn đã từng muốn đưa Solana vào lòng bàn tay mình, hướng dẫn này là dành cho bạn. Chúng ta sẽ xây dựng một ứng dụng phi tập trung (dApp) di động bằng cách sử dụng React Native và Expo CLI, nơi người dùng có thể:

• Đăng nhập bằng ví Solana của họ
• Nhận và gửi SOL
• Ký các tin nhắn
• Xem số dư ví của họ theo thời gian thực

Mục tiêu của chúng ta là giữ cho mọi thứ thực tiễn và thân thiện với người mới, vì vậy ngay cả khi bạn mới bắt đầu phát triển dApp Solana với React Native, bạn cũng có thể theo dõi. Cuối cùng, bạn sẽ có một dApp di động hoạt động trực tiếp trên thiết bị vật lý hoặc thiết bị ảo của bạn thông qua một bản dựng phát triển được tạo ra cục bộ hoặc sử dụng eas.

Hãy cùng bắt đầu xây dựng những trải nghiệm Web3 mà thực sự phù hợp trong túi của bạn.

Các yêu cầu trước khi bắt đầu

Trước khi bắt đầu, bạn cần:

• Node.js
• Android Studio
• Code editor như VSCode
• Kiến thức cơ bản về Expo

1️⃣ Thiết lập dự án

Để tạo một dự án mới, hãy chạy lệnh sau:

npm create solana-dapp@latest

Chọn mẫu di động Solana mà bạn muốn. Tôi sẽ chọn mẫu web3js-expo.

Sau khi hoàn tất việc sao chép, trong terminal, gõ:

cd [tên-dự-án]

Cài đặt tất cả các gói cần thiết:

yarn install

2️⃣ Tạo Bản dựng Phát triển:

Có hai cách để tạo một bản dựng phát triển:

1. Sử dụng eas
2. Tạo bản dựng cục bộ trên máy của bạn

Sử dụng eas để tạo một bản dựng phát triển là cách dễ nhất, nhưng khi sử dụng miễn phí, có giới hạn số lượng bản dựng bạn có thể tạo hàng tháng và thời gian chờ đợi có thể lên đến 3 giờ trước khi bắt đầu xây dựng. Vì vậy, tôi sẽ chỉ cho bạn cách tạo bản dựng phát triển cục bộ, mất thời gian hơn nhưng nhanh hơn!

Xây dựng cục bộ trên laptop của bạn có thể hoạt động nếu bạn đang sử dụng thiết bị ảo từ Android Studio hoặc thiết bị vật lý của bạn.

Để bắt đầu, mở dự án trong terminal và gõ:

npx expo install expo-dev-client

Tiếp theo, tạo thư mục android gốc, nhưng trước khi làm điều này, hãy thực hiện các thay đổi cần thiết trong tệp app.json, sau đó gõ:

npx expo prebuild

Bây giờ thư mục android của bạn đã được tạo!

Mở Android Studio, nhấp vào more options và chọn sdk manager.

Đảm bảo rằng các công cụ SDK được đánh dấu bên dưới đã được cài đặt (phiên bản mới nhất) trên Android Studio của bạn.

Tạo một thiết bị ảo dưới trình quản lý thiết bị ảo (nếu bạn muốn sử dụng thiết bị ảo để mô phỏng bản dựng phát triển của bạn).

Nếu bạn sử dụng thiết bị vật lý, hãy kết nối điện thoại của bạn với laptop bằng cáp USB và đảm bảo rằng bạn đã bật chế độ gỡ lỗi Android.

Kiểm tra xem thiết bị của bạn đã được kết nối hay chưa bằng cách mở terminal và gõ:

adb devices

Kết quả đầu ra sẽ tương tự như sau:

Đảm bảo thiết bị vật lý của bạn được kết nối trong suốt quá trình này
Cuối cùng, trong terminal, gõ:

npx expo run:android

Và xem nó chạy, cài đặt vào thiết bị của bạn và mở ứng dụng.

Và đó là tất cả, bạn đã xây dựng thành công một dApp di động Solana hoàn chỉnh với React Native và Expo.

Tính năng của dApp phát triển

Với client phát triển, bạn có thể:

• Kết nối và xác thực với ví Solana
• Xem số dư theo thời gian thực
• Gửi và nhận SOL
• Ký tin nhắn một cách an toàn
• Chạy mọi thứ trực tiếp trên thiết bị vật lý hoặc thiết bị ảo, sử dụng eas hoặc cục bộ

Thực tiễn tốt nhất

• Kiểm tra kỹ lưỡng: Đảm bảo kiểm tra ứng dụng của bạn trên nhiều thiết bị khác nhau để đảm bảo tính tương thích.
• Bảo mật: Luôn luôn bảo mật thông tin người dùng và ví của họ.

Những cạm bẫy thường gặp

• Quên bật gỡ lỗi Android: Nếu không bật gỡ lỗi, bạn sẽ không thể kết nối thiết bị với máy tính.
• Thiếu phụ thuộc: Đảm bảo rằng tất cả các gói đã được cài đặt trước khi chạy ứng dụng.

Mẹo hiệu suất

• Tối ưu hóa hình ảnh: Sử dụng hình ảnh có kích thước hợp lý để tăng tốc độ tải trang.
• Sử dụng memoization: Giúp cải thiện hiệu suất của ứng dụng bằng cách tránh các phép toán không cần thiết.

Kết luận

Đó là cách bạn có thể xây dựng một dApp di động đơn giản với Solana, React Native và Expo. Từ đây, bạn có thể mở rộng dApp của mình với các tính năng như NFT, hoán đổi token, tích hợp DeFi hoặc thậm chí là một trò chơi Web3 hoàn chỉnh. Các khối xây dựng đều nằm trong tay bạn.

Nếu hướng dẫn này giúp ích cho bạn, hãy để lại một ❤️, chia sẻ với các bạn xây dựng khác và cho tôi biết tính năng nào bạn muốn tôi đề cập tiếp theo. Hãy cùng nhau khám phá những gì có thể với Web3 + di động.