Créez une application mobile de mint de cNFT en moins de 5 minutes

À quoi vous attendre

Ce tutoriel explique comment créer une application Android de mint de NFT (jetons non fongibles). L'objectif est de permettre aux utilisateurs de capturer facilement des images et de minter des NFT compressés sur Solana. Pour cela, nous utiliserons la Helius Mint API. Cette API accélère le mint de NFT compressés et réduit le code répétitif, ce qui vous fait gagner beaucoup de temps et simplifie la planification. Notre application Android sera écrite en Kotlin avec Jetpack Compose.

Que sont les NFT compressés ?

Les NFT compressés (cNFT) utilisent la compression d'état et des arbres de Merkle concurrents pour réduire les coûts de stockage. Les NFT compressés coûtent 2 400 à 24 000 fois moins cher que leurs équivalents non compressés, tout en conservant des structures identiques.

Prérequis

Avant de commencer ce tutoriel, vous devez posséder des connaissances de base en développement Android avec Kotlin et connaître Solana.

Outils

• Android Studio : Giraffe | Version 2022.3.1
• Émulateur ou appareil mobile : il servira à tester l'application. Assurez-vous qu'une application de portefeuille compatible avec MWA est installée (Solfare est recommandée).

Clé API

Pour utiliser la Helius Mint API, vous aurez besoin d'une clé API. Voici comment en obtenir une :

1. Accédez au portail Helius Developer.
2. Créez un compte à l'aide de votre portefeuille Solana ou de votre compte Google ou GitHub.
3. Une fois connecté, suivez les instructions pour générer une clé API.
4. Veillez à conserver cette clé en lieu sûr, car elle servira à effectuer des appels API tout au long de ce tutoriel.

Création de l'application

Étape 1 : configuration du projet

Nous avons préparé une base de code de démarrage pour ce projet. 

Pour commencer, procédez comme suit :

1. Accédez au kit de démarrage sur GitHub.
2. Forkez le dépôt et clonez-le dans votre environnement local.

Une fois le code disponible localement, procédez comme suit :

1. Ouvrez le projet dans Android Studio.
2. Laissez Gradle terminer le processus de build.
3. Exécutez le code.

Explorez l'application de démarrage pour vous familiariser avec ses fonctionnalités. Vous remarquerez le bouton de connexion au portefeuille intégré à l'application. Il vous permet de vous connecter à toute application de portefeuille compatible avec Mobile Wallet Adapter (MWA). Mobile Wallet Adapter (MWA) est une spécification de protocole qui connecte les dApps mobiles aux applications de portefeuille mobiles et permet de communiquer pour effectuer des transactions Solana et signer des messages. Mobile Wallet Adapter prend en charge ces portefeuilles. Vous trouverez également le bouton « Prendre une photo », qui vous permet actuellement de prendre une photo.

Pour stocker de manière sécurisée la clé API Helius dans la base de code, accédez au fichier local.properties et ajoutez-y la clé API. Ce fichier est spécialement conçu pour contenir des informations sensibles et est ignoré par Git, ce qui garantit la confidentialité de votre clé API.

api_key=<your-api-key>

Nous allons maintenant coder la logique permettant de minter l'image capturée sous forme de NFT compressé (cNFT).

Étape 2 : logique de mint

Notre objectif est d'intégrer le bouton « Prendre une photo » à la fonctionnalité de l'appareil photo. Cette intégration permettra aux utilisateurs de capturer des images et de les minter sous forme de NFT. Nous avons fourni un code de démarrage pour ouvrir l'appareil photo et capturer des images. Nous allons maintenant créer une fonction chargée de gérer le processus de mint.‍

Mint API de Helius

Cette méthode permet de minter un NFT compressé. Lors de son exécution, elle attendra la confirmation de la transaction, ce qui peut prendre jusqu'à 60 secondes lorsque l'activité du réseau atteint un pic. Consultez la documentation pour en savoir plus.

Commencez par accéder à java/com/example/hmint/MainViewModel.kt et créez la fonction mintCNft dans la classe 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,
                )
            }
        }

}

‍Nous allons lancer une coroutine pour gérer la logique de mint dans cette fonction. Nous commencerons par récupérer la clé API, définir les variables nécessaires et le requestBody. Vous pourrez ensuite personnaliser requestBody afin d'inclure des attributs et des données supplémentaires selon vos besoins :

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()
                                    
}

‍Nous allons ensuite construire la requête et initialiser un 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()

‍Avant d'appeler le client, définissons la réponse dans une classe de données. Créez un nouveau package nommé data, puis un nouveau fichier NFTResponse.kt dans celui-ci afin de définir la structure de la réponse reçue de l'appel 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
)

‍Ensuite, dans la classe MainViewModel, ajoutez à la classe de données WalletViewState une valeur supplémentaire pour mintResponse. Nous mettrons cette valeur à jour lorsque nous recevrons une réponse :

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

‍Revenons à notre fonction mintCNft. Nous utiliserons le client pour exécuter la requête et traiter les éventuels échecs ou réponses. À la réception d'une réponse, nous utiliserons Gson pour analyser les données dans la classe de données NFTMintResponse créée précédemment, puis mettre à jour la valeur de 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"
                )
            }
        }
    }
})

‍Dans notre UI, nous souhaitons informer l'utilisateur du résultat de la fonction de mint. Accédez donc à java/com/example/hmint/composables/MintButton.kt, qui contient le composable ainsi que le code de l'UI et la logique de capture d'image. Dans MintButton, où nous avons déclaré cameraLauncher, nous appellerons notre fonction mintCNft. Ajoutez également le code permettant d'afficher un Toast lors de la mise à jour de mintResponse.

@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()
        }
    }

    // ...
}

Étape 3 : exécution de l'application

‍La phase de codage est terminée. Exécutons maintenant l'application. Commencez par connecter votre portefeuille, puis capturez une image et regardez l'application minter automatiquement le NFT pour vous.

Conclusion

Bravo ! Vous avez développé avec succès une application Android qui permet aux utilisateurs de minter des NFT compressés. Grâce à la Helius Mint API, minter des cNFT n'a jamais été aussi simple : un seul appel suffit.

Et ensuite ?

Cette application offre encore de nombreuses possibilités d'exploration et d'amélioration. Vous pouvez notamment intégrer la DAS API. La Digital Asset Standard (DAS) API est une spécification et un système open source qui fournissent une interface unifiée pour interagir avec les actifs numériques, notamment les tokens et les NFT. Elle prend en charge différents types d'actifs, notamment les tokens fongibles, les NFT standards et les NFT compressés.  Avec l'API, vous pouvez récupérer tous les NFT compressés mintés et les afficher dans votre application, offrant ainsi aux utilisateurs une vue d'ensemble complète de leurs actifs numériques.

Ressources pertinentes

Pour approfondir vos connaissances du développement Android avec Jetpack Compose, de l'intégration de la blockchain Solana et des interactions avec les API, consultez les ressources suivantes :

• Jetpack Compose
• Solana Mobile Adapter en Kotlin
• Injection de dépendances avec Hilt
• OkHttpClient sous Android
• Compression sur Solana
• Helius MINT API

Si vous avez besoin d'aide ou d'assistance, n'hésitez pas à nous contacter sur Discord. La base de code complète est disponible sur GitHub pour référence.

‍