Un consejo estándar para los programadores principiantes es que aprendas más efectivamente cuando trabajes en tus proyectos personales. Es un buen consejo, pero es posible que tenga dificultades para seguirlo—especialmente si es muy nuevo en el oficio de TI. Este artículo actúa como una guía paso a paso que puede seguir para comenzar sus proyectos y aprender en el camino. Mis ejemplos son con la pila de desarrollo web frontend —HTML + CSS + JS, — pero puede adaptar este enfoque a cualquier tecnología que esté utilizando.

Elija un caso de uso simple

El primer paso: no intentes morder más de lo que puedes masticar. Es común que las personas intenten crear cosas como clones de sitios web populares, pero esto da como resultado más funciones de las que uno puede desarrollar de manera realista. Si insiste en inspirarse en productos existentes, intente simplificarlo al extremo:

• si crea un clon de Reddit, cree una lista de enlaces codificados (por ejemplo, los mejores sitios web de programación) donde las personas pueden votar a favor o en contra, O una lista de enlaces donde simplemente agrega enlaces a una lista larga
• si crea un clon de Airbnb, haga solo una lista de propiedades estática, sin reservar ni agregar nuevas propiedades
• si crea un clon de Uber, cree una página de resumen del pedido: un viaje del punto A al punto B

Otro enfoque es trabajar en algunos ejemplos de clichés: una aplicación TODO o una página de blog. Esos pueden parecer repetitivos y aburridos, pero al menos el caso de uso se entiende bien y no debería abrumarlo.

Dibujar la interfaz

Cuando haya seleccionado su caso de uso, tome lápiz y papel y dibuje su interfaz. Debe comenzar con una página o un máximo de dos páginas. Al principio, un boceto en papel es perfecto; su objetivo es iterar rápidamente, y una solución de baja tecnología funciona muy bien para ello. En proyectos colaborativos, las personas usan aplicaciones sofisticadas para los diseños, pero presentan algunos dolores de cabeza—debe instalar es aplicación, aprender su interfaz, etc., lo que lo ralentiza. Su boceto aquí aclara sus pensamientos, y una vez que esté hecho, lo usará para nada más que echarle un vistazo mientras construye la interfaz.

Diseñar el esquema de datos

Según lo que esté mostrando en las distintas pantallas, necesitará tener algunos datos en su aplicación. Asigne cada valor que muestre o use a un campo que tendrá en la estructura de datos. Para nuestros ejemplos anteriores:

• 'Reddit' tendrá publicaciones o enlaces, con 'título', 'URL' y tal vez 'votos' o 'voteCount'.
• 'Airbnb' tendrá propiedades con 'nombre', 'foto', 'descripción', 'precio' y 'ubicación'.
• 'Uber' tendrá viajes con 'desde', 'hasta' y 'costo estimado'.
• La aplicación TODO tendrá tareas con título, descripción.
• El blog tendrá publicaciones con título, cuerpo y fecha de publicación.

Construye la interfaz

Con toda esa preparación completa, está listo para abrir el editor de código. La interfaz de usuario es la parte más tangible y probablemente la más sencilla del proyecto. Creará un archivo HTML y tal vez agregue CSS si tiene ganas de hacer que su aplicación sea algo bonita. Tu objetivo es crear lo que se redactó antes y mostrarlo de la forma más sencilla posible. Especialmente si está agregando estilo, tenga en cuenta que "hecho" es mejor que perfecto —no dedique demasiado tiempo a menos que CSS y el diseño sean sus prioridades de aprendizaje.

Cree datos simulados y actualice la interfaz para usarlos

Cuando haya terminado con HTML con datos codificados, su siguiente paso es crear una interfaz dinámica. En esta etapa, agregará JS a su proyecto. Puede limitarse a Vanilla JS y recrear el HTML con DOM, o puede agregar un marco JS con el que esté familiarizado o quiera aprender. Deberá crear una estructura de datos temporal en una variable y volver a crear el formulario HTML JS en función de los datos de la variable.

Añade algo de lógica

Una vez que muestra datos dinámicos, puede agregar algo de lógica para manipularlos. En nuestro ejemplo simplificado, la lógica será bastante simple —agregar un registro a la lista o actualizar uno o dos valores en los datos existentes. El objetivo principal aquí es asegurarse de que nuestra aplicación esté viva —de modo que el usuario pueda hacer clic en la interfaz y se realicen cambios en lo que aparece en la pantalla. Esto es principalmente una prueba de que puede manipular datos. A medida que continúe trabajando en el ejemplo, la lógica se volverá exponencialmente más complicada. En ese caso, cada función añadida tiene que funcionar con todas las existentes. ¡Disfruta el momento en que es tan simple que se siente sencillo!

Almacene sus datos

El siguiente paso es configurar algún tipo de persistencia para los cambios en sus datos. Puedes considerar las siguientes cosas:

• localStorage o sessionStorage – para pruebas locales rápidas
• almacenamiento simple de terceros – algo como Airtable o Google Sheets
• almacenamiento sin backend – Firebase o un sistema similar
• compilación de backend dedicada – usted mismo para más práctica

Déjame saber en la encuesta o en los comentarios si estás interesado en aprender más sobre cualquiera de esos enfoques. Estoy pensando en crear artículos con ejemplos, y si sé que hay demanda, estaré más motivado para trabajar en ellos.

¡Iterar!

Una vez que siga todos estos pasos, debería tener una aplicación algo utilizable. Estará lejos de ser un producto mínimo viable, pero deberías tener algo que mostrar a las personas que te animan en tus estudios. Si desea continuar trabajando en su proyecto, el siguiente paso es averiguar qué otro caso de uso desea cubrir en su aplicación y comenzar a seguir los pasos nuevamente. Esta vez debería ser más accesible y debería poder omitir algunos pasos.

¿Qué sigue?

¡Siéntete libre de compartir los resultados de tu experimento en los comentarios! Si le gustó el enfoque propuesto aquí, puede continuar con modelado de datos de aprendizaje