Présentateur : Eric - Base Team
Durée : 10:51
Plateforme : Base (Coinbase L2 Blockchain)
📹 Vidéo originale : Voir sur YouTube
Ce tutoriel démontre comment convertir une application web existante en une mini app qui s'intègre directement dans l'application Base. Le processus complet prend environ 10 minutes et permet de rendre votre application découvrable et utilisable au sein de l'écosystème Base.
Exemple utilisé : Une simple application "Hello World" Next.js hébergée sur Vercel
Prérequis :
Installation et utilisation du SDK Farcaster pour envelopper votre application avec les fonctionnalités nécessaires aux mini apps.
Gestion du déclenchement d'affichage avec la fonction
ready() pour contrôler quand l'app est prête à être
affichée.
Création et hébergement du fichier manifest pour identifier votre app et fournir les métadonnées essentielles.
Utilisation de credentials cryptographiques pour prouver la propriété de l'application via signature.
Configuration des métadonnées pour contrôler l'apparence de votre app dans le feed Base.
Intégration avec Vercel pour déploiement automatique et prévisualisation avant publication.
Installer le package qui enveloppe votre app avec les fonctionnalités mini app.
npm install @farcaster/miniapp-sdk
Implémenter la logique pour signaler quand l'app est prête à être
affichée. Utiliser un hook React useEffect pour
éviter les rendus multiples.
import { sdk } from '@farcaster/miniapp-sdk'; import {
useEffect } from 'react'; export default function Page() {
useEffect(() => { sdk.actions.ready(); }, []); return
<div>Hello World</div>; }
Créer un fichier manifest accessible à
votre-domaine.com/.well-known/farcaster.json. Ce
fichier contient les informations sur votre mini app.
Pour Next.js : Créer un route handler dans
app/.well-known/farcaster.json/route.ts
Utiliser l'outil Base Build (basebuild.base.dev) pour
:
Configurer les métadonnées fc:miniapp pour contrôler
l'affichage dans le feed.
export async function generateMetadata() { return { title:
"Hello World", description: "My mini app", other: {
"fc:miniapp": "true", "fc:miniapp:name": "Hello World",
"fc:miniapp:image": "https://...", "fc:miniapp:button": "Launch
Hello World", "fc:miniapp:url": "https://your-app.com" } };
}
Pousser tous les changements vers la production (automatique avec Vercel).
Utiliser l'outil de prévisualisation pour vérifier :
Poster l'URL de votre application sur Base App. Elle sera indexée et deviendra découvrable dans le feed et la recherche.
Objectif : Créer une mini app "Todo List" simple et la publier sur Base.
Compétences : React, Next.js, SDK Mini App
Temps estimé : 2-3 heures
Critères de succès :
Objectif : Créer une mini app qui interagit avec le wallet Coinbase de l'utilisateur.
Compétences : Web3.js/Ethers.js, Smart Contracts, Account Abstraction
Temps estimé : 4-6 heures
Critères de succès :
Objectif : Créer une mini app complète avec backend, base de données, et interactions blockchain.
Exemple : Une place de marché NFT simplifiée
Compétences : Full Stack, Smart Contracts, IPFS, Analytics
Temps estimé : 2-3 semaines
Critères de succès :
Transformez votre application en mini app Base dès aujourd'hui !