Skip to content

Latest commit

 

History

History
93 lines (59 loc) · 5.91 KB

assignment_ajax.md

File metadata and controls

93 lines (59 loc) · 5.91 KB

AJAX Assignment - Open APIs 📡

JavaScript Logo

De flesta applikationer och hemsidor på webben idag är dynamiska och hämtar data från olika servrar kopplade till speciella tjänster. Sättet vi kommer åt informationen är oftast via ett API (Application Programmable Interface). Detta brukar oftast vara ett ReST API som levererar json-data. Vi har tidigare använt t.ex. json-server för att skapa vårt eget API men nu ska vi hantera data via AJAX från ett API som tillhör någon annan.

Uppgift 📝

Du ska skapa en applikation som hämtar data från ett eller flera öppna APIs och visar upp denna data på en html-sida. Vilken data du hämtar och hur den visas upp är upp till dig och baserat på vilket/vilka APIer du väljer. Exempel på vilka API:er du kan använda till uppgiften finns i listan nedan.

Du får använda antingen vanillaJS eller jQuery för att lösa uppgiften. Om du vill använda någon annan teknologi/bibliotek/ramverk så går nog det bra bara du kollar av med mig innan du börjar använda det. Huvudfokusen för denna uppgift ska vara att hämta och hantera information asynkront via AJAX.

Du får använda jQuerys $.ajax()-metod, fetch eller XMLHttpRequest för att hämta informationen från ett öppet API. Vilken metod för att hämta hem data är upp till er bara den hämtas via AJAX och laddas in dynamiskt.

Du får även använda ett css-ramverk som t.ex. Bootstrap för att strukturera upp själva sidan.

Se till att ha ett tydligt mål med vad du ska bygga innan du sätter igång. Gör upp en lista över vilken funktionalitet som ska finnas, hur det ska se ut etc. (tänk på hur ni jobbade under HTML/CSS-kursen). Lägg tid på förarbetet.

Listor på APIer att använda

Mål med uppgiften 🎯

Målet med uppgiften är att få en bättre översyn över hur AJAX och asynkront JavaScript fungerar. API-hantering är en stor del av frontendyrket och därför är det viktigt att ha god förståelse över hur asynkrona anrop via AJAX hanteras i JavaScript oberoende av vilken metod eller funktion man använder för att hantera anropen.

Krav för G

Koden:
  • Hämtar data från ett eller flera öppna APIer som serverar data i form av json.
    • Du ska göra flera olika anrop till APIet och inte bara 1 simpel get-request till APIet och visa upp resultatet.
  • Visar upp hämtade data på ett strukturerat sätt i html.
  • God kodstruktur där du använder namespaces och tydligt separerar delarna av din kod logiskt. (T.ex. använde ett Design Pattern så som föregående uppgift)
  • Du genomför projektet självständigt och skriver all kod själv samt att du förväntas kunna berätta om all din kod och visa att du behärskar det du skrivit.
  • Du uppvisar god förståelse för AJAX och asynkron kommunikation och hur man jobbar asynkront i JavaScript.
  • Du error-hanterar dina anrop och all eventuell input från input-fält. Använder t.ex. error-function i $.ajax()-anrop etc.
  • Du använder semantisk och tydligt strukturerad HTML5 och har en responsiv design. (Förslagsvis löses den responsiva delen enkelt med ett css-ramverk)
  • Din html, css och js är:
    • Fungerande
    • Korrekt indenterad
    • Väl strukturerad och lättläst
    • Kommenterad efter behov (t.ex. vid mer svårlästa funktioner så ska kodflödet kommenteras)
  • Projektet versionshanteras både lokalt och via GitHub
Projektet:
  • Din kod ska finnas på GitHub och ha en tydlig README med följande information:
    • ditt namn, kurs och utbildning
    • länk till projektet live
    • kort beskrivning av applikationen, dess syfte och funktionalitet.
    • punktlista med vilka teknologier du använt.
    • kort beskrivning av det API/APIer du använt samt länk till dem.
    • kortfattat om din arbetsprocess och vad som skulle kodmässigt kunna förbättras. Man kan t.ex. ha en "TODO"-sektion i ens README med saker som skulle kunna implementeras om tid fanns.
  • Projektet ska kännas som en färdig produkt

Markdown Cheat Sheet för att skriva README

Krav för VG

  • Användaren kan på något sätt styra över vilken information som hämtas, d.v.s. någon form av urval finns som exempelvis ett sökfält, kategorier eller liknande som man kan filtera innehållet via. Vid filtering ska ett nytt AJAX-anrop skickas till APIet/APIerna med sökning eller filtreringskriterierna.
  • Ditt gränssnitt är tydligt gentemot användaren när data laddas och när data är färdigladdat från servern. T.ex. har en loading-indikator som indikerar när information laddas in.
  • Uppvisar kunskap om context samt scope och hur synkrona och asynkrona funktioner exekveras i relation till context och scope.

Presentation av kod 🔈

Ni presenterar projektet live för läraren på sista lektionstillfället. Ett presentationsschema kommer att läggas upp på GitHub, Studentportalen och i Slacken när vi närmar oss presentationstillfället.

Då ska du visa hur applikationen fungerar

  • Demo av applikationen
  • Visa och förklara de viktigaste delarna av din applikation
  • Var beredd på att få frågor på hur du har kodat

Inlämning av kod

Betyg: G/VG

Sista inlämningsdag: 31/3 kl. 23.55

Lämnas in på studentportalen under: Inlämningsuppgift 2: AJAX

Lämnas in enligt följande namnmönster och följande format:

fornamn_efternamn_ajax.zip