Patreon APIでの作業(現在は何が起こっているか知っている)

OK今私達が知っている、私達は仕事を始める準備ができている!私はハイキングをリードし、ハイクの写真にアクセスするための例サイトを作成しました.これは単なる例ですが、私は私の音楽の友人を助けるために使用している彼らの教えの練習を再構築し、余分な機会をもっと音楽へのアクセスを得るために貢献しています.滞在は彼女のサイトの結果を見て調整!

今のところ、WIXによってCorvidの上で我々のウェブサイトを構築しましょう.私は、我々が報酬の我々のティアを置くところを取り扱うために、基本的なUIをセットアップしました.CorvidとWixを使用すると、我々はデータのリスト内のすべての項目を繰り返してデータをより簡単に表示をカスタマイズするために繰り返し機能を内蔵している繰り返し要素(リピータと呼ばれる)を追加することができます.私は、それらのうちの1つを同様に私のページに加えます.
一度UIが行く準備ができたら、我々はpatreonからティアを取得する必要があります.我々が動的にpatreonからデータをつかむならば、これは我々が新しいレベルを加えるか、レベルコストまたは何を提供するかについて更新するどんな時でも、ラインの下でメンテナンス経費です.
Corvidを使用して、私は私のウェブサイトのための私のバックエンドコードに切り替えて、新しいJavaScriptモジュールを追加するつもりです.このモジュールはpateronと呼ばれます.JSWとして、我々はPatreon APIで必要なすべての相互作用を収容します.私が上記のリンクされたブログ記事で言及したように、NPMモジュールはあなたのために働きません.

この例では、NPMヘルパーモジュールを介して必要なデータにアクセスできます.

CorvidでNPMモジュールをインストールするには、GUIを使用してパッケージを検索してインストールする必要があります.

モジュールがインストールされたら、Webモジュールのコードに戻って、モジュールからpatreon APIをインポートする必要があります.デフォルトのエクスポートは、patreonのNPMモジュールの設定されていないので、我々はインポートを探しているエクスポートを定義する必要があります.それで、我々のコードの最上位でpatreon パトロンからの輸出.私はそれを私はより明確に私が働いている機能を覚えているので、私はそれを別名を与えたが、あなたがしない場合は大丈夫です.

import { patreon as patreonAPI } from 'patreon'

次に、UIからアクセスできるようにエクスポート機能を作成します.それが提供する機能の説明的な名前を与えることを確認します.

export async function getRewardTiers() {

}

さて、この関数で新しいpatreonクライアントを初期化する必要があります.これは私自身(またはあなたのクライアント)のための静的なサイトであるので、私は私が新しいクライアントを作成するとき私が得る私のCreatorのアクセストークンを使用することができますPatreon Portal . クライアントを作成していない場合は、必ず確認してください.

新しいクライアントを作成するために、このCreatorのアクセストークンをPatreon APIに渡すことができます.セキュリティ目的のためにこのアクセストークン値を保持する定数を作成しました.Wixから秘密マネージャを使用するには、私の他のブログの記事のいくつかをチェックしてください.

const patreonAPIClient = patreonAPI(creator_access_token)

我々の新しいクライアントが初期化されたので、我々は /current_user or /current_user/campaigns endpoint . として/campaigns/${id} エンドポイントは、この1つのトップでリンクされたブログポストで注意されるように、NPMモジュールで働きません.私は現在のユーザーのキャンペーンにアクセスするつもりです.

patreonAPIClient('/current_user/campaigns')

Patreon APIクライアントは非同期ですので、この約束が返されるときに処理する必要があります.約束が戻るとストアオブジェクトをつかむことができます.

patreonAPIClient('/current_user/campaigns')
    .then(({ store }) => {
    })

このストアオブジェクトには、3つのものが含まれます:ユーザー、キャンペーン、および報酬.私はこの例の報酬に興味があるので、報酬を分析するつもりです.

const rewards = store.findAll('reward').map(reward => reward.serialize()

しかし、すべての報酬を望むだけでなく、私は報酬クライアントが貢献することができますので、私はURL値を設定してそれらをフィルタアウトしたい.これを行うには、オブジェクト構造を横切って報酬の属性を取得しなければなりません.属性オブジェクトの場合は、URLがNULLでない場合にオンにします.その上、私たちは本当にすべての関連情報を得るために報酬の特質オブジェクトを必要とするだけです.

let rewards = store.findAll('reward').map(reward => reward.serialize().data.attributes).filter(reward => reward.url)

報酬の配列として報酬の属性オブジェクトがあると、この配列を返す前に最後の1つのステップがあります.Corvidのリピータは、文字列の値を持つ“RHENT ID”プロパティを含むオブジェクトの配列を取ります.そこで、このIDをオブジェクトのそれぞれに追加する必要があります.報酬の配列内の各オブジェクトをループして、“RHENT ID”プロパティを追加しましょう.

for(let i = 0; i < rewards.length; i++){
    rewards[i]._id = `00${i}`
}

今、我々の報酬オブジェクトの我々の配列は、我々の約束から返される準備ができています.必ず報酬を返すようにしなさい.

return rewards

そして、最後に、我々がちょうど造ったこの機能が報酬データが呼び出し元のコードに達するのを確実にするリターンを持っていることを確認してください.

export async function getRewardTiers() {
    const patreonAPIClient = patreonAPI(access_token)
    return patreonAPIClient('/current_user/campaigns')
        .then(({ store }) => {
            let rewards = store.findAll('reward').map(reward => reward.serialize().data.attributes).filter(reward => reward.url)
            for(let i = 0; i < rewards.length; i++){
                rewards[i]._id = `00${i}`
            }
            return rewards
        })
}

すごい!今私たちの報酬データを私たちのUIで動作することができます.あなたのページには、報酬のティアーを表示するスイッチを切り替えます.

私たちがUIコードで行う必要がある最初のことは、報酬データを得るためにバックエンド関数をインポートすることです.これを行うには、標準のインポート表記法を使用し、バックエンドのコードファイルにトラバースします.

import { getRewardTiers } from 'backend/patreon.jsw'

今すぐエクスポートすることができますgetRewardTiers 関数.我々のページのonReady 関数は、ページのデータを設定して更新するために使用できる新しい変数を定義します.

let data

次はコールgetRewardTiers 関数を返します.

getRewardTiers().then((result) => {
    data = result
}

CIVIDは、ページを持っているリピータのように、異なるWixコンポーネントで動作するAPIを公開します.見るWix Repeater API , 我々は、我々はdata リピータの値を取得して設定するプロパティ.次に、データ変数の値をリピータのデータプロパティに設定します.

$w('#patreonRepeater').data = data

データが設定されると、リピータAPIのforEachItem 関数.これにより、繰り返し使用することでリピータ内の各項目にバインドされたデータだけでなく、特定の項目のリピータ内の各UI要素にもアクセスできます.これにより、グローバルUI要素を更新するのではなく、データとUI要素の配列内の選択されたデータ要素だけのコンテキストを更新できます.関数コールバックハンドラでは、パラメータ$ itemとitemdataを渡します.これらは、配列内のそのオブジェクトの選択UI要素と、その配列のインデックスの特定のデータだけで動作するようにします.インデックスIですべてにアクセスしなければならない代わりに、我々はそれを$ itemまたはitemdataでそれにアクセスすることができます.

$w('#patreonRepeater').forEachItem(($item, itemData) =>{
    $item('#rewardTitle').text = itemData.title
    $item('#rewardDescription').text = "To receive this reward, the monthly pledge is $"+ itemData.patron_amount_cents/100
    $item('#rewardLink').link = "https://www.patreon.com"+itemData.url
})

我々のページをプレビューするとき(我々はQAに行く)、我々は我々のサイトのためのパトリオン報酬ティアのリストを見ることができます.リンクをクリックすると、ユーザーがクレジットカード情報を入力して誓約を開始することができます.

これは、クリエイターのすべてのサポートレベルのすべてのクライアントに利用可能な集中着陸ページを作成するための素晴らしい機会です!