Commit 2b228d40 authored by Hedda's avatar Hedda
Browse files

#7 basics in README

parent dde634a0
npm install react-navigation
\ No newline at end of file
npm install react-navigation
# Installasjon og bruk
### IKKE SIKKER PÅ OM DETTE ER RIKTIG
1. Kjør `npm install` i backend-mappen
2. Kjør `npm install` i frontend mappen
3. Deretter kjør `npm start` i backend-mappen
# Dokumentasjon
Vi har laget en app som viser frem steder i verden. Den har en hjem-side og en utforsker-side. På hjem-siden vises de fem byen som flest har trykket seg inn på for å se mer informasjon, da de fem mest populære byene. Nederst vises en tab-bar som brukes til å navigere mellom de to sidene. Ved å trykke på taben med søkeikonet, kommer du inn til utforsk-siden.
Det er på utforsksiden mye av funksjonaliteten ligger, blant annet med søking, filtrering og sortering. Søkingen gjøres med søkebaren og filtrering/sortering gjøres vha dropdown-menyene.
Man kan også trykke på lokasjons-kortene for å se mer informasjon om hvert sted.
## Teknologier
* Redux
* Expo
* MongoDB
* Express
* Mongoose
* og evt mer?????
## Design
Vi har gått for et minimaslistisk design for å gjøre siden mest oversiktelig og for at den skal være enkel å bruke. Vi har for det meste brukt react sine ekstrene biblioteker, og det gjør at siden holder seg konsistent i design.
## Git og kommentering
Vi har prøvd å være flinke på å kommentere koden, samt merke hver commit med hvilken issue de tilhører. De stedene vi ikke har lagt det til er det fordi det kun committes en quick fix eller at commit ikke tilhører noen spesiell issue.
Vi har prøvd å gjøre koden vår enda mer ryddig enn i prosjekt 3, og vi har prøvd å gi alle komponenter og funksjoner fornuftige navn slik at man lett skal skjønne hva de er og gjør.
## Backend
Selvom man kunne benytte seg av samme server som sist, valgte vi å gjøre om litt på vår. Dette fordi vi fikk tilbakemeldinger på prosjekt 3 om at vi ikke hadde det beste oppsettet (f.eks fordi vi sorterte i frontend), og dette var ikke like kompatibelt med veldig store datasett. Vi har også ryddet opp i fetchene og laget egen fil som kjører fetchmetoder, for å gjøre det hele mer oversiktelig.
Vi har da en routers-mappe i backend som inneholder en api-fil. Her ligger all routing, samt sortering dersom det er valgt av bruker. Den sorterer da dersom det er lagret noe om dette i redux.
I frontend har vi også en api-mappe som inneholder en fetchers-fil. Denne inneholder en GetData-funksjon som hente riktig data utfra hvilken input den får, eks på riktig søkeord osv.
Selve databasen er lik som sist, og det samme er koblingen mellom server og app. Forskjellen er da at vi har ryddet opp i koden så den er mer oversiktelig, vi har prøvd å få mest mulig gjenbruk av kode og slippe å skrive ting dobbelt opp.
import axios from "axios"
// Checks what the input is, and returns the correct fetch-URL
// based on the input.
const createURL = (input) => {
const API_URL = "http://it2810-10.idi.ntnu.no:3001/api/"
if(input == undefined){
......@@ -13,12 +15,15 @@ const createURL = (input) => {
}
}
// The only method that fetches data from database.
// Creates proper URL and fetches the data with axios
export const GetData = async (input) => {
const url = createURL(input)
return await axios.get(url).catch((err) => {console.log("Error from axios: ", err)})
}
// Update function for when a card is clicked
// Updates the populatiry of that destination
export const UpdatePopulatiry =(destinationID, newPopularity) => {
axios.post("http://it2810-10.idi.ntnu.no:3001/api/updateData", {
id: destinationID,
......
......@@ -23,7 +23,6 @@ class HomePage extends Component{
flex: 1
}}>
<Text style={{fontSize: 28, textAlign: "center", padding: 8}}>Welcome to Dream Destinations</Text>
<Text style={{fontSize: 20, textAlign: "center", padding: 8}}>Click here to see a wordcloud showing the most popular locations</Text>
<Text style={{fontSize: 16, textAlign: "center", padding: 8}}>Below you see the five most popular places</Text>
<Card/>
</ScrollView>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment