¡Una nueva y emocionante característica llega a Angular! Las señales, estas proveen una nueva forma de comunicación de nuestro código que comunique a nuestras plantillas que los datos han cambiado. Esto mejora la capacidad de detección de cambios de Angular, lo que también mejora el rendimiento y hace nuestro código más reactivo.

Ya puedes probar las señales, están disponibles con acceso anticipado para desarrolladores (developer preview) en Angular v16, que se publicará en mayo de 2023. Te muestro como hacerlo más adelante.

Si gustas puedes ver el vídeo asociado (en inglés):

Encuentra el código de este tutorial aquí: https://stackblitz.com/edit/angular-signals-deborahk.

Antes de adentrarnos en detalles del "qué" y el "cómo", vamos a empezar con el "por qué". Entonces, ¿por qué usar las señales?

¿Por qué necesitamos las señales?

Empecemos con un ejemplo simple que no utiliza señales. Digamos que estás escribiendo código para realizar algunas operaciones matemáticas.

let x = 5;
let y = 3;
let z = x + y;
console.log(z);//~8

¿Qué es lo que este código imprime por consola? Así es, imprime 8.

En alguna parte más adelante en el código cambiamos el valor de x. ¿Qué valor de z se imprime por consola ahora?

let x = 5;
let y = 3;
let z = x + y;
console.log(z);

x = 10;
console.log(z);//~8

¡Aún imprime 8! Esto se debe a que el valor se asigna a z desde el inicio cuando la expresión se ha evaluado. La variable z no reacciona a los cambios en x o en y.

¡Pero queremos que nuestras variables reaccionen a los cambios!

Una de las razones por las que usamos Angular es para crear sitios web interactivos y reactivos, es decir, con capacidad de reaccionar a los cambios de los datos.

Como por ejemplo en la Figura 1. Cuando el usuario edita la cantidad, las variables relacionadas, como el total, sub-total e impuestos, deberían reaccionar y ajustar los costos automáticamente. Si el usuario decide borrar un item del carrito también queremos que las variables relacionadas sean capaces de re-calcular los costos.

Con las señales nuestro código puede ser más reactivo. En nuestro anterior ejemplo la implementación de señales se vería así:

const x = signal(5);
const y = signal(3);
const z = computed(() => x() + y());
console.log(z()); // 8

x.set(10);
console.log(z()); // 13

Veremos la sintaxis y lo demostraremos a detalle más adelante. Por ahora, el código de arriba define dos señales: x y y además de darles valores iniciales de 5 y 3. Entonces definimos una señal computada z, que es la suma de x y y. Debido a que las señales proveen notificaciones de cambios cuando cambian los valores de las señales x o y, cualquier valor computado a partir de esas señales se re-calculará automáticamente. ¡Este código es reactivo! ¡Excelente!

Las señales computadas reaccionan y se re-calculan cuando cualquiera de sus señales dependientes cambia. Si una señal está vinculada en una plantilla de Angular, al cambiar dicha señal, el mecanismo de detección de cambios de Angular actualiza cualquier vista que pueda leer la señal. Y los usuarios visualizan los valores modificados.

Por lo que es posible dar respuesta a la pregunta de, ¿por qué necesitamos las señales? De la siguiente manera:

• Las señales permiten la reactividad.
• Usando señales podemos tener mayor control en la detección de cambios, lo cual puede mejorar el desempeño.

Profundicemos un poco más para entender lo que es una señal y cómo se usa.

¿Qué es una señal?

Podemos pensar de una señal como un valor que además tiene la capacidad de notificar cambios. Una señal es un tipo especial de variable que almacena un valor. Pero a diferencia de otras variables, una señal también provee notificaciones cuando el valor de la variable cambia.

Imagínate una variable normal como si fuera un estante o repisa, como en el lado izquierdo de la figura 2. Cuando un valor se asigna a la variable, ésta se colocaría en el estante. Cualquier código dentro del alcance puede simplemente ver (leer) la variable en el estante.

Una señal tiene mayor parecido a una caja, como se muestra al lado derecho de la figura 2. Al crear una señal, creamos algo análogo a una caja y el valor se coloca dentro de ésta. Cuando el valor que se encuentra dentro cambia, la caja emite un brillo para avisarle. Para leer la señal, es decir el valor almacenado, primero debemos abrir "la caja" usando paréntesis: x(). Técnicamente llamamos a la función "getter" (literal de conseguidor, método o función que devuelve un valor) de la señal para leer el valor de esta.

Ahora pues, ya sabemos que es una señal.

• Una señal es una variable con notificaciones de cambios.
• Es un valor reactivo o bien un "reactivo primitivo".
• Siempre tiene un valor
• Es síncrona.
• No es un sustituto o remplazo de RxJS ni de Observables para operaciones asíncronas como http.get.

¿Dónde podemos usarlas?

• En componentes para monitorear su estado local.
• En directivas.
• En servicios para compartir el estado entre componentes.
• Para su lectura en una plantilla (del inglés template) para mostrar lo valores.
• O en cualquier otra parte de tu código.

A continuación, vayamos paso a paso viendo cómo crear y usar señales.

Cómo crear una señal

Para usar una señal tenemos primero, por supuesto, que crearla.

cantidad = signal<number>(1);

Esta es la sintaxis para escribir el código para crear e inicializar una señal usando el método constructor signal().

De forma opcional como podemos ver, es posible pasar un parámetro genérico para definir el tipo de dato de la señal. Una señal puede ser de tipo string, number, array, object o cualquier tipo de dato. En muchos casos el tipo de dato puede inferirse y por lo tanto no es necesario u obligatorio pasar el parámetro de tipo genérico.

Pasemos al constructor el valor por defecto para nuestra señal, ya que una señal siempre debe tener un valor, y por lo tanto, es necesario inicializarlas con un valor por defecto.

Aquí te muestro algunos otros ejemplos:

cantidad = signal(1);

cantidadDisponible = signal([1, 2, 3, 4, 5, 6]);

vehiculoSeleccionado = signal<Vehiculo>({ 
  id: 1,
  nombre: 'AT-AT', 
  precio: 19416.13
});

vehiculos = signal<Vehiculo[]>([]);

La primera línea de este código crea una señal numérica con un valor por defecto (predefinido) de 1. Ya que el valor predeterminado es de tipo number, la cantidad es una señal que contiene un número. El parámetro del tipo genérico no se necesita pasar, ya que como vimos el tipo del dato es inferido automáticamente.

La segunda línea es una señal que contiene un arreglo de números, donde su valor predefinido corresponde con los valores del 1 al 6. De nuevo, no necesitamos pasar el parámetro de tipo genérico ya que el tipo de dato se infiere automáticamente a partir del tipo de dato del valor que hemos pasado.

La señal vehiculoSeleccionado contiene un objeto de tipo Vehiculo. En este ejemplo el tipo no puede inferirse, por lo que especificamos un parámetro de tipo genérico para Vehiculo.

La señal vehiculos contiene un arreglo para objetos de tipo Vehiculo, que está vacío por defecto. Para que este arreglo posea tipos estático y pueda recibir elementos del tipo de dato Vehiculo, agregamos el parámetro genérico de tipo de datos <Vehiculo[]>.  

Una señal que fue creada utilizando el constructor es editable, por lo que puedes asignarle un valor nuevo o diferente, actualizarla en base a su valor actual o mutar su contenido. En breve veremos ejemplos de cómo realizar estas operaciones.

Una vez que hayas creado una señal es posible que quieras leer su valor.

Cómo leer una señal

Anteriormente planteamos pensar que una señal es una caja. Hablando metafóricamente podemos decir que para leer el valor de una señal es necesario primero abrir la caja. Ya que las señales son funciones, esto lo hacemos invocando la señal con el uso de paréntesis.

quantity();

Empecemos con el nombre de la señal y enseguida con el paréntesis de apertura y luego el de cierre. Técnicamente esto a su vez invoca a la función "getter", la cual es creada "por debajo", por lo que no es visible en el código.

Cuando se trabaja con Angular es común leer las señales en el "template" (plantilla).

<select
    [ngModel]="cantidad()"
    (change)="alSeleccionarCantidad($any($event.target).value)">
  <option *ngFor="let c of cantidadDisponible()">{{ c }}</option>
</select>

<div>Vehículo: {{ vehiculoSeleccionado().nombre }}</div>
<div>Price: {{ vehiculoSeleccionado().precio }}</div>
<div [style.color]="color()">Total: {{ precioTotal() }}</div>

La plantilla de arriba muestra una caja de selección de cantidad. La directiva [ngModel] lee el valor de la señal cantidad y crea un enlace o "binding" a ese valor.

El enlace o "binding" al evento change invoca el método alSeleccionarCantidad() del componente.

El elemento html option usa la directiva ngFor para iterar por cada elemento del arreglo en la señal cantidadDisponible. Lee la señal y crea una opción en el select para cada elemento del arreglo.

Debajo del elemento select encontrarás tres elementos div, el primero lee la señal vehiculoSeleccionado, luego accede a su propiedad nombre. El segundo elemento div lee la señal vehiculoSeleccionado y muestra su propiedad precio. El último div lee la señal precioTotal (que no hemos definido aún), y utiliza el valor de la señal color (que tampoco hemos definido todavía) para determinar el color del texto.

Es importante nota que al leer una señal siempre obtendremos el valor actual, y el código no tiene conocimiento de ningún valor previo.

Cuando el usuario elige una cantidad diferente en el elemento select queremos cambiar el valor de la señal cantidad. De esa manera la señal cantidad se transforma en la "fuente de verdad" para la cantidad seleccionada por el usuario. Veamos cómo hacerlo a continuación.

Cómo cambiar el valor de una señal

El método set reemplaza el valor de una señal con un nuevo valor. Básicamente "abre la caja", quita el ítem actual y asigna un nuevo ítem que tomará el lugar del anterior.

this.cantidad.set(cant);

Una situación común es cambiar el valor de la señal en base a una acción del usuario. Por ejemplo:

• El usuario selecciona una nueva cantidad usando el elemento select.
• El evento ligado al elemento select invoca al método alSeleccionarCantidad() y pasa la cantidad seleccionada por el usuario.
• La acción del usuario se maneja en el componente usando la función o método definido para este propósito.
• El nuevo valor se asigna a la señal cantidad.

Este es un ejemplo de una función para el manejo de eventos (event handler):

alSeleccionarCantidad(cant: number) {
  this.cantidad.set(cant);
}

En el momento en que se haya asignado o re-asignado la señal, el código notifica a cualquier consumidor de la señal que esta ha cambiado. En este contexto, un consumidor es cualquier código que tenga interés en recibir notificaciones de cambios del valor de la señal.

¿Cómo es que el consumidor indica que tiene interés en ser notificado de los cambios de una señal en particular?

Si un código lee una señal, ese código será notificado cuando la señal cambie.

Si una plantilla lee una señal, será notificada cuando la señal cambie y la "vista" (view) sea programada para volver a renderizarse.

Por lo que el acto de leer una señal registra el interés del consumidor de observar el valor y los cambios de dicha señal. El equipo de Angular le llama a esto la regla de oro de las señales en componentes: "la detección de cambios en un componente se agendará cuando y sólo cuando la lectura de una señal en el plantilla notifique a Angular que su valor a cambiado".

Aquí un ejemplo para ilustrar el proceso. Digamos que hay algo de trabajo realizándose dentro del método (mostrado abajo) que busca ajustar la cantidad. Digamos que quizá el caso de uso podría ser algo como una promoción, que si por ejemplo el usuario elige una cantidad igual o mayor a 5 entonces se lleva uno gratis. El punto es que la señal cantidad podría cambiar en varias ocasiones durante la ejecución del método.

alSeleccionarCantidad(cant: number) {
  this.cantidad.set(qty);
  
  this.cantidad.set(5);
  this.cantidad.set(42);
}

La cantidad se muestra en la plantilla usando la vinculación de Angular (binding) como se muestra abajo. Ya que el vínculo "lee" la señal cantidad, la plantilla "registra" su interés en recibir notificaciones de cambios.

//Angular binding (vinculación en la plantilla)
{{ cantidad() }}

Cuando el usuario elige la cantidad el método alSeleccionarCantidad() se ejecuta. El código en este método primero asigna el valor seleccionado por el usuario a la señal cantidad. Luego cuando la nueva señal se asigna esta genera una notificación. En este punto, se agenda la ejecución del mecanismo de detección de cambios de Angular, pero no tiene la oportunidad de hacerlo sino hasta después de la ejecución del método alSeleccionarCantidad().  

Entonces, el método alSeleccionarCantidad() continúa asignando el número 5 a la señal, que genera otra notificación de cambio. De nuevo el mecanismo de detección de cambios de Angular es llamado a ejecutarse pero aún debe esperar a que el método alSeleccionarCantidad() termine su ejecución. El método entonces asigna el valor 42 a la señal y el proceso se repite.

Cuando se completa la ejecución del método alSeleccionarCantidad() finalmente será turno de ejecución del mecanismo de detección de cambios de Angular. La plantilla lee la señal y obtiene su valor, que es 42. La plantilla no es "consciente" de ninguno de los valores anteriores. La vista se vuelve a "renderizar" y el nuevo valor de la señal cantidad se mostrará.

Si la señal cambia, cualquier "consumidor" interesado en su lectura será notificado. Pero el consumidor no recibirá el nuevo valor, sino que, hasta la próxima vez, cuando sea el turno de ejecución del consumidor es entonces que podrá "leer" el valor actual de la señal.

Si conoces cómo funcionan los observables en RxJS podrás notar que las señales pueden ser distintas ya que no emiten valores cómo lo hacen los observables, además de que no requieren una suscripción.

Además del método set(), también hay otras 2 maneras de cambiar una señal: update() y mutate(). El método set() reemplaza el valor de una señal con un valor nuevo, metafóricamente remplazado el contenido del "cajón" de la señal. Pásale el nuevo valor al método set().

// Remplaza el valor
this.cantidad.set(cant);

El método update() actualiza la señal en base a su valor actual. Pasa una función de "flecha" al método update(), esta provee el valor actual de la señal para que sea posible cambiarlo programáticamente según sea necesario. En el siguiente código la cantidad se duplica.

// Actualizar el valor de la señal en base al valor actual
this.cantidad.update(cant => cant * 2);

El método mutate() modifica el contenido del valor de una señal, no el valor de la señal en sí. Úsalo con arreglos para modificar sus elementos y con objetos para modificar sus propiedades. En la siguiente línea de código se incrementa 20% el precio de un vehículo.

this.vehiculoSeleccionado.mutate(v => v.precio = v.precio + (v.precio * .20));

Independientemente de la forma en cómo se modifica la señal, los consumidores serán notificados que ha sucedido un cambio, ellos pueden entonces leer el nuevo valor de la señal cuando es su turno de ejecución.

Cómo definir una señal computada

Frecuentemente tenemos variables en nuestro código que dependen de otras variables, por ejemplo, el precio total de un ítem es su precio unitario por el número o cantidad de ítems deseados de este tipo. Si el usuario cambia la cantidad queremos también cambiar el precio total, para lo que utilizamos señales computadas (computed signals).

Define una señal computada llamando la función computed() de creación de señales computadas, esta crea una nueva señal que depende de otras. Ahora pasemos a la función computed() una función que lleve a cabo las operaciones deseadas, esta tendrá acceso a la lectura de el valor de una o más señales para llevar a cabo su computo.

precioTotal = computed(() => this.vehiculoSeleccionado().precio * this.cantidad());

color = computed(() => this.precioTotal() > 50000 ? 'verde' : 'azul');

La primera línea de código de arriba define una señal computada precioTotal al llamar la función de creación computed(), la función que pasamos a esta función lee las señales vehiculoSeleccionado y cantidad, si cualquiera de estas cambia, la señal computada será notificada y leerá el nuevo valor la próxima vez que se ejecute.

La segunda línea define la señal computada color, que le asigna el valor verdeo azul dependiendo del valor de la señal precioTotal. La plantilla puede vincular a esta señal para mostrar el estilo apropiado.

Una señal computada es sólo lectura y no puede ser modificada con los métodos set(), update() ni mutate(), además su valor se re-evalúa o re-computa cuando:

• Uno o más de sus señales dependientes ha cambiado.
• Y el valor de la señal computada ha sido leído.

La señal computada se "memoiza", lo que quiere decir que guarda el resultado evaluado, este es re-utilizado la próxima vez que es leído.

Digamos por ejemplo que tenemos lo siguiente en nuestra plantilla:

Precio extendido: {{ precioTotal() }}
Precio total: {{ precioTotal() }}
Cantidad a pagar: {{ precioTotal() }}

La primera vez que la plantilla lea la señal computada precioTotal, el valor se calcula y se guarda en memoria, las siguientes 2 veces que se lee, se re-utiliza el valor almacenado anteriormente. Dicho valor no se re-calcula a menos que alguna de sus señales dependientes haya cambiado.

Cómo usar un efecto

Podría haber momentos en que necesites ejecutar código en respuesta al cambio de alguna señal y que este código tenga efectos secundarios, por ello quiero decir que este código haga un llamado a alguna API o que realice alguna otra operación no relacionada a la señal, en estos casos debemos usar effect().

Por ejemplo, digamos que quieres inspeccionar tu código en busca de errores (debug) y para ello deseas imprimir el valor de la señal usando console.log cada vez que esta sufra un cambio, como sabemos llamar console.log es un efecto secundario.

Para definir un efecto debemos llamar la función creacional effect(). Pasémosle a esta función la operación a realizar, la cual será ejecutada nuevamente cada vez que el código reaccione a un cambio en cualquiera de la señales dependientes.

effect(() => console.log(this.vehiculoSeleccionado()));

La función effect() puede ser invocada desde otra función, pero frecuentemente es llamada desde el constructor u otro código de inicialización, dado que a su vez prepara un tipo de función manejadora (handler).

Alternativamente un efecto puede definirse de forma declarativa como se muestra a continuación:

e = effect(() => console.log(this.vehiculoSeleccionado()));

Un efecto no debería cambiar el valor de ninguna señal, sin embargo si necesitas cambiar una señal en base a un cambio a otra señal dependiente es recomendable que utilices una señal computada en su lugar.

Cómo verás, no es muy común utilizar los efectos, aunque son útiles para imprimir valores por consola o para llamar APIs externas, pero no los uses para trabajar con RxJS ni Observables; habrá funcionalidades de las señales que serán útiles para convertir a y desde los observables.

Cuándo usar señales

Algunas sugerencias.

En primer lugar, continúa utilizando "handlers" en tus componentes como has venido haciendo hasta ahora para manejar o responder a las acciones de los usuarios. Acciones como realizar una selección de una lista desplegable, hacer clic en un botón o ingresar datos en una "caja de texto".

Usa una señal o señal computada en un componente para cualquier estado que pueda cambiar. En este contexto, estado se refiere a cualquier dato que sea administrado por el componente. Cualquier cosas desde una bander estaCargandose hasta la página actualmente mostrada con los datos seleccionados por el usuario podrían ser señales. Las señales son especialmente útiles cuando se muestran los datos en la plantilla que deben reaccionar a cambios dependientes de otras acciones.

Las señales compartidas deberían ser servicios. Digamos que tenemos un arreglo con los vehículos devueltos que se comparte entre componentes, este podría ser un servicio.

Continúa usando los observables para operaciones asíncronas como las llamadas a http.get(), cabe mencionar que hay otras funcionalidades que vendrán con las señales para equiparar más fielmente con los observables.

Concluyendo

Las señales representan un avance mayúsculo en las capacidades de programación reactiva y detección de cambios de Angular. Este tutorial respondió a las preguntas: "¿Por qué?", "¿Qué?" y "¿Cómo?" así como "¿Dónde?" y "¿Cuándo?" también.

Las señales están disponibles en vista previa para desarrolladores en Angular v16, como parte de esta vista previa las señales se incluyen en el modelo de detección de cambios. Se espera que futuras capacidades de las señales mejorarán la detección de cambios y marcarán los componentes para revisión de una forma similar como se lleva a cabo actualmente al usar OnPush con la pipa asíncrona (async pipe).  

Una forma sencilla y fácil de probar las señales es usar Stackblitz que es un editor de código en línea que trabaja muy bien con Angular y no requiere instalaciones. Para usar Stackblitz con señales:

1. Navega al sitio de Stackblitz: www.stackblitz.com.
2. Haz clic en el icono de Angular para crear un proyecto Angular.
3. Edita el archivo package.json resultante y cambia las versiones de los paquetes de @angular a sus versiones más actuales "pre-realease" (Angular v16).
4. Guarda el proyecto para que se actualicen las dependencias.
5. Dale una probada a las señales.

Para ver estos pasos en acción dale un vistazo al final del siguiente vídeo (en inglés):

También puedes empezar usando el enlace a mi proyecto https://stackblitz.com/edit/angular-signals-deborahk. Asegúrate de crear una copia para que puedas realizar tus propios cambios.

¡Las señales llegaron! Van a mejorar la capacidad de detección de cambios y la reactividad de tu código, además de hacerlo de más fácil edición y lectura, además que son muy divertidas de usar.

Este manual sigue la regla 80/20. Aprenderás 80% del lenguaje de programación C en 20% del tiempo.

Este enfoque te dará una visión amplia del lenguaje.

Este manual no trata de cubrir todo lo relacionado con C, sino que se enfoca en el núcleo del lenguaje, tratando de simplificar los temas más complejos.

Puedes tener la versión PDF y ePub de este manual en inglés acá (hecha por el autor original)

¡Disfruta!

Tabla de Contenidos

1. Introducción a C
2. Variables y tipos
3. Constantes
4. Operadores
5. Condicionales
6. Bucles,
7. Arréglos
8. Strings (Cadenas de texto)
9. Punteros
10. Funciones
11. Entrada y Salida
12. Alcance de las variables
13. Variables estáticas
14. Variables Globales
15. Definiciones de tipos
16. Tipos enumerados
17. Estructuras
18. Parámetros de línea de comandos
19. Archivos de Cabecera
20. Preprocesador
21. Conclusión

Introducción a C

C es probablemente el lenguaje de programación más conocido. Es usado como un lenguaje de referencia para cursos de programación alrededor de todo el mundo, y es probablemente el lenguaje más aprendido por las personas junto con Python y Java.

Recuerdo que fue mi segundo lenguaje de programación después de Pascal.

C no es sólo algo que usan los estudiantes para aprender programación. No es un lenguaje académico. Y diría que no es el lenguaje más fácil, porque C es un lenguaje de programación de bajo nivel.

Al día de hoy, C es ampliamente usado en dispositivos integrados, y alimenta la mayoría de los servidores de internet, los cuales están construidos usando Linux. El Kernel de Linux está construido usando C, esto significa también que alimenta el núcleo de todos los dispositivos Android. Podríamos decir que justo en este momento, el código C se ejecuta en un gran número de aplicaciones en el mundo entero. Lo cual es bastante notable.

Cuando fue creado, C se consideraba un lenguaje de alto nivel, porque era portable entre máquinas. Ahora damos por sentado que podemos ejecutar un programa escrito en una Mac, Windows o Linux, usando tal vez Node.js o Python.

Hace algún tiempo, esto simplemente no era el caso. Lo que C trajo a la mesa era un lenguaje simple de implementar y que tenía un compilador que podía ser fácilmente portado a diferentes máquinas.

Dije un compilador: C es un lenguaje compilado, como Go, Java, Swift o Rust. Otros lenguajes de programación populares como Python, Ruby o JavaScript son interpretados. La diferencia consiste en: un lenguaje compilado genera un archivo binario que puede ser directamente ejecutado y distribuido.

C no tiene recolección de basura. Esto significa que tenemos que manejar la memoria por nuestra cuenta. Es una tarea compleja, y una que requiere mucha de nuestra atención para prevenir bugs, pero esto hace también que C sea ideal para escribir programas para dispositivos integrados como Arduino.

C no esconde la complejidad y capacidades de la máquina debajo. Tienes mucho poder, una vez que sabes qué puedes hacer.

Quiero presentarte el primer programa C, el cual llamaremos ¡"Hola Mundo!"

hola. c

#include <stdio.h>

int main(void) {
    printf("Hola Mundo!");
}

Describamos el código del programa: primero importamos la librería stdio (el nombre significa librería estándar de entradas y salidas).

Esta librería nos da acceso a las funciones I/O, es decir de entrada y salida (input/output).

C es un lenguaje muy pequeño en su núcleo, y cualquier cosa que no sea parte del núcleo se provee a través de librerías. Algunas de estas librerías están construidas por programadores normales que las habilitan para que otros los usen. Algunas librerías están integradas en el compilador. Como stdio y otras.

stdio es la librería que provee la función printf().

Esta función está envuelta en la función main(), que es el punto de entrada de cualquier programa en C.

Pero entonces, ¿Qué es una función?

Una función es una rutina que toma uno o más argumentos, y devuelve un valor.

En el caso de la función main() no recibe argumentos, y retorna un entero. Identificamos esto usando la palabra clave void para el argumento, y la palabra clave int para el valor de retorno.

La función tiene un cuerpo, el cual está entre los paréntesis de llave. Dentro del cuerpo tenemos todo el código que la función necesita para realizar sus operaciones.

La función printf() está escrita de forma diferente, como podrás ver. Esta no tiene un valor de retorno definido, y le pasamos una cadena de texto entre comillas dobles. Nosotros no especificamos el tipo de argumento.

Esto es porque esta es una invocación de función. En algún lugar, dentro de la librería stdio, la función printf está definida como:

int printf(const char *format, ... );

No necesitas entender qué significa esto por ahora, pero, en resumen, esta es la definición. Y cuando llamamos a printf("Hola Mundo!"); ahí es donde se ejecuta la función.

La función main() que definimos arriba:

#include <stdio.h>

int main(void) {
    printf("¡Hola Mundo!");
}

será ejecutada por el sistema operativo cuando a su vez, el programa sea ejecutado.

¿Cómo ejecutamos un programa C?

Como mencioné, C es un lenguaje compilado. Para ejecutar el programa debemos compilarlo primero. Cualquier computador con Linux o MacOS ya viene con un compilador C integrado. Para Windows, puedes usar el subsistema de Windows para Linux (WSL).

Cuando abras la terminal puedes escribir gcc, y este comando debería retornar un error diciendo que no especificaste un archivo:

Esto está bien. Significa que el compilador está ahí, y podemos comenzar a usarlo.

Ahora escribiremos el programa de arriba en el archivo hola.c. Puedes usar cualquier editor, para mantener la simplicidad usaré el editor nano en la línea de comandos:

Escribe el programa:

Ahora presiona ctrl-x para salir:

Confirma presionando la tecla S, y luego presiona enter para confirmar el nombre del archivo:

Esto de debería traer de vuelta a la terminal:

Ahora escribe

gcc hola.c -o hola

Esto debería haber generado un ejecutable hola. Ahora escribe ./hola para ejecutarlo:

Antepongo ./ al nombre del programa para decirle al terminal que el comando es para el directorio actual.

¡Impresionante!

Ahora si invocas ls -al hola, verás que el programa es de tan solo 16KB:

Este es uno de los pros de C: está altamente optimizado, esta también, es una de las razones por las que es bueno para sistemas integrados que tienen una cantidad limitada de recursos.

Variables y tipos

C es un lenguaje de tipo estático.

Esto significa que cualquier variable tiene un tipo asociado, y si tipo es conocido al momento de la compilación.

Esto es muy distinto a como trabajamos con variables en Python, JavaScript, PHP y otros lenguajes interpretados.

Cuando creas una variable en C, tienes que especificar el tipo de variable en la declaración.

En este ejemplo iniciamos una variable edad con el tipo int:

int edad;

Un nombre de variable puede tener mayúsculas, minúsculas, puede contener dígitos y el guion bajo, pero no puede empezar con un dígito. EDAD y Edad10 son nombres de variables válidos, 1edad no lo es.

También puedes iniciar la declaración de una variable especificando su valor inicial:

int edad = 37;

Una vez que declaras una variable podrás usarla en el código de tu programa. Puedes cambiar su valor en cualquier momento, usando el operador =, por ejemplo en edad=100; (siempre que el nuevo valor sea del mismo tipo).

En este caso:

#include <stdio.h>

int main(void) {
    int edad = 0;
    edad = 37.2;
    printf("%u", edad);
}

El compilador lanzará una advertencia en tiempo de compilación, y convertirá el número decimal en un número entero.

Los tipos de datos integrados en C son int, char, short, long, float, double y long double. Aprendamos más sobre ellos.

Números enteros

C nos provee los siguientes tipos para definir valores enteros:

• char
• int
• short
• long

La mayoría del tiempo es probable que uses int para almacenar enteros. Pero en algunos casos podrías querer usar una de las otras 3 opciones.

El tipo char es comúnmente usado para almacenar letras de la tabla ASCII, pero puede ser usado para guardar pequeños enteros desde -128 a 127. Esto usa al menos 1 byte.

int usa al menos 2 bytes. short usa al menos 2 bytes. long usa al menos 4 bytes.

Como puedes ver, no se nos garantiza los mismos valores para diferentes entornos. Sólo tenemos una indicación. El problema es que el número exacto de bits que puede ser almacenado en cada tipo de dato depende de la implementación y arquitectura.

Tenemos garantizado que short no es más grande que int. Y tenemos garantizado que long no es más pequeño que int.

El estándar de especificaciones ANSI C determina los valores mínimos de cada tipo, y gracias a este, podemos al menos saber cuál es el valor mínimo que podemos esperar tener a nuestra disposición.

Si estás programando C en un Arduino, diferentes placas tendrán diferentes límites.

En una placa Arduino Uno, int almacena un valor de 2 byte, con rangos desde -32,768 a 32,767. En Arduino MKR 1010 int almacena un valor de 4 bytes, con rangos desde -2,147,483,648 a 2,147,483,647. Una gran diferencia.

En todas las placas Arduino, short almacena valores de 2 bytes, con rangos desde -32,768 a 32,767. long almacena 4 bytes, con rangos desde -2,147,483,648 a 2,147,483,647.

Enteros sin signo

Para todos los tipos de datos arriba, podemos anteponer unsigned para comenzar el rango desde 0, en vez de números negativos. Esto podría tener sentido en muchas formas.

• unsigned char tiene un rango de 0 hasta al menos 255
• unsigned int tiene un rango de 0 hasta al menos 65,535
• unsigned short tiene un rango de 0 hasta al menos 65,535
• unsigned long tiene un rango de 0 hasta al menos 4,294,967,295

Problema con el desbordamiento

Dados todos estos límites puede surgir una duda: ¿Cómo podemos estar seguros de que nuestros números no excederán los límites? Y ¿Qué pasa si excedimos estos límites?

Si tienes un número de tipo unsigned int en 255, y lo incrementas, tendrás 256 de retorno, como podrías esperar. Si tienes un número de tipo unsigned char en 255, y lo incrementas, obtendrás un 0 de retorno. Este se resetea empezando desde el posible valor inicial.

Si tienes un número de tipo unsigned char en 255 y luego sumas 10 a él, obtendrás el número 9:

#include <stdio.h>

int main(void) {
    unsigned char j = 255;
    j = j + 10:
    printf("%u", j); /*9*/
}

Si no tienes un valor con signo, el comportamiento es indefinido. Esto básicamente te dará un número gigante que puede variar, como en este caso:

#include <stdio.h>

int main(void) {
    char j = 127;
    j = j + 10;
    printf("%u", j); /* 4294967177 */
}

En otras palabras, C no te protege de salirte de los límites de un tipo. Tienes que hacerte cargo por ti mismo.

Advertencias cuando declaras el tipo equivocado

Cuando declaras una variable y la inicializas con el valor equivocado, el compilador gcc (el que probablemente estés usando) debería advertirte:

#include <stdio.h>

int main(void) {
    char j = 1000;
}

Y también te advierte en asignaciones directas:

#include <stdio.h>

int main(void) {
    char j;
    j = 1000;
}

Pero no te advertirá si aumentas el número usando +=, por ejemplo:

#include <stdio.h>

int main(void) {
    char j = 0;
    j += 1000;
}

Números de punto flotante

Los tipos de punto flotante (float) pueden representar un conjunto de valores mucho más grandes de lo que pueden hacer los enteros (int), también pueden representar fracciones, algo que los enteros no pueden hacer.

Al usar números de punto flotante, representamos lo números como números decimales multiplicados por potencias de 10.

Tal vez veas números de punto flotante escritos como:

• 1.29e-3
• -2.3e+5

y de otras formas aparentemente extrañas.

Los siguientes tipos:

• float
• double
• long double

son usados para representar números con punto decimal (tipos de punto flotante). Todos ellos pueden representar números positivos y negativos.

Los requerimientos mínimos para cualquier implementación en C es que float puede representar un rango entre 10^-37 y 10^+37, y típicamente es implementado usando 32 bits. double puede representar conjuntos más grandes de números. long double puede tener incluso más números.

Las cifras exactas, al igual que con los números enteros, dependen de la implementación.

En una Mac moderna, un float es representado en 32 bits, y tiene una precisión de 24 bits significativos, de los cuales 8 bits son usados para codificar el exponente.

Un número double se representa en 64 bits, con una precisión de 53 bits significativos, 11 bits de los cuales son usados para codificar el exponente.

El tipo long double es representado en 80 bits, tiene una precisión de 64 bits significativos. 15 bits son usados para codificar el exponente.

En tu equipo, ¿cómo puedes determinar el tamaño específico de los tipos? Puedes escribir un programa para hacer eso:

#include <stdio.h>

int main(void) {
  printf("char size: %lu bytes\n", sizeof(char));
  printf("int size: %lu bytes\n", sizeof(int));
  printf("short size: %lu bytes\n", sizeof(short));
  printf("long size: %lu bytes\n", sizeof(long));
  printf("float size: %lu bytes\n", sizeof(float));
  printf("double size: %lu bytes\n", 
    sizeof(double));
  printf("long double size: %lu bytes\n", 
    sizeof(long double));
}

En mi sistema, Windows moderno, imprime:

char size: 1 bytes
int size: 4 bytes
short size: 2 bytes
long size: 8 bytes
float size: 4 bytes
double size: 8 bytes
long double size: 16 bytes

Constantes

Hablemos ahora de las constantes:

Una constante se declara de forma similar a las variables, excepto que anteponemos la palabra reservada const y siempre tienes que especificar un valor.

De la siguiente forma:

const int age = 37;

Esto es C perfectamente válido, aunque es común declarar las constantes con mayúsculas, así:

const int AGE = 37;

Esta es sólo una convención, pero una que puede ayudarte mucho mientras escribes o lees un programa C, ya que mejora su legibilidad. Los nombres en mayúscula significan constantes, nombres en minúsculas significas variables.

Un nombre de constante sigue las mismas reglas que los nombres de variables: pueden contener letras mayúsculas o minúsculas, pueden contener dígitos y el guión bajo (_), pero no pueden comenzar con un dígito. EDAD y Edad10 son nombres de variables válidos, 1EDAD no lo es.

Otra forma de definir constantes y mediante el uso de la siguiente sintaxis:

#define EDAD 37

En este caso, tu no necesitas agregar el tipo, y tampoco necesitas agregar el signo igual =, y omites el punto y coma al final.

El compilador C inferirá el tipo del valor especificado en tiempo de compilación.

Operadores

C ofrece una amplia variedad de operadores que podemos usar para operar en los datos.

En particular, podemos definir varios grupos de operadores:

• operadores aritméticos
• operadores de comparación
• operadores lógicos
• operadores de asignación compuestos.
• operadores bitwise
• operadores de punteros
• operadores de estructura
• operadores misceláneos

En esta sección voy a detallar todos ellos, usando dos variables imaginarias a y b como ejemplos.

Mantendré los operadores bitwise, operadores de estructura y punteros fuera de esta lista por simplicidad

Operadores aritméticos

En este macro-grupo separaré operadores binarios y unarios.

Los operadores binarios utilizan dos operandos:

Los operadores unarios toman sólo un operando:

La diferencia entre a++ y ++a es que a++ incrementa la variable a después de usarla. ++a incrementa la variable antes de usarla.

Por ejemplo:

int a = 2; 
int b; 
b = a++ /* b es 2, a es 3*/ 
b = ++a /* b es 4, a es 4*/

Lo mismo aplica para el operador decremento.

Operadores de comparación

‌

Operadores lógicos

‌

• ! No (NOT, ejemplo: !a)
• && Y (AND, ejemplo: a && b)
• || O (OR, ejemplo: a || b)

Estos operadores son geniales cuando trabajamos con valores booleanos.

Operadores de asignación compuestos

Estos operadores son útiles para realizar asignaciones y a la vez realizar cálculos aritméticos:

Operador Ternario

El operador ternario es el único operador en C que trabaja con 3 operandos, y es una forma corta de expresar condicionales.

Así luce:

<condición> ? <expresión> : <expresión>

Ejemplo:

a ? b : c‌

Si a retorna true, entonces se ejecuta b, de otra forma se ejecuta c.

El operador ternario es funcionalmente igual que un condicional if/else, excepto que su expresión es más corta y que se puede insertar en una expresión.

sizeof

El operador sizeof retorna el tamaño del operando que pases cómo argumento. Puedes pasar una variable, o incluso un tipo.

Ejemplos de uso:

#include <stdio.h> 
int main(void) { 
	int edad = 37; 
    print("%ld\n", sizeof(edad)); 
    print("%ld", sizeof(int)); 
}

Precedencia de operadores

Con todos estos operadores (y más, que no he cubierto en este artículo, incluyendo bitwise, operadores de estructura, y operadores de puntero), debemos poner atención cuando los usamos juntos en una única expresión.

Supón que tienes esta operación:

int a = 2; 
int b = 4; 
int c = b + a * a / b - a;

¿Cuál es el valor de c? ¿Acaso se ejecuta la adición antes que la multiplicación y la división?

Hay un conjunto de reglas que nos ayudarán a resolver este acertijo.

En orden de menor a mayor precedencia, tenemos:

• el operador de asignación =
• los operadores binarios + y -
• los operadores * y /
• los operadores unarios + y -

Los operadores también tienen la regla de asociatividad, la cual siempre es de izquierda a derecha, excepto por los operadores unarios y el operador de asignación.

En:

   int c = b + a * a / b - a

Primero ejecutamos a * a / b, del cual, dada la regla de izquierda-a-derecha, podemos separarlo en a * a y el resultado dividirlo entre /b: 2* 2 = 4, 4 / 4 = 1.  

Luego podemos realizar la suma y la sustracción: 4 + 1 - 2. El valor de c es 3.

En cualquier caso, sin embargo, querrás asegurarte de darte cuenta de que puedes usar paréntesis para hacer que cualquier expresión sea más fácil de leer y de comprender.

Los paréntesis tienen prioridad más alta sobre cualquier cosa.

La expresión de más arriba puede ser reescrita como:

int c = b + ((a * a) / b) - a;

Ahora no tenemos que pensar tanto en ella.

Condicionales

Cualquier lenguaje de programación brinda al programador opciones y la habilidad de realizar tomar decisiones.

Queremos hacer X en algunos casos, Y en otros casos.

Queremos verificar datos, y tomar decisiones en base al estado de esos datos.

C nos ofrece dos formas de hacerlo.

Primero está la declaración if, con su ayudante else, y la segunda es la declaración switch.

if

En una declaración if, puedes verificar si una confición es verdadera, y luego ejecutar el código que está entre los paréntesis de llave:

int a = 1; 
if (a == 1) { 
  /* haz algo*/ 
}

Puedes agregar un bloque else para ejecutar código distinto, si en la condición original el argumento se evalúa como falso:

int a = 1; 
if (a == 2) { 
   /* haz algo */ 
} else { 
   /* haz esto otro */ 
}

Debes tener cuidado con una causa común de errores: siempre usa el operador de comparación == cuando compares, y no el operador de asignación =. Si no lo haces, el condicional if siempre será verdad, a menos que el argumento sea 0, por ejemplo si haces:

int a = 0; 
if (a = 0 ) { 
  /* nunca será invocado*/ 
}

¿Porqué pasa esto? Porque el operador condicional buscará un resultado booleano (el resultado de la comparación), y el número 0 siempre equivale a un valor falso. Todos los demás números equivalen a verdadero, incluyendo los números negativos.

Puedes tener múltiples bloques else agrupando varias sentencias if:

int a = 1; 
if (a == 2) { 
  /* haz algo */ 
} else if ( a == 1 ) { 
  /* es otra cosa */ 
} else { 
  /* es esta otra cosa */ 
}

switch

Si necesitas hacer muchos bloques if/else/if para realizar una verificación, tal vez necesites revisar el valor exacto de una variable, entonces switch puede ser muy útil para ti.

Puedes proveer variables como condiciones, y una serie de puntos de entrada para cada caso (case) esperado:

int a = 1; 
switch (a) { 
  case 0: 
    /* hace algo si a = 0 */ 
  	break; 
  case 1: 
    /* hace otra cosa si a = 1 */ 
    break; 
  case 2: 
    /* hace otra cosa si a = 2 */ 
    break; 
}

Necesitamos la palabra reservada break al final de cada caso para evitar que el siguiente caso sea ejecutado cuando el anterior haya terminado. Este efecto "cascada" puede ser útil en algunas formas creativas.

Puedes agregar un "comodín" al final, etiquetado como default:

default: int a = 1; 
switch (a) { 
  case 0: 
    /* hace algo si a = 0 */ 
    break; 
  case 1: 
    /* hace otra cosa si a = 1 */ 
    break; 
  case 2: 
    /* hace otra cosa si a = 2 */ 
    break; 
  default: 
    /* Aquí se manejan todos los otros casos */ 
    break; 
 }

Bucles

C nos ofrece tres formas de ejecutar bucles o también conocidos como ciclos: ciclo for, ciclo while y ciclo do while. Ellos te permiten iterar sobre arrays, pero con algunas diferencias. Veámoslas en detalle.

Ciclo for

El primero y probablemente la forma más común de realizar un ciclo es el ciclo for.

Al usar la palabra reservada for podemos definir las reglas del bucle por adelantado, y luego definimos el bloque de código que se ejecutará repetidamente.

Algo como esto:

for (int i = 0 ; i <= 10 ; i++){ 
  /* instrucciones que serán repetidas */ 
}

El bloque (int i = 0; i<= 10; i++) contiene 3 partes de los detalles del bucle:

• La condición inicial (int i = 0)
• La prueba (i <= 10)
• El incremento (i++)

Primero definimos la variable del bucle, en este caso i.  i es un nombre de variable común usado en los bucles, junto con j para los ciclos anidados (un bucle dentro de un bucle), lo cual es sólo una convención.

La variable es inicializada en el valor 0, y se realiza la primera iteración. Luego esta es incrementada según dice la parte del incremento (i++ en este caso, incrementando por 1), y todo el ciclo se repite hasta que tienes el número 10.

Dentro del bloque principal del bucle, podemos acceder a la variable i para saber en qué iteración vamos. Este programa imprimirá en pantalla 0 1 2 3 4 5 6 7 8 9 10:

for (int i = 0; i <= 10; i++) { 
  /* Instrucciones a repetir */ 
  printf("%u ", i); 
}

Los ciclos también pueden empezar desde un número más grande y descender a uno más pequeño, como este:

for (int i = 10; i > 0; i--) { 
  /* instrucciones a repetir */ 
}

Además puedes incrementar la variable de iteración por 2 o cualquier otro valor :

for (int i = 0; i < 1000; i = i+30){ 
  /* instrucciones a repetir */ 
}

Ciclo While

El ciclo while es más simple de escribir que un ciclo for, porque requiere un poco más de trabajo de tu parte.

En vez de definir toda la información del loop arriba, cuando inicias el loop, como lo harías en un ciclo for, al usar while sólo verificas una condición:

while ( i < 10){ 
  /* hace algo cuando i es menor que 10 */ 
}

Esto asume que i ya está definido e inicializado con un valor.

Y este bucle será un ciclo infinito a menos que incrementes la variable i en algún punto dentro del ciclo. Un ciclo infinito es malo porque este bloqueará el programa, sin permitir que ocurran otras cosas.

Esto es lo necesario para un ciclo while "correcto":

int i = 0; 
while ( i < 10 ) { 
  /* haz algo */ 
  i++; 
}

Hay una excepción a esto, la veremos en un minuto. Antes déjame presentarte do while

Ciclo Do while

Los ciclos while son geniales, pero existirán veces en las que necesitarás hacer una cosa particular: Tú quieres que siempre se ejecute un bloque, y luego tal vez repetirlo.

Esto se hace usando la palabra clave do while. De una forma muy similar al ciclo while, pero con una leve diferencia:

int i = 0; 
do { 
  /* hace algo */ 
  i++; 
} while (i < 10);

El bloque que contiene el comentario /* hace algo*/, siempre será ejecutado, a lo menos una vez, sin importar si cumple la condición de abajo.

Luego, mientras i sea menor que 10, repetiremos el bloque.

Saliendo de un bucle usando la palabra reservada break

En C todos los bucles tienen una forma salir, es decir de detener las repeticiones en cualquier momento, inmediatamente, sin importar las condiciones definidas para el bucle.

Esto lo logramos usando la palabra clave break.

Esto es útil en muchos casos. Tal vez quieras verificar el valor de una variable, por ejemplo:

for (int i = 0; i <= 10; i++) { 
 if ( i == 4 && algunaVariable == 10) { 
   break; 
 } 
}

Tener esta opción de salida de un bucle es particularmente interesante para el ciclo while (y también para el do while), porque podemos crear bucles aparentemente infinitos que terminarán cuando ocurra una condición. Define esto dentro del bloque del ciclo:

int i = 0; 
while (1) { 
  /* haz algo */ 
  i++; 
  if ( i == 10) 
    break; 
}

Es bastante común tener este tipo de bucles en C.

Arréglos

Un arréglo o array es una variable que almacena múltiples valores.

Todo valor en el array (en C), debe tener el mismo tipo (type). Esto significa que tendrás arreglos de valores int, arreglos con valores double, y más.

Puedes definir un array con valores int así:

int precios[5];

Siempre debes especificar el tamaño del array. C no provee arreglos dinámicos listos para usar. (tienes que usar una estructura de datos como una lista enlazada para hacer eso).

Puedes usar constantes para definir el tamaño:

const int TAMANO = 5; 
int precios[TAMANO];

Puedes inicializar un array al momento de su definición así:

int precios[5] = {1, 2, 3, 4, 5 };

También puedes asignar valores después de su definición, de esta forma:

int precios[5]; 
precios[0] = 1; 
precios[1] = 2; 
precios[2] = 3; 
precios[3] = 4; 
precios[4] = 5;

O de forma más práctica usando un ciclo:

int precios[5]; 
for (int i = 0; i<5; i++) { 
  precios[i] = i + 1; 
}

Puedes referenciar el item de un array usando paréntesis cuadrados después del nombre de la variable array, agregando un entero para determinar el valor del índice, así:

precios[0]; /* valor del elemento del array: 1 */ 
precios[1]; /* valor del elemento del array: 2 */

Los índices de un array parten desde 0, por lo que un array con 5 elementos, como el arreglo precios de más arriba tendrá elementos que parten desde precios[0] hasta precios[4].

La parte interesante sobre los arreglos en C es que todos los elementos del array son guardados secuencialmente, uno justamente después de otro. No es algo que suceda normalmente en lenguajes de programación de más alto nivel.

Otra cosa interesante es que: el nombre de variable precios del array en el ejemplo anterior, es un puntero al primer elemento del array. Y como tal, se puede usar como un puntero normal.

Veremos pronto los punteros.

Strings

En C, los strings (cadenas de texto) son un tipo especial de array: un string es un array de valores char:

char name[6];

Introduje el tipo char cuando toccamos el tema de los tipos, este se usa comúnmente para almacenar letras de la tabla ASCII.

char name[6] = { "M","a","u","r","o"};

O de forma más conveniente con una cadena de texto literal (también llamada constante string), una secuencia de caracteres entre comillas dobles:

char name[6] = "Mauro"‌

Puedes imprimir un string vía printf() usando %s:

printf("%s", name);

Notaste que "Mauro" tiene en total 5 caracteres, pero definí el array con 6? ¿porqué? Esto es porque el último carácter de una cadena debe ser el valor 0, el terminador de la cadena, y debemos dejar espacio para él.

Es importante mantener esto en mente, especialmente cuando manipulas strings.

Cuando hablamos de manipular strings, existe una librería estándar importante que provee C: string.h.

Esta librería es esencial porque abstrae muchos de los detalles de bajo nivel al trabajar, y provee un grupo de herramientas útiles.

Puedes cargar la librería agregando la siguiente línea de código en la parte superior de tu programa:

#include <string.h>

Una vez que haces esto, tienes acceso a:

• strcpy() para copiar un string sobre otro string
• strcat() para anexar un string a otro string
• strcmp() para comparar igualdad entre dos strings
• strncpm() para comparar los primeros n caracteres de dos strings
• strlen() para calcular el largo de un string

Y muchos más

Punteros

Los punteros son una de las partes más confusas/desafiantes de C, en mi opinión. Especialmente si eres nuevo en los lenguajes de programación, pero también si vienes de lenguajes de programación de alto nivel como Python o JavaScript.

En esta sección quiero introducirlos de la forma más sencilla, pero completa posible.

Un puntero es la dirección de un bloque de memoria que contiene una variable.

Cuando declaras un número entero como este:

  int edad = 37;

Podemos usar el operador & para obtener el valor de la dirección en memoria de la variable:

printf("%p", &edad ); /* 0x7ffe3425bcac */

Usé el formato %p especificado en printf() para imprimir el valor de la dirección.

Podemos asignar la dirección a una variable:

int *direccion = &edad;

Usando int *direccion en la declaración, no estamos declarando una variable tipo entero, sino el puntero a un entero.

Podemos usar el operador de puntero * para obtener el valor de una variable a la que apunta una dirección:

int edad = 37; 
int *direccion = &edad; 
printf("%u", *direccion); /* 37 */

Esta vez estamos usando el operador de puntero otra vez, pero como no es una declaración, esta vez significa "El valor de la variable a la que apunta el puntero".

En este ejemplo, nosotros declaramos una variable edad y usamos un puntero para inicializar el valor:

int edad; 
int *direccion = &edad; 
*direccion = 37; 
printf("%u"; *direccion);

Cuando trabajes con C, te darás cuenta que muchas cosas están construidas sobre este simple concepto. Así que debes asegurarte de estar familiarizado con él, lo cual se te facilitará al realizar los ejemplos por tu cuenta.

Los punteros son una gran oportunidad de aprendizaje, porque nos obligan a pensar en las direcciones de memoria y cómo están organizados los datos.

Los arrays son un ejemplo, cuando declaras un array:

int precios[3] = { 5, 4, 3 };

La variable precios es de hecho, un puntero al primer elemento del array. Puedes obtener el valor del primer item usando la funciónprintf()  de la siguiente forma:

printf("%u", *precios);  /* 5 */

Lo genial es que podemos obtener el segundo item sumando 1 al puntero precios:

printf("%u%", *(precios + 1); /* 4 */

De la misma forma podemos obtener los valores que siguen.

También podemos hacer muchas manipulaciones y operaciones de strings, dado que internamente, son arreglos de caracteres.

También tenemos muchas otras formas de aplicarlo, incluyendo pasar la referencia a un objeto o una función para evitar consumir más recursos al copiarlo.

Funciones

Las funciones son formas en las que podemos estructurar nuestro código en subrutinas a las cuales podremos:

1. Darles un nombre
2. Llamarlas (invocarlas) cuando lo necesitemos

Al comenzar con tu primer programa ("Hola Mundo"), inmediatamente comenzaste a usar las funciones de C:

#include <stdio.h> 
int main(void) { 
   printf("Hola Mundo"); 
}

La función main() es una muy importante, y es el punto de entrada a un programa en C.

Aquí hay otra función:

void hazAlgo(int valor) { 
   printf("%u", valor); 
}

Las funciones tienen 4 aspectos importantes:

1. Tienen un nombre, para que podamos invocarlas("llamarlas") en el momento que la necesitemos.
2. Especifican un valor de retorno
3. Pueden tener argumentos
4. Tienen un cuerpo envuelto en paréntesis de llave ({})

El cuerpo de la función es el conjunto de instrucciones que se ejecutará cada vez que se invoca la función.

Si la función no tiene valor de retorno, puedes usar la palabra reservada void antes del nombre de la función. De otra forma debes especificar el tipo de valor que retornará (int para enteros, float para decimales de punto flotante, const char * para un string, etc).

No puedes retornar más de un valor desde una función.

Una función puede tener argumentos. Estos son opcionales. Si no tiene argumentos, debes colocar la palabra reservada void, de la siguiente forma:

void hazAlgo(void) { /* ... */ }

En este caso, cuando invocamos la función, la llamaremos sin elementos dentro del paréntesis:

hazAlgo();

Si tenemos un parámetro, especificamos el tipo y el nombre del parámetro así:

void hazAlgo(int valor) { /* ... */ }

Cuando invocamos la función, le pasaremos ese parámetro entre paréntesis de la siguiente forma:

hazAlgo(3);

Podemos tener múltiples parámetros. De ser así, debemos separarlos usando una coma, tanto en la declaración como en la invocación:

void hazAlgo(int valor1, int valor2) { 
   /* ... */ 
} 
hazAlgo(3, 4);

Los parámetros son pasados a la función como copias, esto significa que si modificas el valor1, este valor sólo se modificará localmente, es decir dentro del cuerpo de la función. El valor afuera, que fue pasado al momento de la invocación no cambiará.

Si pasas un puntero como parámetro, podrás modificar el valor de la variable, esto porque ahora podrás acceder directamente a su dirección en memoria.

No puedes definir un valor por defecto para un parámetro. C++ puede hacerlo ( y por lo tanto los programas en lenguaje Arduino), pero C no puede.

Asegúrate de definir la función antes de llamarla, o el compilador enviará un mensaje de advertencia:

➜  ~ gcc hola.c -o hola; ./hola 
hola.c:14:3: warning: implicit declaration of ç
     function 'hazAlgo' is invalid in C99 
     [-Wimplicit-function-declaration] 
   hazAlgo(3, 4); 
   ^
hola.c:17:6: error: conflicting types for
      'hazAlgo'
void hazAlgo(int valor1, char valor2) {
     ^
hola.c:13:3: note: previous implicit declaration
      is here
  hazAlgo(3, 4);
  ^
1 warning and 1 error generated.

Cómo he mencionado anteriormente la alerta que hemos recibido tiene que ver con el orden.

El error se trata de otra cosa relacionada. Ya que C no puede "ver" la declaración de la función antes de la invocación entonces debe hacer suposiciones. Y asume que la función retorna un int, pero la función retorna void y a esto se debe el error.

Si cambias la definición de la función a:

int hazAlgo(int valor1, int valor2) {
  printf("%d %d\n", valor1, valor2);
  return 1;
}

Sólo obtenemos una advertencia y no el error:

➜  ~ gcc hello.c -o hello; ./hello
hello.c:14:3: warning: implicit declaration of
      function 'doSomething' is invalid in C99
      [-Wimplicit-function-declaration]
  doSomething(3, 4);
  ^
1 warning generated.

En cualquier caso, asegúrate de declarar la función antes de usarla. Ya sea moviendo la función hacia arriba, o agregando el prototipo de función en un archivo de cabecera.

Dentro de una función puedes declarar variables.

void hasAlgo(int valor) { 
   int dobleValor = valor * 2; 
}

Una variable es creada al momento de la invocación y se destruye cuando la función termina su ejecución, la variable no será visible desde el exterior.

Dentro de una función, puedes llamar a la función en sí misma. Esto se llama recursión y es algo que ofrece oportunidades peculiares.

Entradas y salidas (Input Output - IO)

C es un lenguaje pequeño, y el "núcleo" de C no incluye funcionalidades de entrada y salida, "Input/Output" (I/O).

Por supuesto, esto no es algo único de C. Es común para el núcleo de un lenguaje ser agnóstico de I/O.

En el caso de C, la librería estándar nos provee Input/Output vía un conjunto de funciones definidas en el archivo de cabecera stdio.h

Puedes importar esta librería usando include <stdio.h> en la parte superior de tu archivo C:

#include <stdio.h>

Esta librería nos provee diversas funciones:

• printf()
• scanf()
• sscanf()
• fgets()
• fprintf()

Antes de describir qué hacen estas funciones, quiero tomarme un minuto para habler sobre los flujos I/O (I/O streams) [Flujos de entrada y salida].

Tenemos 3 tipos de flujos de E/S en C:

• stdin (standard input) [entrada estandar]
• stdout (standard output) [salida estandar]
• stderr (standar error) [error estandar]

Con las funciones I/O siempre trabajaremos con flujos. Un flujo es una interfaz de alto nivel que representa un dispositivo o un archivo. Desde el punto de vista de C, no tenemos ninguna diferencia al leer desde un archivo o leer desde la línea de comandos: ambos son un flujo I/O en cualquier caso.

Esto es algo para tener presente.

Algunas funciones están diseñadas para trabajar en un flujo específico, como printf(), el cual usamos para imprimir caracteres al stdout. Al usar su contraparte más general fprintf(), podemos específicar a cual flujo escribiremos.

Ya que empecé hablando de printf(), hagámos su introducción ahora.

printf() es una de las primeras funciones que usarás al aprender a programar en C.

En su forma de uso más simple le pasamos una cadena de texto literal:

printf("hola!");

... y el programa mostrará en consola el contenido de la cadena de texto.

También puedes imprimir el valor de una variable. Pero es algo complicado ya que necesitas agregar un carácter especial, un carácter de relleno que cambia dependiendo del tipo de la variable. Por ejemplo, usamos %d para un dígito decimal entero con signo:

int edad = 37;

printf("Mi edad es %d", edad);

Podemos imprimir más de una variable usando comas:

int edad_ayer = 37;
int edad_hoy = 36;

printf("Ayer mi edad era %d y hoy es %d", edad_ayer, edad_hoy);

Hay otros especificadores de formato como %d:

• %c para caracteres
• %s para caracteres
• %f para números de punto flotante
• %p para punteros

... y varios más.

Podemos usar caracteres de escape en printf(), como \n que podemos usar para crear una nueva línea en el resultado de salida.

scanf()

printf() se utiliza cómo una función de salida. Ahora quiero presentarte una función de entrada para que podamos realizar todas las acciones I/O (de entrada y salida): scanf().

Esta función se utiliza para obtener un valor de parte del usuario mediante la consola.

Debemos definir una variable que tomará el valor que obtuvimos desde la entrada:

int edad;

Luego la llamamos scanf() pasándole 2 argumentos (el formato de la variable y la dirección de variable):

scanf("%d", &edad);

Si queremos obtener un string como entrada, recuerda que el nombre de un string es un puntero a el primer carácter, por lo que no necesitas usar el carácter al inicio &:

char nombre[20];
scanf("%s", nombre);

Aquí un pequeño programa que utiliza ambos printf() y scanf():

#include <stdio.h>

int main(void) {
  char nombre[20];
  printf("Escribe tu nombre: ");
  scanf("%s", nombre);
  printf("te llamas %s", nombre);
}

Alcance de las variables

Cuando defines una variable en un programa C, dependiendo de dónde lo declares, va a tener un alcance distinto (scope).

Esto significa que estará disponible en algunos lugares pero no en otros.

La ubicación de dónde es declarada, determina los 2 tipo de variables:

• variables globales
• variables locales

Esta es la diferencia: una variable declarada dentro de una función es una variable local, así:

int main(void) {
  int edad = 37;
}

Las variables locales sólo son accesibles desde adentro de la función y cuando la función termina, dejan de existir, es decir, son liberadas de la memoria, con algunas excepciones.

Una variable definida fuera de una función se conoce como variable global cómo en el siguiente ejemplo:

int edad = 37;

int main(void) {
  /* ... */
}

Las variables globales son accesibles desde cualquier función del programa y están disponibles por toda la ejecución del programa hasta que este concluye.

Mencioné que las variables locales no están disponibles luego de finalizar la función que las contenga.

La razón de esto es que las variables locales por defecto, son declaradas en la pila (stack), a menos que las asignes manualmente al almacenamiento dinámico (heap) usando punteros. Pero entonces tendrás que administrar el uso de memoria tú mismo.

Variables estáticas

Dentro de una función puedes inicializar una variable estática usando la palabra reservada static. He dicho "dentro de una función" ya que las variables globales son estáticas por defecto, así que no hay necesidad de agregar la palabra clave static.

¿Qué es una variable estática? Una variable estática es inicializada a 0 si no se le asigna ningún valor y retiene su valor en todas las llamadas o invocaciones de función.

Considera esta función:

int incrementarEdad() {
  int edad = 0;
  edad++;
  return edad;
}

Si llamamos incrementarEdad() vamos a obtener 1 cómo valor de retorno, si la seguimos invocando, simpre obtendremos 1, debido a que edad es una variable local y se reinicia su valor a 0 en cada llamada o invocación.

Si cambiamos la función a:

int incrementarEdad() {
  static int edad = 0;
  edad++;
  return edad;
}

Ahora cada vez que llamemos a esta función, vamos a obtener un valor incremental:

printf("%d\n", incrementarEdad());
printf("%d\n", incrementarEdad());
printf("%d\n", incrementarEdad());

nos arrojará

1
2
3

También podemos omitir la inicialización de edad a 0 en la línea static int edad = 0 y sólo escribir static int edad; dado que las variables estáticas reciben automáticamente el valor 0 al ser creadas.

También podemos usar arreglos estáticos, en este caso cada ítem individual en el arreglo es inicializado a 0 automáticamente:

int incrementarEdad() {
  static int edades[3];
  edades[0]++;
  return edades[0];
}

Variables globales

En esta sección quiero hablar más acerca de la diferencia entre variables globales y locales.

Una variable local se define dentro de una función y sólo se encuentra disponible dentro de esa función.

Así:

#include <stdio.h>

int main(void) {
  char j = 0;
  j += 10;
  printf("%u", j); //10
}

j no está disponible en cualquier lugar fuera de la función main.

Una variable global se define fuera de las funciones de la siguente forma:

#include <stdio.h>

char i = 0;

int main(void) {
  i += 10;
  printf("%u", i); //10
}

Se puede tener acceso a una variable global desde cualquier función en el programa, además no se limita a la lectura del valor que almacena sino que este valor puede ser modificado desde cualquier función.

Debido a esto, las variables globales son una de las formas en que podemos compartir los mismos datos entre funciones.

La principal diferencia con las variables locales es que el espacio de memoria que se asigna a una variable local se libera una vez que la función termina. En cambio, el espacio de memoria de las variables locales sólo es liberado cuando termina el programa.

Definiciones de tipos

En C, la palabra reservada typedef nos permite definir nuevos tipos de datos.

Tomando los tipos incluidos en C como base, podemos crear nuestros propios tipos de datos usando la siguiente sintaxis:

typedef existingtype NUEVOTIPO

Por convención, es común utilizar mayúsculas para definir un nuevo tipo, esto para poder distinguirlo y reconocerlo como un tipo de dato con mayor facilidad.

Por ejemplo, podemos definir un nuevo tipo de dato NUMERO como int:

typedef int NUMERO

y una vez que lo hayas hecho podrás definir variables de tipo NUMERO:

NUMERO uno = 1;

¿Ahora bien, te preguntarás porqué hacer esto? ¿Porque no sólo utilizar el tipo int en su lugar?

Bueno, typedef se vuelve muy útil cuando se le acompaña de dos cosas: tipos enumerados y estructuras.

Tipos enumerados

Usando las palabras reservadas typedef y podemos definir un tipo que puede tener uno u otro valor. Es uno de los más importantes usos de la palabra reservada enumtypedef.

Esta es la sintaxis de la declaración un tipo enumerado:

typedef enum {
  //...valores
} NOMBRETIPO;

El tipo enumerado que creemos es usualmente por convención definido en mayúsculas .

Aquí, un ejemplo sencillo:

typedef enum {
  true,
  false
} BOOLEAN;

Aunque C ya cuenta con un tipo bool, lo anterior nos sirve como ejemplo explicativo.

Otro ejemplo son los días de la semana como tipo de datos:

typedef enum {
  lunes,  
  martes,
  miercoles,
  jueves,
  viernes,
  sabado,
  domingo
} DIASEMANA;

Y aquí un programa simple que utiliza este tipo enumerado:

#include <stdio.h>

typedef enum {
  lunes,  
  martes,
  miercoles,
  jueves,
  viernes,
  sabado,
  domingo
} DIASEMANA;

int main(void) {
  DIASEMANA dia = lunes;

  if (day == lunes) {
    printf("Es lunes!"); 
  } else {
    printf("No es lunes"); 
  }
}

Internamente cada ítem en una definición de un enum, se empareja con un entero. Por lo que en este ejemplo lunes es 0, es y martes es 1 así sucesivamente.

Lo que quiere decir que la condición la pudimos haber escrito así: if (dia==0) y no así: if (dia == lunes), sin embargo, es una sintaxis más conveniente, legible y fácil de razonar para nosotros humanos usar palabras en lugar de números.

Estructuras

Usando la palabra reservada struct podemos crear estructuras de datos complejas usando los tipos básicos de C.

Una estructura es una colección de valores de tipos distintos. Los arreglos en C están limitados a un sólo tipo de datos, por lo que las estructuras pueden ser muy útiles en muchos casos.

Esta es la sintaxis para definir una estructura:

struct <nombredeestructura> {
  //...variables
};

Ejemplo:

struct persona {
  int edad;
  char *nombre;
};

Puedes declarar variables que sean del tipo de la estructura que has definido, al especificar el nombre de la variable luego de la llave que cierra y antes del punto y coma, así:

struct persona {
  int edad;
  char *nombre;
} flavio;

O para múltiples variables, así:

struct persona {
  int edad;
  char *nombre;
} flavio, gente[20];

En este caso declaron una sóla variable flavio de tipo persona y un arreglo gente de 20 personas.

También podemos declarar las variables usando esta sintaxis:

struct persona {
  int edad;
  char *nombre;
};

struct persona flavio;

Podemos inicializar una estructura en la misma línea en que hemos declarado la variable:

struct persona {
  int edad;
  char *nombre;
};

struct persona flavio = { 37, "Flavio" };

y una vez que hayamos definido una estructura, podemos tener acceso a los valores que contiene usando un punto (notació  de punto):

struct persona {
  int edad;
  char *nombre;
};

struct persona flavio = { 37, "Flavio" };
printf("%s, edad %u", flavio.nombre, flavio.edad);

Usando el punto también podemos editar los valores:

struct persona {
  int edad;
  char *nombre;
};

struct persona flavio = { 37, "Flavio" };

flavio.edad = 38;

Las estructuras son muy útiles porque podemos moverlas de un lado a otro o pasarlas como parámetros o valores de retorno en funciones o embedir variables y cada variable tiene una etiqueta.

Es importante mencionar que las estructuras se "pasan como copia", a menos que por supuesto pasemos tambien un puntero, en tal caso "pasa como referencia".

Al trabajar con estructuras, podemos simplificar el código usando la palabra reservada typedef.

Veamos un ejemplo:

typedef struct {
  int edad;
  char *nombre;
} PERSONA;

El nombre de la estructura que creamos usando typedef es usualmente y por convención, escrita en mayúsculas.

Ahora podemos declarar nuevas variables persona así:

PERSONA flavio;

y  las podemos inicializar en la misma línea en que fueron declaradas, así:

PERSONA flavio = { 37, "Flavio" };

Parámetros de línea de comandos

En tus programas escritos en C podrías necesitar aceptar parámetros desde la línea de comandos cuando arrancas su ejecución.

Para casos de uso simples, lo único que vas a necesitar es modificar la firma de función main() de:

int main(void)

a:

int main (int argc, char *argv[])

argc es un número entero que representa el número de parámetros que fueron proporcionados mediante la línea de comandos.

argv es un arreglo de strings (cadenas de caracteres).

Al arrancar el programa se tiene acceso a los argumentos de los 2 parámetros.

Cabe mencionar que siempre habrá por lo menos un ítem en el arreglo argv: el nombre del programa.

Tomemos el ejemplo del compilador C que usamos para ejecutar nuestros problemas, así:

gcc hola.c -o hola

Si este fuera nuestro programa, argc sería equivalente a 4 y argv una matriz (arreglo) que contiene

• gcc
• hello.c
• -o
• hello

Escribamos un programa que imprima los argumentos que recibe:

#include <stdio.h>

int main (int argc, char *argv[]) {
  for (int i = 0; i < argc; i++) {
    printf("%s\n", argv[i]);
  }
}

Si el nombre de nuestro programa es hello y lo ejecutamos así: ./hello, obtendríamos esto como salida:

./hello

Si pasamos algunos parámetros aleatorios, como este: obtendríamos esta salida a la terminal:./hello a b c

./hello
a
b
c

Este sistema funciona muy bien para casos de uso simples. Para necesidades más complejas, existen paquetes de uso común como getopt.

Archivos de cabecera

Los programas simples se pueden poner en un solo archivo. Pero cuando tu programa crezca, será imposible mantenerlo todo en un solo archivo.

Puede mover partes de un programa a archivos independientes. A continuación, se crea un archivo de cabecera.

Un archivo de cabecera se parece a un archivo C normal, excepto que termina con en .h lugar de .c. En lugar de las implementaciones de las funciones y las otras partes de un programa, contiene las declaraciones.

Ya usaste archivos de encabezado cuando usaste la función printf(), o alguna otra función de E/S, y para usarlo tuviste que escribir:

#include <stdio.h>

#include es una directiva de preprocesador.

El preprocesador va y busca el archivo stdio.h en la biblioteca estándar porque usó corchetes alrededor de él. Para incluir tus propios archivos de encabezado, usarás comillas, como esta:

#include "hola.h"

Lo anterior buscará hola.h en la carpeta actual.

También puedes utilizar estructura de carpetas para bibliotecas:

#include "proyecto-hola/hola.h"

Veamos un ejemplo. Este programa calcula los años transcurridos desde un año determinado:

#include <stdio.h>

int calcularEdad(int anio) {
  const int ANIO_ACTUAL = 2020;
  return ANIO_ACTUAL - anio;
}

int main(void) {
  printf("%u", calcularEdad(1983));
}

Supongamos que quiero mover la función calcularEdad a un archivo separado.

Creo un archivo:calcular_edad.c

int calcularEdad(int anio) {
  const int ANIO_ACTUAL = 2020;
  return ANIO_ACTUAL - anio;
}

Y un archivo calcular_edad.h donde pongo el prototipo de la función, que es la misma que la función en el archivo con .c, excepto el cuerpo de la función:

int calculateAge(int year);

Ahora en el archivo .c principal podemos ir y eliminar la definición de la función calculateAge(), y luego podemos importar el archivo calculate_age.h, lo que hará que la función calculateAge() esté disponible:

#include <stdio.h>
#include "calculate_age.h"

int main(void) {
  printf("%u", calculateAge(1983));
}

No olvides que, para compilar un programa compuesto por varios archivos, debes enumerarlos todos (pasarlos como parámetros) en la línea de comandos, así:

gcc -o main main.c calculate_age.c

Para configuraciones más complejas, es necesario un Makefile para decirle al compilador cómo compilar el programa.

El preprocesador

El preprocesador es una herramienta que nos ayuda mucho a la hora de programar con C. Es parte del estándar C, al igual que el lenguaje, el compilador y la biblioteca estándar.

El preprocesador analiza nuestro programa y se asegura de que el compilador obtenga todas las cosas que necesita antes de continuar con el proceso.

¿Qué hace en la práctica?

Por ejemplo, busca todos los archivos de encabezado que se incluyen con la directiva #include.

También examina todas las constantes que definió usando #define y las sustituye por su valor real.

Eso es solo el comienzo. Mencioné esas 2 operaciones porque son las más comunes. El preprocesador puede hacer mucho más.

¿Te diste cuenta de que #include y #define tienen un # un al principio? Esto es común en todas las directivas del preprocesador. Si una línea comienza con #, el preprocesador se encarga de ello.

Condicionales

Una de las cosas que podemos hacer es usar condicionales para cambiar la forma en que se compilará nuestro programa, dependiendo del valor de una expresión.

Por ejemplo, podemos comprobar si la constante DEBUG es 0:

#include <stdio.h>

const int DEBUG = 0;

int main(void) {
#if DEBUG == 0
  printf("No estoy depurando\n");
#else
  printf("Estoy depurando\n");
#endif
}

Constantes simbólicas

Podemos definir una constante simbólica:

#define VALUE 1
#define PI 3.14
#define NAME "Flavio"

Cuando usamos NAME o PI o VALUE en nuestro programa, el preprocesador reemplaza su nombre con el valor antes de ejecutar el programa.

Las constantes simbólicas son muy útiles porque podemos dar nombres a los valores sin crear variables en el momento de la compilación.

Macros

Con #define también podemos definir una macro. La diferencia entre una macro y una constante simbólica es que una macro puede aceptar un argumento y normalmente contiene código, mientras que una constante simbólica es un valor:

#define POTENCIA(x) ((x) * (x))

Observe los paréntesis alrededor de los argumentos: esta es una buena práctica para evitar problemas cuando se reemplaza la macro en el proceso de pre-compilación.

Luego podemos usarlo en nuestro código de la siguiente manera:

printf("%u\n", POTENCIA(4)); //16

La gran diferencia con las funciones es que las macros no especifican el tipo de sus argumentos o valores devueltos, lo que puede ser útil en algunos casos.

Las macros, sin embargo, se limitan a definiciones de una línea.

If defined

Podemos comprobar si se define una constante simbólica o una macro usando #ifdef:

#include <stdio.h>
#define VALOR 1

int main(void) {
#ifdef VALOR
  printf("Valor está definido\n");
#else
  printf("Valor no está definido\n");
#endif
}

También tenemos #ifndev comprobar lo contrario (macro no definida).

También podemos usar #if defined y #if !defined para realizar la misma tarea.

Es común envolver algún bloque de código en un bloque como este:

#if 0

#endif

para evitar temporalmente que se ejecute o para usar una constante simbólica DEBUG:

#define DEBUG 0

#if DEBUG
  //este código sólo se envía al compilador
  //si DEBUG no es igual a 0
#endif

Constantes simbólicas predefinidas que puedes usar

El preprocesador también define una serie de constantes simbólicas que puede utilizar, identificadas por los 2 guiones bajos que encuentras antes y después del nombre, entre las que se incluyen:

• __LINE__ se traduce a la línea actual en el archivo de código fuente
• __FILE__ se traduce en el nombre del archivo
• __DATE__ se traduce a la fecha de compilación, en el formatoMmm gg aaaa
• __TIME__ se traduce en el tiempo de compilación, en el formato hh:mm:ss.

Conclusión

¡Muchas gracias por leer este manual!

Espero que te inspire a saber más sobre C.

Para obtener más tutoriales, consulte mi blog flaviocopes.com.

Sígueme en Twitter @flaviocopes.

Vite.js es una herramienta veloz de desarrollo de proyectos web modernos. Se enfoca en la velocidad, el desempeño y mejora la experiencia del desarrollador.

Vite usa las importaciones nativas ES (ECMA Script) del navegador para habilitar el soporte a navegadores modernos sin la necesidad de un proceso de compilación ("build process").

Vite consta de dos partes principales:

• El servidor de desarrollo brinda soporte para la "sustitución de módulos en tiempo de ejecución" o bien, "Remplazo de Módulos en Caliente" (HMR - Hot Module Replacement, por sus siglas en inglés). De esta forma, cómo su nombre lo dice, actualiza los módulos de la aplicación en tiempo de ejecución. Así, que cuando se realizan cambios en el código, sólo se actualiza la parte editada, evitando recargar la aplicación completa, lo que ayuda a acortar el tiempo de desarrollo.
• El comando "build" permite a los desarrolladores empaquetar su código con Rollup, que se encuentra pre-configurado para generar recursos estáticos (static assets) altamente optimizados para producción.

Cómo funciona Vite.js

Cuando se introdujeron los módulos ES en la versión ES6/ES2015, los navegadores no contaban con soporte para los módulos ES6 o bien, era el soporte era muy pobre. En la actualidad, los navegadores modernos ya brindan este soporte, lo que permite a los desarrolladores usar las declaraciones import y export de forma nativa.

En ES nativo, sin embargo, el import debe usar ya sea un URL relativo o absoluto ya que no es posible realizar "importaciones simples" (bare imports) de la forma:

import { algunMetodo } from 'mi-dependencia'

El código anterior lanzará un error en el navegador pues no todos los navegadores tienen soporte para los módulos ES6, y usando ES6 sería necesario utilizar un "import map". Así que la cuestión ahora es, ¿cómo ayuda Vite con esto?

Vite detecta automáticamente las "importaciones simples" (bare imports) en tus archivos fuente y lleva a cabo las siguientes dos acciones:

• Vite pre-empaqueta los archivos fuente para acelerar la carga de la página y convierte los módulos CommonJS o UMD a módulos ESM.
• Para permitirle a los navegadores importar módulos sin lanzar errores, Vite reescribirá las importaciones cómo URLs válidos como se muestra a continuación:

/node_modules/.vite/my-dep.js?v=f3sf2ebb

¿Por qué usar Vite?

Ahora que conocemos lo que es Vite y cómo funciona, te preguntarás por qué deberías usar Vite.

Hay varias razones por las cuales deberías usarlo en tus proyectos, veamos brevemente algunas de ellas.

Desempeño

Pre-empaquetar con ESbuild de Vite es de 10 a 100 veces más rápido que otros empaquetadores JS (bundlers). Esto se debe a que al convertir los módulos CommonsJS o UMD a módulos ESM ayuda a mejorar la velocidad de carga.

De acuerdo con la documentación de Vite,

"El paso de pre-empaquetado, se realiza con esbuild y hace que el tiempo de arranque en frío de Vite sea significativamente más rápido que cualquier empaquetador basado en JavaScript."

Hot Module Replacement (HMR)

Sustitución de Módulos en Tiempo de Ejecución.

Vite utiliza funcionalidades HMR para monitorear los cambios en tu aplicación, sin tener la necesidad de recargar la página completa. Con la API HMR, el navegador sólo cargará la sección modificada de la página y conservará el resto del estado de la aplicación.

No hay necesidad de configurar manualmente la API HMR en tu aplicación ya que es agregada a tu proyecto durante la instalación, si lo creaste mediante el uso de create-vite.

Con el desempeño HMR puedes diseñar aplicaciones más rápidas y ligeras sin importar el número de módulos o el tamaño de tu aplicación.

Opciones de configuración

Vite permite que tengas más control de la configuración de tu proyecto al ampliar la configuración por defecto con vite.config.js o vite.config.ts. Estos archivos se encuentran en el directorio raíz de tu proyecto.

También puedes especificar distintos archivos de configuración con la opción CLI --config como se muestra abajo:

vite --config my-config.js

Lo que necesitarás

Este es el software que debes tener instalado en tu computadora para poder crear un proyecto Vite:

• Node.js versión 12.2.0 o superior (para ver la versión que tienes instalada en tu computadora ejecuta node -v en la terminal).
• Npm / Yarn

Una vez que tengas estos programas instalados en tu computadora, podrás crear proyectos con Vite.

Cómo crear un proyecto con Vite

Para crear una aplicación con Vite abre tu terminal o línea de comandos y navega hacia el directorio donde quieres guardar tu aplicación con Vite. Luego ejecuta el siguiente comando:

npm create @vitejs/app my-vite-app

O para versiones más recientes de Node:

npm create vite@latest my-vite-app

Note: my_vite_app es el nombre de la aplicación con Vite que vamos a crear, pero puedes cambiarlo al nombre que tú prefieras.

Luego de ejecutar el comando de arriba, se te pedirá que selecciones un framework y una plantilla (template o variant). Para los propósitos de este tutorial, vamos a usar React, pero puedes elegir cualquier framework o variante con la que te sientas más familiarizado.

A continuación, ejecuta los siguientes comandos para finalizar la instalación:

cd vite_application
npm install

La instalación puede tomar varios minutos, tendrás que esperar hasta que se haya completado.

Cómo ejecutar una aplicación con Vite

Para ejecutar una aplicación con Vite en la terminal, navega al directorio de la aplicación que hemos creado cd vite-aplication y luego ejecuta el comando dev para ejecutar el servidor de desarrollo:

npm run dev

Ahora abre tu navegador e ingresa a http://localhost:3000. Deberías ver algo como lo que muestra la siguiente captura:

Estructura de directorios en proyectos con Vite

Veamos cómo es que están organizados los directorios en una aplicación con Vite. También daremos un vistazo en detalle a algunos de los directorios y archivos.

Nota: Si elijes usar un framework y/o plantilla distinto, el nombre de los archivos no será el mismo.

El directorio node_modules

El directorio node_modules contiene todas las dependencias necesarias para la aplicación, que se encuentran especificadas en el archivo package.json.

Todas las dependencias configuradas en package.json serán descargadas al directorio node_modules una vez que hayamos ejecutado el comando npm install.

Al "empujar" (del inglés push) nuestro código fuente a GitHub no es necesario incluir el directorio node_modules ya que otros usuarios del código fuente pueden descargar las dependencias necesarias de la misma forma, es decir, gracias al archivo package.json y npm.

Puedes encontrar el archivo package.json en el directorio raíz de tu proyecto.

El directorio src

El directorio src es uno de los directorios con los que más vamos a interactuar al desarrollar aplicaciones con Vite. Este directorio contiene los archivos app.jsx, main.jsx, app.css e index.js.

Todos los recursos de tu aplicación como imágenes, videos y otros archivos deben estar dentro del directorio src ya que Vite lo considera como el directorio base para las URLs en index.html.  

Los archivos App.jsx y main.jsx

El archivo App.jsx es el componente base o raíz que hace la función de contenedor de todos los otros componentes utilizados en la aplicación.

El archivo main.jsx apunta al elemento con id="root" que se encuentra en el archivo index.html y en el cual se renderizan todos los componentes de la aplicación.

index.css y app.css

Estos archivos contienen todos los estilos CSS que utiliza el programa. Puedes agregar tu propio archivo CSS o editar los estilos de index.css.

Conclusión

Hemos visto qué es Vite, cómo funciona y algunas de sus características. También aprendimos cómo crear aplicaciones usándolo.

Para modo de mejorar nuestro flujo de trabajo como desarrolladores y ser más productivos al crear aplicaciones más ligeras y veloces, es muy recomendable visitar, explorar, leer y familiarizarse con la documentación oficial de Vite.

En este artículo, vamos a aprender cómo comunicarnos con AWS RDS desde AWS Lambda.

Vamos a usar AWS CDK (Cloud Development Kit), el cual es software, o marco de trabajo (del inglés framework) de código abierto, que te permite definir y crear infraestructura en la nube (cloud).

AWS CDK tiene soporte para muchos lenguajes de programación, incluyendo a TypeScript, Python, C#, Java y otros. Nosotros usaremos TypeScript en este tutorial.

Al desplegar usando el comando cdk deploy, tu código es transformado a plantillas CloudFormation y todos los recursos AWS correspondientes serán creados. Solo necesitas conocimientos básicos de CDK y TypeScript para seguir este tutorial. Claro que también necesitas una cuenta AWS para poder crear recursos AWS.

Puedes continuar aprendiendo más acerca de AWS CDK en la documentación oficial y también escribí una guía para principiantes en mi blog (en inglés).

Introducción a AWS Lambda y RDS

AWS Lambda es un servicio "serverless" de cómputo por eventos que te permite ejecutar código sin la necesidad de provisionar servidores.

AWS RDS es un servicio de base de datos relacional administrada que tiene soporte para varios sistemas RDMBS (Sistema de Bases de Datos Relacionales) como MySQL, Postgres, Oracle, SQL Server entre otros. AWS se encarga de los parches y el mantenimiento a estos servidores de bases de datos.

¿Porque usar RDS junto con Lambda?

AWS Lambda es un servicio de cómputo y no requiere o recomienda tecnologías específicas de almacenamiento de datos para su funcionamiento. De hecho, algunas de tus funciones lambda ni siquiera van a interactuar con almacenes de datos de algún tipo. Y si necesitaras utilizar una tecnología de almacenamiento de datos, podrías utilizar cualquier base de datos de acuerdo a tus necesidades.

Sin embargo, la mayoría de las arquitecturas serverless utilizan DynamoDB como almacén de datos sólo para reducir costos y eliminar la necesidad del mantenimiento de servidores de bases de datos.

DynamoDB es grandioso y tiene sus casos de uso aplicables. Pero usarla para todos los proyectos que involucren lambda no es posible por las siguientes razones:

Patrones de acceso dinámicos: Al usar DynamoDB tendrías que diseñar con anticipación tus propios patrones de consulta. Sin embargo, esto no siempre es posible dado que tu producto (y sus respectivos requerimientos) podría evolucionar en base a la retroalimentación de tu cliente.

Patrones de acceso limitado: DynamoDB no te brinda flexibilidad al escribir consultas. No puedes usar la funcionalidad group by en tus consultas como lo harías en un RDMBS. En cambio, necesitas exportar los datos y tener algún otro sistema que provea la funcionalidad deseada, en este caso la funcionalidad group by.

Base de datos existente: Si tienes una base de datos RDBMS no querrás migrar a DynamoDB a menos que haya una buena razón para hacerlo. Incluso si quieres usar DynamoDB necesitarías reescribir toda la capa de acceso de datos para poder usarla como remplazo de una base de datos relacional (RDBMS).

Ventajas de usar RDBMS:

Relaciones entre entidades: Las bases de datos relacionales (RDBMS) permiten las relaciones entre entidades. Puedes definir claves foráneas para restringir el almacenamiento de datos inválidos.

Patrones de acceso: Las bases de datos relacionales te permite el uso de patrones de acceso dinámico. Una nueva entidad puede ser traída casi sin la necesidad de realizar grandes cambios a los modelos existentes. Y tiene muchas funcionalidades cómo group_by para que no tengas necesidad de usar sistemas externos para facilitar estas funcionalidades.

Familiaridad con SQL: La mayoría de los desarrolladores están familiarizados con SQL para realizar consultas a las bases de datos y hay una gran variedad de dónde se puede seleccionar una, incluyendo Oracle, Postgres y MySQL.

Podrías elegir RDBMS si tienes los siguientes requerimientos:

• Tienes una base de datos RDBMS existente y te gustaría adaptar computación serverless de AWS Lambda.
• Ya cuentas con patrones dinámicos de acceso y no quieres cambiar mucho tus modelos existentes.

Habiendo cubierto los puntos anteriores, discutamos cómo vamos a conectarnos a RDS desde Lambda.

Arquitectura del Proyecto

En casi la totalidad de los casos, tu base de datos RDBMS será una sub-red (subnet) de la Nube Virtual Privada (VPC - Virtual Private Cloud), con la finalidad de que nadie del exterior pueda tener acceso. Dado que tu función Lambda contendrá lógica de negocios, también podría pertenecer a esta sub-red privada.

Usaremos Postgres cómo nuestra base de datos para este tutorial. Pero el proceso descrito aquí, es aplicable para cualquier base de datos relacional (MySQL, Oracle, MS SQL y otras) que podrías querer utilizar. La arquitectura será la misma.

Abajo puedes ver la arquitectura de este proyecto:

Vamos a utilizar AWS CDK a modo de herramienta de tipo "Código cómo Infraestructura" para crear recursos AWS.

Cómo crear una nube virtual privada (VPC) para alojar nuestros Lambda y RDBMS

Vamos a crear 2 subnets, una pública y otra privada. En la privada vamos a alojar nuestra base de datos Postgres.

const vpc = new ec2.Vpc(this, 'VpcLambda', {
      maxAzs: 2,
      subnetConfiguration: [
        {
          cidrMask: 24,
          name: 'privatelambda',
          subnetType: ec2.SubnetType.PRIVATE_WITH_EGRESS,
        },
        {
          cidrMask: 24,
          name: 'public',
          subnetType: ec2.SubnetType.PUBLIC,
        },
      ],
    });

Cuando creas una sub-red de tipo PRIVATE_WITH_EGRESS usando AWS CDK también creará un NAT Gateway (NAT: Network Access Translation, Gateway puerta de acceso o enlace) y la colocará en la sub-red pública.

El propósito de NAT Gateway es permitir sólo las conexiones de salida desde tu subnet privada hacia el internet. Nadie podrá iniciar conexiones con tu subnet privada desde el internet público.

¿Por qué usar NAT Gateway para la conectividad con internet?

Podrías estarte preguntando por qué es necesario una conexión a internet, si tenemos ambos servicios, Lambda y la base de datos RDS en la misma sub-red privada.

Secrets Manager es un servicio de AWS para el manejo y almacenamiento de datos secretos como contraseñas, certificados, etc. La contraseña para conectarse a la base de datos se encuentra almacenada en secrets manager y es accesible desde un endpoint (punto de acceso) público.  

Puedes usar ya sea NAT Gateway para tener acceso al endpoint público del servicio de secrets manager o puedes crear una endpoint a modo de interfaz, para conectar con el secrets manager usando la Red AWS sin salir al internet público.

Ambas formas generarían un costo, pero NAT Gateway puede ser reutilizada para realizar conexiones también desde Lambda (digamos si llamas a cualquier API externa), mientras que desde un endpoint-interfaz no sería posible hacerlo de esta manera.

Cómo crear una instancia de base de datos RDS para almacenar nuestros datos:

Para los propósitos de este tutorial vamos a usar una pequeña instancia. Pero para ambientes de producción lo más común es utilizar instancias de mayores tamaños.

Crearemos un nuevo grupo de seguridad, para de esta forma poder controlar quién tiene acceso a la instancia de la base de datos y a través de cual puerto.

const dbSecurityGroup = new ec2.SecurityGroup(this, 'DbSecurityGroup', {
      vpc,
    });

    const databaseName = 'cloudtechsimplified';

    const dbInstance = new rds.DatabaseInstance(this, 'Instance', {
      engine: rds.DatabaseInstanceEngine.postgres({
        version: rds.PostgresEngineVersion.VER_13,
      }),
      // optional, defaults to m5.large
      instanceType: ec2.InstanceType.of(
        ec2.InstanceClass.BURSTABLE3,
        ec2.InstanceSize.SMALL
      ),
      vpc,
      vpcSubnets: vpc.selectSubnets({
        subnetType: ec2.SubnetType.PRIVATE_WITH_EGRESS,
      }),
      databaseName,
      securityGroups: [dbSecurityGroup],
      credentials: rds.Credentials.fromGeneratedSecret('postgres'),
      maxAllocatedStorage: 200,
    });

El código CDK de arriba creará una instancia de la base de datos y la colocará en la subnet privada que ya hemos creado en la sección anterior.

El método fromGeneratedSecret creará el secreto en el servicio secrets manager pasándole el nombre de usuario como parámetro. Queremos que el nombre de usuario sea Postgres, por lo que será el valor que pasaremos.

Y finalmente, vamos a asignar un espacio de 200GB de almacenamiento para la base de datos.

Cómo configurar las propiedades de la función Lambda

Usaremos Node 16 para escribir y empaquetar nuestra función Lambda, y abajo te muestro las propiedades para la Lambda.

Queremos que el 'timeout' sea de 3 minutos en lugar de los 3 segundos que son por defecto, y queremos asignar un espacio de 256MB para la función Lambda.

Ya que el aws-sdk ya viene provisto por el ambiente de ejecución de lambda, vamos a excluir la liberaría aws-sdk al escribir nuestra lambda.

Hemos instalado el paquete npm llamado pg que nos es útil para comunicarnos con la base de datos Postgres y excluimos el paquete pg-native puesto que no lo necesitamos.

 const nodeJsFunctionProps: NodejsFunctionProps = {
      bundling: {
        externalModules: [
          'aws-sdk', // Use the 'aws-sdk' available in the Lambda runtime
          'pg-native',
        ],
      },
      runtime: Runtime.NODEJS_16_X,
      timeout: Duration.minutes(3), // Default is 3 seconds
      memorySize: 256,
    };

A continuación, crearemos un grupo de seguridad para la función lambda. Nuestra lambda debe contener información acerca del "endpoint", el nombre de usuario y la contraseña para que la lambda pueda conectarse a la base de datos.

Vamos a pasar estos valores en forma de variables de entorno a la función lambda.

 const lambdaSG = new ec2.SecurityGroup(this, 'LambdaSG', {
      vpc,
    });

    const rdsLambdaFn = new NodejsFunction(this, 'rdsLambdaFn', {
      entry: path.join(__dirname, '../src/lambdas', 'rds-lambda.ts'),
      ...nodeJsFunctionProps,
      functionName: 'rdsLambdaFn',
      environment: {
        DB_ENDPOINT_ADDRESS: dbInstance.dbInstanceEndpointAddress,
        DB_NAME: databaseName,
        DB_SECRET_ARN: dbInstance.secret?.secretFullArn || '',
      },
      vpc,
      vpcSubnets: vpc.selectSubnets({
        subnetType: ec2.SubnetType.PRIVATE_WITH_EGRESS,
      }),
      securityGroups: [lambdaSG],
    });

Nota Importante: No vamos a pasar la contraseña de la base de datos cómo variable de entorno, sino que pasaremos el ARN (Nombre de Recurso de Amazon) en su lugar y traeremos la mera contraseña de forma dinámica, (en tiempo de ejecución) desde el secrets manager al interior de Lambda para más y mejor seguridad.

Permisos de acceso a la contraseña de la base de datos para lambda

Aunque le hemos pasado el arn secreto (secret arn) en forma de variable de entorno, lambda debería tener los permisos necesarios para poder leer el secreto del secrets manager, en este caso la contraseña de la base de datos.

La línea de código de abajo provee de estos permisos:

dbInstance.secret?.grantRead(rdsLambdaFn);

La línea de código CDK anterior creará un rol para la lambda con 2 permisos (DescribeSecret y GetSecretValue) para el secrets manager, para que de esta forma nuestra lambda tenga permitido obtener el valor secreto (la contraseña de la base de datos) antes de intentar comunicarse con ella.

Es posible ver lo mismo desde la consola AWS en el servicio Lambda.

Grupo de seguridad para la instancia de la base de datos RDS

No queremos permitir que la conexión a la base de datos esté disponible para todos, pero sí queremos que las conexiones desde lambda sean posibles.

El siguiente código CDK agrega una regla de ingreso que permite la conectividad a la instancia RDS desde nuestra función lambda a través del puerto 5432 (el puerto para la base de datos Postgres):

  dbSecurityGroup.addIngressRule(
      lambdaSG,
      ec2.Port.tcp(5432),
      'Lambda to Postgres database'
    );

Código de la función lambda para la comunicación con la base de datos

El código específico de la función lambda que le permite la comunicación con la base de datos es muy simple. Ya que estamos usando una base de datos Postgres, usaremos el paquete pg para comunicarnos con Postgres desde el ambiente nodejs.

Antes de iniciar la conexión a la base de datos, traeremos la cadena de texto desde el servicio secrets manager. Este texto secreto es una cadena de texto JSON que contiene tanto el nombre de usuario como la contraseña. Por lo que sólo necesitaremos usar JSON.parse() y tomar sólo la contraseña.

import * as AWS from 'aws-sdk';
import { Client } from 'pg';

export const handler = async (event: any, context: any): Promise<any> => {
  try {
    const host = process.env.DB_ENDPOINT_ADDRESS || '';
    console.log(`host:${host}`);
    const database = process.env.DB_NAME || '';
    const dbSecretArn = process.env.DB_SECRET_ARN || '';
    const secretManager = new AWS.SecretsManager({
      region: 'us-east-1',
    });
    const secretParams: AWS.SecretsManager.GetSecretValueRequest = {
      SecretId: dbSecretArn,
    };
    const dbSecret = await secretManager.getSecretValue(secretParams).promise();
    const secretString = dbSecret.SecretString || '';

    if (!secretString) {
      throw new Error('secret string is empty');
    }

    const { password } = JSON.parse(secretString);

    const client = new Client({
      user: 'postgres',
      host,
      database,
      password,
      port: 5432,
    });
    await client.connect();
    const res = await client.query('SELECT $1::text as message', [
      'Hello world!',
    ]);
    console.log(res.rows[0].message); // Hello world!
    await client.end();
  } catch (err) {
    console.log('error while trying to connect to db');
  }
};

Y finalmente, vamos a ejecutar una simple consulta select en nuestra base de datos.

Cómo probar y comprobar el proyecto

Ahora ya podrás ingresar a tu consola AWS para la realización de pruebas. Selecciona el servicio Lambda y luego selecciona tu función lambda, en nuestro caso sería rdsLambdaFn.

Para este tutorial no necesitas preocuparte por la propiedad lambda event ya que no la vamos a utilizar en el código de nuestra función. Haz click en el botón de prueba "Test" y podrás ver los logs.                

El problema de rendimiento

Lambda es bien conocido por funciones cuya ejecución es de corta duración. De hecho, el límite máximo de "timeout" es 15 minutos.

Cómo puedes ver en el código de la función, estamos iniciando la conexión a la base de datos cada vez que la función lambda es invocada.

Dependiendo en el evento fuente de la lambda (digamos la fila SQS), esto podría crear conexiones a un ritmo mayor y se desconectaría al finalizar la función lambda.

Esto incrementa significativamente la carga al servidor de la base de datos RDS, lo que a su vez reduce el rendimiento. ¿Cómo arreglar este problema entonces?

Cómo usar RDS Proxy

Como alternativa a la creación directa de conexiones desde lambda hacia la base de datos, podemos tener una Proxy a RDS como intermediario entre lambda y la base de datos RDS.

El propósito del proxy RDS es mantener un conjunto de conexiones para que cualquier consumidor pueda conectarse al proxy y en su momento, a la base de datos. Nótese que aquí, no estaríamos creando una conexión, sólo obteniendo una conexión ya creada.

Hay 2 ventajas al usar este método:

1. Reduce la carga al servidor de la base de datos: Dado que no necesitamos crear una conexión para cada invocación lambda en el servidor, la carga se reduce significativamente.
2. Rendimiento lambda mejorado: Desde lambda, sólo estaremos recibiendo una conexión al proxy RDS y no estaremos creando una nueva conexión a la base de datos, lo que mejora el rendimiento de la función lambda.

Cambios requeridos para usar el RDS Proxy

No necesitamos realizar grandes cambios a nuestra arquitectura ni a nuestro código. Sólo hay que hacer un par de cosas:

• Crear la proxy RDS y asociarle el grupo de seguridad de la base de datos que hemos creado anteriormente.
• Actualizar la variable de entorno del endpoint lambda para que la función pueda conectarse al proxy RDS y no así a la base de datos RDS directamente.

No es necesario cambiar el código de la función lambda.

Arquitectura actualizada

Abajo puedes ver el diagrama actualizado de la arquitectura.

Cómo crear el proxy RDS

Necesitamos crear el proxy RDS y agregar la instancia de la base de datos cómo el objetivo del proxy.

const dbProxy = new rds.DatabaseProxy(this, 'Proxy', {
      proxyTarget: rds.ProxyTarget.fromInstance(dbInstance),
      secrets: [dbInstance.secret!],
      securityGroups: [dbSecurityGroup],
      vpc,
      requireTLS: false,
      vpcSubnets: vpc.selectSubnets({
        subnetType: ec2.SubnetType.PRIVATE_WITH_EGRESS,
      }),
    });

Nótese que también estamos pasando el secreto de la base de datos al proxy pues este será responsable de mantener las conexiones. Estamos usando el mismo grupo de seguridad de la base de datos, como hicimos para poder abrir el puerto 5432.

Cómo actualizar el endpoint para lambda

No es necesario que modifiquemos el código de la función lambda. Sólo necesitamos actualizar el endpoint que lo hemos pasado como variable de entorno.

 environment: {
        DB_ENDPOINT_ADDRESS: dbProxy.endpoint,
        DB_NAME: databaseName,
        DB_SECRET_ARN: dbInstance.secret?.secretFullArn || '',
      },

No haremos ningún otro cambio.

Mejoras de rendimiento

Cuando realizas pruebas a tu función lambda, puedes ver que se conecta al proxy, en vez de a la instancia de la base de datos (ya que estamos imprimiendo la información del endpoint como host).

También debes notar que el rendimiento mejora significativamente. Antes tomaba cerca de 500ms (milisegundos), ahora sólo le toma 50ms..

Nótese que podría tomar tiempo adicional cuando se obtiene la conexión inicial del proxy RDS, pero obtener las subsecuentes conexiones, será rápido como se muestra arriba.

Conclusión

Espero que este tutorial te haya ayudado a aprender cómo realizar una conexión a RDS desde Lambda.

Gracias por leer hasta este punto, yo escribo acerca de AWS Lambda, Fargate, CI/CD Pipeline y Tecnologías Serverless en  https://www.cloudtechsimplified.com. Si te interesa puedes suscribirte aquí.

Las ramas Git (del inglés branches) te permiten agregar nuevas características sin modificar la versión "viva" (de producción) de tu proyecto. Y si trabajas en un equipo, distintos desarrolladores podrían tener ramas independientes o únicas en las que trabajar.

Al largo plazo tendrás que empujar (subir) esas ramas independientes a un servidor remoto como, por ejemplo; GitHub, GitLab, entre otros.

En este artículo te voy a mostrar cómo puedes empujar una rama Git de tu entorno local a un servidor remoto. No importa si todavía no has empujado ninguna rama, tampoco si ya has empujado solo la rama principal de tu repositorio y quieres empujar otras. Te voy a enseñar todo desde cero.

Como empujar la rama principal al remoto

Si quieres empujar la rama main (principal) al servidor remoto por primera vez, necesitarás asegurarte de que hayas ejecutado antes los siguientes comandos:

• git init para inicializar el repositorio local.
• git add . para agregar todos los archivos al repositorio local
• git commit -m ‘mensaje descriptivo del commit’ para guardar los cambios realizados a los archivos que contiene el repositorio

Para empujar el repositorio "main", será necesario primero agregar el servidor remoto a Git ejecutando git remote add <url>.

Para confirmar que se ha agregado el servidor remoto, ejecuta git remote -v:

Finalmente, para empujar el repo ejecuta git push -u origin <branch-name> ("main" es el nombre de la rama que yo estoy empujando). La rama principal podría ser "master" o "main" para ti, ya que antes "master" era el nombre por defecto, pero ahora es "main".  Pero puedes ejecutar  git branch -M main en caso de que se llame "master" para cambiarle el nombre a "main" si así lo prefieres.

Si has configurado Git para usar el asistente de credenciales, se te pedirá tu nombre de usuario GitHub y el PAT (del inglés, Personal Access Token):

Así es como empujas la rama principal (main) por primera

Como empujar una rama nueva al repositorio remoto

Si tienes otra rama con la que has trabajado que quieres empujar al repositorio remoto, también usaras el comando git push, pero de manera ligeramente distinta.

Como recordatorio, para crear una nueva rama debes ejecutar git branch nombre-rama. Y para cambiarte a esa rama, para poder trabajar en ella, tienes que ejecutar git switch branch-name o git checkout branch-name

Para empujar la rama al servidor remoto, ejecuta git push -u origin <branch name>. En mi caso, el nombre de esa rama es bug-fixes. Asi que ya he ejecutado git push -u  origin bug-fixes:

Para confirmar que la rama ha sido empujada correctamente, ve a GitHub y haz clic en el menú colapsable que muestra la rama actual y las disponibles. Deberías ver la nueva rama ahí:

Conclusión

Este artículo te ha mostrado como empujar una rama a un repositorio remoto. Además de eso, también vimos cómo puedes hacerlo por primera vez.

Si quieres aprender más acerca de git, revisa los otros artículos de freeCodeCamp en español que cubren los temas de Git y GitHub.

Netlify es una plataforma muy popular para desarrollo web que facilita la compilación, despliegue y administración de sitios web.

Puedes usar Netlify como hosting para tus sitios y te ayuda a editarlos y publicar los cambios que realices. También te brinda características adicionales como seguridad, servicios de autenticación y autorización de usuarios y más.

Esta guía se enfoca en mostrarte como configurar una función serverless en Netlify para ocultar las API keys de la aplicación del lado del cliente.

Para esta lección crearás un motor de búsqueda de imágenes y lo desplegarás en Netlify, que además realizará llamadas a la API de Pixabay usando funciones serverless.

Este es el mismo proceso para cualquier otra aplicación front-end (cliente) elaborada con JavaScript, con librerías JavaScript o frameworks JS como ReactJS, NextJS, VueJS, Angular, etc.

Prerrequisitos

Para seguir los pasos en este tutorial deberás contar con lo siguiente:

• Una cuenta en Netlify (regístrate aquí)
• Entendimiento básico de APIs RESTFUL, funciones Lambda y conceptos de asincronía (async/await).

El demo terminado lo puedes encontrar en la rama principal de GitHub o en este enlace: https://netlify-func-demo.netlify.app.

¿Qué es una función Netlify?

Una función Netlify es una función serverless o lambda cuyo acceso es provisto por Netlify. Se usan para desplegar código serverless o lógica de "servidor" (back-end) pero sin la necesidad de realmente administrar un servidor dedicado.

El propósito de una función Netlify es manejar código con base en eventos (event-driven) y enviar solicitudes HTTP que devuelvan una respuesta en formato JSON.

"Las funciones serverless, llamadas comercialmente "funciones Netlify" por ejecutarse en la plataforma de Netlify, son una manera de desplegar código del lado del servidor en forma de API endpoints" - Documentación Netlify

La función accede de manera segura el entorno de las variables en segundo plano ("tras bamablinas") mediante una función lambda de Amazon Web Services (AWS).

Las credenciales secretas como los tokens de acceso o claves API que se ocultan sólo usando variables de entorno son menos seguras. Esto se debe a que pueden ser fácilmente obtenidas usando las "Developer Tools" (herramientas de desarrollo) a traves de la API "fetch request" del navegador.

Las claves API, si son interceptadas pueden ser mal usadas por actores maliciosos lo que podría afectar a tu aplicación o incrementar tus costos si esta depende de un servicio API de paga.

Otras funciones serverless utilizadas para ejecutar código sin tener que manejar servidores incluyen: las AWS Lambda Functions, Azure Functions y Google Cloud Functions.

Cómo configurar una aplicación cliente

Cómo clonar la aplicación demo

Para empezar con este tutorial puedes clonar la "aplicación motor de búsqueda de fotos de stock" desde su  repositorio GitHub. Mira la previsualización en Netlify en https://netlify-func-demo.netlify.app.

El primer paso es clonar el repositorio:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git

Paso siguiente, cambia (ingresa) al directorio netlify-serverless-functions-demo.

 cd netlify-serverless-functions-demo

Luego tendrás que instalar las dependencias.

npm install
#OR 
yarn add

Ahora ejecuta el servidor de desarrollo. Ejecuta el siguiente comando para este propósito:

netlify dev

La aplicación estará disponible en: https://localhost:8888.

Alternativamente puedes omitir los pasos anteriores si quieres crear la aplicación desde cero. En el próximo paso crearás una aplicación JavaScript para la búsqueda de fotos stock.

Cómo construir la aplicación demo usando JavaScript

El primer paso es configurar la aplicación front-end (cliente). Abre tu editor de código favorito como, por ejemplo: VS Code.

A continuación, crea la carpeta dist y dentro crea el archivo index.html. Copia y pega ahí el siguiente código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Stock Photos Search Engine</title>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Search For Stock Photos</h1>
        <div class="search-section">
          <input
            type="text"
            name="search"
            class="search"
            placeholder="Enter a keyword"
          />
          <input
            id="searchBtn"
            class="search-btn"
            type="submit"
            value="Search"
          />
        </div>
      </header>

      <div class="photo-wrapper">
        <img src="" alt="" class="photo" />
      </div>
    </div>

    <script src="./script.js" type="module"></script>
  </body>
</html>

En el mismo directorio dist agrega la siguiente hoja de estilos en un archivo llamado style.css:

/* dist/style.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #222;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  min-width: 100vw;
  width: 100%;
  height: 100%;
}

h1 {
  padding-bottom: 20px;
}

.search-section {
  display: inline;
  text-align: center;
  min-width: 310px;
}

.search,
.search-btn {
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  padding: 15px;
  height: 50px;
}

.search {
  background-color: #d1f3bf;
  color: #222;
  min-width: 225px;
}

.search-btn {
  background-color: #04ab04;
  color: #f6f6f6;
  cursor: pointer;
  margin-left: 5px;
  min-width: 80px;
  transition: all 0.3s ease-in-out;
}

.search-btn:hover {
  background-color: #2dc22d;
}

.photo-wrapper {
  display: flex;
  gap: 15px;
  margin: 30px;
}

.photo-wrapper img {
  width: 200px;
}

Crea una cuenta gratuita en Pixabay

El primer paso para utilizar la Pixabay API es darse de alta una cuenta con tu correo electrónico.

Como se muestra en la imagen de arriba, tus llaves API las puedes encontrar debajo de la seccion de parámetros en la página oficial de documentación de Pixabay API.

Crea una variable de entorno

Las variables de entorno (comúnmente abreviadas como "env") son combinaciones pares de clave/valor que pueden afectar el comportamiento y los procesos de un sistema operativo o aplicación.

Usar variables de entorno se recomienda para configurar servicios de terceros y sus credenciales durante el desarrollo.

Instala dotenv

Una vez que haya completado la creación de tu cuenta en Pixabay, abre tu terminal e instala el paquete dotenv. Esto permitirá que tu aplicación pueda leer las variables de entorno del archivo .env.

npm install dotenv
#O bien
yarn add -D dotenv

En el próximo paso podrás guardar la clave API en el archivo .env.

Crea el archivo .env

En la raíz del directorio de tu aplicación crea el archivo .env y almacena las llaves (keys) API copiadas de tu perfil Pixabay.

PIXABAY_API_KEY=123456-7890

Donde PIXABAY_API_KEY=123456-7890 representa la llave y su valor asociado.

Nota: Reemplaza este par clave/valor con el valor apropiado.

Crea el archivo .gitignore

Para evitar incluir archivos y valores sensibles como node_modules y secret keys  en cada commit en repositorios públicos, crea el archivo .gitignore en la misma carpeta raíz del proyecto y agrega lo siguiente:

node_modules
.env
.netlify

La carpeta .netlify que contiene funciones serverless compiladas y otros archivos serán excluidos cuando el proyecto se empuje a GitHub o a cualquier otro sistema de control de versiones.

Crea una función get request

Ahora deberás añadir la lógica para realizar la petición fetch en el archivo script.js. Ajustaremos la lógica más adelante usando funciones Netlify.

/* dist/script.js */
const dotenv = require("dotenv").config();

const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
  }
});

async function getPhoto(keyword) {
  const apiKey = PIXABAY_API_KEY;
  let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    let imageURL = data.hits;

    imageURL.forEach((result) => {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${result.webformatURL}`);
      photoWrapper.appendChild(imageElement);
    });
  } catch (error) {
    alert(error);
  }
}

Nota: Como he mencionado anteriormente, si se publica este repositorio en GitHub, podremos acceder a la clave API en el "lado del cliente" desde un navegador, aunque hayamos excluido el archivo .env, mas adelante veremos como.

Para ilustrar esto, selecciona la rama testing del repositorio de esta aplicación. La previsualización del sitio mostrara los siguientes errores de referencia (Reference Errors) en la consola del navegador:

Uncaught ReferenceError: require is not defined
Uncaught ReferenceError: require is not defined at getPhotos
Uncaught ReferenceError: process is not defined at getPhotos

Esto se debe a que no hay manera de vincular con las variables de entorno especificadas en el archivo .env, ya que este no se envió en el commit al repositorio público en GitHub.

En el siguiente paso, selecciona y clona la rama testing en tu máquina de forma local con los siguientes comandos:

git clone https://github.com/frankiefab100/netlify-serverless-functions-demo.git
cd netlify-serveless-functions-demo
npm install
netlify dev

La aplicación estará disponible en tu navegador en la dirección localhost:8888.

Ahora abre las herramientas para desarrolladores (Developer Tools) o haz clic derecho y selecciona inspeccionar. O puedes presionar la tecla F12. Luego vea la pestaña Network y haz clic en la URL de la petición del archivo getPhotos.js.

Ahora deberías poder ver la clave API expuesta públicamente en la sección de encabezados de la pestaña Network donde fue devuelta con los datos de la respuesta en tu navegador.

Esto es un problema de seguridad ya que la pestaña Network en las herramientas de desarrollo típicamente permite mostrar información tal como la URL de la petición, el estado y los datos de la respuesta.

En la siguiente sección encontraras la manera segura de ocultas la clave API utilizando las funciones Netlify.

Cómo empezar a usar Netlify Functions

Primero, necesitarás iniciar sesión en tu terminal e instalar la Netlify CLI y Lambda como dependencias de desarrollo. Puedes hacerlo al ejecutar este comando:

npm install -g netlify-cli netlify-lambda
#OR 
yarn add -D netlify-cli netlify-lambda --save-dev

Agrega los comandos personalizados build y dev en package.json

Estos comandos, crearán e iniciarán la aplicación en el servidor y también la ejecutarán en el nevegador.  Aquí puedes ver un ejemplo de como podrías agregar este script con comandos en el archivo package.json:

"scripts": {
   "build": "npm run-script",
   "dev": "netlify dev"
 }

Instala Axios

Usaremos el método axios.get porque esta función de Node difiere del método fetch en que este último está pensado para correr en el navegador.

Para instalar Axios, abre tu terminal e ingresa el comando:

npm install axios
#OR
yarn add -D axios

En este caso vamos a trabajar nuestra aplicación solo con JavaScript puro (vanilla JS), es decir sin usar librerías o marcos de trabajo para nuestro frontend, por lo que deberás importar axios de la siguiente manera:

const axios = require("axios");

Para cuando se usan librerias como React, debes importar asi:

import axios from "axios";

Crea una función serverless

En la raíz del proyecto, crea una carpeta llamada netlify y a su vez dentro de este crea otra carpeta functions. En esta carpeta functions crea un archivo llamado getPhotos.js.

Crearás una función serverless en el archivo getPhotos. Esto ocultará efectivamente las llaves API cuando traigamos las imágenes desde la API de Pixabay.

//netlify/functions/getPhotos.js 
require("dotenv").config();

const axios = require("axios");

exports.handler = async (event, context) => {
  try {
    const { keyword } = event.queryStringParameters;
    let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

    let imageURL = response.data.hits;

    return {
      statusCode: 200,
      body: JSON.stringify({ imageURL }),
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error }),
    };
  }
};

Aquí la clave process.env.PIXABAY_API_KEY hace referencia al entorno de configuración de la clave API especificado en el archivo .env para el modo de desarrollo.

El parámetro keyword acepta una cadena de texto (string) que es accesible en la propiedad queryStringParameters y devuelve datos commo respuesta almacenados en la variable imageURL. Esta será enviada al archivo script.js como respuesta a la petición (veremos esto más adelante).

Si la petición GET es exitosa, devolverá una respuesta con el código (statusCode) 200 y el objeto JSON correspondiente. En caso de errores, recibiremos una alerta con el mensaje y código de estado.

Debido a cambios de versión, Axios podría devolver un Buffer como respuesta en tu terminal que se vera algo como esto:

Para evitar esto deberás adjuntar lo siguiente a la petición GET:

 let response = await axios.get(
      `https://pixabay.com/api/?key=${process.env.PIXABAY_API_KEY}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`,
      {
        headers: { Accept: "application/json", "Accept-Encoding": "identity" },
        params: { trophies: true },
      }
    );

Crea un archivo de configuracion Netlify

En la raíz del proyecto, crea el archivo netlify.toml. Este archivo especifica como es que Netlify construirá y desplegará tu aplicación.

Ahora, agrega la siguiente configuración en el archivo netlify.toml:

[build]
  command = "npm run build"
  functions = "netlify/functions"
  publish = "dist"

Nota:

• command = "npm run build" ejecuta la Netlify CLI (Interfaz de Línea de Comandos) para que realice la construcción de la aplicación a partir de las funciones.  
• functions = "netlify/functions" indica que las funciones en getPhotos existen en ña carpeta netlify/functions.
• publish = "dist" identifica dist como la carpeta desde donde será "servido" este archivo.

Edita el archivo script.js con la URL para las peticiones a Netlify functions

Siguiente paso, edita la apiURL de esto:

let apiURL = `https://pixabay.com/api/?key=${apiKey}&q=${keyword}&image_type=photo&safesearch=true&per_page=3`;

A esto (el endpoint para la petición HTTP a las Netlify Functions):

  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

Esta función "serverless" será consultada desde el lado del cliente de tu aplicación mediante el endpoint: /.netlify/functions/getPhotos. Una vez que la solicitud es enviada, la función getPhotos será invocada desde script.js.

La respuesta imageURL obtenida de la Netlify functions getPhotos será pasada o enviada como el valor asignado al parámetro keyword en el "query string" (cadena de texto de consulta) de la función. Su contenido será recorrido mediante un ciclo for para devolver las 3 imágenes desde la API de Pixabay.

El archivo script.js debe verse así:

/* dist/script.js */
const searchbar = document.querySelector(".search");
const submitBtn = document.querySelector(".search-btn");
const photoWrapper = document.querySelector(".photo-wrapper");

submitBtn.addEventListener("click", () => {
  getPhoto(searchbar.value);
  searchbar.value = "";
  photoWrapper.innerHTML = "";
});

window.addEventListener("keydown", (e) => {
  if (e.keyCode === 13) {
    getPhoto(searchbar.value);
    searchbar.value = "";
    photoWrapper.innerHTML = "";
  }
});

async function getPhoto(keyword) {
  let apiURL = `/.netlify/functions/getPhotos?keyword=${keyword}`;

  try {
    const response = await fetch(apiURL, {
      method: "GET",
      headers: { accept: "application/json" },
    });
    const data = await response.json();

    for (let i = 0; i < data.imageURL.length; i++) {
      let imageElement = document.createElement("img");
      imageElement.setAttribute("src", `${data.imageURL[i].webformatURL}`);
      photoWrapper.appendChild(imageElement);
    }
  } catch (error) {
    alert(error);
  }
}

Nota: En el código de arriba mantiene tu variable de entorno segura ya que se accede a esta desde una función serverless.

Ejecuta el servidor de desarrollo

Ahora, ejecuta tu aplicación con el siguiente comando:

netlify dev

Esto hará que se cargue la función getPhotos mediante https://localhost:8888/.netlify/functions/getPhotos.

Luego, inicia el servidor de desarrollo y lanza la aplicación en tu navegador por defecto en  localhost:8888.

En este punto, la configuración de la función Netlify está completa y ya es posible realizar solicitudes GET HTTP.

Cómo realizar solicitudes para traer datos

Ahora que ya tienes la aplicación servida, hagamos una solicitud (fetch) para traer datos. Ingresa algún texto en el campo input y dale Enter o haz clic en el botón para traer las imágenes desde la API de Pixabay.

Para mayor información acerca del API de Pixabay, ve a su sitio oficial de documentación.

El comando anterior enviará una solicitud a la función serverless y luego devolverá seis respuestas. Aquí cómo se verá la respuesta en la ventana de tu terminal:

Request from ::1: GET /.netlify/functions/getPhotos?keyword=flower
Response with status 200 in 4895 ms.

También puedes utilizar las herramientas de desarrollador (Developer Tools) en la pestaña Network (Red) para validar la solicitud.

La solicitud devuelve la URL de nuestra aplicación, la función Netlify getPhotos, el script.js y las imágenes de Pixabay.

Cómo hospedar la aplicación en el repositorio remoto

Ahora, deberías empujar tu proyecto al hosting de control de versiones GitHub.

git add .
git commit -m"initial commit"
git push origin -u main

Cómo desplegar la aplicación y la función serverless en Netlify

Una vez que hayas publicado el proyecto en GitHub, inicia sesión en Netlify y conecta tu cuenta GitHub para dar autorización.

Como se muestra en la imagen de arriba, haz clic en Add New Projecty luego busca el repositorio de tu aplicación en la lista desplegable. Enseguida, haz clic en Build Your Site. Esto tomará algunos minutos en completarse.

Acabas de desplegar la aplicación usando la UI de Netlify. Ahora tu aplicación estará disponible en: https://netlify-func-demo.netlify.app.

La URL para peticiones "fetch" (del inglés traer) debería verse como ésta: https://netlify-func-demo.netlify.app/.netlify/functions/getPhotos.

Opcional - Cómo configurar la aplicación desde el tablero Netlify

Alternativamente, puedes configurar el comando Netlify desde el tablero (o panel de control, del inglés, Dashboard). Si estas configuraciones ya han sido especificadas en el archivo netlify.toml, se sobreescribirán cualquier configiracion correspondiente.

Primero, selecciona la configuración de la carpeta del proyecto en "Site settings".

Configura el comando Build y el directorio público

Ve a Site settings> Deploy > Build & Deploy, edita los siguientes comandos y luego guarda los cambios:

• Commando build: npm run build
• Directorio público: dist

Configura la carpeta de las funciones

Por defecto, Netlify utiliza netlify/functions como el directorio en el cual encontrar las funciones a desplegar. En este caso, nuestra función serverless getPhotos se encuentra en la carpeta netlify/funcions.

Ahora configuraremos una carpeta personalizada donde Netlify puede encontrar tus funciones compiladas. Ve a Site settings > Functions e ingresa la ruta la carpeta en donde se encuentran almacenadas las funciones de tu repositorio.

Cómo configurar variables de entorno para producción

En el panel de control de Netlify (Dashboard) haz clic en Site settings > Build & deploy > Environment> Environment varibales y luego configura el par clave/valor de la siguiente manera:

PIXABAY_API_KEY=your-api-key-here

Haz clic en guardar, y enseguida redespliega la aplicación para que los cambios se apliquen.

Para redesplegar la aplicación en Netlify, ve a Deploys > Trigger deploy. A continuación, selecciona Clear cache and redeploy site.

Nota: El nombre de la variable de entorno (PIXABAY_API_KEY) debe coincidir con el que se referencia en el código en getPhotos.

Para una aplicación React, usa el prefijo REACT_APP_ para que puedan ser leídas desde el archivo .env.

 REACT_APP_PIXABAY_API_KEY=your-api-key-here

Cómo inicializar la función serverless desde la aplicación remota

Para conectar la carpeta de tu proyecto a la aplicación web ya desplegada, inicia sesión en tu cuenta Netlify desde la terminal:

netlify login

A continuación, inicializa la aplicación en Netlify ejecutando el siguiente comando en tu terminal:

netlify init

Tu aplicación ahora está configurada para despliegues continuos via Netlify.

Cómo compilar la función serverless de Netlify

Necesitas enlazar tu aplicación con el ID del sitio en Netlify antes de poder ejecutar el comando build en tu terminal. Para conectar la carpeta local de tu proyecto con el ID de tu sitio en Netlify, ingresa el siguiente comando en tu terminal:

netlify link

Luego de esto, se te pedirá que enlaces la carpeta mediante cualquiera de las siguientes formas:

• Búsqueda por nombre completo o parcial del sitio.
• Elegir de una lista de tus sitios recientemente editados.
• Ingresa el ID de tu sitio.

Una vez que hayas seleccionado tu opción preferida, se habrá enlazado la carpeta de tu proyecto con el sitio hospedado en Netlify. Esto te permite ejecutar comandos con la CLI de Netlify y automáticamente desplegar el proyecto desde el repositorio cada que haya cambios en el código.

En el siguiente paso, compilarás una función serverless mientras se ejecuta en el servidor. Para correr el comando build definido en el archivo netlify.toml, ejecuta el siguiente comando:

netlify build

Esto a su vez, ejecutará el comando npm run-script como fue especificado en el package.json. Ahora, tu función serverless que está en la carpeta netlify/functions será empaquetado ¡exitosamente!

Cómo poner a prueba la aplicación

Para realizar pruebas y confirmar que la función Netlify funciona correctamente, ejecuta el comando siguiente en tu terminal:

netlify functions:serve

Esto inyecta las variables de entorno de tu proyecto del archivo .env y ejecuta la función serverless..

Cómo confirmar la seguridad de la clave API Keys

Para inspeccionar tu aplicación y confirmar que las claves API se encuentran ocultas sigue los pasos a continuación:

Haz clic en la URL de tu aplicación hospedada y una vez abierta, navega a las herramientas de desarrollador (Developer Tools) presionando la tecla F12 o haciendo clic en cualquier lugar y seleccionando Inspeccionar. Navega a la pestaña de Red, donde deberías ver los datos traídos desde la API Pixabay.

Ahora ya has confirmado que has configurado exitosamente una función serverless y la has desplegado en Netlify.

Conclusión

Este tutorial introdujo las funciones serverless, JavaScript asíncrono y conceptos de APIs RESTful.

Espero que ahora sepas cómo crear funciones serverless/lambda y mantener de manera segura cualquier valor sensible como las llaves/claves API que utiliza tu aplicación del lado del cliente.

Si te atoraste con algo, puedes tener acceso al código completo en el Repositorio en GitHub.

¡Gracias por leer el artículo! Sígueme en Twitter.

Enlaces relevantes

• Cómo alojar un repositorio de GIT en un subdominio con Netlify
• Cómo implementar una aplicación basada en React Router en Netlify
• Cómo agregar un formulario Netlify a una aplicación React construida con create-react-app

¿Qué es Vue.js?

Vue.js es un marco de trabajo para interfaces gráficas web (del inglés: "front-end framework") creado por Evan You. Es uno de los más poderosos y fáciles de usar, con más de 9.5 millones de descargas mensuales.

En Septiembre 2020 se publicó la version nueva version Vue 3 core. Este nuevo Vue introduce increíbles nuevas características pero también algunos cambios disruptivos (que lo hace incompatible con versiones anteriores).

¿Por qué debería migrar a Vue3?

Así cómo la industria tecnológica está en constante evolución, también así las librerías, lenguajes y marcos de trabajo (frameworks). En cada nueva versión se arreglan errores y se introducen nuevas características. Y frecuentemente con cada versión mayor, se mejora el flujo de trabajo para los desarrolladores. Las nuevas funcionalidades pueden darte la oportunidad lograr con facilidad cosas que anteriormente eran consideradas tareas tediosas.

Vue 3 aún es relativamente nuevo y no es urgente migrar todos tus proyectos, pero eventualmente llegará el momento en que Vue 2 ya no recibirá soporte. Por tal motivo, es buena idea conocer qué pasos necesitarás para poder realizar la migración de tus proyectos.

En esta guía te llevaré de la mano a través de los pasos básicos que necesitas realizar para familiarizarte y llevar a cabo una migración a Vue 3. Para lo cual crearemos un proyecto y luego lo migraremos a Vue 3.

El proyecto que vamos a elaborar es intencionalmente uno muy simple, esto para que cualquiera pueda seguir los pasos y aprender. Mientras más complejo sea tu proyecto, más cuidado querrás tener para planear y llevar a cabo la migración.

Introducción

La nueva versión de Vue.js sí contiene algunos cambios disruptivos, además de nuevas capacidades y características. También, hay librerías populares como Vue Router que han sido actualizadas para incluir soporte para la nueva versión de Vue.

Si ya sabes usar Vue 2, las bases son prácticamente las mismas. Pero antes que puedas migrar un proyecto a Vue 3 hay cambios que necesitas tomar en consideración.

Dependiendo del tamaño del proyecto que quieras migrar, asegúrate considerar todos los cambios que han sido introducidos en la nueva versión para que tu aplicación pueda seguir funcionando correctamente luego de la migración.

Para este tutorial, vamos a mantener las cosas sencillas y te mostraré cómo migrar un proyecto Vue.js que actualmente usa Vue 2 a través de un enlace CDN.

Estoy tomand0 este proyecto de un libro que escribí (sólo disponible en inglés) para freeCodeCamp; puedes encontrarlo aquí.

En dicho proyecto usamos Vue Router, por lo que en este artículo también daremos un vistazo a lo nuevo en Vue Router.

Lo que necesitas para seguir esta guía

Para seguir esta guía necesitas conocimiento básico de Vue.js y Vue Router. Sino tienes conocimientos básicos de Vue y Vue Router te sugiero que empieces aprendiendo acerca de estos temas primero.

Lo que cubriremos en este artículo

Este tutorial está organizado en 3 capítulos. Primero daremos un vistazo a los cambios en Vue.js v3.x para luego dar una breve revisión de Vue Router v4.x. Y finalmente planearemos la migración del proyecto real.

• un vistazo a Vue v3.x
• cambios disruptivos para Vue v2.x
• un vistazo a Vue Router v4.x
• cambios disruptivos para Router v3.x
• migración del proyecto portafolio
• clonar el repositorio
• actualizar los CDN scripts
• actualizar la instancia Vue
• actualizar la instancia Vue Router

Un vistazo a Vue v3.x

Vue 3 introduce algunas nuevas características y un montón de cambios disruptivos. Veamos cómo estos cambios afectarán a tu aplicación y considerémoslos antes de realizar la migración.

Vue V3.x Cambios disruptivos

En Vue 3 los cambios disruptivos básicamente caen en 7 categorías:

• API Global (responsable del comportamiento de Vue) - es muy probable que quieras dar un vistazo a estos cambios.
• Directivas de templete (cambios en la forma en que funcionan las directivas "v-{directiva}") - es muy probable que quieras dar un vistazo a estos cambios.
• Componentes (cambios en su funcionamiento) - es muy probable que quieras dar un vistazo a estos cambios.
• La función de renderizado o bien "render function" (para la creación programática de elementos HTML).
• Elementos "custom" (elementos personalizados - informa a Vue de la creación de elementos HTML personalizados)
• Cambios menores (estos podrías no afectarte, pero de todas formas querrás revisarlos)
• APIs que han sido removidas (que ya no estarán disponibles para su uso en Vue 3)

Entre todos los cambios hay algunos de ellos que son utilizados por cualquier aplicación que utilice Vue, cómo el API Global y los componentes. Así que necesitaras tomarlos en cuenta si quieres empezar a usar la nueva versión de Vue.

También vale la pena mencionar los siguientes cambios:

• La manera de crear aplicaciones e instancias de los componentes ha cambiado (API Global).
• Siempre deberás declarar la opción "data" como una función (cambio menor).
• Cambia el orden de precedencia al utilizar las directivas v-if y v-for en el mismo elemento.
• Debes declarar la opción "emits" para los eventos de componentes.

Para la lista completa de los cambios puedes leer la documentación oficial (en inglés) o el PR (Pull Request) de la  documentación en español (en revisión para su publicación).

Demos un vistazo con mayor detalle a algunos de estos cambios.

Cómo crear una aplicación e instancias de component en Vue 3

En Vue 3 ha cambiado la manera en que se crean los componentes. El "Vue app" ahora utiliza el nuevo método .createApp() para generar nuevas instancias de aplicación.

La aplicación Vue ahora se considera cómo el componente raíz, así que la forma de definir sus opciones de datos también ha cambiado.

El elemento HTML raíz no ha cambiado por lo que todavía encontrarás en el documento index.html algo como esto:

<div id="app"></div>

Dentro del documento JavaScript hay un cambio importante que necesitarás tomar en cuenta: ya no es necesario usar new Vue() para crear una instancia nueva de "app" pero en su lugar usarás el nuevo método llamado .createApp(), veamos una comparación de sintaxis:

//Sintaxis Vue 3 

const app = Vue.createApp({
    // objecto "options" (opciones) 
})
app.mounth('#app') // Componente Raíz - Instancia Vue

//Sintaxis Vue 2 
const app = new Vue({
    // objecto "options" (opciones) 
    el: '#app'
})

Cómo definir un componente Vue 3

Para definir un componente en Vue 3 ya no se usa Vue.component(). En su lugar ahora se utiliza el componente raíz de la aplicación, así:

/* Sintaxis Vue 3 */
const app = Vue.createApp({
    // opciones aquí
})

app.component('componenet-name', {
    //código de componente aquí
})


/* Sintaxis Vue 2*/
Vue.component('component-name', {
    //código de componente aquí
})

Cómo usar el objeto "data options" en Vue 3

Dado que la instancia principal de "app" se considera un componente raíz ya no se especifica la propiedad "data" como un objeto. Ahora necesitas definirla como una función que a su vez devuelve un objeto; como usualmente se hace en los componentes.  

// Vue 3
const app = Vue.createApp({
    // objecto options 
    data(){
        return {
            message: 'hola mundo'
        }
    }
})
app.mounth('#app') // Componente raíz - Instancia Vue

// Sintaxis Vue 2 
const app = new Vue({
    // objecto options
    el: '#app'
    data: {
        message: 'hola mundo'
    }
})

Cambio de precedencia para v-if/v-for en Vue 3

En Vue 2 si usas ambas directivas en el mismo elemento lo que sucederá es que la directiva v-for tendrá precedencia sobre v-if. Pero en Vue 3, será siempre v-if la que tendrá precedencia.

Sin embargo, usar ambas directivas en el mismo elemento no es buena idea. Asegúrate de revisar la documentación al respecto.

Cómo usar la propiedad "emits" en eventos de componente en Vue 3

Este es un cambio disruptivo así como una nueva característica.

De forma similar a la propiedad props, ahora en Vue 3 también existe la propiedad emits que es utilizada por el componente para declarar eventos que "emitirá" a su componente padre.

Recomiendo muchísimo el uso de esta propiedad para evitar emitir eventos duplicados en componentes que necesitan re-emitir eventos nativos como el evento "click".

Aquí un ejemplo de la documentación oficial:

<template>
  <div>
    <p>{{ texto }}</p>
    <button v-on:click="$emit('aceptado')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['texto'],
    emits: ['aceptado']
  }
</script>

La propiedad "emits" también acepta un objeto.

Resumen Vue Router v4.x

Con el nuevo lanzamiento de Vue.js también tenemos una nueva version de Vue Router. El nuevo lanzamiento v4.x contiene algunos cambios disruptivos que debes considerar si vas a migrar un proyecto a la nueva versión de Vue.

Cambios disruptivos en Vue Router V4

Hay dos cambios disruptivos que son especialmente importantes de mencionar ya que son la base de una aplicación Vue Router, y deberás conocerlos si vas a migrar tu aplicación:

• La instancia Vue Router cambió
• Hay una nueva "history option"

La lista completa de cambios la puedes encontrar en la documentación oficial (sólo disponible en inglés).

Miremos a profundidad estos dos cambios.

La instancia Vue Router 4 ha cambiado

Para crear una nueva instancia Vue Router ya no se usa la función-constructor VueRouter. En cambio se hace de la siguiente forma de acuerdo con la documentación oficial (sólo en inglés).

El código ha cambiado de esto:

// Crear la instacia router y pasar la opción `routes`(rutas)
// Es posible pasar opciones adicionales, 
//  pero mantengámoslo simple por ahora
const router = new VueRouter({
  routes // abreviatura para `routes: routes`
})

// Crear y montar (mount) la instancia raíz (root).
// Asegurárse de usar la instancia router para
// que toda la aplicación tenga "conocimiento" del router.
const app = new Vue({
  router
}).$mount('#app')

A esto:

// Crear la instacia router y pasar la opción `routes`(rutas)
// Es posible pasar opciones adicionales, 
//  pero mantengámoslo simple por ahora

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes, // abreviatura para `routes: routes`
});

// Crear y montar (mount) la instancia raíz (root).
const app = Vue.createApp({})
// Asegurárse de usar la instancia router para
// que toda la aplicación tenga "conocimiento" del router

app.use(router)

app.mount('#app')

En el código anterior puedes ver que para crear una instancia Vue Router es necesario utilizar el objeto VueRouter llamando al método createRouter().

También podemos ver que la propiedad history es obligatoria: history: VueRouter.createWebHashHistory(). Si no la defines se te generará un error por la consola.

A continuación crearás la instancia Vue usando el método const app = createApp() para luego llamar al método .use() desde app.

Finalmente podrás montar el elemento raíz en la instancia app usando app.mount('#app').

Cómo migrar un proyecto portafolio de Vue 2 a Vue 3

Considerando lo visto hasta ahora y luego de una cuidadosa consideración y revisión de los cambios disruptivos, intentemos actualizar un proyecto, usaremos un proyecto de portafolio.

Necesitaremos:

• Clonar el repo
• Editar los scripts de las CDNs
• Editar la instancia Vue
• Editar la instancia Router

Para migrar tu aplicación a Vue 3 necesitaremos editar lo siguiente:

• La instancia de aplicación Vue
• La instancia Vue-Router
• Enlaces a CDNs

Vayamos paso a paso.

Clonar el repositorio del proyecto

Primero asegúrate de clonar el repositorio en el folder llamado "vue-folio":

git clone https://bitbucket.org/fbhood/vue-folio/src/master/ vue-folio

Ya que nuestro proyecto utiliza CDN para cargar Vue el siguiente paso es editar los enlaces CDN.

Editar los enlaces CDN

En nuestro proyecto usamos Vue y Vue Router desde un CDN, por tal debemos actualizar ambos enlaces.

Abrir el archivo index.html y remplazar esta parte:

    <!-- VueJS 3 versión de producción  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>

con esto:

    <!-- VueJS 3  versión de producción-->
    <script src="https://unpkg.com/vue@3"></script>

    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router@4"></script>

Actualiza el código

Ahora si corres el proyecto con live server y abres el inspector notarás que la aplicación no se muestra y que hay un par de errores que se pueden ver en la consola. Ambos errores podrían relacionarse con Vue router:

You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.

Uncaught TypeError: window.Vue.use is not a function
    at vue-router.js:1832
    at vue-router.js:9
    at vue-router.js:10

Uncaught ReferenceError: VueRouter is not defined
    at main.js:185

¡¿Vue router no está definido?!  ¿Porqué?

Bueno, recordemos que cuando Vue fue re-escrito sus librerías tuvieron que actualizar también su código. Así que, no olvidemos estos cambios disruptivos que en este caso, como podemos ver tienen relación con Vue router; ya que nuestra aplicación lo utiliza.

Actualicemos primero la instancia principal Vue para que utilice la nueva sintaxis. Luego veremos qué otros cambios necesitamos realizar para que Vue Router trabaje correctamente.

Actualiza este código que se encuentra en el archivo main.js, de esto:

// crear y montar una nueva instancia Vue

const app = new Vue({
    router
}).$mount('#app')

a esto:

// crear y montar una nueva instancia Vue

const app = Vue.createApp({
    router
})
app.mount('#app')

Cambios en Vue Router 4

Anteriormente vimos la nueva sintaxis para definir el componente raíz con base en la instancia Vue, pero ahora necesitamos tomar en cuenta los cambios disruptivos en Vue router también.

La forma de instanciar Vue Router ha cambiado

Cambió de esto:

// crear una nueva instancia VueRouter
const router = new VueRouter({
    routes
})

a esto:

// crear una nueva instancia VueRouter
const router = VueRouter.createRouter({
    // Provee una implementación de "history". Usamos "hash" por su simplicidad en este ejemplo.
    history: VueRouter.createWebHashHistory(),
    routes, // abreviación de `routes: routes`
})

El código anterior aborda dos cambios mayores: new VueRouter() ha sido remplazado con VueRouter.createRouter(), y la nueva opción history remplaza a la opción mode.

Finalmente, hagamos que nuestra aplicación sea consciente de que estamos usando Vue Router. Inyectamos la instancia del router en la instancia Vue y luego necesitaremos instruirla para que use el router utilizando el método .use() y pasar la instancia del router.

Cambiemos esto:

// crear y montar la instancia Vue

const app = Vue.createApp({
    router
})
app.mount('#app')

a esto:

// crear y montar la instancia Vue

const app = Vue.createApp({})
app.use(router)
app.mount('#app')

Ahí lo tienes!

Conclusión

No importa cuán compleja sea tu aplicación Vue, si deseas migrar a la nueva versión mayor, necesitarás un plan, leer las notas de cambios y novedades, así como revisar la lista de los cambios disruptivos para estar seguros que entiendes cuales partes podrían causar problemas.

Mientras más compleja sea la aplicación, más cuidadoso deberá ser el plan para la migración y su ejecución.

Para nuestra simple aplicación esto es todo lo que necesitamos hacer. Pero, no siempre será tan sencillo, así que prepárate anticipadamente.

Vivimos es un mundo donde las cosas están en constante cambio. Así que si quieres mantenerte al día con todo lo que sucede, querrás también contar con una buena aplicación de noticias.

Para ayudarte a crear tecnología "cool" y mantenerte al día, en esta publicación construiremos una aplicación de noticias para Android usando React Native. Esta "traerá" los titulares desde distintos canales de noticias y los mostrará por categoría.

Así es como lucirá nuestra aplicación cuando hayamos terminado. Entonces pongámos manos a la obra.

Cómo instalar Expo

Entonces, ¿Qué es Expo? Expo es un framework (marco de trabajo) que te ayuda a crear y desplegar una aplicación React Native con rapidez y facilidad.

¡Instalemos Expo!

npm install --global expo-cli

Ejecuta este comando en tu terminal para instalar Expo CLI (Interfaz de Línea de Comandos). Aquí estamos usando el parámetro --global para asegurarnos que esté disponible desde cualquier directorio en nuestro ordenador.

Luego de haberlo instalado, necesitamos crear un proyecto Expo.

expo init News-Application

Usa el comando anterior para inicializar el proyecto. También hará algunas preguntas, como el nombre de tu aplicación, cómo; si quieres agregar Typescript a tu proyecto o iniciar en blanco. Solo selecciona "blank" (iniciar en blanco) y presiona enter.

Después descargará todos los paquetes y dependencias en el folder.

Ahora, luego de haber terminado la descarga, entra al folder. Para empezar la aplicación escribe expo start. Esto abrirá las herramientas de desarrollo en el navegador.

Aquí verás varias opciones como, correr la app en un dispositivo Android/emulador, o en un simulador iOS. Ejecutaremos al aplicación en el navegador web, así que dale click a la opción "Run in Web Browser" (correr en navegador web).

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Este es nuestro archivo App.js, que contiene la plantilla predeterminada.

Ahora nuestra aplicación se está ejecutando.

Cómo crear varias vistas usando React Navigation

Ahora vamos a crear varias pantallas para nuestra aplicación. Para eso, usaremos "React Navigation". Así que vamos a instalarla.

Dirígete a https://reactnavigation.org/  y da click a "Read Docs" (leer documentación). Este enlace te llevará a la página de la documentación.

Instalemos "React Navigation" usando el siguiente comando:

npm install @react-navigation/native

expo install react-native-screens react-native-safe-area-context

Ahora "React Navigation" ha sido instalado.

Usaremos  bottomTabNavigator. Así que, desde el menú izquierdo, selecciona "API Reference", luego "Navigators" y finalmente "Bottom Tabs".

Instalemos "Bottom Tabs" usando el siguiente comando:

npm install @react-navigation/bottom-tabs

Ahora en nuestro archivo App.js, necesitamos importar Bottom Tabs para poder utilizarlo.

Lo importas así:

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

Ahora importemos el "Tab Screens".

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
const Tab = createBottomTabNavigator();

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

De esta forma es que creamos las pestañas y botones de la navegación de la parte inferior de la pantalla, usando Bottom Tabs.

En nuestro caso, necesitamos hacer algo como esto:

<Tab.Navigator>
  <Tab.Screen name="All" component={All} />
  <Tab.Screen name="Business" component={Business} />
  <Tab.Screen name="Health" component={HealthScreen} />
  <Tab.Screen name="Sports" component={SportsScreen} />
  <Tab.Screen name="Tech" component={TechScreen} />
</Tab.Navigator>

Necesitamos crear estas pantallas para las siguientes pestañas: All news, Business News, Sports News, Health News y Tech News. También vamos a crear un componente en el proyecto para cada pantalla.

Necesitamos envolver  TabNavigtor en un NavigationContainer así:

<NavigationContainer>
  <Tab.Navigator>
    <Tab.Screen name="All" component={All} />
    <Tab.Screen name="Business" component={Business} />
    <Tab.Screen name="Health" component={HealthScreen} />
    <Tab.Screen name="Sports" component={SportsScreen} />
    <Tab.Screen name="Tech" component={TechScreen} />
  </Tab.Navigator>
</NavigationContainer>

También necesitamos importar todos estos componentes, así que los importamos en la parte superior de nuestro archivo.

import All from './screens/All';
import Business from './screens/Business';
import HealthScreen from './screens/Health';
import SportsScreen from './screens/Sports';
import TechScreen from './screens/Tech';

Ahora bien, si juntamos lo que hemos escrito, obtendremos el código siguiente:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import All from './screens/All';
import Business from './screens/Business';
import HealthScreen from './screens/Health';
import SportsScreen from './screens/Sports';
import TechScreen from './screens/Tech';
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="All" component={All} />
        <Tab.Screen name="Business" component={Business} />
        <Tab.Screen name="Health" component={HealthScreen} />
        <Tab.Screen name="Sports" component={SportsScreen} />
        <Tab.Screen name="Tech" component={TechScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
} 

Y este sería el resultado:

Tenemos aquí cinco pantallas: All (Todo), Business (Negocios), Health (Salud), Sports (Deportes) y Tech (Tecnología).

Ahora hagamos algunos ajustes. Necesitamos cambiar los íconos para las pestañas de la parte inferior.

Para hacer esto necesitaremos recurrir al uso de una librería de íconos. También utilizaremos react-native-elements.

Para instalar react-native-elements, escribe el comando de abajo:

npm install react-native-elements

Este paquete de íconos tiene muchas opciones para elegir.

Ahora agreguemos nuestros íconos en la navegación por pestañas inferior (Bottom Tab Navigator).

<Tab.Screen name="All" component={All}
          options={{
            tabBarIcon: (props) => (
              <Icon type='feather' name='home' color={props.color} />
            ),
          }} />

Aquí hemos agregado el ícono llamado "home" para la página de inicio y el tipo feather cómo valor para el atributo type.

Lo anterior resultará en la pantalla anterior. Y similarmente, repitamos el mismo proceso para todas las pestañas de la navegación.

<Tab.Navigator>
        <Tab.Screen name="All" component={All}
          options={{
            tabBarIcon: (props) => (
              <Icon type='feather' name='home' color={props.color} />
            ),
          }} />

        <Tab.Screen name="Business" component={Business}
          options={{
            tabBarIcon: (props) => (
              <Icon type='feather' name='dollar-sign' color={props.color} />
            ),
          }} />

        <Tab.Screen name="Health" component={HealthScreen}
          options={{
            tabBarIcon: (props) => (
              <Icon type='feather' name='heart' color={props.color} />
            ),
          }} />

        <Tab.Screen name="Sports" component={SportsScreen}
          options={{
            tabBarIcon: (props) => (
              <Icon type='ionicon' name="tennisball-outline" color={props.color} />
            ),
          }} />

        <Tab.Screen name="Tech" component={TechScreen}
          options={{
            tabBarIcon: (props) => (
              <Icon type='ionicon' name="hardware-chip-outline" color={props.color} />
            ),
          }} />
      </Tab.Navigator>

Ahora cada una de las diferentes pestañas o pantallas esta lista y tienen su propio ícono distintivo.

Cómo llamar al API de noticias (News API)

Enseguida vamos a llamar al News API desde https://newsapi.org/

Dirígete a este sitio web y date de alta. Ahí tendrás acceso a una clave API (API key).

Necesitaremos un archivo de configuración (config.js) para guardar todas las constantes con noticias (News), vamos a crearlo.

export const API_KEY = ``;
export const endpoint = `https://newsapi.org/v2/top-headlines`;
export const country = 'in'

Necesitamos el API_KEY, el endpoint (url) y la clave de país.

Ahora necesitamos crear un servicio para realizar nuestra Solicitud GET al endpoint del API.

Crea un archivo con el nombre de services.js.

Aquí importaremos el API_KEY, el endpoint (url) y la clave de país al inicio.

import { API_KEY, endpoint, country } from '../config/config';

Luego escribiremos el cuerpo de nuestro archivo services.js

export async function services(category = 'general') {
    let articles = await fetch(`${endpoint}?country=${country}&category=${category}`, {
        headers: {
            'X-API-KEY': API_KEY
        }
    });

    let result = await articles.json();
    articles = null;

    return result.articles;
}

Así que estamos solicitando los datos de las noticias usando nuestro "endpoint" url y concatenando el código de país además de la categoría. En la función pasamos la categoría "general" ya que es la categoría por defecto. También pasamos el API_key en la propiedad "headers".

Luego convertimos la respuesta, es decir los datos entrantes, al formato JSON y los almacenamos en la variable "result".

Y finalmente, los retornamos usando la palabra clave return.

Aquí está el contenido completo de este archivo para tu referencia:

import { API_KEY, endpoint, country } from '../config/config';

export async function services(category = 'general') {
    let articles = await fetch(`${endpoint}?country=${country}&category=${category}`, {
        headers: {
            'X-API-KEY': API_KEY
        }
    });

    let result = await articles.json();
    articles = null;

    return result.articles;
}

Ahora necesitamos importar este servicio en nuestro archivo All.js.

import { services } from '../services/services';

Necesitaremos usar los "hooks"  useState y useEffect , useEffect llamará a este servicio desde el archivo All.js y useState creará el estado que almacenará la respuesta que viene desde la API.

import React, { useEffect, useState } from 'react'
import { View } from 'react-native';
import { services } from '../services/services';
export default function All() {
    const [newsData, setNewsData] = useState([])
    useEffect(() => {
        services('general')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, [])
    return (
        <View>

        </View>
    )
}

En este archivo llamaremos a los servicios que se encuentran en nuestro useEffect "hook". Después almacenaremos la respuesta en el estado (state) de newsData que es un arreglo (array). También pasaremos un parámetro para la categoría que en este caso será "general".

En esta pantalla traeremos todas las noticias por lo que usaremos la categoría "general". La categoría cambiará para cada pantalla. Será health (salud) para la pantalla Health, sports (deportes) para la pantalla Sports y así sucesivamente.

Ahora necesitamos mostrar estos datos en nuestra interfaz. Y para ello, necesitamos incluso otro paquete llamado Native Base. Así que vayamos a instalarla.

Escribe y ejecuta los siguientes comandos para instalar "Native Base":

yarn add native-base styled-components styled-system
expo install react-native-svg react-native-safe-area-context

En el archivo All.js importaremos unas cuantas cosas de Native Base:

import React, { useEffect, useState } from 'react'
import { View, Text } from 'react-native';
import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base';
import { services } from '../services/services';

Luego devolveremos el componente NativeBaseProvider.

return (
        <NativeBaseProvider>
            
        </NativeBaseProvider>
    )

Ahora agreguemos el Scroll View. Este habilitará a los usuarios para deslizar (scroll) la página hacia abajo en caso de que las noticias ocupen mayor espacio que el disponible para la altura de la pantalla.

<NativeBaseProvider>
            <ScrollView height={850}>

            </ScrollView>
        </NativeBaseProvider>

Ahora agreguemos al componente FlatList para mostrar las noticias.

<NativeBaseProvider>
            <ScrollView height={850}>
                <FlatList
                    data={newsData}
                    renderItem={({ item }) => (
                       <View>

                       </View> 
                    )}
                    keyExtractor={(item) => item.id}
                />
            </ScrollView>
        </NativeBaseProvider>

El componente FlatList recibe una propiedad o prop "data" a la cual pasaremos nuestro estado (state) creado anteriormente newsData y devolverá un item de los renderItems.

Esto es similar a un map en JavaScript, que recorre un arreglo y retorna un elemento. También cuenta con un keyExtractor que usaremos para hacer cada elemento único.

Ahora, mostremos nuestros datos usando el componente View.

Crea otro componente View dentro del ya existente componente View, así:

<NativeBaseProvider>
            <ScrollView height={850}>
                <FlatList
                    data={newsData}
                    renderItem={({ item }) => (
                       <View>
                           <View>
                               
                           </View>
                       </View> 
                    )}
                    keyExtractor={(item) => item.id}
                />
            </ScrollView>
        </NativeBaseProvider>

Ahora vamos a agregar algo de texto dentro del componente View hijo.

<NativeBaseProvider>
            <ScrollView height={850}>
                <FlatList
                    data={newsData}
                    renderItem={({ item }) => (
                        <View>
                            <View>
                                <Text>
                                    {item.title}
                                </Text>
                                <Text>
                                    {item.publishedAt}
                                </Text>
                                <Text>
                                    {item.description}
                                </Text>
                            </View>
                        </View>
                    )}
                    keyExtractor={(item) => item.id}
                />
            </ScrollView>
        </NativeBaseProvider>

Este contiene nuestro titular de noticias, la descripción y la fecha de publicación.

Cómo estilizar nuestra app de noticias

Ya vimos la apariencia que tiene nuestra app hasta ahora, con el título de las noticias, la descripción y la fecha. Para hacerlo verse un poco mejor necesitamos darle algo de estilo.

Importa StyleSheet desde Reac Native al principio del archivo para poder usarlo para estilizar nuestra app.

import { View, Text, StyleSheet } from 'react-native';

Luego, agrega los estilos de la siguiente manera.

<View>
                            <View style={styles.newsContainer}>
                                <Text style={styles.title}>
                                    {item.title}
                                </Text>
                                <Text style={styles.date}>
                                    {item.publishedAt}
                                </Text>
                                <Text style={styles.newsDescription}>
                                    {item.description}
                                </Text>
                            </View>
                        </View>

Y al final del archivo necesitamos crear esos estilos.

const styles = StyleSheet.create({
    newsContainer: {
        padding: 10
    },
    title: {
        fontSize: 18,
        marginTop: 10,
        fontWeight: "600"
    },
    newsDescription: {
        fontSize: 16,
        marginTop: 10
    },
    date: {
        fontSize: 14
    },
});

Y así es cómo queda la aplicación luego de haber agregado algunas reglas de estilo css. También puedes deslizar la página hacia abajo.

Ahora necesitamos cambiar el formato de la fecha a uno que mejore su legibilidad, es decir que haga más fácil su lectura, ya que es díficil para una persona entender una fecha cómo '2021-08-21T11:00:40Z'.

Para este fin usaremos el útil paquete moment.js, así que instalemos moment usando el siguiente comando:

npm install moment --save

Luego lo importamos en nuestro archivo All.js para poder utilizarlo.

<Text style={styles.date}>
  {moment(item.publishedAt).format('LLL')}
</Text>

Podemos usar los siguientes formatos:

En la documentación de moment se nos brindan muchos formatos distintos de los cuáles elegir. Para este caso he elegido el formato 'LLL'.

Y ahora nuestras fechas son mucho más fáciles de leer y entender.

También necesitamos un separador para dividir unos artículos de noticias de otros en la lista y así mejorar tanto su apariencia cómo su legibilidad.

<View>
                            <View style={styles.newsContainer}>
                                <Text style={styles.title}>
                                    {item.title}
                                </Text>
                                <Text style={styles.date}>
                                    {moment(item.publishedAt).format('LLL')}
                                </Text>
                                <Text style={styles.newsDescription}>
                                    {item.description}
                                </Text>
                            </View>
                            <Divider my={2} bg="#e0e0e0" />
                        </View>

Luego de haber dividido cada View hijo nuestra aplicación se verá así:

Ahora los titulares y noticias estarán separados, lo que hace que se vean muy bien.

Esta API de noticias nos da acceso a una imágen también, así que vamos a agregarla.

<View>
                            <View style={styles.newsContainer}>
                                <Image
                                    width={550}
                                    height={250}
                                    resizeMode={"cover"}
                                    source={{
                                        uri: item.urlToImage,
                                    }}
                                    alt="Alternate Text"
                                />
                                <Text style={styles.title}>
                                    {item.title}
                                </Text>
                                <Text style={styles.date}>
                                    {moment(item.publishedAt).format('LLL')}
                                </Text>
                                <Text style={styles.newsDescription}>
                                    {item.description}
                                </Text>
                            </View>
                            <Divider my={2} bg="#e0e0e0" />
                        </View>

Ya hemos agregado la imágen usando la "key" (clave) llamada urlToImage para esta finalidad.

Ahora ya podemos ver las imágenes que corresponden a cada noticia.

Cómo agregar un Spinner para mostrar cuándo las noticias se estén cargando

Agreguemos un spinner que mostrará cuando las noticias se estén cargando.

Primero crearemos una condición. Si el tamaño del estado (state) de newsData es mayor a uno, mostraremos nuestro componente FlatList , que contiene los datos de nuestras noticias. Sino, entonces mostraremos el spinner cargando.

En otras palabras si el tamaño del estado (state) newsData es menor a uno, quiere decir que el arreglo está vació y que la llamada al API aún se esté ejecutando. Una vez que la llamada al API concluya, almacenará los datos en el estado newsData y el tamaño de este arreglo aumentará de cero a uno o mayor.

{newsData.length > 1 ? (
                    <FlatList
                        data={newsData}
                        renderItem={({ item }) => (
                            <View>
                                <View style={styles.newsContainer}>
                                    <Image
                                        width={550}
                                        height={250}
                                        resizeMode={"cover"}
                                        source={{
                                            uri: item.urlToImage,
                                        }}
                                        alt="Alternate Text"
                                    />
                                    <Text style={styles.title}>
                                        {item.title}
                                    </Text>
                                    <Text style={styles.date}>
                                        {moment(item.publishedAt).format('LLL')}
                                    </Text>
                                    <Text style={styles.newsDescription}>
                                        {item.description}
                                    </Text>
                                </View>
                                <Divider my={2} bg="#e0e0e0" />
                            </View>
                        )}
                        keyExtractor={(item) => item.id}
                    />
                ) : (
                    <View style={styles.spinner}>
                        <Spinner color="danger.400" />
                    </View>
                )}

Y en nuestros estilos agregaremos el siguiente código para el spinner.

spinner: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 400
}

Aquí abajo está el código de referencia:

import React, { useEffect, useState } from 'react'
import { View, Text, StyleSheet } from 'react-native';
import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base';
import { services } from '../services/services';
import moment from 'moment'
export default function All() {
    const [newsData, setNewsData] = useState([])
    useEffect(() => {
        services('general')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, [])
    return (
        <NativeBaseProvider>
            <ScrollView height={850}>
                {newsData.length > 1 ? (
                    <FlatList
                        data={newsData}
                        renderItem={({ item }) => (
                            <View>
                                <View style={styles.newsContainer}>
                                    <Image
                                        width={550}
                                        height={250}
                                        resizeMode={"cover"}
                                        source={{
                                            uri: item.urlToImage,
                                        }}
                                        alt="Alternate Text"
                                    />
                                    <Text style={styles.title}>
                                        {item.title}
                                    </Text>
                                    <Text style={styles.date}>
                                        {moment(item.publishedAt).format('LLL')}
                                    </Text>
                                    <Text style={styles.newsDescription}>
                                        {item.description}
                                    </Text>
                                </View>
                                <Divider my={2} bg="#e0e0e0" />
                            </View>
                        )}
                        keyExtractor={(item) => item.id}
                    />
                ) : (
                    <View style={styles.spinner}>
                        <Spinner color="danger.400" />
                    </View>
                )}
            </ScrollView>
        </NativeBaseProvider>
    )
}

const styles = StyleSheet.create({
    newsContainer: {
        padding: 10
    },
    title: {
        fontSize: 18,
        marginTop: 10,
        fontWeight: "600"
    },
    newsDescription: {
        fontSize: 16,
        marginTop: 10
    },
    date: {
        fontSize: 14
    },
    spinner: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 400
    }
});

Nuestra vista All.js está ahora completa.

Y ahora podemos usar el mismo código en todas nuestras otras vistas también. Sólo necesitamos cambiar el parámetro que estamos pasando en los servicios del useEffect Hook.

Así que para la vista "Business" (negocios) usaremos la palabra "business", para Health usaremos "health", etc.

import React, { useEffect, useState } from 'react'
import { View, Text, StyleSheet } from 'react-native';
import { NativeBaseProvider, FlatList, ScrollView, Divider, Image, Spinner } from 'native-base';
import { services } from '../services/services';
import moment from 'moment'
export default function Business() {
    const [newsData, setNewsData] = useState([])
    useEffect(() => {
        services('business')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, [])
    return (
        <NativeBaseProvider>
            <ScrollView height={850}>
                {newsData.length > 1 ? (
                    <FlatList
                        data={newsData}
                        renderItem={({ item }) => (
                            <View>
                                <View style={styles.newsContainer}>
                                    <Image
                                        width={550}
                                        height={250}
                                        resizeMode={"cover"}
                                        source={{
                                            uri: item.urlToImage,
                                        }}
                                        alt="Alternate Text"
                                    />
                                    <Text style={styles.title}>
                                        {item.title}
                                    </Text>
                                    <Text style={styles.date}>
                                        {moment(item.publishedAt).format('LLL')}
                                    </Text>
                                    <Text style={styles.newsDescription}>
                                        {item.description}
                                    </Text>
                                </View>
                                <Divider my={2} bg="#e0e0e0" />
                            </View>
                        )}
                        keyExtractor={(item) => item.id}
                    />
                ) : (
                    <View style={styles.spinner}>
                        <Spinner color="danger.400" />
                    </View>
                )}
            </ScrollView>
        </NativeBaseProvider>
    )
}

const styles = StyleSheet.create({
    newsContainer: {
        padding: 10
    },
    title: {
        fontSize: 18,
        marginTop: 10,
        fontWeight: "600"
    },
    newsDescription: {
        fontSize: 16,
        marginTop: 10
    },
    date: {
        fontSize: 14
    },
    spinner: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: 400
    }
});

Recorrete hacia abajo en la vista Business y verás noticias relacionadas a esta categoría.

Y podrás hacer lo mismo para todas las pantallas:

useEffect(() => {
        services('business')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
}, [])

useEffect(() => {
        services('health')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, [])

useEffect(() => {
        services('sports')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, [])

useEffect(() => {
        services('technology')
            .then(data => {
                setNewsData(data)
            })
            .catch(error => {
                alert(error)
            })
    }, [])

Conclusión

Felicidades!

Ahora nuetra aplicación de noticias está completa.

Así que adelante! Crea y experiumenta con esta aplicación. Hay muchas cosas que puedes hacer.

Se bienvenido a descargar el código fuente en: https://github.com/nishant-666/React-Native-News

Feliz Aprendizaje.

Entremos en detalle acerca de la implementación de la funcionalidad de arrastrar y soltar en React desde cero.

Veamos primero el resultado de lo que vamos a construir. Te lo muestro por medio de un .gif; espero que este se visualice correctamente, para ello he utilizado Camtasia con una licencia de uso personal.

Los puntos clave para aprender son:

1. Haz que el elemento arrastrable añadiendo el atributo "draggable"
2. Haz que un área sea desplegable implementando el evento “dragover”
3. Captura los datos arrastrados al implementar  el evento “dragstart”.
4. Captura la caída implementando el evento "drop".
5. Implementar el evento "drag" que se dispara al arrastrar el elemento.
6. Almacenar los datos intermedios en el objeto dataTransfer (transferenciaDeDatos)

Para los que aprenden visualmente, pueden ver el vídeo a continuación.

Paso 1 – crear la aplicación raíz para el demo

Todo el código para arrastrar y soltar irá en el componente AppDragDropDemo.js.

import React from 'react';
import ReactDOM from 'react-dom';import '.index.css';
import AppDragDropDemo from './AppDragDropDemo';

ReactDOM.render(
	<AppDragDropDemo />,     
    document.getElementById("root")
);

El punto de entrada para la aplicación AppDragDropDemo se verá como en el código de abajo.

import React, { Component } from 'react';

export default class AppDragDropDemo extends Component {  
    render () {    
    	return (
            <div className="container-drag">        
            	DRAG & DROP DEMO      
            </div>);  
     }
 }

Si corres la aplicación, se te mostrará esta increíble pantalla (broma intencional):

Paso 2 – crear el objeto estado (state) para almacenar algunas tareas.

Vamos a crear algunas tareas para simular una simple aplicación. Lo que queremos hacer es "arrastrar y soltar" estas tareas en diferentes categorías como wip, complete, y demás.

export default class AppDragDropDemo extends Component {      
	state = {            
    	tasks: [
        	{
            	name:"Learn Angular",             
        		category:"wip",              
        		bgcolor: "yellow"
     		},
     		{
            	name:"React",              
     			category:"wip",              
                bgcolor:"pink"
             },                        
             {
             	name:"Vue",              
                category:"complete",              
                bgcolor:"skyblue"
              }                
         ]
    }

  render () {    
  	return (      
    	<div className="container-drag">        
        	DRAG & DROP DEMO      
        </div>);  
    }
 }

Paso 3 — Organizar nuestros datos en categorías.

Vamos a implementar el siguiente código en el método render, para agrupar las tareas en sus respectivas categorías wip y complete. Siéntete libre de añadir más categorías y jugar con el código.

También puedes copiar y pegar este código desde el fragmento de abajo.

render() {          
	var tasks = { 
    	wip: [], 
        complete: []
    }
    
    this.state.tasks.forEach ((t) => {     
    	tasks[t.category].push(
        	<div    key={t.name}                           
            		onDragStart={(e)=>this.onDragStart(e, t.name)}                          		 draggable                          
                    className="draggable"                          
                    style={{backgroundColor: t.bgcolor}}>
                     
                     {t.name}                    
             </div>);          
     });
}

En el código de arriba, estamos recorriendo las tareas, creando un div para cada una y guardándolo en las respectivas categorías.

Así que  wip[] contiene todas las tareas de la categoría  wip y complete[] contiene todas las tareas completadas.

Paso 4 — Haz que el elemento de "tarea" se pueda arrastrar.

Agrega el atributo "draggable" al <div> o a cualquier elemento que desees hacer arrastrable. Usa el bloque de código anterior o el de abajo como referencia para el formato del texto.

Paso 5 — crear un contenedor desplegable

Para crear un contenedor desplegable, o "droppable" implementa el evento dragover. Ahora, como queremos deshabilitar el comportamiento por defecto del evento dragover, debemos simplemente llamar event.preventDefault() desde el objeto event que recibimos del evento dragover.

También renderizaremos {tasks.wip} y {tasks.complete} en sus elementos div correspondientes.

return (
	<div className="container-drag">     
    	<h2 className="header">DRAG & DROP DEMO</h2>                       
        <div className="wip"        
        	 onDragOver={(e)=>this.onDragOver(e)} 
             onDrop={(e)=>{this.onDrop(e, "wip")}}> 
             	<span className="task-header">WIP</span>    
                	{tasks.wip}                     
         </div>                     
         <div className="droppable"      
         	  onDragOver={(e)=>this.onDragOver(e)}  
              onDrop={(e)=>this.onDrop(e, "complete")}>
              	<span className="task-header">COMPLETED</span>  
                	{tasks.complete}                     
         </div>               
    </div>
);

Implementemos ahora para el evento onDragOver() su correspondiente función o event handler.

El resultado hasta ahora se verá como en la captura de pantalla que se muestra abajo.

Paso 6 — captura el estado del elemento arrastrado.

Vamos a modificar el código dónde creamos la categoría para cada tarea. Agregaremos una función para responder al evento (event handler) ondragstart y pasa el identificador, nombre (id/name) o cualquier información que necesites guardar mientras sucede el arrastrado/soltado.

Estoy usando name (nombre) cómo valor único para identificar una tarea. Siéntate libre de usar ID o cualquier clave única que gustes.

Ahora implementemos la función para responder al evento  onDragStart.

En el manejador onDragStart, tomamos el parámetro y lo almacenamos dentro del objeto dataTransfer. (*Nota: no te confundas con el nombre del parámetro).

*Nota para IE (Internet Explorer): este código podría no funcionar en IE, ya que la mejor práctica es darle formato como te muestro a continuación:

En lugar de:

ev.dataTransfer.setData("id", id)

USAR:

ev.dataTransfer.setData(“text/plain”,id)

En manejador anterior asegurará de que el elemento que se arrastra sea almacenado en el objeto "event" y está disponible para su uso cuando sea requerido. Este podría requerirse mientras soltamos en el contendor que será el objetivo.

Ahora si corres la aplicación y arrastras los elementos, podrás ver los siguientes logs en consola.

Paso 7 — Manejar el evento drop (soltar).

Vamos al método render y añadamos el evento onDrop al div con el atributo className con valor droppable.

En el código de arriba, agregamos la función para responder al evento drop y pasar la categoría requerida ( complete ) como argumento. Esto indica que estamos soltando el elemento desde el estado wip hacia el estado complete que representa una categoría. Siéntete bienvenido a cambiar los nombres cómo veas conveniente.

Ahora implementemos la función o handler para responder al evento onDrop.

Acá puedes copiar para luego pegar el código.

onDrop = (ev, cat) => {         
	let id = ev.dataTransfer.getData("id");  
    let tasks = this.state.tasks.filter((task) => {      
    	if (task.name == id) {               
            task.category = cat;                 }                     
            return task;          
     });           
     this.setState({                 
     	...this.state,                 
        tasks          
     });    
}

En el handler para el evento onDrop , tomamos la tarea que se está arrastrando mediante el uso del método getData en el objeto dataTransfer del evento.

Luego creamos el arreglo con las nuevas tareas mediante el uso del método filter y cambiamos la categoría de la tarea que se está arrastrando.

setState() desatará el renderizado y las tareas serán desplegadas en las áreas correctas.

*Note de IE: para lograr que esto funcione en IE usa el método getData de abajo.

En lugar de

var id = ev.dataTransfer.getData(“id”)

usar

var id = ev.dataTransfer.getData(“text”)

Paso 8 — para implementar el soltado desde "complete" hasta "wip" agrega el handler para el evento onDrop

El handler o función de respuesta para el evento onDrop() permanece igual que antes.

Finalmente corre el código y maravíllate de tu creación :) además claro diviértete programando.

Puedes tomar el código fuente de aquí.

Nota: para que este código funcione en los navegadores principales, cambia el tipo de datos de setData a string. Por ejemplo, para cambiar los datos usa ev.dataTransfer.setData(“text/plain”,id). Para leer datos usa var id = ev.dataTransfer.getData(“text”).

Ya que mi objetivo era demostrar la funcionalidad esencial de la característica de "arrastrar y soltar" el código no ha sido optimizado para contemplar factores cómo el diseño y las convenciones de nombres.

Un frontend con React conectado a un backend usando Node es una combinación sólida para cualquier aplicación que quieras construir.

Esta guía está diseñada para ayudarte a crear proyectos full-stack con React de forma tan fácil como sea posible.

Veamos como configurar un proyecto completo usando React y Node desde cero y desplegarlo en la web.

Herramientas que necesitarás

1. Asegúrate de tener Node y NPM instalados en tu computadora. Puedes descargar ambos en nodejs.org (NPM viene incluido con la instalación de Node).
2. Utiliza el editor de código de tu preferencia. Yo estoy usando VSCode y personalmente recomiendo usarlo. Puedes descargar VSCode de code.visualstudio.com.
3. Asegúrate de tener Git instalado en tu computadora. Esto es necesario para desplegar nuestra aplicación con Heroku. Puedes descargarlo de git-scm.com
4. Una cuenta en heroku.com. Usaremos Heroku para publicar nuestra aplicación a la web completamente gratis.

Paso 1: Crea tu backend Node (Express)

Primero crea una carpeta en tu proyecto con el nombre react-node-app (por ejemplo).

Luego arrástralo al editor de código.

Para crear nuestro proyecto Node, ejecuta el siguiente comando en tu terminal o línea de comandos:

npm init -y

Esto creará el archivo package.json que permitirá dar seguimiento a todos los scripts de nuestra app y manejar cualquiera de las dependencias que necesite nuestra app.

El código de nuestro servidor vivirá en una carpeta con el nombre server. Vayamos a crearlo.

Ahí dentro pondremos un solo archivo, desde el cual correremos nuestro servidor: index.js.

Usaremos Express para crear un servidor web simple para que corra en el puerto 3001 por defecto, es decir, al no darle un valor distinto a la variable de entorno, PORT Heroku le dará este valor (3001) cuando despleguemos nuestra aplicación.

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Luego en nuestra terminal instalaremos Express como una dependencia para utilizar en nuestro proyecto:

npm i express

Luego de esto, crearemos un script en el archivo package.json que iniciará la ejecución de nuestro servidor web con el comando npm start:

// server/package.json

...
"scripts": {
  "start": "node index.js"
},
...

Finalmente, podemos correr nuestra aplicación usando este script con el comando npm start en nuestra terminal y deberíamos verlo ejecutándose en el puerto 3001:

npm start

> node index.js

Server listening on 3001 (servidor escuchando en el puerto 3001)

Paso 2: Crear el API Endpoint

Queremos usar nuestro servidor Node/Express como una API (Interfaz de Programación de Aplicaciones), para que pueda darle datos a nuestra app React, así como también la capacidad de editar los datos o realizar alguna operación que solo el servidor puede hacer.

En nuestro caso, podemos simplemente enviar un mensaje a nuestro app React que diga "Hola desde el servidor!", en un objeto JSON.

El código de abajo crea un endpoint para la ruta /api.

Si nuestra app realiza una petición GET a esa ruta, respondemos (usando res, que significa respuesta) con nuestros datos JSON:

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hola desde el servidor!" });
});

app.listen(PORT, () => {
  console.log(`Servidor escuchando en el puerto: ${PORT}`);
});

Nota: Asegúrate de posicionar esto previo a la función app.listen.

Ya que hemos realizado cambios a nuestro código Node, necesitaremos reiniciar nuestro servidor.

Para este fin, termina el "start script" presionando Command/Ctrl + C. Luego lo reiniciaremos usando npm start, nuevamente, desde el terminal.

Y para probar esto podemos simplemente visitar http://localhost:3001/api en nuestro navegador web y ver en la pantalla el mensaje:

Paso 3: Crear el cliente React

Luego de haber creado el backend (servidor), vayamos al frontend (cliente).

Abre otra pestaña en la terminal y utiliza el comando create-react-app para crear un nuevo proyecto React con el nombre client:

npx create-react-app client

Luego de esto tendremos una aplicación React con todas sus dependencias instaladas.

El único cambio que tenemos que hacer es agregar una propiedad llamada proxy a nuestro archivo package.json.

Esto nos permitirá realizar peticiones a nuestro servidor Node sin tener que proporcionar el origen en el que se encuentra corriendo (http://localhost:3001) cada vez que le hagamos una petición de red:

// client/package.json

...
"proxy": "http://localhost:3001",
...

Luego podemos iniciar nuestra app React al ejecutar el script "start", que es el mismo para nuestro servidor Node. Primero asegúrate de entrar en la carpeta /client recién creada usando cd client en el terminal - luego ya podrás ejecutar el comando npm start correctamente.

Luego de esto la app iniciará en localhost:3000:

cd client
npm start

Compiled successfully! 

You can now view client in the browser.

Local:            http://localhost:3000

Paso 4: Realiza peticiones HTTP desde React a Node

Ahora que tenemos una aplicación React en funcionamiento, queremos usarla para interactuar con nuestra API.

Veamos como podemos traer datos desde el endpoint /api que hemos creado anteriormente.

Para hacer esto podemos dirigirnos al componente App.js dentro de nuestra carpeta src y hacer una petición HTTP utilizando useEffect.

Haremos una petición GET simple a nuestro backend usando el Fetch API y luego tendremos nuestros datos de regreso en formato JSON.

Una vez que tengamos los datos, obtendremos la propiedad con el nombre "message" (para poder tomar el saludo que hemos enviado desde el servidor) y entonces ponerlo en una variable de "estado" ( state ) llamada data.

Esto nos permitirá mostrar ese mensaje en nuestra página (asumiendo que sí lo tenemos). Estamos usando un condicional en nuestro JSX para decir que si nuestros datos no están disponibles se muestre el texto "Loading...".

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

Paso 5: Despliega tu aplicación a la web con Heroku

Finalmente, desplegaremos nuestra aplicación a la web.

Primero, dentro de la carpeta /client de nuestro proyecto, asegúrate de remover el repositorio Git que se inicializa automáticamente al usar el comando create-react-app.

Esto es esencial para desplegar nuestra aplicación, ya que vamos a configurar un repositorio Git en el directorio principal de nuestro proyecto ( react-node-app), es decir, no en /client:

cd client
rm -rf .git

Cuando desplegamos nuestro backend Node (servidor) y nuestro frontend React (cliente) van a ser servidos desde el mismo dominio (i.e. mycoolapp.herokuapp.com).

Cómo nuestras peticiones son manejadas por nuestra API Node, necesitamos escribir algo de código que mostrará nuestro app React cuando sea visitado por nuestros usuarios (por ejemplo, cuando visiten la página de inicio).

Podemos implementar esto en server/index.js agregando el siguiente código:

// server/index.js
const path = require('path');
const express = require('express');

...

// Hacer que node sirva los archivos de nuestro app React
app.use(express.static(path.resolve(__dirname, '../client/build')));

// Manejar las peticiones GET en la ruta /api
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// Todas las peticiones GET que no hayamos manejado en las líneas anteriores retornaran nuestro app React
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

Lo que este código hará primero es darle acceso a Node a nuestro proyecto React compilado usando la función express.static para archivos estáticos.

Y si una petición GET llega que no esté contemplada para su manejo en nuestra ruta /api, nuestro servidor responderá con nuestro app React.

Este código permite que nuestra app React y Node sea desplegada en el mismo dominio.

Entonces podremos indicar a nuestro app (Node) como hacerlo, agregando un script build a nuestro archivo package.json con el propósito de que compile nuestra app para producción:

// server/package.json

...
"scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
...

También recomendaría agregar un campo llamado "engines" (motores), dónde querrás especificar la versión de Node que estás usando para compilar tu proyecto. Esto será utilizado para el despliegue.

Puedes conocer la versión que estás usando de Node al ejecutar el comando node -v y puedes escribir el resultado en la propiedad "engines" (ejemplo v. 14.14.4):

// server/package.json

"engines": {
  "node": "tu-número-de-versión-node"
}

Luego de esto estaremos listos para desplegar usando Heroku, así que asegúrate de tener una cuenta en Heroku.com.

Una vez que hayas iniciado sesión en Heroku y te encuentres viendo tu panel de control, seleccionarás: "New > Create New App" y proporcionarás un nombre único para tu app.

Luego de esto, querrás instalar el Heroku CLI (Interfaz de línea de comandos) para que puedas desplegar tu aplicación cuando sea que realices cambios usando Git. Podemos instalar el CLI ejecutando el siguiente comando:

sudo npm i -g heroku

Una vez instalado, podrás iniciar sesión en Heroku con el CLI usando el comando heroku login:

heroku login

Press any key to login to Heroku (Presiona cualquier tecla para iniciar sesión en Heroku.

Ya que has iniciado sesión en Heroku desde el CLI necesitas seguir las instrucciones de despliegue para nuestra recién creada aplicación desde la pestaña "Deploy".

Los siguientes comandos inicializarán un nuevo repositorio Git para nuestro proyecto, agregarán tus archivos ahí, realizarán un commit y agregarán un Git remote para Heroku.

git init
heroku git:remote -a inserta-el-nombre-de-tu-app-aqui
git add .
git commit -am "Desplegar app en Heroku"

Luego el último paso es publicar nuestra aplicación subiéndola ( git push )al remoto Git de Heroku que justo hemos agregado usando:

git push heroku master

¡Felicitaciones! Nuestra aplicación full-stack Node-React ya está en línea! ?

Cuando quieras realizar cambios a tu aplicación en futuras ocasiones (y desplegarlas/publicarlas), solo tienes que usar Git para agregar tus archivos, realizar un commit y subirlos al repositorio remoto Heroku:

git add .
git commit -m "my commit message"
git push heroku master

En este tutorial vamos a crear una página de inicio sencilla para una plataforma educativa llamada Skillz.

Aquí aprenderás como usar e implementar CSS Flexbox y CSS Grid para alinear contenido.  También cubriremos muchos otros conceptos de CSS y finalmente aprenderemos a hacer la página responsiva para que trabaje en todos los tamaños de pantallas.

Este tutorial se divide en cinco partes:

• Como construir la barra de navegación.
• Como crear la sección showcase (escaparate)
• Como construir la sección de la parte inferior
• Como crear la sección del pié de página
• Cómo hacer la página responsiva

Cada una de estas secciones te enseñará algún concepto CSS nuevo, así como herramientas y habilidades de desarrollo CSS. Comencemos!

Como crear el HTML inicial (Boilerplate)

Si tienes "emmet" instalado en tu IDE (entorno de desarrollo o editor de texto), puedes generar el "boilerplate" HTML (inicial) para tu proyecto al escribir  ! y pulsando  enter o tab en tu teclado.

Sino puedes copiar este "boilerplate" y pegarlo en tu editor de código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
 
</body>
</html>

Cómo usar los íconos Font Awesome

Cómo puedes ver en una de las capturas de pantalla, usaremos algunos íconos fuente para darle una mejor apariencia a nuestra sección de servicios.

Para esto, usaremos "font awesome" desde una CDN (Content Delivery Network - red de distribución de contenido). Si creaste el "boilerplate" HTML copia la siguiente etiqueta  link y pégala dentro de la etiqueta head :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

Empecemos!

En primer lugar asegurate que tu archivo de estilos (.css) esté apropiadamente vinculado con tu página HTML.

Como construir la barra de navegación

La barra de navegación incluirá el nombre de nuestro sitio web además de dos enlaces de navegación:  Log in (iniciar sesión) y check courses (revisar cursos).

Esté es el "markup" (código HTML) para nuestra barra de navegación:

<div class="navbar">
        <div class="container flex">
          <h1 class="logo">Skilllz</h1>
            <nav>
              <ul>
                <li class="nav"><a class="outline" href="">Log in</a></li>
                <li class="nav"><a href="" class="outline">Check courses</a 				</li>
              </ul>
            </nav>
        </div>
      </div>

En el div que envuelve los elementos en esta sección (la barra de navegación), registramos el contenedor y la clase (css) flex.

• .container: usaremos esta clase utilitaria en cada sección para asegurarnos que los elementos internos no excedan cierto ancho, el cual especificaremos en CSS
• .flex: usaremos esta clase utilitaria para mostrar los elementos hijos alineados horizontalmente (lado-a-lado) usando CSS Flexbox.

Dentro del div tenemos un h1con la clase logo y dos enlaces de navegación li>a con la clase outline respectivamente.

En este punto, nuestra página lucirá plana y simple, justo así:

Cómo aplicar estilo CSS a nuestra página

Ahora tenemos que aplicar algunas reglas CSS para estilizar nuestra sección de navegación de la manera que mejor nos parezca. Lo que queremos hacer primero es establecer los estilos básicos para nuestra página web con el código siguiente:

/* Sobrescribe el estilo por defecto y establece el padding y el margen a cero */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

/* Texto color blanco en todas partes */

body {
  font-family: "lato", sans-serif;
  color: white;
}

/* Hacer todo el texto de los links negro y sin decoración*/
a {
  color: black;
  text-decoration: none;
}


h1 {
  font-size: 30px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.2;
}


h2 {
  font-size: 25px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

p {
  font-size: 30px;
}

/* Todas las imágenes deben ser del mismo tamañño que su contenedor*/
img {
  width: 100%;
}

/* Remover el estilo a los elementos de una lista */
li {
  list-style-type: none;
}



p {
  font-size: 20px;
  margin: 10px 0;
}

Con estos estilos por defecto aplicados nuestra página se verá así:

A continuación necesitamos definir el estilo para nuestra clase css "container":

/* Centra el elemento y establece un ancho máximo y se asegura que los elementos puedan fluir através*/

.container {
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}

Ahora, nuestro contenido no excederá el ancho máximo especificado.

Luego de esto, necesitamos definir el color purpura para el fondo de nuestra sección "navbar":

/* Aplica el color de fondo, altura y "padding"*/

.navbar {
  background-color: purple;
  height: 70px;
  padding: 0 30px;
}

Enseguida seleccionamos sólo el elemento h1 dentro del navbar y definimos los siguientes estilos:

/* Establece el tamaño de la fuente (font size), reduce el peso de loa fuente (font-weight), agrega margen y alto de línea (line height) */

.navbar h1 {
  font-size: 30px;
  font-weight: 300;
  margin: 10px 0;
  line-height: 1.2;
}

Aplicando este estilo, nuestro encabezado h1  se verá así:

Ahora necesitamos mostrar ambos elementos hijos dentro del contenedor h1 y nav una al lado del otro usando Flexbox.

.navbar .flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

Primero, damos el valor flex para "display-mode". Esto alineara los elementos uno al lado del otro por de forma automática (por default).  

Entonces justificamos el contenido, agregando espacio considerable entre cada elemento usando el valor de space-between. Alineamos los elementos para que aparezcan al centro del contenedor y darle una altura que cubra el alto completo del elemento que lo contiene.

Así es como nuestra página se debe ver:

Sin embargo, tampoco queremos que ambos enlaces de navegación estén apilados uno sobre otro. En vez de eso, querem0s que aparezcan lado a lado. Adivinas como haríamos eso? Con Flexbox!

.navbar ul {
  display: flex;
}

/* Cambia el color de ambos enlaces a blanco, agrega padding entre si y margen también */

.navbar a {
  color: white;
  padding: 9px;
  margin: 0 10px;
}

Nuestra página ahora se ve así:

Si haz visto el breve video introductorio, notarás que cuando sea que yo paso el ratón sobre los enlaces el color del texto cambia a una sombra púrpura y un borde sólido se muestra debajo.

Podemos implementar esta transición usando el pseudo-elemento CSS :hover :

.navbar a:hover {
  color: #9867C5;
  border-bottom: 3px solid #9867C5;
}

Ahora mira esto:

Y con eso hemos llegado al fin de la sección navbar (barra de navegación).

Como crear el área de presentación

El area de presentación es donde se va a ubicar el texto del encabezado, el texto de soporte, un formulario para dar de alta a nuevos usuario y también la imagen de encabezado.

Esta sección va a estar dividida en dos: la del lado izquierdo y el derecho. Dicho de otra forma, será mostrado como una retícula de dos unidades.

Aquí está el código HTML (markup) para esta sección:

<section class="showcase">
        <div class="container">
            <div class="grid">
              <div class="grid-item-1">
                <div class="showcase-text">
                  <h1>Aprende cualquier habilidad digital que elijas, hoy!</h1>
                  <p class="supporting-text"> Más de 30,000 estudiantes están aprendiendo esto.</p>
                </div>
                <div class="showcase-form">
                  <form action="">
                    <input type="email" placeholder="Ingresa tu correo electrónico">
                    <input type="submit" class="btn" value="Empieza a aprender">
                  </form>
                  <p class="little-info">Prueba nuestros cursos gratuitos</p>
                </div>
              </div>

              <div class="grid-item-2">
                <div class="image">
                  <img src="./images/transparent.png" alt="">
                </div>
              </div>
           </div>

        </div>
      </section>

En este punto nuestra app se verá todavía un poco desaliñada:

Como aplicar estilos CSS a nuestro área de presentación

Primero, definimos la altura de la sección de área de presentacion así como también el color de fondo:

.showcase {
  height: 300px;
  background-color: purple;
}

Nuestra aplicación ahora se ve así:

NOTA: cambié el color del h1 a blanco.

Enseguida, aplicamos los siguientes estilos:

/* Añade margen bajo el texto */
.showcase p {
  margin-bottom: 30px;
}

/* Añade una sombra bajo la imágen */
.showcase img {
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.2);
}

/* Añade algo de padding al contenido del formulario */
.showcase-form {
  padding-left: 7px;
}

Esto nos trae al tema principal. Si recuerdas, dije que crearíamos dos secciones (retículas) dentro del contenedor del área de presentación. Con la clase "grid" (retícula) aplicada al contenedor vamos a alinear el contenido utilizando CSS grid display de la siguiente manera:

.grid {
  overflow: visible;
  display: grid;
  grid-template-columns: 60% 40%;
}

Esto creará dos columnas dentro del contenedor para el área de presentación. La primera parte tomará hasta 60% del contenedor y la segunda parte tomará el 40% restante.

El overflow: visible asegurará que la imagen fluya hacia afuera del contenedor (en caso de ser de mayor tamaño).

Nuestra app se verá así.

Enseguida necesitaremos definir algo de espacio entre el área de navegación (navigation) y el área de presentación.

.grid-item-1,
.grid-item-2 {
  position: relative;
  top: 50px;
}

Como consecuencia ahora tiene un poco mas de espaciado:

Ahora necesitamos estilizar ambos elementos "input" de nuestro formulario porque aún no tienen una buena apariencia. Seleccionamos el primer <input /> por su tipo (email) y el segundo usando la clase CSS btn.

.showcase input[type='email'] {
  padding: 10px 70px 10px 0;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  padding-left: 6px;
}

.btn {
  border-radius: 6px;
  padding: 12px 20px;
  background: #9867C5;
  border: none;
  margin-left: 10px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}

Estos estilos CSS transformarán ambos "inputs" del formulario en esto:

También debemos cambiar la fuente del texto:

.showcase-form {
  margin: auto;
}

/* Change typeface and its size */
.little-info {
  font-size: 15px;
  font-family: "poppins", sans-serif;

}

Así se verá finalmente la sección de área de presentación:

Es todo en esta sección!

Cómo hacer la parte inferior de la página.

La parte inferior de la página contendrá dos secciones, la sección de estadísticas y la sección de testimoniales.

El elemento contenedor para la sección de estadísticas que mostrará los servicios ofrecidos por Skillz estará conformado por tres div, cada uno de los cuales tendrá dentro de sí un ícono Font Awesome, un elemento h3 con clase title, y un párrafo p con clase text.

El elemento contenedor para los testimonios llevará tres testimonios de personas que aprendieron usando Skillz. Tomé las fotos de unsplash.

Cómo crear la sección de estadísticas

Primero, vamos a trabajar en la sección de estadísticas. El texto es uno ficticio de 'lorem50' (50 palabras de "lorem ipsum") para ser utilizado como relleno para este demo.

Aquí puedes ver el "markup" HTML:

<div class="lower-container container">
      <section class="stats">
        <div class="flex">
          <div class="stat">
            <i class="fa fa-folder-open fa-2x" aria-hidden="true"></i>
            <h3 class="title">Over 300 available courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>
            <h3 class="title">Free certificate offered on all courses</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="stat">
            <i class="fa fa-credit-card-alt fa-2x" aria-hidden="true"></i>
            <h3 class="title">Book 1on1 session for as low as $5</h3>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
        </div>
      </section>

Esta sección será mostrada como una página en blanco. Esto debido a que hemos definido el color blanco como el color para todo el texto del elemento "body" de nuestro documento. Así que tendremos que estilizarlo al color apropiado.

Cómo aplicar estilos CSS a la sección de estadísticas.

Primero necesitamos aplicar los siguientes estilos:

/* Centra el conetenedor, aplica un ancho máximo*/
.lower-container {
  margin: 120px auto;
  padding: 0;
  max-width: 1400px;
}


/* Apunta a todos los elementos h3 con clase CSS title */
.title {
  color: black;
  font-size: 20px;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
}

/* Apunta a todos los parrafos con la clase CSS text */
.text {
  color: black;
  font-size: 19px;
  width: 100%;
  padding: 10px;
  margin: 0, 20px;
  text-align: justify;
}

Ahora esto hará que nuestro texto sea visible:

Notarás que los íconos-fuente de Font Awesome no son visibles. Trabajaremos en eso muy pronto.

Pero antes de eso, necesitaremos hacer algo importante. Sí tenemos la intención de que los 3 div  de la sección de estadísticas estén alineados de forma horizontal (lado a lado). Para lograr eso, usaremos una vez más CSS Flexbox:

/* Mostrar horizontalmente, poner un poco de espacio alrededor */
.flex {
  display: flex;
  justify-content: space-around;
}

/* Agregar algo de padding alrededor del contenedor. Alinear el texto al centro */
.stats {
  padding: 45px 50px;
  text-align: center;
}

/* Aplicar margen y ancho */
.stat {
  margin: 0 30px;
  text-align: center;
  width: 800px;
}

Así es como se verá nuestra app ahora:

Aún sin íconos? Hora de arreglarlo!

.stats .fa {
  color: purple;
}

y voilà!

Como crear la sección de testimonios

La segunda sección dentro del contenedor div de la parte inferior de la página es la sección de testimonios. Esta sección estará compuesta de tres tarjetas, cada una de las cuales contiene la imagen de la persona (recortada dentro de un círculo), su nombre y su testimonio personal.

Aquí esta el HTML para eso:

<section class="testimonials">
      <div class="container">
        <div class="testimonial grid-3">
          <div class="card">
            <div class="circle">
              <img src="./images/4.jpg" alt="">
            </div>
            <h3>Aston</h3>
            <p>He aprendido desarrollo web usando esta plataforma y diré que es la mejor plataforma para aprender. Definitivamente vale la pena la inversión!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/5.jpg" alt="">
            </div>
            <h3>Beth</h3>
            <p>He aprendido redacción usando esta plataforma y diré que es la mejor plataforma para aprender. Definitivamente vale la pena la inversión!</p>
          </div>
          <div class="card">
            <div class="circle">
              <img src="./images/6.jpg" alt="">
            </div>
            <h3>Chris</h3>
            <p>He aprendido marketing de afiliados usando esta plataforma y diré que es la mejor plataforma para aprender. Definitivamente vale la pena la inversión!</p>
          </div>
        </div>
      </div>
    </section>

Cómo aplicarle estilos CSS

Primero establecemos el color del texto a negro para que sea visible:

.testimonial {
  color: black;
  padding: 40px;
}

Cuando lo aplicamos, debe hacer que el texto sea visible y agregar algo de padding a la sección:

Enseguida, damos a la imagen la altura suficiente para ocupar todo el alto de su contenedor padre:

/* Envuelve la imagen dentro de una figura circular y define su altura para que tome todo el alto de su elemento padre */

.testimonial img {
    height: 100%;
    clip-path: circle();
}

/* Alinea el texto al centro */

.testimonial h3{
  text-align: center;
}

Si checas el diseño final en el gif, notarás que las tres tarjetas testimoniales estarán alineadas lado a lado en la misma fila.

Así que necesitaremos crear un div de tres columnas equidistantes usando un arreglo CSS grid.

/* Crear un grid de tres columnas equidistantes. Definir un espaciado de 40px entre ellas */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}


/* Crear una tarjeta en blanco con sombreado alrededor */
.card {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -7px -7px 20px rgba(0, 0, 0, 0.2),
               7px  7px 20px rgba(0, 0, 0, 0.2)
}

Con todos estos estilos aplicados, la sección de testimoniales ahora se debe ver así:

Finalmente, daremos estilo al div circular y lo colocaremos relativo al borde superior de la tarjeta usando CSS:

.circle {
    background-color: transparent;
    border:3px solid purple;
    height:90px;
    position: relative;
    top: -30px;
    left: 120px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:90px;
}

Y aquí verás como todo esto se verá en el navegador:

Muy bien, ahora estamos listos para movernos a la sección del "footer" (pie de página). Luego aprenderemos como hacer que el sitio sea responsivo.

Cómo elaborar la sección del pié de página

La parte final del proceso de creación de nuestra página es crear la sección del "footer". El pié de página comprenderá el texto de "copyright", tres enlaces de navegación adicionales y un grupo de íconos de medios sociales de Font Awesome.

Este el el HTML para la sección del pié de página de nuestra página de inicio:

<footer>
   <div class="container grid-3">
     <div class="copyright">
       <h1>Skilllz</h1>
       <p>Copyright &copy; 2021</p>
     </div>
     <nav class="links">
       <ul>
         <li><a href="" class="outline">Home</a></li>
         <li><a href="" class="outline">Tutors</a></li>
         <li><a href="" class="outline">Categories</a></li>
       </ul>
     </nav>
     <div class="profiles">
       <a href=""><em class="fab fa-twitter fa-2x"></em></a>
       <a href=""><em class="fab fa-instagram fa-2x"></em></a>
       <a href=""><em class="fab fa-facebook fa-2x"></em></a>
       <a href=""><em class="fab fa-whatsapp fa-2x"></em></a>
     </div>
   </div>
 </footer>

El pié de página se verá nada atractivo sin estilos CSS:

Arreglemos eso.

Como estilizar el pié de página (footer)

Primero necesitamos asignar el color blanco para el fondo de la sección del "footer" (así como también para todos los links), de la siguiente forma:

/* Add padding around the footer as well */

footer {
  background-color: purple;
  padding: 20px 10px;
}

/* Sets all link texts to white and puts margin to the left and right */

footer a {
  color: white;
  margin: 0 10px;
}

Ahora el pié de página (footer) se verá así:

Si revisas el primer gif, notarás que cuándo le paso el ratón por encima a cualquiera de los enlaces del "footer", su color cambia a una tonalidad más clara de púrpura y el borde se muestra debajo.

Podemos lograr esto usando un selector :hover :

footer a:hover {
  color: #9867C5;
  border-bottom: 2px solid #9867C5;
}

Esto es todo para el "footer"!

Cómo definir "Media Queries" para hacer la página responsiva.

Ahora es momento de hacer más responsiva nuestra "landing page". Cuándo se crea un sitio web es importante tener en mente que los usuarios verán el sitio desde distintos dispositivos. Por lo que es imperativo hacer responsivo el sitio para mejorar la experiencia de usuario en los múltiples formatos y tamaños de pantalla.

En nuestro CSS definiremos los "media queries" para establecer los breakpoints para los distintos anchos de pantalla y los diferentes dispositivos y relacionarlo con un grupo de reglas CSS para cada tamaño de pantalla.

Cómo diseñar para tablets y pantallas más pequeñas

Primero, optimizaremos la distribución de nuestro sitio para usuarios que lo visualicen desde una tablet. En nuestro CSS definiremos la siguiente regla:

/* Tablets y pantallas más pequeñas */

@media(max-width: 768px) {
  .grid,
  .grid-3 {
    grid-template-columns: 1fr;
  }

Inicialmente hemos definido dos columnas para la clase .grid y 3 columnas para la clase .grid-3. Ahora, queremos asegurarnos que todos los elementos del grid abarquen una sola linea.

Cómo resultado, nuestro formulario e imagen que antes se mostraban lado-a-lado (horizontalmente) ahora se mostrará uno luego del otro (verticalmente), Así:

Enseguida, aplicaremos los siguientes reglas de estilo:

/* Alinear todo el texto al centro. Esto moverá todo el texto, incluyendo el formulario al centro.*/

.showcase {
    height: auto;
    text-align: center;
  }

/* Esto restablece el ancho del contendor de la imagen y agrega margen a la izquierda 
*/ 

.image {
    width: 600px;
    margin-left: 80px;
  }

/* Cambia las secciones de servicio de lado-a-lado para que cada una se posicione en una sóla linea. Centra el texto. */

.stats .flex {
    flex-direction: column;
  }

  .stats {
    text-align: center;
  }

/* Asegura que cada sección en las estadísticas no exceda el ancho del elemento padre. */

.stat {
    width: 100%;
    padding-right: 80px;
  }

/* Mueve el círculo al centro de la tarjeta  */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 270px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }

Y voila. Nuestro sitio ahora funciona en tablets y pantallas más pequeñas.

Cómo diseñar para dispositivos móviles

Mucha gente podría visitar el sitio desde un dispositivo móvil, que típicamente tienen las pantallas más pequeñas. Debido a esto, crear una distribución para las pantallas móviles es muy importante.

/* Dispositivos móviles */
@media(max-width: 500px) {
  .navbar {
    height: 100px;
  }

Primero incrementamos la altura de nuestra área de navegación. Dado que será vista desde una pantalla más pequeña, queremos que el area se muestre al usuario con más énfasis.

Luego, definimos las siguientes reglas de estilo:

/* Cambia la alineación. El logo del título se queda en la parte superior, los enlaces de navegación ahora se muestran debajo*/

.navbar .flex {
    flex-direction: column;
  }


/* Cuando pasamos encima el ratón, retienen el texto blanco y cambia el borde a negro */

  .navbar a:hover {
    color: white;
    border-bottom: 2px solid black;
  }


/* Establecer el color púrpura para el fondo de los enlaces de navegación, redondear las esquinas de los bordes y darle algo de espaciado*/

  .navbar ul {
    background: #9867C5;
    border-radius: 5px;
    padding: 10px 0;
  }


/* Alinear el texto al centro */

  .showcase {
    height: auto;
    text-align: center;
  }


/* Reducir el tamaño de la fuente */

.little-info {
    font-size: 13px;
  }


/* Reducir el ancho de la imágen */

  .image {
    width: 350px;
    margin-left: 70px;
  }

  .stat {
    margin-bottom: 40px;
  }


/* Mover el círculo una vez más */

.circle {
      background-color: transparent;
      border:3px solid purple;
      height:90px;
      position: relative;
      top: -30px;
      left: 150px;
      border-radius:50%;
      -moz-border-radius:50%;
      -webkit-border-radius:50%;
      width:90px;
  }
}

Y voila!

Concluyendo

FlexBox y Grid son herramientas muy poderosas para distribuir el contenido de una página web de la manera que gustes.

Se puede argumentar que el diseño responsivo es uno de los principios más importantes del desarrollo web. Debemos considerar el hecho de que nuestro sitio será visto desde varios tipos de dispositivos con diferentes resoluciones de pantalla. Optimizar la distribución del contenido de nuestro sitio para diferentes pantallas mejorará la experiencia de usuario.

En este tutorial hemos diseñado una página de inicio simple usando FlexBox, Grid y varias otras propiedades CSS. Hemos también hecho que la página luzca bien en tablets y pantallas móviles.

El código completo de este proyecto puede ser descargado de su repositorio en Github.

Espero que hayas aprendido algo útil a partir de este tutorial. Si tienes alguna sugerencia puedes contactarme en Twitter. Tambié puedes visitar mi blog para ver más publicaciones como esta.

Gracias por seguir conmigo hasta aquí y nos vemos pronto.

Kingsley Ubah

Desarrollador Web. Escritor Tecnológico. Educador. Freelancer. Africano en la Industria Tecnológica. escribo tutoriales acerca del desarrollo web/software. Mi blog personal es - ubahthebuilder.tech. Se amable. Sonrie siempre!

Combina el poder de un front-end con React  y el CMS más popular de internet.

¿Quieres las ventajas de una moderna SPA React, pero un back-end que se sienta familiar? En este artículo, cubriremos cómo configurar el REST API de WordPress, incluyendo los "custom post types" (tipos de post personalizados) y "custom fields" (campos personalizados) así como también te mostramos como traer estos datos desde React.

Recientemente, he trabajado en un app React para un cliente, y ellos me hicieron esta pregunta: ¿Puedo usar React con WordPress?

Desde finales del 2015 la respuesta a esta pregunta ha sido, si. Pero los pasos necesarios para crear un sitio des-acoplado que trabaje bien podría no parecer tan clara o sencilla, especialmente para quienes no están familiarizados con WordPress y React.

En mi trayectoria al crear una aplicación (WordPress + React) que funcionara me encontré con un montón de obstáculos engañosos que en este artículo explicaré como evitar. También comparto muchos otros trucos y tips que aprendí en el camino.

Contenido

Parte 1: Antecedentes  

• ¿Qué es un Headless CMS?
• ¿Que necesito saber?
• Acrónimos clave
• ¿Dónde puedo ver los datos JSON de WordPress?

Parte 2: WordPress

• Agregando un Custom Post Type
• Cambiando el texto de relleno del título
• Agregando un "Custom Field" a tu "Custom Post Type"
• Haciendo  que los Custom Fields estén disponibles en formato JSON
• Restringiendo la visibilidad de los datos JSON

Parte 3: React

• Promesas en JavaScript
• El método Fetch
• Usando Promesas

Un ejemplo que trabaja bien

Conclusión

Parte 1: Antecedentes

¿Qué es un Headless CMS?

Antes usar un CMS como WordPress significaba que tenías que crear tu frontend usando PHP.

Ahora con headless CMS puedes construir tu front-end con cualquier tecnología que prefieras; esto gracias a la separación (des-acoplamiento) entre el front-end y el back-end vía una API. Si quieres crear una SPA (Aplicación de Página Única) usando React, Angular o Vue, y controlar el contenido usando un CMS como WordPress, ya es posible!

¿Qué necesito saber?

Sacarás el máximo provecho de este artículo si tienes:

• Algún conocimiento de cómo funciona un CMS como WordPress, un poco de PHP, y alguna idea de como configurar un proyecto WordPress en tu computadora.
• Entender JavaScript, incluyendo las características de las versiones ES6+ y la sintaxis de clases en React.

Acrónimos clave

La programación está llena de jerga, pero esta nos permite platicar de manera más rápida los conceptos en este artículo. Aquí un rápido repaso de los términos que usaremos:

• CMS — Sistema para el Manejo de Contenido (content management system). Piensa en WordPress, Drupal, Joomla, Magento.
• SPA — Aplicación de Página Única (Single-Page Application).  En lugar de re-cargar cada página por completo, una SPA carga el contenido dinámicamente. El código fundamental del sitio web (HTML, CSS y JavaScript) se carga una sóla vez. Piensa en React, Vue, Angular.
• API — Interfaz de Programación de Aplicaciones (application programming interface). En términos sencillos, es una serie de definiciones que un servicio provee para permitirte tomar y utilizar sus datos. Google Maps tiene una, Medium tiene una. Y ahora cada website hecho con WordPress viene con una API incluida.
• REST — Transferencia de Estado Representacional (representational state transfer). Un estilo de arquitectura web basado alrededor de los métodos HTTP: GET , PUT , POST y DELETE . El API de WordPress es un API REST o API “RESTful”.
• HTTP — Protocolo de Transferencia de Hipertexto (hypertext transfer protocol). El conjunto de reglas utilizadas para transferir datos a través de la web. Se especifica el inicia de URLs como http or https (la versión segura).
• JSON — Notación de Objetos JavaScript (JavaScript object notation). Aunque es un acrónimo derivado de JavaScript, JSON es un formato independiente de lenguajes para almacenar y transmitir datos.

En este artículo estamos usando WordPress como nuestro CMS. Lo que quiere decir que programaremos nuestro "backend" en PHP y usando la REST API de WordPress para enviar datos JSON al "frontend".

¿Dónde puedo ver los datos JSON de WordPress?

Antes de llegar a lo bueno, veamos una rápida nota acerca de en dónde puedes encontrar los datos JSON de tu sitio WordPress. En la actualidad , cada sitio WordPress cuenta con datos JSON a tu disposición (a menos que el propietario del sitio haya deshabilitado o restringido el acceso a estos). Puedes echar un vistazo al JSON principal de un sitio WordPress al agregar  /wp-json a la url del dominio principal del sitio.

Entonces, por ejemplo, puedes dar un vistazo a el JSON de WordPress.org visitando https://wordpress.org/wp-json. O, si estás corriendo un sitio WordPress de manera local, puedes ver sus datos JSON en la siguiente dirección  localhost/yoursitename/wp-json.

Para tener acceso a los datos de tus publicaciones (posts), escribe  localhost/yoursitename/wp-json/wp/v2/posts . Para un formato personalizado (custom post format), intercambia el nuevo formato (ej. movies) en lugar de  posts. Lo que ahora se ve como un bloque de texto ilegible nos permitirá usar WordPress como un "headless CMS"! - del inglés Sistema de Manejo de Contenidos sin Cabecera; lo que significa que no incluye la capa de presentación.

Parte 2: WordPress

Para configurar tu API REST, la mayor parte de lo que necesitas sucederá en tu archivo functions.php. Asumiré que ya sabes como configurar un proyecto WordPress y tener acceso a este mediante  localhost.

Para la mayoría de los proyectos vas a querer utilizar un "custom post type", así que comencemos por configurar uno.

Agregando un Custom Post Type

Digamos que nuestro sitio es acerca de películas y que queremos un "post type" llamado 'movies'. Primero tendremos que asegurarnos que nuestro "post type" 'movies' (películas) se cargue lo antes posible, así que lo adjuntáremos al hook  init usando add_action :

add_action( 'init', 'movies_post_type' );

Estoy utilizando el nombre de función movies_post_type() , pero puedes llamar la función como tu gustes.

A continuación vamos a registrar 'movies' como un "post type" con la función register_post_type().

El siguiente bloque de código podría parecer demasiado complejo pero es relativamente simple: nuestra función toma muchos argumentos para controlar la funcionalidad de nuestro nuevo "post type" y la mayoría de estos se explican muy bien por sus propios nombres. Pondremos estos argumentos en nuestro arreglo  (array) $args .

Uno de los argumentos es  labels, este también puede tomar diferentes argumentos así que lo separaremos en un arreglo aparte, $labels , dándonos:

Dos de los argumentos más importantes son 'supports' y 'taxomonies' , lo cual se debe a que estos argumentos controlan cuales de los campos post nativos serán accesibles en nuestro nuevo "post type".

En el código de arriba optamos por sólo tres  'supports':

• 'title'— el título de cada post.
• 'editor'— el editor de texto principal, que usaremos en nuestra descripción.
• 'thumbnail'— la imagen destacada del post.

Para ver la lista completa de lo que se encuentra disponible revisa aquí para supports y acá para taxonomías.

"Generate WordPress" también tiene una práctica herramienta para ayudarte a codificar los "custom post types" mucho más

Cambiando el texto de relleno (placeholder) del título.

Si el texto de relleno "escribe el título aquí" (en inglés "enter title here") es un poco confuso para tu "custom post type" puedes editarlo en una función distinta.

Agrega un campo personalizado a tu custom post type

¿Que tal si necesitas un campo que no viene pre-definido en la interface de WordPress? Por ejemplo, digamos que queremos un campo especial llamado "Género". En ese caso, necesitarás usar la función add_meta_boxes() .

Esto debido a que necesitaremos adjuntar una nueva función al hook (gancho) de WordPress  add_meta_boxes:

add_action( 'add_meta_boxes', 'genre_meta_box' );

Dentro de nuestra nueva función, necesitamos llamar la función de WordPress  add_meta_box() de la siguiente manera:

function genre_meta_box() {  add_meta_box(    'global-notice',    __( 'Genre', 'sitepoint' ),    'genre_meta_box_callback',    'movies',    'side',    'low'  );}

Puedes leer más acerca de los argumentos de esta función aquí. Para nuestros propósitos la parte más crítica es la función callback, que hemos llamado  genre_meta_box_callback . Esta define los contenidos del meta box. Sólo necesitamos ingresar texto así que podemos usar:

function genre_meta_box_callback() {  global $post;  $custom = get_post_custom($post->ID);  $genre = $custom["genre"][0];  ?>  <input style="width:100%" name="genre" value="<?php   echo $genre; ?>" />  <?php};

Finalmente, nuestro custom field no guardará el valor que contiene a menos que le digamos que lo haga. Para este propósito podemos definir una nueva función  save_genre() y adjuntar a el hook  save_post de WordPress:

function save_genre(){  global $post;  update_post_meta($post->ID, "printer_category",   $_POST["printer_category"]);};

add_action( 'save_post', 'save_genre' );

Ya completo, el código que usamos para crear el "custom field" debería verse algo así:

Haciendo que los custom fields estén disponibles en formato JSON

Nuestros "custom posts" están automáticamente disponibles en formato JSON. Para nuestro post type "movies", los datos en formato JSON están disponibles en  localhost/yoursitename/wp-json/wp/v2/movies .

Sin embargo nuestros custom fields no son están incluídos automáticamente, así que necesitamos agregar una función para asegurarnos de que también son accesibles mediante la REST API.  

Primero, necesitaremos adjuntar una nueva función al hook  rest_api_init :

add_action( 'rest_api_init', 'register_genre_as_rest_field' );

Luego, podremos utilizar la función register_rest_field() así:

function register_genre_as_rest_field() {  
	register_rest_field(    
    	'movies',    
        'genre',    
        array(      
        'get_callback' => 'get_genre_meta_field',      
        'update_callback' => null,      
        'schema' => null,
        ) 
     );
 }

Esta función toma un arreglo con los callbacks get y update . Para un caso de uso más simple y claro, podemos sólo especificar un  'get_callback' :

function get_genre_meta_field( $object, $field_name, $value ) {  
	return get_post_meta($object['id'])[$field_name][0];
}

En términos generales, este es el código necesario para registrar un custom field.

Haciendo que las URLs de las imágenes destacadas estén disponibles en formato JSON

La REST API de WordPress no incluye de antemano una URL para tus imágenes destacadas. Para hacerlo más fácil tener acceso puedes usar el siguiente código:

El filtro de WordPress rest_prepare_posts es dinámico, así que podemos meter nuestro custom post type en el lugar de la palabra "posts", de la siguiente forma:  rest_prepare_movies .

Restringiendo cuáles datos JSON son visibles

Estamos casi listos para empezar a traer datos a nuestro app React, pero hay una optimización más que podemos hacer, al limitar los datos que están disponibles.

Algunos datos vienen de manera estándar pero que podrías nunca necesitar en tu frontend y (de ser este el caso) podemos removerlos usando un filtro, como este. Puedes encontrar los nombres  de los tipos de datos dándole un vistazo a la URL  /wp-json/wp/v2/movies  de tu website.

Con eso terminado, una vez que hayas agregado unas cuántas películas usando el backend de WordPress, tenemos todo lo que necesitamos para empezar a traer los datos a React!

Parte 3: React

Para obtener datos externos en JavaScript, necesitas usar promesas. Esto probablemente tendrá implicaciones para la manera en que quieres estructurar tus componentes React y en mi caso (convertir un proyecto React existente), tuve que re-escribir una cantidad considerable de código.  

Promesas en JavaScript

Las promesas en JavaScript son utilizadas para manejar acciones asíncronas; cosas que suceden fuera del orden de ejecución usual o síncrono.

La buena noticia es que JavaScript asíncrono es más fácil de lo que solía ser. Antes de ES6, dependíamos de las funciones callback. Si eran necesarias múltiples callbacks (y frecuentemente lo eran), la anidación nos llevaría a escribir código que era muy difícil de leer, escalar y corregir; un fenómeno que se conoce como el "callback hell" (infierno de retro-llamadas) o "pyramid of doom"! (pirámide de la condena).

Las promesas fueron introducidas en ES6 (ES2015) para resolver el problema del callback hell, y ES8 (ES2018) vio la introducción de async ... await , dos palabras clave que simplificarían aún mas la funcionalidad asíncrona. Pero para nuestros propósitos, el método más crítico basado en promesas es fetch() .

El método Fetch

Este método ha estado disponible desde la versión 40 de Chrome, y es una alternativa más fácil de usar que XMLHttpRequest() .  

fetch() devuelve una promesa y por lo tanto podemos usar el método "then" para procesar el resultado.

Puedes agregar fetch a un método dentro de tu componente clase en React, de esta manera:

fetchPostData() {  
     fetch(`http://localhost/yoursitename/wp-json/wp/v2/movies?per_page=100`)  	  
    .then(response => response.json())  
    .then(myJSON => {  
     	// Logic goes here
     });
}

En el código de arriba dos cosas son importantes:

• Primero, estamos llamando una URL con el filtro ?per_page=100 adjunto al final. Por defecto, WordPress sólo muestra 10 items por página y frecuentemente me encuentro queriendo incrementar ese límite.
• Segundo, antes de procesar nuestros datos, estamos usando el método  .json(). Este es utilizado principalmente en relación con fetch(), y devuelve los datos como una promesa además de hacer "parse" al texto de la propiedad body en formato JSON.

En la mayoría de los casos, vamos a querer correr esta función tan pronto como nuestro componente React haya sido montado (mounted), y esto lo podemos especificar usando el método  componentDidMount() :

componentDidMount() {  this.fetchPostData();}

Manejando promesas

Una vez que se a devuelto una promesa, tienes que tener cuidado en manejarla en el contexto adecuado.

Cuando intenté usar promesas por primera vez, pasé un rato intentando pasar datos a las variables que se encontraban fuera del scope (ámbito) de la promesa. Aquí algunas buenas regla a seguir:

• En React la mejor manera de usar promesas es mediante el uso del estado. Puedes utilizar  this.setState() para pasar los datos de la promesa al estado de tu componente.
• Lo mejor es procesar, ordenar y re-agrupar tus datos dentro de una serie de métodos  then() encadenados al fetch() inicial. Una vez que se complete el proceso, es una buena práctica agregar los datos al estado dentro de tu método  then() final.
• Si quieres llamar cualquier función adicional para procesar tu promesa (incluso dentro de render()) es buena práctica prevenir que la función corra hasta que la promesa se haya resuelto.
• Así que, por ejemplo, si pasas tu promesa a  this.state.data , puedes incluir un condicional dentro del cuerpo de cualquiera de las funciones que dependen de ella, como te muestro abajo. Esto puede prevenir molesto comportamiento no deseado!

myPromiseMethod() {  if (this.state.data) {    // process promise here   } else {    // what to do before the fetch is successful  }}

Un ejemplo en React

Digamos que queremos traer  name, description, featured_image y genre del custom post type que definimos en la parte 1.

En el siguiente ejemplo, tomaremos esos 4 elementos para cada película y los mostraremos (render) en pantalla.

El siguiente bloque de código podría parecer intimidante, como es frecuente en los tutoriales React.  Pero espero que parezca mucho más simple cuando te lo explique más a detalle.

constructor(props)

En este método, llamamos super(props), para definir nuestro estado inicial (un objeto  data vacío) y uniremos (bind) tres nuevos métodos:

• fetchPostData()
• renderMovies()
• populatePageAfterFetch()

componentDidMount()

Queremos traer nuestros datos tan pronto como el componente se haya montado, así que llamaremos fetchPostData() aquí.

fetchPostData()

Traemos el JSON desde nuestro URL, pasando .json() en el primer método .then() .

En el segundo método  .then() extraemos los cuatro valores que queremos para cada película que hemos traído y luego las agregamos al objeto newState .

Entonces podemos usar this.setState(newState) para agregar esta información a   this.state.data .

renderMovies()

El condicional  if (this.state.data) significa que la función correrá solamente una vez que los datos hayan sido extraídos (fetched).

Aquí, tomamos un arreglo de todas nuestras películas extraídas de  this.state.data  y lo pasamos a la función  populatePageAfterFetch() .

populatePageAfterFetch()

En esta función preparamos los datos para que cada película sea "renderizada" (mostrada en pantalla). Esto debería ser sencillo para cualquiera que haya utilizado JSX; con un potencial obstáculo.

El valor de  movie.description no es texto simple sino HTML. Para mostrar esto podemos usar  dangerouslySetInnerHTML={{__html: movie.description}} .

Nota: La razón por la que esto es potencialmente "peligroso" es que si tus datos fueran interceptados y recibieran una inyección de scripts XSS, este podría ser también  consumido y a su vez interpretado por el navegador de los usuarios. Como estamos usando nuestro propio servidor/CMS en este artículo, no deberíamos preocuparnos. Pero si quieres sanear (sanitize) tu HTML, dale un vistazo a DOMPurify.  

render()

Finalmente, controlaremos donde aparecerán nuestros datos renderizados al llamar el método renderMovies() dentro de las etiquetas HTML <div> seleccionadas. Ahora hemos extraído datos desde nuestro sitio WordPress exitosamente y los hemos mostrado en pantalla!

Conclusión

Espero que este artículo haga que el proceso de conectar un front-end React con Wordpress sea tan sencillo y libre de frustraciones como sea posible.

Como muchas cosas en la programación, lo que puede lucir intimidante pronto empezará a sentirse como instinto natural!

Estoy muy interesado en conocer tus propias experiencias usando WordPress como un CMS headless y estaría feliz de responder cualquiera de tus preguntas en los comentarios.

Digamos que has creado un proyecto con React.js y lo desplegaste en GitHub-pages (aún no?? — crea tu primer proyecto con React.js -artículo en inglés). Pero qué tal si realizas cambios frecuentes al código y además quieres que la versión desplegada (producción) se encuentre siempre actualizada? ... ¡Te encontrarás con un tedioso proceso que consiste en correr scripts para el despliegue una y otra vez!!!

Qué tal si el proceso pudiera ser automatizado??

Luego de una sesión rápida de búsqueda en google, encontré que es posible y puede ser logrado usando Travis CI—una herramienta de código abierto para automatizar el despliegue de varios tipos de proyectos.

Lo que aprenderás >

En este artículo vas a aprender como implementar el sistema que disparará los scripts para despliegue de React usando TRAVIS-CI, para así lograr desplegar el proyecto a GitHub-pages, cuando sea que haya cambios por desplegar en la rama principal (master branch) del repositorio.

• A configurar el despliegue automatizado del proyecto ‘react-portfolio’
• Aprender acerca de algunos errores frecuentemente encontrados en este proceso.
• Aprenderás algunos conceptos relacionados al ‘continuous deployment’ (despliegue continuo).

Aprendamos algunos fundamentos

Brinca esta sección sino eres del tipo (fundamentos primero)!!

Continuous Integration(CI) & Continuous Delivery(CD) >

-Integración Continua (IC) y Entrega Continua (EC)

“En ingeniería de software , la Integración Continua (CI) es la práctica de integrar todos las copias funcionales de los desarrolladores en una rama central (shared mainline /trunk) varias veces al día” — wikipedia

Dicho de otra forma, los desarrolladores tratarán de fusionar (merge) sus cambios o características nuevas en la rama master tan frecuentemente como sea posible. Seguir esta práctica permite que los desarrolladores y gerentes de producto realicen el lanzamiento del producto más frecuentemente.

Existen algunas versiones extendidas de CI pipelines (canales CI) donde estos cambios también pueden ser puestos a prueba (testing) automáticamente, lo que hace que el código sea desplegable en todo momento; esto se conoce como ‘Continuous Delivery’ (entrega continua). Una extensión aún mayor a este canal o pipeline se conoce como ‘Continuous Deployment’ (Despliegue continuo), donde estos cambios ya puestos a prueba (tested) son subidos automáticamente a los servidores de producción. (Estaremos implementando el pipeline de despliegue continuo en nuestro caso).

Travis CI >

Travis CI es un servicio alojado de integración continua (CI) utilizado para desarrollar y probar (test) proyectos de software alojados en GitHub. ¡Con el que se pueden realizar pruebas a proyectos de código abierto sin cargos!!

Travis CI puede ser configurado agregando el archivo .travis.yml al repositorio. Cuando Travis CI ha sido activado para un repositorio, GitHub notificará cuando sea que nuevos commits sean realizados en el repositorio o cualquier pull request sea enviado que cumpla con las reglas definidas en el archivo .travis.yml, Travis CI ejecutará los pasos necesarios, que pueden ser— desde correr pruebas, hacer un build de la aplicación o ejecutar scripts para despliegue. Travis CI ofrece una amplia gama de opciones y lenguajes para desarrollar software y claro, nuestro amado javascript es una de esas opciones.

NOTA: GitHub tiene un  pack para desarrolladores estudiantes disponible con un montón de características premium gratuitas para estudiantes, que incluye varias plataformas (Travis CI es una de ellas) —  obtén tu "student pack" ahora!!

DevOps >

DevOps es un grupo de prácticas que combinan el desarrollo de software (Dev) y  operaciones de tecnologías informáticas (Ops) para acortar los ciclos de vida en el desarrollo de sistemas mientras se entregan características, corrección de errores y actualizaciones de manera continua y frecuente. El concepto DevOps se fundamenta en la construcción de una cultura de colaboración entre equipos.

“DevOps es más que una práctica  — se trata de una cultura”

Integración continua, entrega continua, despliegue continuo; son algunas de las prácticas clave del DevOps. Además los ingenieros DevOps aprovechan fuertemente el poder de la infraestructura de la nube para hacer el proceso de despliegue impecable.

¡Paremos de hablar!!! Pongamos manos a la obra.

Como ya has desplegado en GitHub pages usando el módulo node gh-pages, habrá una rama llamada gh-pages en el repositorio, que contiene los archivos que son desplegados a los servidores de GitHub pages. Luego de la integración de Travis CI, seremos capaces de implementar el sistema que desatará un "build" (compilación/transpilación del código) automáticamente cada vez que el usuario realice cambios a la rama master. Si el "build" es exitoso, los "build scripts" serán disparados, lo que actualizará la rama gh-pages. Travis CI notificará entonces al usuario acerca del estatus del build via correo electrónico.

Crea una cuenta en Travis-CI >

• Ve a Travis-ci.com y regístrate con GitHub.
• Acepta los términos y condiciones de Travis CI. Serás redireccionado a GitHub.
• Da clic al botón de activar (Activate), selecciona los repositorios que desea utilizar con Travis CI.
• Se agregará automáticamente un token de autorización cuando inicies sesión en GitHub.

Agrega el archivo travis.yml al repositorio >

Este archivo contiene las instrucciones que instruyen a Travis-CI — qué?..cómo?..cuándo?

NOTA: Cuando dispares una tarea en Travis-CI, este iniciará una máquina virtual con el entorno de despliegue apropiado según la configuración en el archivo .travis.yml

Revisemos el código paso a paso —

language: node_js
node_js:
  - "stable"
cache:
  directories:
  - node_modules
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  github_token: $github_token
  local_dir: build
  on:
    branch: master

on : Travis-CI disparará automáticamente una tarea en cuanto haya cambios en la rama especificada en este campo.

deploy : En este campo hemos declarado que usaremos el proveedor de despliegue para GitHub pages  que nos brinda Travis-CI, que no es otra cosa que las instrucciones de configuración para preparar el entorno para realizar el despliegue.

script : Contiene los "build scripts" (código para "construir", compilar o transpilar el proyecto) que serán ejecutados mientras se corre la tarea. Para este caso puedes agregar "test scripts" (para pruebas; cobertura de código, pruebas de fusión, etc. ) antes del "build".

cache : Travis-CI nos permite guardar en caché los archivos de librerías y módulos para cada "build". Los archivos en la caché pueden ser reutilizados para los próximos builds, de esta forma podemos reducir el tiempo de ejecución de extremo a extremo en cada ejecución.

Todo listo >

Muy bien ahora todo está en su lugar, de ahora en adelante si confirmas ( commit ) algún cambio en la rama master se desatará una rutina (build) de Travis-CI que se verá más o menos como en las capturas de pantalla de abajo. También puedes disparar un build manualmente desde el panel de control de Travis-CI.

Pero …. (siempre hay un pero!! eh?!)

Estoy seguro de que tu panel de control no se verá como el de arriba tan fácilmente, tal como en la vida las cosas no siempre salen como uno espera. Puede haber infinitas razones por las cuales tu panel de control en Travis-CI se llene de builds fallidos (lo sé porque ya me ha pasado).

Este es el momento cuando tus más valiosas habilidades para "googlear" van a ser muy útiles. Explicaré todos los errores que he encontrado al intentar crear un canal o "pipeline".

• Errores de seguridad
• Errores con el token
• Errores de tipo aleatorio (Necesitarás ensuciarte las manos para encontrar la solución!!)

Errores con los tokens >

Si tus builds fallan debido a errores con los permisos entonces hay muchas probabilidades de que tenga que ver con problemas con los tokens. Necesitas ir al URL https://github.com/settings/tokens y ver cuando fue la última vez que se usaron, si muestra que no han sido usados nunca, habrás encontrado al culpable.

Para arreglarlo sigue estos pasos,

• Borra el token y crea uno nuevo
• Agrega el token a las variables de entorno de Travis (en las configuraciones de rutina/job)
• Reintenta el build

Errores de seguridad >

Hay muchas prácticas de seguridad que ignoramos al programar y crear aplicaciones. Cuando corremos nuestro proyecto localmente no les damos mucha importancia y frecuentemente los descartamos como simples advertencias, pero cuando tratamos de desplegar el servicio usando Travis-CI estas advertencias causarán que el build falle.

Hablaré de los errores que encontré mientras trabajaba en mi proyecto (y te invito a hacer lo mismo con tus errores). Lo genial es que la mayoría de estos errores tienen sus propias páginas dedicadas que explican las causas del problema y ofrecen soluciones o remedios alternativos (Remedios— nos encantan los remedios aunque sepamos que no deberíamos).

• Usar target=_blank in HTML <href> tag: Esta vulnerabilidad es más seria de lo que aparenta. Conoce más aquí.
• Redundancia en el código HTML: Hay muchas etiquetas HTML y nombres de clases redundantes, lo cual hacía que mi código luciera como un desastre.

La mejor manera de prevenir estos errores es instalar el plug-in es-lint para el editor de texto que uses.

¿Creaste algún proyecto? — Compártelo!

Estoy tratando de construir una comunidad de desarrolladores donde la gente puede compartir sus ideas, conocimientos, trabajar con otros y encontrar otras personas con ideologías similares para construir cosas juntos. Así que si construiste algún proyecto y quieres compartirlo, publícalo en el canal.

• Canal en Gitter : https://gitter.im/weekend-devs/community
• Organización Github : https://github.com/weekend-developers

Para cerrar

Me gustaría tomar un momento para reconocer el trabajo de la gente que me ha inspirado y enseñado lo que sé, lo que puedo hacer y así poder escribir este artículo.

• Comunidad Travis CI : por proveer herramientas increíbles de forma libre  gratuita.
• Mis mejores amigos: quienes me ayudaron a corregir mis errores.
• TÚ: por leer hasta aquí abajo, espero que haya sido una lectura productiva. ¡Continúa explorando y construyendo cosas increíbles!

Traducido del artículo de Dhruv Barochiya - How to automate deployment on GitHub-pages with Travis CI

Te mostraré como puedes iniciar con solo unos pocos comandos y los conceptos que hay detrás de estos.

Conceptos básicos

Tu código local

Este es el resultado del trabajo que haces en tu computadora. Cualquier edición, formato, características o trabajo de desarrollo que tienes en tu computadora es tu código local.

Status "preparado" (staged)

Una vez que te sientas satisfecho con los cambios o la cantidad de trabajo realizado, puedes marcar tu código como "preparado". Lo que quiere decir que estás declarando que dichas líneas de código están listas para ser confirmadas (committed).

El servidor

Ya que sientas que los archivos que tienes "preparados" están listos, puedes enviarlos a tu servidor, (GitHub, GitLab, etc.) el cual guarda todo tu código para que otras personas lo puedan ver también (en los casos apropiados). Ahora tus archivos pueden ser vistos por otras personas y ellas pueden trabajar en estos.

El objetivo final

La idea detrás de git es que tu código (digamos de un proyecto) que se encuentra en un servidor remoto debería estar sincronizado con el código que tienes en tu ordenador. Cuando trabajas con otras personas, su código debería estar sincronizado con tu código. Así si tus compañeros o colaboradores "envían"  código nuevo, tú también deberías fácilmente poder actualizar tu código para reflejar los cambios que ellos hicieron.

La meta u objetivo final es que todo lo que se encuentra en el servidor debe ser lo mismo en todas partes, debe ser igual, el mismo código que se encuentra en tu máquina local. Deberías enviar archivos al servidor lo antes posible para que cuando otros vean tus cambios, ellos puedan tener la versión más actual.

Flujo de trabajo

Digamos que tienes una carpeta en tu computadora donde se encuentra tu código y quieres ponerlo en GitHub para poder usar control de versiones.

Aquí te muestro como hacerlo:

1. Creando un repositorio.

Hay dos maneras de obtener un repositorio - puedes crear uno tu mismo o puedes trabajar con el repositorio de alguien más y contribuir a este. La opción que elijas depende del proyecto en que estés trabajando. Si trabajas en un proyecto propio es más probable que quieras crear un repositorio y empezar a escribir código. Cuando trabajas en código abierto (open source) o en un equipo lo más probable es que vayas a usar un repositorio que ya existe. Hablemos de como hacer ambas.

Crea un Repositorio

Primero necesitarás crear una cuenta en GitHub si es que no tienes una aún. Haz clic en la pestaña Repositorios y en "Nuevo" ("New").

Sigue las instrucciones para crear tu nuevo repositorio. Digamos que llamamos este repositorio test-repo . Una vez que lo hayas creado, GitHub te muestra como configurarlo en tu computadora de manera local.

Sigue las instrucciones para crear un nuevo repositorio en la línea de comandos -

Clonando un repositorio

git clone <repositorio>

Digamos que quieres obtener el código en el que yo estoy trabajando para que puedas también trabajar con él en tu computadora. Necesitarás encontrar mi cuenta de GitHub y clonar el repositorio en el que estés interesado. Hoy vamos a trabajar en este repositorio.

git clone git@github.com:shrutikapoor08/devjoke.git

2. Crea una rama (branch)

Creando una rama ayuda a mantener el trabajo en progreso separado del código que trabaja bien. También ayuda a modular tu código y mantener características separadas mientras aún trabajas en ellas. Hagamos una rama nueva  rama-para-chiste usando:

git checkout -b rama-para-chiste

Puedes enviar esta rama al servidor  (origin) con  el comando—

git push origin rama-para-chiste

Ahora supongamos que tú y yo somos compañeros de trabajo y estamos trabajando en un proyecto. Repasemos como sería este flujo de trabajo.

3. Modificando el código

Una vez que comprendas lo que hace el código, estarás listo para hacer ediciones. Si estás trabajando en el repositorio de alguien más, es una buena idea hacer una copia o bifurcación (fork) del repositorio "Forking" es copiar. Es como pasar el repositorio por una copiadora y obtener tu propia copia. Puedes hacer los cambios que quieras o que se necesiten con tu propia copia, editar archivos, borrarlos o agregar nuevos. Si quieres, puedes enviar tus actualizaciones y solicitar que tu código se integre al repositorio original.

Vamos a crear un fork o copia de este repositorio para modificar el código. Para esto haz clic en el botón "Fork" en la parte superior del repositorio (GitHub).

Ahora si vas a tu perfil de GitHub, podrás ver tu recién creado fork del repositorio. ¡Ajá, ajá!

A continuación vamos a realizar algunos cambios. Abre el archivo README.md. A este archivo vamos a agregar una #DevJoke! (chiste o humor de/para desarrolladores). Pensemos en un chiste bueno y agreguémoslo al inicio de este archivo. Aquí una #DevJoke para ti—

¿Porqué el programador perdió su trabajo?
.
.
.
.
¡Por no conseguir un arreglo!

4. Confirmado los cambios.

Ahora guardemos el archivo y confirmemos  los cambios( commit ). Si vas a hacer commit a un archivo recién creado, primero tendrás que agregarlo al área de preparación o "staging". Lo puedes hacer con—

git add <nombre_archivo>

Ya que tu archivo se encuentra "staged", puedes hacer "commit" para confirmar los cambios, asegúrate de agregar un mensaje a tu commit para ayudarte a recordar que cambios realizaste en este commit.

git commit -m "Agregué una #DevJoke"

5. Subir tus cambios

Recuerda, cuando trabajas en un repositorio en el que otras personas colaboran, es posible que mientras tú modificas tu versión local, ellos podrían haber subido cambios o código nuevo. Así que ahora el servidor va un "paso adelante" de ti. Por lo que necesitas sincronizar tu computadora con el servidor para asegurarte que tienes el código más actual, para ello puedes bajar los últimos cambios del servidor con—

git pull origin <nombre-de-la-rama>

Si nunca has creado una rama, no te preocupes. Git the da la rama  master por defecto. También puedes crear una nueva rama con—

git checkout -b <nueva-rama>

Ahora que has confirmado los cambios y tu máquina se ha sincronizado con el servidor, estás listo para subir tus modificaciones para que el mundo las vea. Para subir a la rama  master , puedes hacerlo con — git push origin master.

AJÚA!!! Has subido tus primeros cambios usando push! Date una palmadita en la espalda. Esa fue la parte más difícil. Ahora estás listo para confirmar todos los cambios que quieras.

6. Realizando un Pull Request

Ahora, envíame ese maravilloso chiste (#DevJoke) creando un pull request. Un pull request es una característica por medio de la cual el desarrollador, me solicita —a mí el propietario— fusionar sus cambios con mi repositorio. Crear un pull request es fácil. Ve a github.com y abre el repositorio en el que has estado trabajando.

Verás un botón para crear un Pull request como este:

Haz clic en el botón y sigue las instrucciones. Asegúrate que tus cambios se vean correctamente reflejados en la pantalla de "Comparing changes" (comparando cambios).

¡Haz clic en "Create pull request" (crear pull request) y es todo! ¡Ya acabamos! Has creado tu primer Pull request!

Ahora envíame ese chiste (#DevJoke)

Traducido del artículo de Shruti Kapoor - git 101 a git workflow to get you started pushing code

Crea un nuevo par claves SSH

Abre una terminal y ejecuta el siguiente comando:

ssh-keygen

Verás el siguiente texto:

// Generando clave par rsa pública/privada.
// Ingresa el archivo en cual guardar la clave (/home/nombre_usuario/.ssh/id_rsa):

Generating public/private rsa key pair.
Enter file in which to save the key (/home/username/.ssh/id_rsa):

Presiona enter para guardar tus claves al directorio por defecto /home/nombre_usuario/.ssh

Entonces se te requerirá que escribas tu contraseña:

// Ingresa una contraseña (vacío para guardar sin contraseña):
Enter passphrase (empty for no passphrase):

Es recomendable introducir una contraseña para contar con una capa extra de seguridad. Al configurar una contraseña puedes prevenir el acceso no autorizado a tus servidores y cuentas; en el caso que alguien llegara a tener acceso a tu clave privada SSH o a tu computadora.

Luego de introducir y confirmar tu contraseña, verás lo siguiente:

// Tu identificación ha sido guardada en /home/nombre_usuario/.ssh/id_rsa.
// Tu clave pública ha sido guardada en /home/username/.ssh/id_rsa.pub.
// La huella digital (fingerprint) de tu clave es:
// SHA256:/qRoWhRcIBTw0D4KpTUyK6YepyL6RQ2CQrtWsaicCb4 username@871e129f767b
// La imagen randomart (arte aleatorio) de tu clave es:

Your identification has been saved in /home/username/.ssh/id_rsa.
Your public key has been saved in /home/username/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:/qRoWhRcIBTw0D4KpTUyK6YepyL6RQ2CQrtWsaicCb4 username@871e129f767b
The key's randomart image is:
+---[RSA 2048]----+
| .o=+....        |
|+.*o+o .         |
|+X.=o o          |
|@.=.oo .         |
|=O ...o S        |
|o.oo . .         |
|.E+ . . . .      |
|oo . ... +       |
|=.. .o. . .      |
+----[SHA256]-----+

Ahora ya tienes un par de claves (privada y pública) que puedes usar para tener acceso a servidores remotos de manera segura y manejar la autenticación de programas de línea de comandos como Git.

Administra múltiples claves SSH

Aunque es considerado buena práctica tener un sólo par de claves pública-privada por dispositivo, a veces necesitas usar múltiples claves o tienes nombres para claves no-ortodoxos. Por ejemplo, podrías estar usando un par de claves SSH para trabajar en los proyectos internos de tu compañía, pero podrías estar usando una clave distinta para tener acceso a los servidores de un cliente. Además, podrías estar utilizando una clave diferente para tener acceso a tu propio servidor privado.

Administrar claves SSH puede tornarse difícil e incómodo tan pronto como necesites utilizar una segunda clave. Tradicionalmente, usarías  ssh-add para guardar tus claves en  ssh-agent, escribiendo la contraseña para cada clave. El problema es que necesitarías hacer esto cada vez que reinicies tu computadora, lo cual se vuelve tedioso rápidamente.

Una mejor solución es automatizar la adición y guardado de claves y especificar qué clave utilizar cuando se ingrese a ciertos servidores.

SSH config

Entra SSH config,  que es un archivo de configuración por-usuario para la comunicación SSH. Crea un nuevo archivo: ~/.ssh/config y ábrelo para escribir:

nano ~/.ssh/config

Administrando nombres personalizados de claves SSH

La primera cosa que vamos a resolver usando este archivo config es evitar tener que agregar nombres personalizados para las claves SSH usando ssh-add. Asumiendo que tu clave privada se llame  ~/.ssh/id_rsa, agrega lo siguiente al archivo config:

Host github.com
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_rsa
  IdentitiesOnly yes

A continuación, abre otra terminal para asegurarte que  ~/.ssh/id_rsa no esté en  ssh-agent y corre el siguiente comando:

ssh-add -D

Este comando removerá todas las claves de la sesión  ssh-agent actualmente activa.

Ahora si intentas clonar un repositorio GitHub, tu archivo config usará la clave en ~/.ssh/ida_rsa.

Aquí están otros ejemplos útiles de configuración:

Host bitbucket-corporate
        HostName bitbucket.org
        User git
        IdentityFile ~/.ssh/id_rsa_corp
        IdentitiesOnly yes

Ahora puedes usar  git clone git@bitbucket-corporate:company/project.git

Host bitbucket-personal
        HostName bitbucket.org
        User git
        IdentityFile ~/.ssh/id_rsa_personal
        IdentitiesOnly yes

Ahora puedes usar  git clone git@bitbucket-personal:username/other-pi-project.git

Host myserver
        HostName ssh.username.com
        Port 1111
        IdentityFile ~/.ssh/id_rsa_personal
        IdentitiesOnly yes
        User username
        IdentitiesOnly yes

Ya puedes usar SSH para ingresar a tu servidor usando ssh myserver. Ya no necesitarás ingresar un puerto (port) y nombre de usuario cada vez que quieras ingresar a tu servidor privado.

Administración de contraseñas

La pieza final del rompecabezas es el manejo o administración de contraseñas. Se puede volver una tarea tediosa tener que ingresar una contraseña cada vez que inicializas una conexión SSH. Para evitar esta situación, podemos usar software de administración de contraseñas que viene con macOS y varias distribuciones de Linux.

Para este tutorial usaremos Keychain Access, un programa de macOS. Empecemos por agregar tu clave a Keychain Access pasando la opción -K al comando ssh-add:

ssh-add -K ~/.ssh/id_rsa_whatever

Ahora podrás ver tu clave SSH en Keychain Access:

Pero si quitas las claves de  ssh-agent con  ssh-add -D o reinicias tu computadora, esta te volverá a solicitar la contraseña y usuario cuando trates de usar SSH. Resulta que hay un obstáculo más que sortear. Abre tu archivo  config usando nano ~/.ssh/config y agrega lo siguiente:  

Host *
  AddKeysToAgent yes
  UseKeychain yes

Con esto, cuando sea que uses ssh la computadora buscará automáticamente las claves en Keychain Access. Si encuentra una, ya no se te solicitará una contraseña cada que uses SSH. Las claves también se agregan automáticamente a ssh-agent cada vez que reinicias tu computadora.

¡Ahora que sabes lo básico de crear nuevas claves SSH y administrar varias, sal a ponerlo en práctica!

Traducido del artículo - The ultimate guide to ssh setting up ssh keys