Lo que creará, vea la en Bitfinity test network y el . demostración en vivo repositorio de git Introducción Bienvenido a esta guía completa donde crearemos una plataforma benéfica descentralizada Web3 utilizando Next.js, Solidity y TypeScript. Al final de este tutorial, tendrá una comprensión clara de: Construyendo interfaces dinámicas con Next.js Elaboración de contratos inteligentes de Ethereum con Solidity Incorporación de verificación de tipos estáticos usando TypeScript Implementar e interactuar con sus contratos inteligentes Comprender los fundamentos de las plataformas benéficas basadas en blockchain Como beneficio adicional por participar en este tutorial, puede ganar fácilmente una copia de nuestro prestigioso libro sobre cómo convertirse en un desarrollador en demanda. Esta oferta es gratuita para las primeras . Para obtener instrucciones sobre cómo ganar, mire el breve vídeo a continuación. de solidez 300 personas Requisitos previos Necesitará las siguientes herramientas instaladas para construir conmigo: Nodo.js Hilo Git bash MetaMáscara Siguiente.js Solidez Kit de herramientas Redux CSS de viento de cola Para configurar MetaMask para este tutorial, mire el video instructivo a continuación: https://www.youtube.com/watch?v=qV1mbFOtkxo&embedable=true Una vez que haya completado la configuración, será elegible para recibir una copia gratuita de nuestro libro. Para reclamar su libro, . complete el formulario para enviar su prueba de trabajo Mire los siguientes para recibir hasta 3 meses de cursos premium gratuitos en videos instructivos Academia de Mentores Dapp, que incluye: Curso completo de acuñación de NFT Curso completo del mercado NFT Curso completo de blockchain etc. Comience su viaje con Bitfinity hoy. Experimente un proceso de desarrollo rápido, simple y sin complicaciones mientras crea su primera dApp de seguimiento de donaciones benéficas. Implemente sus contratos inteligentes en la red Bitfinity y genere un impacto positivo. Dicho esto, pasemos al tutorial y configuremos nuestro proyecto. Configuración Comenzaremos clonando un repositorio frontend preparado y configurando las variables de entorno. Ejecute los siguientes comandos: git clone https://github.com/Daltonic/dappFundsX cd dappFundsX yarn install git checkout no_redux_no_blockchain A continuación, cree un archivo en la raíz del proyecto e incluya las siguientes claves: .env NEXT_PUBLIC_RPC_URL=http://127.0.0.1:8545 NEXT_PUBLIC_ALCHEMY_ID=<YOUR_ALCHEMY_PROJECT_ID> NEXT_PUBLIC_PROJECT_ID=<WALLET_CONNECT_PROJECT_ID> NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_SECRET=somereallysecretsecret Reemplace y con sus respectivos ID de proyecto. <YOUR_ALCHEMY_PROJECT_ID> <WALLET_CONNECT_PROJECT_ID> : : YOUR_ALCHEMY_PROJECT_ID Obtenga la clave aquí WALLET_CONNECT_PROJECT_ID Obtenga la clave aquí Finalmente, ejecute para iniciar el proyecto. yarn dev Nuestra interfaz para este proyecto es sólida y está lista para alguna integración de contratos inteligentes, pero necesitaremos Reduxify nuestra aplicación para habilitar un espacio de datos compartido. Construyendo la tienda Redux La imagen de arriba representa la estructura de nuestra tienda Redux, será simple ya que no estamos creando ningún proyecto demasiado complejo. Configuraremos Redux para administrar el estado global de nuestra aplicación. Sigue estos pasos: Cree una carpeta en la raíz del proyecto. store Dentro de , crea dos carpetas: y . store actions states Dentro de , cree un archivo . states globalStates.ts https://gist.github.com/Daltonic/157a49fef39e3a1ac8b9a8883c6213f8?embedable=true Dentro , cree un archivo . actions globalActions.ts https://gist.github.com/Daltonic/c2217eff616b28a2261888ba77c236e7?embedable=true Cree un archivo dentro de la carpeta de la . globalSlices.ts store https://gist.github.com/Daltonic/69a29357cf1b9484425776a6ad4b26dd?embedable=true Cree un archivo dentro de la carpeta . index.ts store https://gist.github.com/Daltonic/7b3a9db8902d8ce831384ad42ca7231b?embedable=true Actualice el archivo con el proveedor de Redux. pages/_app.ts https://gist.github.com/Daltonic/ef67f453bc38c4038edc627644d25e2a?embedable=true Nuestra aplicación ha sido empaquetada con el kit de herramientas de Redux y volveremos a visitar Redux cuando integremos el backend con el frontend. Desarrollo de contratos inteligentes A continuación, desarrollaremos el contrato inteligente para nuestra plataforma: Cree una carpeta en la raíz del proyecto. contracts Dentro de , cree un archivo y agregue el código del contrato a continuación. contracts DappFund.sol https://gist.github.com/Daltonic/4e3f367d2b3a2227c951e74f4d58cbe8?embedable=true El contrato facilitará la creación, actualización y donación a organizaciones benéficas, así como funciones administrativas como cambiar el impuesto a las organizaciones benéficas y prohibir una organización benéfica. DappFund Aquí hay un desglose función por función: : esta función establece el impuesto benéfico inicial cuando se implementa el contrato. Se ejecuta solo una vez durante la implementación del contrato. constructor() : esta función permite a los usuarios crear una nueva organización benéfica. Requiere varios parámetros como el nombre, descripción, imagen, perfil y monto de la organización benéfica. Comprueba que estos parámetros sean válidos y luego crea un nuevo y lo agrega al mapeo de . createCharity() CharityStruct charities : esta función permite al propietario de una organización benéfica actualizar sus detalles. Comprueba que la organización benéfica existe y que el remitente es el propietario de la organización benéfica antes de actualizar los detalles de la organización benéfica. updateCharity() : esta función permite al propietario de una organización benéfica marcarla como eliminada. Comprueba que la organización benéfica existe y que el remitente es el propietario de la misma antes de marcarla como eliminada. deleteCharity() : esta función permite al propietario del contrato prohibir o cancelar la prohibición de una organización benéfica. Comprueba que la organización benéfica existe antes de cambiar su estado prohibido. toggleBan() : esta función permite a los usuarios donar a una organización benéfica. Comprueba que la organización benéfica existe, que no está prohibida y que aún no ha alcanzado su objetivo de recaudación de fondos. Luego incrementa el recuento total de donaciones, crea una nueva y la agrega al mapeo . También actualiza el monto recaudado y el recuento de donaciones de la organización benéfica. donate() SupportStruct supportersOf : esta función permite al propietario del contrato cambiar el impuesto de caridad. Comprueba que el nuevo porcentaje de impuesto sea válido antes de actualizar el impuesto. changeTax() : esta función permite que cualquiera obtenga los detalles de una organización benéfica. Devuelve el asociado con el ID proporcionado. getCharity() CharityStruct : esta función permite que cualquiera obtenga los detalles de todas las organizaciones benéficas activas. Devuelve una matriz de objetos . getCharities() CharityStruct : esta función permite al usuario obtener los detalles de todas sus organizaciones benéficas activas. Devuelve una matriz de objetos . getMyCharities() CharityStruct : esta función permite que cualquiera obtenga los detalles de todos los partidarios de una organización benéfica específica. Devuelve una matriz de objetos . getSupports() SupportStruct : esta función interna se utiliza para transferir fondos. Envía la cantidad especificada de Ether a la dirección indicada. payTo() : esta función interna devuelve la hora actual en segundos desde la época de Unix. Se utiliza para marcar la hora de donaciones y creaciones benéficas. currentTime() Implementación y siembra de contratos Ahora, implementemos nuestro contrato inteligente y rellenémoslo con algunos datos ficticios: Cree una carpeta en la raíz del proyecto. scripts Dentro de , cree un archivo y un archivo y agregue los siguientes códigos. scripts deploy.js seed.js Implementar secuencia de comandos https://gist.github.com/Daltonic/e4038d184c36bf69ac9b6b75da321ca1?embedable=true Guión de semillas https://gist.github.com/Daltonic/65ca0f2dfdf0ec91bfcf78f49654b36e?embedable=true Ejecute los siguientes comandos para implementar el contrato y inicializarlo con datos: yarn hardhat node # Run in terminal 1 yarn hardhat run scripts/deploy.js # Run in terminal 2 yarn hardhat run scripts/seed.js # Run in terminal 2 Si lo hizo correctamente, debería ver un resultado similar al siguiente: En este punto podemos comenzar la integración de nuestro contrato inteligente a nuestra interfaz. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true Integración frontal Primero, cree una carpeta en la raíz del proyecto y, dentro de ella, cree un archivo . Este archivo contendrá funciones para interactuar con nuestro contrato inteligente. services blockchain.tsx https://gist.github.com/Daltonic/449b493fe7492386f6221329f3ee918b?embedable=true El código proporcionado es una implementación TypeScript de nuestro servicio blockchain para interactuar con nuestro contrato inteligente. Este servicio permite a los usuarios realizar acciones en nuestra plataforma benéfica, incluida la creación y actualización de organizaciones benéficas, la realización de donaciones y más. Aquí hay un desglose función por función: : esta función obtiene las instancias de contrato de Ethereum con las que interactuará el servicio. Comprueba si el usuario tiene una cuenta Ethereum conectada y la usa para interactuar con el contrato; de lo contrario, utiliza una billetera creada aleatoriamente. getEthereumContracts() : esta función devuelve el propietario del contrato. getAdmin() , , : estas funciones recuperan todas las organizaciones benéficas, las creadas por el usuario actual y una organización benéfica específica por su ID, respectivamente. getCharities() getMyCharities() getCharity() : esta función busca los seguidores de una organización benéfica específica por su ID. getSupporters() , : estas funciones permiten a un usuario crear una nueva organización benéfica o actualizar una existente, respectivamente. createCharity() updateCharity() : esta función permite a un usuario hacer una donación a una organización benéfica específica. makeDonation() : esta función permite al propietario de una organización benéfica eliminarla. deleteCharity() : esta función permite al propietario del contrato prohibir una organización benéfica. banCharity() , : estas son funciones auxiliares que estructuran los datos devueltos del contrato en un formato más utilizable. structuredCharities() structuredSupporters() Actualice el archivo dentro de para incluir la red usando los siguientes códigos. provider.tsx services bitfinity https://gist.github.com/Daltonic/88476a8b642f0d1f879644ce7521e735?embedable=true Página que interactúa con el contrato inteligente A continuación, vincularemos las funciones del servicio blockchain a sus respectivas interfaces en el frontend: para obtener datos de la función . No 1: Mostrar todas pages/index.tsx getCharities() https://gist.github.com/Daltonic/c7b5205c0a352e715ea6d369c4c5a739?embedable=true Observe cómo se utiliza Redux para almacenar datos de blockchain antes de que se muestren en la pantalla. No 2: Mostrar de actualización para usar el enlace para obtener las organizaciones benéficas del usuario actual. pages/projects.tsx de organizaciones benéficas del usuario useEffect() https://gist.github.com/Daltonic/55de269f6d41727ad2ca283adfea241e?embedable=true Tenga en cuenta el uso del gancho para recuperar las organizaciones benéficas del usuario actual y cómo se usa Redux para manejar y mostrar datos de la cadena de bloques en múltiples componentes. Este será un patrón repetido en todas las páginas y componentes. useEffect() Actualice para usar la función para el envío de formularios. No 3: Creación de nuevas organizaciones benéficas pages/donations/create.tsx createCharity() https://gist.github.com/Daltonic/58f3f813b5ee8bad45815545734c7410?embedable=true de actualización de organización benéfica única para usar las funciones , y para recuperar organizaciones benéficas y patrocinadores por ID. No 4: Mostrar pages/donations/[id].tsx getServerSideProps() getCharity() getSupporters() https://gist.github.com/Daltonic/96c4908e8a5406ab4e85822bb16a4b6f?embedable=true Actualice para usar la función para recuperar organizaciones benéficas por ID y completar los campos del formulario. No 5: Editar organizaciones benéficas existentes pages/donations/edit/[id].tsx getCharity() https://gist.github.com/Daltonic/045ec20e60ba4aaac4d9ae62620bff51?embedable=true ¿Viste cómo se usó la función para recuperar organizaciones benéficas por ID y también cómo se usó para completar los campos del formulario? getCharity() Componentes con contrato inteligente Como hicimos con las páginas anteriores, actualicemos los siguientes componentes para interactuar con el contrato inteligente: Actualice para usar la función para llamar a la función . No 1: Manejo de la prohibición de organizaciones benéficas components/Ban.tsx handleBanning() banCharity() https://gist.github.com/Daltonic/3890759a4c5a9d83b292c1e8cbb31d91?embedable=true Actualice para usar las funciones y para ejecutar un procedimiento de eliminación de organizaciones benéficas. No 2: Manejo de la eliminación de organizaciones benéficas components/Delete.tsx handleDelete() deleteCharity() https://gist.github.com/Daltonic/a9dd133448062c32990435e9a762d17d?embedable=true Actualice el archivo para usar la función para enviar el pago al contrato inteligente usando la función . No 3: Hacer donaciones a organizaciones benéficas components/Donor.tsx handleSubmit() makeDonation() https://gist.github.com/Daltonic/9e82883fd17884330d2a82d5cf641eae?embedable=true Otros componentes Aquí están el resto de los componentes que también debes actualizar debido a la integración de Redux en ellos. Revisa y actualiza el componente que permite a los usuarios navegar, eliminar y editar información de organizaciones benéficas. Utilice Redux para activar el modo de eliminación al hacer clic. El componente NavBtn https://gist.github.com/Daltonic/38280dec93f6046187f4e438dbbb9007?embedable=true revisa y actualiza la implementación de Redux para activar los modos de donación, simpatizantes y prohibición al hacer clic en sus respectivos botones. El componente de pago https://gist.github.com/Daltonic/37f2724bec3380f9ff6dbf7771278541?embedable=true revisa y actualiza la implementación de Redux para cerrar el modal de soporte cuando se hace clic en el botón cerrar. El componente de soporte https://gist.github.com/Daltonic/59c6788386f9e0bc28b93094da25fa14?embedable=true Al implementar estas actualizaciones, todos los componentes y páginas ahora están conectados al contrato inteligente, lo que marca la finalización del proyecto. Si su servidor estuvo inactivo todo este tiempo, puede reactivarlo ejecutando . Nextjs yarn dev Para obtener más información, recomendamos ver el vídeo completo de esta compilación en nuestro . canal de YouTube Conclusión En este tutorial, hemos creado una plataforma benéfica descentralizada utilizando Next.js, Solidity y TypeScript. Configuramos el entorno de desarrollo, construimos la tienda Redux e implementamos el contrato inteligente en la cadena de bloques. Al integrar el contrato inteligente con la interfaz, creamos una experiencia de usuario perfecta. A lo largo del tutorial, adquirió valiosas habilidades en la creación de aplicaciones Web3, la elaboración de contratos inteligentes y la incorporación de verificación de tipos estáticos. Ahora está listo para crear su propia plataforma benéfica descentralizada. ¡Feliz codificación y libera tu innovación en el mundo de Web3!
