28 |
29 | ### VS Code から GitHub Codespaces への認証
30 |
31 | VS Code にて、アクティビティーバーからリモートエクスプローラー（図の 1）を選びます。
32 |
33 | 上部のプルダウン（図の 2）から「Codespaces」を選びます。
34 |
35 | 「Sign in to Codespaces」（図の 3）をクリックして、認証を進めます。
36 |
37 | 
38 |
39 | 「Sign in to Codespaces」の代わりに GitHub アカウント ID が表示されていたら完了です。
40 |
41 | 
42 |
43 | ## ハンズオン内容サマリー
44 |
45 | [docs/summary.md](docs/summary.md)
46 |
47 | ## GitHub Codespaces インスタンスの削除の仕方
48 |
49 | ### 方法 1
50 |
51 | VS Code 中のリモートエクスプローラーから、削除したい Codespaces を右クリックして、Delete を選択。
52 |
53 | 
54 |
55 | ### 方法 2
56 |
57 | GitHub のリポジトリページから
58 |
59 | 
60 |
61 | ### 方法 3
62 |
63 | GitHub のヘッダーから、[Codespaces インスタンスの一覧ページ](https://github.com/codespaces)に飛べます。
64 |
65 | 
66 |
--------------------------------------------------------------------------------
/api/app.py:
--------------------------------------------------------------------------------
1 | from typing import cast
2 | from mysql.connector.pooling import MySQLConnectionPool
3 | from flask import Flask, render_template, request
4 |
5 | app = Flask(
6 | __name__,
7 | static_url_path="",
8 | static_folder="../public",
9 | template_folder="../public",
10 | )
11 |
12 | pool = MySQLConnectionPool(host="mysql", user="root", database="main")
13 |
14 |
15 | # index.html
16 | @app.route("/")
17 | def index():
18 | return render_template("index.html")
19 |
20 |
21 | # 未完了のタスクの一覧を表示する
22 | # GET /api/tasks
23 | #
24 | # レスポンスBODY: 未完了のタスク型の配列のJSON
25 | # 例:
26 | # [
27 | # {
28 | # "id": 2,
29 | # "content": "VS Code に Python 拡張機能のインストール",
30 | # "completed": false
31 | # },
32 | # {
33 | # "id": 3,
34 | # "content": "GitHub Codespaces の体験 ",
35 | # "completed": false
36 | # }
37 | # ]
38 | @app.route("/api/tasks", methods=["GET"])
39 | def show_remained_tasks():
40 | records = []
41 | with pool.get_connection() as conn:
42 | with conn.cursor() as cursor:
43 | sql = """
44 | SELECT
45 | id,
46 | content,
47 | completed
48 | FROM tasks
49 | WHERE
50 | completed = 0
51 | """
52 | cursor.execute(sql)
53 | for record_tuple in cursor:
54 | # (id, "タスクの内容", false) の形のタプルとしてとれる
55 | # JSON に変換できるように、dict 型にする
56 | records.append(
57 | {
58 | "id": record_tuple[0],
59 | "content": record_tuple[1],
60 | "completed": record_tuple[2] == 1,
61 | }
62 | )
63 |
64 | # dict 型の配列を返す
65 | return records
66 |
67 |
68 | # タスクを登録する
69 | # POST /api/tasks
70 | #
71 | # リクエストBODY: 1 つのタスクを示すJSON。ただし、idと、completedは未入力。
72 | # 例:
73 | # {"content": "VS Code の 更新"}
74 | #
75 | # レスポンスBODY: 登録された1つのタスクを示すJSON
76 | # 例:
77 | # {
78 | # "id": 4,
79 | # "content": "VS Code の 更新",
80 | # "completed": false
81 | # }
82 | @app.route("/api/tasks", methods=["POST"])
83 | def append_task():
84 | request_param = cast(dict, request.get_json())
85 | with pool.get_connection() as conn:
86 | with conn.cursor() as cursor:
87 | content = request_param["content"]
88 | sql = """
89 | INSERT INTO tasks
90 | (
91 | content,
92 | completed
93 | )
94 | VALUES
95 | (
96 | %s,
97 | %s
98 | )
99 | """
100 | cursor.execute(sql, (content, False))
101 |
102 | # DB で INSERT クエリで振られる id
103 | new_id = cursor.lastrowid
104 | conn.commit()
105 |
106 | # 登録できたタスクの内容を返す
107 | return {
108 | "id": new_id,
109 | "content": content,
110 | "completed": False,
111 | }
112 |
113 |
114 | # タスクを完了にする
115 | # POST /api/tasks/<タスクのID>/done
116 | #
117 | # リクエストBODY: なし
118 | #
119 | # レスポンスBODY: 登録された1つのタスクを示すJSON
120 | # 例:
121 | # {
122 | # "id": 3,
123 | # "content": "GitHub Codespaces の体験 ",
124 | # "completed": true
125 | # }
126 | @app.route("/api/tasks/${task.content}
29 | 30 |