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
- Skapa en tom katalog med namnet “instagram-engagement-rate”.
- Öppna din konsol, navigera till vår nya katalog och kör "npm init"
- Fyll i den information som krävs för att initiera vårt projekt.
- 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 `/`: