Skip to content
Snippets Groups Projects

Jorul feature/documentation patch 09704

Merged Jorul feature/documentation patch 09704
jorul-feature/documentation-patch-09704 into master
Merged Jorunn Leithe requested to merge jorul-feature/documentation-patch-09704 into master
Compare
and
1 file
+ 11
− 7
Compare changes
  • Side-by-side
  • Inline
README.md
+ 11
− 7
@@ -27,16 +27,16 @@ The first step when creating this app was deciding what code from the frontend i
@@ -27,16 +27,16 @@ The first step when creating this app was deciding what code from the frontend i
For handling the overall composition of the app we used [react-navigation](https://reactnavigation.org/) which allowed us to setup stacks of screens (our different pages). We have 4 different screens:
For handling the overall composition of the app we used [react-navigation](https://reactnavigation.org/) which allowed us to setup stacks of screens (our different pages). We have 4 different screens:
- Home: The screen that welcomes the user to our application and explains what it is all about, contains a button that sends the user to "Search"-screen.
- Home: The screen that welcomes the user to our application and explains what it is all about, contains a button that sends the user to "Search"-screen.
<img src="images/HomeScreen.jpg" alt="HomeScreen" width="400" height="800"/>
<img src="images/HomeScreen.jpg" alt="HomeScreen" width="280" height="600"/>
- Search: The screen where the user can search, filter and sort the studentcities, and see the studencities that match the search. Clicking on a studentcity sends the user to "StudentCity"-screen.
- Search: The screen where the user can search, filter and sort the studentcities, and see the studencities that match the search. Clicking on a studentcity sends the user to "StudentCity"-screen.
<img src="images/SearchScreen.jpg" alt="SearchScreen" width="400" height="800"/>
<img src="images/SearchScreen.jpg" alt="SearchScreen" width="280" height="600"/>
- StudentCity: The screen which shows a detailed view of all average ratings for a studentcity. Here the user can click on "Legg til vurdering" which sends the user to "AddReview"-screen.
- StudentCity: The screen which shows a detailed view of all average ratings for a studentcity. Here the user can click on "Legg til vurdering" which sends the user to "AddReview"-screen.
<img src="images/StudentCityScreen.jpg" alt="StudentCityScreen" width="400" height="800"/>
<img src="images/StudentCityScreen.jpg" alt="StudentCityScreen" width="280" height="600"/>
- AddReview: The screen where the user can click on the stars to give ratings to the different parameters and send in the review for the studentcity which the user came from.
- AddReview: The screen where the user can click on the stars to give ratings to the different parameters and send in the review for the studentcity which the user came from.
<img src="images/AddReviewScreen.jpg" alt="AddReviewScreen" width="400" height="800"/>
<img src="images/AddReviewScreen.jpg" alt="AddReviewScreen" width="280" height="600"/>
@@ -44,9 +44,13 @@ For handling the overall composition of the app we used [react-navigation](https
@@ -44,9 +44,13 @@ For handling the overall composition of the app we used [react-navigation](https
We implemented all of the UI components in React Native using the [react-native-elements library](https://reactnativeelements.com/docs/). The reason for choosing specifically this one is that it was an opensource all-in-one UI kit, which meant that we didn't have to go looking for components in other libraries very often. We ended up using two UI-components from other libaries. We used [react-native-tiny-toast](https://github.com/cagdaskarademir/react-native-tiny-toast) since react-native-elements' toast only worked on Android. We also used [react-native-picker-select](https://www.npmjs.com/package/react-native-picker-select) because react-native-elements had no choicebox.
We implemented all of the UI components in React Native using the [react-native-elements library](https://reactnativeelements.com/docs/). The reason for choosing specifically this one is that it was an opensource all-in-one UI kit, which meant that we didn't have to go looking for components in other libraries very often. We ended up using two UI-components from other libaries. We used [react-native-tiny-toast](https://github.com/cagdaskarademir/react-native-tiny-toast) since react-native-elements' toast only worked on Android. We also used [react-native-picker-select](https://www.npmjs.com/package/react-native-picker-select) because react-native-elements had no choicebox.
We designed the UI components very similarly to the ones from project 3, so while we couldn't copy the code line for line we could reuse a lot of the states, effects etc., and the overall visual design of the app. One improvement we made from project 3, based on the feedback from other students, was that we added debouncing to the searchfield so that the amount of requests sent to the API is reduced. We added debouncing using [lodash](https://lodash.com/docs/4.17.15#debounce).
We designed the UI components very similarly to the ones from project 3, so while we couldn't copy the code line for line we could reuse a lot of the states, effects etc., and the overall visual design of the app.
For handling layout in React Native we used `View`s as flexboxes. We used `FlatList`to create the scrollable component which shows all the studentcities using the studentCityCard component.
One improvement we made from project 3, based on the feedback from other students, was that we added debouncing to the searchfield so that the amount of requests sent to the API is reduced. We added debouncing using [lodash](https://lodash.com/docs/4.17.15#debounce).
 
 
Another change we made from project three is that we went from having a pagination component to having a infinite scroll list with dynamic fetching. We used a guide from [scotch](https://scotch.io/tutorials/implementing-an-infinite-scroll-list-in-react-native?fbclid=IwAR0OVG3B1HDv8DjAmemfEyM1Di-5a8AAc6l850aTmy6dp7s61LxULehiDOo) to see how we could use a `FlatList` component to display the studentCityCards and add studentcites to the list by dynamically fetching from the backend when the user scrolled to the bottom of the list.
 
 
For handling layout in React Native we used `View`s as flexboxes.
## Testing
## Testing
To test the application we performed manual end2end tests on both iOS and Android. We also ran the project in the web browser to test that our frontend would work well on different screen sizes. The backend was already well-tested from project 3, so we only needed to test that our new frontend worked as expected.
To test the application we performed manual end2end tests on both iOS and Android. This was very time consuming, so we definitely see the reason for having a lot of automatic testing. We also ran the project in the web browser to test that our frontend would work well on different screen sizes. The backend was already well-tested from project 3, so we only needed to test that our new frontend worked as expected.