ワークシート_ステップ式ショッピングカートの作成

class: title, smokescreen, shelf, no-footer
# <small>ワークシート<br>ステップ式ショッピングカートの作成</small>

---
class: compact
# <small>【復習】ワークシートを解きながら【コース】</small>

<small>
- ワークシートを解きながら
    - 全3回(#12, #13, #14)

- 宿題
    - ワークシートを見せてください
    - わからないところはメディコンさんに相談してください
</small>

---
class: title, smokescreen, shelf, no-footer
# <small>ステップ1: Web APIサーバが情報を受けとるまで</small>

---
class: col-2,compact
# <small>課題110: 学食</small>

<div class=footnote>
<small><small>
(脚注)
最初は、
セイコーマートとかスーパーマーケットをネタにしようと思ったのですが、
いまどきは自分で商品をレジに持っていくから、
少し違うモデルになりますよねぇ。
</small></small>
</div>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: 日常の例を考えます。
   みなさんは、今、学食で「日替わり定食A」を注文しようとしています
   (注: 「日替わり定食A」なので、すでに調理済みのおかずは目の前に並んでいます)。
   図の(1)(2)(3)は何に該当しますか？
   該当するモノが無いなら無いと解答してください

```

(1)

(2)

(3)

```

</small>

---
class: compact,col-2
# <small>解説110: 学食「日替わり」</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: サーバクライアントモデルは日常の例え話と同じです。
   (1)(2)(3)は学食なら次のように考えられます

```

(1) チケットを渡す(リクエスト)

(2) なし

(3) 料理を渡される

```
- ちなみに「盛り付けは、あくまでも別作業だ！別枠だ！」と考えるなら
  「(2)盛り付ける」を追加してあっても正解でしょう

---
class: col-2,compact
# <small>課題120: 学食「うどん」</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: 別メニューの例。
   みなさんは、今、学食で「うどん」を注文しようとしています。
   チケットを受け取った人は、
   (後ろの)うどんをゆでる担当者に伝えて
   うどんをゆで始めました。
   図の(1)(2)(3)は何に該当しますか？
   該当するモノが無いなら無いと解答してください

```

(1)

(2)

(3)

```

</small>

---
class: compact,col-2
# <small>解説120: 学食「うどん」</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: サーバクライアントモデルは日常の例え話と同じです。
   (1)(2)(3)は学食なら次のように考えられます

```

(1) チケットを渡す(リクエスト)

(2) うどんを茹でる係に依頼する。
     係は茹で上がったら給仕にうどんを渡す

(3) 料理を渡される

```

---
class: col-2,compact
# <small>課題130: 学食「うどん」詳細</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: 課題120「うどん」の(2)の部分の詳細を答えてください

```

(2の下向き矢印)

(2の上向き矢印)

```

</small>

---
class: compact,col-2
# <small>解説130: 学食「うどん」詳細</small>

<div class=footnote>
<small><small>
(脚注)
学食の場合、給仕役の人は何て呼ぶのが正しいので背負うね？フロントの人かな?
</small></small>
</div>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: サーバクライアントモデルは日常の例え話と同じです。
   (1)(2)(3)は学食なら次のように考えられます

```

(2の下向き矢印)
   ゆでる係への指示
   (a)チケットを渡す
   (b)口頭で指示

(2の上向き矢印)
   うどんを(給仕へ)渡す

```

---
class: col-2,compact
# <small>課題210: じゃんけん(概念図)</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
<small>
Q: じゃんけんWeb APIサーバの場合、どのような情報がやりとりされるか？を書いてください。
   該当するモノが無いなら無いと解答してください
- 仕様:
  じゃんけんは「ぐー=0, ちょき=1, ぱー=2」と数値で表現します。
  返事として、勝敗の結果が0〜2のいづれかで返ってくるものとします

```
 (0a) 注文票はどこにある？
 (0b) 給仕はどこにいる？

(1)

(2)
   (2の下向き矢印)
   (2の上向き矢印)

(3)
 
```

</small>
</small>

---
class: compact,col-2
# <small>解説210: じゃんけん(概念図)</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
A:

```
 (0a) 注文票 https://api.fml.org/janken-simple.html
 (0b) 給仕   https://api.fml.org/api/janken/v1

(1) 「変数janken、その値0」の情報
     - HTMLのFORM文で指定した情報

(2) じゃんけん Web APIサーバ
   (2の下向き矢印) 「変数janken、その値0」の情報
   (2の上向き矢印) 勝敗の結果 0 or 1 or 2

(3) 勝敗の結果 0 or 1 or 2

```

---
class: col-2,compact
# <small>図の(2)の実体; www.py じゃんけん簡易版</small>

<small>

```
   # Exercise Template: Janken program web version
   # - hint: kekka = (3 + jibun - aite) % 3
   # - return value: STRING
   def janken(self,form):
      jibun = int(form["jibun"].value)
      aite  = 2
      kekka = (3 + jibun - aite) % 3
      msg   = str(kekka)
      return msg
```

- 注: 学籍番号は各自のものに差し替えること
- `http://b2902900.cloud.fml.org/janken.html`で、
  <br>
  自分の手を入力して送信をクリックします
- `http://b2902900.cloud.fml.org/api/janken/v1`で、
  <br>
  ジャンケンWeb APIサーバが動いています
    - ここに、ジャンケンの手(0 or 1 or 2)を送信すると、結果(0 or 1 or 2)が表示されます

</small>

---
class: col-2,compact
# <small>課題220: じゃんけん</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
Q: 前頁のURLとソースコードの該当する部分を適切に当てはめなさい。
   該当するモノが無いなら無いと解答してください

```
 (0a) 注文票はどこにある？
 (0b) 給仕はどこにいる？
 
 (1)

(2) Pythonのネットワークライブラリとdo_POST関数
   (2の下向き矢印) 
   (2の上向き矢印)

(3)

```

</small>

---
class: compact,col-2
# <small>解説220: じゃんけん</small>

<small>

![height400px](images/server-client-mental-model.png)

<wbr>
```
 (0a) 注文票 https://api.fml.org/janken-simple.html
 (0b) 給仕   https://api.fml.org/api/janken/v1

(1) なし

(2) Pythonのネットワークライブラリとdo_POST関数
   (2の下向き矢印) 変数jibun (への値の代入)
           値は int(form["jibun"].value)
   (2の上向き矢印) 変数msg (を return する)

(3) なし

```

---
class: col-2,compact
# <small>仕様390: カートの場合 (1 of 3)</small>

<div class=footnote>
<small><small>
(脚注)
cart.htmlとwww.pyの入手方法は第11回のスライドを参照
</small></small>
</div>

![height400px](images/server-client-mental-model.png)

<small>

【課題390の仕様】

- 注: 学籍番号は各自のものに差し替えること
- `http://b2902900.cloud.fml.org/cart.html`で、
  <br>
  商品と数量を入力して送信(buy)をクリック
- `http://b2902900.cloud.fml.org/api/cart/v1`で、
  <br>
  ショッピングカートWeb APIサーバが動作
     - 各自でwww.pyのcart関数を改造
     - 各自のEC2でwww.py(Web APIサーバ)を起動

</small>

---
class: col-2,compact
# <small>仕様390: カートの場合 (1 of 3)</small>

<div class=footnote>
<small><small>
(脚注)
cart.htmlとwww.pyの入手方法は第11回のスライドを参照
</small></small>
</div>

<small>

【課題390の補足】注文票の話

注文票に相当するcart.htmlも適切に書き換える必要があります。
以下は配布されているcart.htmlです。もちろん、このままでは最終課題は動作しません

```
<P> SHOPPING CART
<form method="POST" action="http://api.fml.org/api/lsform/v1">
  <P>item-01 =    <input name="item-01"  type="text">
    
  <P>item-02 =    <input name="item-02"  type="text">
    
  <P>item-03 =    <input name="item-03"  type="text">
    
  <P>
  <input type="submit" value="buy">
</form>

〜以下，略〜
```

</small>

---
class: col-2,compact
# <small>仕様390: カートの場合 (1 of 3)</small>

<div class=footnote>
<small><small>
(脚注)
cart.htmlとwww.pyの入手方法は第11回のスライドを参照
</small></small>
</div>

<small>

【課題390の補足】Web APIサーバ側の話

```
   # Exercise Template: the simplest shopping cart
   # - return value: STRING
   def cart(self,form):
      # (1) INPUT
      user_id = "b2xxyyyy"
      session = self._get_session_cookie()
      # (1A)

以下は次回以降   
```

わからないときは、
デバッグの基本中の基本いわゆるprintfデバッグを、ひたすらくりかえしなさい。
具体的には、
コメント`# (1A)`行以降で、
Web APIサーバが受け取る情報を表示してみてください

</small>

---
class: col-2,compact
# <small>課題390: カートの場合 (1 of 3)</small>

<small>

【課題390】

前頁の仕様にそって、以下の課題390(Q1,Q2)に答えなさい。
<B>
課題は見せてください。
授業終了後はメディアコンサルタントに見てもらってください。
なお、(これは、すでに最終課題なので)答え合わせはありません。
次回は、課題390が出来ていることを前提に次の部分(キャッシュの部分)に進みます。
</B>

Q1: 前頁のURLとソースコードの該当する部分を適切に当てはめなさい。
    該当するモノが無いなら無いと解答してください
      
```

(0a) 注文票はどこにある？
      URL, EC2上の場所の両方を解答
 (0b) 給仕はどこにいる？
      URL, EC2上の場所の両方を解答
      
 (1)

(2) Pythonのネットワークライブラリとdo_POST関数
   (2の下向き矢印) 
   (2の上向き矢印)

(3)

```

Q2: cart関数内で、
    <B>送信された商品と数量の組を全て</B>printf()で表示しなさい。
    <B>注: printfの結果はブラウザではなくEC2の上に表示されます</B>

</small>