Denna uppgift handlar om att bygga en receptapp som tillåter användaren att söka på recept och filtera resultat och (för VG) spara recept som man gillar i olika listor. Både backend och frontend av applikationen ska deployas och kopplas ihop så att de fungerar tillsammans.
I denna uppgift ska ni bekanta er med RecipeAPI, ett projekt skrivet i PHP/Laravel.
Bekanta er genom att läsa igenom koden, få igång programmet med bland annat migrationer, seeding och serving.
Några steg:
- Kör igång devcontainern och gå sedan in i terminalen och cd in i rätt mapp.
- Kör
composer update - Ändra .env.example filen till .env
- Kör
php artisan key:generate - Kör
php artisan migrate(skapa databasen) - Kör
php artisan db:seed - Kör
php artisan serve
Testa sedan de olika requesten du får tillgång till genom att importera filen: "Insomnia_U06_requests.json" till er Insomnia klient. Ni kan behöva registrera till Insomnia (t.ex. med Github kontot) för att kunna importera en fil.
När ni testar API:et kommer ni att behöva plocka ut de bearer tokens ni får vid inlogg eller registrering och klistra in i Bearer fältet för att kunna få åtkomst till de API vägar som ligger bakom authentication.
När ni fått backenden att fungera och ni känner att ni grundläggande förstår er på koden så behöver ni inte göra något mer här vid detta tillfälle. Låt appen ligga och köra i bakgrunden med php artisan serve och fokusera nu istället på att bygga er frontend.
Ni ska nu fokusera på att skapa en frontend i Angular (utanför er devcontainer, t.ex. i ett annat VSCode fönster) som ska låta er söka efter och filtrera olika recept med hjälp av ett externt API såsom edaman API eller spoonacular API (ni kommer att behöva registrera er för att få tillgång till API:et).
Ni ska också koppla ihop erat frontend med RecipeAPI backenden. Skapa en sida för den inloggade användaren och tillåt användaren att logga in och logga ut.
När frontenden är färdig ska ni deploya både frontend (på e.g. netlify) och backend (på e.g. Vercel eller Render). Väl i produktion ska dessa kopplas ihop så att de fungerar harmoniskt tillsammans.
För att få VG på den här uppgiften så ska ni utöka programmet så att användare kan spara recept de gillar i olika listor. T.ex. kanske en användare vill ha en lista för bbq, en för soppor och en lista för vegansk mat. Ni ska då lägga till nödvändiga delar för att åstadkomma detta i backend och frontend inklusive controllers och routes i backend, och extra komponenter, vyer och services i frontend (samt ändringar i tidigare delar där det behövs). Backend programmet är säkert inte heller perfekt, förbättringar för gärna läggas in där också om ni hittar några.
Ännu fler extra detaljer får gärna läggas till i mån av tid och för att helt försäkra sitt VG, t.ex. förbättringar i redan existerande kod, ett snyggt UX/UI samt kopplingar till fler API:er.
Mer info går att hitta i uppgiftsbeksrivningen i Canvas.
Lycka till!