Skip to content

technical_report.md

Latest commit

 

History

History
265 lines (203 loc) · 11.8 KB

technical_report.md

File metadata and controls

265 lines (203 loc) · 11.8 KB

Robu App Technical Report: Full Feature & Technology Overview

Overview

The Robu app is a cross-platform mobile application built with Flutter and Dart, integrating advanced features such as user authentication, profile management, real-time machine vision, hardware interaction, and rich content delivery. The backend is powered by Node.js, Express, and MongoDB, providing secure API endpoints, user management, and data storage. The app leverages a range of modern libraries and services to deliver a seamless user experience.

1. User Authentication & Registration

1.1 Technologies Used

  • Flutter: UI and logic for forms and navigation
  • Provider: State management for authentication status
  • Node.js + Express: REST API for authentication endpoints
  • MongoDB: User data storage
  • JWT (JSON Web Tokens): Secure, stateless authentication
  • Shared Preferences: Local storage of login state

1.2 Implementation

  • The app presents login and registration forms, validating user input on the client side.
  • Credentials are sent securely to the backend API.
  • The backend verifies credentials, manages user records in MongoDB, and issues JWTs for authenticated sessions.
  • JWTs are stored locally and attached to subsequent API requests for protected resources.
  • The app maintains login state using Provider and Shared Preferences, enabling persistent sessions.

1.3 Workflow

  1. User opens the app and is presented with login or registration options.
  2. User submits credentials, which are validated and sent to the backend.
  3. Backend authenticates the user, issues a JWT, and returns user data.
  4. The app stores the JWT and updates the authentication state.
  5. Authenticated users are navigated to the main dashboard; unauthenticated users remain on the login screen.

2. Profile Management

2.1 Technologies Used

  • Flutter: UI for profile display and editing
  • Provider: State management for profile data
  • Node.js + Express: API for profile CRUD operations
  • MongoDB: Storage of user profile information
  • Image Picker (Flutter): For profile photo updates
  • Multer (Node.js): For handling file uploads on the backend

2.2 Implementation

  • Users can view and edit their profile information, including name, email, and profile picture.
  • Profile updates are sent to the backend, which validates and persists changes in MongoDB.
  • Profile images are uploaded via multipart requests and stored on the server or cloud storage.
  • The app fetches and displays the latest profile data, updating the UI in real time.

2.3 Workflow

  1. User navigates to the profile section.
  2. The app fetches current profile data from the backend.
  3. User edits profile fields or selects a new profile picture.
  4. Changes are submitted to the backend, which updates the database and returns the updated profile.
  5. The app refreshes the displayed profile information.

3. Navigation & Drawer

3.1 Technologies Used

  • Flutter: Custom drawer and navigation widgets
  • Provider: State management for navigation state

3.2 Implementation

  • The app features a side navigation drawer, providing access to all major sections (Home, Profile, Info, Settings, etc.).
  • The drawer displays user information and navigation options.
  • Navigation state is managed to ensure smooth transitions and context-aware UI updates.

3.3 Workflow

  1. User opens the navigation drawer from any screen.
  2. The drawer displays available sections and user info.
  3. User selects a section, and the app navigates to the corresponding screen.

4. Home & Dashboard

4.1 Technologies Used

  • Flutter: Modular widgets for dashboard sections
  • Provider: State management for dashboard data
  • Node.js + Express: API for fetching dashboard content
  • MongoDB: Storage of dashboard-related data

4.2 Implementation

  • The home screen aggregates key information and quick actions for the user.
  • Data is fetched from the backend and displayed using custom widgets.
  • The dashboard may include summaries, notifications, and shortcuts to major features.

4.3 Workflow

  1. User logs in and is directed to the home/dashboard screen.
  2. The app fetches dashboard data from the backend.
  3. The dashboard displays relevant information and actionable items.

5. Podcast

5.1 Technologies Used

  • Flutter: User interface for podcast browsing and playback
  • Audio Player (Flutter): For streaming and playing podcast audio
  • Node.js + Express: API for serving podcast metadata and audio URLs
  • MongoDB: Storage of podcast metadata and links

5.2 Implementation

  • The app fetches a list of available podcasts from the backend, including titles, descriptions, and audio URLs.
  • Users can browse, search, and select podcasts to listen to.
  • The integrated audio player streams and plays podcast episodes, supporting play, pause, seek, and resume.
  • Playback state is managed to allow users to continue listening from where they left off.

5.3 Workflow

  1. User navigates to the Podcast section in the app.
  2. The app fetches and displays a list of available podcasts from the backend.
  3. User selects a podcast episode to play.
  4. The audio player streams and plays the selected episode, providing playback controls.
  5. User can pause, seek, or resume playback at any time.

6. Tutorial

6.1 Technologies Used

  • Flutter: User interface for tutorial browsing and viewing
  • Video Player (Flutter): For playing tutorial videos
  • Node.js + Express: API for serving tutorial metadata and video URLs
  • MongoDB: Storage of tutorial metadata and links

6.2 Implementation

  • The app fetches a list of available tutorials from the backend, including titles, descriptions, and video URLs.
  • Users can browse, search, and select tutorials to view.
  • The integrated video player streams and plays tutorial videos, supporting play, pause, seek, and resume.
  • The UI may include progress tracking and bookmarking for tutorials.

6.3 Workflow

  1. User navigates to the Tutorial section in the app.
  2. The app fetches and displays a list of available tutorials from the backend.
  3. User selects a tutorial to view.
  4. The video player streams and plays the selected tutorial, providing playback controls.
  5. User can pause, seek, or resume playback, and may track progress or bookmark tutorials.

7. Machine Learning & Computer Vision (Machine Vision)

7.1 Technologies Used

  • Flutter: UI and camera integration
  • Google ML Kit Face Detection: Real-time face detection and landmark extraction
  • Camera (Flutter): Access to device camera and live video streaming
  • flutter_serial_communication: Serial communication with external hardware (e.g., Arduino)
  • Custom Painters (Flutter): Visualization of detection results

7.2 Implementation

  • The app uses the device camera to capture live video frames.
  • Each frame is processed using ML Kit's face detection model to identify faces, facial landmarks, and contours in real time.
  • Detected faces are visualized with bounding boxes and landmarks overlaid on the camera feed.
  • The number of faces and their coordinates are displayed to the user.

7.3 Workflow

  1. User opens the Machine Vision feature.
  2. The app lists available serial devices (e.g., Arduino) and allows the user to connect.
  3. The camera feed is displayed, and face detection runs in real time.
  4. When a face is detected, its coordinates are sent to the Arduino.
  5. The Arduino processes the coordinates and performs actions (e.g., toggling an LED).

8. Arduino Serial Monitor

8.1 Technologies Used

  • Flutter: User interface for serial monitoring and device selection
  • flutter_serial_communication: Serial communication with external hardware (e.g., Arduino)
  • Arduino: Microcontroller for receiving and sending serial data
  • Node.js + Express (optional): For logging or relaying serial data to backend (if implemented)

8.2 Implementation

  • The app scans for available serial devices connected to the host (e.g., Arduino boards).
  • Users can select a device and establish a serial connection directly from the app.
  • The app provides a real-time serial monitor interface, displaying incoming data from the Arduino and allowing users to send commands or data back.
  • Serial data is parsed and visualized in the UI, supporting both text and structured data formats.
  • The monitor can be used for debugging, controlling hardware, or visualizing sensor data in real time.
  • Optionally, serial logs or events can be sent to the backend for storage or further processing.

8.3 Workflow

  1. User opens the Serial Monitor feature in the app.
  2. The app lists available serial devices and allows the user to select and connect to one.
  3. Once connected, the app displays a real-time feed of incoming serial data from the Arduino.
  4. The user can type and send commands or data to the Arduino via the app interface.
  5. The Arduino processes incoming commands and may respond with data, which is displayed in the app.
  6. The user can disconnect or switch devices as needed.

9. Content & Information Delivery

9.1 Technologies Used

  • Flutter: UI for displaying content (text, images, videos)
  • Video Player (Flutter): For playing video content
  • Node.js + Express: API for serving content
  • MongoDB: Storage of content metadata and links

9.2 Implementation

  • The app provides access to informational content such as alumni stories, videos, and documentation.
  • Content is fetched from the backend and displayed in a user-friendly format.
  • Video content is played using integrated video player widgets.

9.3 Workflow

  1. User navigates to the Info section.
  2. The app fetches available content from the backend.
  3. User selects an item to view details or play a video.
  4. The app displays the content or plays the video inline.

10. Push Notifications

10.1 Technologies Used

  • OneSignal: Push notification service
  • Flutter: Integration with OneSignal SDK
  • Node.js + Express: Backend triggers notifications via OneSignal API

10.2 Implementation

  • The app registers with OneSignal to receive push notifications.
  • The backend can send targeted notifications to users (e.g., updates, alerts).
  • Notifications are displayed in the system tray and can trigger in-app actions.

10.3 Workflow

  1. User installs and opens the app, which registers with OneSignal.
  2. The backend sends notifications via the OneSignal API.
  3. The app receives and displays notifications to the user.

11. Update Checking & Utilities

11.1 Technologies Used

  • Flutter: Custom utility widgets
  • URL Launcher: For opening external links
  • Update Checker: For checking app version and prompting updates

11.2 Implementation

  • The app checks for updates and notifies users if a new version is available.
  • Users can open external links (e.g., documentation, support) directly from the app.

11.3 Workflow

  1. On startup or on demand, the app checks for updates.
  2. If an update is available, the user is prompted to download the latest version.
  3. Users can access external resources via integrated links.

12. Security & Privacy

12.1 Technologies Used

  • JWT: Secure, stateless authentication
  • HTTPS: Secure communication between app and backend
  • On-device Processing: All face detection is performed locally; no images are sent to external servers

12.2 Implementation

  • All sensitive operations are protected by authentication and secure communication.
  • Users control when the camera is active and which devices are connected.
  • Personal data is stored securely and only accessible to authenticated users.

This report provides a comprehensive overview of the Robu app's technical architecture and feature workflows, highlighting the integration of modern technologies for authentication, machine vision, hardware interaction, content delivery, and user experience.