Skip to content
PaulArbez edited this page Nov 4, 2024 · 16 revisions

The Mobile part of this project is made with Kotlin Android with Jetpack Compose. The app is accessible from the Home page of the website.

Page Navigation

The application page navigation (internaly called Global Navigation) is made with the Jetpack Compose Navigation library. With it, we can navigate between pages with a single activity and multiple composables. Currently, the app has 3 main pages: Login, Register and Main page.

It is called Global Navigation because the Main page have a navbar that have its own navigation.

Pages

Login and Register Pages

These pages are the first pages that the user will see when they open the app. The user can either login or register.

The default page is the login page. If the user is not logged in, the app will redirect the user to the login page. If the user don't have an account, the user can click the register link "Don't have an account? Make one here" to go to the register page. Same goes for the register page with "Already have an account? Login here".

Main Page

This page allows the display of others while keeping the navigation bar. Each element of the navigation bar allows a new page to be displayed. There are 4 different pages: the "Home" page, the "Workspace" page, the "Explore" page, and the "Profile" page.

Home Page

This is the default page of the app when the user is logged in. It shows to the user different panels that contain information about thier account. It contains :

  • Connected services
  • Programs statistics
  • Profile information

Workspace Page

This is the space where programs are listed. Programs names can be modified and there is an edit button at the right of each program. When the edit button is clicked, the user is redirected to the program page.

Program Page

This page allows the user to see all actions and reactions of the program. Actions are node and reactions are subnode. The user can add, edit or delete nodes.

Add Action / Reaction Page

This page allows the user to add an action or reaction to the program. The user can show sections of services and select an action or reaction from a service.

Profile Page

It is a page where the user has access to their profile. They can modify certain information about themselves, manage connections with their favorite services or log out.

Settings Page

It contains an input field to change the api url, and a button to save the new url. When the button is clicked, the app will try to connect to the new url to check if it is valid. If it is, the app will save the new url. If it is not, the input field will be highlighted in red.

Api Connection

The app uses the Retrofit to connect to the api. Which is a Kotlin library that simplifies the connection to an api. For more information about the api itself, please refer to the API Routes

Data Management

The app uses SharedPreferences to store the user's token. This token is used to authenticate the user when they make a request to the api. It uses it to auto login the user when they open the app if the token is still valid. A wrapper class have been made to simplify the use of SharedPreferences.

Service Linking

When the user wants to link a service to the app, he can click on the link button on the profile page. The app will open the external browser to the concerned service's authorization page. When the user accepts the authorization, the service will redirect the user to the callback url, the server will then recognize the Android device and so redirect the user to the deeplink of the app, that will reopen the app to the profile page.

Deep Linking

The app uses Deep Linking to redirect the user to the app when the user is redirected from the service's authorization page. The app only have one deeplink to redirect the user to the profile page. When the browser redirect to https://area-app.vercel.app/app/redirect/, the deeplink is triggered.

Clone this wiki locally