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
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Bash Introduction
62gerente
610
210k
Designing for Performance
lara
604
68k
The Language of Interfaces
destraynor
156
24k
Scaling GitHub
holman
459
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Unsuck your backbone
ammeep
669
57k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
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