
In this tutorial, I will walk you through the process of creating a Node.js web application that will print and mail a 4x4 Instagram photo. The web application will allow a user to log in to their Instagram account, randomly choose a recent photo from their Feed, and then provide a shipping address to mail the photo.
View Demo
The app will be written in Node.js and will use the very popular Express.js Framework. We will be starting with a blank project, and by the end will have a fully functioning web application.
We will be using two main APIs to build this application. The Instagram API, which will allow us to log in to an Instagram account and select images from a user’s recent feed, and the Lob Print & Mail API, which will handle the printing and shipping of our 4x4 Instagram photos.
NOTE: This whole project is available in a public repository on GitHub. I suggest downloading it first and taking a look at the code before continuing the tutorial.
The Main Pieces
- Express.js — Express is one of the most popular Node.js frameworks and will act as our web server.
- Instagram Node Module — We will use a popular Instagram Node moduleTrack this Framework/Library to access the Instagram API.
- Lob Print API — Lob provides a suite of APIs for printing and mailing. We will use their Node LibraryTrack this Framework/Library and the Photo APITrack this API to print and mail a single 4x4 Instagram photo to ourselves. Make sure to look at the docs for more options on photo sizes.
Prerequisites
You will need the following before you can start this tutorial:
- A basic understanding of Node.js and JavaScript.
- A basic understanding of how JavaScript Promises work. If you haven’t used them before don’t worry, here’s a quick guide.
- NPM and Node.js installed.
- A Lob API Key.
- A registered Instagram Developer account.
Instagram Registration
In order to use the Instagram API, you need to first register your application at the developer center. Once you have registered your application, they will provide you with a client_id and a client_secret, which we will need later.
Part of the registration form will ask for a redirect_uri. This is where the user will be redirected after they successfully sign into their Instagram account. For now, set this value to http://localhost:3000/
Lob Registration
Sign up for a free Lob account by visiting the registration page. Once registered, you can find your Test API Key on the settings page. The Test API Key works the same as the Live, but no mail is actually printed or shipped until you use your Live API Key.
Create Project
If you already have an express.js project setup you can skip the the next section. If not, open up a terminal and let’s get started.
mkdir instagram && cd instagram
npm init
When you run npm init it will ask you a bunch of questions; just press enter for all of them except when it asks you for entry point: (index.js); set that to app.js.
Install Dependencies
npm i express --save
npm i bluebird --save
npm i body-parser --save
npm i cookie-parser --save
npm i instagram-node --save
npm i jade --save
npm i lob --save
These are all the node modules we will be using to create the Instagram photo printing app.
Create Server
Create a file called app.js file in the root directory of your project.
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var instagram = require('./instagram');
var app = express();
/* App Setup */
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(bodyParser.urlencoded( { extended: false }));
app.use(cookieParser());
/* Include our Instagram Module */
app.use('/', instagram);
app.set('port', process.env.PORT || 3000);
var server = app.listen(app.get('port'), Function() {
console.log('Express server listening on port ' + server.address().port);
});
module.exports = app;
Notice we are telling the app to run on port 3000. This matches up with the redirect URL you submitted when registering your Instagram app.
Template Files
Create a folder called views in the root directory of your project, next to the app.js file. This is where we will place the following Jade template files. If you haven’t used Jade before it’s a pretty simple templating engine that comes by default with Express.js. Learn more here.
We are also using Bootstrap to provide basic styling and layout for the application. Check out the Bootstrap website for more information on the CSS classes we are using in the template files.
layout.jade
Create a file called layout.jade with the following code. This is the basic HTML structure for our app.
doctype html
html
head
title Instagram Photo Printer
link(rel='stylesheet', href='https://maxcdn. bootstrapcdn.com/bootstrap/3. 3.5/css/bootstrap.min.css')
body
nav.navbar.navbar-inverse. navbar-static-top
div.navbar-header
a.navbar-brand(href="/") Instagram Photo Printer
div. Container
block content
index.jade
Create a file called index.jade inside the views folder with the following code. Notice that we are using a template variable called showLogin. If this is true, we are going to show the user a button so that they can log in to their Instagram account. Otherwise, we will show them a random picture from their account and shipping form for their Instagram photo.
Don’t worry too much about this right now. It will make more sense once we start writing code.
extends layout
block content
if showLogin
div.row
div.col-md-12.text-center
h1 Instagram Photo Printer
p Before you can print and mail a photo, you need to authorize your Instagram account.
a(href="/authorize-user" class="btn btn-primary") Login to Instagram
else
div.row
div.col-md-6
img(src= image, width="250px")
div
br
a.btn.btn-default(href="/") Random Photo
div.col-md-6
h1 Print & Mail Photo
form(action="/send-photo", method="post")
div(class="form-group col-md-12")
label Name
input(
type="text"
class="form-control"
name="name"
)
div(class="form-group col-md-12")
label Address
input(
type="text"
class="form-control"
name="address"
)
div(class="form-group col-md-4")
label City
input(
type="text"
class="form-control"
name="city"
)
div(class="form-group col-md-4")
label State
input(
type="text"
class="form-control"
name="state"
)
div(class="form-group col-md-4")
label Zip
input(
type="text"
class="form-control"
name="zip"
)
div(class="form-group col-md-12")
input(type="hidden", value=image, name="image")
button(type="submit", class="btn btn-primary") Mail Photo >
complete.jade
The last template file we will need is complete.jade, which will show a success message and a preview link once the user has successfully filled out the form. If there was an error, it will show that as well.
extends layout
block content
div.row
div.col-md-12.text-center
if error
div.alert.alert-danger
p= error
else
div.alert.alert-success
p Success! Your photo has been sent. You can see a preview here:
a(href=url, target="_blank")= url
a.btn.btn-primary(href="/") Send Another Photo