├── bycrypt └── readme.md ├── dataBase ├── README.md ├── mongodb │ ├── mongoose │ │ └── README.md │ └── README.md └── postgresql │ ├── sequelize │ └── README.md │ ├── Images │ ├── DB.png │ ├── Set_Password.png │ ├── linux-pgadmin-1.png │ ├── linux-pgadmin-2.png │ ├── linux-pgadmin-3.png │ └── postgres_password.png │ ├── linux.md │ ├── windows.md │ └── README.md ├── express └── README.md ├── JWT(json web token) └── README.md ├── node-mailer └── README.md ├── github ├── Images │ ├── file-editor.png │ ├── merge-editor.png │ ├── Files-changed.png │ ├── file-editor-2.png │ ├── merge-conflict.png │ ├── merge-editor-2.png │ ├── pull-request-1.png │ ├── pull-request-2.png │ ├── review-changes.png │ ├── merge-conflict-2.png │ ├── merge-conflict-3.png │ ├── source-control-1.png │ ├── source-control-2.png │ ├── source-control-3.png │ ├── source-control-4.png │ └── source-control-5.png ├── commit-message.md ├── source-control.md ├── merge-conflict.md └── README.md ├── comandos ├── github-commands.md └── diccionario.md ├── README.md └── boilerplates ├── folder-boiler-2.md └── folder-boiler-1.md /bycrypt/readme.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dataBase/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /express/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /JWT(json web token)/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dataBase/mongodb/mongoose/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dataBase/postgresql/sequelize/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /node-mailer/README.md: -------------------------------------------------------------------------------- 1 | Still nothing 2 | -------------------------------------------------------------------------------- /github/Images/file-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/file-editor.png -------------------------------------------------------------------------------- /github/Images/merge-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/merge-editor.png -------------------------------------------------------------------------------- /github/Images/Files-changed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/Files-changed.png -------------------------------------------------------------------------------- /github/Images/file-editor-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/file-editor-2.png -------------------------------------------------------------------------------- /github/Images/merge-conflict.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/merge-conflict.png -------------------------------------------------------------------------------- /github/Images/merge-editor-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/merge-editor-2.png -------------------------------------------------------------------------------- /github/Images/pull-request-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/pull-request-1.png -------------------------------------------------------------------------------- /github/Images/pull-request-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/pull-request-2.png -------------------------------------------------------------------------------- /github/Images/review-changes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/review-changes.png -------------------------------------------------------------------------------- /dataBase/postgresql/Images/DB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/dataBase/postgresql/Images/DB.png -------------------------------------------------------------------------------- /github/Images/merge-conflict-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/merge-conflict-2.png -------------------------------------------------------------------------------- /github/Images/merge-conflict-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/merge-conflict-3.png -------------------------------------------------------------------------------- /github/Images/source-control-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/source-control-1.png -------------------------------------------------------------------------------- /github/Images/source-control-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/source-control-2.png -------------------------------------------------------------------------------- /github/Images/source-control-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/source-control-3.png -------------------------------------------------------------------------------- /github/Images/source-control-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/source-control-4.png -------------------------------------------------------------------------------- /github/Images/source-control-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/github/Images/source-control-5.png -------------------------------------------------------------------------------- /dataBase/postgresql/Images/Set_Password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/dataBase/postgresql/Images/Set_Password.png -------------------------------------------------------------------------------- /dataBase/postgresql/Images/linux-pgadmin-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/dataBase/postgresql/Images/linux-pgadmin-1.png -------------------------------------------------------------------------------- /dataBase/postgresql/Images/linux-pgadmin-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/dataBase/postgresql/Images/linux-pgadmin-2.png -------------------------------------------------------------------------------- /dataBase/postgresql/Images/linux-pgadmin-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/dataBase/postgresql/Images/linux-pgadmin-3.png -------------------------------------------------------------------------------- /dataBase/postgresql/Images/postgres_password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JaluGJ/jalu-guide/HEAD/dataBase/postgresql/Images/postgres_password.png -------------------------------------------------------------------------------- /dataBase/mongodb/README.md: -------------------------------------------------------------------------------- 1 | # MongoDB, Compass y MongoAtlas 2 | 3 | >_Las fuentes de donde fué sacada la información aquí brindadas, también se pueden encontrar en los siguientes enlaces_ 4 | >_[MongoDB Documentation](https://www.mongodb.com/docs/manual/)_ 5 | >_[Cómo instalar MongoDB y Compass]()_ 6 | 7 | >- Indice -------------------------------------------------------------------------------- /comandos/github-commands.md: -------------------------------------------------------------------------------- 1 | > Antes de empezar a trabajar, antes de modificar cualquier archivo. 2 | 3 | ``` 4 | git checkout dev 5 | git pull origin dev 6 | git checkout -b [nombre rama] 7 | git push -u origin [nombre rama] 8 | ``` 9 | 10 | > Finalizado comandos git. Es momento de ponerse a trabajar 11 | 12 | ***Work in progres...*** 13 | ***Trabajo en proceso...*** 14 | 15 | > Finalizado los cambios necesarios de esta rama. Es momento de subir los cambios 16 | 17 | ***Saving files...*** 18 | ***Guardando archivos...*** 19 | 20 | git add . 21 | git commit -m [mensaje de commit] 22 | git checkout dev 23 | git pull origin dev 24 | git checkout [nombre rama] 25 | git merge dev 26 | git push 27 | 28 | ***Files uploaded*** 29 | ***Archivos subidos*** 30 | 31 | >Ahora deben hacer el pull request desde ***Github*** -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | >_Si te gustó y te sirvió esta guía, te invito a dejar una "🌟"_ 3 | 4 | >__Esta guía se va actualizando, junto al diccionario, a medida que voy aprendiendo cosas nuevas__ 5 | 6 | # Jalu-guide 7 | 8 | Te doy la bienvenida a esta guía para empezar tu proyecto. A continuación te dejaré un pequeño indice con links de las distintas cosas que tiene este repositorio. 9 | 10 | >_Si estas empezando el proyecto desde cero, recomiendo ir en el orden del indice_ 11 | 12 | >***TODOS LOS ENLACES, SI TE QUEDAS UNOS SEGUNDOS CON EL PUNTERO POR ENCIMA, APARECERA UN PEQUEÑO MENSAJE*** [colocate sobre mi por unos segundos](./README.md 'este enlace te lleva a este mismo archivo') 13 | 14 | ## __Indice__ 15 | 16 | - Comienzos de un proyecto 17 | - [Comienzos del repo. Guía github](./github/README.md "Comenzar un repo y no morir en el intento") 18 | - [Bases de datos](./dataBase "Bases de datos") 19 | - [Postgress y Pgadmin](./dataBase/postgresql/README.md "relacionales?") 20 | 23 | - Guías de comandos / extras 24 | - [Comandos github](./comandos/github-commands.md 'La famosa bibila de comandos para trabajar y no matarse entre el grupo') 25 | - [Diccionario de comandos en general](./comandos/diccionario.md 'Acá están todos los comandos que conozco y me fueron utiles') -------------------------------------------------------------------------------- /dataBase/postgresql/linux.md: -------------------------------------------------------------------------------- 1 | # Linux Ubuntu 2 | 3 | >- Indice 4 | > - [PostgreSQL](#postgresql) 5 | > - [pgAdmin](#pgadmin) 6 | 7 | >## **PostgreSQL** 8 | > 9 | >> Un video de donde saqué la forma de hacerlo: 10 | >>[PostgreSQL, pgAdmin3, Instalación en Linux (Ubuntu y distros similares) - FaztCode](https://www.youtube.com/watch?v=40uGNsi7ysc "FaztCode el mejor") 11 | >_Recomiendo instalar pgAdmin4 en vez de pgAdmin3_ 12 | >> Enlace de donde saqué como hacerlo: 13 | >>_[Documentación propia de PostgreSQL](https://www.postgresql.org/download/linux/ubuntu/ "Instalar PostgreSQL")_ 14 | >> _[Documentación propia de pgAdmin](https://www.pgadmin.org/download/pgadmin-4-apt/ "Instalar pgAdmin 4")_ 15 | >> Cabe destacar que, si tienes Ubuntu como tal (no una sub-version de ubuntu) Postgres viene instalado por defecto. 16 | >1. Dentro de las opciones de paquetes, seleccionas la que dice "Linux", y luego eliges la distro que tienes. 17 | > ___Cada una de estas distros, tiene su guía de comandos___ 18 | >2. Abre la terminal de tu distro, y ve copiando y pegando los comandos necesarios para instalar postgreSQL en tu ordenador 19 | >_Te dejo [aquí](https://www.postgresql.org/download/linux/ubuntu/) el enlace donde está la documentacion para ubuntu_ 20 | >3. Una vez completados los pasos, primero, limpia tu consola con el comando `clear`. Luego ejecuta el siguiente comando para ingresar a PostgreSQL 21 | > 22 | >``` 23 | >sudo -u postgres psql 24 | >``` 25 | > 26 | >> Con este comando, entras a postgres directamente con el usuario _"postgres"_ (la parte `-u postgres`) y entras sin contraseña 27 | >4. Una vez adentro, define una contraseña para postgres, así podras entrar luego al servidor desde pgAdmin y tambien cuando necesites hacer las configuraciones con Sequelize. Para ello haz el siguiente comando de postgres 28 | > 29 | >```SQL 30 | >\password postgres [PASSWORD] 31 | >``` 32 | > 33 | >> Esto colocara o cambiará la contraseña del usuario **postgres**. Te recomiendo que la contraseña que elijas no sea muy complicada y que la anotes en un papel o algun lado. Esta contraseña la utilizaras en tus **variables de entorno** cuando configures **sequelize** u otra ORM que utilices 34 | > 35 | >5. Ahora puedes salir de la consola, o, si quieres, vuelve a la guía y prueba algunos comandos SQL dentro de postgres para crear una tabla o lo que quieras intentar 36 | 37 | ___ 38 | 39 | ## **pgAdmin** 40 | 41 | >Al ingresar a pgAdmin por primera vez, te va a pedir que definas una **Contraseña** maestra para pgAdming, que te la va a solicitar cada vez que entres. 42 | > 43 | >![Contraseña](./Images/Set_Password.png) 44 | > 45 | >> _Te sugiero que utilices la misma contraseña que usaste antes, al camiar la contraseña del usuario postres. Si colocas una distinta, anótala._ 46 | > 47 | >Una vez definida la contraseña, le das a ✔OK y te vas a hacerle click derecho a donde dice __Servers__ y te aparecera lo siguiente 48 | > 49 | >![conect to server](./Images/linux-pgadmin-1.png) 50 | > 51 | >Vas a cliquear en la opcion **Register** --> **Server** vas a crear la nueva conexión manualmente de tu servidor de postgres 52 | > 53 | >![Register Server 1](./Images/linux-pgadmin-2.png) 54 | > 55 | > En el nombre de la conexión deberás poner **PostgreSQL** que será con la que conectaras. 56 | >Luego iras a la opción **Connection** y verás lo siguiente. 57 | > 58 | >![Register Server Conection](./Images/linux-pgadmin-3.png) 59 | > 60 | >En **Host name/address** pondras `localhost`, El puerto, username, etc, dejalos como está. 61 | >En **Password** pondras la contraseña de tu base de datos _(la misma que colocaste antes, cuando le cambiaste la contraseña al usuario postgres, luego de instalar **PostgreSQL**)_ 62 | >Una vez completados los pasos, le das a **Save** y puedes seguir con la guía que está en "README.md", que es exactamente igual lo que sigue. 63 | -------------------------------------------------------------------------------- /github/commit-message.md: -------------------------------------------------------------------------------- 1 | # Buenas practicas en los mensajes de commits 2 | 3 | > - [Índice](#buenas-practicas-en-los-mensajes-de-commits) 4 | > - [Tipos de cambios](#tipos-de-cambio) 5 | > - [Donde](#donde) 6 | > - [Que hiciste](#que-hiciste) 7 | > - [Ejemplos](#ejemplos-completos) 8 | 9 | Una buena practica en los mensajes de commits es que sean informativos, concisos y claros, decir ***QUÉ*** tipo de cambio hiciste, ***DONDE*** lo hiciste y poner ***QUÉ*** cambiaste. 10 | Un estructura sería `tipo de cambio (donde): que hiciste` 11 | 12 | > _Estas buenas practicas pueden variar segur la empresa en la que entren a trabajar_ 13 | 14 | A continuación les voy a dejar un cuadro de tipos de cambios y que significan 15 | 16 | ## Tipos de cambio 17 | 18 | |Tipo de cambio|Definición| 19 | |---|---| 20 | |*feat*| Agrega algo nuevo, una función o algo | 21 | |*fix*| Arregla una función que fallaba, o un bug | 22 | |*perf*| Mejora de codigo que se reflejan en el rendimiento | 23 | |*refactor*| Refactorizar codigo, como nombre de variables o funciones, o reestructurarlos/modularizarlo | 24 | |*style*| Cambios en el formato, como cantidad de espacios, puntos y como, cosas que no afecten el rendimiento | 25 | |*test*| Se agregan o corrijen tests | 26 | ||| 27 | 28 | ## Donde 29 | 30 | El donde hace referencia a la posicion de la carpeta y archivos que hiciste el cambio. Ojo, no es la ruta completa, sino que el comienzo de la ruta y el final. En el siguiente cuadro les doy un par de ejemplos 31 | 32 | |Donde|Explicación| 33 | |---|---| 34 | |(client/navbar)| Es en el frontend (por ello, client) y el archivo que se modifico o se agregó, es el **navbar**.
No es necesaria la extension del archivo| 35 | |(client/navbar/index)| En este caso, u otro similar donde sea necesario explcar que el cambio se dio sobre el archivo index, ya que suelen existir varios archivos index.| 36 | |(client/redux/action) | Aqui pueden agregar un lugar más, para dar más especificidad a que archivo fueron a modificar, por si no es suficiente solo decir el archivo final| 37 | |(api/xxx-route)| Es en el backend (por ello, api) y el archivo que se modifico o se agrego es el **xxx-route**.
no es necesaria la extension del archivo| 38 | |(api/routes/index)| Al igual que antes, si se va a modificar el archivo index, no es suficiente información, por lo que es necesario especificar la carpeta| 39 | ||| 40 | 41 | 42 | ## Que hiciste 43 | 44 | Aqui existen muchas sugerencias sobre que escribir especificamente. La convencion mas conocida es las que usa el [framework de Angular](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines). Como antes mencionamos, debemos ser concisos y claros, y que mejor que una palabra que defina una acción y comentar cual es el cambio. En resumen, una descripción. 45 | Es buena practica que: 46 | 1. No este en mayusculas 47 | 2. No termine en punto "." 48 | 3. No escribirlo en pasado 49 | Abajo te dejo una listita de palabras clave para estos commits con un ejemplo 50 | 51 | |Palabra clave|Definición|Español|Ejemplo| 52 | |---|---|---|---| 53 | |add|Es añadir un archivo, carpeta, funcion, etc|_añadir_| **add new yyy-route** | 54 | |fix|Es corregir y arreglar algo del codigo|_arreglar_| **fix bug on sidebar function** | 55 | |change|Es cambiar algo del codigo, como nombres o estructuras |_cambiar_|**change yyy.name to yyy.fullname on yyy.model**| 56 | |remove|Es eliminar alguna funcion o archivo, etc|_quitar_| **remove auth folder for no use anymore** | 57 | |update|Es actualizar codigo con nuevos parametros o mejoras|_actualizar_| **update dependencies to improve code** | 58 | 59 | 60 | ## Ejemplos completos 61 | 62 | Bueno, como para que vean un par de ejemplos mezclando todas las partes del codigo, les dejo las siguientes lineas 63 | 64 | ``` 65 | feat(mod): add new routes for bbb-route 66 | 67 | fix(mod): remove useEffect dependency cause loop 68 | 69 | refactor(mod): add new folders and files to componentize 70 | 71 | feat: new user control sistem 72 | 73 | fix: corrección manejo de contraseña 74 | ``` 75 | -------------------------------------------------------------------------------- /github/source-control.md: -------------------------------------------------------------------------------- 1 | # Source control, el que te ahorra escribir comandos 2 | 3 | > - [Indice](#source-control-el-que-te-ahorra-escribir-comandos "indice") 4 | > - [Source Control](#¿qué-es-y-donde-está-el-source-control "Que es el source control") 5 | > - [Utilidad](#utilidad "Para que se usa") 6 | > - [Tablita de letras](#tablita-de-letras-y-sus-significados "y esas letras que son?") 7 | > - [git add](#remplazo-a-git-add "git add, reemplazado") 8 | > - [git commit](#remplazo-git-commit--m "git commit, tambien reemplazado") 9 | 10 | 11 | No a todos les gusta usar el Source control, pero no se dan una idea de lo util que puede ser. Existen alguno personas que se llevan mejor con los comandos, y prefieren el otro metodo. 12 | > Cabe destacar que la explicacion que voy a dar es para el source control que tiene ***Visual Studio Code*** 13 | 14 | ## ¿Qué es y donde está el source control? 15 | 16 | El source control es el apartado, la opcion, la sección que te tiene en VSCode para ***Controlar la fuente*** (traducido literal del ingles). Que quiere decir esto, que vas a poder, desde acá, controlar los fuente de codigo que tengas en un repositorio remoto. Podes controlar que envias y que no envias, y controlas los archivos que tenes esperando o no, para ser subidos. 17 | Es un metodo mucho mas comodo y visual que estar haciendo los comandos de git. 18 | 19 | Si te preguntas Dónde está, pues... se ubica en la barra lateral izquierda, debajo del icono lupa. La imagen a continuacíon muestra su ubicacion en un "circulo" rojo. 20 | ![Source Control](./Images/source-control-1.png "control de imagen") 21 | _Pueden observar que el logo es reconocible, es como un cuatro al revés con circulos en las puntas_ 22 | 23 | Al hacerle click, se les va a abrir el panelcito de source control y desde aquí pueden hacer los add, los commits e incluso los push! Sumado a que, desde acá pueden ver comparar los cambios entre lo que esta mas antiguo en la rama y las nuevas modificaciones de hechas por ustedes (arbol de trabajo) 24 | 25 | ## Utilidad 26 | 27 | Lo primero que veras en este panel, si es que no has hecho _ningun_ cambio, será nada. Si nada, porque no modificaste nada y no hay nada que añadir ni revisar. Es como si quisieras hacer un `git add .` y todaviá no hiciste ninguna modificación. 28 | Ya, cuando hagas un cambio, te van a aparecer (como en la imagen) un archivo, que será aquel que modificaste. Al final de cada archivo pueden aparecer distintas letras. 29 | 30 | ## Tablita de letras y sus significados 31 | 32 | |Letra
Simbolo|Significado| 33 | |---|---| 34 | | U | _Unstaged_ No hay registro de este archivo, usualmente aparece en archivos nuevos a añadir| 35 | | D | _Deleted_ Los archivos con la letra D, han sido eliminados | 36 | | M | _Modified_ Es decir, fue modificado y aun no fue subido al repo | 37 | | ! | _Conflict_ Hay conflictos entre este archivo y lo que hay en el repo/rama [Ver resoulcion de conflictos](./merge-conflict.md "Acá vas a encontrar como resolver un conflicto ") | 38 | 39 | >A menos que sea conflicto, no es TAN necesario que sepas sobre estos estados... hoy, ahora, que estás haciendo el PF. Tal vez, mañana, es necesario que lo sepas. 40 | 41 | ## Remplazo a git add 42 | 43 | Desde el Source Control, podes hacer el "git add" y el "git rm" simplemente con dos botones. Cuando te colocas sobre uno de los archivos que se encuentra en "changes" o "cambios" y cliqueas el simbolo "+" para añadirlo, o el "-" para quitarlo, como se muestra a continuacion 44 | 45 | ![El git add, en un boton](./Images/source-control-2.png "git add") 46 | ![Podes sacarlo del add](./Images/source-control-5.png "git rm") 47 | 48 | Como podras observar, al añadir un archivo, este ira a una sona de _staged changes_ o _cambios "staged"_, esa zona son los archivos añadidos, listos para hacerles commit. 49 | 50 | ![Ves los archivos añadidos](./Images/source-control-3.png) 51 | 52 | Y que otra GRAN solucion nos trae el _Source Control_ que nos muestra donde ponemos mensaje de commit y con un simple boton, hacemos el commit. 53 | 54 | ## Remplazo git commit -m "" 55 | 56 | ![Metes el mensaje de commit](./Images/source-control-4.png) 57 | 58 | Una vez finalizado esto, ya podemos hacer los pasos siguientes de `git checkout dev` `git pull origin dev`, etc 59 | 60 | [de vuelta al inicio](#source-control-el-que-te-ahorra-escribir-comandos "indice") -------------------------------------------------------------------------------- /comandos/diccionario.md: -------------------------------------------------------------------------------- 1 | # Mi pequeño diccionario de codigo/comandos 2 | 3 | ## Git 4 | 5 | |Comando|Funcionalidad/Definicion| 6 | |---|---| 7 | |`git branch --list`| Muestra una lista de las ramas existentes | 8 | |`git branch` [nombre]| Crea una nueva rama con el ***[nombre]*** indicado | 9 | |`git branch -m/-M` [nombre]| Renombra a la rama en la que estas parado, y reemplaza el nombre con lo que este en ***[nombre]*** | 10 | |`git branch -d/-D` [nombre]| Borra la rama indicada en ***[nombre]***| 11 | |`git checkout`| Mostrara una lista con aquellos archivos no subidos a la rama en la que estas ubicado | 12 | |`git checkout` [nombre] | Te posicionará en la rama indicada en ***[nombre]*** | 13 | |`git checkout -b` [nombre]| Creará una rama nueva llamada ***[nombre]*** a partir de en donde estás parado, y te posicionará en la nueva rama | 14 | |`git clone` [url] | clona un repositorio remoto ubicado en la ***[url]*** | 15 | |`git init`| Crea un repositorio Git vacío o reinicializa uno existente | 16 | |`git log`| Muestra todos los commits hechos hasta el momento | 17 | |`git merge` [nombre]| Trae los archivos en la rama ***[nombre]*** y los mezcla con la rama en la que estas ubicado actualmente | 18 | |`git pull` | Traerá todos los cambios que esten conectados a un repositorio, incluyendo ramas creadas, archivos nuevos, y cualquier cambio hecho, sobre la rama en la que estes ubicado | 19 | |`git pull origin` [nombre]| Traerá solo los cambios efectuados en el origen, en la rama especificada en ***[nombre]*** | 20 | |`git push`| Actualiza un repositorio remoto con los ultimos cambios generados | 21 | |`git push origin` [nombre]| Actualiza la rama ***[nombre]*** un repositorio remoto con los ultimos cambios generados en esa rama | 22 | |`git push -u origin` [nombre] | Sube la rama ***[nombre]*** al re | 23 | |`git remote`| Podras ver una lista con los nombre a los distintos repositorios remotos creados con el comando `git remote add` _[nombre]_ [url repo] | 24 | |`git remote rename` [nombre viejo] [nombre nuevo] | Cambia el nombre de la referencia de repositorio remoto ***[nombre viejo]*** por ***[nombre nuevo]*** | 25 | |`git remote remove` [nombre]| Borra la conexion remota al repositorio con referencia ***[nombre]*** | 26 | |`git remote set-url` [nombre] [newURL] [oldURL]| Reemplaza la ***[oldURL]*** (url vieja) por ***[newURL]*** (url nueva) en la conexion remota llamada ***[nombre]*** | 27 | |`git remote add` _[nombre]_ [url repo]| Conecta tu instancia de Git con un el repositorio remoto ubicado en ***[url repo]*** y la referencia es ***[nombre]*** | 28 | |`git stash`| Reserva los cambios en un directorio "sucio" aparte (recomiendo investigar) | 29 | |`gitk`| El navegador de repositorio de Git | 30 | |``| | 31 | 32 | ## npm 33 | 34 | | Comando | Función | 35 | |---|---| 36 | |`npm -v`| Devuelve la version de NPM instalada en tu computadora | 37 | |`npm init`| Inicia, en la carpeta que se encuentra, una instancia de npm, creando un archivo package-json, listo para instalarle dependencias| 38 | |`npm i` [paquete]| Instala la libreria especificada en ***[paquete]*** | 39 | |`npx`| herramienta para ejecutar paquetes | 40 | |`npx create-react-app` [nombre]| ejecutará el paquete de React y creara la carpeta ***[nombre]***| 41 | 42 | ## Node 43 | 44 | | Comando | Función | 45 | | --- | --- | 46 | |`node -v`| Devuelve la version de Node instalada en tu computadora | 47 | |`node` [nombre].js | ejecutara el archivo que coincida con ese nombre sobre la carpeta en donde este ubicado, con node | 48 | |``| | 49 | 50 | ## Bash 51 | 52 | | Comando | Función | 53 | | --- | --- | 54 | |`ls`| Muestra los archivo de la carpeta en donde estes ubicado | 55 | |`ls -a`| Muestra ***TODOS*** los archivos en la carpeta donde estes ubicado (incluye ocultos) | 56 | |`pwd`| Muestra la direccion de la carpeta donde estes ubicado | 57 | |`date`| Muestra la fecha y hora actual | 58 | |`clear`| Limpia la consola de todos los comandos ejecutados | 59 | |`mkdir` [nombre]| Crea un nuevo directorio (carpeta) en donde estes ubicado con el ***[nombre]*** indicado | 60 | |`rm` [nombre] | Elimina el archivo ***[nombre]*** que se encuentre donde estes ubicado | 61 | |`rm -f` [nombre] | Elimina el archivo ***[nombre]*** de forma forzada, en caso que no pueda hacerlo | 62 | |`head` [nombre] | Muestra las primeras 10 lineas del archivo ***[nombre]*** | 63 | |`tail` [nombre] | Muestra las ultimas 10 lineas del archivo ***[nombre]*** | 64 | |`mv` [direccion origen] [direccion final] | Mueven el archivo/carpeta que se indique en ***[dirección origen]*** hacia la carpeta ***[dirección final]*** | 65 | |``| | -------------------------------------------------------------------------------- /dataBase/postgresql/windows.md: -------------------------------------------------------------------------------- 1 | # ___Windows___ 2 | 3 | >- Indice 4 | > - [PostgreSQL](#postgresql) 5 | > - [Ejecuta psql en cualquier consola](#lo-que-sigue-no-es-tan-nescesario) 6 | > - [pgAdmin](#pgadmin) 7 | 8 | ## PostgreSQL 9 | 10 | >> _Un pequeño video que usé de guía la vez que lo instalé yo_ 11 | >>[PostgreSQL Instalación en Windows 10- FaztCode](https://www.youtube.com/watch?v=cHGaDfzJyY4) 12 | >1. Dentro de las opciones de paquetes, seleccionas la opcion que dice _"Windows"_ 13 | >2. En la nueva pestaña, cliquea en __"Download the installer"__ _(Esto te dirigira a otra pestaña)_ 14 | >3. Selecciona la ultima version soportada dentro de la lista de __"Windows x86-64"__ _(Esto te hará descargar el instalador .exe)_ 15 | >4. Una vez terminó la descarga, ejecutas el instalador 16 | >>_Es posible que veas que instale Microsoft Visual C++ y otras cosas. Tranqui, que son cosas necesarias para que se instale correctamente_ 17 | >4. Una vez aparece el instalador, le das a __"Siguiente"__. 18 | >5. Te aparecerá el directorio donde se instalará. Puedes cambiar esta ruta si o deseas. Le das a __"Siguiente"__ 19 | >6. Te aparecerán las siguientes opciones tildadas, que son los programas que vas a instalar. _(Recomiendo dejar tildado todo para que se instale y presionar __"Siguiente"__)_ 20 | >>|Opcion|¿Qué es?| 21 | >>|---|---| 22 | >>|PosgreSQL Server|El servidor de base de datos como tal| 23 | >>|pgAdmin 4| Herramienta visual para gestionar las bases de datos de PostrgesSQL. Hace bastante mas sencillo todo| 24 | >>|Stack Builder| Manejador de paquetes que permite descargar e instalar herramientas y drivers adicionales para PostgreSQL | 25 | >>|Command Line Tools| Esto debería permitirte ejecutar PostgreSQL desde cualquier consola de windows, sin necesitar de una consola extra o usar PG admin| 26 | >7. Te aparecerá dode se instalará todo. Cliquea a __"Siguiente"__ 27 | >8. Ahora deberás definir una contraseña. Te recomiendo que la anotes en algun lado, y que no sea algo tan complicado para recordarla facilmente, ya que la utilizaras en todos los __.env__ y tambien cuando tengas que ingresar desde __pgAdmin__ o desde __SQLshell__. Cliqueas __"Siguiente"__ 28 | >9. En el siguiente paso, te muestra el puerto en el que estará corriendo la base de datos, que es aquel que va a estar escuchando todo el tiempo. __Deja el puerto 5432__, no te recomiendo, en lo absoulto, que lo cambies, sumado a que luego, cambiarlo, no será tan sencillo. 29 | >10. A partir de aquí, le puedes dar a __"Siguiente"__ hasta que te aparezcla la opción __"El programa esta listo para iniciar la instalación"__ que también le darás siguiente y esperaras a que se termine de instalar 30 | >11. Una vez finalizada la instalación, el ultimo panel tendra tildado el inicializador de __Stack Builder__. Lo dejas marcado y le das a terminar. Esto permitira que inicie para instalar todos los extras aparte de la base de datos. 31 | >12. Abierta la pantalla de __Stack Builder__ tendras que seleccionar a que base de datos quieres instalarle los complementos. Seleccionaras la base **PostgreSQL** y le das a __Next >__ 32 | >13. En la lista de aplicaciones a instalar, ***MI*** sugerencia _(al igual que Fazt)_ es que selecciones los complementos en _"Database Drivers"_ si es que trabajas con .NET o Java u otro lenguaje. 33 | >i lo deseas, recomiendo investigar sobre las otras opciones_. 34 | >14. Darle a _Next >_ siempre, a patir de ahora. Van a instalar estos complementos. Paciencia. 35 | > ***Y listo, PostgreSQL ya esta instalado en tu Ordenador*** 36 | >> ### _Lo que sigue, no es tan nescesario_ 37 | >15. Lo que sigue es configurar para poder acceder desde cualquier consola. Copias la direccion de la carpeta bin, donde está instalado tu PostgreSQL, que si no cambiaste la ruta, sería algo así `C:\Program Files\PostgreSQL\`__XX__`\bin` siendo __"XX"__ la version de PostgreSQL. 38 | >16. Vas al buscador de Windows y escribes __env__ y te aparecera y cliquearas la opción de ***"Editar las variables de entorno del sistema"***. 39 | >17. Selecciona la opción __"Variables de entorno"__, luego a la opción __"Path"__ le das doble click. Te abrirá una ventana. Selecciona __"Nuevo"__ y allí pegarás la ruta que copiaste anterior mente. 40 | >18. Le das a __"Aceptar"__ a las tres ventanas y listo. Configurado para acceder desde cualquier consola. 41 | >19. Ya puedes seguir con la otra guía 42 | 43 | ## pgAdmin 44 | 45 | >Al ingresar a pgAdmin por primera vez, te va a pedir que definas una **Contraseña** maestra para pgAdming, que te la va a solicitar cada vez que entres. 46 | > 47 | >![Contraseña](./Images/Set_Password.png) 48 | > 49 | >> _Te sugiero que utilices la misma contraseña que usaste antes, al instalar PostgreSQL. y si es distinta, anótala._ 50 | > 51 | >Una vez definida la contraseña, le das a ✔OK y te vas a cliquearle a donde dice __Servers__ 52 | > 53 | >Cuando le cliqueas allí, te aparecerá lo siguiente... 54 | > 55 | >![Connect to server](./Images/postgres_password.png) 56 | > 57 | >Aquí, te conectarás al servidor de postgres. Colocas la contraseña de usuario postgres que utilizaste al instalar esta DB. 58 | >Colocada la contraseña y dado a OK, ya tienes acceso a tus bases de datos. 59 | >Cliqueas en PostgreSQL y luego en Databases y tendras acceso a todas TUS bases de datos en tu computadora. 60 | > Ya puedes volver a la otra guía 61 | 62 | -------------------------------------------------------------------------------- /github/merge-conflict.md: -------------------------------------------------------------------------------- 1 | # Si llegaste acá, que no panda el cunico© 2 | 3 | > - [Índice](#si-llegaste-acá-que-no-panda-el-cunico© "índice") 4 | > - [Solucion 1](#método-1-source-control-y-file-comparator "solucion 1") 5 | > - [Solucion 2](#método-2-merge-editor "solucion 2") 6 | 7 | 8 | Y, aparecio un conflico en el mergeo, luego de hacer `git merge dev` y te apareció, en consola, algo así 9 | 10 | ``` 11 | Auto-mergin xxx_file.js 12 | CONFLICT(content): Merge conflict in xxx_file.js 13 | Automatic merge failed; fix conficts and then commit the result. 14 | ``` 15 | 16 | Quedate tranquilo, que la solución es MUCHISIMO mas facil de lo que crees. Solo que ha que hacer el mergeo manualmente. Y no, no es que tenes que copiar el codigo a mano (aunque a veces si), solo tenes que mezclar las partes que corresponden unir. 17 | 18 | Por suerte, nuestro querido VSCode tiene el maravilloso Source Control, y también unos controladores de versionado, que nos permiten hacer el trabajo de unir ambos archivos de una manera mucho mas sencilla. 19 | 20 | ## Método 1: Source control y file-comparator 21 | 22 | ![source control](./Images/merge-conflict.png "source control") 23 | 24 | Podremos ver en nuestros archivos en el source control, en la zona de "merge changes" que son los cambios de mergeo. 25 | Al hacerle click al archivo, se nos abrirá el archivo mostrandonos los conflictos generados. 26 | Resaltado en __Verde__, podras ver los cambios hechos por tí, es decir, los que se encuentran en la rama que estas **TU**. 27 | Resaltado en __Azul__, podras ver lo cambios que vienen desde la rama que mergeas. En este caso, como el comando fue `git merge dev`, serán los cambios que trae la rama `dev` 28 | 29 | ![file-comparator](./Images/file-editor.png "file comparator") 30 | ![file-comparator-2](./Images/file-editor-2.png "file-comparator-2") 31 | 32 | Por encima de el recuadro verde, podran ver cuatro opciones 33 | `Accept Current Change | Accept Incoming Changes | Accept Both Changes | Compare Changes` 34 | Al aceptar una de ellas, sea la opcion que acepten, reemplazará o unira el codigo. 35 | 36 | > _Está muy bien definido que es current y que es incoming en la imagen. Incluso el mismo VSCode te lo muestra_ 37 | 38 | Puede suceder que tengas mas de uno de estos cuadritos de cambios, para partes especificas de codigo. 39 | 40 | >_Tambien cabe destacar que, podes utilizar este metodo, o hacer la union bien a mano. Es decir, borrarás este "HEAD" el "main" y corregiras a mano el codigo que está en el medio. Cada quien toma su forma de resolverlo._ 41 | 42 | Una vez lo resuelves, guardas el archivo y te debería aparecer del siguiente modo en el source-control 43 | 44 | ![sorce-control](./Images/merge-conflict-2.png "source-control") 45 | 46 | podras ver que **YA TIENE UN MENSAJE DE COMMIT**. dejalo tal y como está, y le das click a commit. Una vez commiteado. En tu consola veras que la rama en la que estas tiene un `(rama|MERGING)`. simplemente le daras a enter para que salga del estado de merging y veras lo siguiente (segun la rama y carpeta donde estes) 47 | 48 | ![consola](./Images/merge-conflict-3.png "consola") 49 | 50 | Una vez hecho el enter, puedes proceder con el git push. 51 | 52 | >_Si el `(rama|MERGING)`_ no se va, y queda ahí, es que todavia te quedan archivos con conflictos. 53 | 54 | ## Método 2: Merge-editor 55 | 56 | >Este es otro método para resolver los conflictos. 57 | 58 | ![file-comparator-2](./Images/file-editor-2.png "file-comparator-2") 59 | 60 | Cuando entras, desde el source control, al archivo que está en conflicto (como mostramos en la parte anterior) podras divisar en la parte inferior derecha, un boton que dice **Resolve in Merge Editor** o **Resolver en editor de mergeo**. 61 | Al hacerle click, podras divisar lo que coloco en la siguiente imagen, que es otro editor de mergeo. Este tiene varias funciones, pero por ahora, veremos las basicas 62 | 63 | ![merge-editor](./Images/merge-editor.png "merge-editor") 64 | 65 | Aquí tambien tienes los accept, como antes, pero los tienes separados en `Accept incoming|Accept Both` y `Accept Current|Accept Both`, la ventaja que supone esto, representa en poder ver, lado a lado, las diferencias en el codigo. sumado a que, a medida que vas aceptando las diferentes partes de codigo, se muestran, en el recuadro de abajo, cómo va quedando el código como resultado final. 66 | 67 | > DETALLE: no siempre va a aparecer esta opcion de Accept Incoming, etc. A veces, apareceran unos recuadritos oscuros, que representan una linea, o una sección de codigo, en la que es necesario elegir solo uno de las dos partes del codigo. Cuando le hacen click, en ese cadradito que se ubica sobre la izquierda aparecera un pequeño circulo blanco, que representara que parte del codigo se quedará. 68 | 69 | Una vez resueltos los conflictos, podran ver que, la opción "Complete Merge" se liberará, restando 0 confictos a solucionar. Cuando le dan click al boton `Complete Merge` se solucionara el conflicto y podran ver, desde el **Source Control** la misma imagen que antes 70 | 71 | ![sorce-control](./Images/merge-conflict-2.png "source-control") 72 | 73 | en la que lo cambios ya están en zona de "Staged Changes", permitiendo así, hacer el commit y luego el push, del mismo modo que en el otro caso (Enter en la consola, luego git push) . 74 | 75 | LISTO, NO HAY MAS CONFLICTOS 76 | >_Cabe destacar que el conflicto aquí generado es simple y no tiene tanta profundidad debido a que es en modo de ejemplo._ 77 | 78 | [Volver al indice](#si-llegaste-acá-que-no-panda-el-cunico© "inicio") -------------------------------------------------------------------------------- /dataBase/postgresql/README.md: -------------------------------------------------------------------------------- 1 | # PostgreSQL y PGAdmin 2 | 3 | Bienvenido a la pequeña guía para instalar PostgreSQL junto a pgAdmin (que, por defecto, se instalan juntos y de manera automatica) y algunos pasos de como utilizarlo en tu computadora. 4 | > _Esta guía va para aquellos que instalan por primera vez PostgreSQL y no necesitan hacer ninguna configuración extra que no sea la por defecto._ 5 | 6 | ### Indice 7 | 8 | - [Instalacion](#instalar-postgresql-y-pgadmin "The best base de datos relacional gratuita") 9 | - [Windows](#windows "Vamos con windor") 10 | - [Linux](#linux "El SO que esta en todo") 11 | - [SQL shell](#sql-shell "La Consola de Postgres") 12 | - [Comandos básicos SQL](#comandos-sql "Algunos comandos") 13 | - [pgAdmin4](#pgadmin "Con interfaz grafica") 14 | - [pgAdmin4 en Windows](#configurar-pgadmin-en-windows "windoooor") 15 | - [pgAdmin4 en Ubuntu](#configurar-pgadmin-en-ubuntu "Ubuntu!") 16 | 17 | ## Instalar PostgreSQL y pgAdmin 18 | 19 | 20 | Por si no quieres ver el video, a continuación te dejo los pasos, paso por paso. 21 | 22 | > 1. Ir a la pagina oficial de [PostgreSQL](https://www.postgresql.org/ "Haz click aquí para ir a la pagina"). 23 | > 2. Cliquear el boton "Download" o "Descargar" _(Esto te dirigirá a las opciones de descarga)_ 24 | > 3. Ahora vas a instalarlo 25 | > ### ___Windows___ 26 | >> a. Si tienes Windows, aqui tienes la [guía para windows](./windows.md) 27 | > ### ___Linux___ 28 | >> b. Si tienes Linux, aquí tienes la [guía de linux](./linux.md) 29 | >> _Cabe aclarar que tanto **Postgres** como **pgAdmin** tienen documentación para instalar y los comandos necesarios para configurar su instalación en la distro que utilices_ 30 | >4. Y listo, ya tenés instalado PostgreSQL y pgAdmin para que empieces a utilizar la base de datos. 31 | 32 | ## SQL shell 33 | 34 | SQL shell es la consola de PostgreSQL, en donde podes hacer todos los comandos SQL para manejar tu DB. 35 | Ésta consola se instala junto con PostgreSQL, aunque también, si hiciste los pasos de path, puedes acceder a esta consola desde cualquier otra consola con el comando 36 | 37 | ``` 38 | psql -U postgres -h localhost -W 39 | ``` 40 | 41 | >_(con este comando, te pedira la contraseña que usaste anterior mente que te recomendé anotar y que sea sencilla)_ 42 | 43 | > _En **linux**, no existe sql shell. Simplemente entras a postrges por medio de la terminal de ubuntu con el siguiente comando_ 44 | >``` 45 | > sudo -u postgres psql 46 | >``` 47 | > _No te pedirá contraseña ni nada. Pero si deberas definirle una para futuras conexiones y tambien para utilizar pgAdmin_ 48 | 49 | 50 | Al ingresar a la consola de SQL shell te pedira una serie de datos, a lo que será mejor que vayas dando enter hasta que te pida tu _contraseña_. 51 | 52 | >_No te preocupes si no ves que estas escribiendo la contraseña, eso es a proposito_ 53 | 54 | Una vez la termines de escribir, presiona la tecla enter y habrás entrado. 55 | Ahora dependes de tus conocimientos de comandos SQL para crear la base de datos y tablas y demas. Te recomiendo investigar un poco para ver algunos comandos SQL y practicar. 56 | 57 | A continuación te dejo un par de comandos para que crees tu base de datos y poder ver las tablas. 58 | > ___Son comandos basicos. Recomiendo estudiar SQL si lo van a utilizar___ 59 | 60 | >### Comandos SQL 61 | > 62 | > Recordatorio: _Para que se ejecuten los comandos, **SI O SI** el comando debe terminar con ";"(punto y coma)_ 63 | > 64 | >```SQL 65 | > Comando --> Funcionalidad 66 | > \q --> Salir de psql o SQL shell 67 | > \l --> Enlista todas las DB en tu PostgresSQL 68 | > \c [nombre_DB]--> Conecta con la base de datos [nombre_DB] 69 | > \dn --> Enlista todos los esquemas 70 | > 71 | > 72 | >CREATE DATABASE [nombre] --> Crea una base de datos llamada [nombre] 73 | > 74 | >CREATE TABLE [nombre] --> Crea una tabla con llamada [nombre] 75 | >( 76 | >nombre_columna_1 tipo_de_dato(tamaño), --> tamaño no siempre es necesario. 77 | >nombre_columna_2 tipo_de_dato(tamaño), --> un caso necesario es en 78 | >nombre_columna_3 tipo_de_dato(tamaño), --> dato tipo varchar. Lista al final 79 | >); 80 | > 81 | >INSERT INTO [nombre_tabla] (nombre_columna1, nombre_columna2, ...) --> Inertar una 82 | >VALUES (valor_1, valor_2,...); --> fila de valores en la tabla [nombre_tabla] 83 | > --> cada VALUES esta relacionado con el [nombre_columna] correspondiente 84 | > 85 | >SELECT nombre_columna --> Te permite obtener la información de [nombre_columna] 86 | >FROM nombre_tabla --> que esta en la [nombre_tabla] 87 | > --> Si se reemplaza nombre_columna por un "*", traera de todas la columnas 88 | > ``` 89 | > A partir de ahora, les invito a investigar por ustedes mismos que son las Querys, los metodos ` WHERE, JOIN, ON, etc` y los distintos operadores 90 | >>[PostgreSQL Cheat Sheet](https://www.postgresqltutorial.com/postgresql-cheat-sheet/ "una hoja de 'trampas' con comandos SQL") 91 | >> Lista de [Datatypes](https://www.techonthenet.com/postgresql/datatypes.php "una lista muy util de Data types con SQL") 92 | 93 | 94 | ## **pgAdmin** 95 | 96 | Otra forma de utilizar la base de datos (y más sencilla), es a través de una herramienta con interfaz grafica, como es pgAdmin. 97 | 98 | Configurar tanto pgAdmin en Windows como en Ubuntu es casi igual. Lo que te voy a explicar a continuacion es esa pequeña diferencia. 99 | > ____ 100 | > 101 | >### _configurar pgAdmin en **Windows**_ 102 | > - El archivo [windows.md](./windows.md/#pgadmin) tiene, más abajo la explicacion de como configurarlo. Al terminarlo, puedes seguír aquí que en ambos casos es igual. 103 | > 104 | > ____ 105 | > 106 | >### _configurar pgAdmin en **Ubuntu**_ 107 | > - El archivo [linux.md](./linux.md/#pgadmin) contiene los pasos necesarios para poder configurar pgAdmin4 en Ubuntu. Una vez lo termines, puedes volver aquí para los otros pasos que son exactamente iguales. 108 | > 109 | > ____ 110 | 111 | ![pgAdmin](./Images/DB.png) 112 | 113 | Podras ver algo así. Al hacer click derecho en Databases puedes crear una nueva base de datos en "create" --> "Database..." y le das un nombre, etc. 114 | 115 | pgAdmin es bastante intuitivo para las cosas. Por ejemplo, si quieres ver los datos de una tabla o la info de una columna, haces el siguiente reccorrido: 116 | 117 | > __Databases --> [database name] --> Schemas --> Tables__ 118 | 119 | y luego seleccionas cualquier tabla con click derecho y le das a la opcion __"View/Edit data"__ y seleccionas una de las opciones 120 | 121 | > pgAdmin es bastante sencillo de utilizar. 122 | 123 | > 124 | ***ESPERO QUE TE HAYA SIDO UTIL ESTA GIA DE INSTALACIÓN Y USO. SIN MÁS, PUEDES PASAR A LA GUÍA DE SEQUELIZE*** -------------------------------------------------------------------------------- /boilerplates/folder-boiler-2.md: -------------------------------------------------------------------------------- 1 | # Boiler 2 2 | 3 | > - [Índice](#boiler-1) 4 | > - [Iniciar Backend](#iniciar-backend) 5 | > - [Comandos para back](#comandos-para-backend) 6 | > - [Iniciar Frontend](#iniciar-frontend) 7 | > - [Comandos Create React App](#con-cra) 8 | > - [Comandos Vite](#con-vite) 9 | > - [Boiler general](#boiler-carpetas) 10 | > - [Boiler back](#backend-boiler) 11 | > - [Boiler front CRA](#frontend-cra-boiler) 12 | > - [Boiler front Vite](#frontend-vite-boiler) 13 | 14 | ## Iniciar Backend 15 | 16 | La carpeta que crees cuando inicies el proyecto, recomiendo que se llame con el mismo nombre del proyecto. Esta carpeta será donde haras el `git init` que sugiere Github cuando creas un repositorio. 17 | Al crear la carpeta **api**, ***ANTES*** de añadir cualquier otra carpeta, a través de la terminal, ejecutar el comando ``npm init` para inicializar un nuevo package y crear el proyecto de node en esa carpeta. 18 | Te dejo una lista pequeña de comandos (y el orden) que deberías que deberas hacer en la terminal, que van a ser necesarias en el proyecto 19 | 20 | ### Comandos para backend 21 | 22 | ``` 23 | npm init 24 | npm install express cors dotenv morgan nodemon 25 | npm install pg sequelize (si vas a utilizar PostgrsSQL o una SQL) 26 | npm install mongodb mongoose (si van a utilizar MongoDB) 27 | npm install axios (por si hacen pedidos a otra api) 28 | ``` 29 | 30 | ## Iniciar Frontend 31 | 32 | Para el frontend, hay dos sugerencias si van a utilizar React. 33 | Opcion 1, utilizar el **create react app**, o utilizar **vite** (Pueden utilizar cualquier otra libreria de frontend) 34 | 35 | ### Con CRA 36 | Desde la terminal, se ubican sobre la carpeta del proyecto y ejecutan los siguientes comandos 37 | ``` 38 | npx create-react-app client (esto creará la carpeta client y los archivos iniciales de React) 39 | cd client 40 | npm install 41 | ``` 42 | Finalizado este primer paso, ahora pueden instalar dependencias. 43 | 44 | ### Con Vite 45 | Desde la termnal, se ubican sobre la carpeta del proyecto y ejecutan los siguientes comandos 46 | (sugiero leer la documentacion de [vite](https://vitejs.dev/guide/)) 47 | ``` 48 | npm create vite@latest client -- --template react 49 | cd client 50 | npm install 51 | ``` 52 | Finalizado este primer paso, ahora pueden instalar dependencias 53 | 54 | Algunas dependencias que les serán utilez serán `Axios` y `React Router Dom`. Ya, el resto, dependerá de ustedes 55 | 56 | # Boiler carpetas 57 | 58 | ``` 59 | 📁proyecto 60 | 📁api 61 | 📁client 62 | 📜.gitignore 63 | ℹ README.md 64 | ``` 65 | 66 | >Como podran obsevar, hasta aquí, es exactamente igual al otro. Lo que cambiará serán las carpetas del backend. 67 | >Esta otra buena practica fue presentada durante el evento de "nerdearla", en un video llamado *"folder hell"* 68 | 69 | ## Backend Boiler 70 | 71 | ``` 72 | 📁api 73 | 📁src 74 | 📁xxx 75 | 📁xxx-controller 76 | 📜a-xxx-controller.js 77 | 📜b-xxx-controller.js 78 | 📜... 79 | 📜xxx-model.js 80 | 📜xxx-route.js 81 | 📁yyy 82 | 📁yyy-controller 83 | 📜a-yyy-controller.js 84 | 📜b-yyy-controller.js 85 | 📜... 86 | 📜yyy-model.js 87 | 📜yyy-route.js 88 | 📁helpers/utils (funciones útiles) 89 | 📜Auth.js 90 | 📜routeProtection.js (jwt) 91 | 📁mails (Si utilizan nodemailer para respuestas) 92 | 📜mail-1.html 93 | 📜mail-2.html 94 | 📜... 95 | 📁api-calls (pedidos a una API externa, si es que la necesitan) 96 | 📜api-a.js (haces el pedido de información y recomiendo guardar en tu base de datos) 97 | 📜api-b.js 98 | 📜... 99 | 📜app.js 100 | 📜db.js 101 | 📜index.js 102 | ⚙ .env 103 | 📜.env.example (Este archivo es para las variables de entorno para todos sean las mismas) 104 | 📜package-lock.json 105 | 📜package.json 106 | 107 | ``` 108 | 109 | ## Frontend CRA boiler 110 | 111 | ``` 112 | 📁client (carpeta del frontend) 113 | 📁public (esto la crea solo CRA) 114 | 📁src 115 | 📁components (solo componentes, ninguna pagina entera. solo componentes) 116 | 📁component-a 117 | 📜component-a.jsx 118 | 📜component-a.css (este archivo deciden ustedes que tipo de css utilizaran) 119 | 📁component-b 120 | 📜component-b.jsx 121 | 📜component-b.css 122 | 📁... 123 | 📁pages 124 | 📁landing 125 | 📜landing.jsx 126 | 📜landing.css (este archivo deciden ustedes que tipo de css utilizaran) 127 | 📁page-a 128 | 📜page-a.jsx 129 | 📜page-a.css 130 | 📁... 131 | 📁utils/helpers (Divide y venceras) 132 | 📜auth.js 133 | 📜passport.js 134 | 📜... 135 | 📁icons (por si tienen iconos aquí) 136 | 📁api-calls 137 | 📁xxx-call 138 | 📜xxx-get.js 139 | 📜xxx-put.js 140 | 📜... 141 | 📁yyy-call 142 | 📜yyy.get.js 143 | 📜yyy.put.js 144 | 📜... 145 | 📁... 146 | 📁redux (el interior dependerá de si usar o no redux-toolkit) 147 | 📜App.js 148 | 📜App.css 149 | 📜index.js 150 | 📜index.css 151 | 📜package.json 152 | 📜package-lock.json 153 | ⚙ .env 154 | 📜.env.example 155 | ``` 156 | 157 | ## Frontend Vite boiler 158 | 159 | ``` 160 | 📁client (carpeta del frontend) 161 | 📁public (esto la crea Vite) 162 | 📜vite.svg 163 | 📁src 164 | 📁assets (esto lo crea Vite) 165 | 📁components (solo componentes, ninguna pagina entera. solo componentes) 166 | 📁component-a 167 | 📜component-a.jsx 168 | 📜component-a.css (este archivo deciden ustedes que tipo de css utilizaran) 169 | 📁component-b 170 | 📜component-b.jsx 171 | 📜component-b.css 172 | 📁... 173 | 📁pages 174 | 📁landing 175 | 📜landing.jsx 176 | 📜landing.css (este archivo deciden ustedes que tipo de css utilizaran) 177 | 📁page-a 178 | 📜page-a.jsx 179 | 📜page-a.css 180 | 📁... 181 | 📁utils/helpers (Divide y venceras) 182 | 📜auth.js 183 | 📜passport.js 184 | 📜... 185 | 📁icons (por si tienen iconos aquí) 186 | 📁api-calls 187 | 📁xxx-call 188 | 📜xxx-get.js 189 | 📜xxx-put.js 190 | 📜... 191 | 📁yyy-call 192 | 📜yyy.get.js 193 | 📜yyy.put.js 194 | 📜... 195 | 📁... 196 | 📁redux (el interior dependerá de si usar o no redux-toolkit) 197 | 📜App.css 198 | 📜App.jsx 199 | 📜index.css 200 | 📜main.jsx 201 | 📜index.html 202 | 📜package.json 203 | 📜package-lock.json 204 | ⚙ .env 205 | 📜.env.example 206 | ⚙ vite.config 207 | ``` -------------------------------------------------------------------------------- /boilerplates/folder-boiler-1.md: -------------------------------------------------------------------------------- 1 | # Boiler 1 2 | 3 | > - [Índice](#boiler-1) 4 | > - [Iniciar Backend](#iniciar-backend) 5 | > - [Comandos para back](#comandos-para-backend) 6 | > - [Iniciar Frontend](#iniciar-frontend) 7 | > - [Comandos Create React App](#con-cra) 8 | > - [Comandos Vite](#con-vite) 9 | > - [Boiler general](#boiler-carpetas) 10 | > - [Boiler back](#backend-boiler) 11 | > - [Boiler front CRA](#frontend-cra-boiler) 12 | > - [Boiler front Vite](#frontend-vite-boiler) 13 | 14 | ## Iniciar Backend 15 | 16 | La carpeta que crees cuando inicies el proyecto, recomiendo que se llame con el mismo nombre del proyecto. Esta carpeta será donde haras el `git init` que sugiere Github cuando creas un repositorio. 17 | Al crear la carpeta **api**, ***ANTES*** de añadir cualquier otra carpeta, a través de la terminal, ejecutar el comando ``npm init` para inicializar un nuevo package y crear el proyecto de node en esa carpeta. 18 | Te dejo una lista pequeña de comandos (y el orden) que deberías que deberas hacer en la terminal, que van a ser necesarias en el proyecto 19 | 20 | ### Comandos para backend 21 | 22 | ``` 23 | npm init 24 | npm install express cors dotenv morgan nodemon 25 | npm install pg sequelize (si vas a utilizar PostgrsSQL o una SQL) 26 | npm install mongodb mongoose (si van a utilizar MongoDB) 27 | npm install axios (por si hacen pedidos a otra api) 28 | ``` 29 | 30 | ## Iniciar Frontend 31 | 32 | Para el frontend, hay dos sugerencias si van a utilizar React. 33 | Opcion 1, utilizar el **create react app**, o utilizar **vite** (Pueden utilizar cualquier otra libreria de frontend) 34 | 35 | ### Con CRA 36 | Desde la terminal, se ubican sobre la carpeta del proyecto y ejecutan los siguientes comandos 37 | ``` 38 | npx create-react-app client (esto creará la carpeta client y los archivos iniciales de React) 39 | cd client 40 | npm install 41 | ``` 42 | Finalizado este primer paso, ahora pueden instalar dependencias. 43 | 44 | ### Con Vite 45 | Desde la termnal, se ubican sobre la carpeta del proyecto y ejecutan los siguientes comandos 46 | (sugiero leer la documentacion de [vite](https://vitejs.dev/guide/)) 47 | ``` 48 | npm create vite@latest client -- --template react 49 | cd client 50 | npm install 51 | ``` 52 | Finalizado este primer paso, ahora pueden instalar dependencias 53 | 54 | Algunas dependencias que les serán utilez serán `Axios` y `React Router Dom`. Ya, el resto, dependerá de ustedes 55 | 56 | # Boiler carpetas 57 | 58 | ``` 59 | 📁proyecto 60 | 📁api 61 | 📁client 62 | 📜.gitignore 63 | ℹ README.md 64 | ``` 65 | 66 | ## Backend Boiler 67 | 68 | ``` 69 | 📁api (carpeta del backend) 70 | 📁node-modules 71 | 📁src 72 | 📁controllers 73 | 📁xxx-controller (Controladores de la rutas de xxx. Se puede modularizar aún más) 74 | 📜delete-xxx-controller.js 75 | 📜get-xxx-controler.js 76 | 📜put-xxx-controler.js 77 | 📜post-xxx-controler.js 78 | 📁yyy-controller 79 | 📁... 80 | 📁routes (solo colocaran las rutas. la logica va en los controlers) 81 | 📜index.js (aquí irán las rutas generales, con route.use) 82 | 📜route-xxx.js (aqui van las rutas get/post/put/delete correspondientes) 83 | 📜route-yyy.js 84 | 📜... 85 | 📁models (modelos de la base de datos) 86 | 📜xxx-model.js 87 | 📜yyy-model.js 88 | 📜... 89 | 📁helpers/utils (funciones útiles) 90 | 📜Auth.js 91 | 📜routeProtection.js (jwt) 92 | 📁mails (Si utilizan nodemailer para respuestas) 93 | 📜mail-1.html 94 | 📜mail-2.html 95 | 📜... 96 | 📁api-calls (pedidos a una API externa, si es que la necesitan) 97 | 📜api-a.js (haces el pedido de información y recomiendo guardar en tu base de datos) 98 | 📜api-b.js 99 | 📜... 100 | 📜db.js 101 | 📜app.js 102 | 📜index.js 103 | ⚙ .env 104 | 📜.env.example (Este archivo es para las variables de entorno para todos sean las mismas) 105 | 📜package-lock.json 106 | 📜package.json 107 | ``` 108 | ## Frontend CRA boiler 109 | ``` 110 | 📁client (carpeta del frontend) 111 | 📁public (esto la crea solo CRA) 112 | 📁src 113 | 📁components (solo componentes, ninguna pagina entera. solo componentes) 114 | 📁component-a 115 | 📜component-a.jsx 116 | 📜component-a.css (este archivo deciden ustedes que tipo de css utilizaran) 117 | 📁component-b 118 | 📜component-b.jsx 119 | 📜component-b.css 120 | 📁... 121 | 📁pages 122 | 📁landing 123 | 📜landing.jsx 124 | 📜landing.css (este archivo deciden ustedes que tipo de css utilizaran) 125 | 📁page-a 126 | 📜page-a.jsx 127 | 📜page-a.css 128 | 📁... 129 | 📁utils/helpers (Divide y venceras) 130 | 📜auth.js 131 | 📜passport.js 132 | 📜... 133 | 📁icons (por si tienen iconos aquí) 134 | 📁api-calls 135 | 📁xxx-call 136 | 📜xxx-get.js 137 | 📜xxx-put.js 138 | 📜... 139 | 📁yyy-call 140 | 📜yyy.get.js 141 | 📜yyy.put.js 142 | 📜... 143 | 📁... 144 | 📁redux (el interior dependerá de si usar o no redux-toolkit) 145 | 📜App.js 146 | 📜App.css 147 | 📜index.js 148 | 📜index.css 149 | 📜package.json 150 | 📜package-lock.json 151 | ⚙ .env 152 | 📜.env.example 153 | ``` 154 | ## Frontend Vite boiler 155 | ``` 156 | 📁client (carpeta del frontend) 157 | 📁public (esto la crea Vite) 158 | 📜vite.svg 159 | 📁src 160 | 📁assets (esto lo crea Vite) 161 | 📁components (solo componentes, ninguna pagina entera. solo componentes) 162 | 📁component-a 163 | 📜component-a.jsx 164 | 📜component-a.css (este archivo deciden ustedes que tipo de css utilizaran) 165 | 📁component-b 166 | 📜component-b.jsx 167 | 📜component-b.css 168 | 📁... 169 | 📁pages 170 | 📁landing 171 | 📜landing.jsx 172 | 📜landing.css (este archivo deciden ustedes que tipo de css utilizaran) 173 | 📁page-a 174 | 📜page-a.jsx 175 | 📜page-a.css 176 | 📁... 177 | 📁utils/helpers (Divide y venceras) 178 | 📜auth.js 179 | 📜passport.js 180 | 📜... 181 | 📁icons (por si tienen iconos aquí) 182 | 📁api-calls 183 | 📁xxx-call 184 | 📜xxx-get.js 185 | 📜xxx-put.js 186 | 📜... 187 | 📁yyy-call 188 | 📜yyy.get.js 189 | 📜yyy.put.js 190 | 📜... 191 | 📁... 192 | 📁redux (el interior dependerá de si usar o no redux-toolkit) 193 | 📜App.css 194 | 📜App.jsx 195 | 📜index.css 196 | 📜main.jsx 197 | 📜index.html 198 | 📜package.json 199 | 📜package-lock.json 200 | ⚙ .env 201 | 📜.env.example 202 | ⚙ vite.config 203 | ``` -------------------------------------------------------------------------------- /github/README.md: -------------------------------------------------------------------------------- 1 | (si descargaste esto, te recomiendo que lo abras con el preview de VSCode) 2 | 3 | >Si este repo les resultó útil, les agradecería que le den una estrellita ⭐ y que lo compartan a quienes creen que les sería util. 4 | 5 | # JALU-GUIA DE GITHUB PARA UN PF ORDENADO 6 | 7 | Hola! Este md es una guía practica para las configuraciones rapidas y simples de github junto a comandos, para poder hacer el pf en herny y muchos de estos comandos los utilizaras en el futuro en tu trabajo. 8 | REITERO, ES UNA GUIA SIMPLE, SE PUEDEN HACER COSAS MAS COMPLEJAS Y TAMBIEN ELEVAR EL NIVEL DE SEGURIDAD. PERO POR AHORA, VAMOS A LOS SIMPLE. 9 | 10 | - [Índice](#jalu-guia-de-github-para-un-pf-ordenado "Indice") 11 | - [Hagamos el repo](#crear-el-repositorio "Vamos a armar el repo y empezarlo") 12 | - [Añadamos gente](#añadir-miembros-colaboradores-al-repositorio "Vamos que esto se hace en equipo!") 13 | - [Echamos raices seguras](#crear-ramas-y-protegerlas "Vamos con cuidado") 14 | - [Creamos ramas](#crear-rama "La semillita para la planta") 15 | - [Las protegemos](#proteger-rama "Vamos a cuidar nuestro arbolito") 16 | - [Nos vamos por las ramas](#moverse-por-las-ramas-y-definir-carpetas "Por las ramas, pero enfocados") 17 | - [Comandos Git](#comando-de-git "Revisable en otros archivos") 18 | - [El primer Pull request](#pull-request "El primero va sin cuidado") 19 | - [Hora de trabajar](#hora-de-trabajar "Manos a la obra... o al teclado") 20 | - [La santa comand-blia](#biblia-de-comandos-para-trabajar "Linus te salve github, lleno eres de comandos, bendito tu eres entre todas las ramas y bendito el proyecto de tu mente, git...") 21 | - [**Antes** de trabajar](#lo-pasos-que-debemos-hacer-antes-de-empezar-a-trabajar "ANTES DE TRABAJAR, ANTES!!!") 22 | - [**Despues** de trabajar](#los-pasos-que-debemos-hacer-despues-de-terminar-de-trabajar "APENAS TERMINAN DE TRABAJAR, DE MODIFICAR LO QUE SE PROPUSIERON. COMMITS CHIQUITOS PLIS") 23 | - [Mezclamos ramas desde github](#mezclar-rama "Me tiembla todo en los mergeos") 24 | - [Final del README](#felicitaciones-sigan-trabajando "Fin de la guia básica") 25 | 26 | ## Crear el repositorio 27 | 28 | --- 29 | 30 | >_Uno de lo miembros del grupo deberá crear el repositorio de _github_ en donde estará alojado el repositorio._ 31 | 32 | Entra a github.com y, al lado del menu de su usuario (donde aparece su foto en un pequeño circulo) tienen un simbolo **"+"** al clickear, ven la opcion de __"new repository"__ el cual los dirije directamente para crear un nuevo repositorio. Le dan un nombre al repositorio. Les recomiendo fuertemente que le den el nombre que va a tener su proyecto, y no "PF-Henry-XX". 33 | Luego conservan la selección de que sea "public" y **no** añadan ni README file ni .gitignore aun. Esto es para que github les permita les de los pasos para hacer la clonacion y preparar el repositorio. 34 | Una vez dado el nombre, le dan a la opcion de "create repositoy" y luego, el dueño del respositorio sigue los pasos indicados para crear el repositorio. Y si, hacer todos los pasos de la primer opcion, desde el comando `echo "# XXX" >> README.md` hasta el ultimo comando `git push -u origin main` 35 | 36 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 37 | 38 | ## Añadir miembros _colaboradores_ al repositorio 39 | 40 | --- 41 | 42 | >_Es hora de añadir al equipo de trabajo al repo._ 43 | 44 | Una vez creado el repo con el nombre del proyecto, deberá dar acceso a modificaciones a sus otros compañeros, para ello, el creador del repo debe ir a la seccion `settings` (o configuración), y a la opcion "collaborators" o "colaboradores". 45 | Tendran a la vista, un boton verde en el que se lee "Add people", al hacerle click, les aparecerá un modal en el cual les pide el ***nombre de usuario, el nombre completo o el email*** de las personas que seran colaboradores del proyecto. 46 | En este momento, piden los usuarios de el equipo, y añaden a los colaboradores. 47 | 48 | >A los colaboradores les llegara un mail de invitacion para acceder a modificar el repo 49 | 50 | Una vez finalizado este paso, es hora de crear las protecciones y las ramas 51 | 52 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 53 | 54 | ## Crear Ramas y Protegerlas 55 | 56 | --- 57 | 58 | >_Un buen control sobre las ramas permitira que haya paz en el equipo._ 59 | 60 | Ya el repositorio esta creado y estan añadidos todos los colaboradores. Si seguiste correctamente los pasos anteriores, tu repositorio debería estar ubicado sobre una rama llamada `main` y ya no debería existir una rama llamada `master`. 61 | >Si aun tienes una rama llamada master, te recomiendo que hagas los pasos que te indica github para subir un repo ( es decir, la parte de comandos que van desde `echo...` hasta el `git push...`) 62 | 63 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 64 | 65 | ### **Crear Rama** 66 | 67 | Bien, existen 2 maneras de crear ramas, por `comandos` y a traves de la pagina de `github` en el mismo repo. 68 | 69 | >Opcion 1: `Github` 70 | >>+ Hay una barra que dice `<> Code` `⊙ Issues` ... En esta barra, le das a code (si es que no estas en ella ya) y le das a donde dice `branch`, que esta pegadito al lado del cuadrado más claro que dice `main` 71 | >>+ Una vez adentro, vas a ver la opcion `New Branch` en un cuadrado verde y le haras click. 72 | >>+ Tras hacerle click aparecerá un modal con un espacio tipo input donde colocar el nombre de la nueva rama. Podran observar que, por encima de ese espacio dice `Branch name`, que significa, nombre de la rama. 73 | >>+ El nombre de la rama deberá ser `dev` (pueden ponerle _development, developer, desarrollo_ o el nombre que ustedes prefieran que tenga que ver con desarrollo, porque en esta rama trabajaran, y deployaran sobre main mas adelante) 74 | >>+ Le dan a la opcion `Create Branch` y *Voilà* lista la rama 75 | 76 | >Opcion 2: `comandos` 77 | >+ En la consola de VSCode, (o la que utilicen), desde la carpeta donde tienen el repositorio van a hacer los siguientes comandos 78 | > 79 | > git branch dev 80 | > git push -u origin dev 81 | > 82 | >+ Si vuelves a tu github, podras ver, selecionando donde dice `main`, que la rama ya está creada 83 | 84 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 85 | 86 | ### **Proteger Rama** 87 | 88 | Ahora, ve nuevamente a la opcion ` ⚙ Settings` y podras ver que en la barra lateral, hay una opcion que dice `Branches` (o _Ramas_). Ve a esa opcion y aqui haremos la proteccion de ramas y tambien cambiaremos cual es la rama default del proyecto (para hacer las cosas más faciles) 89 | 90 | >+ Vamos a cambiar la rama por defecto 91 | >>1. Al final del recuadro donde dice `main` deberías tener un icono con dos flechas, una apuntando hacia la derecha y otra a la izquierda ⇆ (algo asi). Hazle click 92 | >>2. Te aparecera un pequeño modal que te permitira cambiar las ramas. Cliquea donde dice `main`, y selecciona la rama `dev`. 93 | >>3. Le das al recuadro que dice `update` y luego al recuadro de `I understand, update...` 94 | >+ Veras que `main` cambio a `dev` 95 | 96 | Vamos a proteger las ramas `main` y `dev`. 97 | A lo que se refiere proteger las ramas, es que esas ramas no puedan ser sobreescritas en el repositorio, hasta no tener los permisos y autorizaciones de otras personas del equipo, para así no borrar el trabajo que haya hecho otro. 98 | Los siguientes son los pasos necesarios para proteger una rama (esto deben hacerlo con cada rama que quieran proteger, por separado) 99 | 100 | >1. Cliquean el boton que dice `Add rule` 101 | >2. Completan el campo obligatorio que es el nombre de la rama a proteger (`main` o `dev`) 102 | >3. Dentro de las opciones, seleccionan `Require a pull request before mergin` y veran que ya queda seleccionada la opcion __Require approvals__. 103 | >4. Debajo de la opción require approvals, veran un recuadro que dice __required number of approvals before merging__ en el cual deben definir la cantidad de personas que deben aprobar sus cambios al repo, antes de cambiarlo efectivamente. Mi recomendación es que sean 2 para `main` y 1 para `dev` 104 | >5. Van al final de la pagina y le dan al boton verde que dice `Create` 105 | 106 | Y listo, ya tienen protegidas las rutas. 107 | 108 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 109 | 110 | ## Moverse por las ramas y definir carpetas 111 | 112 | --- 113 | 114 | >_Trabajar ordenado genera y conserva amistades. Apliquemos buenas practicas y buena comunicación_ 115 | 116 | ### **Comando de Git** 117 | 118 | Mi mas sincera recomendación, echenle un vistazo al archivo [folder-boiler-1.md](../boilerplates/folder-boiler-1.md "este lo recomiendo") y [folder-boiler-2.md](../boilerplates/folder-boiler-2.md "este tambien lo recomiendo") son dos estructuras de carpetas que a mi consideración son optimas y buenas practicas. Pueden elegír cualquiera de las dos o ninguna ya que consideran que es mejor otra estructura. 119 | Una vez que ***ELIGIERON*** la estructura general del carpetas _(es decir, decidieron por una opción, pero todavia no la construyeron)_, uno de los integrantes del grupo (preferentemente quien armó el repo) va a ir a su consola de VSCode donde hizo el repo, y va a escribir los siguientes comandos 120 | 121 | 1. git checkout dev 122 | 2. git pull origin dev 123 | 3. git checkout -b boiler 124 | 4. git push -u origin boiler 125 | 126 | >***(Podran encontrar un archivo llamado [diccionario.md](../comandos/diccionario.md "ediciones Jalu") en el que explico que hace cada comando, bastante por encima)*** 127 | >>_En resumen, lo que hiciste fue moverte a otra rama (llamada boiler, en este caso) para no trabajar sobre dev, y pusiste la rama en el repo_ 128 | 129 | Luego de hacer estos comandos, se puede comenzar a trabajar. Crearas las carpetas del boiler, instalaras dependencias necesarias, etc (npm y npx) 130 | 131 | >En los boilers les dejo un par de recomendaciones de como armarlo con los npm y npx 132 | 133 | Una vez que terminaste de trabajar, que armaste el proyecto básico, con el orden de carpetas y algun que otro archivo, toca subir las modificaciones a github. para ello, los comandos que vas a usar seran los siguientes 134 | 135 | >Podes elegir entre usar el source control o hacerlo por comandos 136 | 137 | 1. git add . 138 | 2. git commit -m "boiler" 139 | 3. git push 140 | 141 | ### **Pull Request** 142 | 143 | > _Ahora toca mezclar lo que hiciste con la rama dev, desde github_ 144 | 145 | Para ello, te vas a ir al repositorio en **Github** y haras el Pull Request de lo que subiste, hacia dev. 146 | 147 | Al entrar al repositorio, vas a encontrar un cartel en el que tiene el nombre de la rama que creaste (en nuestro caso, _boiler_) y al final, en un recuadro verde, hay un cartel que dice `Compare & Pull request`. Le harás click a ese boton, y luego te dirigira hacia otra pantalla en la cual, vas a encontrar otro cartel verde que dice `Create Pull Request`. Tambien le harás click. 148 | 149 | >_Por ahora, como eres el administrador del repo, solo tienes que hacer lo siguiente una vez_ 150 | 151 | Como estas haciendo un pull hacia dev, y anteriormente protegimos a dev, te va a aparecer un dos circulos rojos con una x, indicando que es requerida una review y que el mergeo esta bloqueado. Ya que tu creaste el repositorio, tu y solo tu tienes la posibilidad de saltearte las protecciones, seleccionando la opcion `merge without waiting for requirementes to be met`. 152 | 153 | Lo que haras será tildar esa opcion y cliquear luego el boton `Merge pull request` que te aparecerá en rojo. 154 | Mas adelante, precisamente en [mezclar rama](#mezclar-rama "Mezclar ramas como se mezcla la masa") vamos a volver al tema para hacer las cosas correctamente. 155 | Ya, finalizado lo reciente, ahora has subido las carpetas y los archivos de boiler al respositorio. 156 | 157 | >_Importante, para que las carpetas se suban, tal como puse en el boiler, las carpetas tienen que tener al menos un archivo dentro que contenga, porque sino, **no se sube la carpeta**_ 158 | 159 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 160 | 161 | ## Hora de trabajar 162 | 163 | --- 164 | 165 | >_El trabajo ordenado trae paz a la mente y al equipo, y nos permitira descanzar_ 166 | 167 | Ahora que el repositorio está subido y actualizado, todos los integrantes del grupo pueden clonar el respositorio en cada una de sus computadoras para comenzar a trabajar. 168 | Pero, antes de ponerse a trabajar hay unos pasos que es ***NECESARIO*** hacer. Deben seguir la [biblia de comandos](#biblia-de-comandos-para-trabajar "LA SANTISIMA BIBLIA") que, en este [README.md](./README.md "pos... este archivo") la pueden encontrar completa con explicaciones. En el archivo [github-commands.md](../comandos/github-commands.md "los comandos tan necesarios") tendrán la lista sin explicaciones, y en el orden que deben hacerlas. 169 | 170 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 171 | 172 | ## Biblia de comandos para trabajar 173 | 174 | --- 175 | 176 | ### Lo pasos que debemos hacer ***ANTES*** de empezar a trabajar. 177 | 178 | >| Paso | Comando | Funcionalidad | Sugerecias / Info | 179 | >|---:|:---|:---|:---| 180 | >| 1 | ``git checkout dev`` | Te posicionaras sobre la rama `dev` | `checkout` es utilizado para navegar entre las distintas ramas | 181 | >| 2 | `git pull origin dev` | Traeras los ultimos cambios que haya en la rama `dev`, que es donde deberian estar los ulimos cambios hecho por el equipo | `pull`, bien traducido del ingles es "traer/tirar", es utilizado para traer, de donde especifiques, todos los archivos que haya en esa rama o repo| 182 | >| 3 | `git checkout -b` [rama de trabajo]| "`-b`" creará la rama con el nombre que designes, y "`checkout`" te llevara hacia esa rama|*[rama de trabajo]*: sera el nombre de la rama en la que trabajaras. Ponle un nombre significativo | 183 | >| 4 | `git push -u origin` [rama de trabajo]| Sube los archivos que tengas en commit.
"`-u`" incluye la rama que creaste en el pusheo.| Siempre que crees una nueva rama, haz un push on `-u` porque eso subirá la rama. Antes que esto, la rama aún no existe en el repositorio | 184 | 185 | **Ahora es tiempo de trabajar** 186 | ***Work in progress •••*** 187 | 188 | ### Los pasos que debemos hacer ***DESPUES*** de terminar de trabajar 189 | _Existen dos formas para hacer esto. la otra forma la encuentran en el archivo [source-control.md](./source-control.md "el metodo mas sencillo de add, commit y push")_ 190 | 191 | > | Paso | Comando | Funcionalidad | Sugerecias / Info | 192 | > |---:|:---|:---|:---| 193 | > | 1 | `git add .` |Esto añadira **todos** los archivos a los cambios momentaneos que luego serán subidos. | Sugiero ir al *soruce control* para corroborar que seran comiteado solo aquellos archivos que nosotros queremos. | 194 | > | 2 | `git commit -m` "[detalle]" | Esta linea de codigo, pasara a almacenar, de forma segura, los archivos que añadiste anteriormente. Esto es guardado en tu directorio git local. | Aquí vas a guardar como una especie de "captura" de los archivos, sobre la rama en la que has trabajado.
[Aqui](./commit-message.md "Buenas practicas en los mensajes de commits") hay buenas practicas en los mensajes | 195 | > | 3 | `git checkout dev` | Te posicionaras sobre la rama `dev`. | `checkout` es utilizado para navegar entre las distintas ramas. | 196 | > | 4 | `git pull origin dev` | Traeras los ultimos cambios que haya en la rama `dev`, que es donde deberian estar los ulimos cambios hecho por el equipo. | Este paso es **ULTRA** necesario, porque si alguien trabajó y subio cambios mientras trabajabas, aquí te actualizaras. | 197 | > | 5 | `git checkout` [rama de trabajo] | Te posicionaras, nuevamente, sobre la rama en la que estuviste trabajando _(la que creaste anteriormente antes de ponerte a codear)_. | Otro paso muy necesario, porque trabajaste aquí, y tus modificaciones se encuentran en esta rama. | 198 | > | 6 | `git merge dev` | Unirá lo que tienes en la rama `dev` con la rama en la que estas posicionado | Por esto es completamente necesario el 3er y 4to paso. Actualizaras tu rama `dev` y mezclaras lo que hay con lo que hiciste. En caso de conflicto, revisar [merge-conflict.md](./merge-conflict.md "Linus quiera que no pase") | 199 | > | 7 | `git push` | Subirás la rama en la que estas posicionado al repositorio de Github, con todos los archivos modificados | Pueden poner `git push origin` [rama de trabajo] por si les da más confianza | 200 | 201 | Terminados estos pasos, es tiempo de ir a github y actualizar la rama `dev` con los cambios que has hecho mientras trabajabas, es decir vas a mezclar ramas. 202 | 203 | ### Mezclar Rama 204 | 205 | >_Oh santo github, porfavor, que no haya conflictos_ 206 | 207 | Si hicieron todo bien hasta ahora, y siguieron correctamente lo pasos, no deberian tener ningun problema para unir la rama que crearon y en la que trabajaron, con la rama `dev`. 208 | Lo que sigue es ir hacia el repositorio en Github y existen dos posibilidades. 209 | 210 | 1. Que aparezca un cartel que tiene el nombre de la rama que creaste y que al final tenga un recuadro verde que diga `Compare & pull request` 211 | 2. Que no aparezca el cartel y debas hacerlo a mano. 212 | 213 | 214 | >En el 1er caso, lo que debes hacer es lo mismo que antes. Hacerla Click a `Compare & pull request` y luego tendras un recuadro donde poder escribir texto. 215 | 216 | >En el 2do caso, deberan crear ustedes el pull request a mano. Para ello, se van a la opcion al lado de `⊙ Issues` que se llama `Pull requests` y cliquean la opción **New pull request**. 217 | >Esto mostrara ahora una barra con lo siguiente |base: dev| ⬅ |compare: dev| 218 | > en la que deberan elegír de **base** a `dev` y en **compare**, la rama donde estuvieron trabajando. 219 | > 220 | >>_**Base** hace referencia a que rama va a ir y **Compare** es la rama de donde viene_ 221 | > 222 | >Asegurado de que rama a que rama va a ir, cliquean el boton verde `create pull request` 223 | 224 | _A partir de aqui, es igual en ambos casos_ 225 | 226 | > _Recomiendo fuertemente que escriban que fueron los cambios realizados y dar una breve explicacion de los cambios en ese campo de texto_ 227 | >Tambien recomiendo que revisen de donde hacia donde se mezclan las ramas. Que diga **base:dev** y **compare:**[rama de trabajo] 228 | 229 | Les dejo una imagen para que vean a donde hacer click, y pongan el puntero, unos segundos, sobre la imagen 230 | 231 | ![pull-request 1](./Images/pull-request-1.png "el boton VERDE que dice create crete pull request") 232 | 233 | Luego de dar la breve descripcion y corroborar que tenga titulo, le dan click a `Create pull request`. 234 | A pesar de que los colaboradores recibirán un mail sobre el pull request, es mejor avisarle a uno de tus compañeros que revisen los cambios. Aquella personas que vayan a aprobar el codigo, deben revisarlo primero y luego aprobarlo. 235 | 236 | ![pull request 2](./Images/pull-request-2.png "acá necesita se revisado, porque sino, no se mergea") 237 | 238 | Una de las personas del equipo, _(cualquiera, menos quien generó el pull request)_ debe aprobar el cambio. Para ello, el colaborador ingresará al repositorio, y entrará a la opción llamada `Pull request` ubicada al costado de `⊙ Issues`. 239 | Al ingresar, podra divisar que hay una opcion con un logo en verde con el nombre del **título** que colocó el creador del **PR** 240 | Lo seleccionará y cliqueará en la opción ***"Files Changed"*** en donde podrá ver todos los cambios hechos por la persona que creo el pull request. 241 | 242 | >Recomiendo leer los cambios hechos para tener una noción e idea de que cambios hizo la otra persona, y sobre que archivos.A su vez, corroborar que tanto el nombre de variables y codigo, sigan los estandares propuestos por el grupo. 243 | 244 | ![imagen del files changes](./Images/Files-changed.png "aca tienen una imagen del files changes") 245 | 246 | Luego de revisado los archivos, deberá aprobarlos _(o rechazarlos)_. Para ello, cliqueara el boton verde `review changes` y tildará la opcion **aprove** en caso de aprobarlo, **Request Changes** en caso de rechazarlo y pedir cambios. 247 | 248 | ![review Changes](./Images/review-changes.png "Acá tienen todas las opciones") 249 | 250 | > **Request Changes** no implica que no pueda ser aprobado por otras personas, y sea finalmente unido a la rama `dev`. 251 | 252 | Una vez aprobado, en la opcion **conversation** podran observar que los circulos rojos con una X, han pasado a tener una tilde verde, y la opcion que dice "merge pull request" se ha habilitado con un color verde. 253 | Cliquean sobre ese boton verde y mergean la rama junto con `dev`. 254 | Resuelto eso, ya unieron su rama con la de `dev` 255 | 256 | [_Volver al indice_](#jalu-guia-de-github-para-un-pf-ordenado "Índice") 257 | 258 | # Felicitaciones! Sigan trabajando! 259 | 260 | Si este repo les resultó útil, les agradecería que le den una estrellita ⭐ y que lo compartan a quienes creen que les sería util. --------------------------------------------------------------------------------