31

Tutorial: Crea una app con Node.js y la API de Instagram

22372Puntos

hace 4 años

Curso Profesional de DevOps
Curso Profesional de DevOps

Curso Profesional de DevOps

Acelera los procesos de desarrollo en tu empresa usando testing automáticos para tus nuevos features. Automatiza el flujo de trabajo evitando errores de producción. Garantiza la mejor experiencia para tus usuarios y sé un DevOps profesional.

Tomé el Curso Avanzado de Node.js y hoy te quiero enseñar a desarrollar una aplicación sencilla con Node.js y Express y la API de Instagram.

Lo primero que necesitaremos será descarga Node.js desde su pagina oficial http://nodejs.org/, y npm (viene integrado con Node.js). Mi versión es la 8.2.1. para saber cuál es la tuya solo escribe en la terminal:

node-v

Después creamos la carpeta del proyecto, inicializamos npm e instalamos los módulos que usaremos con:

npm init
npm install express ejs instagram-node--save

Esto nos creara una package.json que se veré algo así:

{
  "name": "node-app",
  "version": "1.0.0",
  "description": "my first node app",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "node.js",
    "app"
  ],
  "author": "“jesussandrea” <“[email protected]”> (“https://jesussandrea12.github.io”)",
  "license": "MIT",
  "dependencies": {
    "ejs": "^2.5.7",
    "express": "^4.16.2",
    "instagram-node": "^0.5.8"
  }
}

Después estructuramos nuestro proyecto creando una carpeta public, donde serviremos los archivos, y una para las vistas llamada views.
La estructura del proyecto les debe quedar así:

- public/
 ----- css/ 
---------- style.css 
- views/ 
----- pages/
 ---------- index.ejs
 ----- partials/ 
---------- head.ejs 
---------- header.ejs 
---------- footer.ejs 
- package.json 
- server.js

Si notaste la rara extensión .ejs, te explico: EJS https://www.npmjs.com/package/ejs es una librería, como Pug para las vistas, que nos permitirá hacer un ciclo for dentro de HTML luego, pero primero tendremos que configurar un archivo llamado server.js.

// requerimos los paquetes instaladosconst express = require('express');
const ig = require('instagram-node').instagram();

// creamos la app con expressvar app = express();

// especificamos a node la ruta
app.use(express.static(__dirname + '/public'));

// especificamos que utilizaremos ejs como motor de vistas
app.set('view engine', 'ejs');

// creamos la ruta
app.get('/', function(req, res){

  // aquí configuraremos la app de ig con un access_token
  res.render('pages/index');
});

// especificamos el puerto
app.listen(8080);
console.log('Escuchando en el puerto 8080');

require(‘instagram-node’).instagram(). lo requiero así como lo dice en las instrucciones aquí https://www.npmjs.com/package/instagram-node

Ahora vamos a configurar los archivos para las vistas.

El primero que vamos a modificar sera views/partials/head.ejs

<metacharset="UTF-8">
<title>My First Node App!title>

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<linkrel="stylesheet"href="css/style.css">

Donde llamamos al archivo .css para los estilos y luego el cdn de bootstrap.
Seguimos con views/partials/header.ejs

<navclass="navbar navbar-inverse">
<divclass="container-fluid">
  <divclass="navbar-header">        
    <ahref="/"class="navbar-brand">
      <spanclass="glyphicon glyphicon-picture">span>
      Mis foticos de instagram XD
    a>
  div>
div>
nav>

Hasta ahora solo hemos añadido un nav con un div adentro, que luego nos servirá de header.
Seguimos con el views/partials/footer.ejs

class="text-center text-muted">
  Copyright &copy; 2017 · The Coolest Appin the World 

y por último el index.ejs

<html><head><%include ../partials/head %>
  head>
  <body><divclass="container"><header><%include ../partials/header %>
      header>

      <main>
        //configuraremos esto luego
      main>

      <footer><%include ../partials/footer %>
      footer>
    div>
  body>
html>

Notas que utilicé unos tags raros de nuevo, verdad? Así se definen los tags en EJS.
Ahora vamos a añadir unos estilos al css:

body {
  padding-top:50px;
}

footer {
  padding:50px;
}

.instagram-pic {
   position:relative;
   padding:10px;
   overflow:hidden;
}

.instagram-picimg {
  padding:5px;
  border-radius:2px;
  box-shadow:005pxrgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100%;
}

.instagram-bar {
  position:absolute;
  bottom:30px;
  width:100%;
  left:0;
  padding-left:30px;
  padding-right:30px;
  color:#FFF;
}

.instagram-barspan {
  margin-right:5px;
}

.instagram-bar.likes {
   float:left;
   color: red;
}

.instagram-bar.comments {
  float:right;
}

¡Esto va funcionando!

Llegó la hora de la verdad, aprenderemos un poco sobre la API de Instagram.
Lo primero que tenemos que hacer es obtener un access_token. Para esto tenemos que ir a http://instagram.pixelunion.net/
nos autenticamos y nos generará un string. Mantén la ventana abierta por un lado que luego la usaremos.

Ahora nos vamos a la [documentación de la API de Instagram] (https://www.instagram.com/developer/endpoints/)
para ver lo que nos devuelve. También puedes explorar la documentación un poco más.

A la derecha hay una columna que dice Endpoints y debajo Users de ahi nos interesa específicamente esto:

GET users/self/media/recent

https://api.instagram.com/v1/users/self/media/recent?access_token=[ACCESS_TOKEN]

Copiamos esta url y donde dice access_token ponemos el string raro que nos generó pixelunion.net. Lo ponemos en un nuevo tab y
y veremos un archivo de tipo json que nos devuelve. Para verlo podemos usar una herramienta llamada postman o simplemente la consola de chrome.

De aquí solo nos interesan los comentarios, likes, imágenes y usuario.

Recomiendo leer los terminos y condiciones de la API, porque hay aplicaciones que han crecido bastante y luego las banean porque infringen las reglas, como por ejemplo aquellas que participan en intercambios de likes, comments or followers.

De vuelta a nuestra app, en el archivo server.js añadimos lo siguiente:

// requerimos los paquetes instaladosconst express = require('express');
const ig = require('instagram-node').instagram();

// creamos la app con expressvar app = express();

// especificamos a node la ruta
app.use(express.static(__dirname + '/public'));

// especificamos que utilizaremos ejs como motor de vistas
app.set('view engine', 'ejs');

// creamos la ruta
app.get('/', function(req, res){

  ig.user_self_media_recent(function(err, medias, pagination, remaining, limit){
     // render the home page and pass in the popular images
     res.render('pages/index', { grams: medias });
  });
});

// configure instagram app with your access_token
ig.use({
  access_token: 'YOUR_ACCESS_TOKEN',
});

// especificamos el puerto
app.listen(8080);
console.log('Escuchando en el puerto 8080');

Ya para finalizar solo modificamos el index.ejs
¿Se acuerdan donde les dije que íbamos a crear un ciclo for? Lo añadimos dentro del main.

<divclass="row">
  <% grams.forEach(function(gram) { %>
    <divclass="instagram-pic col-sm-3">
      <ahref="<%= gram.link%>"target="_blank">
        <imgsrc="<%= gram.images.standard_resolution.url %>"class="imgresponsive">
      a>
    <divclass="instagram-bar">
      <divclass="likes">
        <spanclass="glyphicon glyphicon-heart">span>
        <%= gram.likes.count %>div>
    <divclass="comments">
      <spanclass="glyphicon glyphicon-comment">span>
      <%= gram.comments.count %>div>
  div>
div>
<% }); %>div>

El momento de la verdad: ejecutamos node server.js en la terminal y abrimos el puerto 8080 en el browser.
Si quieren modificar el servidor sin tener que ejecutar una y otra vez node server.js les recomiendo que se instalen nodemon i -g y luego ejecutan nodemon server.js esto les vigilará los cambios y se reiniciará automáticamente.

Debe quedar algo así:

resultado

Hemos finalizado el tutorial. Si no te ha quedado claro algo solo pregúntame y cuéntame qué tal te pareció en la sección de comentarios.

Te dejamos por acá cómo hacer Debugging de una App Node.js en Docker, para que seas todo un profesional.

Curso Profesional de DevOps
Curso Profesional de DevOps

Curso Profesional de DevOps

Acelera los procesos de desarrollo en tu empresa usando testing automáticos para tus nuevos features. Automatiza el flujo de trabajo evitando errores de producción. Garantiza la mejor experiencia para tus usuarios y sé un DevOps profesional.
Jesus
Jesus
jesussandrea12

22372Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
16Puntos

Sorprendente lo que hiciste!!! Debo reconocer que haces un buen trabajo, felicidades

1
15628Puntos

Está increíble este tutorial Jesús. Gracias por tu aporte 😃

1
7442Puntos

Bravazo!,
Tambien espero aprender a hacer las conexiones a API’s en el curso.
Te quego genial, felicidades

1
2688Puntos

Super, esta chevere este post con uno de los usos de ejs template y node.

una cosa que vi en el source code no se por que en algunos post se a perdido el arrow initial de los tags html “<” , esto puede hacer confundir algunos de los lectores, de resto como lo mencione antes esta super !!

1

como podrías solicitar el pie de foto(lo que uno escribe de comentario al subir una foto) para luego mostrarlo bajo cada foto