🖥️Día 2 - Inicia con el desarrollo frontend

¡Veamos como colocar interfaces a nuestro proyecto!

Este día aprenderás a desarrollar a desplegar tu Canisters y como utilizar el tener una interfaz.

Vamos a analizar como puedes hacer funcionar tu Frontend y daremos un repaso a Candid

Desarrollando el frontend de tu proyecto

Para tener un frontend en tus proyectos puedes utilizar las tecnologías que se utilizan normalmente en el desarrollo web

• HTML

• CSS

• JavaScript

Si estás familiarizado con Node.js o algunos Frameworks de JS seguramente te será un poco más fácil.

Primero crea tu proyecto como normalmente lo haces.

dfx new hola_mundo

Dentro del directorio se recomienda tener esta estructura:

hola_mundo/
├── README.md      # default project documentation
├── dfx.json       # project configuration file
├── node_modules   # libraries for frontend development
├── package-lock.json
├── package.json
├── src            # source files directory
│   ├── explore_hello
│   │   └── main.mo
│   └── explore_hello_assets
│       ├── assets
│       │   ├── logo.png
│       │   ├── main.css
│       │   └── sample-asset.txt
│       └── src
│           ├── index.html
│           └── index.js
└── webpack.config.js

Lo mínimo con lo que se requiere contar, en el directorio del proyecto predeterminado, son las siguientes carpetas y archivos:

• Un archivo README predeterminado para documentar su proyecto en el repositorio.

• Un archivo de configuración dfx.json predeterminado para establecer opciones configurables para su proyecto.

• Un directorio src predeterminado para todos los archivos fuente requeridos por su dapp.

El directorio src predeterminado incluye un archivo de plantilla main.mo que puede modificar o reemplazar para incluir su lógica de programación principal.

Si quieres tener más detalles:

• ICP- Frontend

• Lectura 1

• Ejemplo base 1

• Ejemplo base 2

Actividades

1. Ten a la mano tu canister y crea una estructura en tu proyecto que integre la parte del frontend.

2. Realiza la evaluación del día número 2.