15 ideas de aplicaciones para desarrollar y mejorar sus habilidades de codificación

Todos sabemos que puede ser difícil a veces para encontrar nuevas ideas de aplicación que se podía construir con el fin de mejorar o aprender un nuevo lenguaje de programación o framework.,;

ideal para ser utilizado como ejemplos en tutoriales (artículos o videos)📃;

Fácil de completar y también fácilmente extensible con nuevas características;;

y además de eso, cada idea de aplicación tiene:

1. Un objetivo claro y descriptivo;
2. Una lista de historias de usuario que deben implementarse;
3. Una lista de características adicionales que son>
4. todos los recursos y enlaces para ayudarte a encontrar lo que necesitas para completar el proyecto

dividimos estas ideas de aplicaciones en tres niveles basados en el conocimiento y la experiencia necesarios para completarlas., Los niveles son: principiante, intermedio y avanzado.

en este artículo, encontrarás 5 ideas de cada nivel.

intente publicar sus componentes reutilizables, de cualquier aplicación a Bit.dev, un concentrador de componentes en la nube. Puede documentarlos y agregar ejemplos en cada página de componentes — en el sitio de Bit); luego, úselos en futuras aplicaciones o simplemente compártalos con su equipo.

Nivel: 1-Principiante

todos tenemos eventos importantes que esperamos en la vida, cumpleaños, aniversarios y días festivos, por nombrar algunos. ¿No sería bueno tener una aplicación que cuenta los meses, días, horas, minutos y segundos de un evento? Temporizador de Cuenta regresiva es solo esa aplicación!

el objetivo del temporizador de Cuenta regresiva es proporcionar una visualización en continuo decremento de los meses, días, horas, minutos y segundos de he a un evento ingresado por el usuario.,

restricciones

• Utilice solo funciones de lenguaje incorporadas para sus cálculos en lugar de depender de una biblioteca o paquete como MomentJS. Esto supone, por supuesto, que el idioma de su elección tiene funciones de manipulación de fecha y hora adecuadas incorporadas.
• no puede utilizar ningún generador de código, como la Cuenta Regresiva para el sitio. Usted debe desarrollar su propia implementación original.

historias de usuario

• El usuario puede ver un cuadro de entrada de evento que contiene un campo de nombre de Evento, un campo de fecha, una hora opcional y un botón ‘Inicio’.,
• El usuario puede definir el evento introduciendo su nombre, la fecha en la que está programado que tenga lugar y una hora opcional del evento. Si se omite la hora, se supone que es a medianoche en la fecha del evento en la zona horaria local.
• El usuario puede ver un mensaje de advertencia si el nombre del evento está en blanco.
• El usuario puede ver un mensaje de advertencia si la fecha u hora del evento se ha introducido incorrectamente.
• El usuario puede ver un mensaje de advertencia si el tiempo hasta que se ingresen los datos del evento y el tiempo que se ha ingresado desbordaría la precisión del temporizador de Cuenta regresiva.,
• El usuario puede hacer clic en el botón’ Inicio ‘ para ver el inicio del temporizador de Cuenta atrás mostrando los días, horas, minutos y segundos hasta que el evento tenga lugar.
• El usuario puede ver los elementos en el temporizador de Cuenta regresiva decrement automáticamente. Por ejemplo, cuando el conteo de segundos restante alcanza 0, el conteo de minutos restante disminuirá en 1 y los segundos comenzarán a contar desde 59. Esta progresión debe tener lugar desde segundos hasta la posición de días restantes en la pantalla de Cuenta atrás.,

funciones de bonificación

• El usuario puede guardar el evento para que persista en las sesiones
• El usuario puede ver una alerta cuando se alcanza el evento
• El usuario puede especificar más de un evento.
• El usuario puede ver un temporizador de Cuenta atrás para cada evento que se ha definido.,

enlaces útiles y recursos

• Las imágenes de temporizadores de Cuenta regresiva analógicos basados en tubos se pueden encontrar aquí
• clearInterval MDN
• setInterval MDN
• Date MDN

proyectos de ejemplo

temporizador de Cuenta regresiva Creado con React

simple clock/countdown timer

flipimage

Tier: 1-Beginner

Es importante que los desarrolladores web comprendan los conceptos básicos de la manipulación de imágenes, ya que las aplicaciones web ricas dependen de las imágenes para agregar valor a la interfaz de usuario y la experiencia de 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 2×2. Usando un conjunto de flechas Arriba, Abajo, Izquierda y derecha adyacentes a cada una de las imágenes, el usuario puede voltearlas vertical u horizontalmente.

solo debes usar HTML, CSS y Javascript nativos para implementar esta aplicación. No se permiten paquetes ni bibliotecas de imágenes.,o la imagen

características 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 nueva URL de las imágenes

li>

Crear un css flipping animatin

proyectos de ejemplo

efectos de imagen por BENNETTFEELY

aplicación de notas

nivel: 1-Principiante

¡cree y almacene sus notas para fines posteriores!,

historias de 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, las notas se almacenarán y cuando el Usuario regrese, se recuperarán los datos

características 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 que creó la nota

enlaces y recursos útiles

• localStorage
• Markdown Guide
• Markdown parser

proyectos de ejemplo

notas Markdown construidas con Angular on Codepen

notas Markdown construidas con React

notas de Markdown construidas con angular 7 y bootstrap 4

recipe

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 pueden codificarse como un archivo JSON. Después de implementar la versión inicial de esta aplicación, puede ampliar esto para mantener las recetas en un archivo o base de datos.,

historias de usuario

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

características de bonificación

• El usuario puede ver una foto que muestra cómo se ve el artículo después de que se ha 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». Cualquier API de recetas de código abierto se puede utilizar como fuente para las recetas (consulte el 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 encontró ninguna receta coincidente.
• El usuario puede hacer clic en un botón «Guardar» en las tarjetas de recetas ubicadas a través de la API para guardar una copia en este archivo de recetas de aplicaciones o base de datos.,

enlaces y recursos útiles

• usando Fetch
• Axios
• La API de MealDB

proyectos de ejemplo

Recipe Box — un proyecto de campamento de código gratuito (FCC)

React Recipe Box

Quiz App

Tier: 1-Principiante

práctica y prueba su conocimiento al responder 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 User)

historias de usuario

• El usuario puede iniciar el cuestionario pulsando un button
• El usuario puede ver una pregunta con 4 posibles respuestas
• Después de seleccionar una respuesta, mostrar la siguiente pregunta al usuario., Haga esto hasta que el cuestionario haya terminado
• al final, el usuario puede ver las siguientes estadísticas
• tiempo que tardó en terminar el cuestionario
• cuántas respuestas correctas obtuvo
• Un mensaje que muestra si passed o failed el cuestionario

/h2>

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

enlaces y recursos útiles

• Open Trivia Database

proyectos de ejemplo

Quiz App construido con React (espere a que se cargue como está alojado en Heroku)

Quiz app interface

Book Finder App

Tier: 2-Intermedio

crear una aplicación que los usuarios pueden buscar libros introduciendo una consulta (título, autor, etc.). Muestra los libros resultantes en una lista en la página con todos los datos correspondientes.,

historias de usuario

• El usuario puede introducir una consulta de búsqueda en un campo input

El usuario puede enviar la consulta.,ppearing en la página

características de bonificación

• Para cada elemento de la lista agregue un enlace que enviará al usuario a un sitio externo que tenga más información sobre el libro
• implementar un diseño Responsive
• agregar animaciones de carga

enlaces y recursos útiles

puede utilizar la API de Google Books

proyectos de ejemplo

Finder

card-memory-game

Tier: 2-Intermediate

Card Memory es un juego en el que tienes que hacer clic en una tarjeta para ver qué imagen está debajo de ella y tratar de encontrar la imagen coincidente debajo de las otras tarjetas.,

historias de usuario

• El usuario puede ver una cuadrícula con N X N tarjetas (n es un entero). Todas las cartas están boca abajo inicialmente (hidden state)
• El usuario puede hacer clic en un botón para iniciar el juego. Cuando se hace clic en este botón, se iniciará un temporizador
• El usuario puede hacer clic en cualquier tarjeta para revelar la imagen que está debajo de ella (cámbiela a visible state)., El usuario hace clic en la 2ª tarjeta:
  • si hay una coincidencia, las 2 tarjetas serán eliminadas del juego (ya sea ocultarlas/eliminarlas o dejarlas en el estado visible)
  • Si no hay una coincidencia, las 2 tarjetas volverán a su estado original (hidden state)
  • Cuando se han encontrado todos los partidos, 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

  bonus features

  • Use puede elegir entre múltiples niveles de dificultad (Fácil, Medio, Difícil)., El aumento de 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 (número de veces que ganó / perdió, mejor tiempo para cada nivel)

  enlaces útiles y recursos

  • Wikipedia

  proyectos de ejemplo

  juego de memoria Flip — card

  juego de memoria

  aplicación de dibujo

  Nivel: 2-intermedio

  crear ilustraciones digitales en un lienzo en la web para compartir en línea y también exportar como imágenes. ,v>, , 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 utilizando p5js

proyectos de ejemplo

Aplicación de Dibujo De Florin Pop

Aplicación de dibujo de t0mm4rx

tienda en línea simple

nivel: 2-intermedio

el objetivo de la tienda en línea simple es brindar a sus usuarios la capacidad de seleccionar un producto para comprar, ver la información de compra, agregarlo a un carrito de compras en línea y, finalmente, comprar los productos en el carrito de compras.,

Constraints

• comenzando, puede implementar su inventario de productos como una matriz de objetos JavaScript si está desarrollando en JavaScript. Para otros idiomas no dude en elegir la solución en memoria de su elección.

historias de usuario

• El usuario puede hacer clic en el botón «Ver productos» en la página de destino para mostrar la página de productos.
• El usuario puede ver una tarjeta en la página de productos para cada producto que muestra la miniatura del producto, El nombre, el precio, Una breve descripción y un botón «Seleccionar».,
• El usuario puede ver una página de detalles del producto que se muestra cuando se hace clic en el botón «Seleccionar» que muestra la misma información de la tarjeta del producto, pero también un id de producto único, una descripción larga, el botón «Agregar al carrito» y el botón «Ver más productos».
• El usuario puede ver un mensaje de confirmación cuando el producto se agrega al carrito de compras.
• El usuario puede hacer clic en la página’ Ver más productos ‘ para volver a la página de productos.
• El usuario puede ver un botón de «carrito de compras» tanto en la página de destino como en la página de productos. Sugerencia: una barra superior podría ser una buena ubicación común para este botón.,
• El usuario puede hacer clic en el botón «carrito de compras» para mostrar la página del carrito de compras que contiene la identificación del producto, El nombre, el precio y la cantidad solicitada.
• El usuario puede ver un importe total de compra en la tarjeta de compra que se calcula como la suma de las cantidades multiplicadas por el precio unitario de cada producto pedido.
• El usuario puede ajustar la cantidad pedida para cualquier producto para ajustar el importe total de la compra.
• El usuario puede hacer clic en el botón «Realizar pedido» en la página del carrito de compras para completar el pedido., El usuario verá un número de confirmación cuando se haya realizado el pedido.
• [) El usuario puede hacer clic en el botón «Cancelar pedido» en la página del carrito de compras para cancelar el pedido. El usuario verá las cantidades del producto y el monto total de la compra restablecido a cero.
• El usuario puede hacer clic en el botón «Ver más productos» en la página del carrito de compras para volver a la página de productos. Si el pedido aún no se ha realizado, esto no borrará los productos que ya se han agregado a la página de productos.,

Bonus features

• El usuario puede ver un mensaje de error si la cantidad pedida excede la cantidad «disponible» del producto.
• El usuario puede especificar una factura y enviar a la dirección cuando se realiza el pedido desde la página del carrito de compras
• El usuario puede ver los gastos de envío agregados al monto total de la compra
• El usuario puede ver los impuestos sobre las ventas agregados al monto total de la compra
• El desarrollador implementará el inventario del producto en un archivo externo o una base de datos.

enlaces y recursos útiles

hay muchas páginas de sitios de comercio electrónico por ahí., Puedes usar Dribbble y Behance para inspirarte.

proyectos de ejemplo

animaciones de comercio electrónico

aplicación de tareas pendientes

Nivel: 2-Intermedio

la aplicación clásica de tareas pendientes donde un usuario puede anotar todas las cosas que desea lograr.,i>el usuario puede ver una lista con todas las tareas completadas

El usuario puede ver una lista con todas las tareas activas

El usuario puede ver la fecha en que creó la tarea

al cerrar la ventana del navegador, las tareas pendientes se almacenarán y cuando el Usuario regrese, se recuperarán los datos

enlaces y recursos útiles

• localStorage

proyectos de ejemplo

aplicación todo construida con react

lista de tareas en CodePen

contador de calorías

Nivel: 3-avanzado

para mantenerse saludable se requiere una combinación de equilibrio mental, ejercicio y Nutrición., El objetivo de la aplicación Calorie Counter es ayudar al usuario a abordar las necesidades nutricionales contando las calorías de varios alimentos.

esta aplicación proporciona el número de calorías basado en el resultado de una búsqueda de usuario para un tipo de alimento. El Departamento de Agricultura de los Estados Unidos buscará los datos crudos de alimentos con MyPyramid para determinar los valores calóricos.

Calorie Counter también le proporciona a usted, el desarrollador, experiencia en la transformación de datos sin procesar en un formato que facilitará la búsqueda., En este caso, el archivo de datos Raw de MyPyramid Food, que es una hoja de cálculo de MS Excel, debe descargarse y transformarse en un archivo JSON que será más fácil de cargar y buscar en tiempo de ejecución (sugerencia: eche un vistazo al formato de archivo CSV).

historias de usuario

• El desarrollador creará un archivo JSON que contiene los alimentos que se buscarán. Esto se cargará cuando se inicie la aplicación.
• El usuario puede ver un panel que contiene un cuadro de texto de entrada de descripción de alimentos, un botón ‘Buscar’ y un botón ‘Borrar’.
• El usuario puede introducir términos de búsqueda en el cuadro de texto de entrada de descripción de alimentos.,
• El usuario puede hacer clic en el botón’ Buscar ‘ para buscar el alimento que coincida.
• El usuario puede ver un mensaje de advertencia si no se ingresaron Términos de búsqueda.
• El usuario puede ver un mensaje de advertencia si no se encontraron coincidencias.
• El usuario puede ver una lista de los alimentos, tamaños de porción y calorías coincidentes en un panel de resultados desplazable que está limitado a 25 entradas.
• El usuario puede hacer clic en el botón’ Borrar ‘ para borrar los Términos de búsqueda y la lista de resultados.

Bonus

• el Usuario puede ver el recuento del número de coincidencia de alimentos adyacente a la lista de resultados.,
• El usuario puede usar un carácter comodín en términos de búsqueda.
• El usuario puede ver más de 25 entradas de una búsqueda haciendo clic en un botón de icono hacia abajo para agregar más alimentos coincidentes a la lista de resultados de búsqueda.
• El desarrollador implementará cargar los datos de MyPyramid en una base de datos o una estructura de datos que no sea una matriz para una búsqueda más rápida.,

enlaces y recursos útiles

MyPyramid Food Raw Data

proyectos de ejemplo

Calculadora de alimentos

aplicación de Chat

Nivel: 3-Avanzada

interfaz de chat en tiempo Real donde varios usuarios pueden interactuar entre sí mediante el envío de mensajes.

como MVP (producto mínimo Viable) puede centrarse en la construcción de la interfaz de Chat. La funcionalidad en tiempo Real se puede agregar más tarde (las características de bonificación).

historias de usuario

• Se le pide al usuario que introduzca un nombre de usuario cuando visite la aplicación de chat., El nombre de usuario será almacenada en la aplicación
• el Usuario puede ver un input field donde se puede escribir un nuevo mensaje
• presionando el enter tecla o haciendo clic en el send botón, el texto se mostrará en la etiqueta chat box junto a su nombre de usuario (por ejemplo,, John Doe: Hello World!)

Bonus features

• 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 channels en temas específicos

enlaces y recursos útiles

• Socket.,io
• Cómo construir un React.aplicación de chat js en 10 minutos-artículo
• Crea una aplicación de chat como Slack – tutorial de React / JavaScript-Youtube
• Socket.io aplicación de Chat usando Websockets-tutorial de Youtube

proyectos de ejemplo

Chatty2

GitHub Timeline

Tier: 3-Advanced

API y representación gráfica de la información son características distintivas de las aplicaciones web modernas. La línea de tiempo de GitHub combina los dos para crear un historial visual de una actividad de GitHub de usuarios.,

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 repositorio, 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 de usuario

• El usuario puede introducir 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 de repositorio de usuarios nombrados
• El usuario puede ver un mensaje de advertencia si el nombre de usuario de GitHub no es un nombre de usuario válido de GitHub.

características de bonificación

• El usuario puede ver un resumen del número de repositorios contabilizados por el año en que se crearon

enlaces y recursos útiles

GitHub ofrece dos API que puede usar para acceder a los datos de repositorios. También puede optar por usar un paquete NPM para acceder a la API de GitHub.,>

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

• GitHub REST API client for JavaScript
• GitHub GraphQL API client for browsers and Node

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

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

proyectos de ejemplo

línea de tiempo CSS

creación de una línea de tiempo vertical con css y un toque de JavaScript

baraja de cartas

Nivel: 3-avanzado

como desarrollador web, se le pedirá que cree aplicaciones innovadoras que resuelvan problemas del mundo real para personas reales., Pero algo que aprenderá rápidamente es que no importa cuántas características maravillosas empaquete en una aplicación, los usuarios no la usarán si no es eficiente. En otras palabras, hay un vínculo directo entre cómo funciona una aplicación y si los usuarios la perciben como utilizable.

el objetivo de la aplicación Baraja de cartas es encontrar la técnica más rápida para barajar una baraja de cartas que puedes usar en las aplicaciones de juegos que creas. Pero, lo que es más importante, le proporcionará experiencia en la medición y evaluación del rendimiento de las aplicaciones.,

Su tarea es implementar el algoritmo de evaluación de rendimiento, el generador de números pseudoaleatorios xorshift, así como el algoritmo WELL512a.c si decide intentar la función de bonificación.

historias de usuario

• El usuario puede ver un panel que contiene un cuadro de texto en el que el usuario puede ingresar el número de rondas, tres cuadros de texto de salida para contener la hora de inicio, la hora de finalización y el tiempo total de la prueba, y dos botones: ‘JS Random’, ‘Xorshift’.
• El usuario puede introducir un número del 1 al 10.000 para especificar el número de veces (o rondas) que se va a ejecutar el número aleatorio seleccionado.,
• El usuario puede hacer clic en uno de los tres botones para iniciar la evaluación del algoritmo de números aleatorios seleccionado. El algoritmo de números aleatorios se ejecutará para el número de rondas ingresadas por el usuario anterior.
• El usuario puede ver un mensaje de advertencia si no se ha ingresado el número de rondas, si no está dentro del rango de 1 a 10,000, o si no es un entero válido.
• El usuario puede ver un área de salida tabular donde se muestran los resultados de cada algoritmo: nombre del algoritmo, hora de inicio, hora de finalización y tiempo total.,
• El usuario puede ver un diálogo de advertencia con un botón’ Cancelar ‘y un botón’ Aceptar ‘ si el número de rondas se cambia antes de que se hayan ejecutado las tres pruebas.
• El usuario puede hacer clic en el botón’ Cancelar ‘ en el cuadro de diálogo de advertencia para descartar el cuadro de diálogo sin cambios.
• El usuario puede hacer clic en el botón’ OK ‘ en el cuadro de diálogo de advertencia para borrar el área de salida y cerrar el cuadro de diálogo de advertencia.

características de bonificación

• El usuario puede ver un tercer botón de algoritmo – ‘WELL512a. c’.
• El desarrollador debe revisar la salida y determinar por qué el algoritmo más rápido es más rápido que el algoritmo más lento.,

enlaces y recursos Útiles

• la Generación de números Aleatorios (Wikipedia)
• Matemáticas.aleatorio (MDN)
• Xorshift (Wikipedia)
• WELL512a.c
• consola.tiempo (MDN)
• Uso de la función de auditoría de Chrome DevTools para medir y optimizar el rendimiento (Parte 1)
• Uso de la función de auditoría de Chrome DevTools para medir y optimizar el rendimiento (Parte 2)

aplicación de encuestas

Nivel: 3-Las encuestas avanzadas

son una parte valiosa de cualquier caja de herramientas de desarrolladores., Son útiles para obtener comentarios de sus usuarios sobre una variedad de temas que incluyen la satisfacción de la aplicación, los requisitos, las próximas necesidades, los problemas, las prioridades y las agravaciones simples, por nombrar algunos.

La aplicación de encuesta te da la oportunidad de aprender desarrollando una aplicación con todas las funciones que puedes agregar a tu caja de herramientas. Proporciona la capacidad de definir una encuesta, permitir a los usuarios responder dentro de un plazo predefinido, y tabular y presentar los resultados.,

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

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

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

historias de 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.

definir 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 exclusivas para cada pregunta.
• El coordinador de la encuesta puede introducir 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» guardar una encuesta.,

realizar una encuesta

• El coordinador de la encuesta puede abrir una encuesta seleccionando una encuesta de una lista de encuestas previamente definidas
• Los coordinadores de la encuesta 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 respuestas a preguntas de la encuesta haciendo clic en una casilla de verificación
• desmarcarse 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 todas las preguntas han sido respondidas.,

visualización de los resultados de la encuesta

• Los coordinadores de la encuesta y los encuestados pueden seleccionar la encuesta a 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.,

características 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 la encuesta y los encuestados pueden ver representaciones gráficas de los resultados de la encuesta (por ejemplo, tarta, barra, columna, etc.)., gráficos)

enlaces y recursos útiles

bibliotecas para construir encuestas:

• SurveyJS

algunos servicios comerciales de encuestas incluyen:

• Survey Monkey
• Traversy
• Typeform

proyectos de ejemplo

cuestionario Javascript

conclusión

ahora tienes una base de 15 aplicaciones con las que puedes jugar. Creamos un repositorio de GitHub donde puedes encontrar aún más ideas si estás interesado y eres bienvenido a contribuir, compartir y darle una estrella!

¡feliz codificación! ^_^