README.md

Salamander Identification Application - mobile application

[LEGG INN SALAMANDER IKONET HER!!!!!!!]

Introduction

This will serve as the documentation for the mobile application part of the Salamander Identification Application system, developed during the Spring of 2021 as a Bachelor's project proposed by the Norwegian Institute of Nature Research (NINA). The application is meant to aid the researchers at NINA in estimating the populations of Northern crested newts and Smooth newts.

Developers:

• Andrea Magnussen
• Anders Sundstedt Langlie
• Herman Andersen Dyrkorn
• Eirik Martin Danielsen

Devlopment Environment

To be able to run the mobile application in a development environment, several steps are required. The expo documentation can be found here.

Setup

1. Expo CLI needs to be installed: npm install -g expo-cli
2. Clone the project where you want the project to be located on your computer: git clone <link>
3. Run npm i in the project folder to install all required libraries.
4. To run the expo server, run expo start in the project folder. A QR-code should now be visible.
5. Download the Expo Go app, and scan the QR-code. The salamander app should now be visible in the Expo app.
6. Make sure a server is running, and that the IP-address in the APIkit.js file is correct. If the server is running, it should be possible to make requests from the application.

System

In this section, we will go through the framework and libraries used, as well as how the application work and what it consists of. There will also be examples of how navigation, networking, and state is implemented.

The application is currently a thin client, and relies on the server to get data. The image below shows a visualization of the system architecture.

[Legg inn bile av server/client]

Framework and Libraries

The frontend is written in the Javascript framework developed by facebook, React Native. We used several additional libraries to make this application.

React Native

The documentation for React Native can be found here. We decided to use functional components while developing the application. For further development, we recommend to continue using this way of adding/developing new components.

Libraries

• React Navigation: Used for handling navigation in the application. Documentation can be found here.
• React Native Paper: Used for styling of the components. Documentation can be found here.
• React Native Maps: Used for the map feature in the application. Documentation can be found here.
• React Native Dropdown Picker: Used for the dropdowns in the application. Documentation can be found here.
• React Native toast message: Used for the toast messages in the application. The documentation can be found here.
• React Redux: Used for state management in the application. The documentation can be found here.
• Axios: Axios is used for handling network requests in the application. The documentation can be found here.
• Expo: Expo is used for the development environment. It was used during development, and can run/build the application while developing. The documentation can be found here.
• Expo Camera: Used for the built-in camera feature. The documentation can be found here.
• Expo Image Picker: Used to be able to upload images from the phones library. The documentation can be found here.