Din egna vinkällare app

By . Latest revision .

Du skall med hjälp av REM api’t skapa din egna vinkällare eller liknande app. Din app skall jobba med alla fyra (4) CRUD-functions.

#Förkunskaper

Du har jobbat igenom artiklarna “Mithril och CRUD” och Ett mobilanpassad formulär.

Du har bekantat dig med REM.

#Introduktion

Din app kan vara en vinkällare, modelltåg, Lego byggsätt samling eller liknande. Välj något du tycker är roligt och som du vill ha koll på hemma.

Börja med att skapa ett cordova projekt i me/kmom04/winecellar/ och efter det ett mithril projekt i me/kmom04/winecellar/www/, precis som vi har gjort i tidigare kursmoment.

# Ställ dig i rooten av kursrepot
cd me/kmom04
cordova create winecellar se.dbwebb.winecellar WineCellar
cd winecellar
cordova platform add android --save
cordova platform add browser --save
cd www
npm init --yes
npm install mithril --save
npm install webpack --save

Lägg även till npm start scriptet, som underlätter vid utveckling och testning:

"scripts": {
    "start": "webpack js/index.js bin/app.js -d"
}

Under utveckling rekommenderar vi att ni laddar ner och kör REM api’t lokalt. Installationsintruktioner för att installera och köra REM api’t lokalt.

För att appen kan hämta från och skicka data till rem-rest-api.herokuapp.com måste du lägga till urlen i Content-Security-Policy.

När du gör dina anrop mot REM api’t måste du ha med attributet withCredentials: true i din m.request funktion. Detta för att REM api’t använder cookies för att hålla koll på dig som användare. Detta gör att det bara är du som kommer åt datat du sparar via api’t.

#Krav

  1. Din app skall innehålla en listning av dina objekt.

  2. När man klickar på ett objekt skall man komma till en vy, som visar upp objektet.

  3. Varje objekt skall ha minst tre (3) attribut. Ex. Vinets namn, druva och årgång.

  4. Man skall kunna skapa och redigera objekt, använd samma formulär för både skapa och redigera.

  5. Ditt formulär skall vara anpassat för mobilen.

  6. Man skall som användare få visuell feedback när man sparar sina objekt.

  7. Man skall kunna ta bort objekt.

  8. Skapa ett utseende, som passar till dina valda objekt.

  9. Din me-app skall kunna köras med cordova både i browsern och i en android emulator.

  10. Validera och publicera din kod enligt följande.

# Ställ dig i kurskatalogen
dbwebb validate winecellar
dbwebb publish winecellar

Rätta eventuella fel som dyker upp och publicera igen. När det ser grönt ut så är du klar.

#Extrauppgift

Lägg till så man kan ha flera av samma objekt, bara om antalet blir 0 tas objektet bort helt och hållet.

#Tips från coachen

Validera och publicera ofta. Så slipper du en massa validerings- och publiceringsfel i slutet av övningen.

När du gör publish så körs även validate. Blir det för mycket fel när du kör publish så kan det bli enklare att bara göra validate till att börja med.

Lycka till och hojta till i forumet om du behöver hjälp!

#Revision history

  • 2017-03-14: (A, efo) Första utgåvan i samband med kursen webapp v2.

Document source.

Category: webbprogrammering.