b24014/Q-A_test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit
CI / typecheck (push) Successful in 1m8s
Details
CI / format (push) Failing after 1m6s
Details
CI / lint (push) Failing after 49s
Details
CI / test (push) Failing after 1m8s
Details

Browse Source
This commit is contained in:
SDI
2026-07-15 18:05:12 +09:00
commit 12e4f17b62
4633 changed files with 817125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/i18n/en/docusaurus-plugin-content-docs/current.json
+27
View File
@@ -0,0 +1,27 @@
{
"version.label": {
"message": "Next",
"description": "The label for version current"
},
"sidebar.docs.category.소개": {
"message": "Introduction",
"description": "The label for category Introduction in sidebar docs"
},
"sidebar.docs.category.사용자 가이드": {
"message": "User Guide",
"description": "The label for category User Guide in sidebar docs"
},
"sidebar.docs.category.설정": {
"message": "Settings",
"description": "The label for category Settings in sidebar docs"
},
"sidebar.docs.category.개발자 가이드": {
"message": "Developer Guide",
"description": "The label for category Developer Guide in sidebar docs"
},
"sidebar.docs.category.설치": {
"message": "Installation",
"description": "The label for category Installation in sidebar docs"
}
}
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/00-introduction/00-index.md
+40
View File
@@ -0,0 +1,40 @@
---
sidebar_position: 1
slug: /
---
# Welcome
Welcome! This documentation provides a comprehensive guide to ABC User Feedback.
![ABC User Feedback](/assets/cover.png)
## What is ABC User Feedback?
ABC User Feedback is a standalone web application designed to efficiently collect, classify, and manage Voice of Customer (VoC) feedback. It provides various features including a feedback tagging system, kanban mode, issue tracker, SSO authentication, and more. It is currently being used in a service with 10 million MAU.
<p align="center">
<video src="https://github.com/user-attachments/assets/a2ef7a1a-41ec-4cec-b7d1-bda5fbd7d48b" width="100%" />
</p>
## Key Features
- **Feedback Tagging System**: Classify and manage feedback by topic
- **Kanban Mode**: Efficiently visualize and manage issue groups
- **Issue Tracker Integration**: Track issues with status indicators and integrate with external systems
- **Single Sign-On (SSO)**: OAuth authentication supporting enterprise-grade authentication requirements
- **Role-Based Access Control (RBAC)**: Granular user permission management
- **Dashboard**: Visualize statistical data for feedback and issues
## Getting Started
- [Installation Guide](/en/developer-guide/installation/docker-hub-images) - Installation methods using Docker, CLI tools, or manual setup
- [Tutorial](/en/user-guide/getting-started) - Basic usage guide
## Get Support
Have questions or need help? Check out these resources:
- [GitHub Issues](https://github.com/line/abc-user-feedback/issues) - Bug reports and feature requests
- [GitHub Discussions](https://github.com/line/abc-user-feedback/discussions) - Community discussions
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/00-introduction/01-project-overview.md
+75
View File
@@ -0,0 +1,75 @@
---
sidebar_position: 1
title: "Project Overview"
description: "Introducing the project overview."
---
# Project Overview
## What is ABC User Feedback?
ABC User Feedback is a standalone web application designed to efficiently collect, classify, and manage Voice of Customer (VoC). This open-source solution focuses on systematically managing user feedback to derive insights needed for product and service improvements.
Currently, this application is being used in a service with 10 million Monthly Active Users (MAU), demonstrating proven stability for large-scale feedback processing.
## Core Value Proposition
ABC User Feedback provides the following core values:
1. **Centralized Feedback Management**: Manage user feedback collected from various channels in one place
2. **Structured Analysis**: Classify feedback and identify trends through the issue system
3. **Issue Tracking**: Convert problems found in feedback into issues and track them
4. **Data-Driven Decision Making**: Visualize feedback data and derive insights through dashboards
## Technology Stack
ABC User Feedback is built on modern web technologies:
- **Frontend**: [Next.js](https://nextjs.org/) - React-based frontend framework
- **Backend**: [NestJS](https://nestjs.com/) - Scalable backend framework based on TypeScript
- **Database**: [MySQL v8](https://www.mysql.com/) - Reliable relational database
- **Search Engine**: [OpenSearch v2.16](https://opensearch.org/) (Optional) - High-performance search functionality for large amounts of feedback data
## Architecture Overview
ABC User Feedback consists of the following main components:
1. **Web Admin Interface**: Next.js-based web application providing user interfaces for feedback management, issue tracking, dashboards, etc.
2. **API Server**: NestJS-based backend server handling data processing, business logic, authentication, etc.
3. **Database**: MySQL database storing feedback, issues, user information, etc.
4. **Search Engine**: OpenSearch (optional) providing high-performance search for large amounts of feedback data
5. **SMTP Server**: Component responsible for sending emails required for user authentication processes such as email verification during account creation and password reset
These components are containerized through Docker, making them easy to deploy and scale.
## Main Use Cases
ABC User Feedback is particularly useful in the following situations:
1. **Product Improvement Process**: Collect and analyze user feedback to set product improvement directions
2. **Customer Support**: Efficiently track and manage user inquiries and issues
3. **User Experience Optimization**: Improve UX/UI based on user opinions
4. **Quality Management**: Systematically manage bug reports and feature requests
5. **Data-Driven Decision Making**: Support strategic decision-making using user feedback statistics
## Differentiators
ABC User Feedback differentiates itself from other feedback management tools with the following features:
1. **Fully Open Source**: Unlike commercial solutions, it's completely free to use and customizable
2. **Enterprise-Grade Features**: Provides features needed for enterprise environments such as SSO authentication and RBAC
3. **Scalability**: Proven performance in large-scale user base (10 million MAU)
4. **Easy Integration**: Easy integration with existing systems through RESTful API and webhooks
5. **Containerization**: Easy deployment and scaling with Docker support
## Next Steps
To get started with ABC User Feedback, refer to the following documents:
- [Key Features](./02-key-features.md) - Detailed feature descriptions
- [Installation Guide](/en/developer-guide/installation/docker-hub-images) - Installation methods
---
This document provides a basic overview of ABC User Feedback. For more detailed information, refer to the documents in the relevant sections.
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/00-introduction/02-key-features.md
+173
View File
@@ -0,0 +1,173 @@
---
sidebar_position: 3
title: 'Key Features'
description: 'Introducing key features.'
---
# Key Features
ABC User Feedback provides various features to effectively collect, manage, and analyze user feedback. This document describes the core features in detail.
## Feedback Tagging System
![Feedback Tag](/assets/01-feedback-tag.png)
The feedback tagging system is a core feature for systematically classifying and managing large amounts of user feedback.
### Key Features
- **Multiple Issue Assignment**: Assign multiple issues to each feedback for multidimensional classification
- **Custom Issue Creation**: Create and manage customized issues tailored to project characteristics
- **Issue-Based Filtering**: Filter feedback by issue to focus on specific topics
- **Issue Statistics**: Derive insights through analysis of issue usage frequency and trends
### How to Use
1. Create issue categories and issues in the admin panel
2. Assign relevant issues to received feedback
3. Filter and analyze feedback by issue
4. Identify key issues and trends through issue usage patterns
## Kanban Mode
![Issue Kanban](/assets/02-Issue-Kanban.png)
Kanban mode is a feature for visually managing issue groups and optimizing workflows.
### Key Features
- **Intuitive Drag and Drop**: Simple interface for changing issue status
- **Status-Based Column Configuration**: Column separation based on issue progress status (e.g., To Do, In Progress, Done)
- **Workflow Visualization**: Understand team work processes and progress at a glance
- **Workload Management**: Monitor workload through the number of issues in each status
- **Filter and Sort**: Filter and sort issues in the kanban board by various criteria
### How to Use
1. Select kanban mode view
2. Check and manage issues by status
3. Change issue status with drag and drop
4. Optimize team workflows and identify bottlenecks
## Issue Tracker Integration
![Issue Tracker](/assets/03-issue-tracker.png)
Issue tracker integration is a feature for systematically managing problems or improvements found in feedback.
### Key Features
- **Status Indicators**: Visually display the current status of issues (New, In Progress, Resolved, etc.)
- **External System Integration**: Connect with issue tracker systems (JIRA)
### How to Use
1. Create issues from feedback or in the issue menu
2. Configure external issue tracker connection (optional)
3. Set issue details and issue tracking ticket
4. Monitor and update issue progress
5. Close issue after resolution
## Single Sign-On (SSO)
![Single Sign-on](/assets/04-single-signon.png)
Single Sign-On simplifies authentication processes in enterprise environments and enhances security.
### Key Features
- **OAuth Support**: Authentication support through various OAuth providers
- **Enterprise ID Integration**: Seamless integration with existing enterprise ID systems
- **Centralized User Management**: Manage user access through a single authentication system
- **Enhanced Security**: Apply multi-factor authentication and enterprise security policies
- **Simplified Login Experience**: No need for users to create additional accounts
### Supported SSO Providers
- Google
- Custom (Standard OAuth 2.0 and OpenID Connect providers)
### How to Use
1. Configure SSO provider in admin settings
2. Set authentication parameters and redirect URLs
3. Configure user attribute mapping
4. Enable and test SSO login
## Role-Based Access Control (RBAC)
![Role Management](/assets/05-role-management.png)
Role-Based Access Control is a feature for effectively managing user permissions and maintaining system security.
### Key Features
- **Predefined Roles**: Provides basic roles such as Administrator, Analyst, Viewer
- **Custom Role Creation**: Create customized roles and permissions tailored to organizational structure
- **Granular Permission Control**: Set access permissions by function and data
- **Role Assignment Management**: Assign and change roles per user
- **Permission Inheritance**: Support hierarchical permission structures
### How to Use
1. Access role management menu in admin panel
2. Create new roles or modify existing roles as needed
3. Assign appropriate roles to users
4. Regularly review permissions and access scope by role
## Dashboard
![Dashboard](/assets/06-dashboard.png)
The dashboard is a feature that visualizes feedback data to understand important insights at a glance.
### Key Features
- **Real-time Statistics**: Real-time display of key metrics such as feedback count, issue count, resolution rate
- **Trend Analysis**: Graphs showing feedback and issue trends over time
- **Issue Distribution**: Visualization of feedback distribution by issue
### Provided Charts and Widgets
1. **Feedback Summary Cards**: Key metrics such as total feedback count, new feedback, processed feedback
2. **Time Series Graphs**: Daily/weekly/monthly feedback trends
3. **Issue Status Donut Chart**: Distribution by issue status
### How to Use
1. Access the dashboard page
2. Adjust data range through period and filter settings
3. Analyze key metrics and trends
4. Derive insights-based decisions and action items
## Additional Features
In addition to the key features described above, ABC User Feedback provides the following additional features:
### API Integration
- Integration with external systems through RESTful API
- Programmatic feedback collection and management
### Webhooks
- Notify external systems when major events occur
- Support building automated workflows
### Image Storage Integration
- Manage user-submitted images through S3-compatible storage
- Attach screenshots and images to feedback
### Data Export
- Export feedback data in CSV, Excel formats
### Multi-Language Support
- Provide interfaces in various languages
- Multi-language feedback management for international teams
---
This document provides an overview of ABC User Feedback's key features. For more detailed usage of each feature, refer to the [User Guide](/en/user-guide/getting-started) section.
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/00-introduction/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 1,
"label": "Introduction"
}
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/01-getting-started.md
+263
View File
@@ -0,0 +1,263 @@
---
title: Getting Started
description: This document explains how to start the system from initial setup to collecting the first feedback after installing ABC User Feedback.
sidebar_position: 1
---
# Getting Started
After installing ABC User Feedback for the first time, initial setup is required to use the system. This document provides step-by-step guidance from tenant creation to collecting the first feedback.
---
## Initial Setup Overview
To start ABC User Feedback, proceed with the following setup steps in order:
1. **Create tenant and administrator account**
2. **First login and profile setup**
3. **Create project**
4. **Create channel and configure fields**
5. **Generate API key**
6. **Test first feedback collection**
---
## Accessing the System
If you need to install ABC User Feedback, first proceed with [Installation using Docker Hub images](/en/developer-guide/installation/docker-hub-images).
After completing the installation, access ABC User Feedback through a web browser:
```
http://localhost:3000
```
> If you changed the port or domain, enter the address according to your settings.
---
## Creating Tenant and Administrator Account
![member-register.png](/img/tenant.png)
When you first access the system, the **Tenant Creation and Administrator Account Registration** screen will be displayed.
### Step 1: Enter Tenant Information
Set the tenant name.
After entering the tenant name, click the **Next** button.
> This tenant name will be displayed in the login UI.
### Step 2: Create Administrator Account
Create the first administrator account for the system.
1. Enter the administrator account email and click the **Request Code** button.
2. Check the authentication code in your email inbox and enter it
3. Click the **Verify** button
4. After verification is complete, set a password.
:::info Password Requirements
- **At least 8 characters**
- **Include letters** (A–Z, a–z)
- **Include special characters** (e.g., `@`, `#`, `!`)
- **No consecutive characters** (e.g., `aa`, `11`)
> **Examples**: ✅ `MyCompany2024!`, ❌ `12345678`, `password`
:::
After tenant and administrator account creation is complete, a confirmation screen will be displayed.
**Next step**: Click the **Confirm** button to proceed to the login screen.
---
## Logging In
Log in for the first time with the created administrator account.
1. **Email**: Enter the administrator email registered earlier
2. **Password**: Enter the set password
3. Click the **Sign In** button
---
## Creating First Project
After logging in, the project creation wizard will automatically start.
### Understanding System Structure
ABC User Feedback has the following hierarchical structure:
```
Tenant (Organization)
└── Project (Product/Service Unit)
└── Channel (Feedback Collection Path)
```
### Step 1: Project Basic Information
| Item | Description | Example |
| --------------- | ------------------------------------------------- | ------------------------------------------- |
| **Name** | Project name | `Mobile App`, `Web Service` |
| **Description** | Project description (optional) | `Customer feedback collection and analysis` |
| **Time Zone** | Time reference (affects dashboard and statistics) | `Asia/Seoul` |
**After completion**: After entering the information, click the **Next** button.
### Step 2: Invite Team Members (Optional)
In this step, you can invite team members to the project. You can skip this now and add them later anytime.
### Step 3: Generate API Key (Optional)
You can pre-generate an API key for integration with external systems.
### Project Creation Complete
After entering all information, project creation will be complete.
**Select next step**:
- **Create Channel**: Immediately create a channel to start collecting feedback
- **Skip for Now**: Create channel later
---
## Creating First Channel
After project creation, you need to create a **channel** to actually collect feedback.
### Understanding Channel Concept
A channel represents a **feedback collection path**:
- Website inquiry form
- In-app feedback in mobile app
- Customer service VoC
- Survey responses
### Step 1: Channel Basic Information
| Item | Description | Example |
| ---------------------------------- | -------------------------------------------------------- | ---------------------------- |
| **Name** | Channel name | `Web Feedback`, `App Review` |
| **Description** | Channel description (optional) | `Website user opinions` |
| **Maximum Feedback Search Period** | Searchable period for feedback (30/90/180/365 days, all) | `90 days` |
**After completion**: After entering the information, click the **Next** button.
### Step 2: Field Configuration
Define the data structure to collect in the channel.
#### Default Fields
Fields automatically created by the system:
| Field Name | Format | Property | Description |
| ----------- | ----------- | --------- | --------------------- |
| `id` | number | Read Only | Unique feedback ID |
| `createdAt` | date | Read Only | Creation time |
| `updatedAt` | date | Read Only | Modification time |
| `issues` | multiSelect | Editable | List of linked issues |
#### Adding Custom Fields
Add custom fields for actual feedback collection:
1. Click the **Add Field** button
2. Enter field information:
| Item | Description | Example |
| ---------------- | ------------------------------------------------------------- | -------------------------------------------------------------------------- |
| **Key** | Unique identifier (uppercase/lowercase letters, numbers, `_`) | `message`, `rating` |
| **Display Name** | Name displayed in UI | `Feedback Content` |
| **Format** | Data format | `text`,`keyword`,`number`,`date`,`select`,`multiSelect`,`images`,`aiField` |
| **Property** | `Editable` (modifiable in UI) / `Read Only` (not modifiable) | `Editable` |
| **Status** | `Active` / `Inactive` | `Active` |
#### Recommended Default Field Configuration
For the first channel, it is recommended to add the following fields:
| Key | Display Name | Format | Description |
| ----------- | ---------------- | ------- | ------------------ |
| `message` | Feedback Content | text | User feedback |
| `userEmail` | User Email | keyword | Contact (optional) |
| `rating` | Satisfaction | number | 1-5 point rating |
### Field Preview
After completing field configuration, you can preview the feedback input screen with the **Preview** button.
**After completion**: Complete channel creation with the **Complete** button.
### Channel Creation Complete
**Next step**: Click the **Start** button to begin collecting feedback.
---
## Testing First Feedback Collection
After channel creation is complete, you can actually collect feedback.
### Registering Feedback via API
Let's register the first feedback using the created API key.
#### API Request Example
```bash
curl -X POST http://localhost:4000/api/projects/1/channels/1/feedbacks \
-H "Content-Type: application/json" \
-H "X-API-KEY: YOUR_API_KEY" \
-d '{
"message": "The app runs slowly",
"userEmail": "user@example.com",
"rating": 3
}'
```
> Replace `YOUR_API_KEY` with the actual API key created earlier.
#### Checking Success Response
If the API request succeeds, you will receive the following response:
```json
{
"id": 1
}
```
### Checking Feedback
Let's check the registered feedback in the web interface.
1. Click the **Feedback** tab in the top menu
2. Check the registered feedback in the feedback list
3. Click the feedback to view detailed information
### Creating First Issue
Let's create an issue based on the feedback.
1. In the feedback detail screen, click the **`+` button** in the **Issue** section
2. Enter the issue name and press **Enter** or click the **Create** button
3. Check the created issue
## Next Steps Guide
Basic setup and first feedback collection are complete!
## Related Documents
- [API Integration](/en/developer-guide/api-integration) - Detailed API usage guide
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/02-project-management.md
+347
View File
@@ -0,0 +1,347 @@
---
title: Project
description: This document explains how to create, configure, and manage projects in ABC User Feedback, and how to set team member roles and permissions.
sidebar_position: 2
---
# Project
In ABC User Feedback, a **project** is the most basic unit for collecting and analyzing feedback. This document covers features from project creation to team management and permission settings.
---
## Project Overview
Projects have the following hierarchical structure:
```
Tenant
└── Project (multiple allowed)
├── Channel (multiple allowed)
├── Members and Roles
├── Issue Tracker Integration
├── Webhook Integration
├── AI Features
└── API Keys
```
Each project is a management unit that includes multiple channels, and can independently set and operate team members, roles, issue tracker integration, external system integration, etc.
---
## Creating a Project
### Access Permissions
Only **Super users** can create projects. Regular users can participate by being invited as members to existing projects.
> If you need Super user permissions, please contact your system administrator.
### Access Method
There are two ways to create a new project:
1. **First login**: The project creation wizard automatically starts
2. **Additional projects**: Click the **Create Project** button at the top of the left sidebar
### Step 1: Project Basic Information
![create-project-1](/img/project/1.png)
When creating a project, enter the following information:
| Item | Description | Example |
| --------------- | -------------------------------------------------------------- | ------------------------------------------------ |
| **Name** | Project name (required) | `Mobile App`, `Customer Service`, `Beta Service` |
| **Description** | Brief description (optional) | `iOS/Android app user feedback collection` |
| **Time Zone** | Used as the time reference for feedback and reports (required) | `Asia/Seoul` |
> The time zone affects **dashboard statistics**.
**After completion**: After entering all information, click the **Next** button.
### Step 2: Add Team Members (Optional)
![create-project-2](/img/project/2.png)
This step can be **skipped**. You can add members later from the project settings at any time.
#### Adding Members
1. Click the **Register Member** button at the top right
2. Enter the following items:
- **Email**: Select a user registered in the system
- **Role**: Choose from Admin, Editor, or Viewer
> If you want to use custom roles, click the **Role Management** button for additional settings.
**After completion**: Check the member list and click **Next**.
### Step 3: Generate API Key (Optional)
![create-project-3](/img/project/3.png)
API keys are used when collecting feedback from external systems. You can generate them later from the settings menu, so you can skip this step now.
#### Key Generation Method
1. Click the **Create API Key** button at the top right
2. The key is automatically generated and displayed in the list
3. Copy the generated key and store it in a safe place
### Project Creation Complete
![create-project-4](/img/project/4.png)
After completing all steps, a **summary screen** appears:
- Project information: name, description, time zone
- Member list
- Generated API keys
- Role settings status
#### Next Steps
- To immediately create a channel and start collecting feedback, click the **Create Channel** button
- Or click the **Later** button to create it later
---
## Managing Project Settings
![project-setting.png](/img/project/project-setting.png)
### Access Method
To change project settings:
1. Click **Settings** in the top menu
2. Select **Project Setting** from the left menu
### Editing Basic Information
You can modify the following items at any time:
| Item | Description | Notes |
| --------------- | --------------------------------------------------- | ----------------------------------- |
| **Name** | Project name | Name displayed to team members |
| **Description** | Description (optional) | Purpose of the project |
| **Time Zone** | Time reference for statistics and time-related data | Changes do not affect existing data |
**Save method**: After making changes, click the **Save** button at the top right.
### Notes on Time Zone Changes
- Does not affect the time information of existing feedback/issues
- Data inconsistencies may occur in dashboard statistics after changes.
### Deleting a Project
#### Deletion Procedure
To completely delete a project:
1. Click the **Delete Project** button at the bottom of the Project Setting screen
2. Enter the project name exactly in the confirmation popup
3. Click the **Delete** button to finalize
#### Deletion Notes
- **All feedback, issues, and settings within the project will be permanently deleted**
- **Cannot be undone**, so backup or export is recommended beforehand
- Connected channels and API keys are also removed upon deletion
---
## Member Management
![member-setting.png](/img/project/member-setting.png)
### Viewing Member List
To view members currently participating in the project:
1. Click **Settings** in the top menu
2. Select **Member Management** from the left menu
The member list displays the following information:
| Item | Description |
| ---------- | -------------------------- |
| Email | Account email |
| Name | User name (from profile) |
| Department | Department |
| Role | Role within the project |
| Joined | Project participation date |
### Inviting New
![member-register.png](/img/project/member-register.png)
#### Invitation Procedure
1. Click the **Register Member** button
2. Enter invitation information:
| Item | Description |
| --------- | -------------------------------------------- |
| **Email** | Email of the user to invite |
| **Role** | Role to assign (Admin, Editor, Viewer, etc.) |
3. Click the **Invite** button to complete the invitation
### Editing Member Information
To modify existing member information:
1. Click the row of the member you want to edit in the member list
2. In the popup, you can modify the Role:
3. Click the **Save** button to save changes
### Removing Members
To remove a member from the project:
1. Click the **Delete** button at the bottom of the member edit popup
2. Click **Confirm** in the confirmation message
> Removing a member does not delete feedback/issue records created by that user; only project access permissions are removed.
---
## Role and Permission Management
![role-setting.png](/img/project/role-setting.png)
### Default Roles
The system provides the following default roles:
| Role | Permission Summary |
| ---------- | ---------------------------------------------------------------------- |
| **Admin** | Access to all features. Includes project deletion |
| **Editor** | Can create, modify, and delete feedback/issues. Cannot access settings |
| **Viewer** | View only. Cannot modify, delete, or access settings |
### Creating Custom Roles
![role-create.png](/img/project/role-create.png)
You can create custom roles when more granular permissions are needed:
1. Click the **Role Management** link in the Member Management screen
2. Click the **Create Role** button
3. Enter the role name and permissions:
### Permission Settings
For each role, you can set the following feature-specific permissions:
#### Feedback Permissions
| Permission Item | Description |
| ----------------------------------- | -------------------------------- |
| **Download Feedback** | Download feedback data |
| **Edit Feedback** | Edit feedback |
| **Delete Feedback** | Delete feedback |
| **Attach/Detach Issue in Feedback** | Link/unlink issues with feedback |
#### Issue Permissions
| Permission Item | Description |
| ---------------- | ------------- |
| **Create Issue** | Create issues |
| **Edit Issue** | Edit issues |
| **Delete Issue** | Delete issues |
#### Project Management
| Permission Item | Description |
| --------------------- | ------------------------ |
| **Edit Project Info** | Edit project information |
| **Delete Project** | Delete project |
#### Member Management
| Permission Item | Description |
| ------------------------- | ---------------------- |
| **Read Project Member** | View project members |
| **Create Project Member** | Invite project members |
| **Edit Project Member** | Edit project members |
| **Delete Project Member** | Remove project members |
#### Role Management
| Permission Item | Description |
| ----------------------- | -------------------- |
| **Read Project Role** | View project roles |
| **Create Project Role** | Create project roles |
| **Edit Project Role** | Edit project roles |
| **Delete Project Role** | Delete project roles |
#### API Key Management
| Permission Item | Description |
| ------------------ | --------------- |
| **Read API Key** | View API keys |
| **Create API Key** | Create API keys |
| **Edit API Key** | Edit API keys |
| **Delete API Key** | Delete API keys |
#### Issue Tracker
| Permission Item | Description |
| ---------------------- | ----------------------- |
| **Read Issue Tracker** | View issue tracker |
| **Edit Issue Tracker** | Configure issue tracker |
#### Webhook Management
| Permission Item | Description |
| ------------------ | --------------- |
| **Read Webhook** | View webhooks |
| **Create Webhook** | Create webhooks |
| **Edit Webhook** | Edit webhooks |
| **Delete Webhook** | Delete webhooks |
#### AI and Channel Settings
| Permission Item | Description |
| ---------------------- | ---------------- |
| **Read Generative AI** | View AI settings |
| **Edit Generative AI** | Edit AI settings |
#### Channel-Related Settings
| Permission Item | Description |
| ---------------------- | ------------------------ |
| **Edit Channel Info** | Edit channel information |
| **Delete Channel** | Delete channel |
| **Read Field** | View fields |
| **Edit Field** | Edit fields |
| **Read Image Setting** | View image settings |
| **Edit Image Setting** | Edit image settings |
| **Create Channel** | Create new channels |
### Permission Setting Tips
#### Security Best Practices
- **Principle of least privilege**: Grant only the minimum permissions necessary for work
- **Regular review**: Check permissions when team changes or employees leave
- **Limit Admin role**: Keep the number of administrators as small as possible
### Editing and Deleting Roles
- **Edit**: Click the desired item in the role list to modify the name and permissions
- **Delete**: Roles not in use can be deleted with the **Delete** button
> **Note**: At least one Admin role must always exist and cannot be deleted.
---
## Related Documents
- [Channel Management](./03-channel-management.md) - Channel creation and field settings
- [Feedback Management](./04-feedback-management.md) - Feedback collection and analysis
- [API Integration](/en/developer-guide/api-integration) - API key usage
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/03-channel-management.md
+237
View File
@@ -0,0 +1,237 @@
---
title: Channel
description: This document explains how to create, configure, and manage feedback collection channels in ABC User Feedback, and how to handle custom fields and image settings.
sidebar_position: 3
---
# Channel
A **Channel** is a unit that distinguishes feedback collection paths or purposes. Each channel has an independent field structure, image settings, and AI features, allowing configuration for various feedback collection scenarios.
---
## Channel Overview
### Role of Channels
Channels serve the following roles:
- **Distinguish feedback collection paths**: Web, app, customer service, surveys, etc.
- **Define data structure**: Unique field settings per channel
- **Manage collection policies**: Image allowance, search period, security settings, etc.
- **Provide analysis units**: Independent statistics and analysis per channel
---
## Creating a Channel
### Access Method
To create a new channel:
1. **Right after project creation**: Click the **Create Channel** button on the project completion screen
2. **Additional channel creation**: Click the **Create Channel** button in **Settings > Channel List**
### Step 1: Channel Basic Information
![channel-create-1](/img/channel/1.png)
| Item | Description | Example |
| ---------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------ |
| **Name** | Channel name (required) | `Web Feedback`, `App Review`, `Customer Service` |
| **Description** | Brief channel description (optional) | `Website user opinion collection` |
| **Maximum Feedback Search Period** | Maximum searchable period for feedback (30/90/180/365 days, all) | `90 days` |
#### Notes on Maximum Feedback Search Period Setting
- **Impact scope**: Directly affects the feedback download functionality
- **Download behavior**: All feedback within the set search period becomes the download target
- **Performance testing**: If daily feedback count is high, test with various periods to find the optimal value
- **Gradual adjustment**: Start with a short period and gradually increase as needed
**After completion**: After entering the information, click the **Next** button.
### Step 2: Field Configuration
![channel-create-2](/img/channel/2.png)
Define the data structure to collect in the channel. This directly affects the API request structure and feedback table configuration.
#### Default System Fields
Fields automatically included in all channels:
| Key | Format | Property | Description |
| ----------- | ----------- | --------- | -------------------------- |
| `id` | number | Read Only | Unique feedback ID |
| `createdAt` | date | Read Only | Feedback creation time |
| `updatedAt` | date | Read Only | Feedback modification time |
| `issues` | multiSelect | Editable | List of linked issues |
> These fields cannot be deleted or have their main properties modified.
#### Adding Custom Fields
Add fields that match actual business requirements.
1. Click the **Add Field** button
2. Enter field information
| Item | Description | Example |
| ---------------- | ------------------------------------------------------------- | -------------------------------- |
| **Key** | Unique identifier (uppercase/lowercase letters, numbers, `_`) | `message`, `rating` |
| **Display Name** | Name displayed in UI | `Feedback Content`, `User Email` |
| **Format** | Data format (see table below) | `text`, `keyword`, `number` |
| **Property** | `Editable` (can input) / `Read Only` (view only) | `Editable` |
| **Status** | `Active` / `Inactive` | `Active` |
| **Description** | Easy-to-understand description for team members (optional) | `User-entered feedback content` |
### Field Format Types
| Format | Description | Usage Example | API Example |
| ------------- | ------------------------ | ----------------------------------------------- | ------------------------ |
| `text` | Free text input | Feedback content, detailed description | `"App keeps freezing"` |
| `keyword` | Short keyword/tag | Version info, page name | `"v1.2.3"` |
| `number` | Number | Rating, age, usage time | `5` |
| `date` | Date | Occurrence date, expiration date | `"2024-03-01T00:00:00Z"` |
| `select` | Single selection | Category, priority | `"Feature Request"` |
| `multiSelect` | Multiple selection | Tags, related features | `["Bug", "UI"]` |
| `images` | Image URL array | Screenshots, attachments | `["https://..."]` |
| `aiField` | AI analysis result field | Sentiment analysis, summary, keyword extraction | `"Positive"` |
> **About images format**: For detailed image setting methods, refer to the [Image Settings](/en/user-guide/settings/image-setting) document.
>
> **About aiField format**: For AI field settings and template configuration methods, refer to the [AI Settings](/en/user-guide/settings/ai-setting) document.
### Field Configuration Examples
#### Web Feedback Channel
| Key | Display Name | Format | Purpose |
| ------------- | ---------------- | ------- | ------------------------------- |
| `message` | Feedback Content | text | User opinion |
| `userEmail` | Email | keyword | Contact (optional) |
| `pageUrl` | Page URL | keyword | Feedback occurrence location |
| `category` | Category | select | Bug/Feature Request/Improvement |
| `priority` | Priority | select | High/Medium/Low |
| `screenshots` | Screenshots | images | Problem situation capture |
#### Mobile App Review Channel
| Key | Display Name | Format | Purpose |
| ------------ | -------------- | ------- | -------------------- |
| `message` | Review Content | text | User review |
| `rating` | Rating | number | 1-5 point rating |
| `appVersion` | App Version | keyword | For bug tracking |
| `deviceType` | Device Type | select | iOS/Android |
| `crashLogs` | Crash Logs | text | Technical error info |
### Field Preview
After completing field configuration, you can preview the actual feedback input screen with the **Preview** button.
This preview matches the field structure required for API requests.
**After completion**: Proceed to the next step with the **Next** button.
### Step 3: Channel Creation Complete
![create-channel-3](/img/channel/3.png)
Once all steps are completed, a **summary screen** appears:
- Channel information: Name, description, time zone
- Field information
---
## Field Management
![field-management.png](/img/channel/field-management.png)
### Editing Fields
To modify existing fields, click the row of the field you want to edit in the field list and modify the information.
> **Note**: `Key` and `Format` cannot be modified after creation. This is restricted for data consistency.
### Field Deletion
To ensure data integrity and consistency, **field deletion is not provided**.
#### Recommended Method Instead of Deletion
1. **Change to Inactive status**: Disable the field to exclude it from new feedback collection
2. **Preserve data**: Keep existing collected feedback data as is
3. **Use filtering**: Display only Active fields in the field list for management efficiency
#### When Complete Removal is Needed
If you need to completely remove a field:
- Consider deleting the entire channel and creating a new one
- Export data and migrate to a new structure
- Consult with the development team for database-level processing
### Field Status Management
#### Active / Inactive Toggle
- **Active**: Fields used during feedback collection
- **Inactive**: Temporarily disabled fields (data is preserved)
#### Filtering Options
You can filter fields by the following conditions using the top controls:
- **Status**: `Active` / `Inactive`
- **Property**: `Editable` / `Read Only`
---
## Channel Information Management
![channel-setting](/img/channel/channel-setting.png)
### Editing Channel Basic Information
You can modify the basic information of created channels.
#### Access Method
1. **Settings > Channel List > [Select Channel]**
2. Click the **Channel Information** tab
#### Editable Items
| Item | Editable | Notes |
| ---------------------------------- | -------- | ------------------------------ |
| **Channel ID** | ❌ No | Internal system identifier |
| **Channel Name** | ✅ Yes | Name displayed to team members |
| **Description** | ✅ Yes | Channel purpose |
| **Maximum Feedback Search Period** | ✅ Yes | May affect performance |
### Channel Deletion
You can delete channels that are no longer in use.
#### Deletion Procedure
1. Click the **Delete Channel** button at the bottom of the Channel Information screen
2. Enter the channel name exactly in the confirmation popup
3. Finalize with the **Delete** button
#### Deletion Notes
- **All feedback data for that channel will be permanently deleted**
- **Cannot be undone**, so backup or export is recommended beforehand
- Related API key settings should also be checked
---
## Related Documents
- [Project Management](./02-project-management.md) - Project settings and permission management
- [Feedback Management](./04-feedback-management.md) - Analysis and utilization of collected feedback
- [API Integration](/en/developer-guide/api-integration) - Integration methods with external systems
- [AI Integration](/en/user-guide/settings/ai-setting) - AI feature settings
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/04-feedback-management.md
+336
View File
@@ -0,0 +1,336 @@
---
title: Feedback
description: This document explains how to create, view, analyze, and manage feedback in ABC User Feedback.
sidebar_position: 4
---
# Feedback
Feedback is the core data of ABC User Feedback. This document covers all features related to feedback, from creation to analysis and management.
![feedback](/img/feedback/0.png)
---
## Creating Feedback
Feedback is mainly created by external systems (websites, mobile apps, API integration), but administrators can also create it directly.
### Creating Feedback via API
This is the most common method of creating feedback.
#### Basic API Request Structure
```bash
curl -X POST http://your-domain.com/api/v1/projects/{projectId}/channels/{channelId}/feedbacks \
-H "Content-Type: application/json" \
-H "X-API-KEY: YOUR_API_KEY" \
-d '{
"message": "User feedback content",
"userEmail": "user@example.com",
"category": "Bug Report"
}'
```
#### Request Examples by Channel Fields
The request structure varies depending on each channel's field settings:
**Web Feedback Channel Example**:
```json
{
"message": "Login button is not working",
"userEmail": "user@company.com",
"pageUrl": "https://example.com/login",
"category": "Bug",
"priority": "High",
"browserInfo": "Chrome 119.0.0"
}
```
**Mobile App Channel Example**:
```json
{
"message": "App freezes frequently",
"rating": 2,
"appVersion": "v2.1.3",
"deviceType": "iOS",
"crashLogs": "Exception in thread main..."
}
```
#### Feedback with Images
When using image URL method:
```json
{
"message": "Screen appears broken",
"userEmail": "user@example.com",
"images": [
"https://cdn.example.com/screenshot1.png",
"https://cdn.example.com/screenshot2.png"
]
}
```
### Verifying Feedback Creation
Created feedback is immediately displayed in the feedback list.
---
## Accessing Feedback List
Access the feedback list to view and manage created feedback.
### Access Method
1. Select the desired **project** from the left sidebar
2. Click the desired **channel** from the channel list at the bottom
3. Select the **Feedback** tab in the top menu
### Feedback Table Structure
The feedback list is displayed in table format with the following basic structure:
| Column Type | Description | Example |
| ------------------- | --------------------------------------------- | ---------------------------- |
| **Default Columns** | Displayed for all channels | ID, Created, Updated, Issue |
| **Custom Columns** | Displayed according to channel field settings | Message, UserEmail, Category |
---
## Feedback Filtering/Sorting/View Options
Various tools are provided to quickly find desired information from large amounts of feedback data.
![feedback-option](/img/feedback/1.png)
### Date Filtering
You can set the viewing period with the **Date** button at the top.
#### Available Period Options
| Option | Description | Use Case |
| ---------------- | --------------------------- | ------------------------ |
| **Today** | Feedback registered today | Real-time monitoring |
| **Yesterday** | Previous day's feedback | Daily review |
| **Last 7 Days** | Recent 1 week of data | Weekly analysis |
| **Last 30 Days** | Recent 1 month of data | Monthly trend analysis |
| **Custom** | Set start-end date directly | Specific period analysis |
### Filters
Click the **Filter** button to filter feedback by various conditions.
![feedback-filter](/img/feedback/2.png)
#### Filter Structure
```
Where: First condition
And: Feedback that satisfies all conditions
Or: Feedback that satisfies at least one condition
```
> **Note**: `And` and `Or` cannot be mixed at the same time.
#### Filter Options by Field Type
| Field Type | Available Operators | Example |
| --------------- | ------------------------------------------ | ----------------------------- |
| **text** | Contains (partial match) | message contains "bug" |
| **keyword** | Is (exact match) | category is "Feature Request" |
| **number** | Is (exact match) | rating == 3 |
| **select** | Is (exact match) | |
| **multiSelect** | Is (exact match), Contains (partial match) | |
| **aiField** | Contains (partial match) | |
| **date** | Is (exact match), Between (period match) | created between date range |
#### Filter Usage Examples
**Advanced Search for Multi-Select Category**:
```
Where: category contains "Bug"
And: priority is "High"
```
**Finding Feedback Linked to Multiple Issues**:
```
Where: issues contains "Login Issue"
Or: issues contains "UI Improvement"
```
**Finding 4-Rating Feedback in Specific Category**:
```
Where: category is "Feature Request"
And: rating is 4
```
### Sorting Function
Click table headers to sort by that column. This feature is available for Created and Updated columns.
### View Options
You can adjust the display method of the feedback list to suit your needs.
#### Expand Feature
Click the **Expand** button to preview detailed content of each feedback in the table.
**Usage**:
- Check main content without opening detail panel
- Quickly browse through multiple feedback
- View full content of long text fields
#### Show/Hide Columns
You can select columns to display with the **View** button at the top of the table.
**Features**:
- **Required columns**: ID, Created are always displayed (cannot be hidden)
- **Optional columns**: Custom fields can be individually shown/hidden
- **Screen optimization**: Efficiently use screen space by displaying only needed information
**Usage Tips**:
```
For monitoring: Display only ID, Created, Message
For analysis: Display all custom fields
For review: Display Message, Category, Priority
```
## Viewing/Editing/Deleting Feedback
You can view detailed information of individual feedback and edit or delete it as needed.
### Viewing Feedback Details
#### Access Method
Click a **row** in the feedback table to open the detail view panel on the right.
![feedback-detail](/img/feedback/3.png)
### Detail Panel Structure
The detail panel is structured as follows:
#### 1. Basic Information Area
- **Feedback ID**: Unique identification number
- **Creation Time**: Initial registration date/time
- **Modification Time**: Last change date/time
- **Issues**: Tagged issues
#### 2. Custom Fields Area
All custom fields set in the channel are displayed.
### Editing Feedback
#### Editable Fields
Click the **Edit** button in the detail panel to switch to edit mode.
#### Editable Items
| Item | Editable | Notes |
| ------------------ | -------- | -------------------------------------------------------------------- |
| **Default Fields** | ❌ No | ID, creation date, etc. |
| **Custom Fields** | ✅ Yes | Varies by field setting Property, not possible if Status is Inactive |
#### Completing Edits
1. Modify necessary information
2. Click the **Save** button
3. Changes are immediately reflected and "Updated" time is refreshed
### Issue Link Management
#### Creating New Issue
1. Click the **+ button** in the issue column
2. Enter the issue name and click the **Create** option
#### Linking Existing Issue
1. Click the **+ button** in the issue section
2. Enter the name of the issue to link
3. Select the issue to link from the dropdown
#### Unlinking Issue
1. Click the **+ button** in the issue section
2. Select the issue to unlink
### Deleting Feedback
#### Single Feedback Deletion
1. Click the **Delete Feedback** button at the bottom of the detail panel
2. Approve deletion in the confirmation dialog
#### Multiple Feedback Deletion
1. Select multiple feedback using **checkboxes** in the feedback list
2. Click the **Delete Selected** button that appears at the top
3. Confirm batch deletion
#### Deletion Notes
- **Cannot be recovered**: Deleted feedback cannot be restored
- **Issue links removed**: Linked issues remain but links are removed
- **Statistics impact**: Data is excluded from dashboard statistics
---
## Downloading Feedback
You can export collected feedback data in various formats for analysis or backup.
### Accessing Download Function
#### Download All Feedback
1. Click the **Export** button at the top of the feedback list
#### Download Filtered Feedback
1. Apply filtering with desired conditions
2. Click the **Export** button to download only data matching current filter conditions
#### Download Selected Feedback
1. Select specific feedback using checkboxes
2. Click the **Export Selected** button
### Download Format Selection
When clicking the Export button, you can select the download format.
#### Supported Formats
| Format | Extension | Advantages | Recommended Use Cases |
| --------- | --------- | ---------------------------------------- | ---------------------------------- |
| **CSV** | `.csv` | Lightweight and highly compatible | Excel, Google Sheets analysis |
| **Excel** | `.xlsx` | Format preservation, multi-sheet support | Detailed analysis, report creation |
---
## Related Documents
- [Channel Management](./03-channel-management.md) - Channel and field settings for feedback collection
- [Issue Management](./05-issue-management.md) - Creating and managing issues from feedback
- [API Integration](/en/developer-guide/api-integration) - How to send feedback from external systems
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/05-issue-management.md
+314
View File
@@ -0,0 +1,314 @@
---
title: Issue
description: This document explains how to create and manage issues in ABC User Feedback and efficiently track them using kanban/list views.
sidebar_position: 5
---
# Issue
**Issues** are a core feature for systematically managing problems or improvements found in feedback. This document covers all issue management features, from issue creation to category management and various view modes.
![issue](/img/issue/1.png)
---
## Issue Overview
### Role of Issues
Issues are used for the following purposes:
- **Problem tracking**: Systematically manage bugs, errors, performance issues, etc.
- **Feature request management**: Structure user requests and reflect them in development plans
- **Identifying improvements**: Identify improvement points through feedback analysis
### Issue Status
Each issue has the following status:
| Status | Description | When Used |
| --------------- | ------------------- | --------------------------------------- |
| **New** | Newly registered | Initial issue creation |
| **On Review** | Under review | When assignee starts review |
| **In Progress** | In progress | During actual work |
| **Resolved** | Resolved | Problem solved and completed |
| **On Hold** | Temporarily on hold | Waiting for additional info or deferred |
---
## Creating/Editing/Deleting Issues
### Issue Creation Methods
Issues can be created in two ways.
#### 1. Create Issue from Feedback (Recommended)
The most common method, creating an issue based on specific feedback.
1. Click feedback in the **Feedback** tab to open detail view
2. Click the **`+` button** in the **Issue** section of the right detail panel
3. Enter the issue name and press **Enter** or click the **Create** option
#### 2. Create Directly from Issue List
1. Click the **Issue** tab in the top menu
2. Click the **+ Create Issue** button at the top left
3. Enter information in the issue creation dialog:
| Item | Description | Required | Example |
| --------------- | ----------------------------- | -------- | ---------------------------- |
| **Title** | Issue title | Required | `Login button malfunction` |
| **Description** | Detailed description | Optional | `Occurs in specific browser` |
| **Category** | Issue classification | Optional | `Bug` |
| **Status** | Initial status (default: New) | Optional | `New` |
### Editing Issues
You can modify information of created issues.
#### Editing Method
1. Click the issue you want to edit in the issue list
2. Click the **Edit** button in the **Issue Details** panel that opens on the right
3. In edit mode, you can modify the following items:
#### Editable Items
| Item | Editable | Description |
| --------------- | -------- | ------------------------------------------- |
| **Title** | ✅ Yes | Issue title |
| **Description** | ✅ Yes | Detailed description |
| **Category** | ✅ Yes | Issue classification (select from dropdown) |
| **Status** | ✅ Yes | Current progress status |
| **Ticket** | ✅ Yes | External issue tracker ticket number |
| **ID** | ❌ No | System auto-generated |
| **Created** | ❌ No | Creation date/time |
#### Save and Cancel
- **Save** button: Saves changes and exits edit mode
- **Cancel** button: Cancels changes and reverts to original state
### External Issue Tracker Integration
When integration with external issue trackers (Jira, etc.) is configured, you can link external tickets to issues.
#### Ticket Linking Method
1. Enter the external ticket number in the **Ticket** field in the issue detail panel
2. The entered number is automatically converted to an external system link
> **Note**: External issue tracker integration requires prior configuration in **Settings > Issue Tracker Management**.
### Deleting Issues
You can delete issues that are no longer needed.
#### Deletion Method
1. Click the **Delete** button in the issue detail panel
2. Approve deletion in the confirmation dialog
#### Deletion Notes
- **Cannot be recovered**: Deleted issues cannot be restored
- **Feedback links removed**: Issue links in connected feedback are removed
- **Statistics impact**: Data is excluded from dashboard issue statistics
---
## Kanban View
Kanban view is a viewing method that allows visual management by separating issues into columns by status.
![issue-kanban](/img/issue/2.png)
### Accessing Kanban View
1. Click the **Issue** tab in the top menu
2. Select **Kanban** view at the top right
### Kanban Board Structure
Columns are organized by each status, and issues are displayed as cards.
#### Kanban Column Structure
| Column | Display Information | Card Count Display |
| --------------- | ----------------------- | ------------------ |
| **New** | Newly registered issues | Number at top |
| **On Review** | Issues under review | Number at top |
| **In Progress** | Issues in progress | Number at top |
| **Resolved** | Resolved issues | Number at top |
| **On Hold** | Issues on hold | Number at top |
#### Issue Card Information
Each issue card displays the following information:
- **Issue title**: Click to go to detail view
- **Feedback count**: Number of linked feedback (with 📝 icon)
- **Category**: Displayed at bottom if set
- **External ticket**: Ticket number displayed if linked
### Drag and Drop Status Change
A core feature of kanban view, you can change status by dragging issue cards to different columns.
#### Usage Method
1. Click and drag an issue card with the mouse
2. Move it over the desired status column
3. Release the mouse to automatically change status
### Kanban View Filtering
You can display only issues matching specific conditions using the filter function at the top.
#### Available Filters
1. **Date** filter: Display only issues created in a specific period
2. **Filter** button: Set advanced filter conditions
#### Filter Condition Examples
| Filter Type | Condition Example | Use Case |
| ------------ | ---------------------- | ---------------------------------- |
| **Category** | Category = "Bug" | Check only bug issues |
| **Title** | Title contains "Login" | Find login-related issues |
| **Created** | Created >= 2024-03-01 | Issues created after specific date |
| **Status** | Status != "Resolved" | Display only unresolved issues |
### Kanban View Sorting
You can change the sort order of issue cards within each column.
#### Sort Options
- **Created Date ↓**: Newest first
- **Created Date ↑**: Oldest first
- **Feedback Count ↓**: Most linked feedback first
---
## List View
List view is a viewing method that displays issues grouped by category in table format.
### Accessing List View
1. Click the **Issue** tab in the top menu
2. Select **List** view at the top right
### List View Structure
Issues grouped by category are displayed hierarchically.
#### Category Groups
Each category is displayed as a collapsible/expandable group:
- **Group header**: Category name and number of included issues
- **Collapse/Expand arrow**: Toggle group content display/hide
- **"No Category"**: Issues without assigned category
### List View Filtering
Provides the same filter function as kanban view.
#### Filter Application Method
1. Click the **Date** or **Filter** button at the top
2. Set desired conditions
3. Filtered results are displayed grouped by category
#### Empty Category Handling
Categories with no issues in the filtering results are automatically hidden.
### List View Sorting
You can sort by clicking each column header.
#### Sort Behavior
- **First click**: Ascending sort ↑
- **Second click**: Descending sort ↓
#### Each Sort Content
| Sort Criteria | Use Case |
| -------------------- | ----------------------------- |
| **Created ↓** | Check latest issues first |
| **Feedback Count ↓** | Prioritize high-impact issues |
| **Status** | Check grouped by status |
---
## Issue Categories
Issue categories are a feature that allows systematic management by classifying issues.
### Purpose of Categories
- **Issue classification**: Distinguish bugs, feature requests, improvements, etc.
- **Analysis ease**: Analyze issue occurrence patterns by category
### Default Category Examples
Commonly used category classifications:
| Category | Description | Priority | Example Team |
| ------------------- | ----------------------------- | -------- | ---------------------------- |
| **Bug** | Function malfunction, errors | High | Development Team |
| **Feature Request** | New feature addition requests | Medium | Planning Team |
| **Improvement** | Existing feature enhancement | Medium | UX Team |
| **Performance** | Speed, stability issues | High | Infrastructure Team |
| **UI/UX** | User interface problems | Low | Design Team |
| **Documentation** | Help, guide related | Low | Technical Documentation Team |
### Category Management
#### Adding Categories
You can add new categories in the issue detail panel:
1. Click the **Add** button in the **Category** field of the issue detail panel
2. Enter the new category name
3. Press **Enter** or click the confirm button
#### Assigning Categories
You can assign or change categories for existing issues:
1. Click the **Edit** button in the issue detail panel
2. Select the desired category from the **Category** dropdown
3. Save changes with the **Save** button
### Category-Based Issue Management
#### Checking by Category in List View
In list view, you can see issues grouped by category at a glance:
- **Issue count by category**: Number of included issues displayed in each group header
- **Group collapse/expand**: Selectively check only needed categories
- **"No Category" group**: Separate management of unclassified issues
#### Category-Based Filtering
When you want to check only issues of a specific category:
1. Click the **Filter** button
2. Add a **Category** condition
3. Select the desired category
---
## Related Documents
- [Feedback Management](./04-feedback-management.md) - How to create and link issues from feedback
- [Issue Tracker Integration](/en/user-guide/settings/issue-tracker-management) - Integration settings with external tools
- [Project Management](./02-project-management.md) - Team composition and permission management
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/01-tenant-settings.md
+236
View File
@@ -0,0 +1,236 @@
---
title: Tenant Settings
description: This guide explains how to manage tenant information, login methods, user management, and other organization-wide settings in ABC User Feedback.
sidebar_position: 1
---
# Tenant Settings
Tenant settings are the top-level management features of ABC User Feedback, covering important settings that affect the entire organization. This document explains how to manage tenant information, configure login methods, and manage all users.
> **Note**: These settings can only be accessed by users with **Super Admin permissions**.
---
## Tenant Settings
A tenant is the top-level unit of an organization, encompassing all projects and users.
### Access Method
1. Click the **Home** icon in the top right menu
2. Select **Tenant Information** from the left menu
### Editable Items
| Item | Description | Editable | Example |
| --------------- | -------------------------------------------- | -------- | ---------------------------- |
| **ID** | Unique tenant identifier (system auto-generated) | ❌ No | `1` |
| **Name** | Tenant name (organization name, company name, etc.) | ✅ Yes | `ABC Company` |
| **Description** | Tenant description (optional) | ✅ Yes | `Customer feedback management system` |
### How to Edit Information
1. Modify the **Name** or **Description** field
2. Click the **Save** button at the top right
3. A success message is displayed when saved
> The tenant name may be displayed in the login UI.
---
## Login Settings
Configure the authentication method users will use when accessing the system.
### Access Method
1. Click the **Home** icon in the top right menu
2. Select **Login Management** from the left menu
### Supported Login Methods
#### 1. Email Login
The default email + password combination method.
**Features**:
- Enabled by default without additional setup
- User invitation → email verification → password setup sequence
- Password reset functionality provided
**Password Policy**:
- Minimum 8 characters
- Recommended to include letters, numbers, and special characters
- Consecutive characters prohibited (e.g., `aa`, `11`)
#### 2. Google Login
Social login method via Google OAuth 2.0.
**Setup Method**:
1. **Enable Google Login**: Toggle to ON
2. **Google Cloud Console setup is required**:
> **Note**: For detailed implementation of Google OAuth integration, refer to the [OAuth Integration Guide](/en/developer-guide/oauth-integration).
#### 3. Custom OAuth Login
Method using your own OAuth server or other OAuth providers.
**Setup Items**:
| Item | Description | Example |
| ----------------- | ------------------------------------ | --------------------------------------------- |
| **Provider Name** | Name displayed on login button | `Sign in with Microsoft` |
| **Client ID** | OAuth client ID | `abc123xyz` |
| **Client Secret** | OAuth client secret | `supersecret` |
| **Auth URL** | Authentication request URL | `https://auth.example.com/oauth2/auth` |
| **Token URL** | Token request URL | `https://auth.example.com/oauth2/token` |
| **User Info URL** | User information request URL | `https://auth.example.com/oauth2/userinfo` |
| **Scope** | Permission scope to request | `openid email profile` |
| **Email Key** | Email field name in user information | `email` |
**Setup Sequence**:
1. Enter OAuth server information in each field
2. Click the **Save** button to save
3. A button with the configured Provider Name is displayed on the login screen
### Login Method Combinations
Multiple login methods can be enabled simultaneously:
- **Email only**: Only default login form displayed
- **Email + Google**: Login form + "Sign in with Google" button
- **Email + Custom**: Login form + custom OAuth button
### Testing Login Settings
After changing settings, be sure to test:
1. Access the login page in browser incognito mode
2. Verify that configured login methods are displayed correctly
3. Perform actual login tests with each method
---
## User Management
A feature to centrally manage all users across the tenant.
### Access Method
1. Click the **Home** icon in the top right menu
2. Select **User Management** from the left menu
### Viewing User List
#### Displayed Information
| Column | Description | Display Example |
| ---------- | -------------------------------- | ---------------------------- |
| Email | Login account email | `user@company.com` |
| Name | User name (from profile) | `John Doe` |
| Department | Department | `Development Team` |
| Type | User type | `SUPER` / `GENERAL` |
| Project | List of accessible projects | `Project A, Project B` |
| Created | Account creation date/time | `2024-03-15 14:30` |
#### User Type Description
| Type | Description | Permission Scope |
| --------- | --------------------------------------------------------------- | ---------------------- |
| `SUPER` | Can access all projects and settings. Acts as full system administrator | Entire tenant |
| `GENERAL` | Can only access specified projects | Specific projects only |
### User Search and Filtering
You can quickly find desired users when there are many users.
#### Filter Function
Click the **Filter** button at the top to set conditions.
**Filter Conditions**:
- **Email**: Search by email address
- **Name**: Search by user name
- **Department**: Search by department name
**Operator Options**:
- **CONTAINS**: When it contains
- **IS**: When it exactly matches
### Inviting Users
Invite new users to the system.
#### Invitation Method
1. Click the **Invite User** button at the top right
2. Enter invitation information
| Item | Description | Options |
| ----------- | ---------------------------------- | --------------------------- |
| **Email** | Email address of user to invite | Required input |
| **Type** | User type | `GENERAL` / `SUPER` |
| **Project** | Projects to allow access | Select from project list |
| **Role** | Role in that project | `Admin` / `Editor` / `Viewer` |
3. Click the **Invite** button to complete the invitation
#### Post-Invitation Process
1. An email is sent to the invited user
2. The user clicks the link in the email to proceed with registration
3. After registration is complete, they are automatically added to the specified project
### Editing User Information
You can modify information and permissions of existing users.
#### Editing Method
1. Click the user you want to edit in the user list
2. The **Edit User** popup opens
#### Editable Items
| Item | Editable | Description |
| --------- | -------- | ------------------------------------- |
| **Email** | ❌ No | Cannot be changed as account identifier |
| **Type** | ✅ Yes | Can change between `GENERAL` ↔ `SUPER` |
#### Save and Apply
1. Modify necessary information
2. Click the **Save** button
3. Changes are applied immediately and reflected from the user's next login
### Deleting Users
You can delete users who no longer use the system.
#### Deletion Method
1. Click the **Delete** button at the bottom of the user edit popup
2. Approve deletion in the confirmation dialog
#### Deletion Notes
- **Cannot be recovered**: Deleted user accounts cannot be restored
- **Immediate access removal**: All system access is blocked immediately upon deletion
---
## Related Documents
- [Project Management](../02-project-management.md) - Member and permission management per project
- [OAuth Integration Guide](../../02-developer-guide/03-oauth-integration.md) - Technical implementation of OAuth settings
- [API Integration](/en/developer-guide/api-integration) - User management via API
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/02-api-key-management.md
+134
View File
@@ -0,0 +1,134 @@
---
title: API Key Settings
description: This document explains how to create, manage, and maintain security for API keys used for external system integration in ABC User Feedback.
sidebar_position: 2
---
# API Key Settings
API keys are authentication means that allow external systems to securely integrate with ABC User Feedback. This document explains API key creation, management, and security maintenance from a UI perspective.
![api-key-setting.png](/img/api-key/api-key-setting.png)
---
## API Key Overview
### Role of API Keys
API keys are used for the following purposes:
- **External system authentication**: Send feedback from websites, mobile apps
- **Automation integration**: Data collection through batch jobs, scripts
- **Third-party tool connection**: Integration with analysis tools, monitoring systems
- **Security control**: Independent access permission management per project
### Security Features
- **Per-project independence**: Separate keys issued for each project
- **Status management**: Can be controlled immediately with Active/Inactive status
---
## Creating API Keys
### Access Method
1. Click **Settings** in the top menu
2. Select **API Key Management** from the left menu
### Key Creation Process
#### 1. Click Create Button
Click the **Create API Key** button at the top right of the API Key Management screen.
#### 2. Auto Generation and Display
A new API key is automatically generated and displayed in a popup immediately upon clicking the button.
**Popup Components**:
- **API Key Value**: Displays the full key string
- **Copy Button**: Instantly copies to clipboard
---
## Managing API Key List
### Key List Screen Structure
Created API keys are managed in table format.
#### Table Column Information
| Column | Description | Display Format |
| ----------- | ------------------------- | ----------------------------- |
| **API Key** | Generated key value | `AbcdEfgh...` |
| **Status** | Current activation status | Active / Inactive |
| **Created** | Key creation date/time | `2024-03-15 14:30` |
| **Actions** | Management action buttons | Status change, delete buttons |
#### Key Identification Method
Since the full key value cannot be viewed again, distinguish keys using the following methods:
- **Creation time**: Check when the key was created
- **Usage purpose memo**: Record the key's purpose separately
---
## API Key Status Management
![api-key-detail.png](/img/api-key/api-key-detail.png)
### Active / Inactive Toggle
Each API key can be activated/deactivated immediately.
#### Status Meanings
| Status | Description | API Call Result |
| ------------ | ------------------------------ | ----------------- |
| **Active** | Available for actual API calls | Normal processing |
| **Inactive** | Call blocked state | 401 Unauthorized |
#### Status Change Method
1. Click the toggle switch in the **Status** column of the API key list
2. Status changes immediately and is reflected on screen
3. External systems using that key are immediately affected
---
## Deleting API Keys
### When to Delete
API keys should be deleted in the following cases:
- **Key exposure**: When a key is accidentally made public
- **Project termination**: When use of that project ends
- **Security policy**: According to regular key rotation policy
- **Unused keys**: Cleanup of keys no longer in use
### Deletion Method
#### 1. Click Delete Button
Click the delete button in the **Actions** column of the key you want to delete in the key list.
#### 2. Confirm Deletion
Approve deletion in the confirmation dialog.
#### 3. Deletion Complete
When you click the **Delete** button, the key is immediately deleted and removed from the list.
---
## Related Documents
- [API Integration Guide](/en/developer-guide/api-integration) - Actual integration implementation using API keys
- [Project Management](/en/user-guide/project-management) - API key management per project
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/03-issue-tracker-management.md
+167
View File
@@ -0,0 +1,167 @@
---
title: Issue Tracker Settings
description: This guide explains how to integrate ABC User Feedback issues with external issue trackers (Jira, etc.) to track and link issues.
sidebar_position: 3
---
# Issue Tracker Settings
With issue tracker settings, you can integrate ABC User Feedback issues with external issue management systems (Jira, etc.). You can link external ticket links to internal issues to naturally integrate with development workflows.
---
## Issue Tracker Overview
### Purpose of Integration
Issue tracker integration is used for the following purposes:
- **Workflow integration**: Connect customer feedback with development work
- **Issue tracking**: One-to-one mapping between internal issues and external tickets
- **Progress sharing**: Synchronize information between development and customer support teams
- **Efficiency improvement**: Prevent duplicate work and maintain context
### Integration Method
- **Manual link connection**: Manually enter external ticket numbers in ABC issues
- **Automatic URL generation**: Automatically generate links with configured Base URL and Project Key
- **Click navigation**: Click generated links to immediately navigate to external systems
> **Note**: Real-time bidirectional synchronization is not supported. If synchronization such as status changes is needed, use [Webhook](./04-webhook-management.md).
---
## Accessing Settings Screen
### Access Method
1. Click **Settings** in the top menu
2. Select **Issue Tracker Management** from the left menu
### Settings Screen Structure
The issue tracker management screen is structured as follows:
- **Issue Tracking System**: Dropdown to select system to integrate
- **Connection Settings**: Area to enter connection information
- **Link Preview**: Preview of links to be generated
- **Test Connection**: Connection test button
---
## Jira Integration Settings
### System Selection
#### 1. Issue Tracking System Setting
Select **Jira** from the dropdown.
### Entering Connection Information
#### 2. Base URL Setting
Enter the base address of the Jira system.
| Input Example | Description |
| --------------------------------------- | ------------------------------ |
| `https://yourcompany.atlassian.net` | Jira Cloud instance |
| `https://jira.company.com` | Self-hosted Jira Server |
| `https://jira.internal:8080` | Internal network Jira |
**Notes**:
- Must include `https://` or `http://` protocol
- Remove trailing slash (`/`)
- Include port number if present
#### 3. Project Key Setting
Enter the unique key of the Jira project.
| Input Example | Description |
| ------------- | --------------------------- |
| `PROJ` | Common project key |
| `DEV` | Development team project |
| `CS` | Customer support team project |
| `BUG` | Bug management dedicated |
**How to Check Project Key**:
1. Access the project in Jira
2. The part before `-` in the issue number is the Project Key
3. Example: In `PROJ-123`, `PROJ` is the Project Key
### Link Preview
You can preview the links that will be generated based on the configured information.
#### Preview Structure
```
Base URL + /browse/ + Project Key + - + Issue Number
```
**Example**:
- Base URL: `https://yourcompany.atlassian.net`
- Project Key: `PROJ`
- Issue Number: `123` (entered by user)
- **Generated Link**: `https://yourcompany.atlassian.net/browse/PROJ-123`
#### Link Format Validation
Use the preview to check the following:
- Whether the URL format is correct
- Whether actual Jira issues are accessible
- Whether team members have access permissions
---
## Linking Tickets to Issues
### Entering Ticket Number
After issue tracker settings are complete, you can link external tickets to individual issues.
#### Linking Method
1. Click the desired issue in the **Issue** tab
2. The **Issue Details** panel opens on the right
3. Enter the external ticket number in the **Ticket** field
#### Input Format
| Input Method | Description | Generated Link |
| ----------- | ----------- | -------------------------------------------- |
| `123` | Enter only number | `https://jira.company.com/browse/PROJ-123` |
The system automatically adds the Project Key, so you only need to enter the number.
### Automatic Link Generation
After entering the ticket number, click the **Save** button to automatically generate the link.
#### Link Features
- **Click navigation**: Clicking the link opens the external Jira issue in a new tab
- **External link display**: External link icon displayed next to the link
- **Editable**: Can change ticket number in Edit mode
### Unlinking
To remove external ticket connection:
1. Click the **Edit** button in the issue detail panel
2. Delete the content in the **Ticket** field
3. Save changes with the **Save** button
---
## Related Documents
- [Issue Management](/en/user-guide/issue-management) - How to create issues and link tickets
- [Webhook Management](/en/user-guide/settings/webhook-management) - External system notifications when issue status changes
- [API Integration Guide](/en/developer-guide/api-integration) - Issue management via API
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/04-webhook-management.md
+172
View File
@@ -0,0 +1,172 @@
---
sidebar_position: 4
title: 'Webhook Settings'
description: 'This document explains how to set up webhooks for automatic integration with external systems and send notifications when events occur.'
---
# Webhook Settings
Webhooks are a feature that **automatically sends notifications to external systems when specific events occur** in ABC User Feedback. You can deliver events such as feedback creation and issue status changes in real-time to external services (Slack, Discord, your own server, etc.). For detailed integration guide, refer to the [Webhook Integration](/en/developer-guide/webhook-integration) document.
![webhook-setting](/img/webhook/webhook-setting.png)
---
## Access Method
1. Click **Settings** in the top menu
2. Select **Webhook Integration** from the left menu
---
## Webhook Integration Screen Overview
![webhook-list.png](/img/webhook/webhook-list.png)
The webhook integration screen is structured as follows:
### Webhook List Table Structure
| Column | Description |
| ----------------- | --------------------------------------------- |
| **On/Off** | Webhook activation/deactivation toggle switch |
| **Name** | Webhook name |
| **URL** | External endpoint to receive notifications |
| **Event Trigger** | Subscribed event triggers |
| **Created** | Webhook creation date/time |
---
## Creating New Webhooks
![webhook-create](/img/webhook/webhook-create.png)
### 1. Start Webhook Registration
Click the **Register Webhook** button at the top right to open the webhook registration modal.
### 2. Enter Basic Information
#### Required Input Items
| Item | Description |
| -------- | -------------------------------------- |
| **Name** | Name for webhook identification |
| **URL** | Endpoint to receive HTTP POST requests |
### 3. Token Setting (Optional)
You can set a token for authentication in the **Token** field:
- Click the **Generate** button to auto-generate
- Or enter token value directly
### 4. Event Trigger Selection
You can select events to subscribe to per channel:
#### Supported Event Types
For each channel (VOC, Review, Survey, VOC Test), you can select the following events:
| Event Type | Description |
| ----------------------- | -------------------------------- |
| **Feedback Creation** | When new feedback is registered |
| **Issue Registration** | When new issue is created |
| **Issue Status Change** | When issue status is changed |
| **Issue Creation** | When issue is linked to feedback |
### 5. Save Webhook
After entering all information:
1. Click the **OK** button to create the webhook
2. You can cancel with the **Cancel** button
---
## Webhook Status Management
### Activation/Deactivation Toggle
You can change the status by clicking the toggle switch in the **On/Off** column of each webhook in the webhook list:
- **On (Active)**: Real-time transmission when events occur
- **Off (Inactive)**: Webhook is maintained but transmission is stopped
### Temporary Deactivation Scenarios
- When external server is under maintenance
- When changing webhook URL
- When spam notifications need to be prevented
---
## Webhook Editing and Deletion
### Webhook Editing
Click the webhook you want to edit in the webhook list to open the edit modal:
#### Editable Items
- Webhook name
- Target URL change
- Token value modification
- Event type addition/removal
### Webhook Deletion
To completely remove a webhook:
1. Select delete option in the edit modal
2. Or click delete button directly in the list (if delete button exists in UI)
---
## Webhook Testing and Validation
### Manual Validation Method
1. **Feedback Creation Test**:
- Register test feedback to check `Feedback Creation` event
2. **Issue Management Test**:
- Create issues or change status to check related events
3. **External Service Check**:
- Check message reception in Slack, Discord, etc.
---
## Common Integration Examples
### Slack Webhook Settings
```
Name: Slack Notifications
URL: https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXX
Events: Feedback Creation, Issue Registration (all channels)
```
### Discord Webhook Settings
```
Name: Discord Development Team Notifications
URL: https://discord.com/api/webhooks/123456789/abcdefghijk
Events: Issue Status Change (VOC channel only)
```
### Custom Server Integration
```
Name: Internal Analysis System
URL: https://api.yourcompany.com/webhooks/feedback
Token: your-generated-token
Events: All events (all channels)
```
---
## Related Documents
- [Webhook Developer Guide](/en/developer-guide/webhook-integration) - How to implement webhook receiving server
- [API Key Management](./02-api-key-management.md) - API key-based authentication settings
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/05-ai-setting.md
+272
View File
@@ -0,0 +1,272 @@
---
sidebar_position: 5
title: 'AI Settings'
description: 'This document explains basic settings and integration methods for using generative AI features.'
---
# AI Settings
To use **generative AI features** in ABC User Feedback, you must first set up integration with an AI provider.
After completing AI settings, you can use all features such as **AI Field Templates**, **AI Issue Recommendations**, and **AI Usage Monitoring**.
---
## Access Method
1. Click **Settings** in the top menu
2. Select **Generative AI Integration** from the left menu
3. Click **AI Setting** in the top tabs
---
## AI Provider Selection and Settings
![ai-setting.png](/img/ai/ai-setting.png)
### 1. Provider Selection
Select one of the currently supported AI providers: OpenAI, Google Gemini:
### 2. API Key Input
Enter the API key issued from the selected AI provider.
### 3. Base URL Setting (Optional)
In most cases, **leave it empty** and the default value will be used automatically.
Enter only when using special endpoints or proxy servers.
### 4. System Prompt Setting (Optional)
You can set **basic instructions** that the AI will reference when processing all requests.
Use this when you have organizational tone and manner or special requirements.
### 5. Save Settings
After entering all information, click the **Save** button at the top right.
---
## AI Usage Monitoring
![ai-usage.png](/img/ai/ai-usage.png)
You can monitor AI feature usage and costs in the **AI Usage** tab.
### Usage Dashboard
Information you can check:
- **Daily/monthly API call count**
- **Token usage** (input/output separately)
- **Usage distribution by feature** (AI fields vs issue recommendations)
---
## AI Field Template Management
![ai-field-template.png](/img/ai/ai-field-template.png)
After completing AI settings, you can manage automatic feedback analysis templates in the **AI Field Template** tab.
### Default Templates
Default templates provided by the system:
| Template | Description | Usage Example |
| ---------------------- | ---------------------------------------------- | ---------------------------------------- |
| **Feedback Summary** | Summarize feedback in one sentence | Grasp core of long feedback |
| **Sentiment Analysis** | Sentiment analysis (positive/negative/neutral) | Analyze customer satisfaction trends |
| **Translation** | Translate feedback to English | Integrate multilingual feedback analysis |
| **Keyword Extraction** | Extract 2-3 core keywords | Auto-tag issue categories |
### Creating Custom Templates
![ai-field-template-create.png](/img/ai/ai-field-template-create.png)
1. Click the **Create New** card
2. Enter template information
| Item | Description |
| --------------- | ------------------------------- |
| **Title** | Template name |
| **Prompt** | Instruction sentence for AI |
| **Model** | Select AI model to use |
| **Temperature** | Creativity adjustment (0.0~1.0) |
3. Test in Playground
- Enter test feedback with "Add Data" button
- Check results by clicking "AI test execution"
### Template Editing and Deletion
- Click template card → edit
- Delete with **Delete Template** button
- Deletion may affect AI fields using that template
---
## Applying AI Fields to Channels
After creating AI field templates, you must apply them as actual channel fields to view AI analysis results in feedback.
### 1. Add AI Field in Field Management
Add AI fields in **Settings > Channel List > [Select Channel] > Field Management**.
#### AI Field Setting Items
| Item | Description | Required |
| ----------------------- | -------------------------------- | -------- |
| **Key** | Unique field identifier | Required |
| **Display Name** | Name displayed in UI | Required |
| **Format** | Select `aiField` | Required |
| **Template** | Select created AI field template | Required |
| **Target Field** | Text field to be analyzed | Required |
| **Property** | Editable or Read Only | Required |
| **AI Field Automation** | Auto execution | Optional |
#### Setting Example
```
Key: sentiment_analysis
Display Name: Sentiment Analysis
Format: aiField
Template: Feedback Sentiment Analysis
Target Field: message
Property: Read Only
AI Field Automation: ON (auto execution)
```
### 2. Template Connection and Target Field Setting
Select the AI field template created earlier from the **Template** dropdown.
**Target Field** specifies the fields to be analyzed by AI
### 3. AI Field Automation Setting
Select execution method through **AI Field Automation** toggle:
- **ON (Auto execution)**: Automatically execute AI analysis when new feedback is registered
- **OFF (Manual execution)**: User must manually click execution button
## Checking AI Analysis Results in Feedback
After AI field settings are complete, you can check AI analysis results in the feedback list and detail screens.
### Checking in Feedback List
AI fields are added as new columns in the feedback table:
- **Summary**: Summary generated by AI
- **Classification**: AI classification results
- **Korean**: Translation results, etc.
### Checking in Feedback Detail Screen
You can check more detailed AI analysis results in the feedback detail view panel:
1. Click feedback row → right detail panel opens
2. Check AI analysis results by field
3. Displayed with analysis results for each AI field
## Manual AI Analysis Execution
You can manually execute AI analysis in the feedback detail screen.
### Using Run AI Button
1. Click **Run AI** button in feedback detail screen
2. AI analysis executes and results are automatically entered in that field
3. Results can be checked immediately after analysis completes
### Manual Execution Usage Scenarios
- **Cost savings**: Select only needed feedback for AI analysis
- **Performance check**: Test results of new templates in advance
- **Re-analysis**: Re-analyze existing feedback after template modification
---
## AI Issue Recommendation Settings
![ai-issue-recommendation.png](/img/ai/ai-issue-recommendation.png)
You can set up automatic issue recommendation features based on feedback in the **AI Issue Recommendation** tab.
### Creating AI Issue Recommendation Settings
![ai-issue-recommendation-create.png](/img/ai/ai-issue-recommendation-create.png)
1. Click **Create New** button
2. Enter setting items
| Item | Description | Required |
| ---------------- | -------------------------------- | -------- |
| **Channel** | Select channel to apply | Required |
| **Target Field** | Field to analyze (e.g., message) | Required |
| **Prompt** | Recommendation criteria prompt | Optional |
| **Enable** | Feature activation toggle | Required |
3. Advanced Settings
| Setting | Description |
| ------------------------- | ----------------------------------------------------------- |
| **Model** | Model to use |
| **Temperature** | Creativity adjustment |
| **Data Reference Amount** | Amount of issues to reference (issues and related feedback) |
### Testing AI Issue Recommendation Feature
Test in Playground with entered settings:
1. Enter example feedback
2. Click "AI test execution"
3. Check recommended issue list
### Using Recommendations in Actual Feedback
In feedback detail view:
- Check AI recommended issue list
- Select appropriate issues with checkboxes
- Request different recommendations with **Retry** button
### Using Issue Recommendations in Feedback List
In channels with AI issue recommendations configured, you can also use issue recommendation features directly in the feedback list screen.
#### Usage Method
1. Click the **+ button** in the **Issue column** of the feedback you want to link issues to in the feedback list
2. When dropdown menu appears, select **"Run AI"**
3. AI analyzes related issues and displays recommendation list
#### Checking and Applying Recommendation Results
After AI analysis completes, from the recommended issue list:
- Check **recommended issues**
- Select appropriate recommended issues
- Option to create new issues also provided
- After selection, that issue is automatically linked to feedback
#### Batch Processing Usage
You can use AI issue recommendations even when multiple feedback are selected, enabling efficient feedback classification:
1. Select multiple rows in feedback list (using checkboxes)
2. Execute AI issue recommendations from top batch operation menu
3. Check and apply recommended issues for each feedback
---
## Related Documents
- [Field Settings](/en/user-guide/feedback-management) - How to apply AI fields to channels
- [Issue Creation and Status Management](/en/user-guide/issue-management) - How to use AI recommended issues
- [Feedback Checking and Filtering](/en/user-guide/feedback-management) - How to check AI analysis results
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/06-image-setting.md
+102
View File
@@ -0,0 +1,102 @@
---
sidebar_position: 6
title: 'Image Settings'
description: 'This guide explains how to set up image storage methods and security policies for images attached to feedback.'
---
# Image Settings
ABC User Feedback supports **uploading images along with feedback** when users submit feedback. You can build a safe and efficient feedback collection environment by appropriately setting image storage methods and security policies.
![image-setting.png](/img/image/image-setting.png)
---
## Access Method
1. Click **Settings** in the top menu
2. Select **Channel List > [Select Channel]** from the left menu
3. Select **Image Management** from the bottom tabs
---
## Image Storage Integration Settings
S3 or S3-compatible storage integration is required to upload images directly to the server via **Multipart Upload API** or use **Presigned URL Download** functionality.
### Required Setting Items
| Item | Description | Example |
| --------------------- | ------------------------------------- | ----------------------------------------- |
| **Access Key ID** | Key ID for S3 access | `AKIAIOSFODNN7EXAMPLE` |
| **Secret Access Key** | Secret for the key | `wJalrXUtnFEMI/K7MDENG/...` |
| **End Point** | S3 API endpoint URL | `https://s3.ap-northeast-1.amazonaws.com` |
| **Region** | Region where bucket is located | `ap-northeast-1` |
| **Bucket Name** | Target bucket where images are stored | `consumer-ufb-images` |
### Presigned URL Download Settings
You can enhance image download security through the **Presigned URL Download** option.
#### Setting Options
- **Enable**: Access images through authenticated one-time URLs (enhanced security)
- **Disable**: Image URLs are directly exposed and publicly accessible
### Connection Test
After entering all settings, click the **Test Connection** button to verify storage connection.
Connection results:
- ✅ **Success**: "Connection test succeeded" message
- ❌ **Failure**: Recheck input values, bucket permissions, network settings
---
## Image URL Domain Whitelist Settings
When using **Image URL method** or wanting to enhance security, you can set a whitelist to allow only trusted domains.
### Current Status Check
Default setting is **"All image URLs are allowed"** state, allowing image URLs from all domains.
### Adding to Whitelist
To allow only specific domains for security enhancement:
1. Add trusted domains in the **Whitelist** area
2. Example domains:
- `cdn.yourcompany.com`
- `images.trusted-partner.io`
- `storage.googleapis.com`
---
## Supported Storage Services
### AWS S3
- Most commonly used cloud storage
- Stable and highly scalable
---
## Saving Settings
After completing all settings, click the **Save** button at the top right to save changes.
After saving:
- New image uploads work according to configured method
- Existing images remain with existing settings
- Recommended to recheck normal operation with Test Connection
---
## Related Documents
- [Field Settings](/en/user-guide/feedback-management) - How to add image fields to feedback forms
- [Feedback Checking and Filtering](/en/user-guide/feedback-management) - How to check uploaded images in feedback
- [API Key Management](./02-api-key-management.md) - API key security management methods
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 7,
"label": "Settings",
"description": "Guide for settings."
}
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/index.md
+8
View File
@@ -0,0 +1,8 @@
---
title: Settings
description: Guide for settings.
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 2,
"label": "User Guide"
}
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/01-user-guide/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: User Guide
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/01-docker-hub-images.md
+375
View File
@@ -0,0 +1,375 @@
---
id: docker-hub-images
title: Docker Hub Image Installation
description: This document explains how to quickly install the system using the official ABC User Feedback images registered on Docker Hub.
sidebar_position: 1
---
# Docker Hub Image Installation
ABC User Feedback provides official Docker images.
This document explains how to quickly set up the system locally using Docker Compose, including **Web UI, API server, database, SMTP server**, etc.
---
## 1. Prerequisites
| Item | Description |
| -------------- | ------------------------------------------------------------------------ |
| Docker | 20.10 or higher |
| Docker Compose | v2 or higher recommended |
| Ports Used | `3000`, `4000`, `13306`, `5080`, `25` (must be free on local machine) |
---
## 2. Docker Image Configuration
| Service Name | Description | Docker Image Name |
| ----------------- | ----------------------------------------- | ------------------------------------ |
| Web (Admin UI) | Frontend web UI (Next.js) | `line/abc-user-feedback-web` |
| API (Backend) | Backend server (NestJS) | `line/abc-user-feedback-api` |
| MySQL | Database | `mysql:8.0` |
| SMTP4Dev | Email server for local testing | `rnwood/smtp4dev:v3` |
| (Optional) OpenSearch | For search functionality and improved AI analysis accuracy | `opensearchproject/opensearch:2.16.0` |
---
## 3. `docker-compose.yml` Example
```yaml
name: abc-user-feedback
services:
web:
image: line/abc-user-feedback-web:latest
environment:
- NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
ports:
- 3000:3000
depends_on:
- api
restart: unless-stopped
api:
image: line/abc-user-feedback-api:latest
environment:
- JWT_SECRET=jwtsecretjwtsecretjwtsecret
- MYSQL_PRIMARY_URL=mysql://userfeedback:userfeedback@mysql:3306/userfeedback
- SMTP_HOST=smtp4dev
- SMTP_PORT=25
- SMTP_SENDER=user@feedback.com
# Uncomment below if using OpenSearch
# - OPENSEARCH_USE=true
# - OPENSEARCH_NODE=http://opensearch-node:9200
ports:
- 4000:4000
depends_on:
- mysql
restart: unless-stopped
mysql:
image: mysql:8.0
command:
[
"--default-authentication-plugin=mysql_native_password",
"--collation-server=utf8mb4_bin",
]
environment:
MYSQL_ROOT_PASSWORD: userfeedback
MYSQL_DATABASE: userfeedback
MYSQL_USER: userfeedback
MYSQL_PASSWORD: userfeedback
TZ: UTC
ports:
- 13306:3306
volumes:
- mysql:/var/lib/mysql
restart: unless-stopped
smtp4dev:
image: rnwood/smtp4dev:v3
ports:
- 5080:80
- 25:25
- 143:143
volumes:
- smtp4dev:/smtp4dev
restart: unless-stopped
# Uncomment below if you want to use OpenSearch
# opensearch-node:
# image: opensearchproject/opensearch:2.16.0
# restart: unless-stopped
# environment:
# - cluster.name=opensearch-cluster
# - node.name=opensearch-node
# - discovery.type=single-node
# - bootstrap.memory_lock=true
# - 'OPENSEARCH_JAVA_OPTS=-Xms512m -Xmx512m'
# - plugins.security.disabled=true
# - OPENSEARCH_INITIAL_ADMIN_PASSWORD=UserFeedback123!@#
# ulimits:
# memlock:
# soft: -1
# hard: -1
# nofile:
# soft: 65536
# hard: 65536
# volumes:
# - opensearch:/usr/share/opensearch/data
# ports:
# - 9200:9200
# - 9600:9600
volumes:
mysql:
smtp4dev:
# opensearch:
```
---
## 4. Execution Steps
### 4.1 Download and Run Docker Images
```bash
# Run all services in the background using Docker Compose
docker compose up -d
```
### 4.2 Check Running Status
```bash
# Check if all containers are running normally
docker compose ps
```
### 4.3 Check Service Access
- **Web Application**: [http://localhost:3000](http://localhost:3000)
- **API Server**: [http://localhost:4000](http://localhost:4000)
- **SMTP Test Page**: [http://localhost:5080](http://localhost:5080)
- **MySQL Database**: `localhost:13306` (user: `userfeedback`, password: `userfeedback`)
---
## 5. SMTP Configuration
By default, this configuration allows you to test emails through `smtp4dev`.
- **Web Interface**: [http://localhost:5080](http://localhost:5080)
- **SMTP Port**: `25`
- **IMAP Port**: `143`
### SMTP Testing Method
1. Register a user or use the user invitation feature in the web application
2. Check sent emails at [http://localhost:5080](http://localhost:5080)
3. Test email content and attachments
> **Important**: In actual production environments, you must integrate with an external SMTP server (e.g., Gmail, SendGrid, corporate SMTP, etc.).
## 6. Installation Verification
### 6.1 Web Application Access Verification
Access `http://localhost:3000` in your browser and verify:
- Tenant creation screen displays normally
- Page loading completes
- No JavaScript errors (check in browser developer tools)
### 6.2 API Server Status Check
```bash
# API server health check
curl http://localhost:4000/api/health
```
Expected response:
```json
{
"status": "ok",
"info": {
"database": {
"status": "up"
}
}
}
```
### 6.3 Database Connection Verification
```bash
# Directly access MySQL container to check database
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "SHOW DATABASES;"
# Check table creation
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "USE userfeedback; SHOW TABLES;"
```
### 6.4 Log Check
```bash
# Check logs for all services
docker compose logs
# Check logs for specific service only
docker compose logs api
docker compose logs web
docker compose logs mysql
```
---
## 7. OpenSearch Usage Notes
OpenSearch is an optional component that improves search functionality and AI analysis accuracy.
### 7.1 How to Enable OpenSearch
1. Uncomment environment variables in the `api` service in `docker-compose.yml`:
```yaml
- OPENSEARCH_USE=true
- OPENSEARCH_NODE=http://opensearch-node:9200
```
2. Uncomment the `opensearch-node` service
3. Uncomment `opensearch:` in the `volumes:` section
4. Ensure ports `9200`, `9600` are not in use on local machine
### 7.2 Memory Requirements
> **Warning**: OpenSearch requires at least 2GB of memory. If memory is insufficient, the container may automatically terminate.
### 7.3 OpenSearch Status Check
```bash
# Check OpenSearch cluster status
curl http://localhost:9200/_cluster/health
# Check OpenSearch node information
curl http://localhost:9200/_nodes
# Check indices
curl http://localhost:9200/_cat/indices
```
### 7.4 Disabling OpenSearch
To not use OpenSearch, comment out the corresponding service and environment variables in `docker-compose.yml`.
---
## 8. Troubleshooting
### 8.1 Port Conflict Issue
**Symptom**: Port binding error occurs when running `docker compose up`
**Solution**:
```bash
# Check ports in use
lsof -i :3000 # Web port
lsof -i :4000 # API port
lsof -i :13306 # MySQL port
lsof -i :5080 # SMTP port
# Stop processes using those ports and restart
docker compose down
docker compose up -d
```
### 8.2 Container Startup Failure
**Symptom**: Some containers fail to start or keep restarting
**Solution**:
```bash
# Check container status
docker compose ps
# Check logs for failed container
docker compose logs [service-name]
# Stop and remove all containers
docker compose down
# Remove volumes as well (warning: data loss)
docker compose down -v
# Start again
docker compose up -d
```
### 8.3 Database Connection Error
**Symptom**: MySQL connection failure from API server
**Solution**:
```bash
# Wait until MySQL container is fully started
docker compose logs mysql
# Test direct connection to MySQL container
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "SELECT 1;"
# Restart API service
docker compose restart api
```
### 8.4 Image Download Failure
**Symptom**: Cannot download Docker images
**Solution**:
```bash
# Check Docker Hub login
docker login
# Manually download images
docker pull line/abc-user-feedback-web:latest
docker pull line/abc-user-feedback-api:latest
# Check network connection
ping hub.docker.com
```
### 8.5 Memory Insufficient Issue
**Symptom**: OpenSearch container automatically terminates
**Solution**:
```bash
# Check system memory
free -h
# Check Docker memory usage
docker stats
# Disable OpenSearch (comment out in docker-compose.yml)
# Or increase memory allocation
```
---
## 9. Reference Links
- [ABC User Feedback Web - Docker Hub](https://hub.docker.com/r/line/abc-user-feedback-web)
- [ABC User Feedback API - Docker Hub](https://hub.docker.com/r/line/abc-user-feedback-api)
- [smtp4dev - Docker Hub](https://hub.docker.com/r/rnwood/smtp4dev)
- [OpenSearch - Docker Hub](https://hub.docker.com/r/opensearchproject/opensearch)
---
## Related Documents
- [Initial Setup Guide](/en/user-guide/getting-started)
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/02-cli-tool.md
+273
View File
@@ -0,0 +1,273 @@
---
sidebar_position: 2
title: "CLI Tool Usage"
description: "This document explains how to quickly and easily install and manage the system using the ABC User Feedback CLI tool."
---
# CLI Tool Usage
The ABC User Feedback CLI (`auf-cli`) is a command-line tool that simplifies system installation, execution, and management. As long as Node.js and Docker are installed, you can run it immediately via `npx` without installing additional dependencies or cloning the repository.
## Main Features
- Automatic setup of required infrastructure (MySQL, SMTP, OpenSearch)
- Simplified environment variable configuration
- Automatic start/stop of API and web servers
- Volume data cleanup
- Dynamic Docker Compose file generation
## Docker Images Used
- `line/abc-user-feedback-web:latest` - Web frontend
- `line/abc-user-feedback-api:latest` - API backend
- `mysql:8.0` - Database
- `rnwood/smtp4dev:v3` - SMTP test server
- `opensearchproject/opensearch:2.16.0` - Search engine (optional)
## Prerequisites
Before using the CLI tool, you must meet the following requirements:
- [Node.js v22 or higher](https://nodejs.org/en/download/)
- [Docker](https://docs.docker.com/desktop/)
## Basic Commands
### Initialization
To set up the infrastructure required for ABC User Feedback, run the following command:
```bash
npx auf-cli init
```
This command performs the following tasks:
1. Creates `config.toml` file for environment variable configuration
2. Sets up required infrastructure according to architecture (ARM/AMD)
After initialization is complete, a `config.toml` file is created in the current directory. You can edit this file as needed to adjust environment variables.
### Starting Server
To start the API and web servers, run the following command:
```bash
npx auf-cli start
```
This command performs the following tasks:
1. Reads environment variables from `config.toml` file
2. Generates Docker Compose file and starts services
3. Starts API and web server containers and required infrastructure (MySQL, SMTP, OpenSearch)
After the server starts successfully, you can access the ABC User Feedback web interface at `http://localhost:3000` (or configured URL) in your web browser. The CLI displays the following URLs:
- Web interface URL
- API URL
- MySQL connection string
- OpenSearch URL (if enabled)
- SMTP web interface (when using smtp4dev)
### Stopping Server
To stop the API and web servers, run the following command:
```bash
npx auf-cli stop
```
This command stops running API and web server containers and infrastructure containers. All data stored in volumes is preserved.
### Volume Cleanup
To clean up Docker volumes created during startup, run the following command:
```bash
npx auf-cli clean
```
This command stops all containers and deletes Docker volumes for MySQL, SMTP, OpenSearch, etc.
**Warning**: This operation deletes all data, so back up if needed.
You can also clean up unused Docker images using the `--images` option:
```bash
npx auf-cli clean --images
```
## Configuration File (config.toml)
Running the `init` command creates a `config.toml` file in the current directory. This file is used to configure environment variables for ABC User Feedback.
The following is an example of a `config.toml` file:
```toml
[web]
port = 3000
# api_base_url = "http://localhost:4000"
[api]
port = 4000
jwt_secret = "jwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecret"
# master_api_key = "MASTER_KEY"
# access_token_expired_time = "10m"
# refresh_token_expired_time = "1h"
# [api.auto_feedback_deletion]
# enabled = true
# period_days = 365
# [api.smtp]
# host = "smtp4dev" # SMTP_HOST
# port = 25 # SMTP_PORT
# sender = "user@feedback.com"
# username=
# password=
# tls=
# cipher_spec=
# opportunitic_tls=
# [api.opensearch]
# enabled = true
[mysql]
port = 13306
```
You can edit this file as needed to adjust environment variables. For detailed information on environment variables, refer to the [Environment Variable Settings](./05-configuration.md) document.
## Advanced Usage
### Changing Ports
By default, the web server uses port 3000 and the API server uses port 4000. To change these, modify the following settings in the `config.toml` file:
```toml
[web]
port = 8000 # Change web server port
api_base_url = "http://localhost:8080" # API URL must also be changed
[api]
port = 8080 # Change API server port
[mysql]
port = 13307 # Change MySQL port if needed
```
### Enabling OpenSearch
To enable OpenSearch for advanced search features:
```toml
[api.opensearch]
enabled = true
```
**Notes**:
- OpenSearch requires at least 2GB of available memory
- OpenSearch container is available at `http://localhost:9200`
- Check OpenSearch status: `http://localhost:9200/_cluster/health`
### SMTP Settings
For development environments, the default `smtp4dev` settings are recommended:
```toml
[api.smtp]
host = "smtp4dev"
port = 25
sender = "dev@feedback.local"
```
The smtp4dev web interface is available at `http://localhost:5080` to check sent emails.
## Troubleshooting
### Common Issues
1. **Docker-related errors**:
- Check if Docker is running: `docker --version`
- Check Docker permissions: `docker ps`
- Verify Docker Desktop is properly installed and running
2. **Port conflicts**:
- Check port usage: `lsof -i :PORT` (macOS/Linux) or `netstat -ano | findstr :PORT` (Windows)
- Change port settings in `config.toml`
- Common conflicting ports: 3000, 4000, 13306, 9200, 5080
3. **Service startup failure**:
- Check container logs: `docker compose logs SERVICE_NAME`
- Verify Docker images are available: `docker images`
- Check sufficient system resources (memory, disk space)
4. **Database connection issues**:
- Check MySQL container status: `docker compose ps mysql`
- Check MySQL logs: `docker compose logs mysql`
- Test connection: `docker compose exec mysql mysql -u userfeedback -p`
### Debugging Tips
1. **Check container logs**:
```bash
# All container logs
docker compose logs
# Specific service logs
docker compose logs api
docker compose logs web
docker compose logs mysql
```
2. **Check service status**:
```bash
# Check API status
curl http://localhost:4000/api/health
# Check OpenSearch status (if enabled)
curl http://localhost:9200/_cluster/health
```
3. **Direct database access**:
```bash
# Connect to MySQL
docker compose exec mysql mysql -u userfeedback -p userfeedback
```
## Limitations
The CLI tool is designed for development and testing environments. For production deployment, consider the following:
1. **Security Considerations**:
- Use environment variables instead of configuration files for sensitive data
- Implement proper secret management
- Use production-grade JWT secrets
- Enable HTTPS/TLS encryption
2. **Scalability and Availability**:
- Use orchestration tools like Kubernetes or Docker Swarm
- Implement load balancing and auto-scaling
- Set up proper monitoring and alerts
- Use managed database services (RDS, Cloud SQL, etc.)
3. **Data Management**:
- Implement automated backup strategies
- Use persistent volumes with proper backups
- Consider data retention policies
- Monitor disk usage and performance
## Next Steps
For detailed API and web server configuration options, refer to the [Environment Variable Settings](./05-configuration.md) document.
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/03-manual-setup.md
+276
View File
@@ -0,0 +1,276 @@
---
sidebar_position: 3
title: 'Manual Installation'
description: 'Manual installation guide for building and running ABC User Feedback directly from source code'
---
# Manual Installation
This document explains how to manually install and configure ABC User Feedback. This is useful when you want to build and run the application directly from source code.
## Prerequisites
Before proceeding with manual installation, you must meet the following requirements:
- [Node.js v22.19.0 or higher](https://nodejs.org/en/download/)
- [pnpm v10.15.0 or higher](https://pnpm.io/installation) (package manager)
- [Git](https://git-scm.com/downloads)
- [MySQL 8.0](https://www.mysql.com/downloads/)
- SMTP server
- (Optional) [OpenSearch 2.16](https://opensearch.org/)
## Downloading Source Code
First, clone the ABC User Feedback source code from the GitHub repository:
```bash
git clone https://github.com/line/abc-user-feedback.git
cd abc-user-feedback
```
## Infrastructure Setup
ABC User Feedback requires a MySQL database, SMTP server, and optionally OpenSearch. There are several ways to set up these infrastructure components.
### Infrastructure Setup Using Docker
The simplest method is to set up required infrastructure with Docker Compose:
```bash
docker-compose -f docker/docker-compose.infra.yml up -d
```
### Using Existing Infrastructure
If you already have MySQL, OpenSearch, or SMTP server, you can configure connection information as environment variables later.
## Installing Dependencies
ABC User Feedback uses a monorepo structure managed through TurboRepo. To install dependencies for all packages:
```bash
pnpm install
```
After installing dependencies, build all packages:
```bash
pnpm build
```
## Environment Variable Configuration
### API Server Environment Variables
Create a `.env` file in the `apps/api` directory and configure it by referring to `.env.example`:
```env
# Required environment variables
JWT_SECRET=DEV
MYSQL_PRIMARY_URL=mysql://userfeedback:userfeedback@localhost:13306/userfeedback # required
ACCESS_TOKEN_EXPIRED_TIME=10m # default: 10m
REFRESH_TOKEN_EXPIRED_TIME=1h # default: 1h
# Optional environment variables
# APP_PORT=4000 # default: 4000
# APP_ADDRESS=0.0.0.0 # default: 0.0.0.0
# MYSQL_SECONDARY_URLS= ["mysql://userfeedback:userfeedback@localhost:13306/userfeedback"] # optional
SMTP_HOST=localhost # required
SMTP_PORT=25 # required
SMTP_SENDER=user@feedback.com # required
# SMTP_USERNAME= # optional
# SMTP_PASSWORD= # optional
# SMTP_TLS= # default: false
# SMTP_CIPHER_SPEC= # default: TLSv1.2 if SMTP_TLS=true
# SMTP_OPPORTUNISTIC_TLS= # default: true if SMTP_TLS=true
# OPENSEARCH_USE=false # default: false
# OPENSEARCH_NODE= # required if OPENSEARCH_USE=true
# OPENSEARCH_USERNAME= # optional
# OPENSEARCH_PASSWORD= # optional
# AUTO_MIGRATION=true # default: true
# MASTER_API_KEY= # default: none
# BASE_URL=https://api.example.com # Public API server URL used in Swagger documentation (optional)
# AUTO_FEEDBACK_DELETION_ENABLED=false # default: false
# AUTO_FEEDBACK_DELETION_PERIOD_DAYS=365*5
```
### Web Server Environment Variables
Create a `.env` file in the `apps/web` directory and configure it by referring to `.env.example`:
```env
NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
```
For detailed information on environment variables, refer to the [Environment Variable Settings](./05-configuration.md) document.
## Database Migration
Before running the API server for the first time, you need to create the database schema. If you set the `AUTO_MIGRATION=true` environment variable, migrations will run automatically when the server starts.
To run migrations manually:
```bash
cd apps/api
npm run migration:run
```
## Running in Development Mode
### Running with Single Command
To run the API server and web server in development mode:
```bash
# From project root directory
pnpm dev
```
This command starts both the API server and web server simultaneously. The API server runs on port 4000 by default, and the web server runs on port 3000.
### Running Individual Packages
#### Building Common Packages
Before running the web application, you need to build shared packages:
```bash
# From project root directory
cd packages/ufb-shared
pnpm build
```
#### Building UI Packages
Before running the web application, you need to build UI packages:
```bash
# From project root directory
cd packages/ufb-tailwindcss
pnpm build
```
#### Running Each Server Individually
To run each server individually:
```bash
# Run API server only
cd apps/api
pnpm dev
# Run web server only
cd apps/web
pnpm dev
```
## Production Build
To build the application for production environment:
```bash
# From project root directory
pnpm build
```
This command builds both the API server and web server.
## Running in Production Mode
To run the production build:
```bash
# Run API server
cd apps/api
pnpm start
# Run web server
cd apps/web
pnpm start
```
## API Type Generation
When the backend API is running, you can generate API types for the frontend:
```bash
cd apps/web
pnpm generate-api-type
```
This command generates TypeScript types from OpenAPI specification and saves them to the `src/shared/types/api.type.ts` file.
**Note**: For this command to work properly, the API server must be running at `http://localhost:4000`.
## Code Quality Management
### Linting
To run code linting:
```bash
pnpm lint
```
### Formatting
To run code formatting:
```bash
pnpm format
```
### Testing
To run tests:
```bash
pnpm test
```
## Swagger Documentation
When the API server is running, you can check Swagger documentation at the following endpoints:
- **API Documentation**: http://localhost:4000/docs
- **Admin API Documentation**: http://localhost:4000/admin-docs
- **OpenAPI JSON**: http://localhost:4000/docs-json
- **Admin OpenAPI JSON**: http://localhost:4000/admin-docs-json
> **Note**: If you are serving the API server on a different URL (e.g., behind a reverse proxy), you can set the `BASE_URL` environment variable to generate correct API endpoint URLs in the Swagger documentation. Example: `BASE_URL=https://api.example.com`
## Troubleshooting
### Common Issues
1. **Dependency Installation Errors**:
- Verify Node.js version is v22.19.0 or higher.
- Verify pnpm version is v10.15.0 or higher.
- Update pnpm to the latest version.
- Try `pnpm install --force`.
2. **Database Connection Errors**:
- Verify MySQL server is running.
- Verify database credentials are correct.
- Verify `MYSQL_PRIMARY_URL` environment variable format is correct.
- If using Docker infrastructure, verify MySQL is running on port 13306 (not 3306).
3. **Build Errors**:
- Verify UI packages are built (`pnpm build:ui`).
- Verify all dependencies are installed.
- Check TypeScript errors.
4. **Runtime Errors**:
- Verify environment variables are set correctly.
- Verify required ports are available.
- Check error messages in logs.
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/04-smtp-configuration.md
+165
View File
@@ -0,0 +1,165 @@
---
id: smtp-configuration
title: SMTP Server Integration Guide
description: This guide explains how to integrate with external SMTP servers for sending authentication emails in production environments.
sidebar_position: 4
---
# SMTP Server Integration Guide
In production environments, instead of local test servers like `smtp4dev`,
you need to connect to **external SMTP servers (Gmail, SendGrid, company SMTP, etc.)**
to properly send authentication emails (registration, password reset, etc.).
This document explains environment variable configuration for SMTP server integration and major integration examples.
---
## 1. SMTP-Related Environment Variables
Set the following environment variables in the `api` service or `.env` file:
> **Note**: For SMTP servers that do not require authentication, `SMTP_USERNAME` and `SMTP_PASSWORD` can be omitted.
| Environment Variable | Description | Required |
| ---------------------------------- | ------------------------------------------------------ | -------- |
| `SMTP_HOST` | SMTP server address (e.g., smtp.gmail.com) | Required |
| `SMTP_PORT` | Port number (usually 587, 465, etc.) | Required |
| `SMTP_SENDER` | Sender email address (e.g., `noreply@yourdomain.com`) | Required |
| `SMTP_USERNAME` | SMTP authentication username (account ID) | Optional |
| `SMTP_PASSWORD` | SMTP authentication password or API key | Optional |
| `SMTP_TLS` | Whether to use TLS (`true` or `false`) | Optional |
| `SMTP_CIPHER_SPEC` | TLS encryption algorithm (default: `TLSv1.2`) | Optional |
| `SMTP_OPPORTUNISTIC_TLS` | Whether to use STARTTLS (`true` or `false`) | Optional |
> **Important**: In actual code, `SMTP_USERNAME` and `SMTP_PASSWORD` are used, and `SMTP_TLS=true` is mainly used for port 465, while `false` is mainly used for port 587.
---
## 2. Docker Environment Example
```yaml
api:
image: line/abc-user-feedback-api
environment:
- SMTP_HOST=smtp.gmail.com
- SMTP_PORT=587
- SMTP_USERNAME=your-email@gmail.com
- SMTP_PASSWORD=your-email-app-password
- SMTP_SENDER=noreply@yourdomain.com
- SMTP_TLS=false
- SMTP_OPPORTUNISTIC_TLS=true
```
Or you can manage it separately with a `.env` file:
```env
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USERNAME=your-email@gmail.com
SMTP_PASSWORD=your-email-app-password
SMTP_SENDER=noreply@yourdomain.com
SMTP_TLS=false
SMTP_OPPORTUNISTIC_TLS=true
```
---
## 3. SMTP Integration Examples
### ✅ Gmail SMTP Integration (for personal testing)
- `SMTP_HOST`: `smtp.gmail.com`
- `SMTP_PORT`: `587`
- `SMTP_USERNAME`: Gmail address (e.g., `abc@gmail.com`)
- `SMTP_PASSWORD`: **App password** (Allow less secure apps → not recommended)
- `SMTP_TLS`: `false`
- `SMTP_OPPORTUNISTIC_TLS`: `true`
> If **two-factor authentication** is enabled on your Gmail account, you must create an [app password](https://myaccount.google.com/apppasswords).
---
### ✅ SendGrid Integration (Recommended)
- `SMTP_HOST`: `smtp.sendgrid.net`
- `SMTP_PORT`: `587`
- `SMTP_USERNAME`: `apikey`
- `SMTP_PASSWORD`: Actual SendGrid API Key
- `SMTP_SENDER`: verified sender address
- `SMTP_TLS`: `false`
- `SMTP_OPPORTUNISTIC_TLS`: `true`
---
## 4. Testing Methods
### 4.1 Email Sending Test
1. **Email Verification Test**:
- Create admin or user account
- Verify email verification code is sent
2. **Password Reset Test**:
- Request password reset
- Verify email with reset link is received
3. **User Invitation Test**:
- Admin invites new user
- Verify invitation email is sent
### 4.2 Log Checking
If email sending fails, check detailed logs with the following command:
```bash
# Docker Compose environment
docker compose logs api
# Check logs for specific time period
docker compose logs --since=10m api
# Real-time log monitoring
docker compose logs -f api
```
If SMTP errors occur, detailed messages will be displayed in the logs.
---
## 5. Troubleshooting
| Problem Type | Cause or Solution |
| ----------------------------- | -------------------------------------- |
| Authentication Error (`535`) | Recheck `SMTP_USERNAME` / `SMTP_PASSWORD` |
| Connection Refused (`ECONNREFUSED`) | Firewall or incorrect port settings |
| Email Not Arriving | `SMTP_SENDER` is not verified |
| TLS Error (`ETLS`) | `SMTP_TLS` setting is incorrect |
| STARTTLS Failure | Check `SMTP_OPPORTUNISTIC_TLS` setting |
---
## 6. Email Templates Related to SMTP
Currently, emails are sent in the following situations:
- **Email Verification**: Send verification code when admin/user registers
- **Password Reset**: Send link when password reset is requested
- **User Invitation**: Send invitation email when admin invites user
Email content is based on **Handlebars templates** and includes the following information:
- Sender: `"User feedback" <SMTP_SENDER>`
- Base URL: Uses `ADMIN_WEB_URL` environment variable value
- Template location: `src/configs/modules/mailer-config/templates/`
---
## Related Documents
- [Docker Hub Installation Guide](./docker-hub-images)
- [Environment Variable Settings](./configuration)
- [Getting Started Guide](/en/user-guide/getting-started)
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/05-configuration.md
+207
View File
@@ -0,0 +1,207 @@
---
id: configuration
title: Environment Variable Configuration
description: This document explains how to configure environment variables for ABC User Feedback's API and web servers.
sidebar_position: 5
---
# Environment Variable Configuration
This document explains the main environment variables used by ABC User Feedback's **API server** and **web server** and how to configure them.
---
## 1. API Server Environment Variables
### Required Environment Variables
| Environment Variable | Description | Default | Example |
| ---------------------------- | ----------------------------- | ------- | -------------------------------- |
| `JWT_SECRET` | Secret key for JWT signing | None | `jwtsecretjwtsecretjwtsecret` |
| `MYSQL_PRIMARY_URL` | MySQL connection URL | None | `mysql://user:pass@host:3306/db` |
| `ACCESS_TOKEN_EXPIRED_TIME` | Access Token validity period | `10m` | `10m`, `30s`, `1h` |
| `REFRESH_TOKEN_EXPIRED_TIME` | Refresh Token validity period | `1h` | `1h`, `7d` |
> JWT secret should be a sufficiently complex and secure string.
⚠️ **Security Notes**:
- `JWT_SECRET` should be at least 32 characters long and complex
- Never use default values in production environments
- Do not include environment variable files (`.env`) in version control
- Manage sensitive information through environment variables or secret management systems
---
### Optional Environment Variables
| Environment Variable | Description | Default | Example |
| ---------------------- | --------------------------------------------------- | ----------------------- | --------------------------- |
| `APP_PORT` | API server port | `4000` | `4000` |
| `APP_ADDRESS` | Binding address | `0.0.0.0` | `127.0.0.1` |
| `ADMIN_WEB_URL` | Admin web URL | `http://localhost:3000` | `https://admin.company.com` |
| `BASE_URL` | Public API server URL used in Swagger documentation | None | `https://api.example.com` |
| `MYSQL_SECONDARY_URLS` | Secondary DB URLs (JSON array) | None | `["mysql://..."]` |
| `AUTO_MIGRATION` | Auto migration on app startup | `true` | `false` |
| `MASTER_API_KEY` | Master permission API key (optional) | None | `abc123xyz` |
| `NODE_OPTIONS` | Node execution options | None | `--max_old_space_size=4096` |
---
### SMTP Settings (Email Authentication)
| Environment Variable | Description | Example |
| ------------------------ | ---------------------------- | ------------------------------ |
| `SMTP_HOST` | SMTP server address | `smtp.gmail.com` |
| `SMTP_PORT` | Port (usually 587 or 465) | `587` |
| `SMTP_USERNAME` | Login username | `user@example.com` |
| `SMTP_PASSWORD` | Login password or token | `app-password` |
| `SMTP_SENDER` | Sender address | `noreply@company.com` |
| `SMTP_BASE_URL` | Base URL for links in emails | `https://feedback.company.com` |
| `SMTP_TLS` | Whether to use TLS | `true` |
| `SMTP_CIPHER_SPEC` | Encryption spec | `TLSv1.2` |
| `SMTP_OPPORTUNISTIC_TLS` | Whether to support STARTTLS | `true` |
📎 For detailed settings, refer to the [SMTP Integration Guide](./04-smtp-configuration.md).
---
## 2. OpenSearch Settings (Optional)
| Environment Variable | Description | Example |
| --------------------- | ---------------------------- | ----------------------- |
| `OPENSEARCH_USE` | Whether to enable OpenSearch | `true` |
| `OPENSEARCH_NODE` | OpenSearch node URL | `http://localhost:9200` |
| `OPENSEARCH_USERNAME` | Authentication ID | `admin` |
| `OPENSEARCH_PASSWORD` | Authentication password | `admin123` |
> OpenSearch is used to improve search speed and AI features.
---
## 3. Automatic Feedback Deletion Settings
| Environment Variable | Description | Default / Condition |
| ------------------------------------ | ------------------------------------ | --------------------------- |
| `AUTO_FEEDBACK_DELETION_ENABLED` | Enable old feedback deletion feature | `false` |
| `AUTO_FEEDBACK_DELETION_PERIOD_DAYS` | Deletion criteria in days | `365` (required if enabled) |
---
## 4. API Log Export Settings (Optional)
The API can export application logs through OpenTelemetry in addition to the standard console logs.
<!-- markdownlint-disable MD060 -->
| Environment Variable | Description | Default | Example |
| ---------------------------------- | ---------------------------------------------------------------- | ------- | ---------------------------------------------------------- |
| `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` | OTLP HTTP logs endpoint used by the pino OpenTelemetry transport | None | `http://localhost:4319/v1/logs` |
| `OTEL_RESOURCE_ATTRIBUTES` | OpenTelemetry resource attributes for exported logs | None | `service.name=abc-user-feedback-api,service.version=1.1.1` |
<!-- markdownlint-enable MD060 -->
> When `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` is set, the API keeps writing pretty console logs and also sends the same logs to the configured OTLP HTTP endpoint.
> If you also set `OTEL_RESOURCE_ATTRIBUTES`, you can attach standard OpenTelemetry resource metadata such as `service.name` and `service.version` using comma-separated `key=value` pairs.
> Use the example values from `apps/api/.env.example` as the baseline when configuring local development environments.
### Local Verification Flow
- Start the local OTEL test stack from the repository root:
```bash
docker compose -f docker/docker-compose.otel-test.yml up -d
```
- Set the following variables in `apps/api/.env` based on the example in `apps/api/.env.example`:
```env
OTEL_EXPORTER_OTLP_LOGS_ENDPOINT=http://localhost:4319/v1/logs
OTEL_RESOURCE_ATTRIBUTES=service.name=abc-user-feedback-api,service.version=1.1.1
```
> The API does not parse this value itself. `pino-opentelemetry-transport` and the OpenTelemetry SDK consume these standard OTEL environment variables directly.
- Start the API server and trigger requests that generate logs.
- Vector should receive OTLP logs on port `4319` and print transformed log records to its console output.
- OpenSearch should be reachable on host port `9201`.
- OpenSearch Dashboards should be reachable on [http://localhost:5602](http://localhost:5602), where you can inspect the `logs-*` indices created by the local stack.
> The local test stack uses OTLP HTTP on `4319`, OpenSearch on `9201`, and OpenSearch Dashboards on `5602` as defined in `docker/docker-compose.otel-test.yml`.
---
## 5. Web Server Environment Variables
### Required Environment Variables
| Environment Variable | Description | Example |
| -------------------------- | --------------------------------- | ----------------------- |
| `NEXT_PUBLIC_API_BASE_URL` | API server address for client use | `http://localhost:4000` |
### Optional Environment Variables
| Environment Variable | Description | Default | Example |
| -------------------- | ------------- | ------- | ------- |
| `PORT` | Frontend port | `3000` | `3000` |
---
## 6. Configuration Methods
### Docker Compose Example
```yaml
services:
api:
image: line/abc-user-feedback-api
environment:
- JWT_SECRET=changeme
- MYSQL_PRIMARY_URL=mysql://user:pass@mysql:3306/userfeedback
- SMTP_HOST=smtp.sendgrid.net
- SMTP_USERNAME=apikey
- SMTP_PASSWORD=your-sendgrid-key
```
### .env File Example
```env
# apps/api/.env
JWT_SECRET=changemechangemechangeme
MYSQL_PRIMARY_URL=mysql://root:pass@localhost:3306/db
ACCESS_TOKEN_EXPIRED_TIME=10m
REFRESH_TOKEN_EXPIRED_TIME=1h
SMTP_HOST=smtp.example.com
SMTP_SENDER=noreply@example.com
# BASE_URL=https://api.example.com # Set when serving behind a reverse proxy
# apps/web/.env
NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
```
---
## 7. Troubleshooting Guide
<!-- markdownlint-disable MD060 -->
| Problem | Cause and Solution |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| Environment variables not recognized | Check `.env` location or restart container |
| DB connection failure | Check `MYSQL_PRIMARY_URL` format or connection info |
| SMTP error | Recheck port/TLS settings or authentication info |
| OpenSearch error | Check node URL or user authentication |
| OTEL log export not working | Check whether `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` is set, verify the endpoint URL, and confirm the OTEL stack is running |
| JWT token error | Check `JWT_SECRET` length and complexity |
| Environment variable validation failure | Check for missing required variables or type errors |
| Port conflict | Check `APP_PORT`, `PORT` settings |
<!-- markdownlint-enable MD060 -->
---
## Related Documents
- [Docker Installation Guide](./docker-hub-images)
- [SMTP Integration Guide](./smtp-configuration)
- [Getting Started Guide](/en/user-guide/getting-started)
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 1,
"label": "Installation",
"description": "Guide for setting up development environment and installation."
}
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: Installation
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/02-api-integration.md
+533
View File
@@ -0,0 +1,533 @@
---
sidebar_position: 2
title: "API Integration"
description: "This guide explains how to integrate external systems using ABC User Feedback API and provides actual implementation examples."
---
# API Integration
ABC User Feedback can integrate with external systems through **RESTful API**. You can programmatically collect feedback, manage issues, and query data, making it easy to integrate with existing services or workflows.
---
## API Basic Information
### Official API Documentation
The **complete API documentation** for ABC User Feedback can be found at the following link:
🔗 **[Official API Documentation (Redocly)](https://line.github.io/abc-user-feedback/)**
This documentation provides detailed specs for all endpoints, request/response examples, and an interface for actual testing.
### Base URL
```
https://your-domain.com/api
```
### Authentication Method
All API requests use **API key-based authentication**.
```http
X-API-KEY: your-api-key-here
Content-Type: application/json
```
:::warning Security Notice
Use API keys only on the server side, and do not expose them to clients (browsers, mobile apps).
:::
### API Key Issuance Method
1. **Access Admin Page**: Log in to ABC User Feedback admin page
2. **Project Settings**: Navigate to the settings page for the project
3. **API Key Management**: Create a new API key from the "API Key Management" menu
4. **Copy Key**: Save the generated API key in a safe place
:::info API Key Permissions
API keys are issued per project and can only access data for that project.
:::
---
## Main API Endpoint Examples
### 1. Creating Feedback
#### Basic Feedback Creation
```javascript
const createFeedback = async (
projectId,
channelId,
message,
issueNames = []
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
message: message,
issueNames: issueNames,
}),
}
);
return await response.json();
};
// Usage example
const feedback = await createFeedback(1, 1, "Payment error occurred", [
"Payment",
"Error",
]);
```
### 2. Querying Feedback
#### Channel-Based Feedback Search
```javascript
const searchFeedbacks = async (
projectId,
channelId,
searchText,
limit = 10,
page = 1
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/search`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
limit: limit,
page: page,
query: {
searchText: searchText,
createdAt: {
gte: "2024-01-01",
lt: "2024-12-31",
},
},
sort: {
createdAt: "DESC",
},
}),
}
);
return await response.json();
};
// Usage example
const feedbacks = await searchFeedbacks(1, 1, "Payment", 20, 1);
console.log(
`Retrieved ${feedbacks.items.length} out of ${feedbacks.meta.totalItems} feedback`
);
```
#### Single Feedback Query
```javascript
const getFeedbackById = async (projectId, channelId, feedbackId) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`,
{
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// Usage example
const feedback = await getFeedbackById(1, 1, 123);
console.log("Feedback details:", feedback);
```
#### Feedback Update
```javascript
const updateFeedback = async (projectId, channelId, feedbackId, updateData) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify(updateData),
}
);
return await response.json();
};
// Usage example
const updatedFeedback = await updateFeedback(1, 1, 123, {
message: "Updated feedback content",
issueNames: ["Updated issue"],
});
```
#### Feedback Deletion
```javascript
const deleteFeedbacks = async (projectId, channelId, feedbackIds) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
feedbackIds: feedbackIds,
}),
}
);
return await response.json();
};
// Usage example
const result = await deleteFeedbacks(1, 1, [123, 124, 125]);
console.log("Deletion complete:", result);
```
### 3. Issue Management
#### Issue Creation
```javascript
const createIssue = async (projectId, name, description) => {
const response = await fetch(`/api/projects/${projectId}/issues`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
name: name,
description: description,
}),
});
return await response.json();
};
// Usage example
const issue = await createIssue(
1,
"Payment Error",
"User experienced error during payment process"
);
```
#### Issue Search
```javascript
const searchIssues = async (projectId, query = {}) => {
const response = await fetch(`/api/projects/${projectId}/issues/search`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
limit: 10,
page: 1,
query: query,
sort: {
createdAt: "DESC",
},
}),
});
return await response.json();
};
// Usage example
const issues = await searchIssues(1, { name: "Payment" });
```
#### Issue Query
```javascript
const getIssueById = async (projectId, issueId) => {
const response = await fetch(`/api/projects/${projectId}/issues/${issueId}`, {
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
});
return await response.json();
};
// Usage example
const issue = await getIssueById(1, 123);
console.log("Issue details:", issue);
```
#### Issue Update
```javascript
const updateIssue = async (projectId, issueId, updateData) => {
const response = await fetch(`/api/projects/${projectId}/issues/${issueId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify(updateData),
});
return await response.json();
};
// Usage example
const updatedIssue = await updateIssue(1, 123, {
name: "Updated issue name",
description: "Updated issue description",
});
```
#### Issue Deletion
```javascript
const deleteIssues = async (projectId, issueIds) => {
const response = await fetch(`/api/projects/${projectId}/issues`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
issueIds: issueIds,
}),
});
return await response.json();
};
// Usage example
const result = await deleteIssues(1, [123, 124, 125]);
console.log("Issue deletion complete:", result);
```
#### Adding Issue to Feedback
```javascript
const addIssueToFeedback = async (
projectId,
channelId,
feedbackId,
issueId
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}/issues/${issueId}`,
{
method: "POST",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// Usage example
const result = await addIssueToFeedback(1, 1, 123, 456);
console.log("Issue added:", result);
```
#### Removing Issue from Feedback
```javascript
const removeIssueFromFeedback = async (
projectId,
channelId,
feedbackId,
issueId
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}/issues/${issueId}`,
{
method: "DELETE",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// Usage example
const result = await removeIssueFromFeedback(1, 1, 123, 456);
console.log("Issue removed:", result);
```
### 4. Project and Channel Information
#### Project Information Query
```javascript
const getProjectInfo = async (projectId) => {
const response = await fetch(`/api/projects/${projectId}`, {
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
});
return await response.json();
};
// Usage example
const project = await getProjectInfo(1);
console.log("Project information:", project);
```
#### Channel Field Query
```javascript
const getChannelFields = async (projectId, channelId) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/fields`,
{
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// Usage example
const fields = await getChannelFields(1, 1);
console.log("Channel fields:", fields);
```
---
## API Testing via Swagger
ABC User Feedback provides **Swagger UI** to easily test and understand the API.
### Swagger Access Method
Access via **API server address + `/docs`**:
```
https://your-domain.com/api/docs
```
Or in **ReDoc format**:
```
https://your-domain.com/api/docs/redoc
```
### Setting API Key in Swagger
1. Click the **"Authorize"** button at the top of Swagger UI
2. Enter the issued API key in the **X-API-KEY** field
3. Click **"Authorize"** to complete authentication
After this, all API requests will automatically include the API key for testing.
### Swagger Usage Tips
- Use **"Try it out"** button to test actual API calls
- Check actual response data structure in **Response body** section
- View detailed request/response data format in **Schema** tab
- Generate **cURL** commands automatically for CLI testing
---
## Error Handling and Retry Logic
### HTTP Status Codes
| Status Code | Meaning | Handling Method |
| ----------- | ---------------- | ----------------------------- |
| **200** | Success | Normal processing |
| **400** | Bad Request | Validate request data |
| **401** | Authentication Failed | Check API key |
| **403** | Forbidden | Check project access permissions |
| **404** | Not Found | Check ID value |
| **429** | Rate Limit Exceeded | Retry after a moment |
| **500** | Server Error | Retry or contact support team |
## Response Data Parsing Method
### Pagination Response Structure
```json
{
"meta": {
"itemCount": 10,
"totalItems": 100,
"itemsPerPage": 10,
"totalPages": 10,
"currentPage": 1
},
"items": [
{
"id": 1,
"message": "Feedback content",
"createdAt": "2024-01-01T00:00:00.000Z",
"issues": [
{
"id": 1,
"name": "Issue name"
}
]
}
]
}
```
## Security and Performance Optimization
### API Key Security
- **Use environment variables**: Manage API keys as environment variables
- **Server side only**: Do not expose API keys to clients
- **Key rotation**: Regularly replace API keys
- **IP whitelist**: Allow access only from specific IPs when possible
### Performance Optimization
- **Use pagination**: Set appropriate limit when querying large amounts of data
- **Request only needed fields**: Improve response speed through query optimization
- **Caching strategy**: Cache frequently queried data on client side
- **Batch processing**: Process multiple requests together
## Related Documents
- [API Key Management](/en/user-guide/settings/api-key-management) - How to issue API keys from UI
- [Image Settings](/en/user-guide/settings/image-setting) - Settings for using image upload API
- [Webhook Integration](/en/user-guide/settings/webhook-management) - Real-time notification settings that can be used with API
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/03-oauth-integration.md
+172
View File
@@ -0,0 +1,172 @@
---
sidebar_position: 3
title: "OAuth Integration"
description: "This guide explains how to integrate single sign-on (SSO) through Google OAuth and custom OAuth providers."
---
# OAuth Integration
By setting up OAuth 2.0-based single sign-on (SSO) in ABC User Feedback, users can log in with existing accounts (Google, Microsoft, GitHub, etc.) without creating separate accounts. This improves user convenience and is essential for implementing integrated authentication in enterprise environments.
---
## OAuth Integration Overview
OAuth methods supported by ABC User Feedback:
### 1. Google OAuth
- Provided by default without additional setup
- Easy login via Google account
### 2. Custom OAuth Provider
- In-house authentication systems
- Other OAuth 2.0/OpenID Connect compatible services
After setting up OAuth, it can be used alongside existing email login, and you can restrict to OAuth only according to organizational policy.
---
## Google OAuth Integration Settings
### Settings in Google Cloud Console
#### 1. Access Google Cloud Console
Access [Google Cloud Console](https://console.cloud.google.com) and create a project or select an existing project.
#### 2. Create OAuth 2.0 Client ID
1. Navigate to **APIs & Services > Credentials** menu
2. Select **+ Create Credentials > OAuth Client ID**
3. Select application type as **Web Application**
#### 3. Set Authorized Redirect URIs
Add the following URL to **Authorized Redirect URIs**:
```
https://your-domain.com/auth/oauth-callback
```
Examples:
- `https://feedback.company.com/auth/oauth-callback`
- `http://localhost:3000/auth/oauth-callback` (development environment)
#### 4. Check Client Information
After creation is complete, check and copy the following information:
- **Client ID**: `1234567890-abc123def456.apps.googleusercontent.com`
- **Client Secret**: `GOCSPX-abcdef123456`
### Google OAuth Settings in ABC User Feedback
To use Google OAuth, follow these steps to configure:
#### 1. Enable Google OAuth Settings
In **Settings > Login Management**:
1. Enable **OAuth2.0 Login** toggle
2. Select **Login Button Type** as "Google Login"
3. Enter information obtained from Google Cloud Console:
- **Client ID**: Client ID created in Google Cloud Console
- **Client Secret**: Client secret created in Google Cloud Console
- **Authorization Code Request URL**: `https://accounts.google.com/o/oauth2/v2/auth`
- **Scope**: `openid email profile`
- **Access Token URL**: `https://oauth2.googleapis.com/token`
- **User Profile Request URL**: `https://www.googleapis.com/oauth2/v2/userinfo`
- **Email Key**: `email`
#### 2. Register Redirect URI
Add the following URL to **Authorized Redirect URIs** in Google Cloud Console:
```
https://your-domain.com/auth/oauth-callback
```
For development environment:
```
http://localhost:3000/auth/oauth-callback
```
---
## Custom OAuth Provider Integration
### In-House Authentication System Integration
ABC User Feedback can integrate with in-house authentication systems used in enterprise environments. Most in-house authentication systems support OAuth 2.0 or OpenID Connect standards, so integration is possible through standard OAuth flow.
#### Requirements for In-House Authentication System Settings
To integrate with an in-house authentication system, the following information is required:
1. **OAuth Client Registration**
- Client ID
- Client Secret
- Redirect URI: `https://your-domain.com/auth/oauth-callback`
2. **OAuth Endpoint Information**
- Authorization URL (authentication request URL)
- Token URL (token exchange URL)
- User Info URL (user information query URL)
3. **Permission Scope (Scope)**
- User profile information access permissions
- Email address access permissions
#### Common In-House Authentication System Examples
| Item | Description | In-House System Example |
| ---------------------------------- | ----------------------------------------- | ------------------------------------------------- |
| **Login Button Type** | Login button type | `CUSTOM` |
| **Login Button Name** | Name displayed on login button | `Sign in with Company Account` |
| **Client ID** | OAuth client ID | `company-auth-client-123` |
| **Client Secret** | Client secret | `company-secret-abc123` |
| **Authorization Code Request URL** | User authentication request URL | `https://auth.company.com/oauth/authorize` |
| **Scope** | Permission scope to request | `openid email profile` |
| **Access Token URL** | Token request URL | `https://auth.company.com/oauth/token` |
| **User Profile Request URL** | User information query API | `https://auth.company.com/api/user` |
| **Email Key** | Email field name in user information JSON | `email` or `mail` |
### Other OAuth 2.0/OpenID Connect Compatible Services
ABC User Feedback can integrate with all authentication services that comply with OAuth 2.0 or OpenID Connect standards.
#### Supported Service Types
- **OpenID Connect Providers**: Services supporting standard OpenID Connect protocol
- **OAuth 2.0 Providers**: Services supporting OAuth 2.0 Authorization Code flow
- **Custom Authentication Servers**: Self-built services providing standard OAuth endpoints
#### Integration Setup Method
Configure custom OAuth in **Settings > Login Management**:
1. **Log in with admin account** and navigate to **Settings > Login Management** menu
2. Enable **OAuth2.0 Login** toggle
3. Select **Login Button Type** as `CUSTOM`
4. Enter information received from authentication service provider:
- **Login Button Name**: Text displayed on login button (e.g., "Sign in with Company Account")
- **Client ID**: OAuth client identifier
- **Client Secret**: Client authentication secret
- **Authorization Code Request URL**: User authentication request URL
- **Scope**: Permission scope to request (space-separated, e.g., "openid email profile")
- **Access Token URL**: Access token request URL
- **User Profile Request URL**: User profile information query URL
- **Email Key**: Email field name in user information JSON (e.g., "email" or "mail")
---
## Related Documents
- [Login Management](/en/user-guide/settings/tenant-settings) - How to configure OAuth in UI
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/04-webhook-integration.md
+303
View File
@@ -0,0 +1,303 @@
---
sidebar_position: 4
title: 'Webhook Integration'
description: 'This guide explains how to integrate with external systems in real-time using webhooks and provides implementation examples.'
---
# Webhook Integration
With webhooks, you can deliver major events occurring in ABC User Feedback to external systems in real-time. You can integrate with Slack notifications, automation workflows, custom analysis systems, etc.
---
## Supported Event Types
Events supported by ABC User Feedback are as follows:
### 1. FEEDBACK_CREATION
Occurs when new feedback is created.
**Request Headers:**
```
Content-Type: application/json
x-webhook-token: your-secret-token
```
**Payload Example:**
```json
{
"event": "FEEDBACK_CREATION",
"data": {
"feedback": {
"id": 123,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"message": "User feedback content",
"userEmail": "user@example.com",
"issues": [
{
"id": 456,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"name": "Bug Report",
"description": "Issue description",
"status": "OPEN",
"externalIssueId": "EXT-123",
"feedbackCount": 5
}
]
},
"channel": {
"id": 1,
"name": "Website Feedback"
},
"project": {
"id": 1,
"name": "My Project"
}
}
}
```
### 2. ISSUE_CREATION
Occurs when a new issue is created.
**Payload Example:**
```json
{
"event": "ISSUE_CREATION",
"data": {
"issue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T11:00:00.000Z",
"name": "New Issue",
"description": "Issue description",
"status": "OPEN",
"externalIssueId": "EXT-789",
"feedbackCount": 0
},
"project": {
"id": 1,
"name": "My Project"
}
}
}
```
### 3. ISSUE_STATUS_CHANGE
Occurs when issue status is changed.
**Payload Example:**
```json
{
"event": "ISSUE_STATUS_CHANGE",
"data": {
"issue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T12:00:00.000Z",
"name": "Issue Name",
"description": "Issue description",
"status": "IN_PROGRESS",
"externalIssueId": "EXT-789",
"feedbackCount": 3
},
"project": {
"id": 1,
"name": "My Project"
},
"previousStatus": "OPEN"
}
}
```
### 4. ISSUE_ADDITION
Occurs when an issue is added to feedback.
**Payload Example:**
```json
{
"event": "ISSUE_ADDITION",
"data": {
"feedback": {
"id": 123,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"message": "User feedback content",
"issues": [
{
"id": 456,
"name": "Existing Issue",
"status": "OPEN"
},
{
"id": 789,
"name": "Newly Added Issue",
"status": "OPEN"
}
]
},
"channel": {
"id": 1,
"name": "Website Feedback"
},
"project": {
"id": 1,
"name": "My Project"
},
"addedIssue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T11:00:00.000Z",
"name": "Newly Added Issue",
"description": "Issue description",
"status": "OPEN",
"externalIssueId": "EXT-456",
"feedbackCount": 1
}
}
}
```
---
## Webhook Receiving Server Implementation
You need to implement an HTTP server to receive webhooks. The server must meet the following requirements:
### Basic Requirements
1. **HTTP POST Request Handling**: Webhooks are sent via HTTP POST
2. **JSON Payload Parsing**: Request body is in JSON format
3. **Return 200 Response Code**: Must respond with 200 status code on successful processing
### Implementation Example (Node.js/Express)
```javascript
const express = require('express');
const app = express();
app.use(express.json());
app.post('/webhook', (req, res) => {
const { event, data } = req.body;
const token = req.headers['x-webhook-token'];
// Token verification
if (token !== 'your-secret-token') {
return res.status(401).json({ error: 'Unauthorized' });
}
// Event processing
switch (event) {
case 'FEEDBACK_CREATION':
console.log('New feedback created:', data.feedback);
// Feedback processing logic
break;
case 'ISSUE_CREATION':
console.log('New issue created:', data.issue);
// Issue processing logic
break;
case 'ISSUE_STATUS_CHANGE':
console.log(
'Issue status changed:',
data.issue,
'Previous status:',
data.previousStatus,
);
// Status change processing logic
break;
case 'ISSUE_ADDITION':
console.log('Issue added:', data.addedIssue);
// Issue addition processing logic
break;
}
res.status(200).json({ success: true });
});
app.listen(3000, () => {
console.log('Webhook listener server running on port 3000.');
});
```
---
## Security and Retry Policy
### Security Considerations
- **Token Verification**: Verify requests through `x-webhook-token` header
- **HTTPS Usage**: Always use HTTPS in production environments
### Retry Policy
- **Automatic Retry**: ABC User Feedback automatically retries up to 3 times on webhook transmission failure
- **Retry Interval**: Each retry is executed after 3 seconds
### Error Handling
- **4xx Errors**: Considered client errors, not retried
- **5xx Errors**: Considered server errors, retried
- **Network Errors**: Retried on connection failure
---
## Usage Examples
### 1. Automatic Translation
```javascript
// Receive FEEDBACK_CREATION event and automatically translate
if (event === 'FEEDBACK_CREATION') {
const translatedMessage = await translateText(data.feedback.message);
// Update feedback with translated content
await updateFeedback(data.feedback.id, { translatedMessage });
}
```
### 2. External Ticket System Integration
```javascript
// Receive ISSUE_CREATION event and create ticket in external system
if (event === 'ISSUE_CREATION') {
const ticketId = await createExternalTicket({
title: data.issue.name,
description: data.issue.description,
priority: 'medium',
});
// Store external ticket ID in issue
await updateIssue(data.issue.id, { externalIssueId: ticketId });
}
```
### 3. Notification System Integration
```javascript
// Receive ISSUE_STATUS_CHANGE event and notify team
if (event === 'ISSUE_STATUS_CHANGE') {
await sendSlackNotification({
channel: '#feedback-alerts',
message: `Issue "${data.issue.name}" status changed from ${data.previousStatus} to ${data.issue.status}.`,
});
}
```
---
## Related Documents
- [Webhook Management](/en/user-guide/settings/webhook-management) - How to configure webhooks in UI
- [API Integration](./02-api-integration.md) - API usage that can be used with webhooks
- [Issue Management](/en/user-guide/issue-management) - Understanding issue status change events
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 3,
"label": "Developer Guide"
}
apps/docs/i18n/en/docusaurus-plugin-content-docs/current/02-developer-guide/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: Developer Guide
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/en/docusaurus-theme-classic/footer.json
+14
View File
@@ -0,0 +1,14 @@
{
"copyright": {
"message": "Copyright © {year} ABC User Feedback.",
"description": "The footer copyright"
},
"link.title.Docs": {
"message": "Docs",
"description": "The title of the footer links column with title=Docs in the footer"
},
"link.title.More": {
"message": "More",
"description": "The title of the footer links column with title=More in the footer"
}
}
apps/docs/i18n/en/docusaurus-theme-classic/navbar.json
+18
View File
@@ -0,0 +1,18 @@
{
"title": {
"message": "ABC User Feedback",
"description": "The title in the navbar"
},
"item.label.Docs": {
"message": "Docs",
"description": "Navbar item with label Docs"
},
"item.label.GitHub": {
"message": "GitHub",
"description": "Navbar item with label GitHub"
},
"logo.alt": {
"message": "LOGO",
"description": "The alt text of navbar logo"
}
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current.json
+27
View File
@@ -0,0 +1,27 @@
{
"version.label": {
"message": "Next",
"description": "The label for version current"
},
"sidebar.docs.category.소개": {
"message": "紹介",
"description": "The label for category Introduction in sidebar docs"
},
"sidebar.docs.category.사용자 가이드": {
"message": "ユーザーガイド",
"description": "The label for category User Guide in sidebar docs"
},
"sidebar.docs.category.설정": {
"message": "設定",
"description": "The label for category Settings in sidebar docs"
},
"sidebar.docs.category.개발자 가이드": {
"message": "開発者ガイド",
"description": "The label for category Developer Guide in sidebar docs"
},
"sidebar.docs.category.설치": {
"message": "インストール",
"description": "The label for category Installation in sidebar docs"
}
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/00-index.md
+40
View File
@@ -0,0 +1,40 @@
---
sidebar_position: 1
slug: /
---
# ようこそ
ようこそ！このドキュメントは、ABC User Feedbackに関する包括的なガイドを提供します。
![ABC User Feedback](/assets/cover.png)
## ABC User Feedbackとは？
ABC User Feedbackは、顧客の声（VoC）フィードバックを効率的に収集、分類、管理するために設計されたスタンドアロンのWebアプリケーションです。フィードバックタギングシステム、カンバンモード、イシュートラッカー、SSO認証など、さまざまな機能を提供します。現在、1,000万MAUを有するサービスで利用されています。
<p align="center">
<video src="https://github.com/user-attachments/assets/a2ef7a1a-41ec-4cec-b7d1-bda5fbd7d48b" width="100%" />
</p>
## 主な機能
- **フィードバックタギングシステム**: トピック別にフィードバックを分類・管理
- **カンバンモード**: イシューグループを効率的に視覚化・管理
- **イシュートラッカー統合**: ステータスインジケーターでイシューを追跡し、外部システムと統合
- **シングルサインオン（SSO）**: エンタープライズレベルの認証要件をサポートするOAuth認証
- **ロールベースアクセス制御（RBAC）**: きめ細かいユーザー権限管理
- **ダッシュボード**: フィードバックとイシューの統計データを視覚化
## はじめに
- [インストールガイド](/ja/developer-guide/installation/docker-hub-images) - Docker、CLIツール、または手動セットアップによるインストール方法
- [チュートリアル](/ja/user-guide/getting-started) - 基本的な使用方法ガイド
## サポートを受ける
質問がある、またはヘルプが必要ですか？以下のリソースをご利用ください：
- [GitHub Issues](https://github.com/line/abc-user-feedback/issues) - バグレポートと機能リクエスト
- [GitHub Discussions](https://github.com/line/abc-user-feedback/discussions) - コミュニティディスカッション
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/01-project-overview.md
+75
View File
@@ -0,0 +1,75 @@
---
sidebar_position: 1
title: "プロジェクト概要"
description: "プロジェクト概要を紹介します。"
---
# プロジェクト概要
## ABC User Feedbackとは？
ABC User Feedbackは、顧客の声（Voice of Customer、VoC）を効率的に収集、分類、管理するために設計されたスタンドアロンのWebアプリケーションです。このオープンソースソリューションは、ユーザーフィードバックを体系的に管理し、製品とサービスの改善に必要なインサイトを導き出すことに重点を置いています。
現在、このアプリケーションは月間アクティブユーザー（MAU）1,000万人規模のサービスで利用されており、大規模なフィードバック処理に対する実証済みの安定性を備えています。
## コアバリュー提案
ABC User Feedbackは、以下のコアバリューを提供します：
1. **中央集約型フィードバック管理**: さまざまなチャネルから収集されたユーザーフィードバックを一箇所で管理
2. **構造化された分析**: イシューシステムを通じたフィードバックの分類とトレンドの把握
3. **イシュー追跡**: フィードバックで発見された問題点をイシューに変換して追跡管理
4. **データ駆動型意思決定**: ダッシュボードを通じたフィードバックデータの視覚化とインサイトの導出
## 技術スタック
ABC User Feedbackは、最新のWeb技術に基づいて構築されています：
- **フロントエンド**: [Next.js](https://nextjs.org/) - Reactベースのフロントエンドフレームワーク
- **バックエンド**: [NestJS](https://nestjs.com/) - TypeScriptベースのスケーラブルなバックエンドフレームワーク
- **データベース**: [MySQL v8](https://www.mysql.com/) - 信頼性の高いリレーショナルデータベース
- **検索エンジン**: [OpenSearch v2.16](https://opensearch.org/)（オプション） - 大量のフィードバックデータに対する高性能検索機能
## アーキテクチャ概要
ABC User Feedbackは、以下の主要コンポーネントで構成されています：
1. **Web管理インターフェース**: フィードバック管理、イシュー追跡、ダッシュボードなどのユーザーインターフェースを提供するNext.jsベースのWebアプリケーション
2. **APIサーバー**: データ処理、ビジネスロジック、認証などを担当するNestJSベースのバックエンドサーバー
3. **データベース**: フィードバック、イシュー、ユーザー情報などを保存するMySQLデータベース
4. **検索エンジン**: 大量のフィードバックデータに対する高性能検索を提供するOpenSearch（オプション）
5. **SMTPサーバー**: アカウント作成時のメール認証、パスワードリセットなど、ユーザー認証プロセスに必要なメール送信を担当するコンポーネント
これらのコンポーネントは、Dockerを通じてコンテナ化されており、簡単にデプロイおよびスケールできます。
## 主な使用例
ABC User Feedbackは、以下の状況で特に有用です：
1. **製品改善プロセス**: ユーザーフィードバックを収集・分析して製品改善の方向性を設定
2. **カスタマーサポート**: ユーザーの問い合わせとイシューを効率的に追跡・管理
3. **ユーザー体験の最適化**: ユーザーの意見に基づいてUX/UIを改善
4. **品質管理**: バグレポートと機能リクエストを体系的に管理
5. **データ駆動型意思決定**: ユーザーフィードバック統計を活用した戦略的意思決定のサポート
## 差別化要素
ABC User Feedbackは、以下の特徴により、他のフィードバック管理ツールと差別化されています：
1. **完全なオープンソース**: 商用ソリューションとは異なり、完全に無料で使用でき、カスタマイズ可能
2. **エンタープライズレベルの機能**: SSO認証、RBACなど、企業環境に必要な機能を提供
3. **スケーラビリティ**: 大規模なユーザーベース（1,000万MAU）で実証されたパフォーマンス
4. **統合の容易さ**: RESTful APIとWebhookによる既存システムとの簡単な統合
5. **コンテナ化**: Dockerサポートによる簡単なデプロイとスケーリング
## 次のステップ
ABC User Feedbackを始めるには、以下のドキュメントを参照してください：
- [主な機能](./02-key-features.md) - 詳細な機能説明
- [インストールガイド](/ja/developer-guide/installation/docker-hub-images) - インストール方法
---
このドキュメントは、ABC User Feedbackの基本的な概要を提供します。より詳細な情報については、該当セクションのドキュメントを参照してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/02-key-features.md
+173
View File
@@ -0,0 +1,173 @@
---
sidebar_position: 3
title: '主な機能'
description: '主な機能の紹介。'
---
# 主な機能
ABC User Feedbackは、ユーザーフィードバックを効果的に収集、管理、分析するための様々な機能を提供します。このドキュメントでは、コア機能について詳しく説明します。
## フィードバックタグシステム
![フィードバックタグ](/assets/01-feedback-tag.png)
フィードバックタグシステムは、大量のユーザーフィードバックを体系的に分類・管理するためのコア機能です。
### 主な機能
- **複数イシューの割り当て**:各フィードバックに複数のイシューを割り当てて多次元的に分類
- **カスタムイシューの作成**:プロジェクトの特性に合わせたカスタマイズされたイシューの作成と管理
- **イシュー別フィルタリング**:イシュー別にフィードバックをフィルタリングして特定のトピックに集中
- **イシュー統計**:イシューの使用頻度とトレンド分析による洞察の導出
### 使用方法
1. 管理パネルでイシューカテゴリとイシューを作成
2. 受信したフィードバックに関連イシューを割り当て
3. イシュー別にフィードバックをフィルタリングして分析
4. イシューの使用パターンから主要なイシューとトレンドを特定
## カンバンモード
![イシューカンバン](/assets/02-Issue-Kanban.png)
カンバンモードは、イシューグループを視覚的に管理し、ワークフローを最適化するための機能です。
### 主な機能
- **直感的なドラッグ&ドロップ**:イシューのステータス変更のためのシンプルなインターフェース
- **ステータスベースのカラム構成**:イシューの進行状況に基づくカラム分離(例:To Do、In Progress、Done)
- **ワークフローの可視化**:チームの作業プロセスと進捗を一目で把握
- **作業負荷管理**:各ステータスのイシュー数を通じた作業負荷のモニタリング
- **フィルタとソート**:カンバンボード内のイシューを様々な基準でフィルタリング・ソート
### 使用方法
1. カンバンモードビューを選択
2. ステータス別にイシューを確認・管理
3. ドラッグ&ドロップでイシューのステータスを変更
4. チームのワークフローを最適化し、ボトルネックを特定
## イシュートラッカー連携
![イシュートラッカー](/assets/03-issue-tracker.png)
イシュートラッカー連携は、フィードバックで発見された問題や改善事項を体系的に管理するための機能です。
### 主な機能
- **ステータスインジケーター**:イシューの現在のステータスを視覚的に表示(New、In Progress、Resolvedなど)
- **外部システム連携**:イシュートラッカーシステム(JIRA)との接続
### 使用方法
1. フィードバックからイシューを作成、またはイシューメニューで作成
2. 外部イシュートラッカー接続を設定(オプション)
3. イシューの詳細とイシュー追跡チケットを設定
4. イシューの進捗をモニタリング・更新
5. 解決後にイシューをクローズ
## シングルサインオン(SSO)
![シングルサインオン](/assets/04-single-signon.png)
シングルサインオンは、企業環境での認証プロセスを簡素化し、セキュリティを強化します。
### 主な機能
- **OAuthサポート**:様々なOAuthプロバイダーを通じた認証サポート
- **企業IDとの統合**:既存の企業IDシステムとのシームレスな統合
- **一元化されたユーザー管理**:単一の認証システムを通じたユーザーアクセス管理
- **セキュリティの強化**:多要素認証と企業セキュリティポリシーの適用
- **簡素化されたログイン体験**:ユーザーが追加アカウントを作成する必要がない
### サポートされるSSOプロバイダー
- Google
- カスタム(標準的なOAuth 2.0およびOpenID Connectプロバイダー)
### 使用方法
1. 管理設定でSSOプロバイダーを設定
2. 認証パラメータとリダイレクトURLを設定
3. ユーザー属性マッピングを設定
4. SSOログインを有効化してテスト
## ロールベースアクセス制御(RBAC)
![ロール管理](/assets/05-role-management.png)
ロールベースアクセス制御は、ユーザー権限を効果的に管理し、システムセキュリティを維持するための機能です。
### 主な機能
- **事前定義されたロール**:管理者、アナリスト、閲覧者などの基本ロールを提供
- **カスタムロールの作成**:組織構造に合わせたカスタマイズされたロールと権限の作成
- **詳細な権限制御**:機能とデータ別にアクセス権限を設定
- **ロール割り当て管理**:ユーザーごとにロールを割り当て・変更
- **権限の継承**:階層的な権限構造をサポート
### 使用方法
1. 管理パネルでロール管理メニューにアクセス
2. 必要に応じて新しいロールを作成、または既存のロールを修正
3. ユーザーに適切なロールを割り当て
4. ロール別の権限とアクセス範囲を定期的にレビュー
## ダッシュボード
![ダッシュボード](/assets/06-dashboard.png)
ダッシュボードは、フィードバックデータを可視化し、重要な洞察を一目で理解できる機能です。
### 主な機能
- **リアルタイム統計**:フィードバック数、イシュー数、解決率などの主要指標をリアルタイム表示
- **トレンド分析**:時間経過によるフィードバックとイシューのトレンドをグラフで表示
- **イシュー分布**:イシュー別のフィードバック分布を可視化
### 提供されるチャートとウィジェット
1. **フィードバックサマリーカード**:総フィードバック数、新規フィードバック、処理済みフィードバックなどの主要指標
2. **時系列グラフ**:日次/週次/月次のフィードバックトレンド
3. **イシューステータスドーナツチャート**:イシューステータス別の分布
### 使用方法
1. ダッシュボードページにアクセス
2. 期間とフィルター設定を通じてデータ範囲を調整
3. 主要指標とトレンドを分析
4. 洞察に基づいた意思決定とアクションアイテムを導出
## 追加機能
上記の主要機能に加えて、ABC User Feedbackは以下の追加機能を提供します:
### API連携
- RESTful APIを通じた外部システムとの統合
- プログラムによるフィードバック収集と管理
### Webhook
- 主要イベント発生時に外部システムに通知
- 自動化されたワークフローの構築をサポート
### 画像ストレージ連携
- S3互換ストレージを通じたユーザー提出画像の管理
- フィードバックへのスクリーンショットと画像の添付
### データエクスポート
- CSV、Excel形式でのフィードバックデータのエクスポート
### 多言語サポート
- 様々な言語でのインターフェース提供
- 国際チーム向けの多言語フィードバック管理
---
このドキュメントは、ABC User Feedbackの主な機能の概要を提供します。各機能の詳細な使用方法については、[ユーザーガイド](/user-guide/getting-started)セクションを参照してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/00-introduction/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 1,
"label": "紹介"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/01-getting-started.md
+263
View File
@@ -0,0 +1,263 @@
---
title: はじめに
description: ABC User Feedbackインストール後、初期設定から最初のフィードバック収集まで、システムを開始する方法を説明します。
sidebar_position: 1
---
# はじめに
ABC User Feedbackを初めてインストールした後、システムを使用するには初期設定が必要です。このドキュメントでは、テナント作成から最初のフィードバック収集までの全プロセスを段階的に説明します。
---
## 初期設定の概要
ABC User Feedbackを開始するには、次の順序で設定を進めます：
1. **テナントと管理者アカウントの作成**
2. **初回ログインとプロフィール設定**
3. **プロジェクトの作成**
4. **チャネルの作成とフィールド設定**
5. **APIキーの発行**
6. **最初のフィードバック収集のテスト**
---
## システムへのアクセス
ABC User Feedbackのインストールが必要な場合は、まず[Docker Hubイメージを使用したインストール](/ja/developer-guide/installation/docker-hub-images)を進めてください。
インストールを完了したら、Webブラウザを通じてABC User Feedbackにアクセスします：
```
http://localhost:3000
```
> ポートやドメインを変更した場合は、設定に応じたアドレスを入力してください。
---
## テナントと管理者アカウントの作成
![member-register.png](/img/tenant.png)
初めてアクセスすると、**テナント作成と管理者アカウント登録**画面が表示されます。
### Step 1: テナント情報の入力
テナント名を設定します。
テナント名を入力した後、**Next**ボタンをクリックします。
> このテナント名はログインUIに表示されます。
### Step 2: 管理者アカウントの作成
システムの最初の管理者アカウントを作成します。
1. 管理者アカウントのメールアドレスを入力し、**Request Code**ボタンをクリックします。
2. メールボックスで認証コードを確認して入力します
3. **Verify**ボタンをクリックします
4. 認証が完了したら、パスワードを設定します。
:::info パスワード要件
- **8文字以上**
- **英字を含む**（A–Z、a–z）
- **特殊文字を含む**（例：`@`、`#`、`!`）
- **連続文字禁止**（例：`aa`、`11`）
> **例**: ✅ `MyCompany2024!`, ❌ `12345678`、`password`
:::
テナントと管理者アカウントの作成が完了すると、確認画面が表示されます。
**次のステップ**: **確認**ボタンをクリックしてログイン画面に移動します。
---
## ログイン
作成した管理者アカウントで初回ログインを行います。
1. **Email**: 先ほど登録した管理者メールアドレスを入力します
2. **Password**: 設定したパスワードを入力します
3. **Sign In**ボタンをクリックします
---
## 最初のプロジェクトの作成
ログインすると、プロジェクト作成ウィザードが自動的に開始されます。
### システム構造の理解
ABC User Feedbackは、次の階層構造を持っています：
```
テナント（組織）
└── プロジェクト（製品/サービス単位）
└── チャネル（フィードバック収集パス）
```
### Step 1: プロジェクト基本情報
| 項目 | 説明 | 例 |
| --------------- | -------------------------------------- | ------------------------------- |
| **Name** | プロジェクト名 | `モバイルアプリ`、`Webサービス` |
| **Description** | プロジェクトの説明（オプション） | `顧客フィードバック収集と分析` |
| **Time Zone** | 時間基準（ダッシュボードと統計に影響） | `Asia/Tokyo` |
**完了後**: 情報を入力した後、**Next**ボタンをクリックします。
### Step 2: チームメンバーの招待（オプション）
このステップでは、プロジェクトにチームメンバーを招待できます。今スキップしても、後でいつでも追加できます。
### Step 3: APIキーの生成（オプション）
外部システムとの統合用のAPIキーを事前に生成できます。
### プロジェクト作成完了
すべての情報を入力すると、プロジェクト作成が完了します。
**次のステップを選択**：
- **Create Channel**: すぐにチャネルを作成してフィードバック収集を開始
- **Skip for Now**: 後でチャネルを作成
---
## 最初のチャネルの作成
プロジェクト作成後、実際にフィードバックを収集するには**チャネル**を作成する必要があります。
### チャネルの概念の理解
チャネルは**フィードバック収集パス**を意味します：
- ウェブサイトのお問い合わせフォーム
- モバイルアプリ内のフィードバック
- カスタマーサービスVoC
- アンケート回答
### Step 1: チャネル基本情報
| 項目 | 説明 | 例 |
| ---------------------------------- | ----------------------------------------------------- | ------------------------------------- |
| **Name** | チャネル名 | `Webフィードバック`、`アプリレビュー` |
| **Description** | チャネルの説明（オプション） | `ウェブサイトユーザーの意見` |
| **Maximum Feedback Search Period** | フィードバック検索可能期間（30/90/180/365日、すべて） | `90日` |
**完了後**: 情報を入力した後、**Next**ボタンをクリックします。
### Step 2: フィールド設定
チャネルで収集するデータ構造を定義します。
#### デフォルトフィールド
システムで自動的に作成されるフィールド：
| フィールド名 | 形式 | プロパティ | 説明 |
| ------------ | ----------- | ---------- | -------------------------- |
| `id` | number | Read Only | フィードバック固有ID |
| `createdAt` | date | Read Only | 作成時間 |
| `updatedAt` | date | Read Only | 更新時間 |
| `issues` | multiSelect | Editable | リンクされたイシューリスト |
#### カスタムフィールドの追加
実際のフィードバック収集のためにカスタムフィールドを追加します：
1. **Add Field**ボタンをクリック
2. フィールド情報を入力：
| 項目 | 説明 | 例 |
| ---------------- | --------------------------------------------------- | --------------------------------------------------------------------------------- |
| **Key** | 一意の識別子（大文字/小文字、数字、`_`） | `message`、`rating` |
| **Display Name** | UIに表示される名前 | `フィードバック内容` |
| **Format** | データ形式 | `text`、`keyword`、`number`、`date`、`select`、`multiSelect`、`images`、`aiField` |
| **Property** | `Editable`（UIで変更可能）/ `Read Only`（変更不可） | `Editable` |
| **Status** | `Active` / `Inactive` | `Active` |
#### 推奨デフォルトフィールド構成
最初のチャネルには、次のフィールドを追加することをお勧めします：
| Key | Display Name | Format | 説明 |
| ----------- | ---------------------- | ------- | ---------------------- |
| `message` | フィードバック内容 | text | ユーザーフィードバック |
| `userEmail` | ユーザーメールアドレス | keyword | 連絡先（オプション） |
| `rating` | 満足度 | number | 1-5点評価 |
### フィールドプレビュー
フィールド設定を完了した後、**Preview**ボタンでフィードバック入力画面をプレビューできます。
**完了後**: **Complete**ボタンでチャネル作成を完了します。
### チャネル作成完了
**次のステップ**: **Start**ボタンをクリックしてフィードバック収集を開始します。
---
## 最初のフィードバック収集のテスト
チャネル作成が完了すると、実際にフィードバックを収集できます。
### APIによるフィードバック登録
作成したAPIキーを使用して最初のフィードバックを登録してみましょう。
#### APIリクエスト例
```bash
curl -X POST http://localhost:4000/api/projects/1/channels/1/feedbacks \
-H "Content-Type: application/json" \
-H "X-API-KEY: YOUR_API_KEY" \
-d '{
"message": "アプリの実行速度が遅いです",
"userEmail": "user@example.com",
"rating": 3
}'
```
> `YOUR_API_KEY`は、先ほど作成した実際のAPIキーに置き換えてください。
#### 成功レスポンスの確認
APIリクエストが成功すると、次のようなレスポンスが返されます：
```json
{
"id": 1
}
```
### フィードバックの確認
登録したフィードバックをWebインターフェースで確認してみましょう。
1. 上部メニューで**Feedback**タブをクリック
2. フィードバックリストで登録されたフィードバックを確認
3. フィードバックをクリックして詳細情報を確認
### 最初のイシューの作成
フィードバックに基づいてイシューを作成してみましょう。
1. フィードバック詳細画面で、**Issue**セクションの**`+`ボタン**をクリック
2. イシュー名を入力し、**Enter**キーまたは**Create**ボタンをクリック
3. 作成されたイシューを確認
## 次のステップガイド
基本的な設定と最初のフィードバック収集が完了しました！
## 関連ドキュメント
- [API統合](/ja/developer-guide/api-integration) - 詳細なAPI使用ガイド
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/02-project-management.md
+347
View File
@@ -0,0 +1,347 @@
---
title: プロジェクト
description: ABC User Feedbackでプロジェクトを作成、設定、管理し、チームメンバーの役割と権限を設定する方法を説明します。
sidebar_position: 2
---
# プロジェクト
ABC User Feedbackでは、**プロジェクト**はフィードバックを収集・分析する最も基本的な単位です。プロジェクトの作成からチーム管理、権限設定の機能を説明します。
---
## プロジェクトの概要
プロジェクトは次の階層構造を持ちます：
```
テナント
└── プロジェクト（複数可能）
├── チャネル（複数可能）
├── メンバーと役割
├── イシュートラッカー統合
├── ウェブフック統合
├── AI機能
└── APIキー
```
各プロジェクトは複数のチャネルを含む管理単位で、チームメンバーと役割、イシュートラッカー統合、外部システム統合などを独立して設定・運用できます。
---
## プロジェクトの作成
### アクセス権限
プロジェクトの作成は**Superユーザー**のみ可能です。一般ユーザーは既存のプロジェクトにメンバーとして招待されて参加できます。
> Superユーザー権限が必要な場合は、システム管理者にお問い合わせください。
### アクセス方法
新しいプロジェクトを作成する方法は2つあります：
1. **初回ログイン時**: プロジェクト作成ウィザードが自動的に開始されます
2. **追加プロジェクト**: 左サイドバー上部の**Create Project**ボタンをクリックします
### Step 1: プロジェクト基本情報
![create-project-1](/img/project/1.png)
プロジェクト作成時に次の情報を入力します：
| 項目 | 説明 | 例 |
| --------------- | ---------------------------------------------------- | -------------------------------------------------------- |
| **Name** | プロジェクト名（必須） | `モバイルアプリ`、`カスタマーサービス`、`ベータサービス` |
| **Description** | 簡単な説明（オプション） | `iOS/Androidアプリユーザーフィードバック収集` |
| **Time Zone** | フィードバックとレポートの時間基準として使用（必須） | `Asia/Seoul` |
> タイムゾーンは**ダッシュボード統計**に影響します。
**完了後**: すべての情報を入力した後、**Next**ボタンをクリックします。
### Step 2: チームメンバーの追加（オプション）
![create-project-2](/img/project/2.png)
このステップは**スキップ可能**です。後でプロジェクト設定からいつでも追加できます。
#### メンバーの追加
1. 右上の**Register Member**ボタンをクリックします
2. 次の項目を入力します：
- **Email**: システムに登録されたユーザーを選択
- **Role**: Admin、Editor、Viewerから選択
> カスタム役割を使用したい場合は、**Role Management**ボタンをクリックして追加設定が可能です。
**完了後**: メンバーリストを確認して**Next**をクリックします。
### Step 3: APIキーの生成（オプション）
![create-project-3](/img/project/3.png)
APIキーは外部システムからフィードバックを収集する際に使用されます。設定メニューから後で生成できるため、今はスキップしてもかまいません。
#### キー生成方法
1. 右上の**Create API Key**ボタンをクリックします
2. キーが自動生成されてリストに表示されます
3. 生成されたキーをコピーして安全な場所に保存します
### プロジェクト作成完了
![create-project-4](/img/project/4.png)
すべてのステップを完了すると、**要約画面**が表示されます：
- プロジェクト情報: 名前、説明、タイムゾーン
- メンバーリスト
- 生成されたAPIキー
- 役割設定状態
#### 次のステップ
- すぐにチャネルを作成してフィードバック収集を開始するには、**Create Channel**ボタンをクリックします
- または**Later**ボタンで後で作成できます
---
## プロジェクト設定の管理
![project-setting.png](/img/project/project-setting.png)
### アクセス方法
プロジェクト設定を変更するには：
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Project Setting**を選択
### 基本情報の編集
次の項目をいつでも変更できます：
| 項目 | 説明 | 注意事項 |
| --------------- | ---------------------------------- | ---------------------------------- |
| **Name** | プロジェクト名 | チームメンバーに表示される名前 |
| **Description** | 説明（オプション） | プロジェクトの目的 |
| **Time Zone** | 統計と時間関連データの基準時刻設定 | 変更時、既存データには影響しません |
**保存方法**: 変更後、右上の**Save**ボタンをクリックします。
### タイムゾーン変更時の注意事項
- 既存のフィードバック/イシューの時間情報には影響しません
- 変更後、ダッシュボード統計でデータの不一致が発生する可能性があります。
### プロジェクトの削除
#### 削除手順
プロジェクトを完全に削除するには：
1. Project Setting画面下部の**Delete Project**ボタンをクリックします
2. 確認ポップアップでプロジェクト名を正確に入力します
3. **Delete**ボタンで最終確定します
#### 削除時の注意事項
- そのプロジェクト内の**すべてのフィードバック、イシュー、設定が永続的に削除**されます
- **元に戻せないため**、事前のバックアップまたはエクスポートを推奨します
- 削除時、接続されたチャネルとAPIキーも一緒に削除されます
---
## メンバー管理
![member-setting.png](/img/project/member-setting.png)
### メンバーリストの確認
現在プロジェクトに参加しているメンバーを確認するには：
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Member Management**を選択
メンバーリストには次の情報が表示されます：
| 項目 | 説明 |
| ---------- | ------------------------------ |
| Email | アカウントメールアドレス |
| Name | ユーザー名（プロフィール基準） |
| Department | 所属部門 |
| Role | プロジェクト内の役割 |
| Joined | プロジェクト参加日 |
### 新しいメンバーの招待
![member-register.png](/img/project/member-register.png)
#### 招待手順
1. **Register Member**ボタンをクリックします
2. 招待情報を入力します：
| 項目 | 説明 |
| --------- | ------------------------------------------- |
| **Email** | 招待するユーザーのメールアドレス |
| **Role** | 割り当てる役割（Admin、Editor、Viewerなど） |
3. **Invite**ボタンをクリックして招待を完了します
### メンバー情報の編集
既存のメンバー情報を変更するには：
1. メンバーリストで編集したいメンバーの行をクリックします
2. ポップアップでRoleを変更できます：
3. **Save**ボタンで変更を保存します
### メンバーの削除
メンバーをプロジェクトから削除するには：
1. メンバー編集ポップアップ下部の**削除**ボタンをクリックします
2. 確認メッセージで**確認**をクリックします
> メンバーを削除しても、そのユーザーが作成したフィードバック/イシュー記録はそのまま維持され、プロジェクトアクセス権限のみが削除されます。
---
## 役割と権限管理
![role-setting.png](/img/project/role-setting.png)
### デフォルト役割
システムでは次のデフォルト役割を提供します：
| 役割 | 権限要約 |
| ---------- | --------------------------------------------------------- |
| **Admin** | すべての機能にアクセス可能。プロジェクト削除を含む |
| **Editor** | フィードバック/イシューの作成、編集、削除可能。設定は不可 |
| **Viewer** | 閲覧のみ可能。編集、削除、設定アクセス不可 |
### カスタム役割の作成
![role-create.png](/img/project/role-create.png)
より細分化された権限が必要な場合は、カスタム役割を作成できます：
1. Member Management画面で**Role Management**リンクをクリックします
2. **Create Role**ボタンをクリックします
3. 役割名と権限を入力します：
### 権限設定
各役割について、次の機能別権限を設定できます：
#### フィードバック権限
| 権限項目 | 説明 |
| ----------------------------------- | ------------------------------------- |
| **Download Feedback** | フィードバックデータのダウンロード |
| **Edit Feedback** | フィードバックの編集 |
| **Delete Feedback** | フィードバックの削除 |
| **Attach/Detach Issue in Feedback** | フィードバックとイシューのリンク/解除 |
#### イシュー権限
| 権限項目 | 説明 |
| ---------------- | -------------- |
| **Create Issue** | イシューの作成 |
| **Edit Issue** | イシューの編集 |
| **Delete Issue** | イシューの削除 |
#### プロジェクト管理
| 権限項目 | 説明 |
| --------------------- | ---------------------- |
| **Edit Project Info** | プロジェクト情報の編集 |
| **Delete Project** | プロジェクトの削除 |
#### メンバー管理
| 権限項目 | 説明 |
| ------------------------- | -------------------------- |
| **Read Project Member** | プロジェクトメンバーの閲覧 |
| **Create Project Member** | プロジェクトメンバーの招待 |
| **Edit Project Member** | プロジェクトメンバーの編集 |
| **Delete Project Member** | プロジェクトメンバーの削除 |
#### 役割管理
| 権限項目 | 説明 |
| ----------------------- | ---------------------- |
| **Read Project Role** | プロジェクト役割の閲覧 |
| **Create Project Role** | プロジェクト役割の作成 |
| **Edit Project Role** | プロジェクト役割の編集 |
| **Delete Project Role** | プロジェクト役割の削除 |
#### APIキー管理
| 権限項目 | 説明 |
| ------------------ | ------------- |
| **Read API Key** | APIキーの閲覧 |
| **Create API Key** | APIキーの作成 |
| **Edit API Key** | APIキーの編集 |
| **Delete API Key** | APIキーの削除 |
#### イシュートラッカー
| 権限項目 | 説明 |
| ---------------------- | ------------------------ |
| **Read Issue Tracker** | イシュートラッカーの閲覧 |
| **Edit Issue Tracker** | イシュートラッカーの設定 |
#### ウェブフック管理
| 権限項目 | 説明 |
| ------------------ | ------------------ |
| **Read Webhook** | ウェブフックの閲覧 |
| **Create Webhook** | ウェブフックの作成 |
| **Edit Webhook** | ウェブフックの編集 |
| **Delete Webhook** | ウェブフックの削除 |
#### AIとチャネル設定
| 権限項目 | 説明 |
| ---------------------- | ------------ |
| **Read Generative AI** | AI設定の閲覧 |
| **Edit Generative AI** | AI設定の編集 |
#### チャネル関連設定
| 権限項目 | 説明 |
| ---------------------- | -------------------- |
| **Edit Channel Info** | チャネル情報の編集 |
| **Delete Channel** | チャネルの削除 |
| **Read Field** | フィールドの閲覧 |
| **Edit Field** | フィールドの編集 |
| **Read Image Setting** | 画像設定の閲覧 |
| **Edit Image Setting** | 画像設定の編集 |
| **Create Channel** | 新しいチャネルの作成 |
### 権限設定のヒント
#### セキュリティのベストプラクティス
- **最小権限の原則**: 業務に必要な最小限の権限のみを付与
- **定期的なレビュー**: チーム変更や退職者発生時に権限を確認
- **Admin役割の制限**: 管理者は可能な限り少ない数で維持
### 役割の編集と削除
- **編集**: 役割リストで希望する項目をクリックして名前と権限を変更できます
- **削除**: 使用されていない役割は**Delete**ボタンで削除可能です
> **注意**: Admin役割は常に1つ以上存在する必要があり、削除できません。
---
## 関連ドキュメント
- [チャネル管理](./03-channel-management.md) - チャネルの作成とフィールド設定
- [フィードバック管理](./04-feedback-management.md) - フィードバックの収集と分析
- [API統合](/ja/developer-guide/api-integration) - APIキーの使用方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/03-channel-management.md
+235
View File
@@ -0,0 +1,235 @@
---
title: チャネル
description: ABC User Feedbackでフィードバック収集チャネルを作成、設定、管理し、カスタムフィールドと画像設定を扱う方法を説明します。
sidebar_position: 3
---
# チャネル
**チャネル（Channel）**は、フィードバック収集パスまたは目的に応じて区別される単位です。各チャネルは独立したフィールド構造、画像設定、AI機能を持ち、さまざまなフィードバック収集シナリオに合わせて設定できます。
---
## チャネルの概要
### チャネルの役割
チャネルは次の役割を果たします：
- **フィードバック収集パスの区別**: Web、アプリ、カスタマーサービス、アンケートなど
- **データ構造の定義**: チャネル別の固有フィールド設定
- **収集ポリシーの管理**: 画像許可、検索期間、セキュリティ設定など
- **分析単位の提供**: チャネル別の独立した統計と分析
---
## チャネルの作成
### アクセス方法
新しいチャネルを作成する方法：
1. **プロジェクト作成直後**: プロジェクト完了画面で**Create Channel**ボタンをクリック
2. **追加チャネル作成**: **Settings > Channel List**で**Create Channel**ボタンをクリック
### Step 1: チャネル基本情報
![channel-create-1](/img/channel/1.png)
| 項目 | 説明 | 例 |
| ---------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------- |
| **Name** | チャネル名（必須） | `Webフィードバック`、`アプリレビュー`、`カスタマーサービス` |
| **Description** | チャネルの簡単な説明（オプション） | `ウェブサイトユーザーの意見収集` |
| **Maximum Feedback Search Period** | フィードバック検索可能な最大期間（30/90/180/365日、すべて） | `90日` |
#### 最大フィードバック検索期間設定時の注意事項
- **影響範囲**: フィードバックダウンロード機能に直接影響します
- **ダウンロード動作**: 設定された検索期間内のすべてのフィードバックがダウンロード対象になります
- **パフォーマンステスト**: 1日のフィードバック数が多い場合、さまざまな期間でテストして最適値を探すことをお勧めします
- **段階的調整**: 最初は短い期間から始め、必要に応じて段階的に延長するのが安全です
**完了後**: 情報を入力した後、**Next**ボタンをクリックします。
### Step 2: フィールド設定
![channel-create-2](/img/channel/2.png)
チャネルで収集するデータ構造を定義します。これはAPIリクエスト構造とフィードバックテーブル構成に直接影響します。
#### デフォルトシステムフィールド
すべてのチャネルに自動的に含まれるフィールド：
| Key | Format | プロパティ | 説明 |
| ----------- | ----------- | ---------- | -------------------------- |
| `id` | number | Read Only | フィードバック固有ID |
| `createdAt` | date | Read Only | フィードバック作成時刻 |
| `updatedAt` | date | Read Only | フィードバック更新時刻 |
| `issues` | multiSelect | Editable | リンクされたイシューリスト |
> これらのフィールドは削除したり、主要なプロパティを変更したりできません。
#### カスタムフィールドの追加
実際のビジネス要件に合わせたフィールドを追加します。
1. **Add Field**ボタンをクリックします
2. フィールド情報を入力します
| 項目 | 説明 | 例 |
| ---------------- | ----------------------------------------------- | ---------------------------------------------- |
| **Key** | 一意の識別子（大文字/小文字、数字、`_`） | `message`、`rating` |
| **Display Name** | UIに表示される名前 | `フィードバック内容`、`ユーザーメールアドレス` |
| **Format** | データ形式（下の表を参照） | `text`、`keyword`、`number` |
| **Property** | `Editable`（入力可能）/ `Read Only`（閲覧のみ） | `Editable` |
| **Status** | `Active` / `Inactive` | `Active` |
| **Description** | チームメンバーが理解しやすい説明（オプション） | `ユーザーが入力したフィードバック内容` |
### フィールド形式の種類
| Format | 説明 | 使用例 | API例 |
| ------------- | -------------------- | -------------------------------- | -------------------------------- |
| `text` | 自由テキスト入力 | フィードバック内容、詳細説明 | `"アプリが頻繁にフリーズします"` |
| `keyword` | 短いキーワード/タグ | バージョン情報、ページ名 | `"v1.2.3"` |
| `number` | 数字 | 評価、年齢、使用時間 | `5` |
| `date` | 日付 | 発生日、有効期限 | `"2024-03-01T00:00:00Z"` |
| `select` | 単一選択 | カテゴリ、優先度 | `"機能リクエスト"` |
| `multiSelect` | 複数選択 | タグ、関連機能 | `["バグ", "UI"]` |
| `images` | 画像URL配列 | スクリーンショット、添付ファイル | `["https://..."]` |
| `aiField` | AI分析結果フィールド | 感情分析、要約、キーワード抽出 | `"ポジティブ"` |
> **images形式について**: 詳細な画像設定方法については、[画像設定](/ja/user-guide/settings/image-setting)ドキュメントを参照してください。
>
> **aiField形式について**: AIフィールド設定とテンプレート構成方法については、[AI設定](/ja/user-guide/settings/ai-setting)ドキュメントを参照してください。
### フィールド構成例
#### Webフィードバックチャネル
| Key | Display Name | Format | 用途 |
| ------------- | ------------------ | ------- | ---------------------------- |
| `message` | フィードバック内容 | text | ユーザーの意見 |
| `userEmail` | メールアドレス | keyword | 連絡先（オプション） |
| `pageUrl` | ページURL | keyword | フィードバック発生位置 |
| `category` | カテゴリ | select | バグ/機能リクエスト/改善事項 |
| `priority` | 優先度 | select | 高/中/低 |
| `screenshots` | スクリーンショット | images | 問題状況のキャプチャ |
#### モバイルアプリレビューチャネル
| Key | Display Name | Format | 用途 |
| ------------ | ---------------- | ------- | ---------------- |
| `message` | レビュー内容 | text | ユーザーレビュー |
| `rating` | 評価 | number | 1-5点評価 |
| `appVersion` | アプリバージョン | keyword | バグ追跡用 |
| `deviceType` | デバイスタイプ | select | iOS/Android |
| `crashLogs` | クラッシュログ | text | 技術的エラー情報 |
### フィールドプレビュー
フィールド設定を完了した後、**Preview**ボタンで実際のフィードバック入力画面をプレビューできます。
このプレビューは、APIリクエストに必要なフィールド構造と同じです。
**完了後**: **Next**ボタンで次のステップに進みます。
### Step 3: チャネル作成完了
![create-channel-3](/img/channel/3.png)
すべてのステップを完了すると、**要約画面**が表示されます：
- チャネル情報：名前、説明、タイムゾーン
- フィールド情報
---
## フィールド管理
### フィールドの編集
既存のフィールドを編集するには、フィールドリストで編集したいフィールドの行をクリックして情報を変更します。
> **注意**: `Key`と`Format`は作成後に変更できません。データの一貫性のために制限されています。
### フィールドの削除
フィードバックデータの整合性と一貫性を保証するため、**フィールド削除機能は提供されていません**。
#### 削除の代わりに推奨される方法
1. **Inactive状態に変更**: フィールドを無効化して新しいフィードバック収集から除外
2. **データの保持**: 既に収集されたフィードバックデータはそのまま維持
3. **フィルタリングの活用**: フィールドリストでActiveフィールドのみを表示して管理効率を確保
#### 完全削除が必要な場合
フィールドを完全に削除する必要がある状況では：
- チャネル全体を削除して新しく作成する方法を検討
- データをエクスポート後、新しい構造に移行
- 開発チームと相談してデータベースレベルで処理
### フィールドステータス管理
#### Active / Inactiveの切り替え
- **Active**: フィードバック収集時に使用されるフィールド
- **Inactive**: 一時的に無効化されたフィールド（データは保持）
#### フィルタリングオプション
上部のコントロールで次の条件でフィールドをフィルタリングできます：
- **Status**: `Active` / `Inactive`
- **Property**: `Editable` / `Read Only`
---
## チャネル情報管理
![channel-setting](/img/channel/channel-setting.png)
### チャネル基本情報の編集
作成されたチャネルの基本情報を変更できます。
#### アクセス方法
1. **Settings > Channel List > [チャネル選択]**
2. **Channel Information**タブをクリック
#### 編集可能な項目
| 項目 | 編集可能 | 注意事項 |
| ---------------------------------- | -------- | ---------------------------------------- |
| **Channel ID** | ❌ 不可 | システム内部識別子 |
| **Channel Name** | ✅ 可能 | チームメンバーに表示される名前 |
| **Description** | ✅ 可能 | チャネルの目的 |
| **Maximum Feedback Search Period** | ✅ 可能 | パフォーマンスに影響する可能性があります |
### チャネルの削除
使用しなくなったチャネルを削除できます。
#### 削除手順
1. Channel Information画面下部の**Delete Channel**ボタンをクリック
2. 確認ポップアップでチャネル名を正確に入力
3. **Delete**ボタンで最終確定
#### 削除時の注意事項
- そのチャネルの**すべてのフィードバックデータが永続的に削除**されます
- **元に戻せないため**、事前のバックアップまたはエクスポートを推奨します
- 関連するAPIキー設定も確認が必要です
---
## 関連ドキュメント
- [プロジェクト管理](./02-project-management.md) - プロジェクト設定と権限管理
- [フィードバック管理](./04-feedback-management.md) - 収集されたフィードバックの分析と活用
- [API統合](/ja/developer-guide/api-integration) - 外部システムとの統合方法
- [AI統合](/ja/user-guide/settings/ai-setting) - AI機能設定
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/04-feedback-management.md
+336
View File
@@ -0,0 +1,336 @@
---
title: フィードバック
description: ABC User Feedbackでフィードバックを作成、閲覧、分析、管理する方法を説明します。
sidebar_position: 4
---
# フィードバック
フィードバックはABC User Feedbackのコアデータです。このドキュメントでは、フィードバックの作成から分析、管理まで、フィードバックに関連するすべての機能を説明します。
![feedback](/img/feedback/0.png)
---
## フィードバックの作成
フィードバックは主に外部システム（ウェブサイト、モバイルアプリ、API統合）によって作成されますが、管理者が直接作成することもできます。
### APIによるフィードバック作成
最も一般的なフィードバック作成方法です。
#### 基本APIリクエスト構造
```bash
curl -X POST http://your-domain.com/api/v1/projects/{projectId}/channels/{channelId}/feedbacks \
-H "Content-Type: application/json" \
-H "X-API-KEY: YOUR_API_KEY" \
-d '{
"message": "ユーザーフィードバック内容",
"userEmail": "user@example.com",
"category": "バグレポート"
}'
```
#### チャネルフィールドに応じたリクエスト例
各チャネルのフィールド設定に応じてリクエスト構造が異なります：
**Webフィードバックチャネル例**：
```json
{
"message": "ログインボタンが動作しません",
"userEmail": "user@company.com",
"pageUrl": "https://example.com/login",
"category": "バグ",
"priority": "高",
"browserInfo": "Chrome 119.0.0"
}
```
**モバイルアプリチャネル例**：
```json
{
"message": "アプリが頻繁にフリーズします",
"rating": 2,
"appVersion": "v2.1.3",
"deviceType": "iOS",
"crashLogs": "Exception in thread main..."
}
```
#### 画像を含むフィードバック
画像URL方式を使用する場合：
```json
{
"message": "画面が壊れて表示されます",
"userEmail": "user@example.com",
"images": [
"https://cdn.example.com/screenshot1.png",
"https://cdn.example.com/screenshot2.png"
]
}
```
### フィードバック作成の確認
作成されたフィードバックはすぐにフィードバックリストに表示されます。
---
## フィードバックリストへのアクセス
作成されたフィードバックを確認・管理するためにフィードバックリストにアクセスします。
### アクセス方法
1. 左サイドバーから目的の**プロジェクト**を選択します
2. 下部のチャネルリストから目的の**チャネル**をクリックします
3. 上部メニューで**Feedback**タブを選択します
### フィードバックテーブル構成
フィードバックリストはテーブル形式で表示され、次の基本構造を持ちます：
| 列タイプ | 説明 | 例 |
| ---------------- | ---------------------------------- | ---------------------------- |
| **デフォルト列** | すべてのチャネルに共通表示 | ID、Created、Updated、Issue |
| **カスタム列** | チャネルフィールド設定に応じて表示 | Message、UserEmail、Category |
---
## フィードバックフィルタリング/ソート/ビューオプション
大量のフィードバックデータから目的の情報を素早く見つけるためのさまざまなツールを提供します。
![feedback-option](/img/feedback/1.png)
### 日付フィルタリング
上部の**Date**ボタンで閲覧期間を設定できます。
#### 提供される期間オプション
| オプション | 説明 | 使用例 |
| ------------ | ---------------------------- | ------------------------ |
| **今日** | 当日登録されたフィードバック | リアルタイムモニタリング |
| **昨日** | 前日のフィードバック | 日次レビュー |
| **過去7日** | 最近1週間のデータ | 週次分析 |
| **過去30日** | 最近1ヶ月のデータ | 月次トレンド把握 |
| **カスタム** | 開始日-終了日を直接設定 | 特定期間分析 |
### 高度なフィルタ
**Filter**ボタンをクリックすると、さまざまな条件でフィードバックをフィルタリングできます。
![feedback-filter](/img/feedback/2.png)
#### フィルタ構造
```
Where: 最初の条件
And: すべての条件を満たすフィードバック
Or: いずれかを満たすフィードバック
```
> **注意**: `And`と`Or`は同時に混在して使用できません。
#### フィールドタイプ別フィルタオプション
| フィールドタイプ | 使用可能な演算子 | 例 |
| ---------------- | ------------------------------------ | ---------------------------- |
| **text** | Contains（部分一致） | message contains "バグ" |
| **keyword** | Is（完全一致） | category is "機能リクエスト" |
| **number** | Is（完全一致） | rating == 3 |
| **select** | Is（完全一致） | |
| **multiSelect** | Is（完全一致）、Contains（部分一致） | |
| **aiField** | Contains（部分一致） | |
| **date** | Is（完全一致）、Between（期間一致） | created between 日付範囲 |
#### フィルタ使用例
**マルチセレクトカテゴリの高度な検索**：
```
Where: category contains "バグ"
And: priority is "高"
```
**複数のイシューがリンクされたフィードバックを検索**：
```
Where: issues contains "ログインイシュー"
Or: issues contains "UI改善"
```
**特定カテゴリの4評価フィードバックを検索**：
```
Where: category is "機能リクエスト"
And: rating is 4
```
### ソート機能
テーブルヘッダーをクリックして、その列基準でソートできます。Created列とUpdated列でこの機能が提供されます。
### ビューオプション
フィードバックリストの表示方法をユーザーのニーズに合わせて調整できます。
#### Expand機能
**Expand**ボタンをクリックすると、テーブルで各フィードバックの詳細内容をプレビューできます。
**活用方法**：
- 詳細パネルを開かずに主要な内容を確認
- 複数のフィードバックを素早く閲覧
- 長いテキストフィールドの全体内容を確認
#### 列の表示/非表示
テーブル上部の**View**ボタンで表示する列を選択できます。
**機能**：
- **必須列**: ID、Createdは常に表示（非表示不可）
- **オプション列**: カスタムフィールドを個別に表示/非表示設定
- **画面最適化**: 必要な情報のみを表示して画面スペースを効率的に活用
**使用のヒント**：
```
モニタリング用: ID、Created、Messageのみ表示
分析用: すべてのカスタムフィールドを表示
レビュー用: Message、Category、Priorityを表示
```
## フィードバックの確認/編集/削除
個別のフィードバックの詳細情報を確認し、必要に応じて編集または削除できます。
### フィードバック詳細表示
#### アクセス方法
フィードバックテーブルで**行をクリック**すると、右側に詳細表示パネルが開きます。
![feedback-detail](/img/feedback/3.png)
### 詳細パネル構成
詳細パネルは次のように構成されます：
#### 1. 基本情報エリア
- **フィードバックID**: 一意の識別番号
- **作成時刻**: 初回登録日時
- **更新時刻**: 最後の変更日時
- **イシュー**: タグ付けされたイシュー
#### 2. カスタムフィールドエリア
チャネルで設定したすべてのカスタムフィールドが表示されます。
### フィードバックの編集
#### 編集可能なフィールド
詳細パネルで**Edit**ボタンをクリックして編集モードに切り替えることができます。
#### 編集可能な項目
| 項目 | 編集可能 | 注意事項 |
| ------------------------ | -------- | ---------------------------------------------------------------------- |
| **デフォルトフィールド** | ❌ 不可 | ID、作成日など |
| **カスタムフィールド** | ✅ 可能 | フィールド設定のPropertyによって異なる、StatusがInactiveの場合は不可能 |
#### 編集完了
1. 必要な情報を編集します
2. **Save**ボタンをクリックします
3. 変更内容がすぐに反映され、"Updated"時刻が更新されます
### イシューリンク管理
#### 新しいイシューの作成
1. イシュー列の**+ボタン**をクリックします
2. イシュー名を入力し、**Create**オプションをクリックします
#### 既存イシューのリンク
1. イシューセクションの**+ボタン**をクリックします
2. リンクするイシューの名前を入力します
3. ドロップダウンからリンクするイシューを選択します
#### イシューリンクの解除
1. イシューセクションの**+ボタン**をクリックします
2. 解除するイシューを選択します
### フィードバックの削除
#### 単一フィードバックの削除
1. 詳細パネル下部の**Delete Feedback**ボタンをクリックします
2. 確認ダイアログで削除を承認します
#### 複数フィードバックの削除
1. フィードバックリストで**チェックボックス**を使用して複数のフィードバックを選択します
2. 上部に表示される**Delete Selected**ボタンをクリックします
3. 一括削除を確認します
#### 削除時の注意事項
- **復元不可能**: 削除されたフィードバックは元に戻せません
- **イシューリンク解除**: リンクされたイシューはそのまま維持されますが、リンクが解除されます
- **統計への影響**: ダッシュボード統計から該当データが除外されます
---
## フィードバックのダウンロード
収集されたフィードバックデータを分析またはバックアップするために、さまざまな形式でエクスポートできます。
### ダウンロード機能へのアクセス
#### すべてのフィードバックのダウンロード
1. フィードバックリスト上部の**Export**ボタンをクリックします
#### フィルタされたフィードバックのダウンロード
1. 希望する条件でフィルタリングを適用します
2. **Export**ボタンをクリックして、現在のフィルタ条件に一致するデータのみをダウンロードします
#### 選択されたフィードバックのダウンロード
1. チェックボックスで特定のフィードバックを選択します
2. **Export Selected**ボタンをクリックします
### ダウンロード形式の選択
Exportボタンをクリックすると、ダウンロード形式を選択できます。
#### サポートされる形式
| 形式 | 拡張子 | 利点 | 推奨使用例 |
| --------- | ------- | ------------------------ | ------------------------ |
| **CSV** | `.csv` | 軽量で互換性が高い | Excel、Google Sheets分析 |
| **Excel** | `.xlsx` | 書式保持、複数シート対応 | 詳細分析、レポート作成 |
---
## 関連ドキュメント
- [チャネル管理](./03-channel-management.md) - フィードバック収集のためのチャネルとフィールド設定
- [イシュー管理](./05-issue-management.md) - フィードバックからイシューを作成・管理
- [API統合](/ja/developer-guide/api-integration) - 外部システムからフィードバックを送信する方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/05-issue-management.md
+314
View File
@@ -0,0 +1,314 @@
---
title: イシュー
description: ABC User Feedbackでイシューを作成、管理し、カンバン/リストビューで効率的に追跡する方法を説明します。
sidebar_position: 5
---
# イシュー
**イシュー（Issue）**は、フィードバックで発見された問題点や改善点を体系的に管理するためのコア機能です。イシューの作成からカテゴリ管理、さまざまなビューモードの活用まで、イシュー管理のすべての機能を説明します。
![issue](/img/issue/1.png)
---
## イシューの概要
### イシューの役割
イシューは次の目的で使用されます：
- **問題の追跡**: バグ、エラー、パフォーマンス問題などを体系的に管理
- **機能リクエスト管理**: ユーザーリクエストを構造化して開発計画に反映
- **改善点の導出**: フィードバック分析による改善ポイントの特定
### イシューステータス
各イシューは次のステータスを持ちます：
| ステータス | 説明 | 使用タイミング |
| --------------- | ---------- | ---------------------- |
| **New** | 新規登録 | イシュー初回作成 |
| **On Review** | レビュー中 | 担当者がレビュー開始 |
| **In Progress** | 処理中 | 実際の作業進行中 |
| **Resolved** | 解決完了 | 問題解決および完了 |
| **On Hold** | 一時保留 | 追加情報待ちまたは延期 |
---
## イシューの作成/編集/削除
### イシュー作成方法
イシューは2つの方法で作成できます。
#### 1. フィードバックからイシュー作成（推奨）
最も一般的な方法で、特定のフィードバックに基づいてイシューを作成します。
1. **Feedback**タブでフィードバックをクリックして詳細表示を開きます
2. 右側の詳細パネルの**Issue**セクションで**`+`ボタン**をクリックします
3. イシュー名を入力し、**Enter**キーを押すか**Create**オプションをクリックします
#### 2. イシューリストから直接作成
1. 上部メニューで**Issue**タブをクリックします
2. 左上の**+ Create Issue**ボタンをクリックします
3. イシュー作成ダイアログで情報を入力します：
| 項目 | 説明 | 必須 | 例 |
| --------------- | --------------------------------- | ---------- | ------------------------ |
| **Title** | イシュータイトル | 必須 | `ログインボタンの誤動作` |
| **Description** | 詳細説明 | オプション | `特定のブラウザで発生` |
| **Category** | イシュー分類 | オプション | `バグ` |
| **Status** | 初期ステータス（デフォルト: New） | オプション | `New` |
### イシューの編集
作成されたイシューの情報を変更できます。
#### 編集方法
1. イシューリストで編集したいイシューをクリックします
2. 右側に開く**Issue Details**パネルで**Edit**ボタンをクリックします
3. 編集モードで次の項目を変更できます：
#### 編集可能な項目
| 項目 | 編集可能 | 説明 |
| --------------- | -------- | -------------------------------------- |
| **Title** | ✅ 可能 | イシュータイトル |
| **Description** | ✅ 可能 | 詳細説明 |
| **Category** | ✅ 可能 | イシュー分類（ドロップダウンから選択） |
| **Status** | ✅ 可能 | 現在の進行状況 |
| **Ticket** | ✅ 可能 | 外部イシュートラッカーチケット番号 |
| **ID** | ❌ 不可 | システム自動生成 |
| **Created** | ❌ 不可 | 作成日時 |
#### 保存とキャンセル
- **Save**ボタン: 変更を保存して編集モードを終了します
- **Cancel**ボタン: 変更をキャンセルして元の状態に戻します
### 外部イシュートラッカー統合
外部イシュートラッカー（Jiraなど）との統合が設定されている場合、イシューに外部チケットをリンクできます。
#### チケットリンク方法
1. イシュー詳細パネルの**Ticket**フィールドに外部チケット番号を入力します
2. 入力された番号は自動的に外部システムリンクに変換されます
> **参考**: 外部イシュートラッカー統合は**Settings > Issue Tracker Management**で事前設定が必要です。
### イシューの削除
不要になったイシューを削除できます。
#### 削除方法
1. イシュー詳細パネルで**Delete**ボタンをクリックします
2. 確認ダイアログで削除を承認します
#### 削除時の注意事項
- **復元不可能**: 削除されたイシューは元に戻せません
- **フィードバックリンク解除**: リンクされたフィードバックのイシューリンクが削除されます
- **統計への影響**: ダッシュボードイシュー統計から該当データが除外されます
---
## カンバンビュー
カンバンビューは、イシューをステータス別の列に分けて視覚的に管理できるビュー方式です。
![issue-kanban](/img/issue/2.png)
### カンバンビューへのアクセス
1. 上部メニューで**Issue**タブをクリックします
2. 右上で**Kanban**ビューを選択します
### カンバンボード構成
各ステータス別に列が構成され、イシューがカード形式で表示されます。
#### カンバン列構成
| 列 | 表示情報 | カード数表示 |
| --------------- | ---------------------- | ------------ |
| **New** | 新規登録されたイシュー | 上部に数字 |
| **On Review** | レビュー中のイシュー | 上部に数字 |
| **In Progress** | 進行中のイシュー | 上部に数字 |
| **Resolved** | 解決完了したイシュー | 上部に数字 |
| **On Hold** | 保留されたイシュー | 上部に数字 |
#### イシューカード情報
各イシューカードには次の情報が表示されます：
- **イシュータイトル**: クリックで詳細表示に移動
- **フィードバック数**: リンクされたフィードバック数（📝アイコンとともに）
- **カテゴリ**: 設定されている場合は下部に表示
- **外部チケット**: リンクされている場合はチケット番号を表示
### ドラッグアンドドロップによるステータス変更
カンバンビューのコア機能で、イシューカードをドラッグして別の列に移動させてステータスを変更できます。
#### 使用方法
1. イシューカードをマウスでクリックしてドラッグします
2. 希望するステータス列の上に移動させます
3. マウスを離すとステータスが自動的に変更されます
### カンバンビューフィルタリング
上部のフィルタ機能を使用して、特定条件のイシューのみを表示できます。
#### 使用可能なフィルタ
1. **Date**フィルタ: 特定期間に作成されたイシューのみを表示
2. **Filter**ボタン: 高度なフィルタ条件設定
#### フィルタ条件例
| フィルタタイプ | 条件例 | 使用例 |
| -------------- | ------------------------- | -------------------------------- |
| **Category** | Category = "バグ" | バグイシューのみ確認 |
| **Title** | Title contains "ログイン" | ログイン関連イシュー検索 |
| **Created** | Created >= 2024-03-01 | 特定日付以降に作成されたイシュー |
| **Status** | Status != "Resolved" | 未解決イシューのみ表示 |
### カンバンビューソート
各列内でイシューカードのソート順序を変更できます。
#### ソートオプション
- **Created Date ↓**: 最新作成順
- **Created Date ↑**: 古い順
- **Feedback Count ↓**: リンクされたフィードバック数が多い順
---
## リストビュー
リストビューは、イシューをカテゴリ別にグループ化してテーブル形式で表示するビュー方式です。
### リストビューへのアクセス
1. 上部メニューで**Issue**タブをクリックします
2. 右上で**List**ビューを選択します
### リストビュー構成
カテゴリ別にグループ化されたイシューが階層的に表示されます。
#### カテゴリグループ
各カテゴリは折りたたみ/展開可能なグループとして表示されます：
- **グループヘッダー**: カテゴリ名と含まれるイシュー数
- **折りたたみ/展開矢印**: グループ内容の表示/非表示を切り替え
- **"No Category"**: カテゴリが指定されていないイシュー
### リストビューフィルタリング
カンバンビューと同じフィルタ機能を提供します。
#### フィルタ適用方法
1. 上部の**Date**または**Filter**ボタンをクリックします
2. 希望する条件を設定します
3. フィルタリングされた結果がカテゴリ別にグループ化されて表示されます
#### 空のカテゴリ処理
フィルタリング結果にイシューがないカテゴリは自動的に非表示になります。
### リストビューソート
各列ヘッダーをクリックしてソートできます。
#### ソート動作
- **最初のクリック**: 昇順ソート ↑
- **2回目のクリック**: 降順ソート ↓
#### 各ソート内容
| ソート基準 | 使用例 |
| -------------------- | -------------------------------- |
| **Created ↓** | 最新イシューから確認 |
| **Feedback Count ↓** | 影響度が大きいイシュー優先処理 |
| **Status** | ステータス別にグループ化して確認 |
---
## イシューカテゴリ
イシューカテゴリは、イシューを分類して体系的に管理できるようにする機能です。
### カテゴリの目的
- **イシュー分類**: バグ、機能リクエスト、改善事項などに区分
- **分析の容易性**: カテゴリ別のイシュー発生パターン分析
### デフォルトカテゴリ例
一般的に使用されるカテゴリ分類：
| カテゴリ | 説明 | 優先度 | 担当チーム例 |
| ------------------ | ---------------------------- | ------ | -------------- |
| **バグ** | 機能誤動作、エラー | 高 | 開発チーム |
| **機能リクエスト** | 新機能追加リクエスト | 中 | 企画チーム |
| **改善事項** | 既存機能向上 | 中 | UXチーム |
| **パフォーマンス** | 速度、安定性問題 | 高 | インフラチーム |
| **UI/UX** | ユーザーインターフェース問題 | 低 | デザインチーム |
| **ドキュメント** | ヘルプ、ガイド関連 | 低 | 技術文書チーム |
### カテゴリ管理
#### カテゴリの追加
イシュー詳細パネルで新しいカテゴリを追加できます：
1. イシュー詳細パネルの**Category**フィールドで**Add**ボタンをクリックします
2. 新しいカテゴリ名を入力します
3. **Enter**キーを押すか確認ボタンをクリックします
#### カテゴリの割り当て
既存のイシューにカテゴリを割り当てたり変更したりできます：
1. イシュー詳細パネルで**Edit**ボタンをクリックします
2. **Category**ドロップダウンから希望するカテゴリを選択します
3. **Save**ボタンで変更を保存します
### カテゴリ別イシュー管理
#### リストビューでカテゴリ別確認
リストビューでは、カテゴリ別にグループ化されたイシューを一目で確認できます：
- **カテゴリ別イシュー数**: 各グループヘッダーに含まれるイシュー数を表示
- **グループ折りたたみ/展開**: 必要なカテゴリのみを選択的に確認
- **"No Category"グループ**: 未分類イシューの別管理
#### カテゴリ別フィルタリング
特定カテゴリのイシューのみを確認したい場合：
1. **Filter**ボタンをクリックします
2. **Category**条件を追加します
3. 希望するカテゴリを選択します
---
## 関連ドキュメント
- [フィードバック管理](./04-feedback-management.md) - フィードバックからイシューを作成・リンクする方法
- [イシュートラッカー統合](/ja/user-guide/settings/issue-tracker-management) - 外部ツールとの統合設定
- [プロジェクト管理](./02-project-management.md) - チーム構成と権限管理
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/01-tenant-settings.md
+236
View File
@@ -0,0 +1,236 @@
---
title: テナント設定
description: ABC User Feedbackのテナント情報、ログイン方式、ユーザー管理など、組織全体に影響を与える設定を管理する方法を案内します。
sidebar_position: 1
---
# テナント設定
テナント設定はABC User Feedbackの最上位管理機能で、組織全体に影響を与える重要な設定を扱います。このドキュメントでは、テナント情報管理、ログイン方式設定、全ユーザー管理方法を説明します。
> **注意**: これらの設定は**Super Admin権限**を持つユーザーのみがアクセスできます。
---
## テナント設定
テナントは組織の最上位単位で、すべてのプロジェクトとユーザーが含まれる範囲です。
### アクセス方法
1. 右上メニューで**Home**アイコンをクリックします
2. 左メニューから**Tenant Information**を選択します
### 編集可能な項目
| 項目 | 説明 | 編集可能 | 例 |
| --------------- | ------------------------------------- | -------- | ----------------------- |
| **ID** | テナント固有識別子（システム自動生成） | ❌ 不可 | `1` |
| **Name** | テナント名（組織名、会社名など） | ✅ 可能 | `ABC Company` |
| **Description** | テナント説明（オプション） | ✅ 可能 | `顧客フィードバック管理システム` |
### 情報編集方法
1. **Name**または**Description**フィールドを編集します
2. 右上の**Save**ボタンをクリックします
3. 保存完了時に成功メッセージが表示されます
> テナント名はログインUIに表示される場合があります。
---
## ログイン設定
ユーザーがシステムにアクセスする際に使用する認証方式を設定します。
### アクセス方法
1. 右上メニューで**Home**アイコンをクリックします
2. 左メニューから**Login Management**を選択します
### サポートされるログイン方式
#### 1. メールログイン
デフォルトで提供されるメール+パスワードの組み合わせ方式です。
**特徴**：
- 追加設定なしでデフォルト有効化
- ユーザー招待 → メール認証 → パスワード設定の順序
- パスワードリセット機能提供
**パスワードポリシー**：
- 最低8文字以上
- 英字、数字、特殊文字を含むことを推奨
- 連続文字禁止（例：`aa`、`11`）
#### 2. Googleログイン
Google OAuth 2.0によるソーシャルログイン方式です。
**設定方法**：
1. **Googleログイン有効化**: トグルをONに切り替えます
2. **Google Cloud Console設定が必要です**：
> **参考**: Google OAuth統合の詳細な実装方法については、[OAuth統合ガイド](/ja/developer-guide/oauth-integration)を参照してください。
#### 3. カスタムOAuthログイン
独自のOAuthサーバーや他のOAuthプロバイダーを使用する方式です。
**設定項目**：
| 項目 | 説明 | 例 |
| ----------------- | ----------------------------- | ---------------------------------------- |
| **Provider Name** | ログインボタンに表示される名前 | `Microsoftでログイン` |
| **Client ID** | OAuthクライアントID | `abc123xyz` |
| **Client Secret** | OAuthクライアントシークレット | `supersecret` |
| **Auth URL** | 認証リクエストURL | `https://auth.example.com/oauth2/auth` |
| **Token URL** | トークンリクエストURL | `https://auth.example.com/oauth2/token` |
| **User Info URL** | ユーザー情報リクエストURL | `https://auth.example.com/oauth2/userinfo` |
| **Scope** | リクエストする権限範囲 | `openid email profile` |
| **Email Key** | ユーザー情報のメールフィールド名 | `email` |
**設定順序**：
1. 各フィールドにOAuthサーバー情報を入力します
2. **Save**ボタンをクリックして保存します
3. ログイン画面で設定されたProvider Nameでボタンが表示されます
### ログイン方式の組み合わせ
複数のログイン方式を同時に有効化できます：
- **メールのみ**: デフォルトログインフォームのみ表示
- **メール+Google**: ログインフォーム+「Googleでログイン」ボタン
- **メール+カスタム**: ログインフォーム+カスタムOAuthボタン
### ログイン設定のテスト
設定変更後、必ずテストを実施してください：
1. ブラウザのシークレットモードでログインページにアクセス
2. 設定したログイン方式が正常に表示されるか確認
3. 各方式で実際のログインテストを実行
---
## ユーザー管理
テナント全体のユーザーを中央で統合管理する機能です。
### アクセス方法
1. 右上メニューで**Home**アイコンをクリックします
2. 左メニューから**User Management**を選択します
### ユーザーリストの確認
#### 表示される情報
| 列 | 説明 | 表示例 |
| ---------- | ------------------------- | ---------------------- |
| Email | ログインアカウントメールアドレス | `user@company.com` |
| Name | ユーザー名（プロフィール基準） | `山田太郎` |
| Department | 所属部門 | `開発チーム` |
| Type | ユーザータイプ | `SUPER` / `GENERAL` |
| Project | アクセス可能なプロジェクトリスト | `プロジェクトA、プロジェクトB` |
| Created | アカウント作成日時 | `2024-03-15 14:30` |
#### ユーザータイプの説明
| タイプ | 説明 | 権限範囲 |
| --------- | -------------------------------------------------------- | --------------- |
| `SUPER` | すべてのプロジェクトと設定にアクセス可能。全体システム管理者の役割 | テナント全体 |
| `GENERAL` | 指定されたプロジェクトにのみアクセス可能 | 特定のプロジェクトのみ |
### ユーザー検索とフィルタリング
大量のユーザーがいる場合、希望するユーザーを素早く見つけることができます。
#### フィルタ機能
上部の**Filter**ボタンをクリックして条件を設定します。
**フィルタ条件**：
- **Email**: メールアドレスで検索
- **Name**: ユーザー名で検索
- **Department**: 部門名で検索
**演算子オプション**：
- **CONTAINS**: 含む場合
- **IS**: 完全一致する場合
### ユーザーの招待
新しいユーザーをシステムに招待します。
#### 招待方法
1. 右上の**Invite User**ボタンをクリックします
2. 招待情報を入力します
| 項目 | 説明 | オプション |
| ----------- | --------------------------- | ----------------------------- |
| **Email** | 招待するユーザーのメールアドレス | 必須入力 |
| **Type** | ユーザータイプ | `GENERAL` / `SUPER` |
| **Project** | アクセスを許可するプロジェクト | プロジェクトリストから選択 |
| **Role** | そのプロジェクトでの役割 | `Admin` / `Editor` / `Viewer` |
3. **Invite**ボタンをクリックして招待を完了します
#### 招待後のプロセス
1. 招待されたユーザーにメールが送信されます
2. ユーザーがメールのリンクをクリックして登録手続きを進めます
3. 登録完了後、指定されたプロジェクトに自動的に追加されます
### ユーザー情報の編集
既存のユーザーの情報と権限を変更できます。
#### 編集方法
1. ユーザーリストで編集したいユーザーをクリックします
2. **Edit User**ポップアップが開きます
#### 編集可能な項目
| 項目 | 編集可能 | 説明 |
| --------- | -------- | ------------------------------ |
| **Email** | ❌ 不可 | アカウント識別子として変更不可 |
| **Type** | ✅ 可能 | `GENERAL` ↔ `SUPER`変更可能 |
#### 保存と適用
1. 必要な情報を編集します
2. **Save**ボタンをクリックします
3. 変更は即座に適用され、該当ユーザーの次回ログインから反映されます
### ユーザーの削除
システムを使用しなくなったユーザーを削除できます。
#### 削除方法
1. ユーザー編集ポップアップ下部の**Delete**ボタンをクリックします
2. 確認ダイアログで削除を承認します
#### 削除時の注意事項
- **復元不可能**: 削除されたユーザーアカウントは元に戻せません
- **アクセス権限の即座削除**: 削除時、すべてのシステムアクセスが即座にブロックされます
---
## 関連ドキュメント
- [プロジェクト管理](../02-project-management.md) - プロジェクト別メンバーと権限管理
- [OAuth統合ガイド](../../02-developer-guide/03-oauth-integration.md) - OAuth設定の技術的実装方法
- [API統合](/ja/developer-guide/api-integration) - APIによるユーザー管理方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/02-api-key-management.md
+134
View File
@@ -0,0 +1,134 @@
---
title: APIキー設定
description: ABC User Feedbackで外部システム統合のためのAPIキーを作成、管理し、セキュリティを維持する方法を説明します。
sidebar_position: 2
---
# APIキー設定
APIキーは、外部システムがABC User Feedbackと安全に統合できるようにする認証手段です。このドキュメントでは、APIキーの作成から管理、セキュリティ維持まで、画面中心で説明します。
![api-key-setting.png](/img/api-key/api-key-setting.png)
---
## APIキーの概要
### APIキーの役割
APIキーは次の目的で使用されます：
- **外部システム認証**: ウェブサイト、モバイルアプリからフィードバック送信
- **自動化統合**: バッチジョブ、スクリプトによるデータ収集
- **サードパーティツール接続**: 分析ツール、モニタリングシステム統合
- **セキュリティ制御**: プロジェクト別の独立したアクセス権限管理
### セキュリティ特徴
- **プロジェクト別独立性**: 各プロジェクトごとに別々のキー発行
- **ステータス管理**: Active/Inactiveステータスで即座に制御可能
---
## APIキーの作成
### アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**APIキー管理**を選択
### キー作成プロセス
#### 1. 作成ボタンをクリック
APIキー管理画面で右上の**Create API Key**ボタンをクリックします。
#### 2. 自動生成と表示
ボタンをクリックするとすぐに新しいAPIキーが自動生成され、ポップアップで表示されます。
**ポップアップ構成要素**：
- **APIキー値**: 完全なキー文字列を表示
- **Copyボタン**: クリップボードに即座にコピー
---
## APIキーリスト管理
### キーリスト画面構成
作成されたAPIキーはテーブル形式で管理されます。
#### テーブル列情報
| 列 | 説明 | 表示形式 |
| ----------- | ---------------------- | -------------------------- |
| **APIキー** | 生成されたキー値 | `AbcdEfgh...` |
| **Status** | 現在の有効化ステータス | Active / Inactive |
| **Created** | キー作成日時 | `2024-03-15 14:30` |
| **Actions** | 管理アクションボタン | ステータス変更、削除ボタン |
#### キー識別方法
完全なキー値を再度確認できないため、次の方法でキーを区別します：
- **作成時刻**: いつ作成されたキーか確認
- **使用目的メモ**: 別途キーの用途を記録しておく
---
## APIキーステータス管理
![api-key-detail.png](/img/api-key/api-key-detail.png)
### Active / Inactiveの切り替え
各APIキーは即座に有効化/無効化できます。
#### ステータス別の意味
| ステータス | 説明 | API呼び出し結果 |
| ------------ | --------------------------- | ---------------- |
| **Active** | 実際のAPI呼び出しに使用可能 | 正常処理 |
| **Inactive** | 呼び出しブロック状態 | 401 Unauthorized |
#### ステータス変更方法
1. APIキーリストで**Status**列のトグルスイッチをクリックします
2. ステータスが即座に変更され、画面に反映されます
3. そのキーを使用する外部システムで即座に影響を受けます
---
## APIキーの削除
### 削除タイミング
次の場合、APIキーを削除する必要があります：
- **キー公開**: 誤ってキーが公開された場合
- **プロジェクト終了**: 該当プロジェクトの使用終了
- **セキュリティポリシー**: 定期的なキー交換ポリシーに従って
- **未使用キー**: 使用しなくなったキーの整理
### 削除方法
#### 1. 削除ボタンをクリック
キーリストで削除したいキーの**Actions**列の削除ボタンをクリックします。
#### 2. 削除確認
確認ダイアログで削除を最終承認します。
#### 3. 削除完了
**Delete**ボタンをクリックすると、キーが即座に削除され、リストから削除されます。
---
## 関連ドキュメント
- [API統合ガイド](/ja/developer-guide/api-integration) - APIキーを使用した実際の統合実装方法
- [プロジェクト管理](/ja/user-guide/project-management) - プロジェクト別APIキー管理
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/03-issue-tracker-management.md
+167
View File
@@ -0,0 +1,167 @@
---
title: イシュートラッカー設定
description: ABC User Feedbackで外部イシュートラッカー（Jiraなど）と統合してイシューを追跡し、リンクする方法を案内します。
sidebar_position: 3
---
# イシュートラッカー設定
イシュートラッカー設定により、ABC User Feedbackのイシューを外部イシュー管理システム（Jiraなど）と統合できます。内部イシューに外部チケットリンクを接続して、開発ワークフローと自然に統合できます。
---
## イシュートラッカーの概要
### 統合の目的
イシュートラッカー統合は次の目的で使用されます：
- **ワークフロー統合**: 顧客フィードバックと開発作業の接続
- **イシュー追跡**: 内部イシューと外部チケットの1対1マッピング
- **進行状況共有**: 開発チームとカスタマーサポートチーム間の情報同期
- **効率性向上**: 重複作業の防止とコンテキストの維持
### 統合方式
- **手動リンク接続**: ABCイシューに外部チケット番号を手動で入力
- **URL自動生成**: 設定されたBase URLとProject Keyで自動リンク生成
- **クリック移動**: 生成されたリンクをクリックして外部システムにすぐに移動
> **参考**: リアルタイム双方向同期はサポートしていません。ステータス変更などの同期が必要な場合は、[Webhook](./04-webhook-management.md)を活用してください。
---
## 設定画面へのアクセス
### アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**イシュートラッカー管理**を選択
### 設定画面構成
イシュートラッカー管理画面は次のように構成されます：
- **Issue Tracking System**: 統合するシステムを選択するドロップダウン
- **Connection Settings**: 接続情報入力エリア
- **Link Preview**: 生成されるリンクのプレビュー
- **Test Connection**: 接続テストボタン
---
## Jira統合設定
### システム選択
#### 1. Issue Tracking System設定
ドロップダウンから**Jira**を選択します。
### 接続情報入力
#### 2. Base URL設定
Jiraシステムの基本アドレスを入力します。
| 入力例 | 説明 |
| ----------------------------------- | ----------------------- |
| `https://yourcompany.atlassian.net` | Jira Cloudインスタンス |
| `https://jira.company.com` | セルフホスティングJira Server |
| `https://jira.internal:8080` | 内部ネットワークJira |
**注意事項**：
- `https://`または`http://`プロトコルを含める必要があります
- 最後のスラッシュ（`/`）を削除
- ポート番号がある場合は含める
#### 3. Project Key設定
Jiraプロジェクトの固有キーを入力します。
| 入力例 | 説明 |
| --------- | -------------------- |
| `PROJ` | 一般的なプロジェクトキー |
| `DEV` | 開発チームプロジェクト |
| `CS` | カスタマーサポートチームプロジェクト |
| `BUG` | バグ管理専用 |
**Project Key確認方法**：
1. Jiraで該当プロジェクトにアクセス
2. イシュー番号の`-`の前の部分がProject Key
3. 例：`PROJ-123`で`PROJ`がProject Key
### リンクプレビュー
設定した情報に基づいて生成されるリンクをプレビューできます。
#### プレビュー構成
```
Base URL + /browse/ + Project Key + - + Issue Number
```
**例**：
- Base URL: `https://yourcompany.atlassian.net`
- Project Key: `PROJ`
- Issue Number: `123`（ユーザーが入力）
- **生成されたリンク**: `https://yourcompany.atlassian.net/browse/PROJ-123`
#### リンク形式検証
プレビューで次を確認してください：
- URL形式が正しいか
- 実際のJiraイシューにアクセス可能か
- チームメンバーがアクセス権限を持っているか
---
## イシューでのチケット接続
### チケット番号入力
イシュートラッカー設定が完了すると、個別のイシューで外部チケットを接続できます。
#### 接続方法
1. **Issue**タブで希望するイシューをクリックします
2. 右側の**Issue Details**パネルが開きます
3. **Ticket**フィールドに外部チケット番号を入力します
#### 入力形式
| 入力方式 | 説明 | 生成されるリンク |
| --------- | ----------- | ------------------------------------------ |
| `123` | 数字のみ入力 | `https://jira.company.com/browse/PROJ-123` |
システムが自動的にProject Keyを追加するため、数字のみ入力すれば十分です。
### リンク自動生成
チケット番号入力後、**Save**ボタンをクリックするとリンクが自動生成されます。
#### リンク機能
- **クリック移動**: リンクをクリックすると新しいタブで外部Jiraイシューに移動
- **外部リンク表示**: リンクの横に外部リンクアイコンを表示
- **編集可能**: Editモードでチケット番号を変更可能
### 接続解除
外部チケット接続を削除するには：
1. イシュー詳細パネルで**Edit**ボタンをクリック
2. **Ticket**フィールドの内容を削除
3. **Save**ボタンで変更を保存
---
## 関連ドキュメント
- [イシュー管理](/ja/user-guide/issue-management) - イシュー作成とチケット接続の使用方法
- [Webhook管理](/ja/user-guide/settings/webhook-management) - イシューステータス変更時の外部システム通知
- [API統合ガイド](/ja/developer-guide/api-integration) - APIによるイシュー管理
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/04-webhook-management.md
+170
View File
@@ -0,0 +1,170 @@
---
sidebar_position: 4
title: 'ウェブフック設定'
description: '外部システムと自動統合するためにウェブフックを設定し、イベント発生時に通知を送信する方法を説明します。'
---
# ウェブフック設定
ウェブフックは、ABC User Feedbackで**特定のイベント発生時に外部システムに自動通知**を送信する機能です。フィードバック作成、イシューステータス変更などのイベントをリアルタイムで外部サービス（Slack、Discord、独自サーバーなど）に配信できます。詳細な統合ガイドについては、[ウェブフック統合](/ja/developer-guide/webhook-integration)ドキュメントを参照してください。
![webhook-setting](/img/webhook/webhook-setting.png)
---
## アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Webhook Integration**を選択
---
## Webhook Integration画面の概要
![webhook-list.png](/img/webhook/webhook-list.png)
ウェブフック統合画面は次のように構成されます：
### ウェブフックリストテーブル構成
| 列 | 説明 |
| ----------------- | --------------------------------------- |
| **On/Off** | ウェブフック有効化/無効化トグルスイッチ |
| **Name** | ウェブフック名 |
| **URL** | 通知を受信する外部エンドポイント |
| **Event Trigger** | 購読中のイベントトリガー |
| **Created** | ウェブフック作成日時 |
---
## 新しいウェブフックの作成
### 1. ウェブフック登録開始
右上の**Register Webhook**ボタンをクリックすると、ウェブフック登録モーダルが開きます。
### 2. 基本情報入力
#### 必須入力項目
| 項目 | 説明 |
| -------- | ------------------------------------------- |
| **Name** | ウェブフック識別のための名前 |
| **URL** | HTTP POSTリクエストを受信するエンドポイント |
### 3. トークン設定（オプション）
**Token**フィールドで認証用のトークンを設定できます：
- **Generate**ボタンをクリックして自動生成
- または直接トークン値を入力
### 4. Event Trigger選択
購読するイベントをチャネル別に選択できます：
#### サポートされるイベントタイプ
各チャネル（VOC、Review、Survey、VOC Test）について、次のイベントを選択できます：
| イベントタイプ | 説明 |
| ----------------------- | ------------------------------------------ |
| **Feedback Creation** | 新しいフィードバックが登録されたとき |
| **Issue Registration** | 新しいイシューが作成されたとき |
| **Issue Status Change** | イシューステータスが変更されたとき |
| **Issue Creation** | イシューがフィードバックにリンクされたとき |
### 5. ウェブフック保存
すべての情報を入力した後：
1. **OK**ボタンをクリックしてウェブフックを作成
2. **Cancel**ボタンでキャンセル可能
---
## ウェブフックステータス管理
### 有効化/無効化の切り替え
ウェブフックリストで各ウェブフックの**On/Off**列にあるトグルスイッチをクリックしてステータスを変更できます：
- **On（有効化）**: イベント発生時にリアルタイム送信
- **Off（無効化）**: ウェブフックは維持されますが送信は停止
### 一時無効化シナリオ
- 外部サーバーがメンテナンス中の場合
- ウェブフックURL変更作業中の場合
- スパム通知を防ぐ必要がある場合
---
## ウェブフック編集と削除
### ウェブフック編集
ウェブフックリストで編集したいウェブフックをクリックすると編集モーダルが開きます：
#### 編集可能な項目
- ウェブフック名
- Target URL変更
- トークン値修正
- イベントタイプ追加/削除
### ウェブフック削除
ウェブフックを完全に削除するには：
1. 編集モーダルで削除オプションを選択
2. またはリストから直接削除ボタンをクリック（UIに削除ボタンがある場合）
---
## ウェブフックテストと検証
### 手動検証方法
1. **フィードバック作成テスト**：
- テストフィードバックを登録して`Feedback Creation`イベントを確認
2. **イシュー管理テスト**：
- イシューを作成またはステータスを変更して関連イベントを確認
3. **外部サービス確認**：
- Slack、Discordなどでメッセージ受信を確認
---
## 一般的な統合例
### Slackウェブフック設定
```
Name: Slack通知
URL: https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXX
Events: Feedback Creation, Issue Registration（すべてのチャネル）
```
### Discordウェブフック設定
```
Name: Discord開発チーム通知
URL: https://discord.com/api/webhooks/123456789/abcdefghijk
Events: Issue Status Change（VOCチャネルのみ）
```
### カスタムサーバー統合
```
Name: 内部分析システム
URL: https://api.yourcompany.com/webhooks/feedback
Token: your-generated-token
Events: すべてのイベント（すべてのチャネル）
```
---
## 関連ドキュメント
- [Webhook開発者ガイド](/ja/developer-guide/webhook-integration) - ウェブフック受信サーバーの実装方法
- [APIキー管理](./02-api-key-management.md) - APIキーベース認証設定
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/05-ai-setting.md
+272
View File
@@ -0,0 +1,272 @@
---
sidebar_position: 5
title: 'AI設定'
description: '生成AI機能を使用するための基本設定と統合方法を説明します。'
---
# AI設定
ABC User Feedbackで**生成AI機能**を使用するには、まずAIプロバイダーとの統合を設定する必要があります。
AI設定を完了すると、**AIフィールドテンプレート**、**AIイシュー推奨**、**AI使用量モニタリング**などのすべての機能を活用できます。
---
## アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Generative AI Integration**を選択
3. 上部タブで**AI Setting**をクリック
---
## AIプロバイダー選択と設定
![ai-setting.png](/img/ai/ai-setting.png)
### 1. プロバイダー選択
現在サポートされているAIプロバイダーOpenAI、Google Geminiのいずれかを選択します：
### 2. APIキー入力
選択したAIプロバイダーから発行されたAPIキーを入力します。
### 3. Base URL設定（オプション）
ほとんどの場合、**空欄にしておくとデフォルト値**が自動的に使用されます。
特別なエンドポイントやプロキシサーバーを使用する場合のみ入力してください。
### 4. System Prompt設定（オプション）
AIがすべてのリクエストを処理する際に参照する**基本指示**を設定できます。
組織のトーンアンドマナーや特別な要件がある場合に活用してください。
### 5. 設定保存
すべての情報を入力した後、右上の**Save**ボタンをクリックします。
---
## AI使用量モニタリング
![ai-usage.png](/img/ai/ai-usage.png)
**AI Usage**タブでAI機能の使用量とコストをモニタリングできます。
### 使用量ダッシュボード
確認できる情報：
- **日次/月次API呼び出し数**
- **トークン使用量**（入力/出力別）
- **機能別使用分布**（AIフィールド vs イシュー推奨）
---
## AIフィールドテンプレート管理
![ai-field-template.png](/img/ai/ai-field-template.png)
AI設定を完了した後、**AI Field Template**タブでフィードバック自動分析テンプレートを管理できます。
### デフォルトテンプレート
システムで提供されるデフォルトテンプレート：
| テンプレート | 説明 | 活用例 |
| ---------------------- | ---------------------------------------------- | ------------------------------ |
| **Feedback Summary** | フィードバックを1文で要約 | 長いフィードバックの核心を把握 |
| **Sentiment Analysis** | 感情分析（ポジティブ/ネガティブ/ニュートラル） | 顧客満足度トレンド分析 |
| **Translation** | フィードバックを英語に翻訳 | 多言語フィードバック統合分析 |
| **Keyword Extraction** | 核心キーワード2-3個抽出 | イシューカテゴリ自動タグ付け |
### カスタムテンプレート作成
![ai-field-template-create.png](/img/ai/ai-field-template-create.png)
1. **Create New**カードをクリック
2. テンプレート情報を入力
| 項目 | 説明 |
| --------------- | --------------------- |
| **Title** | テンプレート名 |
| **Prompt** | AIに与える指示文 |
| **Model** | 使用するAIモデル選択 |
| **Temperature** | 創造性調整（0.0~1.0） |
3. Playgroundでテスト
- "Add Data"ボタンでテストフィードバック入力
- "AI test execution"クリックで結果確認
### テンプレート編集と削除
- テンプレートカードクリック → 編集
- **Delete Template**ボタンで削除
- 削除時、そのテンプレートを使用するAIフィールドに影響を与える可能性があります
---
## AIフィールドをチャネルに適用
AIフィールドテンプレートを作成した後、実際のチャネルのフィールドとして適用する必要があります。フィードバックでAI分析結果を確認できます。
### 1. Field ManagementでAIフィールド追加
**Settings > Channel List > [チャネル選択] > Field Management**でAIフィールドを追加します。
#### AIフィールド設定項目
| 項目 | 説明 | 必須 |
| ----------------------- | ------------------------------------ | ---------- |
| **Key** | フィールド固有識別子 | 必須 |
| **Display Name** | UIに表示される名前 | 必須 |
| **Format** | `aiField`選択 | 必須 |
| **Template** | 作成したAIフィールドテンプレート選択 | 必須 |
| **Target Field** | 分析対象となるテキストフィールド | 必須 |
| **Property** | EditableまたはRead Only | 必須 |
| **AI Field Automation** | 自動実行有無 | オプション |
#### 設定例
```
Key: sentiment_analysis
Display Name: 感情分析
Format: aiField
Template: Feedback Sentiment Analysis
Target Field: message
Property: Read Only
AI Field Automation: ON（自動実行）
```
### 2. Template接続とTarget Field設定
**Template**ドロップダウンから以前に作成したAIフィールドテンプレートを選択します。
**Target Field**はAI分析の対象となるフィールドを指定します
### 3. AI Field Automation設定
**AI Field Automation**トグルを通じて実行方式を選択します：
- **ON（自動実行）**: 新しいフィードバック登録時に自動的にAI分析実行
- **OFF（手動実行）**: ユーザーが手動で実行ボタンをクリックする必要があります
## フィードバックでAI分析結果確認
AIフィールド設定が完了すると、フィードバックリストと詳細画面でAI分析結果を確認できます。
### フィードバックリストで確認
フィードバックテーブルにAIフィールドが新しい列として追加されます：
- **Summary**: AIが生成した要約
- **Classification**: AI分類結果
- **Korean**: 翻訳結果など
### フィードバック詳細画面で確認
フィードバック詳細表示パネルでより詳細なAI分析結果を確認できます：
1. フィードバック行をクリック → 右側詳細パネルが開きます
2. AIフィールド別の分析結果を確認
3. 各AIフィールドごとに分析結果とともに表示
## AI分析手動実行
フィードバック詳細画面で手動でAI分析を実行できます。
### Run AIボタン使用
1. フィードバック詳細画面で**Run AI**ボタンをクリック
2. AI分析が実行され、結果がそのフィールドに自動入力されます
3. 分析完了後、結果をすぐに確認可能
### 手動実行活用シナリオ
- **コスト節約**: 必要なフィードバックのみを選択してAI分析
- **パフォーマンス確認**: 新しいテンプレートの結果を事前にテスト
- **再分析**: テンプレート修正後、既存フィードバックを再分析
---
## AIイシュー推奨設定
**AI Issue Recommendation**タブでフィードバックベースの自動イシュー推奨機能を設定できます。
![ai-issue-recommendation.png](/img/ai/ai-issue-recommendation.png)
### 推奨設定作成
![ai-issue-recommendation-create.png](/img/ai/ai-issue-recommendation-create.png)
1. **Create New**ボタンをクリック
2. 設定項目を入力
| 項目 | 説明 | 必須 |
| ---------------- | --------------------------------- | ---------- |
| **Channel** | 適用するチャネル選択 | 必須 |
| **Target Field** | 分析対象フィールド（例：message） | 必須 |
| **Prompt** | 推奨基準プロンプト | オプション |
| **Enable** | 機能有効化トグル | 必須 |
3. 高度な設定
| 設定 | 説明 |
| ------------------------- | -------------------------------------------------- |
| **Model** | 使用モデル |
| **Temperature** | 創造性調整 |
| **Data Reference Amount** | 参照するイシュー量（イシューと関連フィードバック） |
### 推奨機能テスト
入力された設定についてPlaygroundでテスト：
1. 例示フィードバック入力
2. "AI test execution"クリック
3. 推奨イシューリスト確認
### 実際のフィードバックで推奨活用
フィードバック詳細表示で：
- AI推奨イシューリスト確認
- チェックボックスで適切なイシュー選択
- **Retry**ボタンで別の推奨リクエスト
### フィードバックリストでイシュー推奨使用
AIイシュー推奨を設定したチャネルでは、フィードバックリスト画面でも直接イシュー推奨機能を使用できます。
#### 使用方法
1. フィードバックリストでイシューを接続したいフィードバックの**Issue列**にある**+ボタン**をクリック
2. ドロップダウンメニューが表示されたら**"Run AI"**を選択
3. AIが関連イシューを分析して推奨リストを表示
#### 推奨結果確認と適用
AI分析完了後、推奨イシューリストから：
- **推奨されたイシュー**確認
- 推奨された適切なイシュー選択
- 新しいイシュー作成オプションも提供
- 選択完了後、該当イシューがフィードバックに自動接続
#### 一括処理活用
複数のフィードバックを選択した状態でもAIイシュー推奨を使用でき、効率的なフィードバック分類が可能です：
1. フィードバックリストで複数行選択（チェックボックス活用）
2. 上部一括作業メニューでAIイシュー推奨実行
3. 各フィードバックごとに推奨イシュー確認と適用
---
## 関連ドキュメント
- [フィールド設定](/ja/user-guide/feedback-management) - AIフィールドをチャネルに適用する方法
- [イシュー作成とステータス管理](/ja/user-guide/issue-management) - AI推奨イシューの活用方法
- [フィードバック確認とフィルタリング](/ja/user-guide/feedback-management) - AI分析結果確認方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/06-image-setting.md
+102
View File
@@ -0,0 +1,102 @@
---
sidebar_position: 6
title: '画像設定'
description: 'フィードバックに添付された画像の保存方式とセキュリティポリシーを設定する方法を案内します。'
---
# 画像設定
ABC User Feedbackでは、ユーザーがフィードバックを提出する際に**画像と一緒にアップロード**できるようにサポートしています。画像の保存方式とセキュリティポリシーを適切に設定することで、安全で効率的なフィードバック収集環境を構築できます。
![image-setting.png](/img/image/image-setting.png)
---
## アクセス方法
1. 上部メニューで**Settings**をクリック
2. 左メニューから**Channel List > [チャネル選択]**
3. 下部タブから**Image Management**を選択
---
## Image Storage Integration設定
**Multipart Upload API**方式で画像をサーバーに直接アップロードするか、**Presigned URL Download**機能を活用するには、S3またはS3互換ストレージ統合が必要です。
### 必須設定項目
| 項目 | 説明 | 例 |
| --------------------- | ---------------------------- | ----------------------------------------- |
| **Access Key ID** | S3アクセスのためのキーID | `AKIAIOSFODNN7EXAMPLE` |
| **Secret Access Key** | キーに対するシークレット | `wJalrXUtnFEMI/K7MDENG/...` |
| **End Point** | S3 APIエンドポイントURL | `https://s3.ap-northeast-1.amazonaws.com` |
| **Region** | バケットが位置する地域 | `ap-northeast-1` |
| **Bucket Name** | 画像が保存される対象バケット | `consumer-ufb-images` |
### Presigned URL Download設定
**Presigned URL Download**オプションを通じて画像ダウンロードセキュリティを強化できます。
#### 設定オプション
- **Enable**: 認証されたワンタイムURLを通じて画像にアクセス（セキュリティ強化）
- **Disable**: 画像URLが直接公開され、公開アクセス可能
### 接続テスト
すべての設定を入力した後、**Test Connection**ボタンをクリックしてストレージ接続を確認します。
接続結果：
- ✅ **成功**: "Connection test succeeded"メッセージ
- ❌ **失敗**: 入力値、バケット権限、ネットワーク設定を再確認する必要があります
---
## Image URL Domain Whitelist設定
**Image URL方式**を使用するか、セキュリティを強化したい場合、信頼できるドメインのみを許可するようにホワイトリストを設定できます。
### 現在の状態確認
デフォルト設定は**"All image URLs are allowed"**状態で、すべてのドメインの画像URLを許可します。
### ホワイトリスト追加
セキュリティ強化のために特定のドメインのみを許可するには：
1. **Whitelist**エリアに信頼できるドメインを追加
2. 例示ドメイン：
- `cdn.yourcompany.com`
- `images.trusted-partner.io`
- `storage.googleapis.com`
---
## サポートされるストレージサービス
### AWS S3
- 最も一般的に使用されるクラウドストレージ
- 安定性が高く、拡張性に優れています
---
## 設定保存
すべての設定を完了した後、右上の**Save**ボタンをクリックして変更を保存します。
保存後：
- 新しい画像アップロードが設定した方式で動作
- 既存の画像は既存設定のまま維持
- Test Connectionで設定の正常動作を再確認することを推奨
---
## 関連ドキュメント
- [フィールド設定](/ja/user-guide/feedback-management) - 画像フィールドをフィードバックフォームに追加する方法
- [フィードバック確認とフィルタリング](/ja/user-guide/feedback-management) - アップロードされた画像をフィードバックで確認する方法
- [APIキー管理](./02-api-key-management.md) - APIキーセキュリティ管理方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 7,
"label": "設定",
"description": "設定に関するガイドです。"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/07-settings/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: 設定
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 2,
"label": "ユーザーガイド"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/01-user-guide/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: ユーザーガイド
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/01-docker-hub-images.md
+374
View File
@@ -0,0 +1,374 @@
---
id: docker-hub-images
title: Docker Hubイメージインストール
description: Docker Hubに登録されたABC User Feedback公式イメージを使用してシステムを迅速にインストールする方法を説明します。
sidebar_position: 1
---
# Docker Hubイメージインストール
ABC User Feedbackは公式Dockerイメージを提供しています。
このドキュメントは、Docker Composeを使用して**Web UI、APIサーバー、データベース、SMTPサーバー**などのシステムをローカルで迅速に構成する方法を説明します。
---
## 1. 前提条件
| 項目 | 説明 |
| -------------- | ----------------------------------------------------------------------- |
| Docker | 20.10以上 |
| Docker Compose | v2以上推奨 |
| 使用ポート | `3000`、`4000`、`13306`、`5080`、`25`（ローカルで空いている必要がある） |
---
## 2. Dockerイメージ構成
| サービス名 | 説明 | Dockerイメージ名 |
| ------------------------ | ------------------------------- | ------------------------------------- |
| Web (Admin UI) | フロントエンドWeb UI（Next.js） | `line/abc-user-feedback-web` |
| API (Backend) | バックエンドサーバー（NestJS） | `line/abc-user-feedback-api` |
| MySQL | データベース | `mysql:8.0` |
| SMTP4Dev | ローカルテスト用メールサーバー | `rnwood/smtp4dev:v3` |
| （オプション）OpenSearch | 検索機能とAI分析精度向上用 | `opensearchproject/opensearch:2.16.0` |
---
## 3. `docker-compose.yml`の例
```yaml
name: abc-user-feedback
services:
web:
image: line/abc-user-feedback-web:latest
environment:
- NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
ports:
- 3000:3000
depends_on:
- api
restart: unless-stopped
api:
image: line/abc-user-feedback-api:latest
environment:
- JWT_SECRET=jwtsecretjwtsecretjwtsecret
- MYSQL_PRIMARY_URL=mysql://userfeedback:userfeedback@mysql:3306/userfeedback
- SMTP_HOST=smtp4dev
- SMTP_PORT=25
- SMTP_SENDER=user@feedback.com
# OpenSearchを使用する場合は以下のコメントを解除してください
# - OPENSEARCH_USE=true
# - OPENSEARCH_NODE=http://opensearch-node:9200
ports:
- 4000:4000
depends_on:
- mysql
restart: unless-stopped
mysql:
image: mysql:8.0
command:
[
'--default-authentication-plugin=mysql_native_password',
'--collation-server=utf8mb4_bin',
]
environment:
MYSQL_ROOT_PASSWORD: userfeedback
MYSQL_DATABASE: userfeedback
MYSQL_USER: userfeedback
MYSQL_PASSWORD: userfeedback
TZ: UTC
ports:
- 13306:3306
volumes:
- mysql:/var/lib/mysql
restart: unless-stopped
smtp4dev:
image: rnwood/smtp4dev:v3
ports:
- 5080:80
- 25:25
- 143:143
volumes:
- smtp4dev:/smtp4dev
restart: unless-stopped
# OpenSearchを使用する場合は以下のコメントを解除してください
# opensearch-node:
# image: opensearchproject/opensearch:2.16.0
# restart: unless-stopped
# environment:
# - cluster.name=opensearch-cluster
# - node.name=opensearch-node
# - discovery.type=single-node
# - bootstrap.memory_lock=true
# - 'OPENSEARCH_JAVA_OPTS=-Xms512m -Xmx512m'
# - plugins.security.disabled=true
# - OPENSEARCH_INITIAL_ADMIN_PASSWORD=UserFeedback123!@#
# ulimits:
# memlock:
# soft: -1
# hard: -1
# nofile:
# soft: 65536
# hard: 65536
# volumes:
# - opensearch:/usr/share/opensearch/data
# ports:
# - 9200:9200
# - 9600:9600
volumes:
mysql:
smtp4dev:
# opensearch:
```
---
## 4. 実行手順
### 4.1 Dockerイメージのダウンロードと実行
```bash
# Docker Composeですべてのサービスをバックグラウンドで実行
docker compose up -d
```
### 4.2 実行状態の確認
```bash
# すべてのコンテナが正常に実行中か確認
docker compose ps
```
### 4.3 サービスアクセスの確認
- **Webアプリケーション**: [http://localhost:3000](http://localhost:3000)
- **APIサーバー**: [http://localhost:4000](http://localhost:4000)
- **SMTPテストページ**: [http://localhost:5080](http://localhost:5080)
- **MySQLデータベース**: `localhost:13306`（ユーザー：`userfeedback`、パスワード：`userfeedback`）
---
## 5. SMTP設定
デフォルトでは、この構成では`smtp4dev`を通じてメールをテストできます。
- **Webインターフェース**: [http://localhost:5080](http://localhost:5080)
- **SMTPポート**: `25`
- **IMAPポート**: `143`
### SMTPテスト方法
1. Webアプリケーションでユーザー登録またはユーザー招待機能を使用
2. [http://localhost:5080](http://localhost:5080)で送信されたメールを確認
3. メール内容と添付ファイルなどをテスト
> **重要**: 実際の本番環境では、必ず外部SMTPサーバー（例：Gmail、SendGrid、社内SMTPなど）と連携する必要があります。
## 6. インストール確認
### 6.1 Webアプリケーションアクセス確認
ブラウザで`http://localhost:3000`にアクセスし、以下を確認してください：
- テナント作成画面が正常に表示されるか
- ページの読み込みが完了するか
- JavaScriptエラーがないか（ブラウザの開発者ツールで確認）
### 6.2 APIサーバーステータス確認
```bash
# APIサーバーヘルスチェック
curl http://localhost:4000/api/health
```
予想される応答：
```json
{
"status": "ok",
"info": {
"database": {
"status": "up"
}
}
}
```
### 6.3 データベース接続確認
```bash
# MySQLコンテナに直接アクセスしてデータベースを確認
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "SHOW DATABASES;"
# テーブル作成確認
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "USE userfeedback; SHOW TABLES;"
```
### 6.4 ログ確認
```bash
# すべてのサービスのログを確認
docker compose logs
# 特定のサービスのログのみ確認
docker compose logs api
docker compose logs web
docker compose logs mysql
```
---
## 7. OpenSearch使用時の注意事項
OpenSearchは、検索機能とAI分析の精度を向上させるオプションコンポーネントです。
### 7.1 OpenSearch有効化方法
1. `docker-compose.yml`ファイルで`api`サービスの環境変数のコメントを解除：
```yaml
- OPENSEARCH_USE=true
- OPENSEARCH_NODE=http://opensearch-node:9200
```
2. `opensearch-node`サービスのコメントを解除
3. `volumes:`セクションで`opensearch:`のコメントを解除
4. ポート`9200`、`9600`がローカルで使用されていないことを確認
### 7.2 メモリ要件
> **注意**: OpenSearchは最低2GB以上のメモリを必要とします。メモリ不足の場合、コンテナが自動的に終了する可能性があります。
### 7.3 OpenSearchステータス確認
```bash
# OpenSearchクラスターステータス確認
curl http://localhost:9200/_cluster/health
# OpenSearchノード情報確認
curl http://localhost:9200/_nodes
# インデックス確認
curl http://localhost:9200/_cat/indices
```
### 7.4 OpenSearch無効化
OpenSearchを使用しない場合は、`docker-compose.yml`で該当サービスと環境変数をコメントアウトします。
---
## 8. トラブルシューティング
### 8.1 ポート競合の問題
**症状**: `docker compose up`実行時にポートバインディングエラーが発生
**解決方法**:
```bash
# 使用中のポートを確認
lsof -i :3000 # Webポート
lsof -i :4000 # APIポート
lsof -i :13306 # MySQLポート
lsof -i :5080 # SMTPポート
# 該当ポートを使用しているプロセスを停止して再起動
docker compose down
docker compose up -d
```
### 8.2 コンテナ起動失敗
**症状**: 一部のコンテナが起動しない、または継続的に再起動される
**解決方法**:
```bash
# コンテナステータス確認
docker compose ps
# 失敗したコンテナのログを確認
docker compose logs [サービス名]
# すべてのコンテナを停止して削除
docker compose down
# ボリュームも削除（データ損失に注意）
docker compose down -v
# 再度起動
docker compose up -d
```
### 8.3 データベース接続エラー
**症状**: APIサーバーからMySQL接続失敗
**解決方法**:
```bash
# MySQLコンテナが完全に起動するまで待機
docker compose logs mysql
# MySQLコンテナに直接接続テスト
docker compose exec mysql mysql -u userfeedback -puserfeedback -e "SELECT 1;"
# APIサービスを再起動
docker compose restart api
```
### 8.4 イメージダウンロード失敗
**症状**: Dockerイメージをダウンロードできない
**解決方法**:
```bash
# Docker Hubログイン確認
docker login
# イメージを手動でダウンロード
docker pull line/abc-user-feedback-web:latest
docker pull line/abc-user-feedback-api:latest
# ネットワーク接続確認
ping hub.docker.com
```
### 8.5 メモリ不足の問題
**症状**: OpenSearchコンテナが自動的に終了する
**解決方法**:
```bash
# システムメモリ確認
free -h
# Dockerメモリ使用量確認
docker stats
# OpenSearchを無効化（docker-compose.ymlでコメントアウト）
# またはメモリ割り当てを増やす
```
---
## 9. 参考リンク
- [ABC User Feedback Web - Docker Hub](https://hub.docker.com/r/line/abc-user-feedback-web)
- [ABC User Feedback API - Docker Hub](https://hub.docker.com/r/line/abc-user-feedback-api)
- [smtp4dev - Docker Hub](https://hub.docker.com/r/rnwood/smtp4dev)
- [OpenSearch - Docker Hub](https://hub.docker.com/r/opensearchproject/opensearch)
---
## 関連ドキュメント
- [初期設定ガイド](/ja/user-guide/getting-started)
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/02-cli-tool.md
+273
View File
@@ -0,0 +1,273 @@
---
sidebar_position: 2
title: "CLIツール使用方法"
description: "ABC User Feedback CLIツールでシステムを迅速かつ簡単にインストール・管理する方法を説明します。"
---
# CLIツール使用方法
ABC User Feedback CLI（`auf-cli`）は、システムのインストール、実行、管理を簡素化するコマンドラインツールです。Node.jsとDockerがインストールされていれば、追加の依存関係をインストールしたりリポジトリをクローンしたりすることなく、`npx`を通じてすぐに実行できます。
## 主要機能
- 必要なインフラの自動設定（MySQL、SMTP、OpenSearch）
- 環境変数設定の簡素化
- APIおよびウェブサーバーの自動起動/停止
- ボリュームデータのクリーンアップ
- 動的Docker Composeファイル生成
## 使用されるDockerイメージ
- `line/abc-user-feedback-web:latest` - ウェブフロントエンド
- `line/abc-user-feedback-api:latest` - APIバックエンド
- `mysql:8.0` - データベース
- `rnwood/smtp4dev:v3` - SMTPテストサーバー
- `opensearchproject/opensearch:2.16.0` - 検索エンジン（オプション）
## 前提条件
CLIツールを使用する前に、次の要件を満たす必要があります：
- [Node.js v22以上](https://nodejs.org/en/download/)
- [Docker](https://docs.docker.com/desktop/)
## 基本コマンド
### 初期化
ABC User Feedbackに必要なインフラを設定するには、次のコマンドを実行します：
```bash
npx auf-cli init
```
このコマンドは次の作業を実行します：
1. 環境変数設定用の`config.toml`ファイルを作成
2. アーキテクチャ（ARM/AMD）に応じて必要なインフラを設定
初期化が完了すると、現在のディレクトリに`config.toml`ファイルが作成されます。必要に応じてこのファイルを編集して環境変数を調整できます。
### サーバー起動
APIおよびウェブサーバーを起動するには、次のコマンドを実行します：
```bash
npx auf-cli start
```
このコマンドは次の作業を実行します：
1. `config.toml`ファイルから環境変数を読み取り
2. Docker Composeファイルを生成してサービスを開始
3. APIおよびウェブサーバーコンテナと必要なインフラ（MySQL、SMTP、OpenSearch）を起動
サーバーが正常に起動すると、ウェブブラウザで`http://localhost:3000`（または設定されたURL）からABC User Feedbackウェブインターフェースにアクセスできます。CLIは次のURLを表示します：
- ウェブインターフェースURL
- API URL
- MySQL接続文字列
- OpenSearch URL（有効な場合）
- SMTPウェブインターフェース（smtp4dev使用時）
### サーバー停止
APIおよびウェブサーバーを停止するには、次のコマンドを実行します：
```bash
npx auf-cli stop
```
このコマンドは実行中のAPIおよびウェブサーバーコンテナとインフラコンテナを停止します。ボリュームに保存されたすべてのデータは保持されます。
### ボリュームクリーンアップ
起動中に作成されたDockerボリュームをクリーンアップするには、次のコマンドを実行します：
```bash
npx auf-cli clean
```
このコマンドはすべてのコンテナを停止し、MySQL、SMTP、OpenSearchなどのDockerボリュームを削除します。
**警告**: この操作はすべてのデータを削除するため、必要な場合は事前にバックアップしてください。
`--images`オプションを使用して未使用のDockerイメージもクリーンアップできます：
```bash
npx auf-cli clean --images
```
## 設定ファイル（config.toml）
`init`コマンドを実行すると、現在のディレクトリに`config.toml`ファイルが作成されます。このファイルはABC User Feedbackの環境変数を設定するために使用されます。
以下は`config.toml`ファイルの例です：
```toml
[web]
port = 3000
# api_base_url = "http://localhost:4000"
[api]
port = 4000
jwt_secret = "jwtsecretjwtsecretjwtsecretjwtsecretjwtsecretjwtsecret"
# master_api_key = "MASTER_KEY"
# access_token_expired_time = "10m"
# refresh_token_expired_time = "1h"
# [api.auto_feedback_deletion]
# enabled = true
# period_days = 365
# [api.smtp]
# host = "smtp4dev" # SMTP_HOST
# port = 25 # SMTP_PORT
# sender = "user@feedback.com"
# username=
# password=
# tls=
# cipher_spec=
# opportunitic_tls=
# [api.opensearch]
# enabled = true
[mysql]
port = 13306
```
必要に応じてこのファイルを編集して環境変数を調整できます。環境変数の詳細については、[環境変数設定](./05-configuration.md)ドキュメントを参照してください。
## 高度な使用方法
### ポート変更
デフォルトでは、ウェブサーバーはポート3000を、APIサーバーはポート4000を使用します。これらを変更するには、`config.toml`ファイルで次の設定を変更します：
```toml
[web]
port = 8000 # ウェブサーバーポート変更
api_base_url = "http://localhost:8080" # API URLも一緒に変更する必要があります
[api]
port = 8080 # APIサーバーポート変更
[mysql]
port = 13307 # 必要に応じてMySQLポート変更
```
### OpenSearch有効化
高度な検索機能のためにOpenSearchを有効にするには：
```toml
[api.opensearch]
enabled = true
```
**注意事項**：
- OpenSearchには最低2GBの使用可能メモリが必要です
- OpenSearchコンテナは`http://localhost:9200`で利用可能です
- OpenSearchステータス確認: `http://localhost:9200/_cluster/health`
### SMTP設定
開発環境では、デフォルトの`smtp4dev`設定を推奨します：
```toml
[api.smtp]
host = "smtp4dev"
port = 25
sender = "dev@feedback.local"
```
smtp4devウェブインターフェースは`http://localhost:5080`で送信されたメールを確認できます。
## トラブルシューティング
### 一般的な問題
1. **Docker関連エラー**：
- Dockerが実行中か確認: `docker --version`
- Docker権限確認: `docker ps`
- Docker Desktopが正しくインストールされ実行中か確認
2. **ポート競合**：
- ポート使用確認: `lsof -i :PORT`（macOS/Linux）または`netstat -ano | findstr :PORT`（Windows）
- `config.toml`でポート設定変更
- 一般的な競合ポート: 3000、4000、13306、9200、5080
3. **サービス起動失敗**：
- コンテナログ確認: `docker compose logs SERVICE_NAME`
- Dockerイメージが利用可能か確認: `docker images`
- 十分なシステムリソース（メモリ、ディスク容量）を確認
4. **データベース接続問題**：
- MySQLコンテナステータス確認: `docker compose ps mysql`
- MySQLログ確認: `docker compose logs mysql`
- 接続テスト: `docker compose exec mysql mysql -u userfeedback -p`
### デバッグのヒント
1. **コンテナログ確認**：
```bash
# すべてのコンテナログ
docker compose logs
# 特定のサービスログ
docker compose logs api
docker compose logs web
docker compose logs mysql
```
2. **サービスステータス確認**：
```bash
# APIステータス確認
curl http://localhost:4000/api/health
# OpenSearchステータス確認（有効な場合）
curl http://localhost:9200/_cluster/health
```
3. **データベース直接アクセス**：
```bash
# MySQL接続
docker compose exec mysql mysql -u userfeedback -p userfeedback
```
## 制限事項
CLIツールは開発およびテスト環境用に設計されています。本番環境へのデプロイには、次を考慮してください：
1. **セキュリティ考慮事項**：
- 機密データには設定ファイルではなく環境変数を使用
- 適切なシークレット管理を実装
- 本番レベルのJWTシークレットを使用
- HTTPS/TLS暗号化を有効化
2. **スケーラビリティと可用性**：
- KubernetesやDocker Swarmなどのオーケストレーションツールを使用
- ロードバランシングと自動スケーリングを実装
- 適切なモニタリングとアラートを設定
- 管理データベースサービス（RDS、Cloud SQLなど）を使用
3. **データ管理**：
- 自動化されたバックアップ戦略を実装
- 適切なバックアップがある永続ボリュームを使用
- データ保持ポリシーを考慮
- ディスク使用量とパフォーマンスをモニタリング
## 次のステップ
詳細なAPIおよびウェブサーバー設定オプションについては、[環境変数設定](./05-configuration.md)ドキュメントを参照してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/03-manual-setup.md
+276
View File
@@ -0,0 +1,276 @@
---
sidebar_position: 3
title: '手動インストール'
description: 'ソースコードから直接ABC User Feedbackをビルドして実行する手動インストールガイド'
---
# 手動インストール
このドキュメントは、ABC User Feedbackを手動でインストール・構成する方法を説明します。ソースコードから直接アプリケーションをビルドして実行したい場合に便利です。
## 前提条件
手動インストールを進める前に、次の要件を満たす必要があります：
- [Node.js v22.19.0以上](https://nodejs.org/en/download/)
- [pnpm v10.15.0以上](https://pnpm.io/installation)（パッケージマネージャー）
- [Git](https://git-scm.com/downloads)
- [MySQL 8.0](https://www.mysql.com/downloads/)
- SMTPサーバー
- （オプション）[OpenSearch 2.16](https://opensearch.org/)
## ソースコードのダウンロード
まず、GitHubリポジトリからABC User Feedbackのソースコードをクローンします：
```bash
git clone https://github.com/line/abc-user-feedback.git
cd abc-user-feedback
```
## インフラ設定
ABC User FeedbackにはMySQLデータベース、SMTPサーバー、そしてオプションでOpenSearchが必要です。これらのインフラコンポーネントを設定する方法はいくつかあります。
### Dockerを使用したインフラ設定
最も簡単な方法は、Docker Composeで必要なインフラを設定することです：
```bash
docker-compose -f docker/docker-compose.infra.yml up -d
```
### 既存インフラの使用
既にMySQL、OpenSearch、またはSMTPサーバーがある場合は、後で環境変数として接続情報を構成できます。
## 依存関係のインストール
ABC User FeedbackはTurboRepoを通じて管理されるモノレポ構造を使用します。すべてのパッケージの依存関係をインストールするには：
```bash
pnpm install
```
依存関係のインストール後、すべてのパッケージをビルドします：
```bash
pnpm build
```
## 環境変数設定
### APIサーバー環境変数
`apps/api`ディレクトリに`.env`ファイルを作成し、`.env.example`を参照して構成します：
```env
# Required environment variables
JWT_SECRET=DEV
MYSQL_PRIMARY_URL=mysql://userfeedback:userfeedback@localhost:13306/userfeedback # required
ACCESS_TOKEN_EXPIRED_TIME=10m # default: 10m
REFRESH_TOKEN_EXPIRED_TIME=1h # default: 1h
# Optional environment variables
# APP_PORT=4000 # default: 4000
# APP_ADDRESS=0.0.0.0 # default: 0.0.0.0
# MYSQL_SECONDARY_URLS= ["mysql://userfeedback:userfeedback@localhost:13306/userfeedback"] # optional
SMTP_HOST=localhost # required
SMTP_PORT=25 # required
SMTP_SENDER=user@feedback.com # required
# SMTP_USERNAME= # optional
# SMTP_PASSWORD= # optional
# SMTP_TLS= # default: false
# SMTP_CIPHER_SPEC= # default: TLSv1.2 if SMTP_TLS=true
# SMTP_OPPORTUNISTIC_TLS= # default: true if SMTP_TLS=true
# OPENSEARCH_USE=false # default: false
# OPENSEARCH_NODE= # required if OPENSEARCH_USE=true
# OPENSEARCH_USERNAME= # optional
# OPENSEARCH_PASSWORD= # optional
# AUTO_MIGRATION=true # default: true
# MASTER_API_KEY= # default: none
# BASE_URL=https://api.example.com # Swaggerドキュメントで使用するAPIサーバーの公開URL（オプション）
# AUTO_FEEDBACK_DELETION_ENABLED=false # default: false
# AUTO_FEEDBACK_DELETION_PERIOD_DAYS=365*5
```
### ウェブサーバー環境変数
`apps/web`ディレクトリに`.env`ファイルを作成し、`.env.example`を参照して構成します：
```env
NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
```
環境変数の詳細については、[環境変数設定](./05-configuration.md)ドキュメントを参照してください。
## データベースマイグレーション
APIサーバーを初めて実行する前に、データベーススキーマを作成する必要があります。`AUTO_MIGRATION=true`環境変数を設定すると、サーバー起動時にマイグレーションが自動的に実行されます。
手動でマイグレーションを実行するには：
```bash
cd apps/api
npm run migration:run
```
## 開発モードでの実行
### 単一コマンドで実行
APIサーバーとウェブサーバーを開発モードで実行するには：
```bash
# プロジェクトルートディレクトリから
pnpm dev
```
このコマンドはAPIサーバーとウェブサーバーを同時に起動します。APIサーバーはデフォルトでポート4000で、ウェブサーバーはポート3000で実行されます。
### 個別パッケージの実行
#### 共通パッケージのビルド
ウェブアプリケーションを実行する前に、共有パッケージをビルドする必要があります：
```bash
# プロジェクトルートディレクトリから
cd packages/ufb-shared
pnpm build
```
#### UIパッケージのビルド
ウェブアプリケーションを実行する前に、UIパッケージをビルドする必要があります：
```bash
# プロジェクトルートディレクトリから
cd packages/ufb-tailwindcss
pnpm build
```
#### 各サーバーの個別実行
各サーバーを個別に実行するには：
```bash
# APIサーバーのみ実行
cd apps/api
pnpm dev
# ウェブサーバーのみ実行
cd apps/web
pnpm dev
```
## 本番ビルド
本番環境用のアプリケーションをビルドするには：
```bash
# プロジェクトルートディレクトリから
pnpm build
```
このコマンドはAPIサーバーとウェブサーバーの両方をビルドします。
## 本番モードでの実行
本番ビルドを実行するには：
```bash
# APIサーバー実行
cd apps/api
pnpm start
# ウェブサーバー実行
cd apps/web
pnpm start
```
## APIタイプ生成
バックエンドAPIが実行中の場合、フロントエンド用のAPIタイプを生成できます：
```bash
cd apps/web
pnpm generate-api-type
```
このコマンドはOpenAPI仕様からTypeScriptタイプを生成し、`src/shared/types/api.type.ts`ファイルに保存します。
**注意**: このコマンドが正しく動作するには、APIサーバーが`http://localhost:4000`で実行中である必要があります。
## コード品質管理
### リンティング
コードリンティングを実行するには：
```bash
pnpm lint
```
### フォーマット
コードフォーマットを実行するには：
```bash
pnpm format
```
### テスト
テストを実行するには：
```bash
pnpm test
```
## Swaggerドキュメント
APIサーバーが実行中の場合、次のエンドポイントでSwaggerドキュメントを確認できます：
- **APIドキュメント**: http://localhost:4000/docs
- **管理者APIドキュメント**: http://localhost:4000/admin-docs
- **OpenAPI JSON**: http://localhost:4000/docs-json
- **管理者OpenAPI JSON**: http://localhost:4000/admin-docs-json
> **注意**: APIサーバーをリバースプロキシの後ろで異なるURLで提供する場合、`BASE_URL`環境変数を設定すると、Swaggerドキュメントで正しいAPIエンドポイントURLが生成されます。例: `BASE_URL=https://api.example.com`
## トラブルシューティング
### 一般的な問題
1. **依存関係インストールエラー**：
- Node.jsバージョンがv22.19.0以上であることを確認してください。
- pnpmバージョンがv10.15.0以上であることを確認してください。
- pnpmを最新バージョンに更新してください。
- `pnpm install --force`を試してください。
2. **データベース接続エラー**：
- MySQLサーバーが実行中であることを確認してください。
- データベース認証情報が正しいことを確認してください。
- `MYSQL_PRIMARY_URL`環境変数の形式が正しいことを確認してください。
- Dockerインフラを使用する場合、MySQLがポート13306（3306ではない）で実行されていることを確認してください。
3. **ビルドエラー**：
- UIパッケージがビルドされていることを確認してください（`pnpm build:ui`）。
- すべての依存関係がインストールされていることを確認してください。
- TypeScriptエラーを確認してください。
4. **ランタイムエラー**：
- 環境変数が正しく設定されていることを確認してください。
- 必要なポートが利用可能であることを確認してください。
- ログのエラーメッセージを確認してください。
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/04-smtp-configuration.md
+165
View File
@@ -0,0 +1,165 @@
---
id: smtp-configuration
title: SMTPサーバー統合ガイド
description: 本番環境で認証メール送信のための外部SMTPサーバー統合方法を案内します。
sidebar_position: 4
---
# SMTPサーバー統合ガイド
本番環境では、`smtp4dev`のようなローカルテストサーバーではなく、
**外部SMTPサーバー（Gmail、SendGrid、会社SMTPなど）**と接続して
認証メール（登録、パスワードリセットなど）を正常に送信できる必要があります。
このドキュメントでは、SMTPサーバー統合のための環境変数設定と主要な統合事例を案内します。
---
## 1. SMTP関連環境変数
`api`サービスまたは`.env`ファイルに次の環境変数を設定してください：
> **参考**: 認証が不要なSMTPサーバーの場合、`SMTP_USERNAME`と`SMTP_PASSWORD`は省略できます。
| 環境変数 | 説明 | 必須 |
| ------------------------ | ----------------------------------------------- | --------- |
| `SMTP_HOST` | SMTPサーバーアドレス（例：smtp.gmail.com） | 必須 |
| `SMTP_PORT` | ポート番号（通常587、465など） | 必須 |
| `SMTP_SENDER` | 送信者メールアドレス（例：`noreply@yourdomain.com`） | 必須 |
| `SMTP_USERNAME` | SMTP認証ユーザー名（アカウントID） | オプション |
| `SMTP_PASSWORD` | SMTP認証パスワードまたはAPIキー | オプション |
| `SMTP_TLS` | TLS使用有無（`true`または`false`） | オプション |
| `SMTP_CIPHER_SPEC` | TLS暗号化アルゴリズム（デフォルト：`TLSv1.2`） | オプション |
| `SMTP_OPPORTUNISTIC_TLS` | STARTTLS使用有無（`true`または`false`） | オプション |
> **重要**: 実際のコードでは`SMTP_USERNAME`と`SMTP_PASSWORD`が使用され、`SMTP_TLS=true`はポート465に、`false`はポート587に主に使用されます。
---
## 2. Docker環境例
```yaml
api:
image: line/abc-user-feedback-api
environment:
- SMTP_HOST=smtp.gmail.com
- SMTP_PORT=587
- SMTP_USERNAME=your-email@gmail.com
- SMTP_PASSWORD=your-email-app-password
- SMTP_SENDER=noreply@yourdomain.com
- SMTP_TLS=false
- SMTP_OPPORTUNISTIC_TLS=true
```
または`.env`ファイルで分離管理できます：
```env
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USERNAME=your-email@gmail.com
SMTP_PASSWORD=your-email-app-password
SMTP_SENDER=noreply@yourdomain.com
SMTP_TLS=false
SMTP_OPPORTUNISTIC_TLS=true
```
---
## 3. SMTP統合例
### ✅ Gmail SMTP統合（個人テスト用）
- `SMTP_HOST`: `smtp.gmail.com`
- `SMTP_PORT`: `587`
- `SMTP_USERNAME`: Gmailアドレス（例：`abc@gmail.com`）
- `SMTP_PASSWORD`: **アプリパスワード**（安全性の低いアプリを許可 → 非推奨）
- `SMTP_TLS`: `false`
- `SMTP_OPPORTUNISTIC_TLS`: `true`
> Gmailアカウントに**2段階認証**が有効になっている場合、[アプリパスワード](https://myaccount.google.com/apppasswords)を作成する必要があります。
---
### ✅ SendGrid統合（推奨）
- `SMTP_HOST`: `smtp.sendgrid.net`
- `SMTP_PORT`: `587`
- `SMTP_USERNAME`: `apikey`
- `SMTP_PASSWORD`: 実際のSendGrid APIキー
- `SMTP_SENDER`: 確認済み送信者アドレス
- `SMTP_TLS`: `false`
- `SMTP_OPPORTUNISTIC_TLS`: `true`
---
## 4. テスト方法
### 4.1 メール送信テスト
1. **メール認証テスト**：
- 管理者またはユーザーアカウント作成
- メール認証コード送信確認
2. **パスワードリセットテスト**：
- パスワードリセットリクエスト
- リセットリンクが含まれたメール受信確認
3. **ユーザー招待テスト**：
- 管理者が新しいユーザーを招待
- 招待メール送信確認
### 4.2 ログ確認
メール送信失敗時、次のコマンドで詳細ログを確認してください：
```bash
# Docker Compose環境
docker compose logs api
# 特定時間帯のログ確認
docker compose logs --since=10m api
# リアルタイムログモニタリング
docker compose logs -f api
```
SMTPエラーが発生すると、ログに詳細メッセージが表示されます。
---
## 5. トラブルシューティング
| 問題タイプ | 原因または解決方法 |
| -------------------------- | ---------------------------------------- |
| 認証エラー（`535`） | `SMTP_USERNAME` / `SMTP_PASSWORD`再確認 |
| 接続拒否（`ECONNREFUSED`） | ファイアウォールまたは誤ったポート設定 |
| メールが届かない | `SMTP_SENDER`が認証されていない |
| TLSエラー（`ETLS`） | `SMTP_TLS`設定が誤っている |
| STARTTLS失敗 | `SMTP_OPPORTUNISTIC_TLS`設定確認 |
---
## 6. SMTPに関連するメールテンプレート
現在、システムでメールは次の状況で送信されます：
- **メール認証**: 管理者/ユーザー登録時に認証コード送信
- **パスワードリセット**: パスワードリセットリクエスト時にリンク送信
- **ユーザー招待**: 管理者がユーザーを招待するときに招待メール送信
メール内容は**Handlebarsテンプレート**ベースで構成されており、次の情報が含まれます：
- 送信者: `"User feedback" <SMTP_SENDER>`
- 基本URL: `ADMIN_WEB_URL`環境変数値を使用
- テンプレート位置: `src/configs/modules/mailer-config/templates/`
---
## 関連ドキュメント
- [Docker Hubインストールガイド](./docker-hub-images)
- [環境変数設定](./configuration)
- [初期設定ガイド](/ja/user-guide/getting-started)
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/05-configuration.md
+213
View File
@@ -0,0 +1,213 @@
---
id: configuration
title: 環境変数構成
description: ABC User FeedbackのAPIおよびウェブサーバーの環境変数構成方法を説明します。
sidebar_position: 5
---
# 環境変数構成
このドキュメントでは、ABC User Feedbackの**APIサーバー**および**ウェブサーバー**で使用する主要な環境変数と設定方法を説明します。
---
## 1. APIサーバー環境変数
### 必須環境変数
| 環境変数 | 説明 | デフォルト | 例 |
| ---------------------------- | ------------------------- | ---------- | -------------------------------- |
| `JWT_SECRET` | JWT署名用シークレットキー | なし | `jwtsecretjwtsecretjwtsecret` |
| `MYSQL_PRIMARY_URL` | MySQL接続URL | なし | `mysql://user:pass@host:3306/db` |
| `ACCESS_TOKEN_EXPIRED_TIME` | Access Token有効期間 | `10m` | `10m`、`30s`、`1h` |
| `REFRESH_TOKEN_EXPIRED_TIME` | Refresh Token有効期間 | `1h` | `1h`、`7d` |
> JWTシークレットは十分に複雑で安全な文字列を使用する必要があります。
⚠️ **セキュリティ注意事項**：
- `JWT_SECRET`は最低32文字以上の複雑な文字列を使用してください
- 本番環境では絶対にデフォルト値を使用しないでください
- 環境変数ファイル（`.env`）はバージョン管理に含めないでください
- 機密情報は環境変数やシークレット管理システムを通じて管理してください
---
### オプション環境変数
| 環境変数 | 説明 | デフォルト | 例 |
| ---------------------- | ------------------------------------------------- | ----------------------- | --------------------------- |
| `APP_PORT` | APIサーバーポート | `4000` | `4000` |
| `APP_ADDRESS` | バインドアドレス | `0.0.0.0` | `127.0.0.1` |
| `ADMIN_WEB_URL` | 管理者ウェブURL | `http://localhost:3000` | `https://admin.company.com` |
| `BASE_URL` | Swaggerドキュメントで使用するAPIサーバーの公開URL | なし | `https://api.example.com` |
| `MYSQL_SECONDARY_URLS` | セカンダリDB URL（JSON配列） | なし | `["mysql://..."]` |
| `AUTO_MIGRATION` | アプリ起動時のDB自動マイグレーション | `true` | `false` |
| `MASTER_API_KEY` | マスター権限APIキー（オプション） | なし | `abc123xyz` |
| `NODE_OPTIONS` | Node実行オプション | なし | `--max_old_space_size=4096` |
---
### SMTP設定（メール認証）
| 環境変数 | 説明 | 例 |
| ------------------------ | -------------------------------- | ------------------------------ |
| `SMTP_HOST` | SMTPサーバーアドレス | `smtp.gmail.com` |
| `SMTP_PORT` | ポート（通常587または465） | `587` |
| `SMTP_USERNAME` | ログインユーザー | `user@example.com` |
| `SMTP_PASSWORD` | ログインパスワードまたはトークン | `app-password` |
| `SMTP_SENDER` | 送信者アドレス | `noreply@company.com` |
| `SMTP_BASE_URL` | メール内リンク用基本URL | `https://feedback.company.com` |
| `SMTP_TLS` | TLS使用有無 | `true` |
| `SMTP_CIPHER_SPEC` | 暗号化仕様 | `TLSv1.2` |
| `SMTP_OPPORTUNISTIC_TLS` | STARTTLSサポート有無 | `true` |
📎 詳細設定については、[SMTP統合ガイド](./04-smtp-configuration.md)を参照してください。
---
## 2. OpenSearch設定（オプション）
| 環境変数 | 説明 | 例 |
| --------------------- | -------------------- | ----------------------- |
| `OPENSEARCH_USE` | OpenSearch有効化有無 | `true` |
| `OPENSEARCH_NODE` | OpenSearchノードURL | `http://localhost:9200` |
| `OPENSEARCH_USERNAME` | 認証ID | `admin` |
| `OPENSEARCH_PASSWORD` | 認証パスワード | `admin123` |
> OpenSearchは検索速度向上およびAI機能改善に使用されます。
---
## 3. 自動フィードバック削除設定
| 環境変数 | 説明 | デフォルト / 条件 |
| ------------------------------------ | -------------------------------- | ----------------------- |
| `AUTO_FEEDBACK_DELETION_ENABLED` | 古いフィードバック削除機能有効化 | `false` |
| `AUTO_FEEDBACK_DELETION_PERIOD_DAYS` | 削除基準日数 | `365`（有効な場合必須） |
---
## 4. APIログExport設定（オプション）
APIは標準のコンソールログに加えて、OpenTelemetry経由でアプリケーションログをexportできます。
<!-- markdownlint-disable MD060 -->
| 環境変数 | 説明 | デフォルト | 例 |
| ---------------------------------- | ----------------------------------------------------------------- | ---------- | ---------------------------------------------------------- |
| `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` | pino OpenTelemetry transportが使用するOTLP HTTPログエンドポイント | なし | `http://localhost:4319/v1/logs` |
| `OTEL_RESOURCE_ATTRIBUTES` | exportされたログに付与するOpenTelemetry resource attributes | なし | `service.name=abc-user-feedback-api,service.version=1.1.1` |
<!-- markdownlint-enable MD060 -->
> `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` が設定されている場合、APIはpretty consoleログを継続して出力しつつ、同じログを設定されたOTLP HTTPエンドポイントにも送信します。
> `OTEL_RESOURCE_ATTRIBUTES` も設定すると、`service.name` や `service.version` などの標準OpenTelemetryリソースメタデータを、カンマ区切りの `key=value` 形式でログに付与できます。
> ローカル開発環境では `apps/api/.env.example` の例を基準に設定してください。
### ローカル検証手順
- リポジトリルートでローカルOTELテストスタックを起動します。
```bash
docker compose -f docker/docker-compose.otel-test.yml up -d
```
- `apps/api/.env.example` を参考にして、`apps/api/.env` に次の値を設定します。
```env
OTEL_EXPORTER_OTLP_LOGS_ENDPOINT=http://localhost:4319/v1/logs
OTEL_RESOURCE_ATTRIBUTES=service.name=abc-user-feedback-api,service.version=1.1.1
```
> APIアプリケーション自体がこの値を個別にパースするわけではなく、`pino-opentelemetry-transport` と OpenTelemetry SDK が標準環境変数として処理します。
- APIサーバーを起動し、ログが発生するリクエストを送信します。
```bash
pnpm --dir apps/api dev
```
- OpenTelemetryパイプラインがログを受信していることを確認します。
- Vectorはポート `4319` でOTLPログを受信し、変換済みログレコードをコンソールへ出力します。
- OpenSearchにはホストポート `9201` でアクセスできる必要があります。
- OpenSearch Dashboardsには [http://localhost:5602](http://localhost:5602) でアクセスでき、ローカルスタックが作成した `logs-*` インデックスを確認できます。
> ローカルテストスタックは `docker/docker-compose.otel-test.yml` の定義に従い、OTLP HTTP `4319`、OpenSearch `9201`、OpenSearch Dashboards `5602` を使用します。
---
## 5. ウェブサーバー環境変数
### 必須環境変数
| 環境変数 | 説明 | 例 |
| -------------------------- | ----------------------------------------- | ----------------------- |
| `NEXT_PUBLIC_API_BASE_URL` | クライアントで使用するAPIサーバーアドレス | `http://localhost:4000` |
### オプション環境変数
| 環境変数 | 説明 | デフォルト | 例 |
| -------- | -------------------- | ---------- | ------ |
| `PORT` | フロントエンドポート | `3000` | `3000` |
---
## 6. 設定方法
### Docker Compose例
```yaml
services:
api:
image: line/abc-user-feedback-api
environment:
- JWT_SECRET=changeme
- MYSQL_PRIMARY_URL=mysql://user:pass@mysql:3306/userfeedback
- SMTP_HOST=smtp.sendgrid.net
- SMTP_USERNAME=apikey
- SMTP_PASSWORD=your-sendgrid-key
```
### .envファイル例
```env
# apps/api/.env
JWT_SECRET=changemechangemechangeme
MYSQL_PRIMARY_URL=mysql://root:pass@localhost:3306/db
ACCESS_TOKEN_EXPIRED_TIME=10m
REFRESH_TOKEN_EXPIRED_TIME=1h
SMTP_HOST=smtp.example.com
SMTP_SENDER=noreply@example.com
# BASE_URL=https://api.example.com # リバースプロキシの後ろで提供する場合に設定
# apps/web/.env
NEXT_PUBLIC_API_BASE_URL=http://localhost:4000
```
---
## 7. トラブルシューティングガイド
<!-- markdownlint-disable MD060 -->
| 問題 | 原因と解決策 |
| ---------------------- | --------------------------------------------------------------------------------------------------- |
| 環境変数が認識されない | `.env`位置確認またはコンテナ再起動 |
| DB接続失敗 | `MYSQL_PRIMARY_URL`形式または接続情報確認 |
| SMTPエラー | ポート/TLS設定または認証情報再確認 |
| OpenSearchエラー | ノードURLまたはユーザー認証確認 |
| OTELログexport失敗 | `OTEL_EXPORTER_OTLP_LOGS_ENDPOINT` の設定有無、endpoint URL、OTELスタック起動有無を確認してください |
| JWTトークンエラー | `JWT_SECRET`長さおよび複雑性確認 |
| 環境変数検証失敗 | 必須環境変数欠落またはタイプエラー確認 |
| ポート競合 | `APP_PORT`、`PORT`設定確認 |
<!-- markdownlint-enable MD060 -->
---
## 関連ドキュメント
- [Dockerインストールガイド](./docker-hub-images)
- [SMTP統合ガイド](./smtp-configuration)
- [初期設定ガイド](/ja/user-guide/getting-started)
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 1,
"label": "インストール",
"description": "開発環境の設定とインストールガイドです。"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/01-installation/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: インストール
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/02-api-integration.md
+533
View File
@@ -0,0 +1,533 @@
---
sidebar_position: 2
title: "API統合"
description: "ABC User Feedback APIを活用した外部システム統合方法と実際の実装例を案内します。"
---
# API統合
ABC User Feedbackは**RESTful API**を通じて外部システムと統合できます。プログラムでフィードバックを収集し、イシューを管理し、データを照会できるため、既存のサービスやワークフローに簡単に統合できます。
---
## API基本情報
### 公式APIドキュメント
ABC User Feedbackの**完全なAPIドキュメント**は次のリンクで確認できます：
🔗 **[公式APIドキュメント（Redocly）](https://line.github.io/abc-user-feedback/)**
このドキュメントでは、すべてのエンドポイントの詳細な仕様、リクエスト/レスポンス例、実際にテスト可能なインターフェースを提供します。
### Base URL
```
https://your-domain.com/api
```
### 認証方式
すべてのAPIリクエストは**APIキーベースの認証**を使用します。
```http
X-API-KEY: your-api-key-here
Content-Type: application/json
```
:::warning セキュリティ注意事項
APIキーはサーバーサイドでのみ使用し、クライアント（ブラウザ、モバイルアプリ）に公開しないでください。
:::
### APIキー発行方法
1. **管理者ページアクセス**: ABC User Feedback管理者ページにログイン
2. **プロジェクト設定**: 該当プロジェクトの設定ページに移動
3. **APIキー管理**: 「APIキー管理」メニューから新しいAPIキーを生成
4. **キーコピー**: 生成されたAPIキーを安全な場所に保存
:::info APIキー権限
APIキーはプロジェクトごとに発行され、該当プロジェクトのデータにのみアクセスできます。
:::
---
## 主要APIエンドポイント例
### 1. フィードバック作成
#### 基本フィードバック作成
```javascript
const createFeedback = async (
projectId,
channelId,
message,
issueNames = []
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
message: message,
issueNames: issueNames,
}),
}
);
return await response.json();
};
// 使用例
const feedback = await createFeedback(1, 1, "決済エラーが発生しました", [
"決済",
"エラー",
]);
```
### 2. フィードバック照会
#### チャネル別フィードバック検索
```javascript
const searchFeedbacks = async (
projectId,
channelId,
searchText,
limit = 10,
page = 1
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/search`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
limit: limit,
page: page,
query: {
searchText: searchText,
createdAt: {
gte: "2024-01-01",
lt: "2024-12-31",
},
},
sort: {
createdAt: "DESC",
},
}),
}
);
return await response.json();
};
// 使用例
const feedbacks = await searchFeedbacks(1, 1, "決済", 20, 1);
console.log(
`合計${feedbacks.meta.totalItems}件のフィードバック中${feedbacks.items.length}件を照会`
);
```
#### 単一フィードバック照会
```javascript
const getFeedbackById = async (projectId, channelId, feedbackId) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`,
{
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const feedback = await getFeedbackById(1, 1, 123);
console.log("フィードバック詳細:", feedback);
```
#### フィードバック更新
```javascript
const updateFeedback = async (projectId, channelId, feedbackId, updateData) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify(updateData),
}
);
return await response.json();
};
// 使用例
const updatedFeedback = await updateFeedback(1, 1, 123, {
message: "更新されたフィードバック内容",
issueNames: ["更新されたイシュー"],
});
```
#### フィードバック削除
```javascript
const deleteFeedbacks = async (projectId, channelId, feedbackIds) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
feedbackIds: feedbackIds,
}),
}
);
return await response.json();
};
// 使用例
const result = await deleteFeedbacks(1, 1, [123, 124, 125]);
console.log("削除完了:", result);
```
### 3. イシュー管理
#### イシュー作成
```javascript
const createIssue = async (projectId, name, description) => {
const response = await fetch(`/api/projects/${projectId}/issues`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
name: name,
description: description,
}),
});
return await response.json();
};
// 使用例
const issue = await createIssue(
1,
"決済エラー",
"ユーザーが決済過程でエラーを経験"
);
```
#### イシュー検索
```javascript
const searchIssues = async (projectId, query = {}) => {
const response = await fetch(`/api/projects/${projectId}/issues/search`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
limit: 10,
page: 1,
query: query,
sort: {
createdAt: "DESC",
},
}),
});
return await response.json();
};
// 使用例
const issues = await searchIssues(1, { name: "決済" });
```
#### イシュー照会
```javascript
const getIssueById = async (projectId, issueId) => {
const response = await fetch(`/api/projects/${projectId}/issues/${issueId}`, {
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
});
return await response.json();
};
// 使用例
const issue = await getIssueById(1, 123);
console.log("イシュー詳細:", issue);
```
#### イシュー更新
```javascript
const updateIssue = async (projectId, issueId, updateData) => {
const response = await fetch(`/api/projects/${projectId}/issues/${issueId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify(updateData),
});
return await response.json();
};
// 使用例
const updatedIssue = await updateIssue(1, 123, {
name: "更新されたイシュー名",
description: "更新されたイシュー説明",
});
```
#### イシュー削除
```javascript
const deleteIssues = async (projectId, issueIds) => {
const response = await fetch(`/api/projects/${projectId}/issues`, {
method: "DELETE",
headers: {
"Content-Type": "application/json",
"X-API-KEY": "your-api-key-here",
},
body: JSON.stringify({
issueIds: issueIds,
}),
});
return await response.json();
};
// 使用例
const result = await deleteIssues(1, [123, 124, 125]);
console.log("イシュー削除完了:", result);
```
#### フィードバックにイシュー追加
```javascript
const addIssueToFeedback = async (
projectId,
channelId,
feedbackId,
issueId
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}/issues/${issueId}`,
{
method: "POST",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const result = await addIssueToFeedback(1, 1, 123, 456);
console.log("イシュー追加完了:", result);
```
#### フィードバックからイシュー削除
```javascript
const removeIssueFromFeedback = async (
projectId,
channelId,
feedbackId,
issueId
) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/feedbacks/${feedbackId}/issues/${issueId}`,
{
method: "DELETE",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const result = await removeIssueFromFeedback(1, 1, 123, 456);
console.log("イシュー削除完了:", result);
```
### 4. プロジェクトとチャネル情報
#### プロジェクト情報照会
```javascript
const getProjectInfo = async (projectId) => {
const response = await fetch(`/api/projects/${projectId}`, {
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
});
return await response.json();
};
// 使用例
const project = await getProjectInfo(1);
console.log("プロジェクト情報:", project);
```
#### チャネルフィールド照会
```javascript
const getChannelFields = async (projectId, channelId) => {
const response = await fetch(
`/api/projects/${projectId}/channels/${channelId}/fields`,
{
method: "GET",
headers: {
"X-API-KEY": "your-api-key-here",
},
}
);
return await response.json();
};
// 使用例
const fields = await getChannelFields(1, 1);
console.log("チャネルフィールド:", fields);
```
---
## SwaggerによるAPIテスト
ABC User Feedbackは**Swagger UI**を提供して、APIを簡単にテストし理解できます。
### Swaggerアクセス方法
**APIサーバーアドレス + `/docs`**でアクセスします：
```
https://your-domain.com/api/docs
```
または**ReDoc形式**で：
```
https://your-domain.com/api/docs/redoc
```
### SwaggerでのAPIキー設定
1. Swagger UI上部の**"Authorize"**ボタンをクリック
2. **X-API-KEY**フィールドに発行されたAPIキーを入力
3. **"Authorize"**をクリックして認証完了
これ以降、すべてのAPIリクエストで自動的にAPIキーが含まれ、テストできます。
### Swagger活用のヒント
- **"Try it out"**ボタンで実際のAPI呼び出しテスト
- **Response body**セクションで実際のレスポンスデータ構造を確認
- **Schema**タブでリクエスト/レスポンスデータ形式の詳細を確認
- **cURL**コマンドを自動生成してCLIテスト可能
---
## エラー処理と再試行ロジック
### HTTPステータスコード
| ステータスコード | 意味 | 処理方法 |
| --------- | -------------- | ----------------------- |
| **200** | 成功 | 正常処理 |
| **400** | 不正なリクエスト | リクエストデータ検証 |
| **401** | 認証失敗 | APIキー確認 |
| **403** | 権限なし | プロジェクトアクセス権限確認 |
| **404** | リソースなし | ID値確認 |
| **429** | リクエスト制限超過 | しばらくしてから再試行 |
| **500** | サーバーエラー | 再試行またはサポートチームに問い合わせ |
## レスポンスデータ解析方法
### ページネーションレスポンス構造
```json
{
"meta": {
"itemCount": 10,
"totalItems": 100,
"itemsPerPage": 10,
"totalPages": 10,
"currentPage": 1
},
"items": [
{
"id": 1,
"message": "フィードバック内容",
"createdAt": "2024-01-01T00:00:00.000Z",
"issues": [
{
"id": 1,
"name": "イシュー名"
}
]
}
]
}
```
## セキュリティとパフォーマンス最適化
### APIキーセキュリティ
- **環境変数使用**: APIキーを環境変数で管理
- **サーバーサイドのみ**: クライアントにAPIキーを公開しない
- **キーローテーション**: 定期的なAPIキー交換
- **IPホワイトリスト**: 可能な場合は特定IPからのみアクセス許可
### パフォーマンス最適化
- **ページネーション活用**: 大量データ照会時に適切なlimit設定
- **必要なフィールドのみリクエスト**: クエリ最適化でレスポンス速度改善
- **キャッシング戦略**: 頻繁に照会するデータはクライアントサイドキャッシング
- **バッチ処理**: 複数のリクエストをまとめて処理
## 関連ドキュメント
- [APIキー管理](/ja/user-guide/settings/api-key-management) - UIからAPIキーを発行する方法
- [画像設定](/ja/user-guide/settings/image-setting) - 画像アップロードAPI使用のための設定
- [Webhook統合](/ja/user-guide/settings/webhook-management) - APIと一緒に活用できるリアルタイム通知設定
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/03-oauth-integration.md
+172
View File
@@ -0,0 +1,172 @@
---
sidebar_position: 3
title: "OAuth統合"
description: "Google OAuthおよびカスタムOAuthプロバイダーによるシングルサインオン（SSO）統合方法を案内します。"
---
# OAuth統合
ABC User FeedbackでOAuth 2.0ベースのシングルサインオン（SSO）を設定すると、ユーザーは別のアカウント作成なしで既存のアカウント（Google、Microsoft、GitHubなど）でログインできます。これはユーザーの利便性を向上させ、企業環境で統合認証を実装するために不可欠です。
---
## OAuth統合の概要
ABC User FeedbackでサポートされるOAuth方式：
### 1. Google OAuth
- 追加設定なしでデフォルト提供
- Googleアカウントによる簡単なログイン
### 2. カスタムOAuthプロバイダー
- 社内認証システム
- その他のOAuth 2.0/OpenID Connect互換サービス
OAuthを設定すると、既存のメールログインと並行して使用でき、組織ポリシーに応じてOAuthのみを許可するように制限することもできます。
---
## Google OAuth統合設定
### Google Cloud Consoleでの設定
#### 1. Google Cloud Consoleにアクセス
[Google Cloud Console](https://console.cloud.google.com)にアクセスしてプロジェクトを作成するか、既存のプロジェクトを選択します。
#### 2. OAuth 2.0クライアントID作成
1. **APIとサービス > 認証情報**メニューに移動
2. **+ 認証情報を作成 > OAuthクライアントID**を選択
3. アプリケーションタイプを**ウェブアプリケーション**として選択
#### 3. 承認済みリダイレクトURI設定
**承認済みリダイレクトURI**に次のURLを追加します：
```
https://your-domain.com/auth/oauth-callback
```
例：
- `https://feedback.company.com/auth/oauth-callback`
- `http://localhost:3000/auth/oauth-callback`（開発環境）
#### 4. クライアント情報確認
作成完了後、次の情報を確認してコピーしておきます：
- **クライアントID**: `1234567890-abc123def456.apps.googleusercontent.com`
- **クライアントシークレット**: `GOCSPX-abcdef123456`
### ABC User FeedbackでのGoogle OAuth設定
Google OAuthを使用するには、次の手順に従って設定する必要があります：
#### 1. Google OAuth設定有効化
**Settings > Login Management**で：
1. **OAuth2.0 Login**トグルを有効化
2. **Login Button Type**を"Google Login"として選択
3. Google Cloud Consoleで取得した情報を入力：
- **Client ID**: Google Cloud Consoleで作成したクライアントID
- **Client Secret**: Google Cloud Consoleで作成したクライアントシークレット
- **Authorization Code Request URL**: `https://accounts.google.com/o/oauth2/v2/auth`
- **Scope**: `openid email profile`
- **Access Token URL**: `https://oauth2.googleapis.com/token`
- **User Profile Request URL**: `https://www.googleapis.com/oauth2/v2/userinfo`
- **Email Key**: `email`
#### 2. リダイレクトURI登録
Google Cloud Consoleで次のURLを**承認済みリダイレクトURI**に追加：
```
https://your-domain.com/auth/oauth-callback
```
開発環境の場合：
```
http://localhost:3000/auth/oauth-callback
```
---
## カスタムOAuthプロバイダー統合
### 社内認証システム統合
ABC User Feedbackは、企業環境で使用される社内認証システムと統合できます。ほとんどの社内認証システムはOAuth 2.0またはOpenID Connect標準をサポートしているため、標準OAuthフローを通じて統合が可能です。
#### 社内認証システム設定要件
社内認証システムと統合するには、次の情報が必要です：
1. **OAuthクライアント登録**
- クライアントID
- クライアントシークレット
- リダイレクトURI: `https://your-domain.com/auth/oauth-callback`
2. **OAuthエンドポイント情報**
- Authorization URL（認証リクエストURL）
- Token URL（トークン交換URL）
- User Info URL（ユーザー情報照会URL）
3. **権限範囲（Scope）**
- ユーザープロフィール情報アクセス権限
- メールアドレスアクセス権限
#### 一般的な社内認証システム例
| 項目 | 説明 | 社内システム例 |
| ---------------------------------- | ---------------------------------- | ------------------------------------------ |
| **Login Button Type** | ログインボタンタイプ | `CUSTOM` |
| **Login Button Name** | ログインボタンに表示される名前 | `社内アカウントでログイン` |
| **Client ID** | OAuthクライアントID | `company-auth-client-123` |
| **Client Secret** | クライアントシークレット | `company-secret-abc123` |
| **Authorization Code Request URL** | ユーザー認証リクエストURL | `https://auth.company.com/oauth/authorize` |
| **Scope** | リクエストする権限範囲 | `openid email profile` |
| **Access Token URL** | トークンリクエストURL | `https://auth.company.com/oauth/token` |
| **User Profile Request URL** | ユーザー情報照会API | `https://auth.company.com/api/user` |
| **Email Key** | ユーザー情報JSONのメールフィールド名 | `email`または`mail` |
### その他のOAuth 2.0/OpenID Connect互換サービス
ABC User Feedbackは、OAuth 2.0またはOpenID Connect標準に準拠するすべての認証サービスと統合できます。
#### サポート可能なサービスタイプ
- **OpenID Connectプロバイダー**: 標準OpenID Connectプロトコルをサポートするサービス
- **OAuth 2.0プロバイダー**: OAuth 2.0 Authorization Codeフローをサポートするサービス
- **カスタム認証サーバー**: 標準OAuthエンドポイントを提供する自己構築サービス
#### 統合設定方法
**Settings > Login Management**でカスタムOAuthを設定します：
1. **管理者アカウントでログイン**後、**Settings > Login Management**メニューに移動
2. **OAuth2.0 Login**トグルを有効化
3. **Login Button Type**を`CUSTOM`として選択
4. 認証サービスプロバイダーから受け取った情報を入力：
- **Login Button Name**: ログインボタンに表示されるテキスト（例：「社内アカウントでログイン」）
- **Client ID**: OAuthクライアント識別子
- **Client Secret**: クライアント認証シークレット
- **Authorization Code Request URL**: ユーザー認証リクエストURL
- **Scope**: リクエストする権限範囲（スペース区切り、例：「openid email profile」）
- **Access Token URL**: アクセストークンリクエストURL
- **User Profile Request URL**: ユーザープロフィール情報照会URL
- **Email Key**: ユーザー情報JSONのメールフィールド名（例：「email」または「mail」）
---
## 関連ドキュメント
- [ログイン管理](/ja/user-guide/settings/tenant-settings) - UIでOAuthを設定する方法
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/04-webhook-integration.md
+303
View File
@@ -0,0 +1,303 @@
---
sidebar_position: 4
title: 'ウェブフック統合'
description: 'ウェブフックを活用して外部システムとリアルタイム統合する方法と実装例を案内します。'
---
# ウェブフック統合
ウェブフックにより、ABC User Feedbackで発生する主要イベントをリアルタイムで外部システムに配信できます。Slack通知、自動化ワークフロー、カスタム分析システムなどと統合できます。
---
## サポートされるイベントタイプ
ABC User Feedbackでサポートされるイベントは次のとおりです：
### 1. FEEDBACK_CREATION
新しいフィードバックが作成されたときに発生します。
**リクエストヘッダー：**
```
Content-Type: application/json
x-webhook-token: your-secret-token
```
**ペイロード例：**
```json
{
"event": "FEEDBACK_CREATION",
"data": {
"feedback": {
"id": 123,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"message": "ユーザーフィードバック内容",
"userEmail": "user@example.com",
"issues": [
{
"id": 456,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"name": "バグレポート",
"description": "イシュー説明",
"status": "OPEN",
"externalIssueId": "EXT-123",
"feedbackCount": 5
}
]
},
"channel": {
"id": 1,
"name": "ウェブサイトフィードバック"
},
"project": {
"id": 1,
"name": "My Project"
}
}
}
```
### 2. ISSUE_CREATION
新しいイシューが作成されたときに発生します。
**ペイロード例：**
```json
{
"event": "ISSUE_CREATION",
"data": {
"issue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T11:00:00.000Z",
"name": "新しいイシュー",
"description": "イシュー説明",
"status": "OPEN",
"externalIssueId": "EXT-789",
"feedbackCount": 0
},
"project": {
"id": 1,
"name": "My Project"
}
}
}
```
### 3. ISSUE_STATUS_CHANGE
イシューステータスが変更されたときに発生します。
**ペイロード例：**
```json
{
"event": "ISSUE_STATUS_CHANGE",
"data": {
"issue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T12:00:00.000Z",
"name": "イシュー名",
"description": "イシュー説明",
"status": "IN_PROGRESS",
"externalIssueId": "EXT-789",
"feedbackCount": 3
},
"project": {
"id": 1,
"name": "My Project"
},
"previousStatus": "OPEN"
}
}
```
### 4. ISSUE_ADDITION
フィードバックにイシューが追加されたときに発生します。
**ペイロード例：**
```json
{
"event": "ISSUE_ADDITION",
"data": {
"feedback": {
"id": 123,
"createdAt": "2024-01-15T10:30:00.000Z",
"updatedAt": "2024-01-15T10:30:00.000Z",
"message": "ユーザーフィードバック内容",
"issues": [
{
"id": 456,
"name": "既存イシュー",
"status": "OPEN"
},
{
"id": 789,
"name": "新しく追加されたイシュー",
"status": "OPEN"
}
]
},
"channel": {
"id": 1,
"name": "ウェブサイトフィードバック"
},
"project": {
"id": 1,
"name": "My Project"
},
"addedIssue": {
"id": 789,
"createdAt": "2024-01-15T11:00:00.000Z",
"updatedAt": "2024-01-15T11:00:00.000Z",
"name": "新しく追加されたイシュー",
"description": "イシュー説明",
"status": "OPEN",
"externalIssueId": "EXT-456",
"feedbackCount": 1
}
}
}
```
---
## ウェブフック受信サーバー実装
ウェブフックを受信するためのHTTPサーバーを実装する必要があります。サーバーは次の要件を満たす必要があります：
### 基本要件
1. **HTTP POSTリクエスト処理**: ウェブフックはHTTP POSTで送信されます
2. **JSONペイロード解析**: リクエスト本文はJSON形式です
3. **200レスポンスコード返却**: 処理成功時は必ず200ステータスコードで応答
### 実装例（Node.js/Express）
```javascript
const express = require('express');
const app = express();
app.use(express.json());
app.post('/webhook', (req, res) => {
const { event, data } = req.body;
const token = req.headers['x-webhook-token'];
// トークン検証
if (token !== 'your-secret-token') {
return res.status(401).json({ error: 'Unauthorized' });
}
// イベント処理
switch (event) {
case 'FEEDBACK_CREATION':
console.log('新しいフィードバック作成:', data.feedback);
// フィードバック処理ロジック
break;
case 'ISSUE_CREATION':
console.log('新しいイシュー作成:', data.issue);
// イシュー処理ロジック
break;
case 'ISSUE_STATUS_CHANGE':
console.log(
'イシューステータス変更:',
data.issue,
'以前のステータス:',
data.previousStatus,
);
// ステータス変更処理ロジック
break;
case 'ISSUE_ADDITION':
console.log('イシュー追加:', data.addedIssue);
// イシュー追加処理ロジック
break;
}
res.status(200).json({ success: true });
});
app.listen(3000, () => {
console.log('ウェブフックリスナーサーバーがポート3000で実行中です。');
});
```
---
## セキュリティと再試行ポリシー
### セキュリティ考慮事項
- **トークン検証**: `x-webhook-token`ヘッダーを通じてリクエストを検証します
- **HTTPS使用**: 本番環境では必ずHTTPSを使用してください
### 再試行ポリシー
- **自動再試行**: ABC User Feedbackはウェブフック送信失敗時に最大3回まで自動再試行します
- **再試行間隔**: 各再試行は3秒後に実行されます
### エラー処理
- **4xxエラー**: クライアントエラーと見なされ、再試行しません
- **5xxエラー**: サーバーエラーと見なされ、再試行します
- **ネットワークエラー**: 接続失敗時に再試行します
---
## 活用事例
### 1. 自動翻訳
```javascript
// FEEDBACK_CREATIONイベントを受信して自動翻訳
if (event === 'FEEDBACK_CREATION') {
const translatedMessage = await translateText(data.feedback.message);
// 翻訳された内容をフィードバックに更新
await updateFeedback(data.feedback.id, { translatedMessage });
}
```
### 2. 外部チケットシステム統合
```javascript
// ISSUE_CREATIONイベントを受信して外部システムにチケット作成
if (event === 'ISSUE_CREATION') {
const ticketId = await createExternalTicket({
title: data.issue.name,
description: data.issue.description,
priority: 'medium',
});
// 外部チケットIDをイシューに保存
await updateIssue(data.issue.id, { externalIssueId: ticketId });
}
```
### 3. 通知システム統合
```javascript
// ISSUE_STATUS_CHANGEイベントを受信してチームに通知
if (event === 'ISSUE_STATUS_CHANGE') {
await sendSlackNotification({
channel: '#feedback-alerts',
message: `イシュー"${data.issue.name}"のステータスが${data.previousStatus}から${data.issue.status}に変更されました。`,
});
}
```
---
## 関連ドキュメント
- [ウェブフック管理](/ja/user-guide/settings/webhook-management) - UIでウェブフックを設定する方法
- [API統合](./02-api-integration.md) - ウェブフックと一緒に使用できるAPI活用
- [イシュー管理](/ja/user-guide/issue-management) - イシューステータス変更イベントの理解
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/_category_.json
+5
View File
@@ -0,0 +1,5 @@
{
"position": 3,
"label": "開発者ガイド"
}
apps/docs/i18n/ja/docusaurus-plugin-content-docs/current/02-developer-guide/index.md
+7
View File
@@ -0,0 +1,7 @@
---
title: 開発者ガイド
---
import DocCardList from '@theme/DocCardList';
<DocCardList />
apps/docs/i18n/ja/docusaurus-theme-classic/footer.json
+14
View File
@@ -0,0 +1,14 @@
{
"copyright": {
"message": "Copyright © {year} ABC User Feedback.",
"description": "The footer copyright"
},
"link.title.Docs": {
"message": "ドキュメント",
"description": "The title of the footer links column with title=Docs in the footer"
},
"link.title.More": {
"message": "その他",
"description": "The title of the footer links column with title=More in the footer"
}
}
apps/docs/i18n/ja/docusaurus-theme-classic/navbar.json
+18
View File
@@ -0,0 +1,18 @@
{
"title": {
"message": "ABC User Feedback",
"description": "The title in the navbar"
},
"item.label.Docs": {
"message": "ドキュメント",
"description": "Navbar item with label Docs"
},
"item.label.GitHub": {
"message": "GitHub",
"description": "Navbar item with label GitHub"
},
"logo.alt": {
"message": "ロゴ",
"description": "The alt text of navbar logo"
}
}
apps/docs/i18n/ko/code.json
+313
View File
@@ -0,0 +1,313 @@
{
"theme.ErrorPageContent.title": {
"message": "페이지에 오류가 발생하였습니다.",
"description": "The title of the fallback page when the page crashed"
},
"theme.BackToTopButton.buttonAriaLabel": {
"message": "맨 위로 스크롤하기",
"description": "The ARIA label for the back to top button"
},
"theme.blog.archive.title": {
"message": "게시물 목록",
"description": "The page & hero title of the blog archive page"
},
"theme.blog.archive.description": {
"message": "게시물 목록",
"description": "The page & hero description of the blog archive page"
},
"theme.blog.paginator.navAriaLabel": {
"message": "블로그 게시물 목록 탐색",
"description": "The ARIA label for the blog pagination"
},
"theme.blog.paginator.newerEntries": {
"message": "이전 페이지",
"description": "The label used to navigate to the newer blog posts page (previous page)"
},
"theme.blog.paginator.olderEntries": {
"message": "다음 페이지",
"description": "The label used to navigate to the older blog posts page (next page)"
},
"theme.blog.post.paginator.navAriaLabel": {
"message": "블로그 게시물 탐색",
"description": "The ARIA label for the blog posts pagination"
},
"theme.blog.post.paginator.newerPost": {
"message": "이전 게시물",
"description": "The blog post button label to navigate to the newer/previous post"
},
"theme.blog.post.paginator.olderPost": {
"message": "다음 게시물",
"description": "The blog post button label to navigate to the older/next post"
},
"theme.tags.tagsPageLink": {
"message": "모든 태그 보기",
"description": "The label of the link targeting the tag list page"
},
"theme.colorToggle.ariaLabel": {
"message": "어두운 모드와 밝은 모드 전환하기 (현재 {mode})",
"description": "The ARIA label for the navbar color mode toggle"
},
"theme.colorToggle.ariaLabel.mode.dark": {
"message": "어두운 모드",
"description": "The name for the dark color mode"
},
"theme.colorToggle.ariaLabel.mode.light": {
"message": "밝은 모드",
"description": "The name for the light color mode"
},
"theme.docs.DocCard.categoryDescription.plurals": {
"message": "{count} 항목",
"description": "The default description for a category card in the generated index about how many items this category includes"
},
"theme.docs.breadcrumbs.navAriaLabel": {
"message": "탐색 경로",
"description": "The ARIA label for the breadcrumbs"
},
"theme.docs.paginator.navAriaLabel": {
"message": "문서 페이지",
"description": "The ARIA label for the docs pagination"
},
"theme.docs.paginator.previous": {
"message": "이전",
"description": "The label used to navigate to the previous doc"
},
"theme.docs.paginator.next": {
"message": "다음",
"description": "The label used to navigate to the next doc"
},
"theme.docs.tagDocListPageTitle.nDocsTagged": {
"message": "{count}개 문서가",
"description": "Pluralized label for \"{count} docs tagged\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.docs.tagDocListPageTitle": {
"message": "{nDocsTagged} \"{tagName}\" 태그에 분류되었습니다",
"description": "The title of the page for a docs tag"
},
"theme.docs.versionBadge.label": {
"message": "버전: {versionLabel}"
},
"theme.docs.versions.unreleasedVersionLabel": {
"message": "{siteTitle} {versionLabel} 문서는 아직 정식 공개되지 않았습니다.",
"description": "The label used to tell the user that he's browsing an unreleased doc version"
},
"theme.docs.versions.unmaintainedVersionLabel": {
"message": "{siteTitle} {versionLabel} 문서는 더 이상 업데이트되지 않습니다.",
"description": "The label used to tell the user that he's browsing an unmaintained doc version"
},
"theme.docs.versions.latestVersionSuggestionLabel": {
"message": "최신 문서는 {latestVersionLink} ({versionLabel})을 확인하세요.",
"description": "The label used to tell the user to check the latest version"
},
"theme.docs.versions.latestVersionLinkLabel": {
"message": "최신 버전",
"description": "The label used for the latest version suggestion link label"
},
"theme.common.editThisPage": {
"message": "페이지 편집",
"description": "The link label to edit the current page"
},
"theme.common.headingLinkTitle": {
"message": "{heading}에 대한 직접 링크",
"description": "Title for link to heading"
},
"theme.lastUpdated.atDate": {
"message": " {date}에",
"description": "The words used to describe on which date a page has been last updated"
},
"theme.lastUpdated.byUser": {
"message": " {user}가",
"description": "The words used to describe by who the page has been last updated"
},
"theme.lastUpdated.lastUpdatedAtBy": {
"message": "최종 수정: {atDate}{byUser}",
"description": "The sentence used to display when a page has been last updated, and by who"
},
"theme.NotFound.title": {
"message": "페이지를 찾을 수 없습니다.",
"description": "The title of the 404 page"
},
"theme.navbar.mobileVersionsDropdown.label": {
"message": "버전",
"description": "The label for the navbar versions dropdown on mobile view"
},
"theme.tags.tagsListLabel": {
"message": "태그:",
"description": "The label alongside a tag list"
},
"theme.admonition.caution": {
"message": "주의",
"description": "The default label used for the Caution admonition (:::caution)"
},
"theme.admonition.danger": {
"message": "위험",
"description": "The default label used for the Danger admonition (:::danger)"
},
"theme.admonition.info": {
"message": "정보",
"description": "The default label used for the Info admonition (:::info)"
},
"theme.admonition.note": {
"message": "노트",
"description": "The default label used for the Note admonition (:::note)"
},
"theme.admonition.tip": {
"message": "팁",
"description": "The default label used for the Tip admonition (:::tip)"
},
"theme.admonition.warning": {
"message": "경고",
"description": "The default label used for the Warning admonition (:::warning)"
},
"theme.AnnouncementBar.closeButtonAriaLabel": {
"message": "닫기",
"description": "The ARIA label for close button of announcement bar"
},
"theme.blog.sidebar.navAriaLabel": {
"message": "최근 블로그 문서 둘러보기",
"description": "The ARIA label for recent posts in the blog sidebar"
},
"theme.CodeBlock.wordWrapToggle": {
"message": "줄 바꿈 전환",
"description": "The title attribute for toggle word wrapping button of code block lines"
},
"theme.CodeBlock.copied": {
"message": "복사했습니다",
"description": "The copied button label on code blocks"
},
"theme.CodeBlock.copyButtonAriaLabel": {
"message": "클립보드에 코드 복사",
"description": "The ARIA label for copy code blocks button"
},
"theme.CodeBlock.copy": {
"message": "복사",
"description": "The copy button label on code blocks"
},
"theme.DocSidebarItem.expandCategoryAriaLabel": {
"message": "사이드바 분류 '{label}' 펼치기",
"description": "The ARIA label to expand the sidebar category"
},
"theme.DocSidebarItem.collapseCategoryAriaLabel": {
"message": "사이드바 분류 '{label}' 접기",
"description": "The ARIA label to collapse the sidebar category"
},
"theme.NavBar.navAriaLabel": {
"message": "메인",
"description": "The ARIA label for the main navigation"
},
"theme.NotFound.p1": {
"message": "원하는 페이지를 찾을 수 없습니다.",
"description": "The first paragraph of the 404 page"
},
"theme.NotFound.p2": {
"message": "사이트 관리자에게 링크가 깨진 것을 알려주세요.",
"description": "The 2nd paragraph of the 404 page"
},
"theme.TOCCollapsible.toggleButtonLabel": {
"message": "이 페이지에서",
"description": "The label used by the button on the collapsible TOC component"
},
"theme.navbar.mobileLanguageDropdown.label": {
"message": "언어",
"description": "The label for the mobile language switcher dropdown"
},
"theme.blog.post.readMore": {
"message": "자세히 보기",
"description": "The label used in blog post item excerpts to link to full blog posts"
},
"theme.blog.post.readMoreLabel": {
"message": "{title} 에 대해 더 읽어보기",
"description": "The ARIA label for the link to full blog posts from excerpts"
},
"theme.blog.post.readingTime.plurals": {
"message": "약 {readingTime}분",
"description": "Pluralized label for \"{readingTime} min read\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.docs.sidebar.collapseButtonTitle": {
"message": "사이드바 숨기기",
"description": "The title attribute for collapse button of doc sidebar"
},
"theme.docs.sidebar.collapseButtonAriaLabel": {
"message": "사이드바 숨기기",
"description": "The title attribute for collapse button of doc sidebar"
},
"theme.docs.breadcrumbs.home": {
"message": "홈",
"description": "The ARIA label for the home page in the breadcrumbs"
},
"theme.docs.sidebar.navAriaLabel": {
"message": "문서 사이드바",
"description": "The ARIA label for the sidebar navigation"
},
"theme.docs.sidebar.closeSidebarButtonAriaLabel": {
"message": "사이드바 닫기",
"description": "The ARIA label for close button of mobile sidebar"
},
"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel": {
"message": "← 메인 메뉴로 돌아가기",
"description": "The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
},
"theme.docs.sidebar.expandButtonTitle": {
"message": "사이드바 열기",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
},
"theme.docs.sidebar.expandButtonAriaLabel": {
"message": "사이드바 열기",
"description": "The ARIA label and title attribute for expand button of doc sidebar"
},
"theme.docs.sidebar.toggleSidebarButtonAriaLabel": {
"message": "사이드바 펼치거나 접기",
"description": "The ARIA label for hamburger menu button of mobile navigation"
},
"theme.blog.post.plurals": {
"message": "{count}개 게시물",
"description": "Pluralized label for \"{count} posts\". Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
},
"theme.blog.tagTitle": {
"message": "\"{tagName}\" 태그로 연결된 {nPosts}개의 게시물이 있습니다.",
"description": "The title of the page for a blog tag"
},
"theme.blog.author.pageTitle": {
"message": "{authorName} - {nPosts}",
"description": "The title of the page for a blog author"
},
"theme.blog.authorsList.pageTitle": {
"message": "저자",
"description": "The title of the authors page"
},
"theme.blog.authorsList.viewAll": {
"message": "모든 저자 보기",
"description": "The label of the link targeting the blog authors page"
},
"theme.blog.author.noPosts": {
"message": "작성자가 아직 게시글을 작성하지 않았습니다.",
"description": "The text for authors with 0 blog post"
},
"theme.contentVisibility.unlistedBanner.title": {
"message": "색인되지 않은 문서",
"description": "The unlisted content banner title"
},
"theme.contentVisibility.unlistedBanner.message": {
"message": "이 문서는 색인되지 않습니다. 검색 엔진이 이 문서를 색인하지 않으며, 주소를 알고 있는 사용자만 접근할 수 있습니다.",
"description": "The unlisted content banner message"
},
"theme.contentVisibility.draftBanner.title": {
"message": "작성 중인 페이지",
"description": "The draft content banner title"
},
"theme.contentVisibility.draftBanner.message": {
"message": "이 페이지는 아직 작성 중입니다. 개발 환경에서만 보이며 프로덕션 빌드에서는 제외됩니다.",
"description": "The draft content banner message"
},
"theme.ErrorPageContent.tryAgain": {
"message": "다시 시도해 보세요",
"description": "The label of the button to try again rendering when the React error boundary captures an error"
},
"theme.common.skipToMainContent": {
"message": "본문으로 건너뛰기",
"description": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation"
},
"theme.tags.tagsPageTitle": {
"message": "태그",
"description": "The title of the tag list page"
}
}
apps/docs/i18n/ko/docusaurus-plugin-content-docs/current.json
+26
View File
@@ -0,0 +1,26 @@
{
"version.label": {
"message": "Next",
"description": "The label for version current"
},
"sidebar.docs.category.소개": {
"message": "소개",
"description": "The label for category 소개 in sidebar docs"
},
"sidebar.docs.category.사용자 가이드": {
"message": "사용자 가이드",
"description": "The label for category 사용자 가이드 in sidebar docs"
},
"sidebar.docs.category.설정": {
"message": "설정",
"description": "The label for category 설정 in sidebar docs"
},
"sidebar.docs.category.개발자 가이드": {
"message": "개발자 가이드",
"description": "The label for category 개발자 가이드 in sidebar docs"
},
"sidebar.docs.category.설치": {
"message": "설치",
"description": "The label for category 설치 in sidebar docs"
}
}
apps/docs/i18n/ko/docusaurus-theme-classic/footer.json
+6
View File
@@ -0,0 +1,6 @@
{
"copyright": {
"message": "Copyright © 2025 ABC User Feedback.",
"description": "The footer copyright"
}
}
apps/docs/i18n/ko/docusaurus-theme-classic/navbar.json
+18
View File
@@ -0,0 +1,18 @@
{
"title": {
"message": "ABC User Feedback",
"description": "The title in the navbar"
},
"logo.alt": {
"message": "LOGO",
"description": "The alt text of navbar logo"
},
"item.label.Docs": {
"message": "문서",
"description": "Navbar item with label Docs"
},
"item.label.GitHub": {
"message": "GitHub",
"description": "Navbar item with label GitHub"
}
}