freeCodeCamp/guide/spanish/miscellaneous/learn-how-to-plan-your-future-project/index.md

title	localeTitle
Learn How to Plan Your Future Project	Aprenda cómo planificar su futuro proyecto

Una onza de preparación vale una libra de cura. Eso es cierto en medicina, y eso es definitivamente cierto en el desarrollo de software.

Aquí hay un flujo de trabajo estructurado de 10 pasos que lo guiará a través del proceso de planificación de la aplicación, con el objetivo de evitar que escriba muchos códigos innecesarios.

Juntos, planearemos una aplicación web de una sola página "para hacer" simple. También planearemos un backend API para una futura aplicación móvil.

1) Crea nuestro tablero Trello.

Trello es una forma divertida y gratuita de dividir su proceso de planificación y desarrollo en pequeñas tareas que se pueden rastrear.

Así es como se verá nuestro tablero de Trello . Prefiero dividir mis tareas en 3 columnas (dependiendo de la complejidad del proyecto):

• A hacer - lo que queda por hacer
• En progreso - tareas en las que la gente está trabajando actualmente
• Hecho - tareas que están hechas y listas para la prueba

2) Escribir historias de usuario

Aquí hay algunos ejemplos de historias de usuarios. Esto guiará cómo pensamos acerca de las características y funcionalidades de nuestra aplicación. Tenga en cuenta que todos siguen una estructura similar: como persona, puedo [hacer algo].

• Como usuario registrado, puedo ver la lista de mis tareas pendientes.
• Como usuario registrado, puedo agregar una nueva tarea pendiente.
• como usuario registrado, puedo eliminar una tarea pendiente (solo la de mis tareas pendientes, no la de otros usuarios).
• como usuario registrado, puedo completar una tarea pendiente (solo la de mis tareas pendientes, no la de otros usuarios).
• Como usuario anónimo, puedo registrarme para una nueva cuenta, recuperar mi contraseña o iniciar sesión en la aplicación con una cuenta existente.

3) Crea nuestro modelo de caso de uso.

Nuestro modelo de caso de uso nos ayudará a visualizar nuestras historias de usuario para que podamos entender mejor cómo implementarlas.

! [Diagrama de caso de usuario anónimo

4) Crea nuestro diagrama de actividades.

Nuestro diagrama de actividad mostrará las diferentes rutas que nuestros usuarios pueden tomar a través de nuestra aplicación.

Un usuario accede a nuestra aplicación de tareas pendientes.

• Si el usuario no ha iniciado sesión, verá nuestra página de inicio de sesión.

• Si ya tiene una cuenta, puede iniciar sesión.

• Si tiene una cuenta, pero olvidó su contraseña, puede recuperarla.

• Si ella no tiene una cuenta, puede crear una.

• Tanto "crear una cuenta" como "recuperar mi contraseña" requerirán la validación del correo electrónico. Un usuario puede iniciar sesión en nuestra aplicación solo después de que haya confirmado su dirección de correo electrónico.

• Si ha iniciado sesión, verá su lista de tareas pendientes (esto puede estar vacío si aún no ha agregado ninguna tarea pendiente).

• Un usuario registrado:

  • es capaz de ver su lista de tareas

  • es capaz de marcar una tarea de su lista como completada

  • es capaz de buscar dentro de su lista de tareas

  • es capaz de eliminar una tarea de su lista

  • puede cerrar la sesión.

• El usuario puede salir de la aplicación en cualquier momento.

5) Crea nuestras maquetas

Nuestras maquetas muestran cómo debería ser nuestra aplicación. Es mucho más rápido iterar en una maqueta que hacerlo en código de trabajo.

6) Elegir las tecnologías adecuadas para nuestro proyecto.

Debido a que esta es una aplicación de una sola página, confiaremos en gran medida, o en este caso exclusivamente, en JavaScript. Vamos a usar una de las pilas de JavaScript más populares: la pila MEAN. Una gran ventaja de la pila MEAN es que todos sus componentes son gratuitos y de código abierto. También hay toneladas de recursos disponibles para aprender la pila MEAN y para depurarla cuando inevitablemente encuentre errores.

Puede tener un entorno de desarrollo de pila MEAN en funcionamiento en la nube en menos de una hora, de forma gratuita.

Aquí están los componentes que usaremos:

1. MongoDB para nuestra base de datos
2. Node.js y Express.js para implementar nuestra API
3. AngularJS , junto con HTML y CSS (y Bootstrap) para nuestra aplicación del lado del cliente
4. Mongoose para conectar nuestra aplicación a MongoDB

7) Diseñar nuestro esquema de base de datos.

Vale la pena el esfuerzo de diseñar un esquema de base de datos, incluso para nuestra aplicación simple.

Tendremos dos colecciones: nuestra colección "Usuarios" alojará nuestros datos de usuario, y nuestra colección "Tareas pendientes" albergará nuestras tareas que deben realizarse. Un usuario puede tener cero, una o muchas tareas en su lista de tareas pendientes, por lo que tendremos una relación de uno a muchos (1: m) entre nuestras dos colecciones.

8) Definir nuestros casos de uso.

1. ¿Qué sucede con las tareas pendientes relacionadas con un usuario que elimina su cuenta? Cuando el usuario elimina su cuenta, las tareas pendientes relacionadas con ese usuario también deben eliminarse.
2. No se puede agregar ninguna tarea sin estar adjunto a un usuario confirmado.
3. Una tarea pendiente solo puede ser eliminada por su propietario.
4. Ningún usuario puede agregarse con un nombre de usuario o contraseña vacío.
5. No se puede agregar ninguna tarea con una tarea vacía.

Cosas a tener en cuenta:

1. Utilice el middleware Mongoose para eliminar documentos dependientes como las tareas pendientes cuando un usuario elimina su cuenta.
2. Utilice las reglas de validación de Mongoose en los modelos para evitar que los campos vacíos se agreguen a nuestra base de datos.

9) Diseñar y probar nuestra API.

Usé un producto gratuito llamado Apiary para documentar nuestra API .

Aquí está la sintaxis que utilicé para crear este BluePrint simple .

Te recomiendo crear una cuenta y comenzar a jugar con ella. Si vincula su cuenta de GitHub con Apiary, puede asegurarse de que su documentación siempre esté actualizada. También podrá probar sus datos visualmente sin la necesidad de llegar a los puntos finales de su API. Si prefiere probar su API desde la línea de comandos, aquí tiene un ejemplo de cómo hacer esto .

Más tarde, una vez que haya implementado su API con Node.js y Express.js, solo tendrá que establecer su URL en Apiary. Entonces puedes comenzar a probar tus llamadas. Nuestra URL de host actual ( http://fcctodoapp.apiblueprint.org/ ) será reemplazada por la URL de su API.

10) ¡Comience a escribir el código!

Esta es la parte divertida, y ocupará la mayor parte del tiempo de su proyecto. Si necesita ayuda con esto, únase a nosotros y aprenda a codificar.