目次 - 情報システム開発基礎演習第4回 -

name: index
class: compact
# おしながき - 第4回 www.pyのAPIサーバ化(1) -

<div class=footnote>

(脚注)
課題は、
テキストに仕様と解説があります。
それとワークシートのヒントを頼りに取り組んでください
(C言語のH102組方式)

</div>

1. EL (ITベーシック 第4回と第5回をまとめてGo)
1. 講義:
 [HTMLとCGI](../../review/html-form/) (前回すこし話したけれど、今回は、じっくり)
1. 講義:
 [Web API, RESTful API と JSON](/slides/isd/review/web-api/)
 (を少し)
1. 講義:
 [WWWサーバの管理](/slides/isd/review/www-adm/) ... サーバの起動と停止、コンテンツとwww.pyの編集
 
 - 休憩 -
1. [演習](#practice) (一緒に手を動かす)
 - じゃんけんAPI v1 (復習)
 - じゃんけんAPI v2
 (チャレンジの課題2が何を言いたいのか?を体験)
 - Pythonのdictを使うJSON操作を少し練習 (一緒に手を動かす)
1. [課題の前に少し語ります](#exercises-prep)
1. [課題](#exercises)
 - **課題1(必須**): www.pyを改造して、じゃんけんAPIサーバを作成してください
 **(必須の課題はコレだけ**)
 - 以下は自由課題です。
 課題2(チャレンジ)でもよいし、
 余力のある人は先へ進んでも良いです。
 [第5回のテキスト](http://sysbuild-entrance.fml.org/ja/300_web-api/370_openbd-api/)も[(画像ジャンケンに必要な)AWSでの画像認識の方法](http://sysbuild-entrance.fml.org/ja/900_appendix/aws/services/rekognition/)(<- じつは第11回の内容?)もREADY

- 休憩 or 流れで課題, 確認してもらって流れ解散など -

---
name:  practice
class: compact
# 演習(1) HTMLの復習: ジャンケンAPI v1

- HTMLでCGIを呼び出す復習をします。仕様は次のとおり
 - **呼び出すジャンケンAPIサーバ = `api.fml.org`**
 - ACTIONに書くべきURIは、さんざんcurlで叩いた、あのURIです
 
 **`http://api.fml.org/api/janken/v1`**
 - API側と仕様を合わせてください
 - サーバはCGI経由で`jibun`というキーの値を取得します
 - これをユーザのジャンケンの手として使います
```
<FORM METHOD=... ACTION=...> 
 ...略... 
 ...略... 
</FORM>
```
- 参考文献
 - [HTMLのFORM文](../../review/html-form/#html-form)

---
class: compact
# 演習(2) HTMLの復習: ジャンケンAPI v2

- ジャンケンAPI v2
 - **APIのURIごとに挙動が異なるものを用意してあります**
 - ホームページの一番下に、もうひとつジャンケンを追加してください。
 
 前問の「ジャンケンAPIのFORM文」をコピー＆ペーストすればOK
 - ACTIONのURIを
 **`/v1 -> v2`**
 にして、ジャンケンしてみてください
 
 **`http://api.fml.org/api/janken/v2`**
 
 **この1バイトだけ異なります。あとは前問とまったく一緒のFORM文です**
 - (本日の自由課題(チャレンジ課題)の問題文が何を言いたいか分かったかな?)

```
<FORM ...略... ACTION="...略.../v2">
 ...略...
</FORM>
```

---
class: compact
# 演習(3-A) Pythonのdictを使うJSON操作の練習

- python3のインタラクティブ(repl)モードを起動してください。こういう画面
    - AWS Academyの画面でもOK
    - もちろん自分のEC2でもOK

```
Python 3.7.3 (default, Oct 31 2022, 14:04:00)
[GCC 8.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

- モジュールjsonをimportしてください

```
[実行例]

>>> import json
>>>
```
注意:
このあとは、いちいち`[実行例]`と書きませんが、
あうんの呼吸で読んでください

---
class: compact
# 演習(3-B) Pythonのdictを使うJSON操作の練習

- dict型変数resを用意します。次の値を設定しましょう
    - res = response という想定
    - ジャンケンAPIからの返り値の例になっています

```
>>> res = {"jibun":0,"aite":1,"kekka":2}
>>>
```

- 変数resの内容と型を確認します
    - エラーが出るときは、ソースコードの中で変数の内容と型を確認してください
    - printfデバッグと呼ぶ定番の方法です

```
>>> print(res)
{'jibun': 0, 'aite': 1, 'kekka': 2}
>>> print(type(res))
<class 'dict'>
>>>
```

---
class: compact
# 演習(3-C) Pythonのdictを使うJSON操作の練習

- 変数resの中身を操作しましょう
- キー`jibun`の値を表示

```
>>> print(res["jibun"])
0
>>>
```

- キー`jibun`の値を2で上書きしてください
- 再度、変数resの値を表示して確かに上書きできたことを確認してください

```
>>> res["jibun"] = 2
>>> print(res)
{'jibun': 2, 'aite': 1, 'kekka': 2}
>>>
```

---
class: compact
# 演習(3-D) Pythonのdictを使うJSON操作の練習

<div class=footnote>

(脚注)
<A HREF="https://docs.python.org/ja/3/library/json.html">
jsonモジュール公式ドキュメント
</A>

</div>

- dict型変数resをJSONの文字列に変換します
 - `json.dumps()`を使うと、引数のdict型変数を文字列にして返します
 
 `dumps`は`dump string`の略のはずです
 - 注: `json.dump()`という別の関数もあるので間違えないようにしてください

```
>>> json.dumps(res)
'{"jibun": 2, "aite": 1, "kekka": 2}'
>>> s = json.dumps(res)
>>> print(s)
{"jibun": 2, "aite": 1, "kekka": 2}
>>> print(type(s))
<class 'str'>
```

---
class: compact
# 演習(3-E) Pythonのdictを使うJSON操作の練習

<div class=footnote>

(脚注)
<A HREF="https://docs.python.org/ja/3/library/json.html">
jsonモジュール公式ドキュメント
</A>

</div>

- 文字列型sに変換し、dict型変数rに代入します
 - `json.loads()`を使うと、引数の文字列をdict型変数にして返します
 
 `loads`は`load string`の略のはずです
 - 注: `json.load()`という別の関数もあるので間違えないようにしてください

```
>>> r = json.loads(s)
>>> print(r)
{'jibun': 2, 'aite': 1, 'kekka': 2}
>>> print(type(r))
<class 'dict'>
>>>
```

---
class: compact
# 演習(3-F) Pythonのdictを使うJSON操作の練習

<div class=footnote>

(脚注1)
<A HREF="https://docs.python.org/ja/3/library/json.html">
jsonモジュール公式ドキュメント
</A>
 
(脚注2)
ここまで終わったら少し休憩しましょうかね〜

</div>

- TIPS: デバッグに便利:-)
- 見やすくして表示してみる
    - `json.dumps()`のオプションに`indent`が指定できます。
      これを使うと、見やすくできます。
      たとえば数字でスペースの数を指定できます。
      詳しくは公式ドキュメントを参照

```
>>> s = json.dumps(res, indent=4)
>>> print(s)
{
    "jibun": 2,
    "aite": 1,
    "kekka": 2
}
```

---
name:  exercises-prep
class: compact
# コラム: 課題の前に少し語ってみる

- 次ページ以降とテキストに仕様書があります。それを見て書いてください
 - プログラミングは日本語読解力と論理的思考だ！ということです
 - コーディングがどうとかアルゴリズムの効率がどうとかいうのは、その先です
- 相談先について
 - もちろん、第一は、[テキスト](https://sysbuild-entrance.fml.org/ja/300_web-api/350_janken-api/)と[Python3公式ドキュメント](https://docs.python.org/ja/3/)です。
 必要な情報は全て書いてあります
 
 端から端まで読んでから質問してください(怒)
 
 - あとは Google先生、ChatGPTなどと**相談**してみてください
 **(ウソつかれても知らないっすけどね)**
 - **ChatGPTの回答を我々に質問**するのは厳禁/**減点対象**です
 (いい出典おしえて!が良い利用法)
 	 
 - **良い質問方法**
 
 - エラーメッセージをGoogle先生に聞いてみましたが、よい答えが見つかりません
 - このURLを真似して書いてみましたが、エラーが出ます
	 (まずは、そのエラーメッセージで検索してから聞くように)
 - この**参照先**(のURLなど)の説明がよく分かりません
	 (聞く前に別のURLを探しましょう)
 	
- ついでに、もう少し、いいことを語ってみる -民間企業(経営者目線)の考え方-
 
 - (どんどん早まっていて)、早い企業は3年の秋に内々定、
 4年生のうちに研修(とかバイト=研修もどき)を始めています
 - 先輩社員からみて「おしえてくれくれくん」は不要です。
 初日は大目に見てもらえますが、
 2日目以降の評価は駄々下がりです。
 試用期間が3-6ヶ月あると思うので、
 ずっと教えてクレクレくんなら試用期間でサヨウナラ。
 
 貴重な社員の時間(時給単価も高い=稼ぐ力もある)を新人の教えて君にさくより、
 社員はプロジェクトマネージメントに徹し、
 フリーランスの技術者あつめて何とかします(経営者目線)。
 いい新人なら養成したいけどな〜なかなか見つからない(経営者目線)

---
name: exercises
class: compact
# 課題(1) - 必須課題はコレダケです -

- ジャンケンAPIサーバの仕様
 - 各自のEC2上にジャンケンAPIサーバを作成してください
 
 (ホームページに、下のFORM文のようなジャンケン機能を追加する想定)
 - あとは、いつものジャンケンです(グー, チョキ, パー = 0, 1, 2 など)
 - サーバはJSONでユーザの手、コンピュータの手、勝敗の三つ組の情報を返す
 - [ワークシート](http://api.fml.org/dist/worksheet-isd-04-kadai-01.txt)があります。
 それに沿ってwww.pyを改造してください(合計10行くらい;-)
 - 書くべきコードの各一行ごとにコメントを書いておきました
 - [テキスト](https://sysbuild-entrance.fml.org/ja/300_web-api/350_janken-api/)と[Python3公式ドキュメント](https://docs.python.org/ja/3/)を見てやってください

```
<FROM METHOND=POST ACTION=http://10.20.30.40/api/janken/v1 >
 <INPUT TYPE=text NAME=jibun >
 <INPUT TYPE=submit >
</FORM>
```

注:
いつものように 10.20.30.40 部分は各自のEC2のPublic IPに変更してください

```
[ワークシートをEC2の上にダウンロードするには？]
curl -O http://api.fml.org/dist/worksheet-isd-04-kadai-01.txt
```

---
class: img-right,compact
# 課題(2) - 自由課題、チャレンジ -

<div class=footnote>

(脚注1)
課題(1)が10分で終わりそうなので:-)用意してみました
 
(脚注2)
上の例(右図)はヤリスギです:-)
でも、

必要な解説は、
すべてテキストの
<A HREF="https://sysbuild-entrance.fml.org/ja/900_appendix/aws/services/">
付録
</A>
に書いてあるので、
絵でジャンケンも作れると思うよ〜

わざと一ヶ所だけ書いてないです(けど、それくらいは考えてよ;-)
;
ちなみにfile uploadは第5回に演習(体験)予定
 

6回目でも最終課題ででも、作れたら見せてください

(11-12回目にやることがなくなる? -> 他のAWSの利用法も考える/さらに合体)

</div>

![height320px](/slides/isd/images/awsrkg-janken-example.png)

- 課題1が終わってしまった人は、見ばえを何とかしてみましょう ;-)
 
 - 生JSONってのも何ですからね ;-)
 - まずは、
 もうすこしHTMLで何とかする方法を模索しましょう。
 すてきなHTML5とCSSの書き方はGoogle先生とかに聞いてください
 (うちら専門外なので)
 
- デモ(右の例)の場合、
 APIサーバ側はJSONを返してブラウザ側(HTML)で何とかしています。
 つまりJavaScript(JS)ベースですが、
 みなさんの場合はAPIサーバ側でHTMLを生成した方が楽かな(?)
 
 - 新たにJSを勉強するコストがかかるので、
 JS版がおすすめできるか?は過去の経験と余力しだいです