Super resumen de PREWORK: Buenas Prácticas y Entorno de Desarrollo

Prework: buenas prácticas y entorno de desarrollo

Profesor: Eduardo Álvarez - Backend Developer

Ubuntu Bash en Windows

Necesario: Windows 10 con licencia.

• Paso 1: setting; Update & Security; actualizar; for developer; Habilitar developer mode.
• Paso 2: panel de control; programs; turn windows features on or off (se necesita ser admin); activar windows subsystem for linux; restar now.

Windows implementó linux; buscar en windows store “ubuntu”; se instala. Podremos usar comandos útiles para programadores.

Ubuntu es una “distro” muy usada.

Establecer username y password cuando se inicie.

curl: comando de transferencia de datos. Instalaremos node con curl:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt-get install -y nodejs

Ver versión de node y npm: node -v, npm -v.

Instalar vsc y Remote - WSL como extensión. Con esto se usa Windows pare desarrollar en Linux.

En bash entramos a Windows: cd /mnt/c.

Carpeta de usuario: cd Users.

Crear carpeta y entrar para desarrollar: mkdir my-folder, cd my-folder.

Abrir vsc en la carpeta: code ., ("." representa la carpeta actual).

Crear React App: npm create-react-app app-name; cd app-name; npm start (se abrirá al navegador).

Terminal

Es muy poderosa, rápida y sin gráficos; es amiga del programador.

No se puede editar videos o fotos, se puede abrir los programas desde allí.

Hay diferentes terminales:

• Unix: S.O del que se basan Linux y Mac.
• Windows.

Manejo, archivos y directorios

ls: lista los archivos en la posición actual.

• ls -a: lista archivos ocultos.
  • .: carpeta actual.
  • ..: padre de la carpeta.
• ls -l: lista el contenido con permisos; propietario; peso y fecha.
• ls -t: organiza por fecha de modificación.
• ls -lat: la combinación de todas las banderas.

clear: limpia la pantalla.

ctrl + l: lo mismo.

pwd: ruta absoluta.

• Ruta absoluta: desde el inicio del sistema de archivos.
• Ruta relativa: en base a nuestra ubicación.

mkdir folder-name: crear carpeta.

cd folder-name: entrar en la carpeta.

cd ..: regresamos a la carpeta padre.

cd: por sí solo nos lleva a home (~). También con: cd ~/.

history: historial de los comandos usados. A la izquierda tiene un número de ID. Para usar un comando del historial: !<número a la izquierda>; !248.

Crear, editar, mover y eliminar archivos

touch file-name.extensión: crea un archivo; touch example.txt,

nano example.txt: editor en el bash. Con ctrl + x nos salimos y guardamos.

mv example.txt <ubicación final>/example.txt: nos mueve el archivo a <ubicación final>. Se pude hacer al contrario: mv <ubicación>/example.txt ./example.txt.

rm example.txt: elimina archivo.

rm -rf <carpeta>: elimina una carpeta.

Herramientas básicas

cat <archivo>: vemos el contenido del archivo.

more <archivo>: vemos una parte del archivo. Bajamos con flecha abajo y arriba, bajamos completamente con espacio.

tail <archivo>: ultimas 10 líneas del archivo, se modifica el número; tail -número.

cat <archivo> > <nombre de la copia>: copiamos el archivo.

open <archivo>: abrimos un archivo con el programa por defecto para él.

Llave SSH

Es una forma para autenticarnos; es una firma.

• Criptografía asimétrica; se crean dos tipos de llaves:
  • Llave pública: puede compartirse.
  • Llave privada: no se comparte.
• Permite conectarnos a servidores; seguro y fácil.
  • Se usa para GitHub y producción.

ssh-keygen -t rsa -b 4096 -C "this is a key": Crea la llave:

• rsa: las iniciales de los creadores del algoritmo.
• -b 4096: número de bits a usar.
• -C "": comentario.

Se crearán dos llaves:

• id_rsa: llave privada.
  • cat id_rsa.pub: nos mostrará el contenido, nos va a permitir desencriptar los mensajes.
• id_rsa.pub: llave pública.
  • cat id_rsa.pub: nos mostrará el contenido, se usa para conectarnos a servidores.

Funcionamiento:

• La llave pública nos crea un texto plano, ese contenido nos generará un texto cifrado.
• La llave privada nos crea un texto plano que descifra el texto generado por la llave pública.

Developer Tools de Google Chrome

Con npm start iniciamos el servidor local; ctrl en la dirección para ir al navegador.

Abrimos el inspector de elementos con f12 o click derecho; inspect.

Elements nos muestra el contenido HTML.

En la parte inferior; Styles; nos muestra los estilos. Podemos modificarlos.

Console nos permite ejecutar JavaScript; console.log('mensaje') nos mostrará 'mensaje' en la consola; podemos ejecutar cualquier código JS.

Plugins de React y Redux

Instalamos React Developer Tools; nos permitirá ver los componentes de React; es una extensión; veremos el plugin en la parte superior; en el inspector veremos la pestaña React.

Instalamos Redux DevTools; nos permitirá ver el árbol de store de nuestra aplicación Redux; en el inspector tendremos la pestaña de Redux.

Herramientas para Backend: JSON Viewer y Postman

Nos servirá para ver los json que nos da el servidor.

Instalamos JSON Viewer; es un plugin que nos mejorará la vista del json en chrome.

Postman se instala en el PC; nos permite hacer peticiones al servidor de forma más amigable; es multi-plataforma; nos permite crear y pedir datos. Le pasamos la URL de la API y la consumismo con GET, POST, PUT, DELETE…

Git

Es un sistema de control de versiones; no es el único; lo creó Linus Tolvalds el que creo linux; Github es una red social de programadores; no son lo mismo.

Repositorio

Una estructura de datos que almacena información; es el inicio de nuestro proyecto; allí mantendremos nuestro proyecto.

Rama

La duplicación de un objeto bajo un repositorio; nos permite trabajar en equipo; se puede crear copias del mismo repositorio y luego se unen.

Github

Una red social; es más que eso; nos permite: prueba; integraciones; deploy automático.

Instalación

En windows se instala descargando el instalador de su página oficial; se configura con git config --global user.name "nombre" y git config --global user.email "example@email.com".

Crear repositorio, commit, reset y log

Creamos repositorio con git init; se crea un repositorio vacío; la terminal nos marca (master); el asterisco significa que hay cambios; se guarda todo en .git.

El commit nos guarda el cambio y nos los asegura; hay cuatro estados principales:

• Sin seguimiento
• Sin cambios
• Con cambios
• En staging

Agregamos los archivos para hacer commit con git add <archivo>; con git status vemos los cambios; hacemos el commit con git commit -m ""; es necesario el -m para colocar un mensaje.

Para ver todos los logs git log; muestra el id del commit; el auto y la fecha. Funciona como man y se sale con q.

Con git checkout -- <file> ignoramos los cambios que hagamos.

Con git reset --soft <id de commit> regresamos a ese commit sin eliminar el ultimo commit; con git reset --hard <id de commit> regresamos a ese commit e ignoramos los últimos commits.

Ramas, rebase y merge

Conceptos para trabajar en equipo.

Rama: es una duplicación, creamos una rama o bifurcación de la rama master o principal; con git checkout -b develop creamos una rama llamada develop; tiene el mismo contenido que la rama master; son dos trabajos que se llevan en paralelo, al final se crea un merge o se unen con la rama master.

Rebase: funciona igual; la rama que se bifurcó sigue existiendo a diferencia del merge que la elimina.

git checkout -b <name> crea una rama; con git branch nos muestra las ramas: con git checkout <rama> nos cambiamos a esa rama.

Para hacer rebase nos pasamos a la rama master; ejecutamos git rebase <rama> colocando el nombre de la rama de la cual queremos traer los cambios.

Podemos hacer lo mismo con merge; git merge <rama> con el nombre de la rama que queremos unir con la master.

Con git add . agregamos todos los archivos del directorio.

Configuración de la cuenta de Github

Tenemos que agregar nuestra llave SSH para hacer deploy; en settings; SSH and GPG keys; agregamos nuestra llave:

cd ~/.ssh
cat id_rsa.pub

Copiamos el contenido; lo copiamos en github.

En el signo de más; new repository; colocamos el nombre del repositorio; descripción; elegimos público o privado; inicializamos un readme.md; una licencia y el .gitignored.

En clone or dowload; podemos usar la llave SSH para clonar; copiamos la dirección; en la terminal usamos clone <lo que copiamos> esto lo hacemos en la carpeta que queramos; así copiamos el repo.

Abrimos vscode con code .; editamos cualquier archivo; guardamos; en vscode a la izquierda podemos añadir el cambio; escribimos el mensaje; lo agregamos.

Podemos traer cambios y llevarlos a github; con git pull traemos cambios; con git push llevamos cambios.

En github podemos ver los commits hechos; se pueden ver las diferencias en los commits.

Ejemplos de sintaxis

Saltos de línea: Los saltos de línea se generan cuando se encuentran dos espacios juntos

"Quien fue a Santiago,  
perdió su clase de redes"

Encabezados: Los encabezados se generan cuando se encuentra una almohadilla antes de texto

# Encabezado h1 
## Encabezado h2
### Encabezado h3
#### Encabezado h4
##### Encabezado h5
###### Encabezado h6

Citas: Para citar solo es necesario escribir una cuña antes del texto

> La vida es muy corta para aprender Alemán. -Tad Marburg

Texto con énfasis: Agregar un asterisco para cursiva y dos para negrita

*énfasis* (cursiva)

**énfasis fuerte** (negrita)

Código: Se utiliza el acento grave para identificar código, y corchetes para identificar el lenguaje de programación

`Código`
​``` [language]
Código en 
varias líneas
​```

Listas:

* Un elemento en una lista no ordenada
* Otro elemento en una lista
1. Elemento en una lista enumerada u ordenada.
2. Otro elemento

Enlaces:

[Texto del enlace aquí](URL "Título del enlace")

Imágenes:

![Texto alternativo](URL "Título de la imagen")