Bienvenidos a “Entorno, Repositorio, y más”
S01 - E03
De a poquito le vamos dando forma a nuestro proyecto. Hoy nos toca preparar todo para ponernos a codear. Te vamos a dar un recorrido de todas las herramientas que necesitamos instalar para que Coder-Box, o cualquier proyectos que estés creando, sea realidad.
Sin mayor preámbulo, les dejo el resumen de nuestra tercera entrega.
A darle átomos.
Entorno
En este capítulo vamos a dar nuestros primeros pasos en el proyecto. Crearemos el repositorio con el cual el equipo va a trabajar día a día. Luego instalaremos todas las dependencias principales y las librerías necesarias en este momento. También vamos a configurar el ambiente en Vercel, que es la plataforma en la que estaremos haciendo los deploys correspondientes a medida que el proyecto avance y las funcionalidades del mismo tomen forma. Con esto dejaremos el entorno de trabajo listo para empezar.
Y para finalizar crearemos un tablero en Asana para ir asignando a los diferentes integrantes del equipo las diversas tareas y también hacer una lista de pendientes.
Repositorio
Para crear nuestro repositorio vamos a hacerlo en Github. Elegimos esta plataforma porque es de las más usadas y de la que encontraremos un mayor soporte de la comunidad y tutoriales a disposición ante cualquier eventualidad que pueda surgirnos. No es una ciencia, seguir los pasos como hicimos en el video y listo, ya tenemos nuestro repo listo para poder subir nuestro código y que no se nos pierda ninguna información.
Proyecto
Bueno, basta de cháchara. Llegó el momento de crear el proyecto e instalar todo lo necesario para que podamos empezar a crear líneas de código.
Ya que vamos a utilizar Next.js por encima de React, no es necesario que usemos la herramienta nativa de React para crear el proyecto, entonces vamos directo a crearlo con next. Y algo más antes de empezar de apretar Enter, es que vamos usar Typescript, por lo tanto en la creación ya podemos agregar TS como dependencia de la siguiente manera.
yarn create next-app coder-box --typescript
Esté comando va a crear toda la estructura de archivos necesaria para Coder-Box, luego vienen las dependencias que ya sabemos que vamos a usar. Si en algún momento queremos agregar más, lo iremos mencionando.
Styled-Components
Para nuestra librería de estilos para los componentes vamos a usar SC. Con el siguiente comando la agregaremos como dependencia de nuestro proyecto.
yarn add styled-components
React-Hook-Form
Esta librería nos ayudará a tener un mayor control de nuestros formularios y poder manipular de manera más sencilla los datos.
yarn add react-hook-form
Lodash
Una excelente herramienta para que nos ayude con la manipulación de toda la data en Coder-Box. Recorrer arrays, objetos o archivos Json con Lodash hace que programar sea super sencillo. Ahre.
yarn add lodash
Vinculación
Luego de tener nuestro proyecto bonito y listo para comenzar, tendremos que vincularlo con el repositorio de Github. Siguiendo los siguientes simples pasos podremos lograrlo.
- git remote add origin git@github.com:AP-openProjects/coder-box.git
- git branch -M main
- git push -u origin main
Ahora si, Coder-Box ya está conectado con Github y podremos sincronizar todos nuestros archivos con las bondades que Git nos ofrece.
Branches
Estructura de las ramas
Nombre / Tipo / Tarea-Descripción
estebanCapi/bugfix/error-login
Tareas
Inicialmente vamos a crear 4 secciones (columnas), pero si en un momento creemos necesario algún cambio podemos ir adaptando nuestro espacio de trabajo.
Tenemos que ir completando la tarea con toda la información que creamos que va a ayudar a la creación y que sea necesario para realizarla. No se preocupen si no tenemos toda la info en el momento, se puede ir actualizando en el futuro. Estos datos son el título, descripción, responsable y subtareas.
Backlog: Aquí pondremos todas las ideas que se nos ocurren del proyecto. Desde funcionalidades básicas o complejas, hasta cambios de diseño. También pondremos tareas de investigación, estudio, organización.
To-do: En esta columna iremos pasando las tareas que tenemos pensadas para esté sprint (pueden ser 1 o 2 semanas).
In-Progress: Contiene las tareas que están siendo realizadas en ese dia/s. Lo ideal es que sea solo una, pero ocasionalmente pueden ser más de una.
Done: Finalmente tendríamos una columna para poner todas las tareas finalizadas. Y poder tener un control de lo terminado recientemente en el sprint.