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 con números enteros.
¡El estilo depende de ti, así que usa tu imaginación y sé creativo! También puede encontrar que valga la pena experimentar con la aplicación de la calculadora en su dispositivo móvil para comprender mejor la funcionalidad básica y los casos extremos.
Restricciones
- No puede usar la
eval()función 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 panel de entrada que contiene botones para los dígitos del 0 al 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 haciendo clic en los dígitos en el panel de entrada. Se ignorará la entrada de cualquier dígito superior a 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 dos últimos 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 configurar la pantalla en 0.
- El usuario puede ver 'ERR' en pantalla si alguna operación excede el máximo de 8 dígitos.
Caracteristicas adicionales
- El usuario puede hacer clic en un 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 teclado de entrada que permite introducir números de punto flotante de hasta 3 posiciones y realizar operaciones con el número máximo de posiciones decimales introducidas 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 imperativos que, si se siguen correctamente, dan como resultado un plato sabroso.
El objetivo de la aplicación Receta es ayudar al usuario a administrar 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 se pueden codificar 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. (incluyendo sus cantidades) y los pasos de preparación.
- El usuario hace clic en el título de una nueva 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 artículo después de haber sido 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 receta.
- El usuario puede ver un mensaje de advertencia si no se encontró una receta coincidente.
- El usuario puede hacer clic en el botón 'Guardar' en las tarjetas de recetas ubicadas a través de la API para guardar una copia en este archivo de recetas 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 exportar como imágenes.
Historias del usuario
- El usuario puede dibujar
canvascon 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
canvas
Caracteristicas adicionales
- El usuario puede guardar la ilustración como una imagen (
.png,.jpg, etc formato) - El usuario puede dibujar diferentes formas (
rectangle,circle,star, 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 DE 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 equivalente de emojis, traducida de una o más palabras en el texto original, y palabras para las que no hay un emoji correspondiente.
Historias del usuario
- El usuario puede ingresar una cadena de palabras, números y puntuación en un cuadro de texto
- El usuario puede hacer clic en el botón "Traducir" para traducir las palabras del texto introducido 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 los elementos de texto en el texto ingresado traducidos a sus emojis equivalentes en un cuadro de texto de salida. Los elementos de texto para los que no hay emoji se dejarán sin cambios.
- El usuario puede hacer clic en un botón 'Borrar' para borrar los cuadros de texto de entrada y salida.
Caracteristicas adicionales
- El desarrollador implementará una función de sinónimos 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 emojis v12.0
Proyectos de ejemplo
Traductor de Emoji
5. APLICACIÓN MEME GENERATOR
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 dibujo libre con el mouse)
Enlaces y recursos útiles
Trabajar con lienzo es muy fácil gracias a la biblioteca p5js.
Proyectos de ejemplo
Generador de memes por imgflip
6. PRÁCTICA DE ESCRITURA
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áctica de mecanografía junto con métricas que le permitan medir su progreso.
La práctica de mecanografía 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 le ayudará a mejorar tanto la velocidad como la precisión de escritura.
Historias del usuario
- El usuario puede ver el intervalo de tiempo que se deben escribir las palabras que se muestran en la ventana de la aplicación.
- El usuario puede ver el número de intentos exitosos y el número total de intentos en un cuadro de puntuación.
- 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 las letras que se han escrito parpadeando si se ingresa una letra incorrecta y se borrará el cuadro de entrada de texto.
- El usuario puede ver un mensaje junto al cuadro de entrada de texto que indica que debe intentarlo de nuevo si se introduce 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 del intervalo de tiempo se deben escribir disminuidas en una pequeña cantidad si la palabra está escrita correctamente.
- El usuario puede ver el número de intentos exitosos incrementados 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 un tono audible único que indica cuando se muestra una nueva palabra, se ingresa una palabra correctamente o se ingresa una letra incorrecta en la palabra.
- El usuario puede iniciar sesión en la aplicación
- El usuario puede ver estadísticas de rendimiento acumulativas en todas sus sesiones de práctica.
Enlaces y recursos útiles
- keydown
- setInterval
Proyectos de ejemplo
Tutor de mecanografía Twiddler
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 elevadores fueron una de las implementaciones originales de eventos y controladores de eventos mucho antes de que aparecieran las aplicaciones web.
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 del edificio lo utilizan. Esta aplicación simula a los ocupantes que piden un ascensor desde cualquier piso y presionan los botones dentro del ascensor para indicar el piso que desean visitar.
Restricciones
- Debe implementar un solo controlador de eventos para los botones arriba y abajo en cada piso. Por ejemplo, si hay 4 pisos, se debe implementar un solo controlador de eventos en lugar de 8 (dos botones por piso).
- De manera similar, se debe implementar un solo controlador de eventos para todos los botones en el 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 de cuatro pisos, un hueco de ascensor, el ascensor y un botón de subida en el primer piso, botones de subida y bajada en el segundo y tercer piso, y un botón de bajada en el cuarto piso.
- El usuario puede ver el panel de control del ascensor con un botón para cada uno de los pisos al lado del diagrama.
- El usuario puede hacer clic en el botón de subir y bajar en cualquier piso para llamar al ascensor.
- El usuario puede esperar que al hacer clic en los botones hacia arriba y hacia abajo en cualquier piso para solicitar el ascensor, se pondrá en cola y se atenderá en la secuencia en que se hizo clic.
- El usuario puede ver que el ascensor sube y baja por el hueco hasta el piso al que fue llamado.
- El usuario puede hacer clic en el panel de control del ascensor para seleccionar el piso al que debe viajar.
- El usuario puede esperar que el ascensor se detenga durante 5 segundos esperando que se haga clic en un botón de piso en el panel de control. Si no se hace clic en un botón de piso dentro de ese tiempo, el ascensor procesará la siguiente solicitud de llamada.
- El usuario puede esperar que el ascensor regrese al primer piso cuando no haya solicitudes que procesar.
Caracteristicas adicionales
- El usuario puede ver una notificación de advertencia si el número de solicitudes de ascensor supera el número máximo permitido. Este límite se deja al desarrollador.
- El usuario puede escuchar un sonido cuando el ascensor llega a un piso.
- El usuario puede ver que un ocupante llega aleatoriamente a un piso para indicar cuándo debe hacer clic en el botón de llamada hacia arriba o hacia abajo del ascensor en ese piso.
- El usuario puede especificar el intervalo de tiempo entre la llegada de nuevos ocupantes para llamar a un ascensor.
Enlaces y recursos útiles
Cola de 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 simple restaurante de comida para llevar y está diseñada para ayudar al desarrollador a poner en práctica sus conocimientos sobre Promesas y principios de diseño SÓLIDOS.
Esta aplicación simula a los clientes de un restaurante de comida 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 a que se anuncie el pedido antes de recogerlo y dirigirse al comedor.
Las historias de usuario que componen esta aplicación se centran en cuatro roles distintos:
- Usuario: el usuario final que usa la aplicación
- Cliente: el cliente simulado
- Tomador de pedidos: el tomador de pedidos simulado
- Cook - el cocinero simulado
- Servidor: el servidor simulado
Esta aplicación tiene bastantes historias de usuarios. Sin embargo, no se sienta abrumado. Tómese el tiempo para esbozar no solo la interfaz de usuario, sino cómo los diferentes actores (roles) interactúan y construyen gradualmente la aplicación siguiendo los principios Agile.
Restricciones
- Los tickets de pedido se pueden representar como dos tipos diferentes de Promesas: una en la que el servidor espera mientras el cocinero prepara el pedido y otra en la que el cliente espera mientras está en la línea de servicio.
- Use el equivalente nativo de JS Promises en el idioma que elija para desarrollar. Los desarrolladores de JS deben usar Promesas nativas y no
async/await. - Cree esta aplicación con las funciones del idioma nativo. NO puede utilizar un paquete de simulación o una biblioteca.
- Los nuevos clientes llegan a la línea de pedidos en un intervalo de tiempo fijo. En otras palabras, los nuevos clientes llegan a un ritmo constante.
- Los tickets de pedido también se procesan en un intervalo de tiempo fijo. Se completan a un ritmo constante.
Historias del usuario
Operación de la aplicación
- El usuario puede ver un área de entrada que permite ingresar el 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 el intervalo de llegada del cliente o el intervalo de cumplimiento del pedido se ingresa incorrectamente.
- El usuario puede iniciar la simulación haciendo clic en un botón Iniciar.
- El usuario puede ver un área de línea de pedido que contiene un cuadro de texto que muestra la cantidad de clientes que esperan 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 pedido que se está preparando y un cuadro de texto que enumera los pedidos en espera en secuencia, junto con un recuento del número de pedidos en espera.
- El usuario puede ver un área de Recolección que contiene un cuadro de texto que muestra el número de pedido que actualmente está 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 un 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 tarda el servidor en entregar un pedido al cliente.
- El usuario puede especificar la cantidad total de tiempo que se ejecutará la simulación una vez que se haya hecho clic en el botón Iniciar.
- El usuario puede ver una vista animada de los clientes y los pedidos a medida que avanzan por el flujo de trabajo.
Enlaces y recursos útiles
- Simulador de comida rápida: flujo de trabajo lógico
- Manifiesto ágil y 12 principios de software ágil
- Principios SÓLIDOS que todo desarrollador debe conocer
- Usar promesas
- Promesa
9. JUEGO DE CONCHAS
Nivel: 3 - Avanzado
Un juego de Shell es un juego de apuestas clásico que se remonta a la antigua Grecia. Jugarlo requiere tres conchas, un guisante, destreza manual por parte del operador y una gran habilidad 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, esto último no es nuestra intención con esta aplicación.
Este juego de Shell está destinado a proporcionar una interfaz gráfica al clásico juego de Shell 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. A continuación, el usuario debe hacer clic en el caparazón bajo el que cree que está escondido 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 la cáscara bajo la que se oculta el guisante.
- El usuario puede ver el guisante moverse debajo del caparazón en el que se hizo clic.
- El usuario puede hacer clic en el botón "Mezclar" para iniciar una mezcla animada de las conchas 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 ha hecho clic se eleva para revelar si el guisante está oculto debajo.
- El usuario puede continuar haciendo clic en las conchas hasta que se encuentre el guisante.
- El usuario puede ver un mensaje de felicitación cuando se encuentra el guisante
- El usuario puede iniciar un nuevo juego haciendo clic en un caparazón debajo del cual se ocultará el guisante (paso 2 arriba). A continuación, se repiten los pasos anteriores.
Caracteristicas adicionales
- El usuario puede ver un panel de puntuación que contiene el número de victorias y el número 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 el guisante se encuentra en la primera conjetura.
- El usuario puede ver la cáscara escondiendo el guisante para animar (color, tamaño o algún otro efecto) cuando se hace clic (una suposición correcta).
Enlaces y recursos útiles
- Juego de Shell (Wikipedia)
- Animación HTML DOM de JavaScript
- 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 fue útil para usted 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.
Publicado originalmente en www.florin-pop.com.