En simpel klon av onlinepizza.se. Använder sig av Ruby on Rails som JSON-API/backend och Vue.js](http://vuejs.org) som frontendramverk.
Hemsidan går att se på pizzeria-order-frontend.herokuapp.com. Backenden finns på pizzeria-order-backend.herokuapp.com.
Hemsidan låter dig att registrera ett konto och fylla i dina adressuppgifter. Sedan listar den pizzerior som den tillåter dig att beställa från. Alla beställningar lagras i databasen.
Frontenden använder sig av Vue.js. Huvuddelen av koden är uppdelad i olika Vue-moduler. Dessa finns i frontend/src/components/
. Routes för frontenden finns i frontend/src/router/index.js
. Layouten finns i frontend/src/App.vue
. Vue-modulerna innehåller både CSS, HTML och Javascript. Till skillnad från att klassiskt dela upp hela hemsidan i tre delar (CSS, HTML och Javascript) så är dessa grupperade efter syfte. All kod som har att göra med varandra finns i samma komponent. CSSen blir automatiskt scopead till den komponenten, det går därför att inte få konflikter mellan olika regler, och man kan därmed vara mindre explicit/hård i sin CSS. T.ex. behöver man inte IDn och klasser på alla element om man vet att det enbart finns en av en viss typ av HTML-element så kan man direkt skriva CSS för det elementet.
Backenden använder sig av Ruby on Rails och är skriven enligt M(V)C-struktur. Koden finns därför huvudsakligen i backend/app/controllers/
och backend/app/models/
. Den har inga direkta vyer, då dessa rendreras och skapas av frontenden. Databasstrukturen är uppbyggd av ett gäng migrationer. Schemat går att läsa i backend/app/schema.rb
. Routes för backenden finns i backend/config/routes.rb
. Backenden sköter authentikation och varje route svarar med JSON direkt i controllern.
Backendservern kräver ruby, förmodligen över version 2.2.2. Rekommenderat att installera chruby
och ruby-install
.
Frontendservern kräver node.js och npm, helst över version 3.0.
För att starta den så gör du enkelt nog:
$ cd backend
$ bundle install
$ rake db:create
$ rake db:migrate
$ rake db:seed
$ rails s
Sedan startar du frontendservern genom:
$ cd frontend
$ npm install
$ npm run dev