Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
Search
NoMu
October 22, 2024
Technology
0
220
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
本資料は以下connpassで実施したセッションの内容になります。
https://ibm-developer.connpass.com/event/332824/
NoMu
October 22, 2024
Tweet
Share
More Decks by NoMu
See All by NoMu
いまからでも遅くないコンテナ座学
nomu
0
270
Rerun いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
0
180
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
330
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
670
Gitハンズオン準備
nomu
0
520
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
310
WebSphere_Integration_Meetup
nomu
0
30
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
900
ネットワーク超入門(座学編)
nomu
4
1.1k
Other Decks in Technology
See All in Technology
Bounded Context: Problem or Solution?
ewolff
1
210
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
2.5Dモデルのすべて
yu4u
2
610
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
Larkご案内資料
customercloud
PRO
0
600
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Building an army of robots
kneath
302
45k
The Cult of Friendly URLs
andyhume
78
6.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
RailsConf 2023
tenderlove
29
1k
Being A Developer After 40
akosma
89
590k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Adopting Sorbet at Scale
ufuk
74
9.2k
A Philosophy of Restraint
colly
203
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Transcript
© 2024 IBM Corporation 1 いまからでも遅くない!コンテナでWebアプリを動かしてみ よう入門(2-2)WebAPIハンズオン TechXchange Dojo 2024年10月22日
17時03分まで マイクミュートにして お待ちください
© 2024 IBM Corporation 2 いまからでも遅くないシリーズ •(1)Gitハンズオン •(2)WebAPIハンズオン •(3)コンテナハンズオン •(4)Reactハンズオン
•(5)データベースハンズオン •(6)コンテナオーケストレーションハンズオン コンテナオーケストレーション(OpenShift) Web サーバー API サーバー DB サーバー Gitサーバー Push Deploy PC
© 2024 IBM Corporation 3 自己紹介 村田 憲昭 北海道北斗市 スノーボード、登山、グルメ、猫
カスタマーサクセス DX人材育成/教育(IT全般) スクラムマスター 半導体アプリエンジニア 某コンビニのエンジニア 名前 生息地 趣味 経歴
© 2024 IBM Corporation 4 免責事項 本資料に含まれる情報は可能な限り正確を期しておりますが、 記載された内容に関して、日本アイ・ビー・エム株式会社が 何ら保証するものではありません。 従って、本資料の情報の利用は使用者の責任において
為されるものであり、資料の内容によって受けた 如何なる被害に関しても一切の補償をするものではありません。 アンケートのご協力よろしくおねがいいたします! 各セッションに皆さんのご意見を取り入れてアップデートしていきます! https://app.sli.do/event/pUsRNQvscV3JwpSFXnUyeo
© 2024 IBM Corporation 5 今回のゴール WebAPIのソースコードが想像 できるようになる
© 2024 IBM Corporation 6 アジェンダ 1. 前回の復習 2. ハンズオンする内容の確認
3. ハンズオン! 4. まとめ
前回の復習 1
© 2024 IBM Corporation 8 APIとは ・Application Programming Interfaceの略 ・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに使用
するインタフェースの仕様 (Wikipedia.「アプリケーションプログラミングインタフェース」. https://ja.wikipedia.org/wiki/アプリケーションプログラミングインタフェース(参照2023-03-13)) ・インタフェース:2つの異なる機器やシステム、ソフトウェア間で情報の やり取りがなされる際に、その間をつなぐ規格や機能を指す USBケーブル = インターフェース アプリの画面 = インターフェース
© 2024 IBM Corporation 9 APIとは ・さらに、HTTP/HTTPSプロトコルを利用してネットワーク越しに呼び出すものを Web APIと呼びます。 ・ソフトウェアコンポーネント同士が互いに情報をやりとりするのに
使用するインタフェースの仕様 実行方法と実行されるサービスがわかれば 内部の処理の仕組みは知らなくても良い =APIのメリット API利用者 プログラム API提供者 プログラム API 内部処理 リクエスト レスポンス ショッピングサイト 決済するサイト
© 2024 IBM Corporation 10 HTTPリクエストの構造 ・HTTPプロトコルで定義された、Webサーバーに対してクライアントが要求を行 うために使用されるコマンドのことです。 ・よく使われるものは以下の4つです。 HTTPメソッド
説明 使用例 GET サーバからの情報の取得 ブラウザからのWebページの読み込み POST サーバへのデータ送信 フォームの入力情報の送信 PUT サーバ上のデータの更新 既存データの更新 DELETE サーバ上のデータの削除 不要データの削除
© 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つのオブジェクトが要素。
© 2024 IBM Corporation 12 ステータスコードの意味 HTTPリクエストが、正常に終了したかどうかを示すコード ・情報レスポンス(100-199) ・成功レスポンス(200-299) ・リダイレクトメッセージ(300-399)
・クライアントエラーレスポンス(400-499) ・サーバエラーレスポンス(500-599) 代表的なステータスコード: 200:OK リクエストが正常に終了した 404:Not Found リクエストのURLが解釈できなかった
© 2024 IBM Corporation 13 RESTful APIの基本原則 ・シンプルなWebシステムの設計思想のこと REST(REpresentational State
Transfer) RESTの4原則: ・統一インターフェース ・アドレス可能性 ・接続性 ・ステートレス性
© 2024 IBM Corporation 14 RESTful APIの基本原則 https://xxxx.comへ「/xxx/xx」の情報をリクエストします リンクを含んだ情報も返せます Webクライアント
統一インターフェース HTTP アドレス可能性 URI 接続性 さっきの情報をもう一度欲しい さっきの情報はもう分かりません ステートレス性 サービス(プログラム) REST
© 2024 IBM Corporation 15 RESTful APIを利用する ・RESTful APIを利用するにあたって 1.
リソースの決定: APIの利用者が、どのようなリソースを必要とするのか 2. リソースの操作法を確認 対象のリソースで、どのような操作ができるか リソースに必要な操作を、HTTPメソッドやURIなどで表現し、HTTPリクエストを発行 HTTPメソッド 説明 使用例 GET サーバからの情報の取得 ブラウザからのWebページの読み込み POST サーバへのデータ送信 フォームの入力情報の送信 PUT サーバ上のデータの更新 既存データの更新 DELETE サーバ上のデータの削除 不要データの削除
ハンズオンする内容の確認 2
© 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
© 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" }
ハンズオン 3
© 2024 IBM Corporation 20 ハンズオンでやらないこと 細かい仕様の説明はしません (特にライブラリの説明) ↓ 今回はWebAPIの基本的な
動きを学ぶため
© 2024 IBM Corporation 21 Hello World
© 2024 IBM Corporation 22 システム全体図 API利用者 プログラム API提供者 プログラム
API 内部処理 /helloworld レスポンス GET
© 2024 IBM Corporation 23 ハンズオン $ cd sample-api $
npx tsc --init // TypeScript準備 $ code . // エディタ起動 ここからはVSCodeでの作業になります。
© 2024 IBM Corporation 24 ハンズオン こんな画面になっているはず
© 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); 自分の好きな文字に 変更してください
© 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
© 2024 IBM Corporation 27 ハンズオン ➃ターミナルを表示 ⑤ターミナルで以下コマンドを実行 $ npx
ts-node-dev app.ts ⑥「listen on port 3000」となればOK ▼実際に動かしてみよう
© 2024 IBM Corporation 28 ハンズオン ⑦postmanを起動 ⑧New HTTP Requstボタンをクリック
⑨「GET」の横の記入欄に localhost:3000/helloworld
© 2024 IBM Corporation 29 ハンズオン ⑩「SEND」をクリック ⑪以下のような表示になればOK! 私の場合は 「”message”:”hello,
world murata”」 となる
© 2024 IBM Corporation 30 クエリーパラメーターを使う
© 2024 IBM Corporation 31 パラメーターとは? クライアント → サーバーに対して、データを渡すやり方 種類としては・・・
・クエリーパラメーター ・パスパラメーター ・ボディパラメーター ・ヘッダーパラメーター がある
© 2024 IBM Corporation 32 システム全体図 API利用者 プログラム API提供者 プログラム
API 内部処理 /testquery?position=Hokkaido レスポンス クエリーパラメーター 「Hokkaido」 GET
© 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 }); });
© 2024 IBM Corporation 34 ハンズオン ➂以下のようになればOK 追記 部分 ➃解説
/testquery?position=Hokkaido 対応 req.query:クエリーパラーメーターを取り出せる
© 2024 IBM Corporation 35 ハンズオン ⑤ターミナルを表示 ⑥ターミナルで以下コマンドを実行 $ npx
ts-node-dev app.ts ⑦「listen on port 3000」となればOK ▼実際に動かしてみよう 再掲
© 2024 IBM Corporation 36 ハンズオン ⑧postmanを起動 ⑨New HTTP Requstボタンをクリック
⑩「GET」の横の記入欄に localhost:3000/testquery? position=Tokyo
© 2024 IBM Corporation 37 ハンズオン ⑪「SEND」をクリック ⑫以下のような表示になればOK! 私の場合は 「”message”:”Hello,
world query=Tokyo”」 となる
© 2024 IBM Corporation 38 パスパラメーターを使う
© 2024 IBM Corporation 39 システム全体図 API利用者 プログラム API提供者 プログラム
API 内部処理 /testparam/Murata レスポンス パスパラメーター 「Murata」 GET
© 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 }); });
© 2024 IBM Corporation 41 ハンズオン ➂以下のようになればOK ➃解説 /testparam/Murata 対応
req.params:パスパラーメーターを取り出せる 追記 部分
© 2024 IBM Corporation 42 ハンズオン ⑤ターミナルを表示 ⑥ターミナルで以下コマンドを実行 $ npx
ts-node-dev app.ts ⑦「listen on port 3000」となればOK ▼実際に動かしてみよう 再掲
© 2024 IBM Corporation 43 ハンズオン ⑧postmanを起動 ⑨New HTTP Requstボタンをクリック
⑩「GET」の横の記入欄に localhost:3000/testparam/Murata
© 2024 IBM Corporation 44 ハンズオン ⑪「SEND」をクリック ⑫以下のような表示になればOK! 私の場合は 「”message”:”Hello,
world param=Murata”」 となる
まとめ 4
© 2024 IBM Corporation 46 まとめ ・WebAPIのソースコードのイメージ ・APIサーバー側にデータを渡すには「パラメーター」を使う パスパラメーター クエリーパラメーター
ヘッダーパラメーター ボディパラメーター
次回予告!!
© 2024 IBM Corporation 48 いまからでも遅くない!コンテナでWebアプリを動かしてみ よう入門(3-1)コンテナ座学編 TechXchange Dojo 2024年11月XX日
© 2024 IBM Corporation 49