Bangun Aplikasi Mobile Pencetak cNFT dalam Waktu Kurang dari 5 Menit

Yang Akan Anda Pelajari

Tutorial ini membahas cara membangun aplikasi Android untuk mencetak NFT (Token Non-Fungibel). Tujuannya adalah memudahkan pengguna mengambil gambar dan mencetak NFT terkompresi di Solana. Untuk melakukannya, kita akan menggunakan Helius Mint API. API ini mempercepat proses pencetakan NFT terkompresi dan meminimalkan kode boilerplate sehingga menghemat banyak waktu dan perencanaan. Aplikasi Android kita akan ditulis menggunakan Kotlin dan Jetpack Compose.

Apa itu NFT terkompresi?

NFT terkompresi (cNFT) menggunakan kompresi status dan pohon Merkle konkuren untuk mengurangi biaya penyimpanan. NFT terkompresi 2.400–24.000 kali lebih murah daripada NFT yang tidak terkompresi, tetapi tetap mempertahankan struktur yang identik.

Prasyarat

Sebelum memulai tutorial ini, Anda perlu memiliki pemahaman dasar tentang pengembangan Android dengan Kotlin dan mengenal Solana.

Alat

• Android Studio: Giraffe | Versi 2022.3.1
• Emulator atau Perangkat Mobile: Ini akan digunakan untuk menguji aplikasi. Pastikan aplikasi dompet yang kompatibel dengan MWA telah terinstal (Solfare direkomendasikan).

Kunci API

Untuk menggunakan Helius Mint API, Anda memerlukan kunci API. Berikut cara mendapatkannya:

1. KunjungiPortal Developer Helius.
2. Buat akun menggunakan dompet Solana, akun Google, atau akun GitHub Anda.
3. Setelah masuk, ikuti petunjuk untuk membuat kunci API.
4. Pastikan Anda menyimpan kunci ini dengan aman karena akan digunakan untuk melakukan panggilan API selama tutorial ini.

Membangun Aplikasi

Langkah 1: Menyiapkan Proyek

Kami telah menyiapkan basis kode paket awal untuk proyek ini. 

Untuk memulai, ikuti langkah-langkah berikut:

1. Akses paket awal di GitHub.
2. Fork repositori tersebut dan clone ke lingkungan lokal Anda.

Setelah kode tersedia secara lokal, lanjutkan dengan langkah berikut:

1. Buka proyek di Android Studio.
2. Biarkan Gradle menyelesaikan proses build.
3. Jalankan kode.

Jelajahi aplikasi awal untuk memahami fitur-fiturnya. Perhatikan tombol untuk menghubungkan dompet yang terintegrasi ke dalam aplikasi. Tombol ini memungkinkan Anda terhubung ke aplikasi dompet apa pun yang kompatibel dengan Mobile Wallet Adapter (MWA). Mobile Wallet Adapter (MWA) adalah spesifikasi protokol untuk menghubungkan dApp mobile ke aplikasi dompet mobile, yang memungkinkan komunikasi untuk transaksi Solana dan penandatanganan pesan. Mobile Wallet Adapter mendukung dompet ini. Selain itu, Anda akan menemukan tombol "Ambil Foto", yang saat ini dapat digunakan untuk mengambil foto.

Untuk menyimpan kunci API Helius dengan aman di basis kode, buka file local.properties dan tambahkan kunci API tersebut. File ini dirancang khusus untuk menyimpan informasi sensitif dan diabaikan oleh Git, sehingga kerahasiaan kunci API Anda tetap terjaga.

api_key=<your-api-key>

Kita akan mulai menulis kode logika untuk mencetak gambar yang diambil sebagai NFT terkompresi (cNFT).

Langkah 2: Logika Pencetakan

Tujuan kita adalah mengintegrasikan tombol "Ambil foto" dengan fungsi kamera. Integrasi tombol ini akan memungkinkan pengguna mengambil gambar dan mencetaknya sebagai NFT. Kami telah menyediakan kode awal untuk membuka kamera dan mengambil gambar. Sekarang, kita akan berfokus membuat fungsi untuk mengelola proses pencetakan.‍

Mint API dari Helius

Metode ini mencetak NFT terkompresi. Setelah dijalankan, metode ini akan menunggu hingga transaksi dikonfirmasi. Proses tersebut dapat memerlukan waktu hingga 60 detik saat aktivitas jaringan sedang tinggi. Kunjungi dokumentasi untuk mempelajari lebih lanjut.

Mulailah dengan membuka java/com/example/hmint/MainViewModel.kt, lalu buat fungsi mintCNft di dalam kelas MainViewModel:

@HiltViewModel
class MainViewModel @Inject constructor(
    private val walletAdapter: MobileWalletAdapter,
    private val walletConnectionUseCase: WalletConnectionUseCase,
) : ViewModel() {
    
    // ...

    fun mintCNft(imageUri: Uri, nftName: String, user: String) =
        viewModelScope.launch {
            _state.update {
                _state.value.copy(
                    isLoading = true,
                )
            }
        }

}

‍Kita akan memulai coroutine untuk menangani logika pencetakan di dalam fungsi ini. Pertama, kita akan mengambil Kunci API, menentukan variabel yang diperlukan, dan requestBody. Nantinya, Anda dapat menyesuaikan requestBody untuk menyertakan atribut dan data tambahan sesuai kebutuhan:

withContext(viewModelScope.coroutineContext + Dispatchers.IO) {
    val apiKey = System.getProperty("api_key") ?: ""
    val url = URL("https://mainnet.helius-rpc.com/?api-key=$apiKey")
    val mediaType = "application/json".toMediaTypeOrNull()
    val requestBody = """
        {
            "jsonrpc": "2.0",
            "id": "helius-test",
            "method": "mintCompressedNft",
            "params": {
                "name": "$nftName",
                "symbol": "HM",
                "owner": "$user",
                "description": "This is a test cNFT minted by hMint app",
                "attributes": [
                    {
                        "trait_type": "hMint",
                        "value": "1"
                    }
                ],
                "imageUrl": "$imageUri",
                "sellerFeeBasisPoints": 6900
            }
        }
        ""${'"'}.trimIndent()
                                    
}

‍Selanjutnya, kita akan membuat permintaan dan menginisialisasi OkHttpClient:

val body = requestBody.toRequestBody(mediaType)
val request = Request.Builder()
    .url(url)
    .post(body)
    .addHeader("accept", "application/json")
    .addHeader("content-type", "application/json")
    .build()
val client = OkHttpClient()

‍Sebelum memanggil klien, mari tentukan respons dalam sebuah kelas data. Buat package baru bernama data dan file baru NFTResponse.kt di dalamnya untuk menentukan struktur respons yang diterima dari panggilan API.

package com.example.hmint.data

data class NftMintResponse(
    val jsonrpc: String,
    val id: String,
    val result: MintResult
)

data class MintResult(
    val signature: String,
    val minted: Boolean,
    val assetId: String
)

‍Kemudian, di dalam kelas MainViewModel, tambahkan nilai untuk mintResponse ke kelas data WalletViewState. Kita akan memperbarui nilai ini saat menerima respons:

data class WalletViewState(
    // ...
    val mintResponse: String = ""
)

‍Kembali ke fungsi mintCNft, kita akan menggunakan klien untuk menjalankan permintaan serta menangani kegagalan atau respons sebagaimana mestinya. Setelah menerima respons, kita akan menggunakan Gson untuk mengurai data ke dalam kelas data NFTMintResponse yang sebelumnya dibuat, lalu memperbarui nilai mintResponse:

client.newCall(request).enqueue(object : Callback {
    override fun onFailure(call: Call, e: IOException) {
        // Handle failure
        e.printStackTrace()
        Log.d(TAG, "NFT Mint Failed")
        _state.update {
            _state.value.copy(
                isLoading = false,
                mintResponse = "Mint Failed"
            )
        }
    }

    override fun onResponse(call: Call, response: Response) {
        if (response.isSuccessful) {
            val responseBody = response.body?.string() ?: ""
            val gson = Gson()
            val nft = gson.fromJson(responseBody, NftMintResponse::class.java)
            Log.d(TAG, "NFT Mint Successful: $nft")
            _state.update {
                _state.value.copy(
                    isLoading = false,
                    mintResponse = "Minted Successfully"
                )
            }

        } else {
            // Handle non-successful response
            Log.d(TAG, "NFT Mint Failed: ${response.code}")
            _state.update {
                _state.value.copy(
                    isLoading = false,
                    mintResponse = "Minted Failed"
                )
            }
        }
    }
})

‍Di UI, kita ingin memberikan informasi kepada pengguna mengenai hasil fungsi pencetakan. Karena itu, buka java/com/example/hmint/composables/MintButton.kt, yang berisi composable serta kode UI dan logika untuk mengambil gambar. Di dalam MintButton, tempat kita mendeklarasikan cameraLauncher, kita akan memanggil fungsi mintCNft. Tambahkan juga kode untuk menampilkan Toast saat mintResponse diperbarui.

@Composable
fun MintButton(
    mainViewModel: MainViewModel = hiltViewModel()
) {

    val cameraLauncher =
        rememberLauncherForActivityResult(ActivityResultContracts.TakePicture()) {
            // ...
            mainViewModel.mintCNft(uri, "hMint", viewState.userAddress)
        }

    
    viewState.mintResponse.let { message ->
        if(message.isNotEmpty()){
            Toast.makeText(LocalContext.current, message, Toast.LENGTH_SHORT).show()
        }
    }

    // ...
}

Langkah 3: Jalankan Aplikasi

‍Tahap penulisan kode telah selesai, jadi mari jalankan aplikasinya. Mulailah dengan menghubungkan dompet Anda, lalu ambil gambar dan lihat aplikasi mencetak NFT untuk Anda dengan lancar.

Kesimpulan

Selamat! Anda telah berhasil mengembangkan aplikasi Android yang memungkinkan pengguna mencetak NFT terkompresi. Berkat Helius Mint API, mencetak cNFT kini sangat mudah dan hanya memerlukan satu panggilan.

Apa selanjutnya?

Masih ada banyak hal yang dapat dieksplorasi dan ditingkatkan dalam aplikasi ini. Salah satunya adalah integrasi DAS API. Digital Asset Standard (DAS) API adalah spesifikasi dan sistem sumber terbuka yang menyediakan antarmuka terpadu untuk berinteraksi dengan aset digital, termasuk token dan NFT. API ini mendukung berbagai jenis aset, termasuk token fungibel, NFT standar, dan NFT terkompresi.  Dengan API ini, Anda dapat mengambil semua NFT terkompresi yang telah dicetak dan menampilkannya di dalam aplikasi sehingga pengguna mendapatkan gambaran lengkap tentang aset digital mereka.

Referensi Terkait

Untuk memperdalam keahlian Anda dalam pengembangan Android dengan Jetpack Compose, integrasi blockchain Solana, dan interaksi API, pelajari referensi berikut:

• Jetpack Compose
• Solana Mobile Adapter di Kotlin
• Injeksi dependensi dengan Hilt
• OkHttpClient di Android
• Kompresi di Solana
• Helius MINT API

Jika memerlukan bantuan atau dukungan, jangan ragu untuk menghubungi kami di Discord. Basis kode lengkap tersedia di GitHub sebagai referensi lebih lanjut.

‍