DApp que permite regalar emojis a un Canister en Internet Computer.
- Backend ->
src/emoji_drop_backend
- Frontend ->
src/emoji_drop_frontend
emojis
->HashMap
que incluye todos los emojis recibidos y el número de veces que se han recibido.sendEmoji(emoji)
-> Función que envía o actualiza un nuevo emoji (incrementa el conteo).getEmoji(emoji)
-> Revisa si el emoji se encuentra en la lista de regalos.topEmoji()
-> Muestra el emoji más popular y el número de veces que se ha recibido.allEmojis()
-> Muestra todos los emojis recibidos en el canistercheckEmoji(emoji)
-> Función interna que revisa que los inputs del usuario sean en verdad emojis.
-
Asegurarse de tener una terminal
UNIX
y tener instalado elSDK
sh -ci "$(curl -fsSL https://internetcomputer.org/install.sh)"
-
Comenzar un entorno local de ejecución
# Verifica estar en el directorio de este proyecto dfx start
-
Despliega el canister
dfx deploy
- Retorna la
URL
de la Candid UI... URLs: Backend canister via Candid interface: emoji_drop_backend: http://127.0.0.1:4943/?canisterId=be2us-64aaa-aaaaa-qaabq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
- Retorna la
-
Juega con el canister
# Enviar emojis dfx canister call emoji_drop_backend sendEmoji 🙂 # ("🙂", opt (1 : nat)) dfx canister call emoji_drop_backend sendEmoji 🙂 # ("🙂", opt (2 : nat)) dfx canister call emoji_drop_backend sendEmoji 🤬 # ("🤬", opt (1 : nat)) # Buscar emoji dfx canister call emoji_drop_backend getEmoji 🙂 # ("🙂", opt (2 : nat)) # Buscar el emoji más popular dfx canister call emoji_drop_backend topEmoji # ("😀", 2 : nat) # Mostrar todos los emojis dfx canister call emoji_drop_backend allEmojis # ("(🙂, 2) (🤬, 1) ")
-
O en el playground
- Creado con Vite
- Cumple con las siguientes funciones
- Selección el emoji que se quiere regalar al canister
- Verificación de identidad con Internet Identity para evitar spam y sobregasto de cycles
- Call to Action que ejecuta la función
sendEmoji()
del canister backend - Muestra el Emoji más popular obtenido del query
topEmoji()
- Para correr la DApp localmente hay que seguir los siguientes pasos:
- Iniciar una terminal en el directorio raíz
- Iniciar una réplica local
npm start --clean
- En una nueva terminal generar el ambiente de desarrollo y desplegar los canisters con
npm run setup
- Se generará el directorio
src/declarations/emoji_drop_backend
que contendrá los elementos para interactuar con el backend, así como el archivo.did
service : { allEmojis: () -> (text) query; getEmoji: (text) -> (text, opt nat) query; sendEmoji: (text) -> (text, opt nat); topEmoji: () -> (text, nat) query; }
- Ir a las direcciones que se muestran en terminal
Deployed canisters. URLs: Frontend canister via browser emoji_drop_frontend: http://127.0.0.1:4943/?canisterId=bd3sg-teaaa-aaaaa-qaaba-cai Backend canister via Candid interface: emoji_drop_backend: http://127.0.0.1:4943/?canisterId=be2us-64aaa-aaaaa-qaabq-cai&id=bkyz2-fmaaa-aaaaa-qaaaq-cai
- Y ahora se puede interactuar con ambos canisters
- Se puede interactuar con los canisters en mainnet en las siguientes URL
- Explorar a fondo la manera de validar los emojis con
Unicode
- Mejorar elementos y validaciones en backend y frontend