DEV Community: Beatriz Martínez Pérez

Notas de React Native

Beatriz Martínez Pérez — Tue, 19 Sep 2023 18:38:05 +0000

Crear proyecto

npx create-react-app miApp Crear proyecto
npm start Iniciar el proyecto en el navegador

Crear proyecto con Expo Go

npx create-expo-app miApp Comando para crear proyecto
npm start Generar el QR para iniciar el proyecto, el QR debe leerse desde la app Expo

Crear proyecto con React Native CLI

npx react-native init miApp Crear proyecto
npx react-native start Iniciar Metro para correr el proyecto
npx react-native run-android Iniciar proyecto en Android
npx react-native run-ios Iniciar proyecto en iOS
npx react-native log-ios Acceder a los logs de iOS
npx react-native log-android Acceder a los logs de Android

Comandos útiles

adb devices Para ver los dispositivos conectados en donde podemos trabajar
xcrun simctl list devices Lista los dispositivos iOS que podemos usar

Agregar ESLint

npm i eslint --save-dev Instalar ESLint para ayudarnos con problemas de sintaxis
npm i @react-native-community/eslint-config --save-dev Instalar ESLint de la comunidad
npm i --save-dev --save-exact prettier Instalar Prettier para formatear el código, hay que crear .prettierrc.js y ahi agregar las reglas

Acceder al menú de debug

En un dispositivo físico se puede agitar el dispositivo para acceder al menú.
Para un emulador en iOS, es con command+d
Para un emulador en Android, es con command+m o control+m

Archivos

Para crear archivos, hay que agregar la extensión .tsx
index.tsx Es el punto de entrada de la aplicación
tsconfig.json Están las reglas de como queremos que trabaje TypeScript

Tipado

let variable: string; Agregar una variable con un tipo string
let variable: string = ‘Ejemplo’; Asignar un valor a la variable
let variable: string | number = 123; La variable puede tomar un tipo string o un tipo number para su valor

Elementos

SafeAreaView Contenedor que inicia la vista bajo la barra de estado
View Contenedor que no puede ser scrolleado, equivalente al ‘div’ en HTML
Text Contenedor de texto
StatusBar Permite hacer modificaciones en el status bar, como cambiar el color de fondo, ocultarlo, estilo, etc.
ActivityIndicator Permite poner el circulo de ‘cargando’ <ActivityIndicator color=“red” size={20}/>
FlatList Permite crear listas

Estilos

Estilos en línea

<View style={{backgroundColor: ‘pink’}}> Darle al View un background rosa

Estilos con condiciones

Para agregar un estilo u otro dependiendo de si una condición se cumple:

style={(condicion) 
? styles.condicionVerdadera
: styles.condicionFalsa}

StyleSheet

Debe importarse StyleSheet de la API de React Native y crear un objeto antes de exportar el componente, se crea de la siguiente manera:

const styles = StyleSheet.create({
    container: {
        backgroundColor: ‘pink’
    }
})

.
<View style={styles.container}> Para agregarle los estilos a un elemento
<View style={[styles.container, styles.bgBlack]}> Agregar varios estilos

Diseño

Box object model Se refiere al alto, ancho, margen, padding y borde
Position Puede ser absoluta, relativa, etc.
Flex box Habla de la dirección, ubicación, alineamiento, proporciones, etc.

Estilos en otro archivo

Podemos crear nuestro archivo de estilos:

import { StyleSheet } from "react-native";

const styles = StyleSheet.create({…});

export default styles;

Y usarlos normalmente en el archivo donde lo necesitemos, sin olvidar importarlo:

const App = () => {
  return (
    <SafeAreaView style={ styles.container }>…</SafeAreaView>
  )
}

Interfaz

Sirven para poner reglas de validación a nuestros objetos.

interface Persona {
nombre: string,
edad: number,
direccion: {
        pais: string,
        estado: string;
    }
}

La parte de ‘dirección’ puede extraerse en una nueva interfaz.
let persona1: Persona; Se crea una variable que es del tipo ‘Persona’ de la interfaz creada.

Props

Son datos que llegan como parámetros en la función.
const App = (props: Props) => {…}
Si de antemano sabemos cuáles serán las propiedades que vamos a recibir, podemos desestructurarlo y elegir solo las propiedades que necesitamos:
const App = ({prop1, prop2}: Props) => {…}

Context y estado global de la App

Proporciona una forma de compartir datos entre componentes sin tener que pasar props a través de la jerarquía de componentes manualmente.
El context es como nuestro árbol de componentes.

Ejemplo básico
Aquí vamos a guardar la información del authState en la app para ser accedido por los hijos globalmente.

import { createContext } from "react";

// Define hoy will look like the general data
export interface AuthState {
    isLoggedIn: boolean;
    username?: string;
}

// Define which properties will be shared to the children, in case we don't want to
// add all of AuthState or we want to add more
export interface AuthContextProps {
    authState: AuthState,
    signIn: () => void;
}

// Initial state
export const authInitialState: AuthState = {
    isLoggedIn: false,
    username: undefined,
}

// Create context, it has the data that will be shared in all children components
export const AuthContext = createContext({} as AuthContextProps);

// State provider component
export const AuthProvider = ({children}: any) => {
    const [authState, dispatch] = useReducer(authReducer, authInitialState)

    const signIn = () => {
        dispatch({type: 'signIn'})
    }

    return (
        <AuthContext.Provider value={{
            authState,
            signIn
        }}>
            {children}
        </AuthContext.Provider>
    );
}

Podemos envolver App en una función que tenga el AuthProvider para que los elementos hijos tengan acceso a la información del AuthProvider:

const App = () => {
  return (
    <NavigationContainer>
      <AppState>
        <TabsNavigator />
      </AppState>
    </NavigationContainer>
  )
}

const AppState = ({children}: any) => {
  return (
    <AuthProvider>
      {children}
    </AuthProvider>
  )
}

Si queremos ejecutar un método de los definidos:

const {authState, signIn} = useContext(AuthContext);
<Text>
{JSON.stringify(authState, null, 4)}
</Text>
{authState.isLoggedIn && <Button title='Sign in' onPress={signIn} />}

Y hay que manejar el método en el authReducer, el payload funciona para mandar más información a la acción:

import { AuthState } from "./AuthContext";

type AuthAction = 
    { type: 'signIn' } |
    { type: 'logout', payload: string };

// Generates a new state
export const authReducer = (state:AuthState, action: AuthAction):AuthState => {
    switch (action.type) {
        case 'signIn':
            return {
                ...state,
                isLoggedIn: true,
                username: 'no-username'
            }
        default:
            return state;
    }
}

Imprimir los datos
Desde alguno de los componentes hijos podemos usar el hook de useContext:
const {authState} = useContext(AuthContext);
E imprimir su valor
<Text>{JSON.stringify(authState, null, 4)}</Text>

Funciones

const operacion = () => {…} Declarar una función
const operacion = (): number => {…} Declarar una función que retorna un dato de tipo number
const operacion = (a: string): number => {…} Declarar una función que retorna un dato de tipo number y recibe un parámetro ‘a’ de tipo string
let resultado = operacion(“hola”); Llamar a la función

Carpetas

Hay que crear una carpeta ‘src’ en la raíz del proyecto en donde hay que agregar el código/carpetas que necesitemos. Dentro de esa carpeta, podemos agregar las siguientes carpetas:

API: Para almacenar lo referente a peticiones
Assets: Guarda imágenes, videos, audios, etc.
Components: Almacenar archivos necesarios para hooks, API, etc.
Hooks: Aquí se guardan los hooks personalizados.
Interfaces: Para archivos que muestran el tipado.
Navigation: Contiene los archivos necesarios para la navegación. - Screens: Para almacenar las vistas del proyecto.
Theme: Almacena los estilos globales y sus configuraciones.

Componentes

Podemos crear un archivo llamado Navbar.tsx y ahi crear la vista para un navbar, para utilizarlo en el archivo App.tsx hay que agregar su etiqueta e importar el archivo:
<Navbar />
A esos componentes podemos enviarles props:
<Navbar title=“Hola” />
Pero en el archivo Navbar.tsx tambien hay que definir cuales propiedades van a llegar:
const Navbar = (props: String) => {…} o const Navbar = ({title}: String) => {…}
const Navbar = ({title?}: String) => {…} Para agregar propiedades opcionales se agrega un ‘?’
const Navbar = ({title? = ‘Hola’}: String) => {…} Se le da un valor por defecto a la propiedad, para en caso de que no reciba nada

Hooks

useState

const [valor, setValor] = useState(0); Crear una variable de tipo number con valor inicial de 0
setValor(10); Cambiamos el valor de ‘valor’ a 10

useReducer

const [state, dispatch] = useReducer[reducer, initialState, init]; Esta es la forma inicial que tiene un useReducer
Si queremos usar este hook para verificar si un usuario inició sesión, podemos agregar:

interface AuthState { token: string | null };
type AuthAction = { type: ‘logout’} | { type: ‘login’ };
const initialState:AuthState = {token: null};
const authReducer = (state: AuthState, action: AuthAction):AuthState => {
    if(action.type == ‘logout’) {
        return { token: null }
    } else {
        return { token: ’123abc’ }
    }
}
export const Login = () => {
    const [state, dispatch] = useReducer(authReducer, initialState];
    useEffect(() => {
        dispatch({type: ‘logout’});
    }, []); 
    const login = () => {
        dispatch({type: ‘login’});
    }
    const logout = () => {
        dispatch({type: ‘logout’});
    }
}

El initialState nos dice el estado inicial del valor.
El reducer siempre debe retornar un dato del mismo tipo del initialState, para lo que podemos crear una interfaz con los datos necesarios, además, recibe dos parámetros, un state para el valor del estado y un action que modifica el valor del state.
También tenemos un dispatch, el cual es el método disparador de la acción para cambiar el state, están envueltos en una función, esa función se la podemos agregar a un botón o un elemento donde lo necesitemos.

useEffect

Ejecuta el código en el momento en el que se carga el código en nuestra aplicación

useEffect(() => {
    console.log(“Hola”);
}, []}

useNavigation

Sirve para recibir las props en la navegación desde un hook:

const navigator = useNavigation()
…
<Button title=‘Ir’ onPress={ () => navigator.navigate(‘Pagina’)} />

useWindowDimensions

const { width, height } = useWindowDimensions(); Permite obtener las dimensiones de la pantalla

useColorScheme

const colorScheme = useColorScheme(); Devuelve el tema que esta usando el dispositivo (light, dark…)

useSafeAreaInsets

Ayuda a trabajar como un SafeAreaView pero más personalizado. Por ejemplo aquí nos ayuda a agregar un margen superior del tamaño necesario para que se vea el contenido. Pero solo en los celulares donde sea necesario.

const insets = useSafeAreaInsets();
return (
    <View style={.{ marginTop: insets.top }.}>
    …
)

Hook personalizado

Para crear un archivo para almacenar un hook, hay que agregar ‘use’ al principio useHook.tsx.
En ese archivo hay que agregar la lógica relacionada al hook, como crear las variables y los métodos, suponiendo que tenemos ‘valor’ y ‘setValor’ en nuestro nuevo hook, hay que retornarlo:

export const useHook = () => { 
    const [valor, setValor] = useState(0); 
}
return { valor, setValor };

.
const { valor, setValor } = useHook(); Importar ese hook en otro archivo para usarlo

Recibir parámetros

export const useHook = (valorInicial: number = 10) => { 
    const [valor, setValor] = useState(0); 
}
return { valor, setValor };

La función necesita un parámetro ‘valorInicial’ de tipo number el cual no es obligatorio, tomará el valor de 10 si no se le envía ningún parámetro
const { valor, setValor } = useHook(5); Se le envía un valor como parámetro

Peticiones HTTP con Axios

npm i axios Instalar axios
export const api = axios.create({ baseURL: ‘https://url.delapi/api}); Generar la conexión con la API para usarla más adelante

useEffect(() => {
api.get(‘/endpoint’)
    .then(res => {
        console.log(res.data);
    })
    .catch(console.error);
}, []);

Ejecutamos la llamada a la API en nuestro archivo, desde el useEffect e imprimimos la información necesaria
api.get<String>(‘/endpoint’) Podemos decirle el tipo de dato que esperamos, en este caso, un dato de tipo string, o podemos crear una interfaz personalizada

Formularios

Podemos tener una variable para el formulario, con useState para guardar el valor cuando cambie.
La función onChange es la que se encarga de guardar el valor en la variable, heredando lo que ya se tenia, para no perder los datos.

const [formulario, setFormulario] = useState({
    email: ‘ejemplo@test.com’,
    password: ‘123’
});
const onChange = (value: string, campo:string) => {
    setFormulario({
        …formulario,
        [campo]: value
    });
}
…
<input 
    type=“text” 
    placeholder=“Email”
    value={ formulario.email }
    onChange = { ({ target }) => onChange(target.value, ‘email’) } />

Navegación

Stack Navigation

Funciona como una pila, en donde las pantallas se van poniendo una sobre otra, pero las pantallas siempre están activas.

Instalaciones
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

En App
Hay que crear un NavigationContainer con un elemento Stack.Navigator, el cual es personalizado en este ejemplo:

const App = () => {
  return (
    <NavigationContainer>
        <StackNavigator />
    </NavigationContainer>
  )
}

Y en StackNavigator.tsx agregamos las pantallas que van a usarse

export const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="BoxObjectMrodel" component={BoxObjectModel} />
      <Stack.Screen name="Calculator" component={Calculator} />
      <Stack.Screen name="Counter" component={Counter} />
      <Stack.Screen name="Dimentions" component={Dimentions} />
      <Stack.Screen name="HelloWorld" component={HelloWorld} />
      <Stack.Screen name="Position" component={Position} />
    </Stack.Navigator>
  );
}

Agregar un botón para ir a otra pantalla
Hay que crear una interfaz para obtener las propiedades que pueden enviarse, además de tener las propiedades de la navegación, para poder navegar entre pantallas.

import type { NativeStackScreenProps } from '@react-navigation/native-stack';

interface Props extends NativeStackScreenProps<any, any> {}

const MenuStackNavigator = ({navigation}: Props) => {
  return (
    <View>
        <Button
            title='Ir a’
            onPress={() => {navigation.navigate(‘Pantalla’)}} />
    </View>
  )
}

Métodos de navigation
const MiPagina = ({navigation}:any) => { <Button onPress={() => navigation.*método*}}
Una vez que tenemos nuestro botón de ese modo, podemos agregar ciertos métodos:
navigation.pop() Sirve para volver al elemento anterior en el Stack
navigation.popToTop() Para ir al primer elemento del stack

Propiedades del Stack.Navigator

<Stack.Navigator *Propiedades*>
        <Stack.Screen name="Menu" component={MenuStackNavigator} /> 
</Stack.Navigator>

.
initialRouteName=“Pagina2” Define que pantalla será la primera en el stack
screenOptions={{cardStyle: {
headerShown: false Mostrar el título de la pantalla en donde se encuentra o no
backgroundColor: ‘white’ Define el color que tendrá la vista (el contenido)
}, headerStyle: {
elevation: 0 Elimina la línea divisoria entre el título y el contenido (android)
shadowColor: ‘transparent’ Hace la línea divisoria de color transparente
}}}

Propiedades del Stack.Screen

<Stack.Navigator>
        <Stack.Screen name="Menu" component={MenuStackNavigator} *Propiedades*/>
</Stack.Navigator>

.
options={{title:”Titulo 1”}} Para cambiar el título de la página

Sobreescribir propiedades
Para sobreescribir el título del componente podemos usar un hook para agregar las propiedades necesarias:

useEffect(() => {
    navigator.setOptions({ 
        title: ‘Nuevo titulo’
        headerBackTitle: ‘Atras’ //Para el texto iOS que aparece en la flecha de ir atrás
    })
}, [])

Enviar argumentos entre pantallas
En el botón hay que agregar los argumentos después de poner a que pantalla queremos ir, puede ser una variable, un objeto, o algún elemento

<Button
    title='Ir a’
    onPress={() => {navigation.navigate(‘Pantalla’, argumentos)}} />

Para recibir los parámetros que enviamos podemos imprimirlo en consola:
console.log(JSON.stringify(props, null, 3));
Las props vienen en los parámetros de la función principal.
La mejor práctica para enviar parámetros se puede encontrar en la página del Navigator.

Drawer Navigation

Es la pantalla que se desliza desde un lado de la pantalla, como un menu lateral.

Instalaciones
npm install @react-navigation/drawer

Ejemplo básico
El drawer va a generar un menú lateral con los elementos que le agreguemos en Drawer.Screen, aparece al arrastrar el dedo de izquierda a derecha en la pantalla.

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

Personalizar el drawer
<Drawer.Navigator
drawerPosition=‘right’ El drawer aparece del lado derecho
drawerType=‘front’|’permanent’ Para elegir si queremos que por defecto el menú este oculto o no. Podemos usarlo para agregarlo dependiendo de si el celular esta en modo portrait o landscape agregando una condición ternaria: drawerType={condición}.
drawerContent={(props) => <ContenidoInterno />} Sirve para poder agregar contenido al drawer, como imágenes, vistas, etc. Hay que agregar los enlaces a otras secciones nuevamente con un TouchableOpacity/Button, etc
>.
<Drawer.Screen options={{title’:Home’}} … /> Cambia el nombre que se verá en la pantalla

Agregar icono de hamburguesa
El ícono se coloca en las opciones de navegación y se agrega solo cuando inició la aplicación, por lo que podemos agregar un useEffect. Además hay que cambiar el tipo de las Props para poder tener acceso a las propiedades del drawer y de la navegación:

interface Props extends DrawerScreenProps<any, any>{};
…
useEffect(() => {
    navigation.setOptions({
        headerLeft: () => {
            <Button title=“Menu” onPress{() => navigation.toggleDrawer()} />
        }
    })
})

BottomTab Navigation

Ofrece un menú inferior que funciona como una lista horizontal de enlaces que van hacia cada pantalla.

Instalaciones
npm install @react-navigation/bottom-tabs

Ejemplo básico
El Tab.Navigator contiene todas las pantallas que se van a colocar como Tabs

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export const  MyTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Personalizar las tabs
<Tab.Navigator.
sceneContainerStyle={{background: ‘white’}} Pone el color del contenido de la tab en blanco
screenOptions={({route}) => ({
tabBarActiveTintcolor: ‘red’, Cambia el color del texto activo
tabBarStyle: {.
borderTopColor: ‘red’, Agrega un borde rojo a todo los tabs
borderTopWidth: 0, El ancho del borde es 0
elevation: 0 Para que no se generen sombras (android)
},.
tabBarLabelStyle: {fontSize: 14}, Cambia el tamaño de la fuente de las tabs
tabBarIcon: ({color, focused, size}) => { Cambia el icono del tab

let iconName: string = '';
      switch(route.name) {
          case 'MenuStackNavigator':
             iconName='MSN'
             break;

Podemos usar un switch para ver que texto usar

return <Text style={{color}}>{iconName}</Text> A todos los tabs les pone este texto como ícono y le pone color, el color que recibe como parámetro para que todos se vean igual
}})}.
>.
<TabScreen … options={{ tabBaricon: <Icono props />}}/> Agregar un ícono, podemos llamar a una etiqueta que reciba datos para cambiar los estilos

Material Bottom Tab Navigation

Permite agregar estilos a la navegación que ya teníamos anteriormente en el menú inferior.
 Instalación
npm install @react-navigation/material-bottom-tabs react-native-paper react-native-vector-icons

Ejemplo básico

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

const MyTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Tenemos las mismas opciones de personalización que con los otros componentes.

Material Top Tab Navigation

Es un menú superior que funciona del mismo modo que los componentes anteriores, al permitirte navegar entre diferentes pantallas.

Instalaciones
npm install @react-navigation/material-top-tabs react-native-tab-view
npm install react-native-pager-view

Ejemplo básico

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Para personalizarlo tenemos las mismas opciones que con las otras navegaciones.

Ejecutar código dependiendo de la plataforma

Podemos crear una función para Android, otra para iOS dentro de nuestra función principal y validar en qué plataforma se está trabajando para saber qué código hay que retornar:

const app = () => {
    const androidApp = () => {…}
    const iosApp = () => {…}
    return (Platform.OS === ‘ios’ ? iosApp() : androidApp();
}

Agregar iconos

Instalación
npm install --save react-native-vector-icons
Y seguir la guía de instalación en https://github.com/oblador/react-native-vector-icons
Hay que instalar los tipos del paquete de iconos que elijamos:
npm i -D @types/react-native-vector-icons

Agregar icono

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;

Animaciones

Creamos una función para que un elemento aparezca en pantalla, para eso necesitamos una referencia de su opacidad:
const opacity = useRef(new Animated.Value(0)).current;
Para hacer que un elemento aparezca, creamos la función:

const fadeIn = () => {
        Animated.timing(
            opacity, 
            {toValue: 1, duration: 1000, useNativeDriver: true}
        ).start();
    }

Y agregamos el elemento Animated.View para lo que queremos animar, junto a un botón que inicie la animación:

<Animated.View style={{
     backgroundColor: 'black',
     width: 150,
     height: 150,
     borderColor: 'white',
     borderWidth: 10,
     opacity: opacity
}} />
<Button
     title='Start fadeIn' 
     onPress={() => fadeIn()} />

Verificar el estado de la app

Con el AppState de react-native podemos monitorear cuando nuestra aplicación esta activa, inactiva o si está en segundo plano.

useEffect(() => {
      AppState.addEventListener('change', state => {
        console.log(state);
      })
    }, [])

Cambiar icono, nombre, splash screen de la app

Cambiar el nombre

Hay que ir a android/app/src/main/res/strings.xml y ahi actualizar el texto de la aplicación que viene por defecto

Cambiar ícono

Hay que crear un ícono (hay generadores de iconos en internet de donde podemos crear uno y descargarlo (descargar todas sus medidas disponibles).
Hay que tener images cuadradas y redondas. y almacenarlas en android/app/src/main/res/mipmap… cada una en su respectiva carpeta, y en cada una hay que tener una versión circular y una cuadrada del ícono.
En el AndroidManifest (android/app/src/main/AndroidManifest.xml) es en donde se definen los nombres de las imagenes que se toman por defecto.

android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round”

Splash creen

Se puede seguir el tutorial de este enlace: https://github.com/crazycodeboy/react-native-splash-screen
Hacer las instalaciones, modificaciones de los archivos nativos, crear los archivos launch_screen.xml y generar el diseño para el splash creen, después importar el paquete en la pantalla donde lo queremos mostrar y configurar el splash screen.

Generar APK

Debe seguirse la guía de la documentación oficial: https://reactnative.dev/docs/signed-apk-android
 ## Subir a Google Play el app
Se sube desde: https://play.google.com/console/about/
Debe hacerse un pago y llenar los datos.

Otros

<Text style={styles.text}>Texto: {“\n”}Ejemplo</Text> Para dar un salto de línea en el mismo Text
const { width, height } = Dimensions.get('window'); Obtener el ancho y alto de la pantalla pero al girar el dispositivo, las medidas se mantienen cuando deberían cambiar, es mejor usar el hook ‘useWindowDimentions’
<MiElemento opcionBool /> Si necesitamos enviarle props booleanas no es necesario inicializarla en true, el hecho de agregar la propiedad hace que se retorne un true

Links

React Native con TypeScript: https://create-react-app.dev/docs/adding-typescript/
React Navigation: https://reactnavigation.org/docs/getting-started/
React Drawer Navigation: https://reactnavigation.org/docs/drawer-based-navigation/
Bottom Tab Navigator: https://reactnavigation.org/docs/bottom-tab-navigator/
Material Top Tab Navigator: https://reactnavigation.org/docs/material-top-tab-navigator/
React Native APIs: https://reactnative.dev/docs/accessibilityinfo
Colores en iOS: https://developer.apple.com/design/human-interface-guidelines/color Colores en Android: https://m2.material.io/design/color/color-usage.html
React Native con TypeScript: https://create-react-app.dev/docs/adding-typescript/
Iconos: https://github.com/oblador/react-native-vector-icons
Lista de iconos disponibles: https://ionic.io/ionicons
Carrusel: https://github.com/meliorence/react-native-snap-carousel
Gradientes: https://github.com/react-native-linear-gradient/react-native-linear-gradient
Analizar colores de imagenes: https://github.com/osamaqarem/react-native-image-colors
Temas: https://reactnavigation.org/docs/themes/
Permisos: https://www.npmjs.com/package/react-native-permissions
Extensiones: https://reactnative.dev/docs/app-extensions
Ejercicios: https://www.tutorialspoint.com/react_native/index.htm
Libro con ejercicios: https://books.goalkicker.com/ReactNativeBook/

Comandos para la terminal

Beatriz Martínez Pérez — Sat, 22 Apr 2023 20:26:49 +0000

¿Qué es la terminal?

Interfaz gráfica que simula una línea de comandos, es decir, una shell. La terminal es una ventana en donde está el prompt. La línea de comandos (shell) es quien toma los comandos y los manda al sistema operativo para hacer algo.

Tipos de shells:

Boune shell
Bash shell
PowerShell
Z Shell
C Shell
Korn Shell
Fish Shell

En la terminal encontrarás lo siguiente:
nombreDeUsuario@nombreDelEquipo:directorio$

Podemos usar estos atajos:
Ctrl + C Mata el proceso actual
Ctrl + L Limpia la pantalla

Definiciones

Comando Un comando puede ser un programa ejecutable, un comando de utilidad de la shell, una función del shell o un alias.
Wildcards Son caracteres especiales (?, *) que permiten encontrar patrones o realizar búsquedas en al menos dos niveles.

Comandos básicos

clear Limpia la pantalla (Ctrl + L)
cd ruta Cambia el directorio actual
cd .. Regresa al directorio anterior
pwd Devuelve la ruta en donde estamos
echo "Hello world" Imprime el texto que escribamos
cat archivo.extension Muestra el contenido del archivo
cat archivo1.ext archivo2.ext Muestra el contenido de ambos archivos
file archivo.md Devuelve la información del archivo
tree Despliega todos los archivos existentes
tree -L 2 Limita los niveles de ramas a 2
type comando Devuelve el tipo de comando que es
alias nombre="comando" Crea un alias para un comando, son temporales si no se guardan
help comando Muestra la ayuda para ese comando
comando --help Muestra la ayuda para ese comando
man comando Muestra el manual de usuario del comando especificado
info comando Muestra la información del comando (es más legible que 'man')
whatis comando Devuelve la descripción de qué hace un comando, no funciona con todos los comandos
whoami Muestra quien somos en el sistema operativo
id Da información sobre el usuario
cal Muestra un calendario
date Muestra la fecha y hora del sistema operativo
printenv Muestra todas las variables de entorno configuradas
echo $HOME Imprime el valor de esa variable de entorno
jobs Muestra los procesos que están en segundo plano y su número de trabajo
fg 1 Saca el proceso que tenga el número de trabajo '1' del segundo plano y lo trae a primer plano (la terminal)

su root Cambia al usuario root
sudo comando Ejecuta el comando con el usuario root
passwd Para cambiar la contraseña

mkdir Directorio Crea un directorio (pueden crearse varios al mismo tiempo)
touch archivo.extension Crea un archivo (pueden crearse varios al mismo tiempo)

cp archivoACopiar Ruta/NombreNuevoArchivo Copia un archivo
mv archivoAMover Ruta Mueve el archivo a la ruta donde especifiquemos
mv nombreAnterior nombreNuevo Cambia el nombre del archivo/directorio

rm archivo Elimina un archivo
rm -i archivo Elimina un archivo, pero antes solicita confirmación (i = interactive)
rm -r directorio Elimina un directorio (r = recursive)
rm -f archivo Fuerza la eliminación de un archivo/directorio

head archivo Muestra las primeras 10 líneas del archivo
head archivo -n 15 Muestra las primeras 15 líneas del archivo
tail archivo Muestra las últimas 10 líneas del archivo
tail archivo -n 12 Muestra las últimas 12 líneas del archivo
less archivo Muestra el archivo completo, interactivo. Con / podemos buscar palabras y con q salimos.
open archivo Abre un archivo como normalmente se haría (MAC)
xdg-open archivo Abre el archivo (Linux)

Archivos

ls Lista los archivos y directorios del directorio donde te encuentras
ls -d Lista los directorios
ls -l Lista los archivos con detalles (l = long)
ls -lh Lista los archivos mostrando los detalles más legibles (h = human)
ls -la Lista los archivos ocultos
ls -ls Lista los archivos por tamaño (s = size)
ls -lr Lista los archivos de Z-A (r = reverse)
ls -s ruta nombreLink Crea un link simbólico, para no escribir toda la ruta, solo escribimos su nombre

Wildcards
ls *.txt Lista todos los archivos que terminen en '.txt'
ls a* Lista todo lo que inicie con 'a'
ls a? Lista todo lo que inicie con 'a' y tenga solo un carácter después (pueden agregarse múltiples '?')
ls [[:uppercase:]]* Lista lo que inicie con mayúscula y tenga más caracteres después
ls -d [[:uppercase:]]* Lista los directorios que inicien con mayúscula y tengan más caracteres después
ls [[:lower:]]* Lista lo que inicie con minúscula
ls [ad]* Lista lo que inicie con 'a' o 'd' y tenga más caracteres después

Comandos de búsqueda

which comando Ayuda a encontrar la ruta de los binarios del comando
find ruta -name archivo Busca 'archivo' y empieza a buscar en 'ruta'
find ruta -type d -name directorio Busca un directorio (d) de nombre 'directorio', para buscar archivo es -type f
find ruta -size 20M Busca los archivos que pesen 20MB

grep palabra archivo.ext Busca 'palabra' dentro de 'archivo.ext'
grep -i palabra archivo.ext Busca 'palabra' en 'archivo.ext' ignorando mayúsculas/minúsculas
grep -c palabra archivo.ext Cuenta las veces que aparece 'palabra'
grep -vi palabra archivo.ext Muestra lo que no tenga 'palabra'
wc archivo.ext Muestra cuántas líneas tiene el archivo, cuántos caracteres, número de bits y el nombre del archivo
wc -l archivo Devuelve el número de líneas del archivo
wc -w archivo Devuelve el número de palabras del archivo
wc -c archivo Devuelve el número de bits del archivo

Utilidades de red

ifconfig Muestra información de red
ping url Conecta con la URL proporcionada para ver si está activa
curl url Trae un archivo desde esa URL, por ejemplo, el HTML
wget url Parecido a 'curl', descarga algo desde la red
traceroute url Muestra si hay algún servidor fallando para llegar de nuestra computadora a la URL
netstat -i Muestra los dispositivos e información de la red

Comprimir archivos

tar -cvf comprimido.tar aComprimir Comprime el archivo en .tar, mostrando que va comprimiendo (c = compress, v = verbose, f = file)
tar -cvfz comprimido.tar.gz comprimido.tar Comprime el archivo en gzip (z = gzip)
tar -vfzx comprimido.tar.gz Descomprime el archivo
zip -r comprimido.zip comprimir Comprime en .zip
unzip comprimido.zip Descomprime el archivo zip

Manejo de procesos

ps Muestra los procesos/comandos que se estén ejecutando actualmente con su PID
kill PID Mata el proceso dado el PID
top Muestra los procesos que usan más recursos

Editor de texto en la terminal

sudo apt install vim Instala vim (vi es el editor antiguo, vim = vi moderno)
vim Abre una pantalla para crear archivos de texto
vim archivo.ext Crea 'archivo.ext' para editarlo

Pipe: Combinar comandos

ls -lh | less Lista los archivos de forma interactiva
ls -lh | less | tee archivo.ext 'Tee' hace que el resultado se guarde en 'archivo.ext'. El resultado es la lista de archivos de forma interactiva.
ls -lh | tee archivo.ext | less Primero guarda la salida y luego muestra la salida con 'less'
ls directorio | sort Muestra la salida de A-Z

Encadenar comandos

Ejecutar comandos de modo síncrono (uno detrás de otro)
ls; mkdir directorio; cal Separa comandos con ';', primero lista los archivos, después crea un directorio y finalmente muestra un calendario.
Ejecutar comandos de modo asíncrono (por cada comando se abre otra shell en segundo plano)
ls & date & cal Muestra en que número de proceso (PID) se ejecutó el comando y muestra las salidas

Ejecutar comandos de manera condicional

AND
mkdir directorio && cd directorio Si se puede, crea 'directorio' y va a la carpeta
OR
cd ruta || touch archivo Si 'ruta' existe, accede, si no existe, crea 'archivo'
cd ruta || touch archivo || echo "Hola" Si 'ruta' existe, accede, sino, crea 'archivo', si el archivo se crea, el proceso finaliza, sino, ejecuta el 'echo'

Permisos

Estructura de un permiso

-rw-r--r--
El primer caracter es el tipo de archivo (-)
Los siguientes 3 caracteres son los permisos para el usuario (rw-)
Los siguientes 3 caracteres son los permisos para grupos (r--)
Los siguientes 3 caracteres son los permisos para otros (r--)

Tipo de archivo

- Un archivo normal
d Directorios
l Un link simbólico (acceso directo desde la terminal)
d Un archivo de bloque especial (guarda información de un dispositivo (USB, HDD) normalmente)

Tipo de modo

Permisos:
r = read = Permiso de ver el contenido del archivo
w = write = Permiso de editar el contenido del archivo
x = execute = Permiso para ejecutar el contenido del archivo
Los permisos activos tienen '1'

Modo dueño (quien creó el archivo, tiene archivo de leer, escribir y ejecutar)
r w x
1 1 1
Modo grupo (para archivos compartidos, tiene permiso de leer y ejecutar)
r w x
1 0 1
Modo world (otros, tiene permiso de leer y ejecutar)
r w x
1 0 1
Modo simbólico
u Permiso solo para el usuario
g Permiso solo para el grupo
o Permiso solo para otros (ni usuario ni grupo)
a permiso para todos

Modificar permisos en la terminal

Definir permisos en diferentes modos
r w x
1 1 1 - Boleano
4 2 1 - Binario
4 2 1 = 7 - Octal

Es decir, para asignar todos el permiso 'rx' sería:
r w x
1 0 1 - Boleano
4 0 1 - Binario
4 0 1 = 5 - Octal

Para asignar todos el permiso 'r' sería:
r w x
1 0 0 - Boleano
4 0 0 - Binario
4 0 0 = 4 - Octal

chmod 755 archivo Cambia los permisos de 'archivo', está en octal, Da todos los permisos al usuario, y 'rx' para grupos y otros.
chmod u-r archivo Quita el permiso de lectura (r) al usuario (u)
chmod u+r archivo Da el permiso de lectura (r) al usuario (u)
chmod u-x,go=w archivo Quita al usuario el permiso de ejecución (x) y a grupo y otros (go) solo les da el permiso de escritura (w)

Juego

sudo apt install cowsay Muestra un mensaje con una vaca
sudo apt install lolcat Cambia de color cualquier texto
cowsay -l Muestra los dibujos disponibles, se debe poner -f
cowsay "Hola" Devuelve una vaca diciendo 'Hola'
lolcat "Hola" Muestra 'Hola' de diferente color
`cowsay "Hola" | lolcat Devuelve una vaca colorida diciendo 'Hola'
cowsay -f dragon-and-cow "Hola" | lolcat Devuelve un dragón con una vaca, coloridos, diciendo 'Hola'
cowsay -f dragon-and-cow "Hola" | lolcat -F 12 -d 5 -a Anima el resultado

Comandos básicos de MySQL

Beatriz Martínez Pérez — Thu, 13 Apr 2023 19:47:06 +0000

¿Qué es una base de datos?

Una base de datos es un conjunto perteneciente al mismo contexto y almacenados sistemáticamente. Se compone por tablas, columnas, filas y campos.

Una tabla es una estructura que organiza datos en una matriz.
Una columna es un conjunto de datos organizados verticalmente.
Una fila o registro es un conjunto de datos organizados horizontalmente.
Un campo es un dato individual.

Las bases de datos tienen ciertas restricciones, por ejemplo, la clave primaria, clave foránea, restricción de nulos, entre otros.

Clave primaria: Campo que se utiliza para identificar de forma única cada fila de la tabla, no puede tener valores duplicados ni nulos, y sirve para establecer relaciones.
Clave foránea o externa: Es un campo o conjunto de campos en una tabla que hace referencia a la clave primaria de otra tabla.

Se necesitan querys para ejecutar los comandos en la base de datos.
Para crear archivos que ejecuten comandos SQL, el archivo debe llevar la extensión '.sql'.

Nota: Las mayúsculas no son necesarias para ejecutar los comandos, pero nos ayudan a entender mejor la sintaxis.

Comandos básicos

help Mostrar la ayuda
status Muestra información sobre MySQL
create database miBD Crea la base de datos 'miBD'
create database info exists miBD Crea la base de datos 'miBD' solo en caso de que no exista
show databases; Muestra las bases de datos existentes
use miBD; Usar la base de datos 'miBD' para ejecutar comandos
drop database miBD; Elimina la base de datos 'miBD'
show tables; Muestra las tablas de la base de datos elegida
create table miTabla(campo1 int(3), campo2 varchar(10)); Crea una tabla con los campos 'campo1' y 'campo2', de tipo Integer y Varchar
desc miTabla; Muestra información de cómo está conformada la tabla 'miTabla'
drop table miTabla; Elimina la tabla 'miTabla'

Modificar tablas

ALTER TABLE miTabla RENAME TO nuevoNombre Cambia el nombre de la tabla 'miTabla' a 'nuevoNombre'
ALTER TABLE miTabla CHANGE columna1 apellidos varchar (10) null; Cambia el nombre de la columna 'columna1' a 'apellidos' y cambia las restricciones
ALTER TABLE miTabla MODIFY apellidos char(10) not null; Cambia las restricciones de una columna (apellidos) sin cambiar el nombre
ALTER TABLE miTabla ADD columna3 varchar(9) null; Agrega la columna 'columna3' a la tabla 'miTabla'
ALTER TABLE miTabla ADD CONSTRAINT uq_email UNIQUE(email); Añade la condición de que el campo 'email' sea único
ALTER TABLE miTabla DROP columna3; Elimina la columna 'columna3' sin importar que tenga datos

Lenguaje de manipulación de datos

SELECT
SELECT * FROM miTabla; Devuelve todos los registros de la tabla 'miTabla'
SELECT * FROM miTabla \G Devuelve todos los registros de la tabla, con otro formato
SELECT col1, col2 FROM miTabla Devuelve todos los registros de las columnas seleccionadas (col1, col2)
SELECT email, (1+1) FROM miTabla Devuelve los campos de la columna 'email' y agrega una columna con el resultado de la operación '1+1'
SELECT email, (1+1) AS suma FROM miTabla Se le agrega un alias a la columna con la operación, para que su nombre aparezca como 'suma', en vez de '1+1'
SELECT id, name FROM miTabla ORDER BY id DESC; Devuelve los 'id' y 'name' de 'miTabla' ordenándolos de forma descendente por 'id'
SELECT id, name FROM miTabla ORDER BY id ASC; Devuelve los 'id' y 'name' de 'miTabla' ordenándolos de forma ascendente por 'id'
SELECT * FROM miTabla WHERE email="email@email.com"; Devuelve solo los registros que cumplan con la condición que se encuentra después del 'WHERE'
SELECT * FROM miTabla WHERE YEAR(fecha)=2019; Devuelve los registros que tengan el año '2019' en la columna 'fecha'
SELECT * FROM usuarios WHERE YEAR(fecha)!=2019; Devuelve los registros que no tengan el año '2019' en la columna 'fecha'
SELECT * FROM miTabla WHERE YEAR(fecha)=2019 OR ISNULL(fecha); Devuelve los registros que no tengan el año '2019' en la columna 'fecha' o que su valor sea nulo
SELECT * FROM miTabla WHERE apellido LIKE '%a%'; Devuelve todos los registros que tengan una 'a' en cualquier lugar del campo en la columna 'apellido'
SELECT * FROM miTabla WHERE apellido LIKE '%a%' AND pass='123'; Devuelve todos los registros que tengan una 'a' en cualquier lugar del campo en la columna 'apellido' y que el valor de 'pass' sea '123'
SELECT * FROM miTabla WHERE (YEAR(fecha)%2 = 0); Devuelve los registros que tengan un año par en la columna 'fecha'
SELECT * FROM miTabla LIMIT 2; Limita la cantidad de registros obtenidos a 2
SELECT * FROM miTabla LIMIT 2,4; Muestra solo los registros que estén entre el rango 2 a 4
SELECT UPPER(nombre) FROM miTabla; Devuelve los registros con la columna 'nombre' en mayúsculas
SELECT LOWER(nombre) FROM miTabla; Devuelve los registros con la columna 'nombre' en minúsculas
SELECT nombre FROM miTabla WHERE LENGTH(nombre)>5; Devuelve los registros cuyo valor en la columna 'nombre' supere los 5 caracteres
SELECT (id+1) FROM miTabla; Devuelve los ID de la tabla, sumandos 1
SELECT ABS(numero) FROM miTabla; Devuelve el valor absoluto de cada valor en la columna 'numero'
SELECT CEIL(decimal) from miTabla; Devuelve el valor de la columna 'decimal' redondeado al número siguiente
SELECT FLOOR(decimal) from miTabla; Devuelve el valor de la columna 'decimal' redondeando al número anterior
SELECT ROUND(decimal, 2) from miTabla; Redondea el valer de la columna 'decimal' y muestra 2 decimales después del punto
SELECT PI() from miTabla; Imprime el valor de PI
SELECT SQRT(numero) from miTabla; Devuelve la raíz cuadrada de la columna 'numero'
SELECT RAND() FROM miTabla; Devuelve números aleatorios
SELECT TRUNCATE(decimal, 2) FROM miTabla; Solo muestra 2 decimales después del punto en la columna 'decimal'
SELECT CONCAT(col1, ':)') FROM miTabla; Concatena el valor de la columna 'col1' agregándole ':)'
SELECT LENGHT(col1) FROM miTabla; Devuelve la cantidad de caracteres que contiene cada campo en la columna 'col1'
SELECT TRIM(col1) FROM miTabla; Elimina los espacios de antes y después de los campos en la columna 'col1'
SELECT CURDATE() FROM miTabla; Imprime la fecha actual
SELECT CURTIME() FROM miTabla; Imprime la hora actual
SELECT DATEDIFF(fecha, fecha2) FROM miTabla; Imprime la diferencia en días entre las columnas 'fecha' y 'fecha2'
SELECT DAYNAME(fecha) FROM miTabla; Devuelve el día de la semana a la que corresponde la fecha
SELECT DAYOFMONTH(fecha) FROM miTabla; Devuelve el número del día de la fecha en la columna 'fecha'}
SELECT SYSTEMDATE() FROM miTabla; Devuelve la fecha y hora actual del sistema operativo donde se está ejecutando la consulta
SELECT DAYOFWEEK(fecha) FROM miTabla; Devuelve el número del día respecto a la semana
SELECT DAYOFYEAR(fecha) FROM miTabla; Devuelve qué número del día del año tiene la fecha de la columna 'fecha'
SELECT MONTH(fecha) FROM miTabla; Devuelve el mes que tiene la fecha
SELECT YEAR(fecha) FROM miTabla; Devuelve el año que tiene la fecha
SELECT DAY(fecha) FROM miTabla; Devuelve el día que tiene la fecha
SELECT HOUR(fecha) FROM miTabla; Devuelve la hora que tiene la fecha
SELECT MINUTE(fecha) FROM miTabla; Devuelve el minuto que tiene la fecha
SELECT DATE_FORMAT(fecha, '%d-%m-%Y') FROM miTabla; Muestra las fechas de la columna 'fecha' con el formato indicado en el segundo parámetro
SELECT ISNULL(name) FROM miTabla; verifica si el campo es nulo, si lo es, devuelve 0, sino, 1
SELECT STRCMP(name, apellido) FROM miTabla; Compara los valores de las columnas 'name' y 'apellido' y devuelve 0 si son iguales o 1 si son diferentes
SELECT VERSION FROM miTabla; Devuelve la versión SQL que se está usando
SELECT USER() FROM miTabla; Devuelve el usuario actual
SELECT USER() DISTINCT FROM miTabla; Devuelve solo valores sin repetirse
SELECT DISTINCT DATABASE() FROM miTabla; Devuelve el nombre de la base de datos
SELECT IFNULL(name, '---') FROM miTabla; Verifica si los campos de la columna 'name' son nulos, si lo son, pone '---' como valor
SELECT col1 FROM miTabla GROUP BY col2; Agrupa los resultados de 'col1', agrupándolos por el valor en 'col2'
SELECT COUNT(col1) FROM miTabla GROUP BY col2; Agrupa los resultados y muestra cuántos resultados hay
SELECT COUNT(col1) FROM miTabla GROUP BY col2 HAVING COUNT(col1) > 4; Agrupa y cuenta los resultados y solo muestra los que cumplan co la condición de ser mayores a 4
SELECT AVG(numero) FROM miTabla; Devuelve el promedio de los valores de la columna 'numero'
SELECT MAX(numero) FROM miTabla; Devuelve el registro con el mayor valor en la columna 'numero'
SELECT MIN(numero) FROM miTabla; Devuelve el registro con el menor valor en la columna 'numero'
SELECT SUM(col1) FROM miTabla; Devuelve la suma de todos los valores en la columna 'col1'
SELECT * FROM tabla1 WHERE id IN (SELECT tabla1_id FROM tabla2); Devuelve los registros de 'tabla1' cuyo ID se encuentre en la columna 'tabla1_id' de 'tabla2'
SELECT * FROM tabla1 WHERE id NOT IN (SELECT tabla1_id FROM tabla2); Devuelve los registros de 'tabla1' cuyo ID no se encuentre en la columna 'tabla1_id' de 'tabla2'
SELECT users.name, data.title FROM users, data; Devuelve las columnas especificadas desde dos tablas
SELECT u.name, d.title FROM users u, data d; Le da un alias a los nombres de las tablas
SELECT u.name, d.title FROM users u, data d WHERE u.data_id = d.id AND d.user_id = u.id; Devuelve los registros cuando los ID's coincidan para evitar tener muchos campos
SELECT u.id FROM users u INNER JOIN data d ON u.data_id = d.id GROUP BY u.name; Muestra los registros donde se relacionen los usuarios y datos, agrupándolos, si no hay relación, no se muestran
SELECT d.id FROM data d LEFT JOIN users u ON d.user_id = u.id GROUP BY d.title; Muestra todos los registros de la primer tabla (data)que no tengan relación con la segunda tabla (users)
SELECT d.id FROM data d RIGHT JOIN users u ON d.user_id = u.id GROUP BY d.title; Muestra los registros de la segunda tabla (users) que no tengan relación con la primer tabla (data)

INSERT
INSERT INTO miTabla VALUES(null, 'test', 19, '2019-10-29'); Guarda un nuevo registro en la tabla 'miTabla', no se pueden omitir campos
INSERT INTO miTabla(email, pass) VALUES('test@test.com', '123'); Guardar un nuevo registro con solo las columnas seleccionadas (email, pass)

UPDATE
UPDATE miTabla SET fecha=CURDATE(); Actualiza la columna 'fecha' y le agrega el valor de la fecha actual
UPDATE miTabla SET fecha=CURDATE() WHERE id=3; Actualiza la columna 'fecha' con el valor de la fecha actual del registro con ID '3'

DELETE
DELETE FROM miTabla WHERE id='1'; Elimina un registro de la tabla 'miTabla' que tenga ID '1'

Vistas

Guardar un query para verlo más rápido y usar menos recursos. La información siempre esta actualizada. Para ver las vistas existentes, se ejecuta show tables;
CREATE VIEW miVista AS SELECT * FROM miTabla; Crea una vista, dandole un alias al query 'select' para no tener que escribir todo
SELECT * FROM miVista; Muestra el contenido de la vista
DROP VIEW miVista; Elimina la vista creada

Restricciones al crear una tabla

CREATE TABLE miTabla(

id int(10) auto_increment not null,
edad int(2) not null,
nombre varchar(20) default "usuario",
apellido varchar(15) null,
CONSTRAINT pk_miTabla PRIMARY KEY(id),
CONSTRAINT fk_miTabla_tabla2 FOREIGN KEY (usuario_id) REFERENCES usuario(id),
CONSTRAINT fk_miTabla_tabla2 FOREIGN KEY (usuario_id) REFERENCES usuario(id) ON DELETE CASCADE,
CONSTRAINT fk_miTabla_tabla2 FOREIGN KEY (usuario_id) REFERENCES usuario(id) ON DELETE SET NULL,
CONSTRAINT fk_miTabla_tabla2 FOREIGN KEY (usuario_id) REFERENCES usuario(id) ON DELETE SET DEFAULT,
CONSTRAINT fk_miTabla_tabla2 FOREIGN KEY (usuario_id) REFERENCES usuario(id) ON DELETE NO ACTION,
CONSTRAINT fk_miTabla_tabla2 FOREIGN KEY (usuario_id) REFERENCES usuario(id) ON UPDATE CASCADE,
CONSTRAINT fk_miTabla_jefe FOREIGN KEY(jefe) REFERENCES miTabla(id);

)ENGINE=InnoDb;

auto_increment: Auto-incrementa el valor automáticamente
null: Permite nulos
not null: No permite nulos
default 'valor': Da un valor por defecto por si el usuario no lo pone
pk_miTabla PRIMARY KEY(col): Define 'col' como llave primaria con nombre 'pk_miTabla'
fk_miTabla_tabla2 FOREIGN KEY(col) REFERENCES usuario(id): Define 'col' como llave foránea con referencia a la columna 'id' de la tabla 'usuario'
ON DELETE CASCADE: Cuando se borre el registro, también sus datos relacionados se borran
ON DELETE SET NULL: Cuando se borre el registro, ponerlo como nulo
ON DELETE SET DEFAULT: Cuando se borre el registro, poner el valor default
ON DELETE NO ACTION: Cuando se borre el registro, no hacer nada
ON UPDATE CASCADE: Cuando se actualice un registro, el registro relacionado también se actualiza
fk_miTabla_jefe FOREIGN KEY(jefe) REFERENCES miTabla(id): Hace referencia a la misma tabla pero a otro registro
ENGINE=InnoDb: Indica el motor/forma de almacenar los datos, para mantener la integridad, aumentar rendimiento, etc. Otro: MyISAM permite tener mas velocidad pero no mantiene la integridad

Notas

Operadores de comparación para WHERE

Igual: =
Diferente: !=
Menor: <
Mayor: >
Menor o igual: <=
Mayor o igual: >=
Entre: BETWEEN a AND b
En: IN
Nulo: IS NULL
No nulo: IS NOT NULL
Es como: LIKE
No es como: NOT LIKE

Operadores lógicos

O: OR
Y: AND
No: NOT

Tipos de datos en SQL

int(10) - Entero de 10 caracteres máximos
float(10,3) - Decimal de 10 caracteres máximos y con máximo 3 decimales
varchar(90) - String (puede contener hasta 255 caracteres)
char(1) - String de un solo carácter
mediumtext - String de 65000 caracteres
longtext - String de 4 millones de caracteres
date - Fecha
time - Hora
timestamp - Hora en formato UTF

Administración de bases de datos con SQL Server

Beatriz Martínez Pérez — Mon, 23 Jan 2023 20:30:21 +0000

Copias de seguridad y restauración

Una copia de seguridad es un mecanismo de protección ante cualquier inconveniente (fallo de lectura de un disco, problema con el hardware del servidor, accesos indeseados al sistema), ya que puede ser necesario recuperar los datos en la última situación estable del servidor.

Tipos de copias de seguridad

Respaldo completo

Hace una copia de seguridad de todo. Almacena todos los objetos de la BD: tablas, procedimientos, funciones, vistas...
También crea una copia del registro de transacciones, para que la BD se pueda recuperar.
Para realizar una copia de seguridad completa, se necesita ejecutar el comando:

BACKUP DATABASE DBDemoATC To DISK='f:\PowerSQL\DBDemoATC.BAK' WITH FORMAT, MEDIANAME = 'Native_SQLServerBackup', NAME = 'Full-SQLShackDemoATC backup';

Para realizar la copia de seguridad en varios archivos:

BACKUP DATABASE SQLShackDemoATC TO DISK = 'f:\PowerSQL\SQLShackDemoATC_1.BAK’, DISK = 'f:\PowerSQL\SQLShackDemoATC_2.BAK’, DISK = 'f:\PowerSQL\SQLShackDemoATC_3.BAK’, DISK = 'f:\PowerSQL\SQLShackDemoATC_4.BAK' WITH INIT, NAME = 'FULL SQLShackDemoATC backup’, STATS 5

Respaldo diferencial

Un respaldo diferencial copia solamente los cambios realizados desde la última copia de seguridad completa, como no copia todos los archivos, suele ejecutarse más rápido.
Las copias de seguridad diferenciales ahorran espacio de almacenamiento y el tiempo para realizar copias de seguridad, a medida que los datos cambian con el tiempo, el tamaño e la copia de seguridad diferencial también aumenta.
Para ejecutar un respaldo diferencial, se ejecuta:

BACKUP DATABASE DBDemoATC To DISK='f:\PowerSQL\DBDemoATC.BAK' WITH DIFFERENTIAL, MEDIANAME = 'Native_SQLServerBackup', NAME = 'Full-SQLShackDemoATC backup';

Respaldo del registro de transacciones

Realiza una copia de seguridad de los registros de transacciones, como su nombre lo indica, este tipo de copia solo es posible con modelos de recuperación de registro completo o masivo.
Esta copia contiene todos los registros de transacciones que no se incluyeron en la última copia de seguridad del registro de transacciones.
Para crear una copia de seguridad de este tipo, se ejecuta:

BACKUP LOG SQLShackDemoATC To DISK='f:\PowerSQL\SQLShackDemoATC_Log.trn' WITH MEDIANAME = 'Native_SQLServerLogBackup', NAME = 'Log-SQLShackDemoATC backup';

Copia de seguridad de la copia de seguridad de archivos

Las copias de seguridad de archivos de grupos de archivos de solo lectura se pueden combinar con copias de seguridad parciales. Las copias de seguridad parciales incluyen todos los grupos de archivos de lectura / escritura y, opcionalmente, uno o más grupos de archivos de solo lectura.
Para crear una copia de seguridad de archivo, se ejecuta:

CREATE DATABASE SQLShackFileBackup ON PRIMARY ( NAME = N'SQLShackFileBackup_1', FILENAME = N'f:\PowerSQL\SQLShackFileBackup_1.mdf' , SIZE = 5000KB , FILEGROWTH = 1024KB ), FILEGROUP [Secondary] ( NAME = N'SQLShackFileBackup_2', FILENAME = N'f:\PowerSQL\SQLShackFileBackup_2.ndf' , SIZE = 5000KB , FILEGROWTH = 1024KB ) LOG ON ( NAME = N'SQLShackFileBackup_Log', FILENAME = N'f:\PowerSQL\SQLShackFileBackup_Log.ldf' , SIZE = 1024KB , FILEGROWTH = 10%)

Para ejecutar una copia de seguridad a nivel de archivo de los archivos, se ejecuta:

BACKUP DATABASE SQLShackFileBackup FILE = 'SQLShackFileBackup_1', FILE = 'SQLShackFileBackup_2' TO DISK = 'f:\PowerSQL\SQLShackGroupfiles.bak'; GO

Copia de seguridad espejo

Son copias idénticas en la misma copia de seguridad, usualmente se almacenan en diferentes dispositivos de copia de seguridad, incrementando la fiabilidad y reduciendo la probabilidad de pérdida de datos.
Como desventaja se tiene que cada copia de seguridad necesita espacio adicional de disco.
Para crear una copia de seguridad de la BD de este tipo, se usa el comando:

BACKUP DATABASE AdventureWorks2014 TO DISK = 'C:\Mirror_01\AdventureWorks2014_Mirror_01.bak' MIRROR TO DISK = 'D:\Mirror_02\AdventureWorks2014_Mirror_02.bak' MIRROR TO DISK = 'E:\Mirror_03\AdventureWorks2014_Mirror_03.bak' WITH FORMAT

Para hacer una copia de seguridad de los logs:

BACKUP LOG AdventureWorks2014 TO DISK = 'C:\Mirror_01\AdventureWorks2014_Mirror_01.bak' MIRROR TO DISK = 'D:\Mirror_02\AdventureWorks2014_Mirror_02.bak' MIRROR TO DISK = 'E:\Mirror_03\AdventureWorks2014_Mirror_03.bak

Automatización de tareas

Los Administradores de Bases de Datos (DBA) tienen que aprender a automatizar tareas repetitivas, de tal forma que dichas tareas sean ejecutadas de forma consistente.
Las ventajas de la automatización son:

Reducir la carga de trabajo
Reducir el riesgo de olvidar tareas
Reducir los errores humanos
Manejo de proactividad en la administración

Las herramientas nativas disponibles para realizar la automatización de tareas en SQL Server son el Asistente y Diseñador de Planes de Mantenimiento y el Servicio de Agentes para la creación de objetos (jobs, alertas, notificaciones y operadores).

Las operaciones de mantenimiento de rutina que se tienen que ejecutar en el servidor de BD son:

Asegurar la integridad de las BD con el comando DBCC CHECKDB
Actualización de estadísticas de los objetos, tablas e índices
Reducción del tamaño de la BD
Respaldos de BD
Tareas de limpieza de datos

Administración de seguridad

Conceptos básicos de seguridad:

Login de SQL Server
Usuario de la BD
Rol de la BD
Rol de una aplicación

Inicios de sesión (Login)

Es la habilidad de usar una instancia del Servidor SQL, está asociado con un usuario de Windows o SQL. Son autenticados con SQL Server, por lo que son los accesos al servidor, pero no pueden acceder a las BD u otros objetos (para eso necesita usuarios).
Un inicio de sesión (o identidad) e también una cuenta que un usuario puede usar para acceder al servidor SQL. Los inicios de sesión se adjuntan a los usuarios mediante el identificador de seguridad (SID).
para crear un login, se ejecuta: CREATE LOGIN <loginname> WITH PASSWORD = '<Password>';
Si queremos crear un inicio de sesión con una contraseña que debe cambiarse, se ejecuta:

CREATE LOGIN <loginname> WITH PASSWORD = '<Password>' MUST_CHANGE, CHECK_EXPIRATION = ON;

Para eliminar un inicio de sesión que se usa para conectarse a una instancia de SQL Server
DROP LOGIN login_name;
Para modificar un inicio de sesión, se puede usar ALTER LOGIN, para cambiar una contraseña, deshabilitar/habilitar/bloquear/renombrar un inicio de sesión, etc. Su sintaxis es:

ALTER LOGIN login_name { ENABLE | DISABLE | WITH PASSWORD = 'password' | hashed_password HASHED [ OLD_PASSWORD = 'old_password' ] | MUST_CHANGE | UNLOCK | DEFAULT_DATABASE = database_name | DEFAULT_LANGUAGE = language_name | NAME = new_login_name | CHECK_EXPIRATION = { ON | OFF } | CHECK_POLICY = { ON | OFF } | CREDENTIAL = credential_name | NO CREDENTIAL | ADD CREDENTIAL new_credential_name | DROP CREDENTIAL credential_name };

Sus parámetros son:
login_name: El nombre de inicio de sesión asignado actualmente al inicio de sesión.

ENABLE: Habilita el inicio de sesión.
DISABLE: Desactiva el inicio de sesión.
Password: La nueva contraseña para asignar al inicio de sesión que se autentica mediante la autenticación de SQL Server
hashed_password: El valor hash de la contraseña que se asignará al inicio de sesión mediante la autenticación de SQL Server.
old_password: La contraseña anterior que usa la autenticación de SQL Server.
MUST_CHANGE: Se usa cuando desea forzar el cambio de contraseña la primera vez que se usa el inicio de sesión después de la instrucción ALTER LOGIN.
UNLOCK: Desbloqueará un inicio de sesión que ha sido bloqueado.
database_name: La base de datos predeterminada para asignar al inicio de sesión
language_name: El idioma predeterminado para asignar al inicio de sesión.
new_login_name: El nuevo nombre del inicio de sesión si está utilizando la instrucción ALTER LOGIN para cambiar el nombre de un inicio de sesión.
CHECK_EXPIRATION: Determina si se aplica la política de caducidad de la contraseña. Debe especificar CHECK_EXPIRATION = ON cuando use la opción MUST_CHANGE.
credential_name: El nombre de una credencial para asignar al inicio de sesión.
NO CREDENTIAL: Elimina las credenciales asignadas del inicio de sesión.
ADD CREDENTIAL: Agrega una credencial al inicio de sesión.
DROP CREDENTIAL: Elimina una credencial del inicio de sesión

Ejemplos:
Para cambiar la contraseña: ALTER LOGIN techonthenet WITH PASSWORD = 'bestsite’;
Para cambiar la contraseña y forzar el cambio: `ALTER LOGIN techonthenet WITH PASSWORD = 'bestsite' MUST_CHANGE, CHECK_EXPIRATION = ON;
Para deshabilitar el inicio de sesión: ALTER LOGIN techonthenet DISABLE;
Para habilitar un inicio de sesión: ALTER LOGIN techonthenet ENABLE;

Usuarios de la BD (User)

Un usuario se refiere a una cuenta en la BD que se utiliza para acceder a la BD.
Es la identidad del inicio de sesión cuando está conectado a una BD. Puede usar el mismo nombre que el inicio de sesión pero no es necesario.
Los Logins y grants se le asignan a los usuarios, además de sus propios esquemas (schemas).
Los usuarios por defecto en una BD:

dbo: Propietario (no puede borrarse de la BD)
Guest: Permite a usuarios que no tienen cuenta en la BD, que accedan a ella, pero hay que hacerle permiso explícitamente.
Information_schema: Permite ver los metadatos de SQL Server.
sys: Permite consultar las tablas y vistas del sistema, procedimientos extendidos y otros objetos del catálogo del sistema.

Para ver los usuarios existentes de una BD, podemos ejecutar:
`USE master GO SELECT * FROM sys.database_principals`
Para crear un usuario se usa: Create user <username> for login <loginname>
Para eliminar un usuario ejecuta: DROP USER user_name; esta instrucción solo se ejecuta si el usuario no tiene ningun objeto en la BD.

Un usuario puede también tener permisos o privilegios, esto se refiere a las reglas que rigen los niveles de acceso que tienen los elementos, se puede otorgar, revocar y denegar permisos con el comando:
`Use <database name> Grant <permission name> on <object name> to <username\principle>`
Por ejemplo:
`USE TestDB GO Grant select on TestTable to TestUser`

Roles

Los roles pueden existir a nivel de instancia o de BD.
A nivel de instancia, los logins pueden ser otorgados roles, llamados 'server roles' y no se pueden crear roles nuevos.
A nivel de BD, los usuarios de la BD pueden ser otorgados roles y sí se pueden crear roles nuevos.
Un rol de aplicación sirve para asignarle permisos a una aplicación, tiene una password y no contiene usuarios.
Un rol facilita la configuración y mantenimiento del modelo de seguridad, es un grupo de privilegios relacionados, que se pueden otorgar al usuario, para crear un rol, se ejecuta: CREATE ROLE <role name>
Algunos de los privilegios otorgados a los roles del sistema son:

Connect: Crear tablas, vistas, sinónimos, secuencias, sesiones, etc.
Resource: Crear procedimientos, secuencias, tablas, triggers, etc. El uso principal de este rol es restringir acceso a objetos de la BD.
DBA: Tiene todos los privilegios del sistema.

Para conceder privilegios a un rol, se ejecuta: GRANT <permission name>, <permission name> TO <role name>;
Para darle un rol a un usuario: GRANT <role name> TO <username>, <username>;
Para eliminar un privilegio de un rol: REVOKE <permission name> FROM <role name>;
Para eliminar un rol: DROP ROLE <role name>

Iniciando con Ionic

Beatriz Martínez Pérez — Sun, 01 Jan 2023 23:08:18 +0000

¿Qué es Ionic?

Es un framework multiplataforma, libre y gratuito que nos da herramientas para crear aplicaciones nativas de iOS y Android, con ayuda de bibliotecas, frameworks conocidos (Angular, React y Vue) y lenguajes de programación conocidos.

Iniciar

Instalar vía npm: npm i -g @ionic/cli
Desinstalar: npm uninstall -g ionic

Estructura del proyecto

src/

app/

app-routing.module.ts
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

assets/
environments/
theme/
global.scss
index.html
main.ts
polyfills.ts
test.ts
zone-flags.ts

El directorio src/app/ contiene los archivos principales que se usarán para editar el proyecto.

Comandos básicos

ionic -v Devuelve la versión actual de Ionic
ionic --help Muestra ayuda
ionic start project-name Crea un proyecto
ionic start project-name template-project Genera un proyecto con la plantilla indicada (tabs, sidemenu o blank)
ionic serve Inicia el proyecto en un servidor local
ionic generate Crea una nueva característica (páginas, componentes, servicios, módulos, clases, etc.)
ionic g tipo-caracerística "nombre" Atajo para crear una característica dado un nombre

Plantillas

tabs: Una vista basada en pestañas
sidemenu: La vista tendrá un menú lateral
blank: Un proyecto vacío con una sola página

Características

Páginas

ionic g page mi_pagina Crear una página
Por defecto, al crearlas, se agregan como hijas de la carpeta app/, si, por ejemplo, estamos usando la plantilla 'tabs' y queremos que 'mi_pagina' sea hija de 'tabs', hay que editar el archivo app-routing.module.ts, eliminando la declaración de 'mi_pagina' y agregándola en el archivo tabs-routing.module.ts.
Hay que tener cuidado de poner la ruta correctamente.

Servicios

Permiten compartir información en todas las páginas ya que sus métodos y atributos son públicos a menos que usemos 'private'. Es recomendable tener un servicio por cada tabla que exista en la base de datos.
ionic g service folder/mi_servicio Crea un servicio
Para poder usarlo:
import { mi_servicioService } from './folder/mi_servicio.service'; Importar el servicio
mi-variable; Crear una variable nueva
constructor (public servicio1: mi_servicioService) { Crear un objeto en el constructor
this.mi-variable = this.servicio1.atributo1; } Almacena el valor de la variable del servicio, en la variable del módulo donde lo estamos importando

Componentes

Nos sirven para encapsular y reutilizar el código, son la base de la aplicación. Al crear un componente, se crea una carpeta que tiene un archivo HTML, CSS y un TS, esta nueva carpeta se crea dentro del componente principal (app/).
ng g c folder/mi_componente Crea un nuevo componente
Para usar el componente, se debe poner su selector (etiqueta HTML) en el archivo HTML y automáticamente se va a importar su contenido.

Librerías importantes

Router

Nos permite navegar entre las distintas páginas generadas, para usarlo, necesitamos importarlo en el archivo TypeScript de cada módulo (conjunto de archivos .ts, .html, .css, etc.) de donde queramos usarlo.
import { Router } from '@angular/router';´ Importar la libreríaconstructor (private router: Router) { }Crear un objeto de este tipo para poder acceder a su funcionalidadthis.router.navigate(['página']);` Función para navegar entre páginas

Alert

Permite enviar alertas al usuario, para usarlo, al igual que la librería anterior, hay que importarlo en el archivo TypeScript.
import { AlertController } from '@ionic/angular'; Importar la librería
constructor (public alert: AlertController) {} Crear el objeto de la librería
const mi_alerta = await this.alert.create( { header: 'Mi título', subheader: 'Mi subtítulo', message: 'Mi mensaje', button: ['Botón0', 'Botón1']; Crear la alerta personalizada
await mi_alerta.present(); Ejecutar la alerta

Conectarse a una API

Podemos usar HttpClient para manejar las peticiones y respuestas externas.
Es recomendable hacerlo en un servicio, así, podemos usarlo en cualquier página de nuestra aplicación.
import { HttpClient } from '@angular/common/http'; Se importa en el servicio.
constructor (private http: HttpClient) Crear el objeto de la librería
this.http.get(urlApi).subscribe() Accede a la URL y se suscribe a los cambios
response => console.log(response) Imprime la respuesta si la petición es correcta
error => console.error(error) ); Imprime el error y se cierra el paréntesis del 'subscribe' y la llave del constructor

Documentación oficial

https://ionicframework.com/

Comandos para la administración de Bases de Datos NoSQL con Mongo

Beatriz Martínez Pérez — Sun, 18 Sep 2022 20:16:30 +0000

¿Qué es?

Una base de datos es un espacio en donde podemos guardar los datos de usuarios, estadísticas, precios, productos, etc. Existen diferentes modelos que se pueden adoptar dependiendo del tipo de aplicación que se desee generar.
Decir que una base de datos es NoSQL se refiere a que no es relacional, están basadas en documentos y su esquema ágil permite procesar rápidamente datos sin estructura y que requieren iteraciones rápidas.

Operadores de comparacion en Mongo

$eq - Igual a
$ne - Diferente a
$gt - Mayor a
$gte - Mayor o igual a
$lt - Menor a
$lte - Menor o igual a
$in - Valores dentro de un array
$nin - Valores que no estén dentro de un array

Operadores lógicos

$or - Filtra los documentos que cumplan con una condición u otra.
$and - Filtra los documentos que cumplan con todas las condiciones.
$not - Filtra los documentos que no coincidan con la condición.
{field: {$not : {condition}}}

Comandos para un CRUD

Create: insert y save.
Read: find y pretty.
Update: update, multi y upsert.
Delete: remove.

Comandos básicos

show dbs - Comando para ver las bases de datos existentes.
use miBD - Usar la base de datos 'miDB' o crearla si no existe.
db - Ver en cuál BD estamos.
db.createCollection("miColeccion") - Crear una colección.
show collections - Ver la lista de colecciones existentes.
db.miColeccion.drop() - Elimina la colección.
db.dropDatabase() - Elimina toda la base de datos.

Insertar documentos

db.miColeccion.insertOne({"campo":"valor","campo":"valor"}) - Insertar un documento.
db.miColeccion.insertMany([{...}, {...}, {...}]) - Insertar varios documentos.
db.miColeccion.save({_id:1, "campo": "valor", "campo": "valor"}) - Es otra forma de guardar un documento. El campo '_id' es opcional y no genera duplicidad si hay dos ID iguales.

Actualizar documentos

db.miColeccion.update({campoID:"valor"}, {campo:"valor"}) - Actualiza los datos que especifiquemos, dado el documento a editar (campoID).

Eliminar documentos

db.miColeccion.remove({_id: 1}) - Elimina el documento con el ID especificado.

Filtrar documentos

db.miColeccion.find() - Ver los documentos almacenados.
db.miColeccion.find().pretty() - Ver los documentos almacenados de manera legible.
db.miColeccion.find({"campo": "valor"}).pretty() - Devuelve el documento que coincida con el campo/valor que especificamos, con un formato legible.
db.miColeccion.find({},{campo1:1, campo2:2, _id:0}) - Retorna todos los documentos pero solo muestra los campos especificados.
db.miColeccion.find().pretty({campo:-1}) - Mostrar los registros ordenados por 'campo'. Ascendente: 1, descendente: -1.
db.miColeccion.find({campo: {$gte: new Date(1970,1,1)}}) - Filtra 'campo' a partir de la fecha especificada (1970).

Documento JS en Mongo

load("C://ruta/del/archivo.js") - Carga el archivo JS y lo ejecuta.

¿Cómo escribir un documento JS para ejecutar en Mongo?

db = db.getSiblingDB('miBD') - Este comando es equivalente a 'use', sirve para elegir la base de datos que queremos usar.
db.adminCommand('listDatabases') - Es el equivalente a show dbs.
db.getCollectionNames() - Nos mostrará los nombres de las colecciones existentes.
db.getUsers() - Retorna los usuarios.
db.getRoles({showBuiltinRoles: true}) - Este comando muestra los roles y los permisos configurados.
db.adminCommand({'getLog': ''}) - Muestra los logs.
cursor = db.miColeccion.find() - Asigna los documentos registrados a 'cursor'.
while(cursor.hasNext()) { printjson(cursor.next()); } - Recorrer los documentos e imprimirlos con un formato JSON.

Conceptos básicos de Docker

Beatriz Martínez Pérez — Thu, 18 Nov 2021 20:44:10 +0000

Docker te permite construir, distribuir y ejecutar cualquier app en cualquier lugar, mediante contenedores.
Para poder usarlo debes ingresar a https://www.docker.com/ y descargar 'Docker desktop' y crear una cuenta en DockerHub.

Conceptos importantes

Contenedores: Dónde va a correr la app, sirve para poder compartir las imágenes con otros servidores, computadoras, etc. Es una agrupación de procesos aislados del sistema, es decir, como si se estuviera corriendo una máquina virtual en tu computadora, pero mucho mejor.
Imágenes: Es la encapsulación del contenedor a compartir, lo que tú creas para que otros usuarios lo usen.
Volúmenes de datos: Archivos del sistema, pueden ser archivos, carpetas, imágenes, etc.
Redes: Permiten la comunicación entre servidores, son conexiones básicamente.

Comandos importantes

docker login Inicia sesión en DockerHub para poder usar el código que ya está escrito y compartir tu código.
docker run <contenedor> Ejecuta el contenedor.
- --name <nombre> Le asigna un nombre al contenedor.
- --mount src=<nombre_volumen>,dst=<ruta_contenedor> Asigna un volumen al contenedor, como -v.
- -i Abre el modo interactivo.
- -t Ejecuta su terminal.
- -d Lo ejecuta en segundo plano.
- -p <puerto_local>:<puerto_contenedor> Expone un puerto del contenedor para acceder en la máquina local.
- -v <ruta_local>:<ruta_contenedor> Copia todos la data de la ruta del contenedor en la ruta local especificada. Crea un volumen.
- --rm Cuando se cierra el contenedor, se elimina.
- --env <nombre_variable>=<valor> Define una variable de entorno.
- --scale <nombre_contenedor>=<número> Crea 'n' instancias del contenedor
- --memory <cantidad_memoria> Limita el uso de memoria.
docker ps Lista los contenedores activos y su información.
- -a Muestra también los contenedores inactivos.
- -q Muestra solo los ID de los contenedores.
- -l Muestra solo la información del último proceso.
docker inspect <id_contenedor | nombre_contenedor> Muestra información más completa sobre el contenedor dado su ID o nombre.
- --format '{{<atributo>.<propiedad>}}' Retorna solo la información solicitada.
docker rename <actual> <nuevo> Cambia el nombre de un contenedor.
docker rm <id_contenedor | nombre_contenedor> Elimina el contenedor seleccionado.
- -f Fuerza el borrado.
docker container prune Elimina todos los contenedores.
docker exec <nombre_contenedor> Conectar con un contenedor que ya está corriendo.
docker stop <nombre_contenedor> Mata un proceso.
docker logs Muestra los logs.
- -f Se queda esperando a que lleguen más logs.
- --tail <número> Muestra los últimos 'n' logs.
docker tag <nombre_contenedor> <nuevo_nombre_contenedor> Renombra la etiqueta del contenedor.
docker history <nombre_contenedor> Muestra los cambios hechos al contenedor.
docker system prune Borra todo lo que este inactivo.
docker stats Ver los recursos que está consumiendo el contenedor.
docker volume ls Lista los volúmenes activos.
docker volume create <nombre_volumen> Crea un volumen.
docker volume prune Borra los volúmenes inactivos.
docker cp <archivo> <nombre_contenedor>:<ruta_local> Copia un archivo del contenedor a la ruta local asignada
docker cp <nombre_contenedor>:/<directorio> <ruta_local> Copia un directorio desde el contenedor.
docker image ls Lista las imágenes.
docker pull : Trae la imagen desde DockerHub.
docker build <nombre_contenedor> . Construye una imagen.
- -t Agrega una etiqueta a la imagen.
docker push <nombre_contenedor> Publica el contenedor en DockerHub.
docker network ls Muestra las redes existentes.
docker network create <nombre_red> Crea una red.
- --attachable Permite que cualquiera se conecte a la red.
docker network inspect <nombre_red> Muestra información de esa red.
docker network connect <nombre_red> <nombre_contenedor> Conecta un contenedor a una red.
docker network prune Elimina todas las redes que no estén siendo usadas.
docker-compose up Corre todo lo que definimos en el archivo docker-compose.yml (redes, servicios, contenedores, etc).
- -d Lo corre en segundo plano.
docker-compose ps Muestra los contenedores activos.
docker-componse logs Muestra los logs de los servicios/contenedores.
- -f Muestra los logs conforme llegan.
- <nombre_contenedor> Muestra los logs de solo ese servicio.
docker-compose down Apaga los contenedores y elimina todo lo que tenga que ver con ellos.
docker-compose build <nombre_contenedor> Construye una imagen a partir de los archivos que tiene en disco, basandose en el archivo docker-compose.yml.

Dockerfile

Es un archivo de texto plano con instrucciones necesarias para crear una imagen.
Una estructura básica puede ser:

FROM node:12 //En qué se basa
COPY [".", "/usr/src/"] //Copia archivos
WORKDIR /usr/src/ //Cambia de directorio (como cd)
RUN npm install //Corre este comando
EXPOSE 3000 //Expone el puerto para usarlo en local
CMD ["node", "index.js"] //Comando a ejecutar cuando se corra el contenedor

Docker Compose

Permite escribir en un archivo lo que queremos que Docker realice sin usar los comandos. El archivo es docker-compose.yml. Es parecido a un archivo JSON, aquí importa el tabulado, es decir que si no pones el espaciado correcto, la aplicación no funcionará.
Ejemplo:

version: "3.8" //Versión de DockerCompose
services: //Componentes a ejecutarse
  app: //Servicio
    image: ubuntu //Imagen en la que se va a basar el contenedor
    environment: //Define las variables de entorno
      MONGO_URL: "mongodb://db:27017/test"
    depends_on: //Servicios que deben existir para que funcione
      - db
    ports: //Puertos a exponer y en que puerto
      -"3000:3000"
      -"2000-20003:2000" //Expone un rango de puertos
    volumes: //Define un volumen
      -.:/usr/src/ //De dónde toma los datos y en dónde los guarda
    build: . // Dónde va a construir la app
  db:
    image: mongo
  command: npx nodemon index.js //Qué comando se ejecutará

Docker Compose Override

Este archivo es como docker-compose.yml pero para cuando queremos trabajar en nuestro local sin hacer cambios que puedan afectar al resto del equipo.
No podemos dejar vacío este archivo, ya que puede generar errores.
Podríamos poner solo version: "3.8" para que funcione, ya que 'hereda' los datos de docker-compose.yml, si hay líneas repetidas, el archivo docker-componse.override.yml lo sobrescribe.
Es aconsejable no sobrescribir los puertos, sino dejarlos solo en un archivo, esto para evitar errores.

Docker Ignore

Aquí definimos los archivos que no serán tomados en cuenta para realizar el build. El archivo se llama: .dockerignore.
Su sintaxis es:

*.log
.dockerignore
.git
Dockerfile