Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

KongAdvent Calendar 2024

Day 9
@Ktrips(Ken Yoshida)

Kong Buttonを作ってみた

Last updated at Posted at 2024-12-08

本記事は「Kong Advent Calendar 2024」の9日目のエントリで、API GatewayのKongを体感的に使えるKong Buttonを作ってみます

ChatGPT/OpenAI APIに代表されるように、世の中APIの必要性は増すばかり。そんなAPIを統合的に管理するKong API Gatewayの需要が高まってきています。
ここでは、ボタンを押すとKong API Gateway上の様々なAPIに接続し、APIを効率的に管理する仕組みを作ります。

まずはシンプルに、ボタンを押すとKong Gateway上のLINE Messaging APIにつながり、「家に帰るよ」メッセージを送る、Kong Dash Buttonを作ります。

この記事で学べる事

A. Kong API Gatewayの設定方法を理解する
B. メッセージAPI（LINE Notify）の使い方が学べる
C. IoTデバイス（Arduino/M5Stack）でAPIが使えようになる

フリスクサイズのボタンを押すことにより、様々なAPIをキックして、便利に使えるデバイスを作ります。

スクリーンショット 2024-08-13 17.42.54.png

Kong Dash Buttonの作り方はざっとこんな感じ

ハードウェアで必要なもの

  1. Kong API Gatewayの立ち上げ
  2. 最初のAPI httpbinに接続
  3. LINE Notifyの設定
  4. Kong上にLINE Notifyをセットアップ
  5. M5Stickでボタンを作って組み合わせて完成！

スクリーンショット 2024-08-13 18.01.19.png
(一番上のユースケース、お家に帰るよボタン、を作ります)

ハードウェアで必要なもの

以下のようなデバイス、部品をそろえてKong Dash Buttonを作っていきます。

必要なもの 部品
M5Stick Plus image.png
フリスクの箱 image.png
その他両面テープ、セロテープなど 適宜

image.png

I. Kong API Gatewayの立ち上げ

まずKong環境を用意するために、KongのSAAS環境Konnectで、API Gatewayを立ち上げます。

1. Kong Konnect にアクセス

https://cloud.konghq.com にアクセスして、ユーザー、パスワードなどを設定します。

image.png

2. Control Planeを作成

Gateway Managerスクリーンから New Control Plane を押して、新しいGatewayを作ります。
スクリーンショット 2024-07-13 16.37.47.png

3. Data Planeを作成

Data Plane Nodesには、Kongのフルマネージド環境の Dedicated Cloud Instances を選びます。
スクリーンショット 2024-07-13 16.41.38.png

そうすると Payment method の設定を求められるので、クレジットカードの支払い方法をセットします。
（無料枠＄500があるので、その範囲内の最小限の使い方なら課金されることはありません）

スクリーンショット 2024-07-13 16.38.59.png

Regionを選ぶ画面が出るので、USなどの適当なRegionを選びます。

スクリーンショット 2024-07-13 16.58.59.png

4. (Option) ドメインの設定

（オプションですが）左側メニューのCustom Domainsから、個人のドメイン名を紐づけます。
image.png

II. 最初のAPI httpbinに接続

Kong Konnectがセットアップできたら、そこに最初のAPIを登録します。

1. サービスの作成

Kong Konnectの左側のGateway Servicesから、New Gateway Serviceを選び、新しいサービスを作成します。
ここではテストのため、以下のような http://httpbin.org というAPIを登録します。

image.png

2. ルートの作成

次にこのサービスのルートを以下のように作成します。

image.png

3. httpbinをテスト

設定が済んだらコマンドラインからcurlで接続を確認します。
KONGプロキシに設定しているアドレスは、ご自分の独自ドメインかこのKonnectのURLをセットします。

httpbin
$ KONG=konnect.example.com
$ curl $KONG/httpbin/ip

実行してみます。

image.png

画面のようにIPアドレスが表示されたら、正常にサービス/ルートがKong Konnectに登録されている事が分かります。

III. LINE Notifyの設定

それでは次にLINEにメッセージを送るLINE Notify APIを設定していきます。

1. line-notify にアクセス

https://notify-bot.line.me/ にアクセスし、LINE Developerアカウントを作成します。右上のログインからユーザ、パスワードを作成し、ログインします。

image.png

  • 残念ながらLINEではこのNotifyは2025/3/31でサービス終了になるようです。それ以後は別のNotificationサービスを登録し直す必要があります。
    (LINE Developer) "2016年9月から開発者の皆様に提供してまいりましたLINE Notifyですが、より良いサービスを提供するため、経営資源を後継の類似プロダクトに集中させることとなり、2025年3月31日にサービスを終了させていただくことになりました。"

2. トークンを取得

右上の「マイページ」メニューから、一番下のアクセストークンの発行に行き、「トークンを発行する」ボタンを押します。

image.png

トークン名を入力し、「1:1でLINE Notifyから通知を受け取る」を選びます。

image.png

この後に表示されるLINEトークンをコピーしておきます。

このセットアップで連携中のサービスとして登録されました。

image.png

3. LINE Notify接続を確かめる

コマンドラインからLINE Notifyでメッセージが送れるか試してみます。XXXXには前の項で取得したトークンをセットします。

LINE Notify
$ curl -X POST -H "Authorization: Bearer XXXX" -F "message=ただいま！" https://notify-api.line.me/api/notify

これを実行してstatusが200で返ってきたら、メッセージ送信が成功しています。

image.png

スマホのLINEを見てみると、このようにメッセージが来ています。

image.png

IV. LINE NotifyをKongにセットアップ

LINE Notifyが動くことを確認できたら、このAPIをKongにセットアップします。

1. Kong Konnectにセット

再度Kong Konnectに行き、New Gateway Serviceの登録を行います。
以下のようにLINE Notifyをサービスとして設定します。

image.png

サービスに続いて、ルートを設定します。

image.png

2. Kongからの接続をテスト

先ほど設定したKONG経由のプロキシを使って、KongにつながっているLINE Notifyをキックしてみます。

Kong Notify
$ KONG=konnect.example.com
$ curl -X POST -H "Authorization: Bearer XXXX" -F "message=コング ただいま！" $KONG/line/api/notify

image.png

LINE側、Kong側双方のセットアップができていると、ちゃんとKong経由でメッセージが届きます。

image.png

これでKong経由でLINE Notifyが送れるようになりました。KonnectのAnalyticsでも接続が確認できます。

image.png

V. M5Stickでボタンを作って完成

LINE、Kongの設定ができたので、物理的なボタンを押すことにこのAPIを発火できるようにします。Arduino互換機で小さなボタンが付いたM5StickC Plusを使います。

1. M5Stickのセットアップ

M5Stack/M5Stickのプログラミングをするために、Arduino IDEのセットアップを行います。Arduino IDEの導入は、こちらのエントリ などにまとまっていますので、参照してやってみて下さい。

image.png

2. スケッチを書く

M5Stickとパソコンがつなげたら、M5Stickの前面ボタンを押したら、APIが起動するようなプログラム/スケッチを描きます。
こちらはサンプルのスケッチです。AAAAはWifiのSSID、BBBBはそのパスワード、XXXXはLINEのトークンです。lineHostのところにある"KONG"はご自分のdomainを設定してみて下さい。

M5Stick_Kong_Button.ino
#include "M5StickCPlus.h"
#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>

const char* ssid     = "AAAA";
const char* password = "BBBB";

//const char* lineHost = "notify-api.line.me";
const char* lineHost = "KONG";
const char* lineUrl = "/line/api/notify";
const char* lineToken= "XXXX";

void sendLine(String message, int PSI=0, int SI=0) {
  WiFiClientSecure client;
  Serial.println("Try");
  client.setInsecure();
  if (!client.connect(lineHost, 443)) {
    Serial.println("Connection failed");
    return;
  }
  Serial.print("Line Connected");
  String query = String("message=") + message;
  if(SI >0){
   query = query + "&stickerPackageId="+PSI + "&stickerId="+SI;
  }
  Serial.println(query);
  String request = String("") +
                   "POST " + lineUrl + " HTTP/1.1\r\n" +
                   "Host: "+ lineHost + "\r\n" +
                   "Authorization: Bearer " + lineToken + "\r\n" +
                   "Content-Length: " + String(query.length()) +  "\r\n" +
                   "Content-Type: application/x-www-form-urlencoded\r\n\r\n" +
                   query + "\r\n";
  client.print(request);

  while (client.connected()) {
    String line = client.readStringUntil('\n');
    Serial.println(line);
    if (line == "\r") {
      break;
    }
  }
 
  String line = client.readStringUntil('\n');
  Serial.println(line);
}
 
void setup() {
  Serial.begin (9600);
  M5.begin();  
  M5.Lcd.setRotation(3);
  M5.Lcd.setTextSize(2);

  Serial.printf("Connecting to %s\n", ssid);
  M5.Lcd.printf("Connecting to %s\n", ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    M5.Lcd.print(".");
  }
  Serial.printf("\nWiFi connected\n");
  M5.Lcd.printf("\nWiFi connected\n");

}

const int longPress_ms = 1200;
void loop(){
  M5.update();
  Serial.print(".");
  M5.Lcd.fillScreen(BLACK);
  M5.Lcd.setTextSize(6);
  M5.Lcd.setCursor(10, 10);
  M5.Lcd.setTextColor(WHITE); // (WHITE, BLACK, RED, GREEN, BLUE, YELLOW...)
  M5.Lcd.printf("Kong");
  M5.Lcd.setCursor(10, 50);
  if (M5.BtnA.wasPressed()) {
    delay(longPress_ms);
    if(M5.BtnA.read() == true){ 
      Serial.print("Red");
      M5.Lcd.fillScreen(RED);
      M5.Lcd.printf("Help!");
      sendLine("問題発生！ HELP！", 8522, 16581287);
      delay(500);
    } else {
      Serial.print("GREEN");
      M5.Lcd.fillScreen(GREEN);
      M5.Lcd.printf("Home!");
      sendLine("元気だよ！ HOME！", 8522, 16581271);
      delay(500);
    }
  }
  delay(500);
}

3. スケッチを流し込み動かしてみる

それでは上記スケッチをM5Stickに流し込み、ボタンを押してみます。
ボタンはフリスクケースの上から押しても反応するように、少し厚みを持たせています。

image.png

フリスクのフタを閉めるとこのようになっています。

image.png

ユースケースとしては、このボタンをお子さんなどに持っていてもらい、何かあったら押すと安否が確認できるというものです。
スクリーンショット 2024-08-13 18.01.19.png
(一番上のユースケース、お家に帰るよボタン、です)

まず電源を入れて、Wifiに接続できると、Kongという文字が出てきます。

image.png

ボタンを一回押すと、家に帰ったということで、「元気だよ！」とスタンプと共に送られます。

image.png

長押しすると、赤く光って危険を知らせます。

image.png

スマホにはこのようにスタンプと共にメッセージが届いていました！

image.png

見事、ハードウェアからKong、そしてAPIへと連携ができています。
もちろんこのアクセス状況などはKong Manager上で確認する事ができます。

image.png

まとめ

という事で、Kong Konnect上にAPIをセットし、それをハードウェアのボタンから起動することができました。
Kongを使うとさまざまなAPIをまとめて管理でき、またCloud Gatewayを使うと自身で環境を持たなくてもフルマネージドな環境が手に入ります。
今後もさまざまなAPIを追加して、便利な環境にしていこうと思います！

スクリーンショット 2024-08-13 17.42.54.png

それでは、よいKongを！ Happy Kong!

ヨシケン

参考リンク

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?