### ■ Chat

* create 押すと、chat 追加できます。

* create画面で、name を入力

***
### ■  Chat リスト

* 作成した。chatをクリックします

* 各chatが、開けます

![img](https://img-static-kuc.netlify.app/img/js-front1/chat/ss-chat0129a.png)

* メンバー参加方法は、開いたChatのURLを、メール等で連絡する、
　　又は、Chat リスト画面、で作成したchat名を検索して頂きます。

***
### chat 詳細

* 上部の入力欄に、メッセージ入力し。Post押します

* 各投稿の、[More] ボタンを押すと詳細を開く事が可能です。

* 詳細モーダルで、reply(返信)が可能です。


Chat 操作説明

# Setup, express-API

```
npm install
```

* .env:  set password, host , dbname

```
POSTGRES_DATABASE="chat"
POSTGRES_USER="__USER__"
POSTGRES_PASSWORD="__PASSWORD__"
POSTGRES_HOST="__DBHOST__"
POSTGRES_PORT=5432
```
*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名

***
* migrate

https://gist.github.com/kuc-arc-f/79fc7be9a275d7e695bda51580665035

* prisma install等は省略します。
* 別フォルダで良いので prisma追加し。schema.prisma設置します

```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, chat next.js

```
npm install
```


***
### Setup , etc


***
* next.config.js , 

* MY_API_URL : 設置したbackend　ドメインのエンドポイント


```
MY_API_URL : "http://localhost:4000",
```

***
### Start server
* dev-start :

```
yarn dev
```

***
### Start server
* dev-start :

```
yarn dev
```

* start

```
yarn build

yarn start
```


Chat Setup 


* 下記の Gitで公開しております。サーバーレス構成も可能です

* frontend

https://github.com/kuc-arc-f/nextjs12_18chat

* backend (express + postgres)

https://github.com/kuc-arc-f/express_api_12chat

***
### 構成
* db: postgres

* front : next.js 12

* backend: express

***
### ■ 補足

* 参考に設置場所の、テスト環境を記載しておきます。

* DB: postgres: tokyo リージョン(supabase)

* front /nextjs : tokyo リージョン(vercel hobby)

* backend: tokyo リージョン(vercel hobby)

***


Chat Download

### ■ Project

* create 押すと、プロジェクト追加できます。

* create画面で、name を入力

***
### ■  タスク一覧画面

![img](https://img-static-kuc.netlify.app/img/task_group/ss-taskList-0424.png)

* Project 画面の各タイトルを押すと。タスク一覧が開けます

* 招待されてないメンバーは、開けません

* プロジェクトにメンバー招待する場合、プロジェクト画面> 上段右 Inviteコード(ex: Invite: 3225)　をメモ

* 開いているプロジェクト画面URL, 招待コード(Invite)を、追加者にメール等で連絡下さい

* 参加者は、Invite画面(プロジェクトへの承認)で、Inviteコードを入力すると。プロジェクト参加できます

* Export押すと、excelファイルを出力できます

* create 押すと、タスク追加できます。


***
### ■ タスク 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除 が可能です

* statusを変更すると、タスク工程が変更できます

* 完成予定(Scheduled Complete) 変更できます

![img](https://img-static-kuc.netlify.app/img/task_group/ss-taskEdit-0423.png)

***
### ■ タスク 詳細

![img](https://img-static-kuc.netlify.app/img/task_group/ss-taskShow-0423.png)

***
### ■ メンバー招待 (Invite)

* 招待されるメンバーが、招待コード(Invite) を入力、参加できます

![img](https://img-static-kuc.netlify.app/img/task_group/ss-taskInvite-0423.png)

***
### Excel出力

* タスク一覧の、[Export]　を押すと、excelファイル出力できます。

![img](https://img-static-kuc.netlify.app/img/task_group/ss-taskXlxs-0423b.png)


task_group 操作説明

# Setup, apollo_task

```
npm install
```

* .env:  set password, host , dbname

*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名
```
DATABASE_URL="postgresql://postgres:__PASS__@__HOST__.supabase.co:5432/dbname"
```

* マイグレーション


```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, task_group

```
npm install
```


***
### Setup , etc

* firebase 設定

* firebase > プロジェクト選択 > プロジェクトの概要 > プロジェクトの設定

* Firebase を初期化の、keyコード をコピーしておきます。

***
* next.config.js , 

* APOLLO_SV_URI : 設置したbackend　ドメインのエンドポイント

* firebase設定

先頭がREACT_APP_FIREBASEの変数を、上記のfirebase画面のコードを埋めます

```
APOLLO_SV_URI: "http://localhost:4000/graphql",

REACT_APP_FIREBASE_API_KEY: "",
REACT_APP_FIREBASE_AUTH_DOMAIN: "",
REACT_APP_FIREBASE_PROJECT_ID: "",
REACT_APP_FIREBASE_STORAGE_BUCKET: "",
REACT_APP_FIREBASE_MESSAGE_SENDER_ID: "",
REACT_APP_FIREBASE_APP_ID: "",

```

***
### Start server
* Start :

```
yarn dev
```

task_group Setup 

* 下記の Gitで公開しております。サーバーレス構成も可能です

* frontend

https://github.com/kuc-arc-f/task_group

* backend (apollo-server)

https://github.com/kuc-arc-f/apollo_task

***
### 構成
* db: postgres

* front : next.js 12

* backend: apollo-server (apollo-server-express)

***
### ■ 補足

* 参考に設置場所の、テスト環境を記載しておきます。

* DB: postgres: us-east リージョン(supabase)

* front /nextjs :us-east-1 リージョン(vercel hobby)

* backend /apollo-serve :us-east-1 リージョン(vercel hobby)


task_group Download

### 準備

* siteId　: site 選択 > post画面上段にsiteIdをメモします (ex: siteId : 3)


***
### ■ Post query

* post list query
````
query {
  posts(siteId: 2) {
    id
    title
    content
    categoryId
    createdAt    
  }
}
````

* post: 1 record
```
query {
  post(id: 2) {
    id
    title
    content
    categoryId
    createdAt
  }
}
```

***
### ■ Page query

* page list

```
query {
  pages(siteId: 2) {
    id
    title
    content
    createdAt    
  }
}

```

* page 1 record
```
query {
  page(id: 2) {
    id
    title
    content
    createdAt
  }
}
```
***
### ■ Category query

* category list

```
query {
  categories(siteId: 2) {
    id
    name
    createdAt    
  }
}
```

headless-4  GraphQL sample

### ■ Site

* 複数サイト分、登録可能です

* create 押すと、site(サイト)追加できます。

* create画面で、name を入力

***
### ■  Post(投稿)　データ

![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-1index.png)

* create 押すと、追加できます。

* create画面で、title, content(本文) を入力

* contentは、MD形式(markdown)を、推奨としています。

* categoryを指定しない場合、未入力で問題ありません

* [create]押すと、保存できます

***
### ■ Post Edit/ 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除 が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-2edit.png)

***
### ■ Page (固定ページ)

![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-3page.png)

* Postと同様、タイトル、本文が入力可能です

headless-4 操作説明

# Setup, apollo_cms1

```
npm install
```

* .env:  set password, host , dbname

*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名
```
DATABASE_URL="postgresql://postgres:__PASS__@__HOST__.supabase.co:5432/dbname"
```

* マイグレーション


```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, headless-4

```
npm install
```


***
### Setup , etc

* firebase 設定

* firebase > プロジェクト選択 > プロジェクトの概要 > プロジェクトの設定

* Firebase を初期化の、keyコード をコピーしておきます。

***
* next.config.js , 

* APOLLO_SV_URI : 設置したbackend　ドメインのエンドポイント

* firebase設定

先頭がREACT_APP_FIREBASEの変数を、上記のfirebase画面のコードを埋めます

```
APOLLO_SV_URI: "http://localhost:4000/graphql",

REACT_APP_FIREBASE_API_KEY: "",
REACT_APP_FIREBASE_AUTH_DOMAIN: "",
REACT_APP_FIREBASE_PROJECT_ID: "",
REACT_APP_FIREBASE_STORAGE_BUCKET: "",
REACT_APP_FIREBASE_MESSAGE_SENDER_ID: "",
REACT_APP_FIREBASE_APP_ID: "",

```

***
### Start server
* Start :

```
yarn dev
```

headless-4 Setup

* 下記の Gitで公開しております。サーバーレス構成も可能です

* frontend

https://github.com/kuc-arc-f/headless-4

* backend

https://github.com/kuc-arc-f/apollo_cms1

***
### 構成
* db: postgres

* front : next.js 12

* backend: apollo-server (apollo-server-express)

***
### ■ 補足

* 参考に設置場所の、テスト環境を記載しておきます。

* DB: postgres: us-east リージョン(supabase)

* front /nextjs :us-east-1 リージョン(vercel hobby)

* backend /apollo-serve :us-east-1 リージョン(vercel hobby)


headless-4 download

Javeascript フロント製作事例、2022年度版

js_front1

bookmark

todo

measure

Memo

headless-4

task_group

chat


***
* JSフロント作例の記事を公開しております。
* コンテンツは、追加予定です。


bookmark - 操作手順

# Setup, apollo_sv1

```
npm install
```

* .env:  set password, host , dbname

*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名
```
DATABASE_URL="postgresql://postgres:__PASS__@__HOST__.supabase.co:5432/dbname"
```

* マイグレーション


```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, js_front1

```
npm install
```


***
### Setup , etc

* firebase 設定

* firebase > プロジェクト選択 > プロジェクトの概要 > プロジェクトの設定

* Firebase を初期化の、keyコード をコピーしておきます。

***
* next.config.js , 

* APOLLO_SV_URI : 設置したbackend　ドメインのエンドポイント

* firebase設定

先頭がREACT_APP_FIREBASEの変数を、上記のfirebase画面のコードを埋めます

```
APOLLO_SV_URI: "http://localhost:4000/graphql",

REACT_APP_FIREBASE_API_KEY: "",
REACT_APP_FIREBASE_AUTH_DOMAIN: "",
REACT_APP_FIREBASE_PROJECT_ID: "",
REACT_APP_FIREBASE_STORAGE_BUCKET: "",
REACT_APP_FIREBASE_MESSAGE_SENDER_ID: "",
REACT_APP_FIREBASE_APP_ID: "",

```

***
### Start server
* Start :

```
yarn dev
```

bookmark - 初期設定

### ■ Todo 一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-2list.png)

* create 押すと、追加できます。

* create画面で、title/タイトル, URL を入力

* contentは、MD形式(markdown)を、推奨としています。

* [create]押すと、保存できます

***
### ■ xlsx 出力(Excel)

* 一覧の、[xls Export]を押すと、入力したtodoの、xlsxファイル出力が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-3.png)

***
### ■ Show/ 詳細ページ

* 一覧の、タイトルのリンクを押すと、詳細画面が開きます。

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-4show.png)

***
### ■ Edit/ 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除、完了登録が可能です

* 完了登録は、[complete]押すと、完了状態になります。

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-1.png)



Todo - 操作手順

### ■ 一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407c-list.png)

* create 押すと、追加できます。

* create画面で、数値 を入力

* [save]押すと、保存できます

* [edit]押すと、編集、削除が可能です。

* 月を移動する場合、月入力欄の左右の。矢印を押すと。先月、次月に移動できます


***
### ■ グラフ表示

* [Chart] を押すと、グラフ画面が」開きます

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407b-chart.png)


***
### ■ xlsx 出力(Excel)

* 一覧の、[xls Export]を押すと、入力した値の、xlsxファイル出力が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407report.png)


Measure - 操作手順

### ■  一覧

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-2list.png)

* create 押すと、追加できます。

* create画面で、title, content(本文) を入力

* contentは、MD形式(markdown)を、推奨としています。

* [create]押すと、保存できます

***
### ■ Show/ 詳細ページ

* 一覧の、タイトルのリンクを押すと、詳細画面が開きます。

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-1show.png)

***
### ■ Edit/ 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除 が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-2edit.png)


Memo - 操作手順

***
JSフロント作例 のページを追加しました

* 製作事例を、追加予定です。


About

# 概要

* ブックマーク管理のツールになります。

* パッケージ版で。クラウド等に設置する必要があります。

![img](https://img-static-kuc.netlify.app/img/js-front1/ss-bm-0402a3list.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/pages/20220402150708

***
### 構成
* db: postgres

* front : next.js 12

* backend: apollo-server (apollo-server-express)

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20220402131400

***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20220402131443



* 下記の Gitで公開しております。

* front

https://github.com/kuc-arc-f/js_front1

* backend

https://github.com/kuc-arc-f/apollo_sv1

***
### 構成
* db: postgres

* front : next.js 12

* backend: apollo-server (apollo-server-express)

***
### ■ 補足

* 参考に設置場所の、テスト環境を記載しておきます。

* DB: postgres: us-east リージョン(supabase)

* front /nextjs :us-east-1 (vercel hobby)

* backend /apollo-serve :us-east-1 (vercel hobby)


download

# 概要

* Todoの機能になります

* xlsxファイルの出力が可能です。

* Todo(進行中) / complete(完了)　を、タブ選択で表示できます。

![img](https://img-static-kuc.netlify.app/img/js-front1/todo/ss-todo-2list.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/pages/20220402150708

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20220406084407

***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20220402131443



Todo

# 概要

* 計測値の管理ツールになります。

* 測定している値(例：体温、心拍数、体重など)を、入力して保存できます

* 線グラフ表示が、可能です

* xlsx(Excel)ファイルの、出力が可能です

* パッケージ版で。クラウド等に設置する必要があります。

![img](https://img-static-kuc.netlify.app/img/js-front1/measure/ss-mdat-0407b-chart.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/pages/20220402150708

***
### 構成
* db: postgres

* front : next.js 12

* backend: apollo-server (apollo-server-express)

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20220407183651

***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20220402131443


Measure

# 概要

* Markdown対応のmemo ツールとなります。

* 一覧で、タイトル検索が可能です。

![img](https://img-static-kuc.netlify.app/img/js-front1/memo/ss-memo-1show.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/pages/20220402150708

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20220411090525

***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20220402131443



# 概要

* 簡易版 headless CMSとなります

* Post(投稿) Page(固定ページ)の登録等が可能です。

* パッケージ版で。クラウド等に設置する必要があります。

***
![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-1index.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/posts/20220414094424

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20220414095442

***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20220414094718

***
### ■ GraphQL sample

https://cms-kuc-js-front1.pages.dev/posts/20220414170024

***

# 概要

* タスク管理 ツールとなります。

* メンバー内で共有可能、個人での利用も可能です。

* プロジェクトにメンバーを追加する場合、招待コード(InviteCode)をメンバーから送付する必要があります。

![img](https://img-static-kuc.netlify.app/img/task_group/ss-taskList-0423.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/posts/20220423094855

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20220423100659


***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20220423095135


# 概要

* chat/チャットのアプリになります

* 自動更新はPULL式で、タイマー間隔(30秒程)を指定して。新着の投稿を受信する形になります。

* オープン式チャットで、チャットURLをメール等で。参加メンバーに送信して開始する方式になります。


***
![img](https://img-static-kuc.netlify.app/img/js-front1/chat/ss-chat0129a.png)

![img](https://img-static-kuc.netlify.app/img/js-front1/chat/ss-chat0129b.png)

***
### ■ Download

https://cms-kuc-js-front1.pages.dev/posts/20221029094714

***
### ■ 操作手順

https://cms-kuc-js-front1.pages.dev/posts/20221029115359

***
### ■ 初期設定

https://cms-kuc-js-front1.pages.dev/posts/20221029100252

***
### 関連ブログ

* Next.js で、chat(チャット)を作る

https://zenn.dev/knaka0209/articles/c5b90d4d9b6df2


js_front1

js_front1

Pages

Category

Posts

Chat 操作説明

Chat Setup

Chat Download

task_group 操作説明

task_group Setup

task_group Download

headless-4 GraphQL sample

headless-4 操作説明

headless-4 Setup

headless-4 download