EmojiDrop

DApp que permite regalar emojis a un Canister en Internet Computer.

Archivos

• Backend -> src/emoji_drop_backend
• Frontend -> src/emoji_drop_frontend

Estructura del canister

• 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 canister
• checkEmoji(emoji) -> Función interna que revisa que los inputs del usuario sean en verdad emojis.

Ambiente

• Asegurarse de tener una terminal UNIX y tener instalado el SDK

  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

Backend

• 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

• 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) ")

• Alternativamente se puede jugar a través de la Candid UI

• O en el playground

Frontend

• 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()

Fullstack:

• 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

DApp en mainnet

• Se puede interactuar con los canisters en mainnet en las siguientes URL
  • Backend a4gq6-oaaaa-aaaab-qaa4q-cai.raw.icp0.io/?id=sbd6b-yqaaa-aaaao-aspaq-cai
  • Frontend siav5-oyaaa-aaaao-aspba-cai.icp0.io/

Planes a futuro

• Explorar a fondo la manera de validar los emojis con Unicode
• Mejorar elementos y validaciones en backend y frontend