participants

조장(BE): 윤수현

BE : 정종운

FE : 배민중

FE : 백승범

Link

• Organization
• Frontend Repository
• Backend Repository

• Outline

• Project Content

• Usage Technology Stack

• Getting Started

• License

This project is an app/widget development project based on the webOS so that users can obtain meaningful information even in a standby state.

When the display is in a standby state, it is necessary to develop an app that allows users to receive meaningful information (standby function) By implementing a function to provide various information while minimizing battery usage, it aims to develop an app that can obtain information in real time or continuously even while waiting

① Standby Screen App/Widget Development

• Objective: Develop a standby app/widget that continuously provides information tailored to the needs of the user, using minimal battery even when the device is in the standby state.
• Features: It provides widget functions such as slide show (image), weather (temperature, precipitation, fine dust, etc.), schedule list (calender, to-do list), and media player. It minimizes battery consumption through dimming function, which automatically reduces screen brightness after 20 seconds even in standby state.

② Implementing Web App Features

• User login service: It loads the standby settings for each user through the login function and provides a screen tailored to the settings of the logged-in user. In addition, through the user dashboard, functions to be displayed on the standby screen can be selected and stored, and a real-time preview screen is provided. At this time, widgets and functions can be set directly on the app screen through the UI controller.
• Standby Screen Customization: Various widgets are customized to suit user needs and displayed on the standby screen. Additional functions are also developed and displayed on the screen. (e.g., slide show, weather information, schedule list, media play, medication notification, etc.)

This is the initial screen that appears when the application starts. The configured widgets are displayed here.

You can also add a wallpaper through the widget setting mode.(only web browser)

This screen allows users to access various features.

react-hook-form is used for validation, and useForm is utilized to manage login and signup states.

On login or signup -> The input values are sent to the server, and a token is received in response.

• Widget Mode displays the widgets. Additionally, you must log in first to add widgets
  

• Image Slide Mode displays an image slideshow. (will be updated)

Users can modify or delete widget positions on this screen. At this point, react-use-gesture is used to update the widget's position. After pressing the edit button, users can rearrange widget positions. Once editing is complete, pressing the save button updates the widget position array in local storage and also sends the changes to the server via an API.

Users can add their desired widgets on this screen. Widgets are categorized by type and size (L, M, S). Upon selecting a widget to add, users are directed to the widget editing page. During this process, the widget position and type arrays are updated in the user's local device and Server.

Clicking on a widget opens a modal where users can add schedules in the calendar widget.

When adding a calendar -> The calendar widget data is sent via an API, and users are directed to the widget editing page.

When deleting a calendar -> The calendar widget is deleted via an API. Simultaneously, the local storage data is updated, and the UI is reloaded to reflect the changes.

When adding a schedule -> The schedule title and content are received using react-hook-form. Clicking the "Add Schedule" button sends the data to the server. TanStack Query caches the data and updates it using a cache key.

When deleting a schedule -> The schedule is deleted via an API, and the cached data is also updated.

This is managed through a dimming provider. Using window.addEventListener, it detects mousemove, keydown, touchstart, and click events. If no such events are detected for 10 seconds, an additional layer is applied to darken the screen.

The Context API is used to globally manage and toggle between dark and light modes. Each mode's CSS values are globally managed to affect the UI.

• Light Mode

• Dark Mode

System Structure Chart

Database ERD

Api documents

✔️Back-end

Getting Started

Server Setup

The project uses Yarn 4.5.0 as its package manager, managed as a .cjs file in .yarn/releases. It requires Node.js version 18 or higher, and has been tested with version 22.5.1.

Environment Variables

Before running the project, you need to create an .env file in the project root. An example .env file is provided as example.env. Below are the descriptions of the environment variables:

• PORT: Port number on which the server will run. Ensure proper port forwarding in your firewall or router.
• DATABASE_URL: URL for accessing the PostgreSQL database.
• PASSWORD_ROUND: Integer value used for password hashing. A value between 1 and 100 is recommended.
• JWT_SECRET: String used for generating JWT tokens. Use a secure and non-obvious value.
• MAIL_USER: The email address used for sending emails in the password recovery API. Configuration details are provided below.
• MAIL_PASSWORD: The password associated with the email account specified in MAIL_USER.

Email Configuration

The find_password API works by sending emails. The following instructions explain how to configure a Gmail account:

1. Log in to your Gmail account, click the gear icon at the top right, and select "See all settings."

2. Navigate to the Forwarding and POP/IMAP tab, enable IMAP access, and save the changes.

Set your Gmail address as the value for the MAIL_USER environment variable.

3. Go to your Google Account settings and search for App Passwords. Generate an app password for Gmail. Copy the 16-character password and set it as the value for the MAIL_PASSWORD environment variable.

### Database Configuration

Ensure that the database is accessible using the DATABASE_URL environment variable. It is recommended to use Docker and Docker Compose for setting up PostgreSQL. Below is an example docker-compose.yml file for configuring the database:

services:
  db:
    image: postgres:17
    container_name: postgres
    restart: always
    ports:
      - '40001:5432'
    environment:
      - POSTGRES_PASSWORD=password
    volumes:
      - ./data/postgres/:/var/lib/postgresql/data

• image: Specifies the PostgreSQL image version (17).
• container_name: The name of the container. You can set this to any value.
• restart: Ensures the container always restarts, even after a server reboot.
• ports: Maps the container’s PostgreSQL port (5432) to a port on the host machine.
• environment: Sets the environment variables for the PostgreSQL image, including the database password.
• volumes: Maps a local directory to the container’s PostgreSQL data directory.

For more details on the PostgreSQL Docker image, visit the official documentation.

If you prefer not to use Docker, you can set up PostgreSQL locally, but the DATABASE_URL environment variable must still ensure proper connectivity.

Install Project Dependencies

After completing all configurations, run the following command to install project dependencies:

$ yarn install

Compile and Run the Project

Use one of the following commands to run the project. The server will use the port specified in the PORT environment variable.

# development
$ yarn run start

# watch mode
$ yarn run start:dev

# production mode
$ yarn run start:prod

How to package frontend app

Emulator

npm install -g @webos-tools/cli

Install the CLI tool using the above command.

npm build

Build the React app using the above command.

ares-package -n build

Package the built app into an IPK file using the webOS CLI tool.

ares-install your-app-name.ipk

Install the app onto the webOS emulator using the above command. After installation, run the app through the emulator.

Raspberry Pi

• ensure that you already has some ipk file from repository build command.

ares-setup-devices

before command it, Check your device connected at same network. (I recommand just you can use mobile hospot)

manually add your device information.

ares-install app.ipk -d TARGET_DEVICE

TARGET_DEVICE is input value of Device Name at previous command.

License

This project is licensed under the MIT License. MIT licensed.