Hola, a continuación haremos una aplicación sencilla con node.js, express y usaremos la API de Instagram.
Todo esto sucedio mientras tenia el Internet lentísimo y no me cargaban los vídeos así que me puse a experimentar un poco y woala!
En fin, Empecemos!
Lo primero que necesitaremos por supuesto sera descargarnos node.js de su pagina oficial http://nodejs.org/ y npm (viene integrado con node.js) al momento de este tutorial mi versión es la 8.2.1. para saber la de ustedes es simple solo escribimos en la terminal:
node-vluego de esto creamos la carpeta del proyecto y inicializamos npm e instalamos los módulos que usaremos con:
npm init
npm install express ejs instagram-node--saveEsto nos creara una package.json que se vera algo asi:
{
"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
En fin adelantando un poco porque un código dice mas que mil palabras, 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 vieron la rara extencion .ejs y se están preguntando que es eso les explico: EJS https://www.npmjs.com/package/ejs es una librería como Pug para las vistas donde 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){
// aqui 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 asi como lo dice en las instrucciones aqui https://www.npmjs.com/package/instagram-node
Bueno hasta ahora todo bien, se acuerdan que hace un momento creamos unos archivos para las vistas? Bueno vamos a configurarlo.
el primero que vamos a modificar sera views/partials/head.ejs
<metacharset="UTF-8"><title>My First Node App!</title><!-- CSS --><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 servira de header.
Seguimos con el views/partials/footer.ejs
<p class="text-center text-muted">
Copyright © 2017 · The Coolest Appin the World
</p>
y por ultimo el index.ejs
<!DOCTYPE html><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>Noten que pusimos unos tag raros otra vez! Quejeso? Asi se definen los tags en EJS. o eso creo. XD
En fin ahora vamos añadiendo 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;
}
Gente tengan fe que esto va funcionando! al menos deberia.
OK, Llego la hora de la verdad, aprenderemos un poco sobre la API de instagram.
lo primero que tenemos que hacer sera obtener un access_token para esto tenemos que ir a
http://instagram.pixelunion.net/
nos autenticamos y nos generara un string, tengan la ventana abierta por un lado que luego la usaremos.
ahora nos vamos a la documentacion de la API de instagram https://www.instagram.com/developer/endpoints/
para ver lo que nos devuelve. tambien pueden explorar la documentacion un poco.
En la parte a su derecha hay una columna que dice Endpoints y debajo Users de ahi nos interesa especificamente
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 genero pixelunion.net. lo ponemos en un nuevo tab y
y veremos un archivo de tipo json que nos devuelve. Bien. para verlo podemos usar una herramienta llamada postman o simplemente la
consola de chrome
de aqui solo nos interesas los comentarios, likes, imagenes y usuario.
Recomiendo leer los terminos y condiciones e 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, commets 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 ibamos a crear un ciclo for? bueno 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 vigilara los cambios y se reiniciara automaticamente
les debe quedar algo asi!
Bueno hemos finalizado el tutorial, si no les ha quedado claro algo solo preguntenme, y pido disculpas si este tutorial tiene algunas confusiones o no explico bien las cosas pero es la primera vez que lo hago.
