Beräkna engagemangsgraden för Instagram-inlägg med Node.js + Instagram Web API

Avskrivet: Detta API inaktiverat av Instagram (12 april 2018)

Lär dig att bygga en webbapp där användare kan skriva in ett användarnamn och få engagemangsgrad på Instagram-inlägg.

Förprojektuppsättning

Node.js: Besök den officiella Node.js webbplats för att ladda ner och installera Node.

Projektinställning

Innan vi börjar kan alla koder för detta projekt hittas i GitHub Repo

  1. Skapa en tom katalog med namnet “instagram-engagement-rate”.
  2. Öppna din konsol, navigera till vår nya katalog och kör "npm init"
  3. Fyll i den information som krävs för att initiera vårt projekt.
  4. Inom vår "instagram-engagement-rate" -katalog, skapa en fil med namnet "app.js" - den här filen kommer att innehålla koden för vår applikation.

Nu när vi har alla pusselbitar kan vi börja bygga!

Skapa vår server (med Express JS)

Det första vi behöver göra är att få vår server igång. Vi kommer att använda Express för att uppnå detta. Express är en minimalistisk webbram för Node.js - Express gör det mycket enkelt att skapa och driva en webbserver med Node.

För att använda express, installera det i konsolen:

npm installera express - spara

När installationen är installerad kommer vi att kopiera start-appen för panneplatta från Express-dokumentationen:

const express = kräva ('express'); const app = express ();
app.get ('/', funktion (req, res) {res.send ('Hello World!');});
app.listen (3000, function () {console.log ('Exempel på app lyssnar på port 3000!');});

Ovan är ett exempel på den enklaste applikationen som vi kan skapa med Express. Först kräver vi expresspaketet som just installerades. Sedan skapar vi en instans med namnet app genom att åberopa Express.

"App.get ('/' ..." betyder att vi specifikt fokuserar på root-URL: n (). Om vi ​​besöker root-URL: n svarar Express med "Hello World!".

"App.listen (..." visar att vi skapar en server som lyssnar på port 3000 för anslutningar.

Vi kan testa vår server genom att köra:

node app.js // Exempel på app som lyssnar på port 3000!

Öppna nu din webbläsare och besök: `localhost: 3000` och du bör se Hello World!

Ställa in indexvyn

I stället för att svara med text när någon besöker vår rotväg, vill vi svara med en HTML-fil. För detta kommer vi att använda EJS (Embedded JavaScript). EJS är ett mallspråk.

För att kunna använda EJS i Express måste vi konfigurera vår mallmotor:

Med en mallmotor kan du använda statiska mallfiler i din applikation. Under körtid ersätter mallmotorn variabler i en mallfil med faktiska värden och omvandlar mallen till en HTML-fil som skickas till klienten. Detta tillvägagångssätt gör det lättare att designa en HTML-sida. Den korta versionen är att EJS tillåter oss att interagera med variabler och sedan dynamiskt skapa vår HTML baserad på dessa variabler! (Detta kommer att vara mycket mer meningsfullt senare i handledning)

Först installerar vi ej i terminalen:

npm installera ej - spara

Vi kan sedan ställa in vår mallmotor med den här kodraden (precis under våra obligatoriska uttalanden) i vår app.js-fil:

app.set ('visa motor', 'ejs');

EJS har som standard åtkomst i katalogen "vyer". Så skapa en ny mapp med namnet “vyer” i din katalog. Lägg till en fil med namnet “index.ejs” i den “vyer” -mappen. Tänk på vår "index.ejs" -fil som en HTML-fil för nu.

Riktigt snabbt, här är hur vår filstruktur borde se ut hittills:

| - instagram-engagemangsgrad | - vyer | - index.ejs | - package.json | - app.js

Fantastiskt, här är en pannplatta för vår index.ejs-fil. Jag tänker inte gå igenom den här filen eftersom det inte är en HTML-tutorial, men det borde vara ganska rakt fram eftersom vi inte använder någon EJS ännu. HTML är bara ett formulär med en inmatning för ett Instagram-användarnamn och en skicka-knapp:

Instagram engagemangsgrad  

När du har kopierat ovanstående kod till din index.ejs-fil är du nästan klar! Det sista vi behöver göra är att ersätta vår app.get-kod:

app.get ('/', funktion (req, res) {// OLD CODE res.send ('Hello World!')})

Ovan är den gamla koden där vi skickar texten "Hello World!" till klienten. Istället vill vi skicka vår index.ejs-fil:

app.get ('/', funktion (req, res) {// NEW CODE res.render ('index');})

Istället för att använda "res.send", använder vi "res.render" när vi arbetar med ett mallspråk. "res.render" kommer att visa vår syn och skicka sedan motsvarande HTML till klienten.

Vid denna tidpunkt kan vi testa igen genom att köra:

node app.js // Exempel på app som lyssnar på port 3000!

Öppna nu din webbläsare och besök: `localhost: 3000` och du bör se vår index.ejs-fil visas!

Lägga till en CSS-fil

Dina kommer att se lite mindre "vackra" ut än mina. Det beror på att jag använder en css-fil för att utforma min HTML. Så här får vi vårt CSS att fungera:

Du måste lägga till en ny mapp till vårt projekt som heter "offentligt". Skapa en css-mapp i den mappen och skapa slutligen en fil med namnet “style.css”. Här är din nya filstruktur:

| - instagram-engagement-rate | - visningar | - index.ejs | - offentligt | - css | - style.css | - package.json | - app.js

Express tillåter inte åtkomst till denna fil som standard, så vi måste avslöja den med följande kodrad:

app.use (express.static ( 'allmänheten'));

Den här koden ger oss tillgång till alla statiska filer i den "offentliga" mappen.

Slutligen behöver vi vår CSS. Eftersom detta inte är en CSS-kurs kommer jag inte att gå igenom detaljerna, men om du vill använda min CSS kan du kopiera den härifrån.

Ställa in vår POST-rutt

Nu ska din app.js-fil se ut så här:

const express = kräva ('express'); const app = express ();
app.use (express.static ( 'allmänheten')); app.set ('visa motor', 'ejs');
app.get ('/', funktion (req, res) {res.render ('index');}) app.listen (3000, function () {console.log ('Exempel på app som lyssnar på port 3000!') })

Vi har en get-rutt och sedan skapar vi vår server. Men för att vår ansökan ska fungera behöver vi också en postväg. Om du tittar på vår "index.ejs" -fil kan du se att vårt formulär skickar en inläggsförfrågan till rutten `/`:

Nu när vi vet var vårt formulär publicerar kan vi ställa in rutten! En postbegäran ser ut som en begäran om få, med en mindre ändring:

app.post ('/', funktion (req, res) {res.render ('index');})

Men istället för att bara svara med samma html-mall, kan du också komma åt användarnamnet som användaren skrev in. För detta måste vi använda ett Express Middleware.

Express är en minimalistisk ram. Vi kan dock använda Middleware (funktioner som har tillgång till req- och res-organ) för att förforma mer avancerade uppgifter.

Vi kommer att använda "body-parser" middleware. "body-parser" tillåter oss att använda de nyckelvärdespar som är lagrade på objektet "req-body". I det här fallet kan vi komma åt det användarnamn som användaren skrev in på klientsidan.

För att använda "body-parser" måste vi installera den först:

npm installera body-parser - spara

När den har installerats kan vi kräva det och sedan använda vårt mellanprogram med följande kodrad i vår app.js

const bodyParser = kräva ('body-parser'); // ... // ... app.use (bodyParser.urlencoded ({utökat: true}));

För projektets omfattning är det inte nödvändigt att du förstår exakt hur den kodraden fungerar. Vet bara att vi kan använda objektet "req.body" genom att använda "body-parser".

Slutligen kan vi nu uppdatera vår inläggsförfrågan för att logga värdet "användarnamn" till konsolen.

app.post ('/', funktion (req, res) {res.render ('index'); console.log (req.body.username);})

Låt oss testa det!

node app.js // Exempel på app som lyssnar på port 3000!

Öppna nu din webbläsare och besök: `localhost: 3000`, skriv ett stadnamn i fältet och tryck på enter!

Om du går tillbaka till kommandotolken ska du se användarnamnet som visas i prompten! Fantastiskt, du har nu skickat data från klienten till servern framgångsrikt!

Om du inte kan få den att fungera är det här din app.js-fil ska se ut nu:

const express = kräva ('express'); const app = express (); const bodyParser = kräva ('body-parser');
app.use (bodyParser.urlencoded ({utökat: true})); app.use (express.static ( 'allmänheten')); app.set ('visa motor', 'ejs');
app.get ('/', funktion (req, res) {res.render ('index');})
app.post ('/', funktion (req, res) {console.log (req.body.username); res.render ('index');})
app.listen (3000, function () {console.log ('Exempel på app lyssnar på port 3000!')})

Instagram Web API

Nu är vi redo att begära till Instagram för att hämta inläggsdata. För detta använder vi Instagram Web API npm-paket, Först installera:

npm installera instagram-web-api - spara

För att spara kakor på disken med hjälp av en butikscooky.

npm installera tuff cookie-filestore2 - spara

När den har installerats kan vi kräva det i vår app.js

const Instagram = kräva ('instagram-web-api')
const FileCookieStore = kräva ('tuff-cookie-filestore2')
const {användarnamn, lösenord} = process.env // Krävs endast när inga cookies har lagrats ännu
const cookieStore = new FileCookieStore ('./ cookies.json')
const client = nytt Instagram ({användarnamn, lösenord, cookieStore})

Testat i rutt efter förfrågan:

; (async () => {vänta klient.login (); const instagram = vänta klient.getUserByU-användarnamn ({användarnamn: req.body.username}); res.send (instagram);}) ()

Efter omstart av servern och skicka ett Instagram-användarnamn ska du se JSON-svaret:

Hur beräknar jag min engagemangsgrad på Instagram per inlägg?

Det är mycket lättare än det ser ut. Säg att du har följande 2 500, ditt "engagemang" mäts utifrån dina likes och kommentarer kombinerat per inlägg, dividerat med följande.
Få en penna och papper till hands och välj ett inlägg som ska analyseras. Notera antalet kommentarer och antalet likes som det inlägget har fått. Låt oss säga att dina totala gillar var 137 och kommentarerna uppgick till 10.
137 + 10 = 147
Du måste sedan ta detta magiska nummer och dela det med dina totala följare, och gånger det med 100 (detta ger dig procenten).
147/2500 x 100 = 5,88%
Din totala engagemangsgrad för det här inlägget är 5,88%, vilket sitter smack bang i mitten av den genomsnittliga engagemangsgraden på Instagram. Vi föreslår att du håller ett kalkylblad med dina inläggstyper och engagemangsgrader så att du exakt kan mäta vad din publik svarar och vad de inte gör.
PLANN - Hur beräknar jag min engagemangsgrad på Instagram?

Enligt formel för engagemangsgrad behöver vi få kommentarer och liknande räkningar. I JSON-svaret "edge_owner_to_timeline_media> kanter" -lista över de senaste användarens inlägg.

Komplett postvägskod:

låt request_username = request.body.username; if (! request_username || request_username.length === 0) response.redirect ('/'); låt bilder = [], output = [], like_c, comments_c, engagement_rate, engagement_rate_sum = 0, engagement_rate_avg = 0, följare = 0; (async) ['count']> 0) {followers = instagram ['edge_followed_by'] ['count']; let sides = instagram ['edge_owner_to_timeline_media'] ['edge']; för (låt p i kanterna) {if (kanter. hasOwnProperty (p)) {like_c = kanter [p] ['node'] ['edge_liked_by'] ['count']; comments_c = sides [p] ['node'] ['edge_media_to_comment'] ['count']; engagement_rate = ((like_c + comments_c) / följare) * 100; engagement_rate_sum + = engagement_rate; engagement_rate = Number ((engagement_rate) .toFixed (3)); images.push ({"type": edge [p] ['node' ] ['__ typnamn'], "bildtext": kanter [p] ['nod'] ['edge_media_to_caption'] ['kanter']. längd> 0? kanter [p] ['nod'] ['edge_media_to_caption'] [ 'kanter'] [0] ['node'] ['text']: '', "engagement_rate": engagement_rate, "like": like_c, "comments": comments_c, "link": 'https: // www. instagram.com/p/ '+ edg es [p] ['node'] ['kortkod'], "miniatyrbild": kanter [p] ['node'] ['thumbnail_resources'] [1] ['src']}); }} if (images.length> 0) {engagement_rate_avg = engagement_rate_sum / images.length; engagement_rate_avg = Number ((engagement_rate_avg) .toFixed (3)); }}
output = {'full_name': instagram ['full_name'], 'username': instagram ['username'], 'link': 'https://www.instagram.com/' + instagram ['username'], ' biografi ': instagram [' biografi '],' följare ': följare,' kan_see ':! ((instagram [' is_private '] && instagram [' följd_by_viewer '] === falsk) || instagram [' has_blocked_viewer ']) , 'engagement_rate_avg': engagement_rate_avg, 'images': bilder}; respons.render ('index', {output: output}); } catch (err) {console.log (err); response.render ('index', {error: true}); }}) ();

Och för att visa svar i index.ejs:

<% if (typof error! == 'undefined' && error) {%> Fel i att hämta data från Instagram! <%} annars om (typeof output! == 'undefined') {%> <% = output.full_name || output.username%> <% = output.biografi%> Följare: <% = output.followers%> <% if (! output.can_see) {%> Det här kontot är privat eller du är blockerad av konto. <%} annars {%> Genomsnittlig engagemangsgrad: <% = output.engagement_rate_avg%>% <% output.images.forEach (funktion (bild) {%> <% = image.engagement_rate%>% <% = image.like%> <% = image.comments%> <%}); %> <%}%> <%}%>

Kör din kod

Påminnelse: all kod för detta projekt finns i GitHub Repo
node server.js
// Exempel på app lyssnar på port 3000!

Öppna nu din webbläsare och besök: `localhost: 3000`

Jag hoppas att du gillade den här artikeln ❤