Commit 9d9ba855 authored by Thor-Herman Van Eggelen's avatar Thor-Herman Van Eggelen
Browse files

Merge branch 'readme' into 'master'

Create Readme #17 #14

See merge request !3
parents a61dfa07 0fcba29a
# Project 4
<img src=https://i.imgur.com/iBhGzWB.jpeg width=200 />
<img src=https://i.imgur.com/lpmg9PD.jpeg width=200 />
<img src=https://i.imgur.com/Sd054Bh.jpeg width=200 />
## Functionality
The app is heavily based on our website from project 3. In the app, the user is able to explore a library of movies and search and filter these. It is also possible to click on a movie to display more details about it.
The app uses the same backend, and the same filtering and sorting options, minus being able to sort movies on year. I have removed the login and review functionality, as it was not a requirement for this project to enter user data.
## Setup
To start the project, `cd` into prosjekt-4 and run the `yarn` command to install the necessary dependencies. Next, enter `expo start`. Now you should see the expo devtools screen in your browser, and will be able to connect via LAN-connection using the expo app. Remember to set your internet connection as Private and not Public.
## Expo
Expo has been used through the entire development cycle. The project was initialized with their typescript template, using `expo init`.
Initially, I used their web version to create the app, but quickly switched over to the mobile app. This gave a much better idea of what the app would look like, and was also more stable.
React Native Devtools has been used to debug the application with Expo. This was particularly useful when bugfixing network requests and checking Redux state.
## Navigation
To navigate between screens I have used the library @react-navigation. Initially, I attempted to use react-router-native for the application, as we had used react-router-dom for project 3. However, there were several bugs and issues with using links together with NativeBase components, so I made the switch to navigation.
Navigation is built for native, whereas router is initially built for React. Hence, there is much better compatability and documentation for routing with native on react-navigation. There are three main screens: Browse, Movie, and Filter.
## Layout
In project 3 we used react-springboot to style our components. However, there is no equivalent springboot library for Native. Thus, I have chosen NativeBase instead. This is due to easy setup, good documentation, and a good selection of components. I have also had to do some additional styling using Native's javascript-styling, mostly for layout between components.
Though the elements are much the same from project 3, I have had to change the site layout to adopt for a much narrower screen-size. The largest change is perhaps the filter button, which now leads to its own page.
## Pagination
I have chosen the infinite scroll approach, but with a button to load more results. The pagination works mostly the same as project 3, only the button itself is different.
## Reuse of Project 3
A lot of the code for project 3 was compatible with project 4, at least with some minor adjustments. This has made development of the app much quicker than would be otherwise possible.
All of the backend is the same, as the only change is in the frontend device, now being a phone.
Some components, such as the pages either draw inspiration from, or are very similar to the components from project 3. A major difference is the lack of HTML, and instead the use of mobile elements.
However, all the hooks are compatible between the two.
A major advantage with Redux is that it uses plain JavaScript objects. Hence, it is almost directly copied over to this application.
This time I used yarn instead of npm. This was also due to personal preference for yarn and expo defaulting to it. There was no longer a requirement to use npm.
## Search and Filtering
The filtering section from project 3 has been moved to its own screen, due to the limited space on the phone.
A search is only performed initially and whenever the user either enters a new search, updates the filters, or loads more pages.
## Testing
The application has been manually e2e tested on a Samsung Galaxy S8 via Expo Lan connection. Additionally, an iPhone 11 has been used to view the application on iOS. There are no major bugs that I am currently aware of.
## Git
Though I have not been working in a group for this project, many of the same practices are still useful when it comes to git and gitlab. I've been separating work into branches to ensure master is stable, and used issues to keep track of what I need to do next.
## Sources
My main sources are:
- [Native base docs](https://nativebase.io/)
- [React Native docs](https://reactnative.dev/docs/getting-started)
- [React Navigation docs](https://reactnavigation.org/docs/getting-started)
- [Expo docs](https://docs.expo.io/)
- [Stack Overflow](https://stackoverflow.com/)
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