App utviklet under prosjektarbeid i faget Informatikk prosjektarbeid I (IT1901). Foundly er en digital versjon av det fysiske konseptet hittegodskontor. Konseptet går ut på at om man finner noe gjenglemt, eller mister noe, kan man legge dette ut i appen med bilde og beskrivelse slik at det vil dukke opp for andre i nærheten. Dette fører da forhåpentligvis til at eier og gjenstand blir gjenforent. Appen bygger på frivilighet og ærlighet og skal være gratis for brukere.
Utviklet av: Selma Bergstrand, Lea Haug Sandberg, Peter Skaar Nordby, Simen Kristoffersen
[[TOC]]
Prosjektet, Foundly, er konfigurert som et multi-modul prosjekt med maven. Modulene utfyller en trelagsapplikasjon med et domenelag (core) , brukergrensesnitt (ui), brukergrensesnitt for web (web-klient) og persistens (JPA). Videre benytter applikasjonen seg av et tjenestelag (REST Api) for å håndtere data mellom brukergrensesnitt- og persistens-laget.
Prosjektets fire moduler tilhører pom-filen foundlyParent, og er ytteligere beskrevet i egne README-filer.
- foundly.core utgjør domenelaget, og inneholder standardiserte objekter samt. logikk for å fremstille disse objektene.
- foundly.rest-api tjenestelaget er bygget med Spring Boot og har derfor en innebygd Tomcat server. Pakkene i rest-api utgjør tjenestelaget og håndterer alle requests, mens avhengighetene utgjør REST server og persistenslaget (JPA)
- foundly.ui brukergrensesnitt bygget med JavaFx
- foundly.web-client web-klient bygget med Vue.js
Diagrammer for applikasjonens arkitektur kan sees her. Nedenfor vises et øvrig arkitekturkart for hvordan modulene i prosjektet samhandler og utveksler data.
Prosjektet er bygget på rammeverkene Spring Boot, JavaFx, Vue.js.
Spring Boot er et open source, mikroservicebasert Java-nettverk. Spring Boot-rammeverket skaper et fullstendig produksjonsklart miljø som er helt konfigurerbart ved hjelp av den forhåndsbygde koden i kodebasen. Microservice-arkitekturen gir utviklere et fullverdig program, inkludert innebygde applikasjonsservere.
Funksjon | Fordel |
---|---|
Fleksibelt | Spring Boot gir en fleksibel måte å konfigurere Java Beans, XML-konfigurasjoner og databasetransaksjoner på. |
Prossesering | Yter kraftig batchbehandling og administrerer REST-endepunkter. |
Enkel konfigurering | I Spring Boot er alt automatisk konfigurert på forhånd, og krever ingen manuelle konfigurasjoner for å virke. |
Innebygd server | Inkluderer innebygd Tomcat server som ikke krever ytteligere installasjoner for å bruke. |
JavaFX er et Java-bibliotek som forenkler utvikling av Rich Internet Applications (RIA). Applikasjoner som er skrevet ved hjelp av dette biblioteket, kan kjøres på tvers av ulike plattformer. Applikasjonene kan også kjøres på ulike enheter slik som datamaskiner, mobiltelefoner, TV-er og nettbrett.
Utvikling av brukergrensesnitt (GUI) med JavaFX krever Java AWT og Swing.
Funksjon | Fordel |
---|---|
FXML | JavaFX kan lese FXML-filer som er bygget på XML markdown, og kan bruke disse filene til å definere et brukergrensesnitt. |
Scene Builder | JavaFx tilbyr et program kalt Scene Builder, som er et drag-and-drop-grensesnitt og brukes til å utvikle FXML-filer/views. |
Innebygde brukergrensesnittkontroller | JavaFx legger opp til bruk av kontrollere for brukergrensesnitt hvilket legger opp til utvikling av et fullverdig program. |
CSS stiler | JavaFx kan lese CSS-filer og derav bruke CSS-stiler til å utforme applikasjonen. |
Rikt sett med API-er | JavaFx-biblioteket tilbyr et rikt sett med API-er for å utvikle brukergrensesnitt. |
Vue er et moderne front-end-rammeverk som bygger på et komponent-basert arkitektur, og forenkler utvikling av et nettsted eller en webapp. Den er lett, fleksibel og enkel å komme i gang med. Vue er et fullstendig i seg selv, men er lagt opp for å inkludere flere plugins til å møte applikasjonens behov i.e. biblioteksmodularisering.
Bibliotekmodularisering ved hjelp av et rammeverk er vanlig i frontend-utvikling. Både React og Angular har modularisering. Men det som skiller Vue.js fra andre alternativer er dens "høye frakobling", eller med andre ord - hvor enkelt det er å utvide funksjonalitetene, og hvor god synergien er mellom Vue og inkluderte moduler. For eksempel, hvis vi ønsker å organisere og gjengi små visuelle komponenter, er alt vi trenger Vue.js 'core' bibliotek. Etter hvert som applikasjonen vokser, har vi biblioteker for å administrere ruter som 'vue-router', biblioteker for å administrere den globale tilstanden som 'vuex' eller biblioteker for å bygge responsive webapplikasjoner som 'bootstrap-vue'. I tillegg, hvis applikasjonen vår må optimaliseres eller trenger god SEO, kan vi inkludere biblioteket 'vue-server-rendering'.
Funksjon | Fordel |
---|---|
Virtuell DOM | Endringer i Vue blir ikke gjort i Document Object Model (DOM), men i stedet blir det laget en kopi i form av JavaScript (Viruell DOM). Når endringer i DOM blir gjort vil de først endres i JavaScript, og deretter synkroniseres med den virkelige DOM. Denne prosessen optimaliserer minnebruk, og endringer kan gjøres raskere |
Databinding | Databindingsfunksjonen hjelper utvikleren med å manipulere eller tilordne verdier til HTML-attributter, endre stil, tildele klasser ved hjelp av et bindingsdirektiv som kalles v-bind. |
Komponent arkitektur | Komponenter brukes til å lage tilpassede elementer, som kan gjenbrukes i HTML. |
Håndtering av Events | Attributtet v-on kan legges til DOM-elementene for å lytte til hendelser/events i Vue. |
Vårt bygg har tillegg for:
- (maven-compiler-plugin) - kompilerer source-filene i prosjektet
- (maven-surefire-plugin) - kjøring av enhetstester
- (maven-checkstyle-plugin) - sjekking av kodekvalitet med Checkstyle
- (spotbugs-maven-plugin) - finne bugs i koden med Spotbugs
- (jacoco-maven-plugin) - testdekningsgrad med Jacoco
- Web-client-spesifikke:
- (frontend-maven-plugin) - samkjøring av node-kommandoer med maven-kommandoer
- Rest-api-spesifikke:
- (maven-resources-plugin) - flytting av web-client-byggget til Tomcat sin public-mappe
- (spring-boot-maven-plugin) - kjøring av Spring Boot Rest API
- UI-spesifikke:
- (javafx-maven-plugin) - kjøring av JavaFx-applikasjonen
- Integration-test-spesifikke:
-
- (maven-failsafe-plugin) - Kjøring av integrasjonstester
-
Kommandoer for enkelte moduler:
- Åpne prosjektet i gitpod ved hjelp av knappen øverst.
- Fra /workspace/gr2050/foundly, skriv kommandoen
mvn clean install
i ett av de ledige terminalvinduene. - For å starte Rest API brukes kommandoen
mvn spring-boot:run -f rest-api/pom.xml
. - Gå deretter til det ledige terminalvinduet, og kjør kommandoen
mvn javafx:run -f ui/pom.xml
for å starte JavaFx-klienten. - Åpne port
6080
for å se JavaFx-klienten. - Åpne port
8098
for å se Web-klienten. - Legg inn hittegodset ditt!