Översikt

Nu kan vi kosta på oss att fila på detaljer och titta på lite spännande verktyg som en webbutvecklare behöver ha i verktygslådan!

Händer i veckan

Då har vi en dubbelvecka som fokuserar på aspekter av realtid i webbapplikationer. Det handlar om WebSockets och webhooks. Vi har tre föreläsningar som hjälper oss med exempel och bakgrund till realtid i webben.

Börja med den allmänna föreläsningen om “Realtidsapplikationer”. Den ger bakgrunden.

Fortsätt sedan med föreläsningen och exempelkoden för “Exempel - Just Task It featuring WebSocket” som ger grunderna i WebSocket på serversidan. Avsluta därefter med föreläsningen och exempelkoden för “Exempel - Just Task It featuring Webhook and WebSocket” som visar vad webhooks innebär.

Börja redan nu titta på vad B2 innebär. Kanske är det så att du behöver ett exempel att utgå ifrån, innan du ger dig på att koda B2.

“Stå-upp”-vlogg

Tidigare års “stå-upp”-vlogg för er som vill ha en introduktion till kursveckan.

Video

2024-02-06 28:24

Sammanfattning

Inspelningen gäller 1DV026:s kursvecka 14-15.

Inspelningen är från 2024

Datum och deadlines som nämns i inspelningen gäller kursomgången 2024, och servern kallas där CSCloud, som sedan dess har ersatts av Cumulus. Aktuella deadlines hittar du på B1:s sida och B2:s sida.

Deadline och muntlig examination för B1

Veckan inleds med deadline för CRUD-applikationen B1, klockan 17.00. Före dess ska du både ha skapat din Merge Request och bokat en tid för den muntliga examinationen på Moodle. Finns det inga lediga tider kvar, skicka ett direktmeddelande till kursledningen före deadline, så ordnas en tid. Vid den muntliga examinationen ställs förberedda frågor, och du presenterar delar av din applikation. Kursledningen hinner inte gå igenom all kod, utan fokuserar på vissa avsnitt.

Det första steget kring lösenord är att veta att de ska hashas, inte krypteras. Att bygga inloggning själv på rätt sätt är svårt, och professionellt används ofta tjänster för Identity as a Service. I den här kursen skrivs dock allt från grunden.

Återkoppling på webbskrapan A2

Många har i sina reflektioner kommit fram till att A2 inte främst handlade om att skriva en skrapa, utan om att förstå HTTP: förfrågningar och svar, statuskoder och hur cookies fungerar. Koden var i år generellt välorganiserad. Några återkommande iakttagelser:

• Hårdkoda med omdöme. Det är rimligt att anta att biografen visar filmer fredag till söndag, men filmtitlar, antal filmer och tider ändras naturligt och måste skrapas. Hårdkodade filmtitlar är den vanligaste orsaken till komplettering.
• Parallellt eller sekventiellt. Att skrapa kalendrarna parallellt med flera fetch-anrop och Promise.all är en snygg konstruktion, men med tre kalendrar är skillnaden knappt mätbar. Med hundratals sidor hade det spelat roll.
• Checka inte in node_modules. Det gör kodgranskningen omöjlig, eftersom varje rad i paketen räknas som en ändring i Merge Requesten. Lägg till en .gitignore innan första commit. Har mappen redan hamnat i versionshanteringen räcker det inte att lägga till den i .gitignore i efterhand, utan den måste också tas bort ur versionshanteringen, till exempel med git rm -r --cached node_modules.
• Välskrivna CSS-selektorer gör skrapandet mycket enklare, eftersom de pekar ut exakt det man vill ha.

Felsöka driftsättningen

Det mesta som dyker upp på handledningarna rör driftsättning. Felet kan sitta i Express-applikationen, i klienten eller i nginx däremellan. Fungerar applikationen lokalt är den sällan det första stället att leta. Börja med miljövariablerna och därefter nginx-konfigurationen, till exempel ett snedstreck som fattas i proxy_pass.

• 502 Bad Gateway betyder att nginx fungerar men inte når applikationen. Antingen är portnumret fel, eller så startar inte applikationen, till exempel för att den inte kan ansluta till databasen. Använd PM2:s loggar: kör pm2 monit i ett terminalfönster och starta applikationen i ett annat, så ser du direkt om anslutningen till MongoDB misslyckas.
• 404 – titta på hur sidan ser ut. Kommer den från din applikation har den startat, och felet ligger troligen i routingen, oftast i BASE_URL. Kommer den från nginx ligger felet i nginx-konfigurationen.

Realtidsapplikationer

Kursblock 14-15 handlar om realtid: hur data når applikationen utan att klienten själv frågar. Klientsidan av WebSockets känner du redan till. Nu är det serversidan, och dessutom webhooks, som är vanliga när servrar ska meddela varandra om händelser. Efter en kort introduktion följer två exempel som bygger på Just Task It. Exemplen bygger på en variant med mer avancerad loggning, vilket förklarar att koden ibland kan se lite annorlunda ut.

Examinationsuppgiften B2 brukar inte upplevas som alltför tung, eftersom exemplen hjälper till mycket. Det nya är kopplingen till GitLab: applikationen hämtar issues via GitLab-API:t och tar emot händelser via en webhook. B2 ska också driftsättas, men det går till på samma sätt som för B1, bara med en annan URL.

Exempelinspelningarna använder Socket.IO, medan exempelkoden numera använder webbläsarens inbyggda WebSocket. Socket.IO är ett omslag runt WebSocket. Med standard-API:t slipper man tänka på hur Socket.IO-klienten laddas, men i gengäld får man hitta på ett eget litet protokoll för meddelandena. Båda är enkla att använda, och vilket du väljer är upp till dig.

Kursledningens tips inför veckorna

Boka din muntliga examination för B1 i tid. Titta sedan på introduktionen till realtid och de två exemplen, och läs igenom B2 för att välja ett exempel att utgå ifrån.

Stödjande inspelningar

Realtidsapplikationer

2022-02-07 32:50 · Presentation

• Introduktion
• Innehåll
• Definition av realtidswebbapplikationer
• Vilken typ av applikationer är det?
• Ett paradigmskifte?
• Tekniker för realtidswebbapplikationer
• Problemet med HTTP-protokollet
• Historik
• HTML och JavaScript
• XHR Long Polling
• XHR Streaming
• WebSockets
• Utmaningar med WebSockets

Exempel - Just Task It featuring WebSocket

2022-02-02 41:22

GitLab-projekt - Just Task It featuring WebSocket

Exempelkoden har uppdaterats sedan inspelningarna

Båda exempelinspelningarna visar versioner av exemplen som använder biblioteket Socket.IO. Sedan hösten 2023 använder exemplen i stället paketet ws på servern och webbläsarens inbyggda WebSocket-API på klienten. Principerna är desamma, men koden i GitLab-projekten ser inte exakt ut som i inspelningarna. Utgå från koden i projekten.

Exempel - Just Task It featuring Webhook and WebSocket

2022-02-02 40:18

GitLab-projekt - Just Task It featuring Webhook and WebSocket

Handledning

Skicka gärna in frågor på förhand via vårt formulär som du når här:

• Frågor inför handledning

Muntlig examination B1 - CRUD

Denna vecka är det deadline och muntlig examination av examinationsuppgift B1. Detaljer kring detta hittar du här.

Studiefrågor

Här är ett antal frågor som du kan försöka besvara och diskutera tillsammans med din Ai-kompis. Tveka inte att lyfta någon av frågorna till handledningen för att fortsätta diskussionen med lärare och studiekamrater.

Frågor att diskutera med din Ai-kompis

1. Förklara om hur man implementerar WebSockets på serversidan i Express.
2. Vad är skillnaden mellan ws och Socket.IO?
3. Förklara vad webhooks innebär och vad det används till.
4. Förklara vad tjänsten ngrok kan hjälpa mig med när jag utvecklar webhooks.

Här är en utskrift från hur det såg ut när jag diskuterade ovan frågor med min Ai-kompis Ajj.

Tips

Här följer tips till hur du kan prioritera bland kursmaterialet för att komma igång med veckan.

1. Titta igenom de föreläsningar som finns, börja med en snabb överblick av alla tre.
2. Gå sedan till B2 och läs på vad det handlar om.
3. Försäkra dig om att du kan starta exempelkoden för de båda exemplen med “Just Task It…”. Analysera koden.
4. Välj ett exempelprogram att utgå ifrån för att börja snickra på din B2.