31

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

21884Puntos

hace 3 años

Curso Avanzado de Node.js
Curso Avanzado de Node.js

Curso Avanzado de Node.js

Aprende Node.js a fondo, crea una aplicación de Internet de las Cosas (IoT) utilizando protocolos de tiempo real livianos (MQTT) y WebSockets, integra tus aplicaciones con bases de datos relacionales y crea aplicaciones en tiempo real.

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.

Curso Avanzado de Node.js
Curso Avanzado de Node.js

Curso Avanzado de Node.js

Aprende Node.js a fondo, crea una aplicación de Internet de las Cosas (IoT) utilizando protocolos de tiempo real livianos (MQTT) y WebSockets, integra tus aplicaciones con bases de datos relacionales y crea aplicaciones en tiempo real.
Jesus
Jesus
@jesussandrea12

21884Puntos

hace 3 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
15317Puntos

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

1
5894Puntos

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

1
2609Puntos

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