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
230
いまからでも遅くない!コンテナで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
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
160
いまからでも遅くないコンテナ座学
nomu
0
320
Rerun いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
0
180
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(2-1)WebAPI座学
nomu
0
350
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
690
Gitハンズオン準備
nomu
0
550
いまからでも遅くない!デジタルレイバー超入門(座学編)
nomu
1
320
WebSphere_Integration_Meetup
nomu
0
32
いまからでも遅くない!システム間連携入門(メッセージキュー編)
nomu
0
910
Other Decks in Technology
See All in Technology
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.9k
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.2k
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
230
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.2k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
コンピュータビジョンの社会実装について考えていたらゲームを作っていた話
takmin
1
610
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
JavaにおけるNull非許容性
skrb
2
2.6k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
GitHub's CSS Performance
jonrohan
1030
460k
For a Future-Friendly Web
brad_frost
176
9.6k
Automating Front-end Workflow
addyosmani
1368
200k
Thoughts on Productivity
jonyablonski
69
4.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Designing for humans not robots
tammielis
250
25k
Designing Experiences People Love
moore
140
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
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