クライアントの状態管理と非同期通信の処理のパターンを構造化する
背景
メモしないと頭おかしくなりそうなのでメモ
予め設計しないと実装時に行き当たりばったりになって工数を消耗するのでちゃんと設計する
クライアントの状態管理
code: client-state-management.json
{
"isSignedIn": true, //ログインしているか判断する
"userName": "Yoshisaur", //メッセージに埋め込む
"haveMessagesBeenRead": false, //Messagesで「もう一度話をする」
}
非同期通信の処理のパターン
リスト
実装済み
SignUp (POST=DBのデータに変化+パスワードを送信する)
SignIn(POST=DBのデータに変化、ではないがパスワードを送信する)
FetchUserStatus(GET=DBからデータを取り出すだけ)
FetchMessages(GET=DBからデータを取り出すだけ)
MarkMessagesAsRead(POST=DBのデータに変化)
FetchRandomMessages(GET=DBからデータを取り出すだけ)
FetchDestinationHintImage(GET=DBからデータを取り出すだけ)
FetchLocation(GET=DBからデータを取り出すだけ)
FetchPuzzleProblem(GET=DBからデータを取り出すだけ)
FetchPuzzleImage(GET=DBからデータを取り出すだけ)
CheckIfAnswerIsCorrect(POST=DBのデータに変化)
Fetch360DegreePanorama(GET=DBからデータを取り出すだけ)
Fetch3DModel(GET=DBからデータを取り出すだけ)
詳細
SignUp
メソッド
POST
body
code: body.json
{
"name": "Yoshisaur",
"password": "Password",
}
response
code: response.json
{
"userName": "Yoshisaur",
"haveMessagesBeenRead": "0",
}
ステータスとエラーのパターン
OK(成功)
既に使用されてる名前でサインアップしようとしている
nameが空
nameが無効な文字(空白など)を含む
passwordが空
passwordが無効な文字(空白など)を含む
SignIn
メソッド
POST
body
code: body.json
{
"name": "Yoshisaur",
"password": "Password",
}
response
code: response.json
{
"userName": "Yoshisaur",
"haveMessagesBeenRead": "0",
}
ステータスとエラーのパターン
OK(成功)
名前がnameのユーザーが存在しない
passwordが間違っている
nameが空
nameが無効な文字(空白など)を含む
passwordが空
passwordが無効な文字(空白など)を含む
FetchUserState
メソッド
GET
response
code: response.json
{
"userName": "Yoshisaur",
"haveMessagesBeenRead": "0",
}
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
FetchMessages
メソッド
GET
response
code: response.json
{
"messages":
[
{
"id": 1,
"messageContent": "こんにちは",
"isQuestion": false,
"isLast": false,
"nextId": 2,
"nextIdIfNo": 0,
},
{
"id": 2,
"messageContent": "お願い聞いてくれますか",
"isQuestion": true,
"isLast": false,
"nextId": 5,
"nextIdIfNo": 3,
},
{
"id": 3,
"messageContent": "そこをなんとか",
"isQuestion": false,
"isLast": false,
"nextId": 4,
"nextIdIfNo": 0,
},
{
"id": 4,
"messageContent": "お願いします",
"isQuestion": true,
"isLast": false,
"nextId": 5,
"nextIdIfNo": 3,
},
{
"id": 5,
"messageContent": "ありがとうございます",
"isQuestion": false,
"isLast": true,
"nextId": 0,
"nextIdIfNo": 0,
}
]
}
FetchRandomMessages
メソッド
GET
response
code: response.json
{
"messages":
[
{
"id": 1,
"messageContent": "こんにちは",
"isQuestion": false,
"isLast": false,
"nextId": 2,
"nextIdIfNo": 0,
},
{
"id": 2,
"messageContent": "お願い聞いてくれますか",
"isQuestion": true,
"isLast": false,
"nextId": 5,
"nextIdIfNo": 3,
},
{
"id": 3,
"messageContent": "そこをなんとか",
"isQuestion": false,
"isLast": false,
"nextId": 4,
"nextIdIfNo": 0,
},
{
"id": 4,
"messageContent": "お願いします",
"isQuestion": true,
"isLast": false,
"nextId": 5,
"nextIdIfNo": 3,
},
{
"id": 5,
"messageContent": "ありがとうございます",
"isQuestion": false,
"isLast": true,
"nextId": 0,
"nextIdIfNo": 0,
}
]
}
MarkMessagesAsRead
メソッド
POST
response
なし
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
FetchDestinationHintImage
メソッド
GET
response
画像のバイナリデータ
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
FetchLocation
メソッド
GET
body
code: body.json
{
"latitude": "26.2505097",
"longitude": "127.7648543",
}
response
code: response.json
{
"isDestinationNear": "0",
"latitudeDifference": "1.11",
"latitudeDifference": "-0.11",
}
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
FetchPuzzleProblem
メソッド
GET
response
code: response.json
{
"question": "HogeHogeFugaFuga",
}
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
FetchPuzzleImage
メソッド
GET
response
画像のバイナリデータ
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
CheckIfAnswerIsCorrect
メソッド
POST
ナゾの答えが正しい場合にユーザの情報を変更させるため
response
code: response.json
{
"isAnswerCorrect": "1",
}
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
Fetch360DegreePanorama
メソッド
GET
response
画像のバイナリデータ
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない
Fetch3DModel
メソッド
GET
response
3Dモデルののバイナリデータ
ステータスとエラーのパターン
OK(成功
Cookieがない
JWTが正しくない