Tutorial: Integra tu blog de medium en tu sitio web con Google Cloud Functions — Parte 2
Integra React con el endpoint creado en Google Cloud Functions para mostrar tus artículos en tu app o sitio web.
Este tutorial cuenta de dos partes.
- Aprende a consumir la API de Medium para mostrar los artículos de tu blog o publicación por medio de Google Cloud Functions.
- Este tutorial.
Ahora vamos a integrar lo que hicimos en la primera parte de nuestro tutorial con React, en este caso utilizaremos el generador de Gatsby (puedes checar un artículo que hice al respecto).
Instalación
Vamos a iniciar nuestro proyecto escribiendo el siguiente comando (es importante que recuerdes que utilizaremos gatsby.js para realizar este tutorial).
$ gatsby new medium-blogAhora accedemos a la carpeta $ cd medium-blog , y ejecutamos el servidor $ gatsby develop , ahora basta con abrir localhost:8000 en nuestro navegador e inmediatamente veremos esta página.
Eso quiere decir que todo salió bien, vamos a hacer algunos ajustes parar que nuestra aplicación la desarrollemos bien desde el principio.
Integración con tachyons
Utilizaremos una excelente librería css para que el proyecto marche sobre ruedas. Les invito a visitar la documentación, la librería es:
Primero vamos a instalar con npm de la siguiente forma, primero tenemos que detener nuestro servidor con Control-C o con Command-C dependiendo de nuestro sistema operativo.
$ npm install --save-dev tachyonsAhora, vamos a modificar el archivo ./src/components/layout.js para integrarlo con tachyons.
./src/components/layout.jsTambién vamos a modificar los siguientes archivos:
./src/components/header.js./src/components/header.js./src/pages/index.jsCorremos nuestro servidor.
$ gatsby developEntramos a nuestro navegador en localhost:8000, ahora nuestra página de inicio lucirá así.
Consumiendo artículos de medium
En la 1a parte de nuestro tutorial ya creamos la función que nos servirá como endpoint para consumir los artículos de medium y mostrarlos directamente en nuestra aplicación web.
Podemos consultarla en la consola de firebase.
Utilizando variables de entorno para ocultar nuestro endpoint
Vamos a modificar el archivo ./gatsby-node.js , agregando las siguientes líneas:
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
})Y ahora crearemos un archivo .env.development poniendo la url de nuestra API:
# .env.development
API_URL="url de cloud function"Simplemente utilizando process.env.API_URL podremos llamar a nuestra API.
Utilizando fetch para consumir datos
Recordemos que nuestro componente principal, en este caso index.js es un componente puro, por lo que necesitamos convertirlo a un componente de clase para poder consumir y mostrar nuestros datos, para poder hacer nuestra petición de forrma correcta.
import React, { Component } from 'react'import Layout from '../components/layout'class IndexPage extends Component {
constructor() {
super()
} render() {
return (
<Layout>
<div className="w-100 pa4">
<h1>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
</div>
</Layout>
)
}
}export default IndexPage
Ahora agregamos nuestro constructor con la estructura de nuestros datos, en este caso es importante desde un principio ponerlo bien, para que React no nos marque errores.
class IndexPage extends Component {
constructor() {
super() this.state = {
payload: {
posts: [],
},
}
}
...
Ahorar utilizamos fetch para obtener nuestros datos y almacenarlos en nuestro estado, también vamos a añadir componentWillUnmount para no tener el siguiente error: Warning: Can't perform a React state update on an unmounted component.
componentDidMount() {
const username = 'edgar-talledos' fetch(`${process.env.API_URL}?username=${username}`)
.then(res => res.json())
.then(({ payload }) => this.setState({ payload }))
}componentWillUnmount() {
this.setState({ payload: { posts: [] } })
}
Ahora, ya estamos consumiendo sin ningún problema nuestros datos, si queremos visualizarlo, podemos hacerlo en nuestro navegador, directamente en la consola de desarrollador.
Mostrando artículos en nuestra aplicación
Si miramos con atención nuestra imagen, podemos ver que la estructura de cada artículo, pero solamente necesitaremos el título y el resumen, dado que queremos que nuestro blog sea algo simple, por lo que vamos a leer simplemente aquello que necesitamos.
La estructura de nuestro post quedará así.
post: { id, title, virtuals: { subtitle } }Eso quiere decir que podremos acceder a cada posts con post.title y post.virtuals.subtitle.
Utilizando un poco de destructuring, obtenemos solamente los posts, sin poner atención en los demás datos.
render() {
const { payload: { posts } } = this.state; return (
<Layout>
{posts.map(post => (
<div
key={post.id}
className="fl w-100 w-50-ns pa4"
>
<h1 className="f2 lh-title">{post.title}</h1>
<p className="f3 lh-copy">{post.virtuals.subtitle}</p>
</div>
))}
</Layout>
)
}
Listo, ahora podemos mostrar nuestros artículos.
Poniendo enlaces a nuestros artículos
Ahora sólo queda poner el enlace a cada artículo, para eso tenemos que añadir una función que nos permitirá obtener una url codificada a través de la propiedad uniqueSlug de nuestro post.
La función será la siguiente:
const mediumLink = (username, uniqueSlug) => {
const url = 'https://medium.com';
const permalink = encodeURIComponent(uniqueSlug); return `${url}/${username}/${permalink}`;
}
Y agregamos el enlace para cada post.
return (
<Layout>
{posts.map(post => (
<div
key={post.id}
className="fl w-100 w-50-ns pa4"
>
<h1 className="f2 lh-title">{post.title}</h1>
<p className="f3 lh-copy">{post.virtuals.subtitle}</p>
<a
className="link black dim"
href={mediumLink('edgar-talledos', post.uniqueSlug)}
>
Leer más...
</a>
</div>
))}
</Layout>
)Ahora podremos visitar cada artículo solamente dándole click a Leer más...
Así es como debe quedar nuestro index.js
Conclusión
El repositorio del tutorial se encuentra en el siguiente enlace:
No olvides que todos los viernes publico artículos sobre desarrollo web y móvil, te invito a seguirme en mis redes sociales.
