MỚI: Helius mua lại Light Protocol
hướng dẫn về ví nhúng Solana bằng Helius và Dynamic SDK
Blog/Phát triển

Hướng dẫn người dùng làm quen với ứng dụng Solana: Lý do nên dùng ví nhúng

Trải nghiệm nhà phát triển @ Dynamic.xyzMatthew Foyle trên XMatthew Foyle trên LinkedIn
Đọc trong 7 phút

Bạn có một ý tưởng đột phá cho ứng dụng di động hoặc web.

Bạn biết Solana là blockchain lý tưởng để xây dựng ứng dụng và muốn ra mắt thật nhanh với trải nghiệm giàu tính năng, thu hút người dùng ngay từ ngày đầu tiên.

Vậy bộ công cụ dành cho nhà phát triển của bạn cần những gì để hiện thực hóa ý tưởng đó?

Các công cụ như Cursor và v0 có thể đứng đầu danh sách của bạn, còn Next.js là một ứng viên sáng giá cho framework frontend.

Nhưng để đáp ứng các yêu cầu riêng của ứng dụng trên Solana, những giải pháp nào sẽ giúp bạn ra mắt suôn sẻ và mở rộng hiệu quả?

Xây dựng và mở rộng trên Solana đòi hỏi hai thành phần thiết yếu:

  1. Giải pháp hướng dẫn làm quen liền mạch để xác thực và quản lý ví
  2. Dịch vụ RPC mạnh mẽ để xử lý các giao dịch hiệu năng cao

Những thành phần thiết yếu này không chỉ đơn giản hóa quá trình phát triển mà còn mang lại trải nghiệm liền mạch cho người dùng.

Hãy tìm hiểu kỹ hơn từng thành phần.

Solana Wallet Adapter

Quy trình làm quen đơn giản nhất là kết nối người dùng qua một ví hiện có như Phantom hoặc Solflare. Phương pháp này phù hợp với những người đã quen thuộc với Solana và đã thiết lập ví.

Một điểm khởi đầu phù hợp là Solana Wallet Adapter, cung cấp:

  • API chuẩn hóa để tích hợp dễ dàng
  • Chức năng cơ bản để kết nối ví và ký giao dịch
  • Khả năng tùy chỉnh linh hoạt nhờ mã nguồn mở để phù hợp với nhu cầu của ứng dụng

Solana Wallet Adapter triển khai nhanh chóng và đơn giản, trở thành lựa chọn đáng tin cậy cho người dùng đã có ví.

Ngoài việc hỗ trợ nhiều ví, giải pháp này còn có quy trình tích hợp chuẩn hóa để đảm bảo chức năng ví nhất quán và các thành phần UI sẵn dùng như nút kết nối ví. Cuối cùng, giải pháp tối ưu hóa hiệu năng để ký và gửi giao dịch nhanh hơn so với các API thô như window.solana.

Thiết kế mã nguồn mở của Solana Wallet Adapter cho phép nhà phát triển tùy chỉnh theo các yêu cầu cụ thể của ứng dụng. Thiết kế này cũng cho phép cộng đồng mở rộng khả năng tương thích sang các framework như Vue, Angular, Svelte và TypeScript.

Tuy nhiên, việc sử dụng adapter sẽ bổ sung các dependency vào dự án, có thể làm tăng khối lượng công việc cho nhà phát triển.

Mặc dù adapter cung cấp sẵn nhiều tính năng, việc tùy chỉnh sâu có thể đòi hỏi phải tìm hiểu codebase hoặc tạo giải pháp thay thế. Tùy trường hợp sử dụng, quá trình này có thể tốn nhiều thời gian.

Cũng như mọi thư viện bên thứ ba, nhà phát triển có thể gặp lỗi hoặc sự cố ngoài tầm kiểm soát, ảnh hưởng đến độ ổn định của ứng dụng hoặc cần hỗ trợ từ bên ngoài để giải quyết.

Dù wallet adapter phù hợp với người dùng đã quen thuộc với tiền mã hóa, giải pháp này vẫn chưa đủ nếu mục tiêu của bạn là tiếp cận nhiều đối tượng hơn, đặc biệt là những người chưa quen với blockchain hoặc chưa có ví.

Hướng dẫn người dùng mới làm quen bằng ví nhúng

Ví nhúng có thể cải thiện đáng kể quy trình làm quen với Solana, giúp nhà phát triển thu hút thêm người dùng. Ví nhúng cho phép người dùng mới đăng ký và tự động nhận ví ngay trong ứng dụng.

Nhờ đó, người dùng có thể:

  • Bắt đầu mà không cần thiết lập ví bên thứ ba
  • Nhận tài sản liền mạch
  • Thực hiện giao dịch on-chain

Cách tiếp cận này giảm thiểu trở ngại và rất hữu ích cho các ứng dụng tiêu dùng muốn được thị trường đại chúng đón nhận.

Theo dữ liệu từ Dynamic, hơn 50% người dùng chọn ví nhúng thay vì kết nối ví hiện có.

Tuy nhiên, tỷ lệ sử dụng sẽ khác nhau tùy theo phương thức làm quen và nhóm người dùng mục tiêu.

Những người đã quen thuộc với tiền mã hóa có thể thiên về kết nối ví hiện có, trong khi người dùng phổ thông thường ưu tiên sự tiện lợi của các giải pháp nhúng.

Điều quan trọng là tìm được sự cân bằng phù hợp.

Thanh khoản bán lẻ vẫn chủ yếu nằm trong các ví nóng. Vì vậy, dù ví nhúng giúp đơn giản hóa quy trình làm quen, đây không phải lúc nào cũng là điểm khởi đầu tốt nhất. Nhà phát triển nên cân nhắc đối tượng mục tiêu ban đầu và thiết kế trải nghiệm làm quen phù hợp với nhu cầu của người dùng.

SDK toàn diện cho quy trình làm quen và hạ tầng ví

Với các nhà phát triển muốn cung cấp nhiều tính năng hơn Solana Wallet Adapter, những giải pháp như Dynamic SDK mang đến cách tiếp cận toàn diện hơn.

Với Dynamic, bạn có thể:

1. Hỗ trợ nhiều tùy chọn ví

Cho phép người dùng kết nối các ví Solana hiện có như Phantom và cấp ví nhúng cho người dùng mới.

2. Cho phép đăng nhập bằng mạng xã hội và email

Đơn giản hóa việc thiết lập ví bằng các phương thức đăng nhập quen thuộc như X và Telegram.

3. Tùy chỉnh trải nghiệm người dùng

Sử dụng các thành phần UI dựng sẵn để tích hợp nhanh chóng hoặc chọn phương án hoàn toàn headless để tự thiết kế luồng.

4. Giúp ứng dụng sẵn sàng cho tương lai

Bổ sung khả năng hỗ trợ nhiều ví, công cụ chống gian lận và tính năng phân tích để mở rộng cũng như tối ưu hóa ứng dụng.

5. Thu hút người dùng từ các chain khác

Khi sẵn sàng, hãy mở rộng chức năng của ứng dụng từ Solana sang các chain khác.

Với một giải pháp như Dynamic, bạn có thể tinh giản quá trình phát triển, đồng thời mang lại trải nghiệm làm quen liền mạch cho người dùng.

Giải pháp này bổ trợ cho Solana Wallet Adapter bằng cách cung cấp thêm chức năng làm quen, khả năng mở rộng và tùy chỉnh cho nhà phát triển.

Solana Wallet Adapter so với ví nhúng

Dưới đây là bảng so sánh hữu ích:

Tính năngSolana Wallet AdapterDynamic
Kết nối ví✅✅
Ví nhúng❌✅
Đăng nhập bằng mạng xã hội❌✅
Hỗ trợ đa chain❌✅
UI có thể tùy chỉnh❌✅
Chống gian lận❌✅
Danh sách truy cập❌✅
Quản lý người dùng❌✅
Webhook❌✅

Bất kể có những tính năng nào, thời gian triển khai luôn là yếu tố quyết định. Với nhiều chức năng như vậy, bạn có thể nghĩ rằng việc triển khai Dynamic phức tạp hơn Solana Wallet Adapter, nhưng thực tế không phải vậy.

Dưới đây là phần so sánh các cách triển khai React mặc định:

Solana Wallet Adapter: Cách triển khai mặc định

Mã
import React, { FC, useMemo } from 'react';
import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
import { UnsafeBurnerWalletAdapter } from '@solana/wallet-adapter-wallets';
import {
WalletModalProvider,
WalletDisconnectButton,
WalletMultiButton
} from '@solana/wallet-adapter-react-ui';
import { clusterApiUrl } from '@solana/web3.js';

// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');

export const Wallet: FC = () => {
// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
const network = WalletAdapterNetwork.Devnet;

// You can also provide a custom RPC endpoint.
const endpoint = useMemo(() => clusterApiUrl(network), [network]);

const wallets = useMemo(
() => [
new UnsafeBurnerWalletAdapter(),
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[network]
);

return (
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets} autoConnect>
<WalletModalProvider>
<WalletMultiButton />
<WalletDisconnectButton />
{ /* Your app's components go here, nested within the context providers. */ }
</WalletModalProvider>
</WalletProvider>
</ConnectionProvider>
);
};

Dynamic: Cách triển khai mặc định

Mã
import React from 'react'
import { DynamicContextProvider, DynamicWidget } from '@dynamic-labs/sdk-react-core'
import { SolanaWalletConnectors } from '@dynamic-labs/solana'

export const App = () => {
return (
<div className="App">
<DynamicContextProvider
settings={{
environmentId: process.env.REACT_APP_DYNAMIC_ENVIRONMENT_ID,
walletConnectors: [SolanaWalletConnectors],
}}
>
{ /* Your app's components go here, nested within the context providers. */ }
<DynamicWidget />
</DynamicContextProvider>
</div>
)
}

Mọi thứ đã sẵn sàng cho quy trình làm quen vì chúng ta đang sử dụng DynamicWidget, một thành phần UI tất cả trong một xử lý nút Đăng nhập/Đăng ký, toàn bộ quy trình xác thực, hồ sơ người dùng và nhiều chức năng khác.

Khi khởi động ứng dụng, bạn sẽ thấy giao diện sau:

Nếu muốn tự xây dựng UI hoặc tùy chỉnh các thành phần cụ thể, bạn có thể cấu hình toàn bộ đến từng pixel. Hãy xem tài liệu thiết kế hoặc tùy chọn tích hợp headless để biết hướng dẫn chi tiết.

Để cho phép đăng ký ví nhúng trên Solana, chỉ cần mở dashboard và làm theo các bước sau:

Vậy là xong!

Bất kỳ ai đăng ký bằng email, số điện thoại hoặc tài khoản mạng xã hội đều sẽ nhận được ví Solana và có thể sử dụng ứng dụng của bạn ngay lập tức.

Chỉ với vài dòng mã, bạn đã có quy trình làm quen hàng đầu, bao gồm mọi chức năng cần thiết ở hiện tại và trong tương lai.

Thêm nhà cung cấp RPC và thiết lập phí ưu tiên

Dù quy trình làm quen vẫn là một trong những trở ngại lớn nhất với người dùng hiện nay, việc xử lý giao dịch cũng là một thách thức đáng kể. Xử lý tình trạng tắc nghẽn mạng trên Solana có thể khá phức tạp. Nếu không có dịch vụ RPC chuyên dụng, người dùng có thể gặp tình trạng giao dịch bị loại bỏ, gây thất vọng. Tương tự, việc đặt phí ưu tiên không chính xác có thể làm gián đoạn trải nghiệm người dùng và ảnh hưởng đến độ tin cậy của ứng dụng.

Bạn có thể dễ dàng tránh điều này bằng cách dùng Helius cho cả endpoint RPC và thiết lập phí linh động qua Priority Fee API của Helius. Việc tích hợp vào Dynamic chỉ đơn giản là đặt URL RPC trong dashboard.

Khi tạo giao dịch, hãy lấy mức phí bằng Priority Fee API.

Mã
async function getPriorityFeeEstimate(priorityLevel, transaction) {
    const response = await fetch(HeliusURL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            jsonrpc: "2.0",
            id: "1",
            method: "getPriorityFeeEstimate",
            params: [
                {
                    transaction: bs58.encode(transaction.serialize()), // Pass serialized transaction in Base58
                    options: { priorityLevel: priorityLevel },
                },
            ],
        }),
    });

    const data = await response.json();
    console.log(
        "Fee in function for",
        priorityLevel,
        "",
        data.result.priorityFeeEstimate
    );
    return data.result;
}

Nghiên cứu điển hình về Magic Eden

Hạ tầng ví mạnh mẽ đóng vai trò thiết yếu trong việc phát triển các ứng dụng Solana mạnh mẽ và có khả năng mở rộng.

Magic Eden, thị trường NFT hàng đầu, đã mở rộng mạnh mẽ bằng cách bổ sung các chain mới. Họ cần một loại ví linh hoạt để đáp ứng chiến lược này và hoạt động hiệu quả trong những thời điểm có lưu lượng truy cập cao, chẳng hạn như khi mint NFT.

Bằng cách tích hợp Dynamic SDK, Magic Eden có thể hỗ trợ ví đa chain, liên kết mạng xã hội và quản lý nhiều ví. Việc quản lý nhiều ví và sưu tầm tài sản trên nhiều mạng trở nên đơn giản.

Magic Eden cũng sử dụng Helius để quản lý các node RPC và tối ưu hóa thông lượng giao dịch. Thông qua Priority Fee API của Helius, Magic Eden duy trì độ tin cậy và tốc độ ngay cả khi lưu lượng đạt đỉnh.

Sự kết hợp giữa Dynamic và Helius đã giúp Magic Eden mở rộng hiệu quả, đồng thời mang lại trải nghiệm vượt trội cho hàng triệu người dùng hằng tháng.

Bằng cách ưu tiên khả năng mở rộng, tốc độ và trải nghiệm người dùng, Magic Eden đã thiết lập chuẩn mực cho tiềm năng của các thị trường NFT.

Với các nhà phát triển muốn xây dựng ứng dụng hấp dẫn cả người dùng đã quen thuộc với tiền mã hóa lẫn người dùng phổ thông, đầu tư vào một giải pháp ví đáng tin cậy có thể tinh giản quá trình phát triển, tiếp cận nhiều người dùng hơn và đặt nền móng cho tăng trưởng dài hạn.

Tài nguyên bổ sung

Xin chân thành cảm ơn @__lostin__ và Brady Werkheiser đã đánh giá các phiên bản trước của bài viết này.

Đăng ký nhận tin từ Helius

Luôn cập nhật những thông tin mới nhất về phát triển Solana và nhận thông báo khi chúng tôi đăng bài

Hình ảnh phóng to