Ú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.
ENGLISH VERSION (click here!)
Lately, I’ve been feeling the urge to code. I took advantage of the MiduDev bootcamp and started training to become what’s known as a full-stack developer. To be honest, I did have something in mind, though I admit that on other occasions that idea was a bit hazy.
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.
ENGLISH VERSION (click here!)
I was following the bootcamp to the letter, but I felt I also needed to explore some areas that would give me real-world practice. I wanted to see what I could build with what I was trying to make work—in other words, I wanted that knowledge to go beyond just memorization and start helping me gain new insights and, above all, experience. It wasn’t until the idea crossed my mind to connect to the Hive API and put what I’d learned into practice.
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.
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).
ENGLISH VERSION (click here!)
Once I had more or less acquired the necessary knowledge, I began to venture into the world of blockchain. I admit that I used Claude to do so, because I looked at the documentation and didn’t fully understand several points. In fact, that information seemed quite different from what I’d learned in the bootcamp. Claude served as my tutor, though I instructed it not to write the code for me, but rather to guide me on the logical steps I should take and the structure I needed to follow to connect.
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.
ENGLISH VERSION (click here!)
I’m trying to follow best practices as outlined in the bootcamp, including naming variables in English. I think this mini-project is really helping me review HTML, CSS, JavaScript (Vanilla), and a bit of API usage. I still haven’t started with React yet, but I think I’m taking the right steps to solidify my knowledge. Also, while I’m at it, I’m using the terminal to create files and folders (I use Warp), so I’m making progress on that front as well.
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.
ENGLISH VERSION (click here!)
Next, I’ll need to make the app look nicer and add some extra features, but for now I consider this part of the practice; if I refine my methods, it could be a good addition to the portfolio I’ll be building going forward.
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
