Velo 第４２回　Wix Learn (Coding with Velo: Backend[前半])

教え上手なジョシュア氏のレッスンは Velo の理解を深めてくれます。

是非実際にご覧下さい。WixLearn 第３回の Coding with Velo: Backtend は８回のレッスンに分かれています。
長いので前半、後半に分けます。以下はその前半のダイジェストです。

Wix Developer Advocate ジョシュア氏

lesson1: Take a tour(03:50)

開発モードをオン、サイドバーで公開・バックエンド「{ }」をクリックする。
公開は JSファイル用でフロントエンドファイルを置くことができる。
バックエンドには作成した大半のバックエンドファイルを置く。
このフォルダーにはいくつかの異なる種類のファイルを置くことができる。

公開・バックエンド

まずは新規WEBモジュール。
WEBモジュールはバックエンドからフロントエンドへ関数をエクスポートできるので別のAPIに移動する必要がない。
通常のJSファイルも作成でき、ジョブスケジューラーでさえ作成できる。

パッケージでは まず Velo パッケージが利用できる。
Velo パッケージは組み合わせての使用もできるWEBモジュールである。Velo開発チームは事前に組み込まれた Velo パッケージを用意している。
例えば Twillio、２段階認証、グーグルシート、AWSを使用した組み合わせも用意している。
またこれを利用すれば独自のパッケージを作ることも可能である。

次は npm の利用。Google、Stripe、Twillioなどのサードパーティー製サービスをインストールしてホームページで使用できる。
顧客へ SMS を送受信したり、グーグルシートに繋げたりすることができる。
また Lodash などのユーティリティーを使ってコーディングを簡潔に仕上げることができる。

パッケージ

その他にも、コード検索、データベース、リリースマネジャー、シークレットマネジャー、ログやモニターの機能がある。

lesson2: Create web modules(08:35)

公開・バックエンド/バックエンド/新規WEBモジュールでファイルを追加する。
自分で好きな名前を付けることができる。
今は宇宙がテーマなのでファイル名を「theGalaxy.jsw」とする。
まず冒頭に wix-data API のインポートをする。APIにはフロントエンドのみで使用できるものと、バックエンドのみで使用できるものがあるが、wix-data は汎用性が高くどちらでも利用できる。

次に関数をエクスポートする。
エクスポート宣言で関数をフロントエンドに送ることができる。
こうすることでエディターを切り替えずにコードを処理できるようになる。
ここでは Galaxy データベースから最初の惑星を取り出す firstPlanet( ) 関数をエクスポートする。
データベースの内容はコンテンツマネジャーで確認できる。

wixData.query( )  という wix-data API のクエリー関数を利用する。
コレクション ID の Galaxy が引数になる。
次いで .find( ) をチェインしてプロミスの解決を待つ。

プロミスは解決するとアイテムの配列を返すので、その長さを調べて条件文を作る。
最初のアイテムのインデックス 0 を指定して最初の惑星をゲットする。
結果 (firstItem) を観察するために console.log( ) で確かめる。

   // theGalaxy.jsw

　 import wixData from 'wix-data'

▶　export function firstPlanet(){
           wixData.query('Galaxy').query()
                  .find()
                  .then((results) => {

                     if results.items.length > 0 {
                     let firstItem = results.items[0]
                     console.log(firstItem)}
                     }
            )
   }

export function の横に小さな実行ボタン ▶ がある。このボタンを押すと左側に引数の設定、右側に実行結果を表示するパネルが現れる。
パネルの「実行」ボタンを押すとコレクションの最初のアイテム「水星」が取得できているのでこの関数は期待通りに動作していることが分かる。

このバックエンドコードをフロントエンドにインポートする。
ページコードに移動し、theGalaxy.jsw ファイルの firstPlanet をインポートする。
このファイルのパスはバックエンドにあるので '/backend/theGalaxy.jsw' となる。
WEB モジュールはこのように簡単にフロントエンドにエクスポートできる。
firstPlanet を呼び出す場合は呼び出し式を書くだけでプロミスを返しカスタム機能を追加できる。

import {firstPlanet} from '/backend/theGalaxy.jsw'

$w.onReady(() => {

      firstPlanet() … ;
　　　 …
})

lesson3: Get to know Fetch(07:59)

ここでは fetch( ) 関数を扱う。サードパーティサービスの URL を経由して、サービスをやり取りし、必要となるメソッドや情報を呼び出すことができる。ここでは私が作成したシンプルな例を使う。

新しいWEBモジュールを作って冒頭に wixFetch をインポートし、次に async 関数 fetchPlanets( ) を宣言する。
async 関数はプロミスを事前解決する糖衣構文である。
関数の中で HTTP の GET メソッドを使うために定数 settings を用意する。
その中で、method は 'GET'、header は {accept: 'application/json'}とする。

この下に fetch( ) 関数を実行するのために try/catchメソッドを書く。
tryの中で JSON応答用の定数 fetchResponse を作る。
この定数にフェッチ先の URLと settings を引数とする fetch( ) 関数の戻り値を代入する。
この URL には全ての惑星からなるリスト「explorevelo」がある。
次に定数 data に戻り値を fetchResponse . json で JSON型式に直して代入する。
そしてdata をリターンする。
エラー処理のために catch でエラーの内容 (e) をリターンする。

fetch( ) 関数の実装

プレイボタンで実行すると惑星の全アイテムが送られていることが分かる。
このような機能によって、 URL を使用してサードパーティサービスをフェッチすることで、素のままの Wix を使うよりもさらに多様なカスタマイズされた体験をすることができる。
配送、AWS、Googleなど好みに応じてフェッチすることができる。

lesson4: Secure API keys(04:21)

サードパーティサービスに接続するときには本人確認のために API キーを求められることがある。
そのために Wix では API キーをバックエンドにおいて悪意ある訪問者から保護している。シークレットマネジャーはバックエンドに置かれ API キーを保護している。

サイドバーの ツール/セキュリティからシークレットマネジャーを選択し、「シークレットを保存」ボタンから登録パネルを表示。

ダッシュボードとシークレットマネジャー

登録先のサービス名、その API キー、説明を入力して保存する。サイトシークレットに登録されたら API から利用できる。

APIキーの登録

コードパネルに戻って、冒頭に２つの API をインポートする。wixSecretBackend はシークレットマネジャーを使用して API キーを取得するAPIで、sendGridはメール送信サービスを提供する npm モジュールだ。
コードを順に説明してゆく。

import wixSecretsBackend from 'wix-secrets-backend';
import sedGridMail from '@sendgrid/mail';
…

// メール送信用の非同期関数を宣言
export async function sendEmail(recipient, sender, subject, body){

　　　// サービス名に基づいてAPIキーを取得する
　　　const secret = await wixSecretsBackend.getSecret('SendGridApiKey');

　　　// sendGridにAPIキーをセットし本人確認を行う
　　　sendGridMail.setApiKey(secret);

　　　// メッセージオブジェクトを作成
　　　const message = {
　　　　　　　　'to':recipienr,
　　　　　　　　'from':sender,
　　　　　　　　'subject':subject,
　　　　　　　　'text': body
                }

      // メールを送信
　　　sendMail.send(message)
}}

これで全ての API をウェッブに公開することなく安全に保存できるようになった。
Wix ではセキュリティーのレイヤーを追加して皆さんが使用できるようにし、悪意のある訪問者が問題を起こすのを防いでいる。

Velo開発のご依頼はこちら

お問い合わせ | 合同会社アクトワン | ホームぺージ作成 大阪府和泉市