Últimamente me han entrado ganas de programar. Aproveché el bootcamp de MiduDev y comencé a formarme hacia lo que se conoce como Full-Stack Developer. La verdad que sí tenía algo en mente, aunque admito que en otras oportunidades esa idea estaba ofuscada.
Pensé en estudiar un stack accesible para mí, y luego ver hasta dónde podría llegar. Una anterior vez estuve estudiando Python, pero no tenía claro por qué. Me pasé a JavaScript y como es sabido, este lenguaje funciona en compañía de tecnologías como HTML y CSS, mediante la manipulación del DOM. No fue hasta que comencé a hacer proyectos que noté que me entusiasmaba ver los resultados. Sin embargo, tampoco tenía claro qué hacer en el desarrollo; solo sabía que debía tener mi portfolio.
I thought about learning a tech stack that was accessible to me, and then seeing how far I could go. I had studied Python before, but I wasn’t sure why. I switched to JavaScript, and as is well known, this language works in conjunction with technologies like HTML and CSS by manipulating the DOM. It wasn’t until I started working on projects that I realized how excited I was to see the results. However, I still wasn’t sure what to do in terms of development; I just knew I needed to build my portfolio.
JSCAMP | InfoJobs by MiduDev - Bootcam Full-Stack
Estaba siguiendo a rajatabla el bootcamp, pero sentí que también debía explorar algunos terrenos que me pongan en práctica real. Quería ver qué podía construir con lo que estaba intentando hacer funcionar; es decir, que ese conocimiento aparte de fijarse comience a adquirir nociones nuevas, y sobre todo, experiencia. No fue hasta que se me cruzó por la mente conectarme a la API de Hive y poner en práctica lo que había aprendido.
Llegué a aprender a consumir datos de un JSON a nivel local. Pero yo quería hacerlo con un enfoque diferente; consumir datos de una API en la nube. Anteriormente había hecho unas prácticas para hacerlo con la API de Pókemon (PokéAPI). Era básicamente como uno acceder a un objeto, solo que se requiere de hacer llamadas con Fetch() y .then(). Esto fue algo que me cambió el panorama, porque luego noté que se podía hacer de forma moderna con el Async Await, que básicamente son las promesas modernas que usan los desarrolladores hoy en día. Decidí ponerlo en práctica consumiendo la API de Hive, que a decir verdad, tiene su propia estructura, así que era un desafío más.
I had already learned how to consume data from a JSON file locally. But I wanted to take a different approach: consuming data from a cloud-based API. I’d previously done some practice exercises using the Pokémon API (PokéAPI). It was basically like accessing an object, except that it required making calls with fetch() and .then(). This really changed my perspective, because I later realized it could be done in a modern way using Async/Await—which are essentially the modern promises that developers use today. I decided to put this into practice by consuming the Hive API, which, to be honest, has its own unique structure, so it was an added challenge.
RunJS | Online JavaScript Playground
Una vez que más o menos tenía los conocimientos necesarios comencé a aventurarme en la blockchain. Admito que he usado Claude para lograrlo, porque fui a la documentación y no terminé de entender varias cuestiones. De hecho, esa información me parecía bastante alejada de lo que había aprendido en el bootcamp. Claude me sirvió de tutor, aunque le di instrucciones sobre que no haga el código por mi, sino que me oriente qué pasos lógicos debía hacer y qué estructura debía cumplir para conectarme.
En esta oportunidad decidí salir de lo tradicional y aplicar el Fetch moderno, con bloques Try y Catch. Pensé en algo sencillo, como buscar información de un usuario de Hive y crear una tarjeta con el avatar incluido (para mi sorpresa, el avatar no está en la API, sino que está alojada en un servicio de URL).
This time, I decided to break from tradition and use modern Fetch, with Try and Catch blocks. I thought of something simple, like retrieving information about a Hive user and creating a card that included their avatar (to my surprise, the avatar isn’t in the API—it’s hosted on a URL service).
Estoy tratando de hacer las buenas prácticas siguiendo el bootcamp, incluido los nombres de las variables en inglés. Creo que este mini proyecto me sirve mucho para repasar HTML, CSS, JavaScript (Vanilla), y algo de consumo de API. Aún me falta comenzar con React, pero creo que estoy dando buenos pasos para afianzar conocimientos. Además, ya que estamos, lo que estoy usando es la terminal para crear archivos y carpetas (uso Warp); así que por ese lado también estoy avanzando.
Este mini proyecto también me sirvió para ver como funciona la asincronía con la API. Me falta agregar varios detalles, como por ejemplo enviar al main un párrafo que diga que no se pudo conectar o dio error de red; esto de manera lógica, tal vez creando una clase.
This mini-project also helped me see how asynchronous operations work with the API. I still need to add a few details, such as sending a message to the main function indicating that a connection couldn’t be established or that a network error occurred—I’ll do this logically, perhaps by creating a class.
Luego quedará hacer la app más bonita y agregarle alguna funcionalidad extra, pero por el momento lo considero parte de la práctica; si perfecciono mis métodos, podría venir bien para ser parte del portfolio que construiré en adelante.
La idea que tengo para mejorarla es darle una apariencia de tarjeta NFT, que al tocar pueda girar sobre su propio eje (ahí mostrará los datos financieros). Pero eso ya es conocer más sobre cómo funciona CSS, quedará por verlo a más detalle.
My idea for improving it is to give it the look of an NFT card that, when tapped, can rotate on its own axis (at which point it will display the financial data). But that requires a deeper understanding of how CSS works—we’ll have to look into it in more detail.
- Imagen principal editada en Canva.
- Traducción al inglés con DeepL (sé inglés, pero no me animo a escribir por miedo al bullying 🤣).
Posted Using INLEO
