Más ideas de proyectos para mejorar sus habilidades de codificación

Hace dos semanas publiqué un artículo que contenía 15 ideas de proyectos que puedes construir para mejorar tus habilidades de codificación, y la gente estaba muy entusiasmada con ese recurso.

Además, el repositorio de ideas de aplicaciones ha obtenido casi 3000 estrellas desde que publiqué ese artículo. ¡Eso es una locura!

¡Gracias a todos por eso!

En esta publicación repasaremos algunos proyectos nuevos que se agregaron al repositorio desde entonces.

Como recordatorio rápido, todos los proyectos se dividen en tres niveles según el conocimiento y la experiencia necesarios para completarlos. Consulte la descripción de los niveles en el repositorio.

A continuación encontrará 2 ideas de proyectos para principiantes, 4 intermedios y 3 avanzados.

1. CALCULADORA

Nivel: 1 - Principiante

Las calculadoras no solo son una de las herramientas más útiles disponibles, sino que también son una excelente manera de comprender la interfaz de usuario y el procesamiento de eventos en una aplicación. En este problema, creará una calculadora que admita cálculos aritméticos básicos en enteros.

¡El estilo depende de ti, así que usa tu imaginación y sé creativo! También es posible que valga la pena experimentar con la aplicación de calculadora en su dispositivo móvil para comprender mejor la funcionalidad básica y los casos límite.

Restricciones

  • No puede usar la función eval () para ejecutar cálculos

Historias del usuario

  • El usuario puede ver una pantalla que muestra el número actual ingresado o el resultado de la última operación.
  • El usuario puede ver un teclado de entrada que contiene botones para los dígitos 0–9, operaciones: '+', '-', '/' y '=', un botón 'C' (para borrar) y un botón 'AC' (para borrar todo).
  • El usuario puede ingresar números como secuencias de hasta 8 dígitos de largo haciendo clic en los dígitos en el teclado de entrada. Se ignorará la entrada de cualquier dígito de más de 8.
  • El usuario puede hacer clic en un botón de operación para mostrar el resultado de esa operación en: _ el resultado de la operación anterior y el último número ingresado O _ los últimos dos números ingresados ​​O * el último número ingresado
  • El usuario puede hacer clic en el botón "C" para borrar el último número o la última operación. Si la última entrada del usuario fue una operación, la pantalla se actualizará al valor que la precedió.
  • El usuario puede hacer clic en el botón "AC" para borrar todas las áreas de trabajo internas y establecer la pantalla en 0.
  • El usuario puede ver "ERR" que se muestra si alguna operación excedería el máximo de 8 dígitos.

Caracteristicas adicionales

  • El usuario puede hacer clic en el botón "+/-" para cambiar el signo del número que se muestra actualmente.
  • El usuario puede ver un botón de punto decimal (.) En el panel de entrada que permite ingresar números de coma flotante de hasta 3 lugares y realizar operaciones hasta el número máximo de lugares decimales ingresados ​​para cualquier número.

Enlaces y recursos útiles

  • Calculadora (Wikipedia)
  • MDN

Proyectos de ejemplo

2. APLICACIÓN DE RECETA

Nivel: 1 - Principiante

Puede que no te hayas dado cuenta de esto, pero las recetas no son más que algoritmos culinarios. Al igual que los programas, las recetas son una serie de pasos imprescindibles que, si se siguen correctamente, dan como resultado un plato sabroso.

El objetivo de la aplicación Receta es ayudar al usuario a administrar las recetas de una manera que las haga fáciles de seguir.

Restricciones

  • Para la versión inicial de esta aplicación, los datos de la receta pueden codificarse como un archivo JSON. Después de implementar la versión inicial de esta aplicación, puede ampliarla para mantener las recetas en un archivo o base de datos.

Historias del usuario

  • El usuario puede ver una lista de títulos de recetas.
  • El usuario puede hacer clic en el título de una receta para mostrar una tarjeta de receta que contiene el título de la receta, el tipo de comida (desayuno, almuerzo, cena o merienda), la cantidad de personas a las que sirve, su nivel de dificultad (principiante, intermedio, avanzado), la lista de ingredientes (incluidas sus cantidades) y los pasos de preparación.
  • El usuario hace clic en un nuevo título de receta para reemplazar la tarjeta actual con una nueva receta.

Caracteristicas adicionales

  • El usuario puede ver una foto que muestra cómo se ve el elemento después de que se haya preparado.
  • El usuario puede buscar una receta que no esté en la lista de títulos de recetas ingresando el nombre de la comida en un cuadro de búsqueda y haciendo clic en el botón "Buscar". Se puede utilizar cualquier API de recetas de código abierto como fuente de recetas (consulte The MealDB a continuación).
  • El usuario puede ver una lista de recetas que coinciden con los términos de búsqueda
  • El usuario puede hacer clic en el nombre de la receta para mostrar su tarjeta de recetas.
  • El usuario puede ver un mensaje de advertencia si no se encuentra una receta coincidente.
  • El usuario puede hacer clic en el botón "Guardar" en las tarjetas para las recetas ubicadas a través de la API para guardar una copia en este archivo de receta o base de datos de aplicaciones.

Enlaces y recursos útiles

  • Usando Fetch
  • Axios
  • La API de MealDB

Proyectos de ejemplo

3. APLICACIÓN DE DIBUJO

Nivel: 2 - Intermedio

Cree ilustraciones digitales en un lienzo en la web para compartir en línea y también exportarlas como imágenes.

Historias del usuario

  • El usuario puede dibujar en un lienzo con el mouse
  • El usuario puede cambiar el color.
  • El usuario puede cambiar el tamaño de la herramienta.
  • El usuario puede presionar un botón para borrar el lienzo

Caracteristicas adicionales

  • El usuario puede guardar la obra de arte como una imagen (formato .png, .jpg, etc.)
  • El usuario puede dibujar diferentes formas (rectángulo, círculo, estrella, etc.)
  • El usuario puede compartir la obra de arte en las redes sociales.

Enlaces y recursos útiles

  • Aprenda a crear una aplicación de dibujo usando p5js

Proyectos de ejemplo

4. TRADUCTOR EMOJI

Nivel: 2 - Intermedio

Los emojis se han convertido en la lengua franca de la sociedad moderna. Son una forma divertida y rápida de comunicarse, pero también un mecanismo extremadamente expresivo para comunicar emociones y reacciones.

El objetivo de la aplicación Emoji Translator es traducir el texto ingresado por el usuario en una cadena de emojis equivalente, traducida de una o más palabras en el texto original, y palabras para las que no hay emoji correspondiente.

Historias del usuario

  • El usuario puede ingresar una cadena de palabras, números y signos de puntuación en un cuadro de texto
  • El usuario puede hacer clic en el botón "Traducir" para traducir palabras en el texto ingresado en sus emojis correspondientes.
  • El usuario puede ver un mensaje de advertencia si se hizo clic en "Traducir", pero el cuadro de texto de entrada estaba vacío o sin cambios desde la última traducción.
  • El usuario puede ver elementos de texto en el texto ingresado traducido a sus emojis equivalentes en un cuadro de texto de salida. Los elementos de texto para los que no hay emoji no se modificarán.
  • El usuario puede hacer clic en el botón "Borrar" para borrar los cuadros de texto de entrada y salida.

Caracteristicas adicionales

  • El desarrollador implementará una función de sinónimo de emoji para permitir que la aplicación traduzca una variedad más amplia de palabras a emoji.
  • El usuario puede seleccionar el idioma en el que se ingresa el texto de entrada de una lista desplegable de idiomas.

Enlaces y recursos útiles

Lista completa de Emoji v12.0

Proyectos de ejemplo

Emoji Translate

5. APLICACIÓN DE GENERADOR DE MEMORIA

Nivel: 2 - Intermedio

Permita que los usuarios generen memes personalizados agregando texto sobre una imagen.

Historias del usuario

  • El usuario puede cargar una imagen que aparecerá en un lienzo.
  • El usuario puede agregar texto en la parte superior de la imagen.
  • El usuario puede agregar texto en la parte inferior de la imagen.
  • El usuario puede seleccionar el color del texto.
  • El usuario puede seleccionar el tamaño del texto.
  • El usuario puede guardar el meme resultante

Caracteristicas adicionales

  • El usuario puede seleccionar la familia de fuentes para el texto
  • El usuario puede compartir el meme en las redes sociales (twitter, reddit, facebook, etc.)
  • El usuario puede arrastrar el texto y colocarlo donde quiera encima de la imagen
  • El usuario puede dibujar formas en la parte superior de la imagen (círculos, rectángulos o dibujos libres con el mouse)

Enlaces y recursos útiles

Trabajar con el lienzo es muy fácil gracias a la biblioteca p5js.

Proyectos de ejemplo

Meme Generator por imgflip

6. PRÁCTICA DE TIPOLOGÍA

Nivel: 2 - Intermedio

Algunas cosas son tan obvias que pueden pasarse por alto fácilmente. Como desarrollador, su capacidad para escribir de forma rápida y precisa es un factor que influye en la productividad de su desarrollo. El objetivo de la aplicación Typing Practice es proporcionarle prácticas de mecanografía junto con métricas que le permitan medir su progreso.

La práctica de escritura muestra una palabra que luego debe escribir dentro de un intervalo de tiempo específico. Si la palabra se escribe incorrectamente, permanece en la pantalla y el intervalo de tiempo sigue siendo el mismo. Pero cuando la palabra se escribe correctamente, se muestra una nueva palabra y el intervalo de tiempo se reduce ligeramente.

Con suerte, esta práctica repetitiva lo ayudará a mejorar tanto su velocidad de escritura como su precisión.

Historias del usuario

  • El usuario puede ver que las palabras de intervalo de tiempo deben escribirse en la ventana de la aplicación.
  • El usuario puede ver la cantidad de intentos exitosos y la cantidad de intentos totales en un cuadro de puntaje.
  • El usuario puede hacer clic en el botón "Iniciar práctica" para iniciar la sesión de práctica.
  • El usuario puede ver la palabra de aviso que se muestra en un cuadro de texto.
  • El usuario puede comenzar a escribir la palabra en un cuadro de entrada de texto.
  • El usuario puede ver que las letras que se han escrito parpadean si se ingresa una letra incorrecta y se borrará el cuadro de entrada de texto.
  • El usuario puede ver un mensaje adyacente al cuadro de entrada de texto que indica que debe intentarlo nuevamente si se ingresa una letra incorrecta.
  • El usuario puede ver el número de intentos totales incrementados en el cuadro de puntuación.
  • El usuario puede ver un mensaje de felicitación si la palabra está escrita correctamente.
  • El usuario puede ver que las palabras de intervalo de tiempo deben escribirse disminuidas en una pequeña cantidad si la palabra se escribe correctamente.
  • El usuario puede ver el número de intentos exitosos incrementado en el cuadro de puntuación si la palabra se escribió correctamente.
  • El usuario puede hacer clic en el botón "Detener práctica" para detener la sesión de práctica.

Caracteristicas adicionales

  • El usuario puede escuchar una señal de tono audible única cuando se muestra una nueva palabra, se ingresa una palabra correctamente o se escribe una letra incorrecta en la palabra.
  • El usuario puede iniciar sesión en la aplicación
  • El usuario puede ver estadísticas de rendimiento acumulativo en todas sus sesiones de práctica.

Enlaces y recursos útiles

  • keydown
  • setInterval

Proyectos de ejemplo

Twiddler Typing Tutor

7. ASCENSOR

Nivel: 3 - Avanzado

Es difícil pensar en un mundo sin ascensores. Especialmente si tiene que subir y bajar 20 tramos de escaleras cada día. Pero, si lo piensa, los ascensores fueron una de las implementaciones originales de eventos y controladores de eventos mucho antes de que las aplicaciones web aparecieran.

El objetivo de la aplicación Elevator es simular el funcionamiento de un ascensor y, lo que es más importante, cómo manejar los eventos generados cuando los ocupantes de los edificios lo usan. Esta aplicación simula a los ocupantes que piden un elevador desde cualquier piso y presionan los botones dentro del elevador para indicar el piso que desean visitar.

Restricciones

  • Debe implementar un único controlador de eventos para los botones arriba y abajo en cada piso. Por ejemplo, si hay 4 pisos, se debe implementar un único controlador de eventos en lugar de 8 (dos botones por piso).
  • Del mismo modo, se debe implementar un único controlador de eventos para todos los botones del panel de control en el elevador en lugar de un controlador de eventos único para cada botón.

Historias del usuario

  • El usuario puede ver un diagrama de sección transversal de un edificio con cuatro pisos, un pozo de ascensor, el elevador y un botón arriba en el primer piso, botones arriba y abajo en el segundo y tercer piso, y un botón abajo en el cuarto piso.
  • El usuario puede ver el panel de control del elevador con un botón para cada uno de los pisos al costado del diagrama.
  • El usuario puede hacer clic en el botón arriba y abajo en cualquier piso para llamar al elevador.
  • El usuario puede esperar que al hacer clic en los botones arriba y abajo en cualquier piso para solicitar el elevador se ponga en cola y se les dé servicio en la secuencia en la que se hizo clic.
  • El usuario puede ver el elevador moverse hacia arriba y hacia abajo del pozo hasta el piso al que fue llamado.
  • El usuario puede hacer clic en el panel de control del elevador para seleccionar el piso al que debe viajar.
  • El usuario puede esperar que el elevador se detenga por 5 segundos esperando que se haga clic en un botón del piso en el panel de control. Si no se hace clic en un botón del piso dentro de ese tiempo, el elevador procesará la próxima solicitud de llamada.
  • El usuario puede esperar que el elevador regrese al primer piso cuando no haya solicitudes para procesar.

Caracteristicas adicionales

  • El usuario puede ver una notificación de advertencia si el número de solicitudes de elevador excede el número máximo permitido. Este límite se deja al desarrollador.
  • El usuario puede escuchar un sonido cuando el elevador llega al piso.
  • El usuario puede ver a un ocupante llegar aleatoriamente a un piso para indicar cuándo debe hacer clic en el botón de llamada hacia arriba o hacia abajo del elevador en ese piso.
  • El usuario puede especificar el intervalo de tiempo entre los nuevos ocupantes que llegan para llamar a un ascensor.

Enlaces y recursos útiles

Primero en entrar, primero en salir (Wikipedia)

Proyectos de ejemplo

8. APLICACIÓN DE SIMULADOR DE COMIDA RÁPIDA

Nivel: 3 - Avanzado

La aplicación Fast Food simula el funcionamiento de un restaurante sencillo para llevar y está diseñada para ayudar al desarrollador a poner en práctica su conocimiento de Promesas y principios de diseño SÓLIDO.

Esta aplicación simula a los clientes de un restaurante para llevar haciendo pedidos y esperando que estén preparados y entregados en un mostrador de recogida. Después de realizar el pedido, el cliente espera el pedido que se anunciará antes de recogerlo y proceder al comedor.

Las historias de usuarios que componen esta aplicación se centran en cuatro roles distintos:

  • Usuario: el usuario final que usa la aplicación
  • Cliente: el cliente simulado
  • Order Taker: el Order Taker simulado
  • Cook: el Cook simulado
  • Servidor: el servidor simulado

Esta aplicación tiene bastantes historias de usuario. Sin embargo, no se sienta abrumado. Tómese el tiempo para esbozar no solo la interfaz de usuario, sino también cómo los diferentes actores (roles) interactúan y construyen la aplicación de manera incremental siguiendo los principios ágiles.

Restricciones

  • Los tickets de pedido se pueden representar como dos tipos diferentes de Promesas: uno el Servidor espera mientras el Cocinero prepara el pedido y otro el Cliente espera mientras está en la línea de servicio.
  • Use el equivalente nativo de JS Promises en el idioma que elija desarrollar. Los desarrolladores de JS deben usar Promesas nativas y no async / esperar.
  • Crea esta aplicación usando las características del idioma nativo. NO puede usar un paquete de simulación o biblioteca.
  • Los nuevos clientes llegan a la línea de pedido en un intervalo de tiempo fijo. En otras palabras, los nuevos clientes llegan a un ritmo constante.
  • Los tickets de pedido también se cumplen en un intervalo de tiempo fijo. Se completan a un ritmo constante.

Historias del usuario

Operación de aplicación

  • El usuario puede ver un área de entrada que permite la entrada del intervalo de tiempo para la llegada del cliente y un intervalo de tiempo para el cumplimiento de un ticket de pedido por parte del cocinero.
  • El usuario puede ver un mensaje de advertencia personalizado si se ingresa incorrectamente el intervalo de llegada del cliente o el intervalo de cumplimiento del pedido.
  • El usuario puede iniciar la simulación haciendo clic en el botón Iniciar.
  • El usuario puede ver un área de línea de pedido que contiene un cuadro de texto que muestra el número de clientes que esperan para realizar pedidos.
  • El usuario puede ver un área de pedido que contiene cuadros de texto que muestran el número de pedido que se está tomando actualmente.
  • El usuario puede ver un área de cocina que contiene un cuadro de texto que muestra el número de orden que se está preparando y un cuadro de texto que enumera las órdenes de espera en secuencia, junto con un recuento de la cantidad de órdenes de espera.
  • El usuario puede ver un área de Recogida que contiene un cuadro de texto que muestra el número de pedido que está actualmente disponible para que el Cliente lo recoja y un cuadro de texto que muestra el número de Clientes que esperan en la línea de servicio.
  • El usuario puede detener la simulación en cualquier momento haciendo clic en el botón Detener.

Caracteristicas adicionales

  • El usuario puede especificar cuánto tiempo le toma a un tomador de pedidos crear un ticket de pedido.
  • El usuario puede especificar cuánto tiempo le lleva al servidor entregar un pedido al cliente.
  • El usuario puede especificar la cantidad total de tiempo que la simulación se ejecutará una vez que se haga clic en el botón Inicio.
  • El usuario puede ver una vista animada de Clientes y pedidos a medida que avanzan por el flujo de trabajo.

Enlaces y recursos útiles

  • Fast Food Simulator - Flujo de trabajo lógico
  • Manifiesto ágil y 12 principios del software ágil
  • Principios SÓLIDOS que todo desarrollador debe saber
  • Usando promesas
  • Promesa

9. SHELL GAME

Nivel: 3 - Avanzado

Un juego de Shell es un juego de apuestas clásico que se remonta a la antigua Grecia. Jugarlo requiere tres proyectiles, un guisante, destreza manual por parte del operador y habilidades de observación por parte del jugador. También es un juego de estafa clásico, ya que es fácil para el operador estafar al jugador. Gracias a Dios, esta última no es nuestra intención con esta aplicación.

Este juego de Shell está destinado a proporcionar una interfaz gráfica para el juego de shell clásico y proporcionar al jugador un juego honesto para jugar. Nuestro juego dibuja tres conchas en el lienzo junto con el guisante, mueve el guisante debajo de una, de las conchas y baraja las conchas durante un intervalo de tiempo específico. Luego, el usuario debe hacer clic en el caparazón donde cree que está oculto el guisante. El usuario puede continuar adivinando hasta que se localice el guisante.

Historias del usuario

  • El usuario puede ver el lienzo con tres conchas y el guisante.
  • El usuario puede hacer clic en el caparazón debajo del cual se debe ocultar el guisante.
  • El usuario puede ver el guisante moverse debajo del caparazón en el que se ha hecho clic.
  • El usuario puede hacer clic en el botón "Mezclar" para iniciar una mezcla animada de los proyectiles durante 5 segundos.
  • El usuario puede hacer clic en el caparazón donde cree que el guisante está oculto cuando se detiene la animación.
  • El usuario puede ver que la cáscara en la que se hizo clic se eleva para revelar si el guisante está oculto debajo.
  • El usuario puede continuar haciendo clic en los depósitos hasta que se encuentre el guisante.
  • El usuario puede ver un mensaje de felicitación cuando se encuentra el guisante
  • El usuario puede comenzar un nuevo juego haciendo clic en un caparazón debajo del cual se debe ocultar el guisante (paso # 2 arriba). Los pasos anteriores se repiten.

Caracteristicas adicionales

  • El usuario puede ver un panel de puntuación que contiene la cantidad de victorias y la cantidad de juegos jugados.
  • El usuario puede ver que el número de juegos jugados aumenta cuando el guisante está oculto debajo de un caparazón
  • El usuario puede ver el número de victorias incrementado cuando se encuentra el guisante en la primera aproximación.
  • El usuario puede ver la cáscara que oculta el guisante para animar (color, tamaño u otro efecto) cuando se hace clic (una suposición correcta).

Enlaces y recursos útiles

  • Juego de conchas (Wikipedia)
  • Animación Javascript HTML DOM
  • Biblioteca de animación p5js

Proyectos de ejemplo

Conclusión

No olvide consultar el artículo anterior y el repositorio si desea encontrar más ideas de aplicaciones / proyectos.

Además, si la información de este artículo y del repositorio le fue útil de alguna manera, asegúrese de darle una estrella ; De esta manera, otros pueden encontrarlo y beneficiarse también. ¡Gracias!

¿Tiene alguna sugerencia sobre cómo podríamos mejorar este proyecto en general? ¡Haznos saber! ¡Nos encantaría escuchar tus comentarios!

¡Le invitamos a contribuir con sus propias ideas! Podemos hacer de este repositorio el recurso de referencia cuando se trata de ideas de aplicaciones.

Originalmente publicado en www.florin-pop.com.