いまからでも遅くない！コンテナでWebアプリを動かしてみよう入門（2-2）WebAPIハンズオン

本資料は以下connpassで実施したセッションの内容になります。
https://ibm-developer.connpass.com/event/332824/

Transcript

1. © 2024 IBM Corporation 1 いまからでも遅くない！コンテナでWebアプリを動かしてみ よう入門（2-2）WebAPIハンズオン TechXchange Dojo 2024年10月22日 17時03分まで マイクミュートにして お待ちください
2. © 2024 IBM Corporation 2 いまからでも遅くないシリーズ •（1）Gitハンズオン •（2）WebAPIハンズオン •（3）コンテナハンズオン •（4）Reactハンズオン •（5）データベースハンズオン •（6）コンテナオーケストレーションハンズオン コンテナオーケストレーション（OpenShift） Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC
3. © 2024 IBM Corporation 3 自己紹介 村田 憲昭 北海道北斗市 スノーボード、登山、グルメ、猫 カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター 半導体アプリエンジニア 某コンビニのエンジニア 名前 生息地 趣味 経歴
4. © 2024 IBM Corporation 4 免責事項 本資料に含まれる情報は可能な限り正確を期しておりますが、 記載された内容に関して、日本アイ・ビー・エム株式会社が 何ら保証するものではありません。 従って、本資料の情報の利用は使用者の責任において 為されるものであり、資料の内容によって受けた 如何なる被害に関しても一切の補償をするものではありません。 アンケートのご協力よろしくおねがいいたします！ 各セッションに皆さんのご意見を取り入れてアップデートしていきます！ https://app.sli.do/event/pUsRNQvscV3JwpSFXnUyeo
5. © 2024 IBM Corporation 5 今回のゴール WebAPIのソースコードが想像 できるようになる
6. © 2024 IBM Corporation 6 アジェンダ 1. 前回の復習 2. ハンズオンする内容の確認 3. ハンズオン！ 4. まとめ
7. 前回の復習 1
8. © 2024 IBM Corporation 8 APIとは ・Application Programming Interfaceの略 ・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用 するインタフェースの仕様 (Wikipedia.「アプリケーションプログラミングインタフェース」. https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース(参照2023-03-13）) ・インタフェース：2つの異なる機器やシステム、ソフトウェア間で情報の やり取りがなされる際に、その間をつなぐ規格や機能を指す USBケーブル ＝ インターフェース アプリの画面 ＝ インターフェース
9. © 2024 IBM Corporation 9 APIとは ・さらに､HTTP/HTTPSプロトコルを利用してネットワーク越しに呼び出すものを Web APIと呼びます｡ ・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに 使用するインタフェースの仕様 実行方法と実行されるサービスがわかれば 内部の処理の仕組みは知らなくても良い =APIのメリット API利用者 プログラム API提供者 プログラム API 内部処理 リクエスト レスポンス ショッピングサイト 決済するサイト
10. © 2024 IBM Corporation 10 HTTPリクエストの構造 ・HTTPプロトコルで定義された、Webサーバーに対してクライアントが要求を行 うために使用されるコマンドのことです。 ・よく使われるものは以下の4つです｡ HTTPメソッド 説明 使用例 GET サーバからの情報の取得 ブラウザからのWebページの読み込み POST サーバへのデータ送信 フォームの入力情報の送信 PUT サーバ上のデータの更新 既存データの更新 DELETE サーバ上のデータの削除 不要データの削除
11. © 2024 IBM Corporation 11 HTTPリクエスト/レスポンスの構造（JSON） ・JSON（JavaScript Object Notation）は、HTTPリクエスト/レスポンス のボディの要素で使われることが多いデータ形式です｡ { "name": "John Smith", "address": { "street": "123 Main St", "city": "Anytown” }, "phone_numbers": [ { "type": "home", "number": "555-555-1234” }, { "type": "work", "number": "555-555-5678" } ] } オブジェクト “key”: “value” の集合 配列｡この例では2つのオブジェクトが要素｡
12. © 2024 IBM Corporation 12 ステータスコードの意味 HTTPリクエストが、正常に終了したかどうかを示すコード ・情報レスポンス（100-199） ・成功レスポンス（200-299） ・リダイレクトメッセージ（300-399） ・クライアントエラーレスポンス（400-499） ・サーバエラーレスポンス（500-599） 代表的なステータスコード： 200：OK リクエストが正常に終了した 404：Not Found リクエストのURLが解釈できなかった
13. © 2024 IBM Corporation 13 RESTful APIの基本原則 ・シンプルなWebシステムの設計思想のこと REST（REpresentational State Transfer） RESTの４原則： ・統一インターフェース ・アドレス可能性 ・接続性 ・ステートレス性
14. © 2024 IBM Corporation 14 RESTful APIの基本原則 https://xxxx.comへ「/xxx/xx」の情報をリクエストします リンクを含んだ情報も返せます Webクライアント 統一インターフェース HTTP アドレス可能性 URI 接続性 さっきの情報をもう一度欲しい さっきの情報はもう分かりません ステートレス性 サービス（プログラム） REST
15. © 2024 IBM Corporation 15 RESTful APIを利用する ・RESTful APIを利用するにあたって 1. リソースの決定： APIの利用者が、どのようなリソースを必要とするのか 2. リソースの操作法を確認 対象のリソースで、どのような操作ができるか リソースに必要な操作を、HTTPメソッドやURIなどで表現し、HTTPリクエストを発行 HTTPメソッド 説明 使用例 GET サーバからの情報の取得 ブラウザからのWebページの読み込み POST サーバへのデータ送信 フォームの入力情報の送信 PUT サーバ上のデータの更新 既存データの更新 DELETE サーバ上のデータの削除 不要データの削除
16. ハンズオンする内容の確認 2
17. © 2024 IBM Corporation 17 開発環境説明 ▼開発環境 • VSCode • TypeScript • Node.js ▼準備 • VSCode • VSCode拡張機能「Postman」 • Node.js（最新版） • 以下コマンドでインストール $ mkdir sample-api $ cd sample-api $ npm install express –save $ npm install helmet --save $ npm install cors --save $ npm install body-parser --save $ npm install moment --save $ npm install -D typescript @types/node $ npm install -D @types/express @types/helmet @types/cors $ npm install -D ts-node ts-node-dev
18. © 2024 IBM Corporation 18 ゴール ▼以下APIを作成する GET /helloworld { "message": "hello, world" } GET /testquery?position=Hokkaido { "message": "Hello, world query=Hokkaido" } GET /testparam/Murata { "message": "Hello, world param=Murata" }
19. ハンズオン 3
20. © 2024 IBM Corporation 20 ハンズオンでやらないこと 細かい仕様の説明はしません （特にライブラリの説明） ↓ 今回はWebAPIの基本的な 動きを学ぶため
21. © 2024 IBM Corporation 21 Hello World
22. © 2024 IBM Corporation 22 システム全体図 API利用者 プログラム API提供者 プログラム API 内部処理 /helloworld レスポンス GET
23. © 2024 IBM Corporation 23 ハンズオン $ cd sample-api $ npx tsc --init // TypeScript準備 $ code . // エディタ起動 ここからはVSCodeでの作業になります。
24. © 2024 IBM Corporation 24 ハンズオン こんな画面になっているはず
25. © 2024 IBM Corporation 25 ハンズオン ▼「Hello World」という文字が返ってくるWebAPIを作成 ➀ファイルの作成（app.ts） ➁ソースコードを貼り付け import express from 'express'; import helmet from 'helmet'; import cors from 'cors'; const app = express(); app.use(helmet()); app.use(cors()); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); const port = process.env.PORT || 3000; app.get('/helloworld', (req, res) => { res.status(200).send({ message: ‘hello, world ＜好きな文字＞' }); }); app.listen(port); console.log('listen on port ' + port); 自分の好きな文字に 変更してください
26. © 2024 IBM Corporation 26 ハンズオン import express from 'express'; import helmet from 'helmet'; import cors from 'cors’; const app = express(); app.use(helmet()); app.use(cors()); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); const port = process.env.PORT || 3000; app.get('/helloworld', (req, res) => { res.status(200).send({ message: 'hello, world murata' }); }); app.listen(port); console.log('listen on port ' + port); プログラムの中で使用する機能（ライブラリ） を呼び出す 上記で呼び出した機能を使用するための準備 API本体の処理を記述 プログラムを起動するための処理 ➂解説 1 2 3 4
27. © 2024 IBM Corporation 27 ハンズオン ➃ターミナルを表示 ⑤ターミナルで以下コマンドを実行 ＄ npx ts-node-dev app.ts ⑥「listen on port 3000」となればOK ▼実際に動かしてみよう
28. © 2024 IBM Corporation 28 ハンズオン ⑦postmanを起動 ⑧New HTTP Requstボタンをクリック ⑨「GET」の横の記入欄に localhost:3000/helloworld
29. © 2024 IBM Corporation 29 ハンズオン ⑩「SEND」をクリック ⑪以下のような表示になればOK！ 私の場合は 「”message”:”hello, world murata”」 となる
30. © 2024 IBM Corporation 30 クエリーパラメーターを使う
31. © 2024 IBM Corporation 31 パラメーターとは？ クライアント → サーバーに対して、データを渡すやり方 種類としては・・・ ・クエリーパラメーター ・パスパラメーター ・ボディパラメーター ・ヘッダーパラメーター がある
32. © 2024 IBM Corporation 32 システム全体図 API利用者 プログラム API提供者 プログラム API 内部処理 /testquery?position=Hokkaido レスポンス クエリーパラメーター 「Hokkaido」 GET
33. © 2024 IBM Corporation 33 ハンズオン ➀app.tsを開く ➁メイン処理とサーバー起動の間に以下コードを追記 // クエリーパラメーター app.get('/testquery', (req, res) => { console.log(req.query.position) res.status(200).send({ message: 'Hello, world query=' + req.query.position }); });
34. © 2024 IBM Corporation 34 ハンズオン ➂以下のようになればOK 追記 部分 ➃解説 /testquery?position=Hokkaido 対応 req.query：クエリーパラーメーターを取り出せる
35. © 2024 IBM Corporation 35 ハンズオン ⑤ターミナルを表示 ⑥ターミナルで以下コマンドを実行 ＄ npx ts-node-dev app.ts ⑦「listen on port 3000」となればOK ▼実際に動かしてみよう 再掲
36. © 2024 IBM Corporation 36 ハンズオン ⑧postmanを起動 ⑨New HTTP Requstボタンをクリック ⑩「GET」の横の記入欄に localhost:3000/testquery? position=Tokyo
37. © 2024 IBM Corporation 37 ハンズオン ⑪「SEND」をクリック ⑫以下のような表示になればOK！ 私の場合は 「”message”:”Hello, world query=Tokyo”」 となる
38. © 2024 IBM Corporation 38 パスパラメーターを使う
39. © 2024 IBM Corporation 39 システム全体図 API利用者 プログラム API提供者 プログラム API 内部処理 /testparam/Murata レスポンス パスパラメーター 「Murata」 GET
40. © 2024 IBM Corporation 40 ハンズオン ➀app.tsを開く ➁クエリーパラーメーターとサーバー起動の間に以下コードを追記 // パスパラメーター app.get('/testparam/:name', (req, res) => { console.log(req.params.name) res.status(200).send({ message: 'Hello, world param=' + req.params.name }); });
41. © 2024 IBM Corporation 41 ハンズオン ➂以下のようになればOK ➃解説 /testparam/Murata 対応 req.params：パスパラーメーターを取り出せる 追記 部分
42. © 2024 IBM Corporation 42 ハンズオン ⑤ターミナルを表示 ⑥ターミナルで以下コマンドを実行 ＄ npx ts-node-dev app.ts ⑦「listen on port 3000」となればOK ▼実際に動かしてみよう 再掲
43. © 2024 IBM Corporation 43 ハンズオン ⑧postmanを起動 ⑨New HTTP Requstボタンをクリック ⑩「GET」の横の記入欄に localhost:3000/testparam/Murata
44. © 2024 IBM Corporation 44 ハンズオン ⑪「SEND」をクリック ⑫以下のような表示になればOK！ 私の場合は 「”message”:”Hello, world param=Murata”」 となる
45. まとめ 4
46. © 2024 IBM Corporation 46 まとめ ・WebAPIのソースコードのイメージ ・APIサーバー側にデータを渡すには「パラメーター」を使う パスパラメーター クエリーパラメーター ヘッダーパラメーター ボディパラメーター
47. 次回予告！！
48. © 2024 IBM Corporation 48 いまからでも遅くない！コンテナでWebアプリを動かしてみ よう入門（3-1）コンテナ座学編 TechXchange Dojo 2024年11月XX日
49. © 2024 IBM Corporation 49