- Aniol Carbó
Creeu el vostre propi lloc de reclamació POAP amb l' SDK Vottun NFT
Next.js és un marc popular per crear aplicacions React representades al servidor. En aquest article, explorarem com implementar l’ SDK Vottun en un projecte Next.js per crear un lloc de reclamació POAP (Proof of Attendance Protocol). Aprofitant les funcions sense servidor i les variables d’entorn segures de Next.js , podem garantir la bona integració de l’ SDK de Vottun mantenint les mesures de seguretat necessàries.
Requisits previs
Abans de començar a desenvolupar, heu de tenir el següent:
- Cartera Ethereum ( p. ex metamàscara )
- Credencials de l’API de Vottun (obté les teves a https://apis.vottun.tech/trial)
- Node ( versió 16.8 o més alt )
Creació de l'API Next.js amb la implementació de l'SDK de Vottun
Per començar, emmagatzemem la CLAU de l’API Vottun a les variables d’entorn de l’API sense servidor. En fer-ho, la CLAU API roman segura i no es pot accedir ni llegir des del navegador. Aquest pas és crucial per evitar qualsevol ús indegut potencial o accés no autoritzat a la CLAU API.
Funcions de l'API: Scripts i Endpoints
La implementació dels mètodes Vottun SDK al nostre projecte Next.js es pot dividir en dos grups: “Scripts” i “Endpoints”.
Guions
La categoria “Scripts” inclou accions que només es realitzen una vegada i serveixen d’ajuda per preparar el lloc web. Aquestes accions inclouen el desplegament del contracte, la càrrega d’actius i altres tasques necessàries. Executem aquests scripts mitjançant Node.js per garantir un desplegament i un procés de configuració fluids. Aquí està un exemple d’ un guió:
Punts finals
La categoria “Endpoints” inclou mètodes que es cridaran des de la interfície, com ara reclamar un POAP. Aquests mètodes interactuen amb l’ SDK de Vottun i gestionen les operacions necessàries. En exposar aquests punts finals, permetem que el frontend es comuniqui amb el backend sense problemes. Aquí està un exemple de un punt final:
Implementació Frontend
A la interfície del nostre lloc de reclamació POAP, seguim un flux d’usuaris senzill i intuïtiu. Pretenem oferir una experiència perfecta perquè els usuaris connectin les seves carteres i reclamin els seus testimonis POAP.
A la pàgina inicial, incloem un botó “Connecta Wallet” que utilitza Metamask per tal de recuperar l’adreça de la cartera de l’usuari sense necessitat d’introduir text.
Un cop recuperada l’adreça de la cartera, mostrem un botó “Reclama POAP” a l’usuari. Quan es fa clic, aquest botó activa una trucada d’API al nostre punt final personalitzat. El backend, utilitzant el SDK de Vottun , facilita la transferència del POAP al compte corresponent.
Conclusions
En aquest article, hem après com implementar l’SDK Vottun en un projecte Next.js amb les particularitats següents:
- Ús de funcions sense servidor Next.js per protegir la CLAU de l’API Vottun mitjançant variables d’entorn, mantenint-la inaccessible des del navegador.
- Divisió dels mètodes de l’API en “Scripts” i “Endpoints”, per separar la implementació de l’SDK entre les accions utilitzades durant la configuració del lloc web i les accions realitzades dins del lloc web.
- Connectar la cartera mitjançant Metamask per recuperar l’adreça de la cartera de l’usuari per obtenir una experiència més fàcil d’utilitzar i fluida.
En articles futurs, aprofundirem en el codi d’implementació i oferirem explicacions i coneixements més detallats del procés d’integració.