Aquí hay algunas ideas de aplicaciones que puede crear para mejorar sus habilidades de codificación

¿Alguna vez has querido construir algo pero no sabías qué hacer? Así como los autores a veces tienen un "bloqueo de escritor", también es cierto para los desarrolladores.

Junto con mi amigo Jim, creamos una colección de ideas de aplicaciones que están destinadas a resolver este problema de una vez por todas.

Estas aplicaciones son:

  • genial para mejorar tus habilidades de codificación
  • genial para experimentar con nuevas tecnologías
  • genial para ser agregado a su cartera para impresionar a su próximo empleador / cliente
  • genial para ser utilizado como ejemplo en tutoriales (artículos o videos)
  • fácil de completar y también fácilmente ampliable con nuevas funciones

Esta no es solo una simple lista de proyectos, sino una colección que describe cada proyecto con suficiente detalle para que pueda desarrollarlo desde cero.

Cada especificación de proyecto contiene lo siguiente:

  1. Un objetivo claro y descriptivo
  2. Una lista de historias de usuarios que deben implementarse (estas historias actúan más como una guía que como una lista forzada de tareas pendientes . No dude en agregar sus propias funciones si lo desea).
  3. Una lista de características adicionales que mejoran no solo el proyecto base sino también sus habilidades al mismo tiempo
  4. Todos los recursos y enlaces para ayudarte a encontrar lo que necesitas para completar el proyecto.

Proyectos

Todos los proyectos se dividen en tres niveles según el conocimiento y la experiencia necesarios para completarlos. Estos niveles son:

  1. Principiante : desarrolladores en las primeras etapas de su viaje de aprendizaje. Aquellos que normalmente se centran en crear aplicaciones orientadas al usuario.
  2. Intermedio : Desarrolladores en una etapa intermedia de aprendizaje y experiencia. Se sienten cómodos con UI / UX, usando herramientas de desarrollo y creando aplicaciones que usan servicios API.
  3. Avanzado : desarrolladores que tienen todo lo anterior y están aprendiendo técnicas más avanzadas, como implementar aplicaciones BackEnd y servicios de base de datos.

A continuación, encontrará 5 proyectos para cada uno de los niveles ( 15 en total ), pero hay más de 30 proyectos (en este momento) en este repositorio de GitHub. Asegúrese de revisarlo ya que estamos planeando agregar más proyectos en el futuro. ¡Eres bienvenido a ayudar! (¿Más sobre esto en la sección Contribuir a continuación?)

1. Aplicación de notas

Nivel: 1 - Principiante

Descripción : ¡Crea y almacena tus notas para un propósito posterior!

Historias del usuario

  • El usuario puede crear una nota
  • El usuario puede editar una nota
  • El usuario puede eliminar una nota
  • Al cerrar la ventana del navegador se almacenarán las notas y cuando el Usuario regrese, se recuperarán los datos

Caracteristicas adicionales

  • El usuario puede crear y editar una nota en formato Markdown. Al guardar, convertirá Markdown a HTML
  • El usuario puede ver la fecha en la que creó la nota

Enlaces y recursos útiles

  • almacenamiento local
  • Guía de rebajas
  • Marcado: un analizador de rebajas

Proyecto de ejemplo

2. Luces de Navidad

Nivel: 1 - Principiante

Descripción : La aplicación Christmas Lights se basa en sus talentos de desarrollo para crear una pantalla de luz fascinante. Tu tarea consiste en dibujar siete círculos de colores seguidos y en función de un temporizador cambiar la intensidad de cada círculo. Cuando se ilumina un círculo, su predecesor vuelve a su intensidad normal.

Esto simula el efecto de una cadena de luces onduladas, similares a las que se muestran durante las vacaciones de Navidad.

Historias del usuario

  • El usuario puede presionar un botón para iniciar y detener la pantalla
  • El usuario puede cambiar el intervalo de tiempo controlando el cambio de intensidad

Caracteristicas adicionales

  • El usuario puede seleccionar el color utilizado para llenar cada círculo
  • El usuario puede especificar el valor de intensidad
  • El usuario puede cambiar el tamaño de cualquier círculo en la fila
  • El usuario puede especificar el número de filas que se incluirán en la pantalla. Se pueden elegir de una a siete filas

Enlaces y recursos útiles

  • Imagen de muestra
  • Matriz LED Adafruit

Proyecto de ejemplo

3. FlipImage

Nivel: 1 - Principiante

Descripción : Es importante que los desarrolladores web comprendan los conceptos básicos de la manipulación de imágenes, ya que las aplicaciones web enriquecidas se basan en imágenes para agregar valor a la interfaz de usuario y la experiencia del usuario (UI / UX).

FlipImage explora un aspecto de la manipulación de imágenes: la rotación de imágenes. Esta aplicación muestra un panel cuadrado que contiene una sola imagen presentada en una matriz de 2x2. Usando un conjunto de flechas hacia arriba, abajo, izquierda y derecha adyacentes a cada una de las imágenes, el usuario puede voltearlas vertical u horizontalmente.

Solo debe utilizar HTML, CSS y Javascript nativos para implementar esta aplicación. No se permiten bibliotecas ni paquetes de imágenes.

Historias del usuario

  • El usuario puede ver un panel que contiene una sola imagen repetida en una matriz de 2x2
  • El usuario puede voltear cualquiera de las imágenes vertical u horizontalmente usando un conjunto de flechas hacia arriba, abajo, izquierda y derecha junto a la imagen

Caracteristicas adicionales

  • El usuario puede cambiar la imagen predeterminada ingresando la URL de una imagen diferente en un campo de entrada
  • El usuario puede mostrar la nueva imagen haciendo clic en el botón 'Mostrar' junto al campo de entrada
  • El usuario puede ver un mensaje de error si no se encuentra la URL de las nuevas imágenes

Enlaces y recursos útiles

  • Cómo voltear una imagen
  • Crear una animación de volteo CSS

Proyecto de ejemplo

4. Aplicación de prueba

Nivel: 1 - Principiante

Descripción : Practique y pruebe sus conocimientos respondiendo preguntas en una aplicación de prueba.

Como desarrollador, puede crear una aplicación de prueba para probar las habilidades de codificación de otros desarrolladores. (HTML, CSS, JavaScript, Python, PHP, etc…)

Historias del usuario

  • El usuario puede iniciar la prueba presionando un button
  • El usuario puede ver una pregunta con 4 posibles respuestas
  • Después de seleccionar una respuesta, muestre la siguiente pregunta al usuario. Haga esto hasta que termine la prueba
  • Al final, el Usuario puede ver las siguientes estadísticas:
  1. Tiempo que tomó terminar el cuestionario
  2. ¿Cuántas respuestas correctas obtuvo?
  3. Un mensaje que muestra si él passedo failedel cuestionario

Caracteristicas adicionales

  • El usuario puede compartir el resultado de un cuestionario en las redes sociales
  • Agregue múltiples cuestionarios a la aplicación. El usuario puede seleccionar cuál tomar
  • El usuario puede crear una cuenta y guardar todas las puntuaciones en su panel de control. El usuario puede completar una prueba varias veces

Enlaces y recursos útiles

  • Abrir base de datos de trivia

Proyectos de ejemplo

Aplicación de prueba creada con React (espere a que se cargue ya que está alojada en Heroku)

5. Convertidor de números romanos a decimales

Nivel: 1 - Principiante

Descripción : El sistema numérico representado por números romanos se originó en la antigua Roma y siguió siendo la forma habitual de escribir números en toda Europa hasta bien entrada la Edad Media. Los números romanos, como se usan hoy en día, emplean siete símbolos, cada uno con un valor entero fijo.

Consulte la siguiente tabla, los pares Símbolo - Valor :

  • Yo - 1
  • V - 5
  • X - 10
  • L - 50
  • C - 100
  • D - 500
  • M - 1000

Historias del usuario

  • El usuario debe poder ingresar un número romano en un campo de entrada
  • El usuario puede ver los resultados en un solo campo de salida que contiene el equivalente decimal (base 10) del número romano que se ingresó presionando un botón
  • Si se ingresa un símbolo incorrecto, el usuario debería ver un error

Caracteristicas adicionales

  • El usuario puede ver que la conversión se realiza automáticamente mientras escribo
  • El usuario debe poder convertir de decimal a romano (viceversa)

Enlaces y recursos útiles

  • Una explicación de los números romanos

Proyecto de ejemplo

Convertidor de números romanos

6. Aplicación Book Finder

Nivel: 2 - Intermedio

Descripción : Cree una aplicación que permitirá a los usuarios buscar libros ingresando una consulta (Título, Autor, etc.). Muestra los libros resultantes en una lista en la página con todos los datos correspondientes.

Historias del usuario

  • El usuario puede ingresar una consulta de búsqueda en un inputcampo
  • El usuario puede enviar la consulta. Esto llamará a una API que devolverá una matriz de libros con los datos correspondientes ( título , autor , fecha de publicación , imagen , etc.)
  • El usuario puede ver la lista de libros que aparecen en la página.

Caracteristicas adicionales

  • Para cada elemento de la lista, agregue un enlace que enviará al usuario a un sitio externo que tiene más información sobre el libro.
  • Implementar un diseño receptivo
  • Agregar animaciones de carga

Enlaces y recursos útiles

Puede utilizar la API de Google Books

Proyecto de ejemplo

LibroSearch-React

7. Juego de memoria de cartas

Nivel: 2 - Intermedio

Descripción : La memoria de tarjetas es un juego en el que tienes que hacer clic en una tarjeta para ver qué imagen hay debajo y tratar de encontrar la imagen correspondiente debajo de las otras tarjetas.

Historias del usuario

  • El usuario puede ver una cuadrícula con tarjetas nxn ( nes un número entero). Todas las cartas están boca abajo inicialmente ( hiddenestado)
  • El usuario puede hacer clic en un botón para iniciar el juego. Cuando se hace clic en este botón, se inicia un temporizador
  • El usuario puede hacer clic en cualquier tarjeta para revelar la imagen que se encuentra debajo (cambiarla a visibleestado). La imagen se mostrará hasta que el usuario haga clic en una segunda tarjeta

Cuando el usuario hace clic en la segunda tarjeta:

  • Si hay una coincidencia, las 2 cartas serán eliminadas del juego (ocúltelas / quítelas o déjelas en el visibleestado)
  • Si no hay una coincidencia, las 2 cartas volverán a su estado original ( hiddenestado)
  • Cuando se han encontrado todas las coincidencias, el usuario puede ver un cuadro de diálogo que muestra un mensaje de felicitaciones con un contador que muestra el tiempo que tardó en terminar el juego.

Caracteristicas adicionales

  • El uso puede elegir entre múltiples niveles de dificultad (Fácil, Medio, Difícil). Mayor dificultad significa: disminuir el tiempo disponible para completar y / o aumentar el número de cartas
  • El usuario puede ver las estadísticas del juego (nr. De veces que ganó / perdió, el mejor tiempo para cada nivel)

Enlaces y recursos útiles

  • Wikipedia

Proyectos de ejemplo

Flip - juego de memoria de cartas

Juego de tarjetas de memoria SMB3

8. Generador de tablas de rebajas

Nivel: 2 - Intermedio

Descripción : Cree una aplicación que convertirá una tabla regular con datos proporcionados por el usuario (opcionalmente) en una tabla con formato Markdown.

Historias del usuario

  • El usuario puede crear un HTML tablecon un número determinado de filas y columnas
  • El usuario puede insertar texto en cada celda del HTML table
  • El usuario puede generar un Markdown formatted tableque contendrá los datos delHTML table
  • El usuario puede obtener una vista previa del Markdown formatted table

Caracteristicas adicionales

  • El usuario puede copiar el Markdown formatted tableal portapapeles presionando un botón
  • El usuario puede insertar una nueva fila o columna en una ubicación específica
  • El usuario puede eliminar una fila o una columna por completo
  • El usuario puede alinear (a la izquierda , a la derecha o al centro ) una celda , una columna , una fila o toda la tabla

Enlaces y recursos útiles

  • Guía de rebajas
  • Marcado: un analizador de rebajas
  • Cómo copiar al portapapeles

Proyecto de ejemplo

Generador de tablas / tablas de rebajas

9. Arte de cuerdas

Nivel: 2 - Intermedio

Descripción : El propósito de String Art es proporcionar al desarrollador práctica para crear un gráfico animado simple, usar geometría en el algoritmo de animación y crear algo que sea visualmente agradable de ver.

String Art dibuja una única línea multicolor que se mueve suavemente hasta que un extremo toca un lado de la ventana circundante. En el punto, toca un efecto de "rebote" que se aplica para cambiar su dirección.

Se crea un efecto dominó al retener solo de 10 a 20 imágenes de la línea a medida que se mueve. Las imágenes más antiguas se desvanecen progresivamente hasta que desaparecen.

No se permiten bibliotecas de animación. Utilice solo HTML / CSS / JavaScript de Vanilla.

Historias del usuario

  • Comience dibujando una línea multicolor en una posición aleatoria dentro del límite de su ventana circundante
  • Cada 20 ms dibuje una nueva copia de la línea en una nueva posición basada en una trayectoria: la distancia incremental desde la línea anterior basada en los puntos finales
  • Cuando cualquiera de los extremos de la línea toca el límite de la ventana circundante, cambie su dirección y altere aleatoriamente su ángulo
  • Desvanece progresivamente la intensidad de las líneas antiguas de modo que solo las 10-20 líneas más recientes sean visibles para crear la sensación de movimiento o "ondulación"

Caracteristicas adicionales

  • El usuario puede especificar la longitud de la línea y su velocidad
  • El usuario puede especificar las múltiples líneas dentro de la ventana, todas moviéndose a lo largo de diferentes trayectorias y velocidades

Enlaces y recursos útiles

  • Uso de animaciones y transiciones de varios pasos
  • Conceptos básicos de animación

Proyecto de ejemplo

Este proyecto está muy cerca, pero tiene una pequeña ventana de cierre y es monocromático. Daniel Cortes

10. Aplicación de tareas pendientes

Nivel: 2 - Intermedio

Descripción : La clásica aplicación de tareas pendientes en la que un usuario puede escribir todas las cosas que quiere lograr.

Historias del usuario

  • El usuario puede ver un inputcampo donde puede escribir un elemento de tarea
  • Al presionar enter (o un botón), el usuario puede enviar la tarea pendiente y puede ver que se agrega a una lista de tareas pendientes
  • El usuario puede marcar una tarea pendiente como completed
  • El usuario puede eliminar una tarea pendiente presionando un botón (o en la tarea pendiente en sí)

Caracteristicas adicionales

  • El usuario puede editar una tarea
  • El usuario puede ver una lista con todas las tareas pendientes completadas
  • El usuario puede ver una lista con todas las tareas pendientes
  • El usuario puede ver la fecha en la que creó la tarea pendiente
  • Al cerrar la ventana del navegador, se almacenarán las tareas pendientes y cuando el Usuario regrese, se recuperarán los datos.

Enlaces y recursos útiles

  • almacenamiento local

Proyectos de ejemplo

Aplicación Todo construida con React

11. Motor de juego Battleship

Nivel: 3 - Avanzado

Descripción : Battleship Game Engine (BGE) implementa el clásico juego de mesa por turnos como un paquete que está separado de cualquier capa de presentación. Este es un tipo de patrón arquitectónico que es útil en muchas aplicaciones, ya que permite que cualquier número de aplicaciones utilice el mismo servicio.

El propio BGE se invoca a través de una serie de llamadas a funciones en lugar de a través de acciones del usuario final directamente acopladas. En este sentido, utilizar el BGE es similar a utilizar una API o una serie de rutas expuestas por un servidor web.

Este desafío requiere que desarrolle el BGE y una capa de presentación basada en texto muy delgada para pruebas que esté separada del motor en sí. Debido a esto, las Historias de usuario a continuación se dividen en dos conjuntos: uno para el BGE y otro para la capa de presentación basada en texto.

BGE es responsable de mantener el estado del juego.

Historias del usuario

BGE

  • La persona que llama puede invocar una startGame()función para comenzar un juego de 1 jugador. Esta función generará un tablero de juego de 8x8 que constará de 3 barcos con un ancho de un cuadrado y una longitud de:
  1. Destructor: 2 cuadrados
  2. Crucero: 3 cuadrados
  3. Acorazado: 4 cuadrados

startGame() colocará aleatoriamente estos barcos en el tablero en cualquier dirección y devolverá una matriz que representa la ubicación del barco.

  • La persona que llama puede invocar una shoot()función pasando las coordenadas de la fila y columna de destino de la celda de destino en el tablero de juego. shoot()devolverá indicadores que representan si el disparo resultó en un acierto o un error, el número de barcos que quedan (es decir, que aún no se han hundido), la matriz de ubicación del barco y la matriz de aciertos y errores actualizada.

Las celdas en la matriz de aciertos y errores contendrán un espacio si aún no han sido atacadas, Osi fueron atacadas pero ninguna parte de una nave estaba en esa ubicación, o Xsi la celda estaba ocupada por parte de una nave.

Capa de presentación basada en texto

  • El usuario puede ver la matriz de aciertos y errores mostrada como una representación de carácter bidimensional del tablero de juego devuelto por la startGame()función.
  • Se le puede pedir al usuario que ingrese las coordenadas de un cuadrado objetivo en el tablero de juego.
  • El usuario puede ver una pantalla de matriz de aciertos y errores actualizada después de realizar una toma.
  • El usuario puede ver un mensaje después de cada disparo que indica si el disparo resultó acertado o errado.
  • El usuario puede ver un mensaje de felicitación después del disparo que hunde el último barco restante.
  • Se le puede pedir al usuario que vuelva a jugar al final de cada juego. Negarse a jugar de nuevo detiene el juego.

Caracteristicas adicionales

BGE

  • La persona que llama puede especificar el número de filas y columnas en el tablero de juego como un parámetro de la startGame()función.
  • La persona que llama puede invocar una gameStats()función que devuelve un objeto Javascript que contiene métricas para el juego actual. Por ejemplo, el número de turnos jugados, el número actual de aciertos y errores, etc.
  • La persona startGame()que llama puede especificar la cantidad de jugadores (1 o 2) al llamar, lo que generará un tablero para cada jugador poblado aleatoriamente con barcos.

shoot()aceptará el número de jugador para el que se realiza el disparo junto con las coordenadas del disparo. Los datos que devuelve serán para ese jugador.

Capa de presentación basada en texto

  • El usuario puede ver las estadísticas actuales del juego en cualquier punto ingresando la frase statsen lugar de las coordenadas objetivo. (Tenga en cuenta que esto requiere la gameStats()función en el BGE)
  • El usuario puede especificar que se juegue un juego de dos jugadores, con cada jugador alternando turnos en la misma sesión de terminal (tenga en cuenta que esto requiere las funciones de bonificación correspondientes en el BGE)
  • El usuario puede ver el número de jugador en las indicaciones asociadas con las entradas en cada turno.
  • El usuario puede ver el tablero de ambos jugadores al final de cada turno.

Enlaces y recursos útiles

  • Juego de acorazado (Wikipedia)
  • Reglas del juego del acorazado (Hasbro)

Proyectos de ejemplo

Este video de YouTube muestra cómo se juega un juego de acorazado basado en texto.

El siguiente ejemplo se proporciona como demostración del juego Battleship si no le resulta familiar. Recuerde que debe implementar una capa de presentación basada en texto para realizar pruebas. Juego de acorazado de Chris Brody

12. Aplicación de chat

Nivel: 3 - Avanzado

Descripción : Interfaz de chat en tiempo real donde varios usuarios pueden interactuar entre sí enviando mensajes.

Como MVP (producto mínimo viable), puede centrarse en crear la interfaz de chat. La funcionalidad en tiempo real se puede agregar más tarde (las características adicionales).

Historias del usuario

  • Se le pide al usuario que ingrese un nombre de usuario cuando visita la aplicación de chat. El nombre de usuario se almacenará en la aplicación.
  • El usuario puede ver input fielddónde puede escribir un mensaje nuevo.
  • Al presionar la entertecla o al hacer clic en el sendbotón, el texto se mostrará chat boxjunto a su nombre de usuario (por ejemplo John Doe: Hello World!)

Caracteristicas adicionales

  • Los mensajes serán visibles para todos los usuarios que estén en la aplicación de chat (usando WebSockets)
  • Cuando un nuevo usuario se une al chat, se muestra un mensaje a todos los usuarios existentes.
  • Los mensajes se guardan en una base de datos
  • El usuario puede enviar imágenes, videos y enlaces que se mostrarán correctamente
  • El usuario puede seleccionar y enviar un emoji
  • Los usuarios pueden chatear en privado
  • Los usuarios pueden unirse channelsa temas específicos

Enlaces y recursos útiles

  • Socket.io
  • Cómo crear una aplicación de chat React.js en 10 minutos - artículo

Proyecto de ejemplo

Chatty2

13. Cronología de GitHub

Nivel: 3 - Avanzado

Descripción : las API y la representación gráfica de la información son características de las aplicaciones web modernas. GitHub Timeline combina los dos para crear un historial visual de la actividad de GitHub de un usuario.

El objetivo de la línea de tiempo de GitHub es aceptar un nombre de usuario de GitHub y producir una línea de tiempo que contenga cada repositorio y anotado con los nombres de los repositorios, la fecha en que se crearon y sus descripciones. El cronograma debe ser uno que pueda compartirse con un posible empleador. Debe ser fácil de leer y hacer un uso efectivo del color y la tipografía.

Solo se deben mostrar los repositorios públicos de GitHub.

Historias del usuario

  • El usuario puede ingresar un nombre de usuario de GitHub
  • El usuario puede hacer clic en un botón 'Generar' para crear y mostrar la línea de tiempo del repositorio del usuario nombrado
  • El usuario puede ver un mensaje de advertencia si el nombre de usuario de GitHub no es un nombre de usuario de GitHub válido.

Caracteristicas adicionales

  • El usuario puede ver un resumen de la cantidad de repositorios contabilizados por el año en que fueron creados

Enlaces y recursos útiles

GitHub ofrece dos API que puede usar para acceder a los datos del repositorio. También puede optar por utilizar un paquete NPM para acceder a la API de GitHub.

La documentación de la API de GitHub se puede encontrar en:

  • API REST de GitHub V3
  • GitHub GraphQL API V4

El código de muestra que muestra cómo usar las API de GitHub es:

Puede usar este comando CURL para ver el JSON devuelto por la API REST V3 para sus repositorios:

curl -u "user-id" //api.github.com/users/user-id/repos

Proyectos de ejemplo

14. Deletrear

Nivel: 3 - Avanzado

Descripción : Saber deletrear es una parte fundamental para dominar cualquier idioma. Si usted es un niño que aprende a deletrear o un individuo que aprende un nuevo idioma, poder practicar ayuda a solidificar sus habilidades lingüísticas.

La aplicación Spell-It ayuda a los usuarios a practicar su ortografía reproduciendo la grabación de audio de una palabra que el usuario debe escribir con el teclado de la computadora.

Historias del usuario

  • El usuario puede hacer clic en el botón 'Reproducir' para escuchar la palabra que se debe ingresar
  • El usuario puede ver las letras que se muestran en el cuadro de texto de entrada de palabras a medida que se introducen en el teclado
  • El usuario puede hacer clic en el botón 'Entrar' para enviar la palabra que se ha escrito en el cuadro de texto de entrada de palabras
  • El usuario puede ver un mensaje de confirmación cuando se escribe la palabra correcta
  • El usuario puede ver un mensaje solicitando que se vuelva a escribir la palabra cuando está mal escrita
  • El usuario puede ver un recuento de la cantidad de ortografía correcta, la cantidad total de palabras intentadas y un porcentaje de entradas exitosas.

Caracteristicas adicionales

  • El usuario puede escuchar un sonido de confirmación cuando la palabra está escrita correctamente
  • El usuario puede escuchar un sonido de advertencia cuando la palabra está mal escrita
  • El usuario puede hacer clic en el botón 'Sugerencia' para resaltar las letras incorrectas en el cuadro de texto de entrada de palabras
  • El usuario puede presionar la tecla 'Enter' en el teclado para enviar una palabra escrita o hacer clic en el botón 'Enter' en la ventana de la aplicación

Enlaces y recursos útiles

  • Texas Instruments habla y deletrea
  • API de audio web
  • Haz clic y habla

Proyectos de ejemplo

Asistente de Word para iOS

Speak N Spell en Google Play

15. Aplicación de encuestas

Nivel: 3 - Avanzado

Descripción : las encuestas son una parte valiosa de cualquier caja de herramientas para desarrolladores. Son útiles para obtener comentarios de sus usuarios sobre una variedad de temas, incluida la satisfacción de la aplicación, los requisitos, las necesidades futuras, los problemas, las prioridades y, simplemente, agravios, por nombrar algunos.

La aplicación Encuesta le brinda la oportunidad de aprender desarrollando una aplicación con todas las funciones que podrá agregar a su caja de herramientas. Brinda la capacidad de definir una encuesta, permitir a los usuarios responder dentro de un período de tiempo predefinido y tabular y presentar resultados.

Los usuarios de esta aplicación se dividen en dos roles distintos, cada uno con requisitos diferentes:

  • Los coordinadores de encuestas definen y realizan encuestas. Esta es una función administrativa que no está disponible para los usuarios normales.
  • Encuestados Completar encuestas y ver resultados. No tienen privilegios administrativos dentro de la aplicación.

Las herramientas de encuestas comerciales incluyen una funcionalidad de distribución que envía encuestas por correo electrónico masivo a los encuestados. Para simplificar, esta aplicación asume que se accederá a las encuestas abiertas para respuestas desde la página web de la aplicación.

Historias del usuario

General

  • Los coordinadores de encuestas y los encuestados pueden definir, realizar y ver encuestas y resultados de encuestas desde un sitio web común.
  • Los coordinadores de encuestas pueden iniciar sesión en la aplicación para acceder a funciones administrativas, como definir una encuesta.

Definición de una encuesta

  • El coordinador de encuestas puede definir una encuesta que contenga de 1 a 10 preguntas de opción múltiple.
  • El coordinador de encuestas puede definir de 1 a 5 selecciones mutuamente excluyentes para cada pregunta.
  • El coordinador de encuestas puede ingresar un título para la encuesta.
  • El coordinador de encuestas puede hacer clic en el botón "Cancelar" para volver a la página de inicio sin guardar la encuesta.
  • El coordinador de encuestas puede hacer clic en el botón "Guardar" para guardar una encuesta.

Realización de una encuesta

  • El Coordinador de encuestas puede abrir una encuesta seleccionando una encuesta de una lista de encuestas previamente definidas
  • Los coordinadores de encuestas pueden cerrar una encuesta seleccionándola de una lista de encuestas abiertas
  • El encuestado puede completar una encuesta seleccionándola de una lista de encuestas abiertas
  • El encuestado puede seleccionar las respuestas a las preguntas de la encuesta haciendo clic en una casilla de verificación
  • Los encuestados pueden ver que una respuesta seleccionada previamente se desmarcará automáticamente si se hace clic en una respuesta diferente.
  • Los encuestados pueden hacer clic en el botón "Cancelar" para volver a la página de inicio sin enviar la encuesta.
  • Los encuestados pueden hacer clic en el botón "Enviar" para enviar sus respuestas a la encuesta.
  • Los encuestados pueden ver un mensaje de error si se hace clic en "Enviar", pero no se han respondido todas las preguntas.

Ver los resultados de la encuesta

  • Los coordinadores de encuestas y los encuestados pueden seleccionar la encuesta para mostrar de una lista de encuestas cerradas
  • Los coordinadores de la encuesta y los encuestados pueden ver los resultados de la encuesta en formato tabular que muestra el número de respuestas para cada una de las posibles selecciones de las preguntas.

Caracteristicas adicionales

  • Los encuestados pueden crear una cuenta única en la aplicación
  • Los encuestados pueden iniciar sesión en la aplicación
  • Los encuestados no pueden completar la misma encuesta más de una vez
  • Los coordinadores de encuestas y los encuestados pueden ver representaciones gráficas de los resultados de la encuesta (por ejemplo, gráficos circulares, de barras, de columnas, etc.)

Enlaces y recursos útiles

Bibliotecas para construir encuestas: SurveyJS

Algunos servicios de encuestas comerciales incluyen: Survey Monkey y Typeform

Proyecto de ejemplo

Contribuyendo

¡Puedes contribuir al proyecto en el repositorio de GitHub! Cualquier contribución es muy apreciada.

Puedes contribuir de dos formas:

  1. crea un problema y cuéntanos tu idea. Asegúrese de utilizar la nueva etiqueta de idea en este caso;
  2. bifurque el proyecto y envíe un PR. Antes de hacer eso, asegúrese de leer y seguir la Guía de contribución (puede encontrarla en el repositorio);

Agrega tus propios ejemplos

También puede agregar sus propios ejemplos a los proyectos después de haberlos completado. ¡Te animo a que hagas esto, ya que les mostrará a otros las cosas maravillosas que has construido! ?

¡Difundir la palabra!

Si la información de este artículo y del repositorio te fue útil de alguna manera, asegúrate de darle una estrella, ¡de esta manera otros pueden encontrarla y beneficiarse también! ¡Juntos podemos crecer y mejorar nuestra comunidad!

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

Contribuyentes principales

Florin Pop : Twitter y sitio web.

Jim Medlock : Twitter y medio

¿Desafío de codificación semanal?

Como beneficio adicional, hay un Desafío de codificación semanal en el que puede aprender más practicando sus habilidades en proyectos del mundo real. ¡Lea la guía completa para descubrir cómo puede participar! ?

Publicado originalmente en www.florin-pop.com.