概要
wixではshopifyのようにアプリ開発ができます。管理画面上に独自機能をつけたりできるようです。
残念ながら現在(2023年9月)wixヘッドレスのアプリはまだ少ないです。（ヘッドレス以外のアプリは結構数あります。）
ただ、Shopifyのようなアプリ開発のエコシステムがあってヘッドレスまで出来るようになったので、今後使って行きたい技術なのでメモとして残します。
作るもの
ボタンを押すとline notifyを使ってラインに適当なメッセージを送信する独自機能を管理画面に作ります。
管理画面の作成について
独自の管理画面を作成する機能は4種類あります。
- jsonで定義する？
- WIX BLOCKSというwix上でデザインを定義してvelo(js)を使ってclickした時などの処理を書く
- Shopifyのようにiframeで別サイトを表示してwixのapiを介してwixデータを表示させる。(自由度は高い気がする)
もう一つは調べきれてないです。
今回は一番手軽に使えそうな WIX BLOCKSを使います。
実際に作ってみる
デザインはguiで定義できるので省きます。
ボタンを定義するとidが設定できるのでidを取得してきclickした時の処理を記述します。(普通のjsとほぼ変わらない)
本当であればlineのapiキーをコレクションではなくシークレットマネージャーに保存するべきなのですが、wixヘッドレスだとveloを有効化が無いのでシークレットマネージャー メニュー存在しないので一旦コレクションとして定義する
import wixDashboard from 'wix-dashboard';
import wixData from 'wix-data';
import {call_line} from 'backend/aModule'
$w.onReady(function () {
$w('#button4').onClick(async () => {
let items = null;
try {
const results = await wixData.query('@〇〇/my-new-app-1/line_setting').find();
items = results.items;
} catch (error) {
console.error(error);
return;
}
if(items.length !== 0){
for (const item of items) {
call_line("ラインにテスト送信します！",item.title);
}
}
});
});
import { fetch } from 'wix-fetch';
export async function call_line(message,key) {
const BASE_URL = 'https://notify-api.line.me';
const PATH = '/api/notify';
const params = new URLSearchParams({
message: message,
});
const config = {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Bearer ${key}`
},
body: params.toString()
}
try {
const res = await fetch(BASE_URL + PATH, config);
} catch (error) {
console.error(error);
return false;
}
return true;
}
多分バックエンド側(.jsw)からしかfetchできない？みたいなので、そこでfetchを定義してダッシュボードからcall_lineをダッシュボードから呼び出す。
普通にダッシュボードfetchから呼び出すと「TypeError: fetch failed」になる。
できたのでボタンをクリックするとlineに対して定型文が送信されます。
サンプル
疑問点
- シークレットマネージャーがヘッドレスだと使えるのかどうか？
- アプリ開発ではアプリ側で作成したコレクションしか操作できない？
- 全体公開するアプリではなく、Shopifyのようなプライベートアプリのようなものは開発できるのか？
アプリ開発ではアプリ側で作成したコレクションしか操作できない？
→普通のcmsで機能で開発していて、後から複雑な事をする必要が出たときにアプリ開発をする必要がでます。
その際に普通(wixヘッドレス側)のコレクションが操作できないので、またアプリ側でコレクションを定義する必要がでたりする可能性
上記はwix開発者Discordに質問を投げさせてもらったので、回答があり次第、qiitaにメモとして残そうかと思います。