api-mashup

Denna uppgift syftar till att, utifrån en grov skiss, skapa en asynkron (AJAX)-baserad sökning för Flickr-bilder. Besökaren på webbsidan ska kunna skriva in ett sökord och få upp Flickr-foton som handlar om detta.

Parallellt med sökningen ska användaren även få upp en lista med relaterade sökningar. Det ska gå att klicka på varje förslag på relaterade sökord för att då automatisk söka på dessa istället.

Inläggen från Flickr hämtas genom deras eget API och en lista med relaterade sökningar hämtas från words.bighugelabs.com/api.php.

Igen, ingen backend krävs för denna uppgift.

Här intill syns en grov skiss på hur sidan kan se ut.

Länkar

Här följer länkar till de två API:er som du ska integrera i denna labb.

• Big Huge Thesaurus: Synonyms, antonyms, and rhymes (oh my!)

• Flickr Services

Guider för att skapa API-nycklar

• Guide för att skapa nyckel på Flickr's API

• Guide för att skapa nyckel på bighugelabs.com API

Mål

• En fungerande bildsökning kombinerad med förslag på söktermer från två olika API:er

• Webbsidan skall även uppfylla följande krav

  • Fungerar i flera olika webbläsare och på flera olika typer av enheter (mobil såväl som desktop).

    • Grundläggande responsiv (ska gå att använda oavsett enhetstyp)

  • Design valfri men följande saker måste finnas med:

    • Sökresultat som bilder i en lista

    • Sidomeny eller alternativ att visa förslag på söktermer

Inlämning

Uppgiften ska lämnas in via classroom.github.com i rätt projekt, länk till detta projekt kommer annonseras av läraren i samband med projektets början.

Vänligen notera

Observera att du inte bedöms på estetik eller design. Lägg därför minimalt med tid på detta för att hinna klart i tid. Du bedöms bara på koden och implementationen av denna.

Extra utmaning

Om du har gott om tid och vill påvisa djupare förståelse och kompetens inom hur man arbetar med externa API:er kan du även bygga till några eller alla av följande funktioner:

• Användaren kan klicka på sökresultaten och då bli länkad till Flickr-bilden

• Användaren kan söka med hjälp av sin mikrofon

• Bilderna från sökresultaten visas i ett "masonry", alltså en slags bildvägg (se exempel nedan) som är responsivt.

Betygsättning

Den här inlämningen ger underlag för följande kursmål. Där inlämningen helt motsvarar och går att bedöma för de mål som står med svart text och bara delvis de som står med brun text.

• JS 1.1 JavaScript / ECMAScript

• JS 1.4 DOM-manipulation

• JS 1.7 Lexical scope

• JS 1.8 Event handling

• JS 2.1 Utveckla webblösningar med JavaScript

Utöver denna inlämning kan det även finnas fler examinationsmoment som ligger till underlag för samma kriterier.

Betygsnivåer

Icke godkänt, Godkänt och Väl godkänt

Godkänd

För att nå Godkänd som betyg på denna inlämning ska du:

• Den studerande kan tillämpa och utveckla enklare lösningar med ett eller flera externa API:er. Den studerande ska även kunna utveckla/integrera asynkront mot API:er i programmeringsspråket JavaScript med gott handlag.

Väl godkänd

För att få betyget väl godkänt ska du:

• Utöver kriterierna för att erhålla betyget godkänd ska den studerande med mycket gott handlag, utan ytterligare instruktioner från utbildare, kunna vidareutveckla sin lösning på uppgiften och täcka upp en eller flera av de olika extra utmaningskraven.

Förtydligande av betygskriterierna

Betygsnivåerna för samtliga mål är på G-nivå med gott handlag och på VG-nivå med mycket gott handlag. Detta innebär att lösningar/implementationer som är byggda på ett bra sätt utan större fel eller brister och att du som studerande förstår det du byggt är på en G-nivå och för en VG-nivå krävs att lösningen är i stort sätt felfri, byggd på ett bra sätt och att du som studerande förstår för och nackdelar med hur du implementerat teknikerna.

För att få betyg G på kursen ska samtliga betygskriterier för G-nivå vara uppfyllda. För betyg VG ska samtliga kriterier för VG-nivå vara uppfyllda.