# Technical Documentation
## Overview
This project is structured into three main components: Mobile, Web, and Server. Each component serves a specific role in the application's overall architecture, ensuring a seamless and integrated user experience.
### Mobile
The mobile component is structured to support a React Native application. It's organized into several key directories:
- **assets**: Contains all the static assets like images and icons used in the mobile application.
- **pages**: Includes the React components that represent different screens or pages in the app, such as `LogIn.js`, `Profile.js`, etc.
- **components**: Holds the JavaScript files that are likely used to connect to various APIs or external services, like `Rss.js`, `Spotify.js`, etc.
- **android**: For build the application you have need:
- **app**: This folder contains files specific to your React Native application, such as custom native components, Java files and Android-specific resources.
- **build**: This folder contains the files generated during the build of your Android application.
- **gradle**: This folder contains the configuration files for the Gradle build system for Android.
- **ios**:
- **Pods**: This folder is used if you use CocoaPods to manage the dependencies of your iOS application. It contains files related to dependencies installed via CocoaPods.
- **YourAppName.xcodeproj**: This file is the main Xcode project for your iOS app. It can be opened with Xcode to configure and manage your iOS application.
- **YourAppName.xcworkspace**: This file is an Xcode workspace that integrates your main project and CocoaPods projects, if used.
- **YourAppName**: This folder contains the Objective-C/Swift source files for your iOS application, as well as iOS-specific resources.
### Web
The web component is a React web application. Its structure is as follows:
- **public**: Contains the static assets accessible to the public, like `favicon.ico`, `index.html`, etc.
- **src**: This is the main source folder containing:
- **assets**: Similar to mobile, it stores static assets like images, icons, and fonts.
- **components**: Holds reusable React components like `Button`, `NavBar`, etc.
- **pages**: Contains React components representing different web pages.
- **services**: JavaScript files for API or external service interactions.
### Server
The server component, likely built with Node.js, handles backend operations. Its structure includes:
- **djangoapp**: The source directory with several subdirectories:
- **accounts**, **act_react**, **config**, **middleware**, **routes**, **services**, **user_area**: These folders likely contain JavaScript files that define various aspects of the server's functionality, such as database configuration (`config`), authentication middleware (`middleware`), and API routes (`routes`).
## Architecture Details
### Mobile
1. **App.js**: The entry point of the React Native application.
2. **Components**: Handles interactions with external services and APIs.
3. **Pages**: Each page is a React component, implementing a specific feature or view in the app.
### Web
1. **App.js (src)**: The main React component that bootstraps the web application.
2. **Components**: Reusable UI components used across different pages.
3. **Services (src/services)**: Responsible for managing external API calls and data processing.
### Server
1. **index.js (src)**: The entry point of the server application, setting up the server and its routes.
2. **Routes**: Defines the API endpoints and their corresponding logic.
3. **Services (src/services)**: Business logic and interaction with databases or other services.
---
# Mobile Application Documentation: `App.js` Overview
## Introduction
`App.js` is the entry point of the React Native application for the mobile component of the project. It uses React Navigation, a popular library for navigating between screens in a React Native app.
## Structure and Functionality
### Imports
- **React**: The core library to build React components.
- **NavigationContainer**: A component from React Navigation that manages the navigation tree and contains the navigation state.
- **createStackNavigator**: A function from React Navigation that creates a stack navigator.
- **Page Components**: Imports various screens from the `pages` directory like `Loading`, `Welcome`, `LogIn`, etc.
- **Service Components**: Imports services like `Spotify`, `Spotify_area`, and `Rss` from the `services` directory.
### App Component
- **Stack Navigator**: Utilizes `createStackNavigator` to define a stack navigation.
- **Navigation Structure**:
- The `NavigationContainer` wraps the entire navigation structure.
- `Stack.Navigator` defines the stack navigation, with `screenOptions` set to hide the header across all screens.
- `Stack.Screen` elements define the individual screens available in the app, each associated with a component. For example, `<Stack.Screen name="home" component={Home} />` defines a screen named "home" which renders the `Home` component.
### Routes
- The commented-out routes (`Loading`, `Welcome`, `LogIn`, `SignUp`, `Token`) suggest these screens are part of the application but currently not in use.
- Active routes like `Home`, `Applet`, `Spotify`, `Spotify_area`, and `Rss` are defined and linked to their respective components.
### Services Integration
- Components like `Spotify`, `Spotify_area`, and `Rss` from the `services` directory are used as screens. This suggests that these services have UI components that interact directly with the user.
---
# Dockerfile for Django Application
## Overview
This Dockerfile is used to create a Docker container for a Django application. It specifies the base environment, configuration, and the commands to run the application.
## Content and Explanation
1. **FROM node:20.10.0**
- This line specifies the base image to use for the container. Here, it's using the official Node.js image version 20.10.0.
- Docker images are like templates and contain the file system and settings used to create a container.
2. **USER root**
- Sets the user to `root` inside the Docker container. This is used for executing commands with administrative privileges.
3. **SHELL ["/bin/bash", "-c"]**
- Sets the default shell for the subsequent `RUN` instructions in the Dockerfile. Here, it specifies bash as the shell.
4. **WORKDIR /app**
- Sets the working directory inside the container to `/app`.
- Any subsequent commands will be run from this directory.
5. **COPY . /app/**
- Copies everything from the current directory on the host machine into the `/app` directory inside the container.
- This is typically used to copy the source code of the application into the container.
6. **EXPOSE 8081**
- Informs Docker that the container listens on port 8081 at runtime.
- This does not actually publish the port, it functions as a type of documentation between the person who builds the image and the person who runs the container.
7. **RUN ls pages/**
- Executes the command `ls pages/*` in the container. This command lists all files and directories in the `pages` directory.
- It seems to be more informational and might be used for debugging or verifying the contents of the copied `pages` directory.
8. **RUN npm install**
- Runs `npm install` to install all dependencies defined in the `package.json` file.
- This is a crucial step for setting up a Django application as it ensures all necessary libraries and packages are available in the container.
9. **RUN npm install -g nodemon**
<!-- - Installs `nodemon` globally inside the container.
- Nodemon is a utility that monitors for any changes in the source code and automatically restarts the server, making it useful during the development process. -->
10. **CMD ["npm", "start"]**
- The main purpose of this command is to specify the default action that should be executed when the container is run.
- This line tells Docker to start the application using `npm start`, which is typically defined in the `package.json` script section.
---
# Documentation of Service Components in Mobile Application
## 1. `Dog.js`
### Overview
`Rss.js` is a React Native component that fetches and displays RSS feed data.
### Structure and Functionality
- **Imports**
- React components and hooks: `React`, `useState`, `useEffect`.
- React Native components: `View`, `Text`, `Pressable`, `StyleSheet`, `ScrollView`, `Image`.
- External libraries: `react-native-rss-parser` for parsing RSS feed, `axios` for HTTP requests, and `expo-status-bar` for the status bar.
- **HandlingRSS Component**
- **State**: Uses `useState` to manage the state of `items`, which holds the parsed RSS feed data.
- **fetchRSS Function**: An asynchronous function that fetches RSS data from a provided URL, parses it, and updates the `items` state.
- **displayItems Function**: Fetches RSS data from 'https://www.francebleu.fr/rss/infos.xml'.
- **useEffect Hook**: Automatically calls `displayItems` on component mount.
- **UI Rendering**: Displays a button to refresh the RSS feed and lists the fetched items.
- **Styles**
- Defines various styles for the component using `StyleSheet`.
### Purpose
This component is used to fetch, parse, and display RSS feeds in the mobile application.
---
## 2. `Spotify.js`
### Overview
`Spotify.js` is a React Native component focused on providing an interface for Spotify-related functionalities.
### Structure and Functionality
- **Imports**
- React components: `React`.
- React Native components: `View`, `Text`, `StyleSheet`, `ScrollView`, `Pressable`.
- External library: `react-native-vector-icons/FontAwesome` for icons.
- **Spotify Component**
- **UI Structure**: Consists of a `ScrollView` containing various pressable buttons for different Spotify functionalities.
- **Navigation**: Uses the `navigation` prop to navigate to other screens (e.g., `spotify_area`).
- **Icons and Text**: Each button includes a FontAwesome icon and a descriptive text.
- **Styles**
- Defines styles for the layout, buttons, and text.
### Purpose
This component serves as an interface for Spotify-related actions within the mobile application. Users can interact with different functionalities related to Spotify, like adding songs from videos to a Spotify playlist.
# Documentation: `Applet.js` in Mobile Application
## Overview
`Applet.js` is a React Native component that interfaces with external services or functionalities, referred to as applets. It manages the display and interaction with these applets, offering users the ability to subscribe or unsubscribe from them.
## Key Features and Functionality
### Imports
- React essentials (`React`, `useEffect`, `useState`, `useCallback`) for component creation and state management.
- React Native components (`View`, `Text`, `TextInput`, `StyleSheet`, `Pressable`) for UI elements.
- `Icon` from `react-native-vector-icons/FontAwesome` for iconography.
- `AsyncStorage` from `@react-native-async-storage/async-storage` for persistent storage.
- `serviceInfos` for details about the services/applets.
### Applet Component
- **State Management**: Utilizes `useState` to manage `areas` (applets data) and `alreadyLogged` (user authentication status).
- **AsyncStorage**: Retrieves stored values like `serviceId` and `userMail`.
- **Fetching Data**: Two main functions, `get_connected` and `get_areas`, fetch data from an API using `fetch`.
- **Effect Hooks**: `useEffect` hooks trigger `get_connected` and `get_areas` on component mount or when dependencies change.
- **User Interaction**: Handles subscribing to an area/applet with `handle_subscribe_area`.
### AreaBox Subcomponent
- A functional subcomponent that displays individual applet information.
- Utilizes passed props and service information (`serviceInfos`) to render UI elements.
### UI and Styles
- The component uses `StyleSheet` for styling React Native elements.
- Structured with `ScrollView`, `Pressable`, `TextInput`, and other UI components for interactive and scrollable content.
- Custom styles are applied for various elements like buttons, input fields, and containers.
## Purpose and Usage
- **Applet Management**: Allows users to view and interact with different applets.
- **Dynamic Content Rendering**: Dynamically renders applets based on fetched data.
- **User Interaction**: Facilitates subscribing and unsubscribing to applets, enhancing user engagement.
# Documentation: `Home.js` in Mobile Application
## Overview
`Home.js` serves as the home screen of the mobile application. It fetches and displays a list of services, allowing users to navigate to different applets or functionalities within the app.
## Key Features and Functionality
### Imports
- Essential React hooks: `useEffect` and `useState`.
- React Native components: `View`, `Text`, `StyleSheet`, `ScrollView`, `Pressable`.
- `TextInput` from `react-native-gesture-handler` for user input.
- `Icon` from `react-native-vector-icons/FontAwesome` for iconography.
- `Interface` and `serviceInfos`: Custom components and configurations for the app's services.
### Home Component
- **State Management**: Uses `useState` to manage the `services` array.
- **Fetching Data**: On component mount (`useEffect`), it fetches service data from a specified URL and updates the `services` state.
- **Box Subcomponent**: A functional component that displays individual service information. It is rendered for each service in the `services` array.
- **Navigation**: Utilizes the `navigation` prop to navigate to the 'applets' screen when a service box is pressed.
### UI and Styles
- The component is wrapped in a custom `Interface` component, suggesting a consistent layout across different screens.
- Uses `ScrollView` for scrollable content.
- A search bar (`TextInput`) is provided for searching services.
- Service icons are displayed in a flex container (`buttonRow`) with a wrapping layout for responsiveness.
## Purpose and Usage
- **Service Display**: Showcases available services or features on the home screen.
- **User Interaction**: Allows users to navigate to different parts of the app by interacting with the service icons.
- **Responsive Layout**: Adapts to different screen sizes, ensuring a user-friendly interface.
# Documentation: `Interface.js` in Mobile Application
## Overview
`Interface.js` is a layout component that provides a consistent structure for the screens of the mobile application. It includes a body for the main content and a footer for navigation options.
## Structure and Functionality
### Imports
- React essentials: `React`, `useEffect`, `useState`.
- React Native components: `View`, `Text`, `StyleSheet`, `TouchableOpacity`.
- `Icon` from `react-native-vector-icons/FontAwesome` for navigation icons.
### Interface Component
- **Props**: Accepts `navigation` for screen navigation and `children` for rendering the content of the specific screen that wraps this component.
- **Layout Sections**: Divided into three main sections - `header`, `body`, and `footer`.
- **Header**: Currently commented out but structured for potential use as a top bar.
- **Body**: Contains the `children` elements, essentially the content of the screen that uses this layout.
- **Footer**: Displays navigation options using `TouchableOpacity` components, each with an icon.
### Navigation Options
- **Options Array**: Defines the navigation icons to be displayed in the footer. Each option is an object with a `name` property, corresponding to the icon name.
- **Rendering of Options**: Uses the `map` method to render a `TouchableOpacity` for each option in the `footer`.
- **Navigation Handler**: The `onPress` event on each `TouchableOpacity` is set to navigate to 'applets'. This should be customized based on the actual navigation requirements.
### Styling
- The component uses `StyleSheet` for styling the layout elements.
- Styles are defined for `interface`, `header`, `body`, and `footer`, ensuring a consistent look across the application.
## Purpose and Usage
- **Consistent Layout**: Provides a uniform layout structure for different screens in the app.
- **Navigation**: Facilitates navigation between different parts of the app through the footer.
- **Flexibility**: The use of `children` prop allows for different content to be rendered in the `body` section, making it a versatile component for various screens.
# Documentation: `Loading.js` in Mobile Application
## Overview
`Loading.js` is a React Native component that functions as an initial loading or splash screen for the application. It provides a visual indication to the user that the application is in the process of starting up.
## Structure and Functionality
### Imports
- React essentials: `React`, `useEffect`.
- React Native components: `View`, `Text`, `StyleSheet`, `Image`.
### Loading Component
- **Props**: Accepts `navigation` to handle screen transitions.
- **Effect Hook**:
- Utilizes `useEffect` to create a timer that automatically navigates to the 'welcome' screen after 5 seconds.
- Cleans up the timer when the component is unmounted to avoid memory leaks or unintended behavior.
- **UI Elements**:
- An `Image` component to display a logo or visual element (here, using an image from the assets).
- A `Text` component to display a privacy notice or other relevant information.
### Styling
- The component uses `StyleSheet` for styling:
- `container`: Styles for the main container, typically to center content and set the background color.
- `content`: Additional alignment styles for the content.
- `icon`: Styles for the image, including its size.
- `privacy`: Styles for the privacy text, including positioning at the bottom of the screen.
## Purpose and Usage
- **Initial Screen**: Acts as the first screen that users see upon launching the app, often used for branding purposes.
- **Transition Handling**: Provides a timed transition to the 'welcome' screen, enhancing the user experience.
- **Information Display**: Optionally displays important information, such as privacy policies, during the loading process.
---
# Documentation: `LogIn.js` in Mobile Application
## Overview
`LogIn.js` serves as the login screen for the application. It provides fields for users to enter their email address and password and includes functionality to authenticate users.
## Key Features and Functionality
### Imports
- React essentials: `React`, `useState`, `useEffect`.
- React Native components: `View`, `Text`, `TextInput`, `Pressable`, `StyleSheet`.
- `StatusBar` from `expo-status-bar` for the status bar appearance.
- `Icon` from `react-native-vector-icons/FontAwesome` for social media icons.
### LogIn Component
- **State Management**: Uses `useState` for handling user input in `email` and `password` fields.
- **Authentication Function (`checkConnection`)**:
- Sends a POST request to a specified URL with the user's credentials.
- Handles the response, including navigating to the 'home' screen upon successful login or displaying an alert for errors.
- **UI Elements**:
- `TextInput` components for email and password input.
- Pressable components for login, social media login options, and navigating to the registration screen.
- Icons for Google and Facebook sign-in options.
### Styling
- The component uses `StyleSheet` for styling:
- `container`: Defines the main container's layout and background color.
- `input`: Styles for the input fields.
- `buttonLogOrRegister` and `buttonMail`: Styles for the login and social media buttons.
- Text styling for different textual elements like headers, labels, and button texts.
## Purpose and Usage
- **User Authentication**: Facilitates user login by providing input fields for email and password and handling the authentication process.
- **Navigation**: Provides options for users to navigate to the registration screen or log in using social media accounts.
- **User Feedback**: Displays alerts for any errors during the login process or confirms successful login.
---
# Documentation: `MyAreas.js` in Mobile Application
## Overview
`MyAreas.js` functions as a screen within the app where users can view and interact with different services or functionalities, referred to as "areas." It uses images and text to represent these areas and includes a search functionality.
## Key Features and Functionality
### Imports
- Basic React imports: `React`.
- React Native components: `View`, `Image`, `TouchableOpacity`, `Text`, `TextInput`, `StyleSheet`.
- `MaterialIcons` from `@expo/vector-icons` for iconography.
### MyAreas Component
- **Image Click Handler (`handleImageClick`)**: A function to handle clicks on images, currently logging the clicked image's name.
- **UI Structure**:
- **Header**: Contains a search icon and a `TextInput` for searching areas.
- **Area Representations**: Uses `TouchableOpacity` components, each containing an `Image` and a `Text` element to represent different areas. The `onPress` event is wired to the `handleImageClick` function.
- **Footer**: Includes several icons (home, search, mail, notifications, settings) using `MaterialIcons`.
### Styling
- The component uses `StyleSheet` for styling:
- `container`: Style for the main container, including alignment and background color.
- `header`: Style for the header section, containing the search functionality.
- `image` and `overlayText`: Styles for the images representing the areas and the text overlay on these images.
- `footer`: Style for the footer section, including the layout of the icons.
## Purpose and Usage
- **Area Display**: Showcases various areas or services in the app.
- **User Interaction**: Allows users to interact with these areas, potentially leading to more detailed views or actions related to each area.
- **Navigation and Search**: Provides basic navigation options and a search feature for finding specific areas.
---
# Documentation: `Profile.js` in Mobile Application
## Overview
`Profile.js` is structured as a user profile page where users can view their personal information and access various account-related actions such as editing their profile, managing notifications, changing passwords, and logging out.
## Key Features and Functionality
### Imports
- Basic React import: `React`.
- React Native components: `View`, `Text`, `TouchableOpacity`, `Image`, `StyleSheet`, `ScrollView`.
- `Ionicons` from `@expo/vector-icons` for various icons.
### ProfilePage Component
- **User Information**: The `user` object contains placeholder information such as the user's name and profile image URL.
- **Navigation Functions**: Placeholder functions (`navigateToEditProfile`, `navigateToNotifications`, `navigateToChangePassword`, `handleLogout`) are defined but not implemented. They are intended for handling navigation and actions related to the profile.
- **UI Structure**:
- **NavBar**: Contains icons and title at the top.
- **Background Image**: A full-screen background image for aesthetic purposes.
- **ScrollView**: Wraps the content to ensure the view is scrollable when content overflows.
- **Content Container**: Displays the user's profile image and name, and buttons for various actions.
- **Footer**: Contains additional navigation options.
### Styling
- The component uses `StyleSheet` for styling:
- `container`: General style for the main view.
- `navBar`, `backgroundImage`, `scrollContainer`, `contentContainer`: Styles for layout elements.
- `button`, `logoutButton`: Styles for action buttons.
- `footer`: Style for the footer navigation bar.
## Purpose and Usage
- **Profile Management**: Allows users to view and edit their profile information.
- **Account Actions**: Provides buttons for managing notifications, changing passwords, and logging out.
- **Navigation**: Includes a footer with additional navigation options.
- **Aesthetic Design**: Offers a visually appealing layout with a background image and styled components.
---
# Documentation: `Service.js` in Mobile Application
## Overview
`ServiceInfos.js` is a JavaScript object that acts as a configuration or data store for different services integrated into the application. Each service is identified by a unique key and contains several properties that define its characteristics and behavior within the app.
## Structure and Functionality
### Service Configuration
- The `datas` object contains multiple service configurations. Each key represents a different service.
- **Common Properties**:
- `name`: The display name of the service.
- `boxColor`: The background color used for the service's box in the UI.
- `iconColor`: The color of the icon representing the service.
- `description`: A brief description of the service.
- `image`: The name of the icon used to visually represent the service.
- `handle_connect`: Commented out, but intended for functions handling service-specific login or connection processes.
### Services Included
1. **Github**: Black and white theme, using a Github icon.
2. **Gmail**: White and red theme, represented with an envelope icon.
3. **Linkedin**: Blue and white theme, using a Linkedin icon.
4. **Spotify**: White and green theme, with a Spotify icon.
5. **Trello**: White and blue theme, represented with a Trello icon.
6. **Meteo (Weather)**: White and blue theme, using a Google icon (likely a placeholder).
7. **Rss**: White and green theme, with an RSS icon.
## Purpose and Usage
- **UI Consistency**: Provides consistent color and iconography for each service across the application.
- **Centralized Configuration**: Offers a single source of truth for service-related properties, making it easier to manage and update service details.
- **Extendibility**: Easily extendable to include more services or properties as needed.
---
# Documentation: `SignUp.js` in Mobile Application
## Overview
`SignUp.js` is a component that facilitates the user registration process. It includes input fields for username, email, password, and confirmation of password, along with a checkbox for terms of service agreement.
## Key Features and Functionality
### Imports
- Basic React import: `React`, `useState`.
- React Native components: `StyleSheet`, `Text`, `TextInput`, `View`, `Pressable`.
- `CheckBox` from `react-native-elements` for the terms of service agreement.
### SignUp Component
- **State Management**: Uses `useState` for handling user input for name, email, password, and confirmation password, as well as for error messages and terms of service checkbox state.
- **Registration Handler (`handleRegister`)**:
- Validates input fields and sets an error message if any field is invalid or passwords do not match.
- Calls `checkConnection` if validations pass.
- **Server Communication (`checkConnection`)**:
- Sends a POST request to a specified URL with the user's registration data.
- Handles the server's response, including navigation to the token screen on successful registration or displaying an alert for errors.
### UI Elements
- Input fields for username, email, password, and password confirmation.
- A `CheckBox` for terms of service agreement.
- Pressable components for submitting the registration form and for navigating to the login screen.
### Styling
- The component uses `StyleSheet` for styling:
- Styles are defined for text, input fields, buttons, and checkbox.
- Color scheme and layout ensure a user-friendly interface.
## Purpose and Usage
- **User Registration**: Allows new users to register for an account in the app.
- **Validation and Feedback**: Provides input validation and user feedback, ensuring the user inputs valid and matching information.
- **Navigation**: Offers an option to switch to the login screen for existing users.
---
# Documentation: `Token.js` in Mobile Application
## Overview
`Token.js` is a component that provides a user interface for token verification. It is typically used as part of a registration or login process where a user needs to verify their identity or email address through a token sent to them.
## Key Features and Functionality
### Imports
- Basic React import: `React`, `useState`.
- React Native components: `Pressable`, `StyleSheet`, `Text`, `TextInput`, `View`.
### Token Component
- **State Management**: Uses `useState` to handle the user's input for the token.
- **Props**:
- `navigation`: Used to navigate between screens.
- `route`: Used to receive parameters (like `Email`) passed from the previous screen.
- **Token Verification (`checkToken`)**:
- Sends a PUT request to a specified URL with the user's email and token for verification.
- Handles the response, including navigation to the 'login' screen upon successful verification or displaying an alert for errors.
### UI Elements
- A `TextInput` field for users to enter the token.
- A `Pressable` component acting as a submit button for token verification.
- Instructional text to guide the user on what to do with the input field.
### Styling
- The component uses `StyleSheet` for styling:
- Styles are defined for the container, input field, and button.
- The layout ensures a user-friendly interface, with a focus on simplicity and readability.
## Purpose and Usage
- **User Verification**: Enables the app to verify the user's identity or email address as part of a security process.
- **Navigation Control**: Directs the user to the appropriate screen based on the outcome of the token verification.
- **User Interaction**: Provides an interactive and responsive interface for token input and submission.
---
# Documentation: `Welcome.js` in Mobile Application
## Overview
`Welcome.js` functions as an introductory screen, typically the first screen a user sees after launching the app. It presents a welcoming interface and guides users to the next step, usually the login or registration process.
## Key Features and Functionality
### Imports
- Basic React import: `React`.
- React Native components: `View`, `Image`, `Text`, `TouchableOpacity`, `StyleSheet`.
### Welcome Component
- **Navigation Prop**: Accepts `navigation` to handle screen transitions within the app.
- **UI Elements**:
- **Images**: Uses `Image` components to display one or more introductory graphics (`AREA1.png` and `business.png`).
- **Navigation Button**: A `TouchableOpacity` component acts as a button, guiding users to the login screen upon being pressed.
### Styling
- The component uses `StyleSheet` for styling:
- `container`: Defines the layout and background color of the main view.
- `imagesContainer`: Styles the container holding the images.
- `image`: Styles for the images, including size and margin.
- `button` and `buttonText`: Styles for the navigation button and its text.
## Purpose and Usage
- **First Impression**: Provides a visually appealing first look at the app, setting the stage for the user experience.
- **User Engagement**: Encourages users to proceed to the login or registration screen, facilitating user onboarding.
- **Brand Representation**: Offers an opportunity to showcase the app's brand or theme through imagery and design.
---
# Documentation: Dockerfile pour l'Application Web
## Vue d'ensemble
Ce Dockerfile crée un environnement pour exécuter une application Web Node.js dans un conteneur Docker. Il définit le système de base, la structure des répertoires, les dépendances et la commande de démarrage de l'application.
## Détails du Dockerfile
1. **FROM node:20.10.0**
- Cette instruction initie le `Dockerfile` avec une image de base, ici `node:20.10.0`. Cela signifie que votre conteneur utilisera une image officielle Node.js version 20.10.0.
2. **USER root**
- Définit l'utilisateur du conteneur en tant que `root`. Cela donne des privilèges administratifs dans le conteneur.
3. **SHELL ["/bin/bash", "-c"]**
- Spécifie le shell par défaut pour les commandes RUN suivantes. Ici, il est configuré pour utiliser `bash`.
4. **WORKDIR /app**
- Définit le répertoire de travail dans le conteneur Docker. Toutes les commandes suivantes seront exécutées dans `/app`.
5. **COPY . /app/**
- Copie tous les fichiers du répertoire actuel (où se trouve le Dockerfile) dans le répertoire `/app` du conteneur.
6. **EXPOSE 8081**
- Indique que le conteneur écoute sur le port 8081. Cela sert de documentation et aide lors de l'exécution du conteneur à mapper les ports.
7. **RUN ls src/**
- Exécute la commande `ls src/` dans le conteneur, listant le contenu du répertoire `src`. Cela semble être utilisé à des fins de vérification ou de débogage.
8. **RUN yarn**
- Exécute `yarn` pour installer les dépendances du projet. Cela suppose que `yarn.lock` ou `package.json` est présent pour définir ces dépendances.
9. **CMD ["npm", "start"]**
- Définit la commande par défaut à exécuter lorsque le conteneur démarre. Ici, cela lance l'application en utilisant `npm start`.
## Utilisation et Fonctionnement
- Lors de la construction de l'image Docker (`docker build`), ces instructions sont exécutées pour préparer l'environnement de votre application Web.
- Après la construction, lorsque le conteneur basé sur cette image est lancé (`docker run`), il exécutera `npm start` pour démarrer l'application Web.
---
# Documentation Technique: Application Web React
## Fichier `App.js`
### Importations
- React et composants de `react-router-dom` pour le routage dans l'application.
- `GoogleOAuthProvider` de `@react-oauth/google` pour l'intégration de l'authentification Google.
- Différents composants de pages et de services.
### Structure
- Un composant fonctionnel `App` qui définit la structure de routage de l'application.
- Utilise `BrowserRouter` et `Routes` pour définir les chemins vers les différents composants de pages.
- Chaque `Route` est mappée à un composant de page correspondant.
- Intègre `GoogleOAuthProvider` autour du composant `LogInPage` pour activer l'authentification Google.
### Routage
- Définit les chemins pour la page de chargement, les pages de connexion, d'inscription, les pages principales de l'application, les services spécifiques comme Spotify et une page pour les chemins non reconnus (NotFound).
## Fichier `App.css`
### Styles Globaux
- `.App`: Style pour le conteneur principal, limitant la largeur et la hauteur.
- `*`: Reset CSS pour éliminer les marges, les paddings par défaut et fixer le `box-sizing`.
- `a`: Style pour les liens pour enlever la décoration de texte et fixer la couleur.
## Fichier `index.js`
### Importations et Rendu
- Importe React et ReactDOM pour le rendu de l'application.
- Importe le composant `App`.
- Utilise `ReactDOM.createRoot` pour créer la racine du DOM et le rendu du composant `App`.
---
# Documentation Technique des Composants Web
## Composant `Button`
### Fichier `button.js`
- **Fonctionnalité**: Ce composant crée un bouton HTML personnalisable avec un style et des enfants (contenu) passés en props.
- **Props**:
- `buttonStyle`: Classe CSS personnalisée pour le style du bouton.
- `children`: Contenu à afficher dans le bouton.
- `href`: Lien optionnel, si présent, le bouton est enveloppé dans une balise `<a>`.
### Fichier `style.css`
- **Style de Base**: Le bouton a un style par défaut avec un arrière-plan bleu, centrage du contenu, bordures arrondies et animation.
- **Interactivité**: L'effet de survol (`:hover`) augmente légèrement la taille du bouton.
## Composant `Input`
### Fichier `input.js`
- **Fonctionnalité**: Crée un champ de saisie (`<input>`) avec une étiquette optionnelle (`<label>`).
- **Props**:
- `label`: Texte de l'étiquette.
- `labelStyle`: Classe CSS pour le style de l'étiquette.
- `type`: Type de l'input, par défaut "text".
- `name`: Nom et id de l'input, utilisé pour l'association avec l'étiquette.
### Fichier `style.css`
- **Styles**: Le conteneur de l'input (`inputBox`) est en flex pour une mise en page verticale. Le champ de saisie (`inputStyle`) a un fond et des bordures personnalisés, avec un focus clair.
## Composant `NavBar`
### Fichier `index.js`
- **Fonctionnalité**: Barre de navigation avec liens et images.
- **Utilisation de `useNavigate` de `react-router-dom`**: Pour la redirection conditionnelle basée sur l'état de connexion de l'utilisateur.
- **Utilisation d'`useEffect`**: Pour vérifier l'état de connexion au montage du composant.
- **Contenu**:
- Liens vers les pages principales de l'application.
- Images pour le logo et l'icône du titre.
- Image de profil de l'utilisateur (si disponible).
### Fichier `style.css`
- **Styles de la NavBar**: Un style flexible avec un alignement des éléments
, centré et réactif. La couleur de fond bleue et les éléments de texte blancs offrent un contraste élevé pour une meilleure visibilité.
- **Styles des Liens et des Images**: Les liens sont décorés pour indiquer l'interaction, et les images sont stylisées pour s'aligner correctement avec les éléments de texte.
- **Animation de Survol**: Les images et les liens dans la barre de navigation bénéficient d'effets de survol pour une interactivité améliorée, comme un agrandissement subtil et des transitions de soulignement.
---
# Documentation Technique: Intégration de Services dans l'Application Web
## Composant `NavBar` (src/component/navbar)
### Style (`style.css`)
- **Structure de Base**: Utilise `flex` pour un layout réactif. Inclut la barre de navigation, la boîte de titre, et les liens de navigation.
- **Style et Animation**: Couleur de fond bleue, texte blanc, et animations pour les liens lors du survol.
### Fonctionnement (`index.js`)
- **Navigation et Redirection**: Utilise `useNavigate` de `react-router-dom` pour la navigation conditionnelle.
- **Structure**: Composé d'images pour le logo, des liens de navigation, et d'une image de profil utilisateur.
- **État de Connexion**: Vérifie si l'utilisateur est connecté et redirige vers la page de connexion si nécessaire.
## Service GitHub (src/services/github.js)
### Fonction `handle_github_login`
- **Authentification OAuth GitHub**: Redirige l'utilisateur vers la page d'authentification GitHub avec une URL spécifique.
- **Récupération du Code**: Après authentification, récupère le `code` retourné par GitHub pour l'échange du token.
### Composant `Github`
- **Communication avec l'API GitHub**: Utilise Axios pour envoyer le code reçu et obtenir un token d'accès.
- **Gestion des Réponses**: Traite la réponse de l'API, enregistre les informations de l'utilisateur et gère les erreurs.
## Service Spotify (src/services/spotify.js)
### Fonction `handle_spotify_login`
- **Authentification OAuth Spotify**: Crée une URL d'autorisation Spotify et redirige l'utilisateur pour l'authentification.
- **Scopes Requis**: Définit les permissions nécessaires pour l'accès à l'API Spotify.
### Composant `Spotify`
- **Commenté**: Le code actuel est commenté, indiquant une possible mise en attente ou un développement en cours.
## Service Trello (src/services/trello.js)
### Fonction `handle_trello_login`
- **Authentification Trello**: Redirige vers la page d'authentification de Trello avec des paramètres spécifiques, comme le `client_id`.
### Composant `Trello`
- **Récupération du Token**: Après authentification, récupère le token d'accès dans l'URL.
- **Fetch des Informations de l'Utilisateur**: Utilise le token pour récupérer les informations de l'utilisateur via l'API Trello et les enregistre.
# Server
# Express Server Component Documentation: Main Application File
This documentation describes the main application file of an Express server. The file includes routing for various endpoints, middleware configurations, database interactions, and email sending functionalities.
## Overview
The file creates an Express application and configures it with various routes to handle HTTP requests for registration, login, verification, user retrieval, GitHub events, and user deletion. It also configures a nodemailer transporter for sending emails.
## Component Structure
### Dependencies and Initial Setup
- express: Web framework for Node.js.
- body-parser: Middleware for parsing request bodies.
- validator: Used for email validation.
- dotenv: Loads environment variables from a .env file.
- cors: Enables Cross-Origin Resource Sharing.
- nodemailer: Allows sending emails.
- port: Server port number from environment variables.
### Middleware Configuration
- CORS is enabled for all routes.
- express.json() and express.urlencoded({extended:false}) are used for request body parsing.
### Nodemailer Transporter
- Configured with Gmail service and authentication credentials.
### Utility Functions
- isEmailValid(email): Validates an email address.
- generateRandomString(length): Generates a random string of specified length.
### Routes
- GET /: A simple route for testing server responsiveness.
- POST /register: Handles user registration, checks if the email is valid and unique, inserts a new user into the database, and sends a verification email.
- PUT /verify: Verifies user accounts with a token sent via email.
- GET /user: Retrieves all user data.
- POST /git: Placeholder for handling GitHub events.
- DELETE /delete: Deletes a user by ID.
- POST /login: Authenticates a user.
- Additional route for GitHub authentication using a separate router.
### Server Listening
- The application listens on the specified port for incoming requests.
## Usage
1. Ensure all dependencies are installed via npm or yarn.
2. Set up environment variables (e.g., database credentials, server port, email credentials) in a .env file.
3. Run the server using Node.js:
bash
node path-to-this-file.js
## Example
To start the server, navigate to the directory where this file is located and run:
bash
node server.js
Replace server.js with the actual file name if different.
## Conclusion
This Express application file establishes a backend server with multiple endpoints for user management and integration with external services like email and GitHub. The configuration and routes provided form the core of a backend system that could be part of a larger web application.
# Mobile
## React Native Login Component Documentation
This documentation details a React Native component named Login. This component is designed for a login screen, providing user interface elements for email and password input, options for social media login, and navigation to other screens upon successful login or registration.
## Overview
The Login component is a functional component that utilizes React's useState hook for managing state. It includes text inputs for email and password, buttons for logging in, and links for social media sign-ins.
## Component Structure
### States
- Email: Stores the user's email address.
- password: Stores the user's password.
### Functions
- checkConnection(mail, pass): This asynchronous function takes email and password as arguments. It makes a POST request to a specified URL (in this case, https://deciding-oyster-probably.ngrok-free.app/login) with the email and password. Depending on the response status, it navigates to the profile screen or shows an alert message.
- moveToProfile(): Navigates to the ListServices screen.
### Return (JSX)
- Text Input for Email: Takes and updates the email state.
- Text Input for Password: Takes and updates the password state, with secure text entry for privacy.
- Login Button: On press, calls checkConnection with the current states of Email and Password.
- Social Media Login Options: Buttons for Google and Facebook login (functionality to be implemented).
- Navigation to the Register screen.
## Styles
The component uses StyleSheet from react-native for styling. Styles are defined for the container, text inputs, buttons, and other text elements, focusing on layout, color, and typography.
## Dependencies
- expo-status-bar: Provides the status bar component.
- react-native-vector-icons/FontAwesome: Used for social media icons.
## Usage
To use this component in a React Native application:
1. Import the Login component.
2. Include it in your navigation stack or render it as needed.
3. Ensure that the navigation prop is passed if you're using React Navigation for screen transitions.
## Example
jsx
import React from 'react';
import Login from './path-to-Login'; // Adjust the import path as needed
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} />
{/* Other screens */}
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
# WEB
# React Router Component Documentation: App Component
This documentation describes the App component in a React application. This component is responsible for setting up the routing for the application using React Router. It also integrates Google OAuth for the login functionality.
## Overview
The App component is a functional component that uses BrowserRouter and Routes from react-router-dom to define a series of Route components. Each route maps a path in the URL to a specific React component, representing a page in the application.
## Component Structure
### Routes
- /: The root path is linked to the LoadingPage component.
- /login: Renders the LogInPage component within a GoogleOAuthProvider context.
- /signup: Mapped to the SignUpPage component.
- /token: Displays the TokenPage.
- /home: Links to the HomePage.
- /applets: Routes to the AppletPage.
- /areas: Directs to the AreaPage.
- /profil: Opens the ProfilPage.
- /spotify: Shows the SpotifyPage.
- *: A wildcard route that catches all other paths and directs to NotFoundPage.
### Google OAuth Provider
- For the login page, the GoogleOAuthProvider component from @react-oauth/google wraps the LogInPage. It requires a clientId which is specific to the application's OAuth credentials set up in Google Cloud Platform.
## Usage
To use this component:
1. Ensure you have react-router-dom and @react-oauth/google installed.
2. Place the App component at the root of your React application.
## Example
Here's how you might use App in the main entry file of a React application:
```js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // Adjust the import path as needed
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
```
Here, the overview on the database structure :
Google Drive
Gist
Clipboard
Sign in with Wallet
