Giới thiệu

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

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

Mục tiêu của chúng tôi là giữ cho mọi thứ thực tiễn và thân thiện với người mới bắt đầu, vì vậy ngay cả khi bạn mới tham gia phát triển dApp Solana bằng React Native, bạn cũng sẽ 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 thông qua một bản phát triển được tạo ra cục bộ hoặc bằng eas.

Hãy cùng tìm hiểu và bắt đầu xây dựng những trải nghiệm Web3 thực sự vừa vặn trong túi của bạn.

Yêu cầu trước

• Node.js
• Android Studio
• Trình soạn thảo mã 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 Solana mobile mà bạn muốn. Tôi sẽ chọn mẫu web3js-expo.

Sau khi mẫu đã được sao chép xong, trong terminal, gõ:

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

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

yarn install

2️⃣ Tạo bản phát triển

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

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

Sử dụng eas để tạo bản phát triển là cách dễ nhất, nhưng khi sử dụng gói miễn phí trên eas, có giới hạn số lượng bản phát triển bạn có thể tạo hàng tháng. Nếu chờ đợi quá lâu, bản phát triển sẽ phải đợi đến 3 giờ trước khi bắt đầu. Do đó, tôi sẽ chỉ cho bạn cách tạo bản phát triển cục bộ, mặc dù quá trình này mất nhiều thời gian hơn, nhưng nhanh hơn!
Việc xây dựng cục bộ trên máy tính xách tay của bạn có thể hoạt động nếu bạn đang sử dụng một 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 của bạn trên terminal và gõ:

npx expo install expo-dev-client

Tiếp theo là tạo thư mục android gốc, nhưng trước khi thực hiện điều này, hãy thực hiện bất kỳ thay đổi nào bạn muốn trong cài đặt ứng dụng 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 nhiều tùy chọn, nhấp vào sdk manager

Đảm bảo rằng các công cụ sdk 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 thiết bị ảo trong 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 phát triển của mình).

Nếu bạn đang 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 máy tính xách tay qua USB và đảm bảo rằng bạn đã bật gỡ lỗi Android.

Chuyển đến trình soạn thảo mã của bạn và kiểm tra xem bạn đã kết nối thiết bị (điều này hoạt động cho cả thiết bị vật lý và ảo), mở terminal và gõ:

adb devices

Kết quả 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
Cuối cùng, trong terminal, gõ:

npx expo run:android

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

Tính năng của dApp

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

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 tất cả 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 hành tốt nhất

• Kiểm tra mã của bạn thường xuyên: Trong quá trình phát triển, hãy đảm bảo kiểm tra mã liên tục để phát hiện lỗi kịp thời.
• Ghi chú cho người dùng: Cung cấp hướng dẫn và thông tin rõ ràng cho người dùng về cách sử dụng dApp của bạn.
• Tối ưu hóa hiệu suất: Sử dụng các công cụ như React Native Performance Monitor để theo dõi hiệu suất ứng dụng của bạn.

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

• Không kiểm tra tính tương thích: Đảm bảo dApp của bạn hoạt động tốt trên nhiều thiết bị và phiên bản Android khác nhau.
• Thiếu bảo mật: Đảm bảo rằng tất cả dữ liệu người dùng được mã hóa và bảo mật.

Mẹo hiệu suất

• Giảm kích thước gói: Sử dụng các công cụ nén để giảm kích thước gói ứng dụng của bạn để tải nhanh hơn.
• Tối ưu hóa hình ảnh: Sử dụng các định dạng hình ảnh nhẹ để giảm thời gian tải.

Khắc phục sự cố

• Nếu bạn gặp lỗi khi kết nối với ví, hãy kiểm tra lại mọi thông tin xác thực và đảm bảo rằng kết nối Internet của bạn ổn định.
• Nếu ứng dụng không chạy trên thiết bị ảo, hãy kiểm tra cài đặt SDK và thiết bị ảo của bạn.

Kết luận

Đây chỉ là khởi đầu. Từ đây, bạn có thể mở rộng dApp của mình với NFTs, 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 hữu ích với bạn, hãy để lại một ❤️, chia sẻ với các nhà phát triển 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 mở rộng giới hạn của những gì có thể với Web3 + di động.