Student Timer

A React Native application for Android and iOS to monitor and manage your own learning behaviour during your studies

Setup

To build the app and send push notifications, the project has to be uploaded to expo.dev. Therefore you need to create an account.

You also need the eas-cli, to manage the project and create builds:

npm install -g eas-cli

After installation you need to login inside your terminal with your created account:

eas login

Then you can upload the project to expo.dev. First remove the "extra" and "owner" field from the app.json. Then run the following command:

eas project:init

To facilitate development, the app can run on a local emulator on the PC. For installation check the Android and iOS instructions. Alternatively you can also run the application directly on your own real smartphone via Expo Go.

Frontend

Go inside the student-timer-frontend folder and install the node modules:

cd ./student-timer-frontend
npm install

Create a .env with all environment variables. See .env.example for reference. All environment variables must be in the following form (docs):

EXPO_PUBLIC_[NAME]=value

Backend

The backend is build with Java Spring Boot and a PostgreSQL database. Both is dockerized to make local development easier. Start docker and then run the following commands:

cd ./student-timer-backend
docker-compose up -d

The container will now always automatically start when you start docker.

Then create a .env with all environment variables. See .env.example for reference.

Development

Start docker and the container and run the application inside the student-timer-frontend folder:

cd ./student-timer-frontend
npm start

To use the emulator press a for Android and i for iOS inside the terminal. It will start the emulator and open up the app. You can also scan the QR-Code from the terminal with Expo Go to use your real smartphone. After that it will show in recently opened so you only have to scan the QR-Code once.

Changes are shown immediately after saving, but sometimes its good to refresh the app. To refresh the app quickly, you can press r twice on your PC keyboard while in the emulator or press r once inside the terminal. This makes it faster as you dont have to keep opening the Expo Go Dev Tools.

The backend has a swagger documenation, which is available at http://localhost:8080/documentation. You can see and test all endpoints there.

Building

You can create different types of builds with profiles that are defined in eas.json. Check the docs for configuration. When creating a build the current git project with the latest commit will be uploaded. Since the .env is inside the .gitignore it will not be uploaded. To use environment variables in the builds you need to configure them inside the eas.json with an env field. Since the file is visible inside the repository there should not be variables with sensitive data like api keys. For those you can create secrets in [expo.dev]() for an account or a specific project. They still have to be in the same format like in the .env:

EXPO_PUBLIC_[NAME]

You can build an APK for Android or a simulator build for the iOS simulator. To build it for real iOS phones you need an apple developer account.

Swap NAME with the profile name from the eas.json:

Android (APK)

cd ./student-timer-frontend
eas build -p android --profile [NAME]

iOS simulator build

cd ./student-timer-frontend
eas build -p ios --profile [NAME]