ビルドは、Twitterの反応カウンターファウナ、netlifyとNuxtフレームワークを使用します.
Fauna is at the peak of serverless databases and providing scalable and secure infrastructure to organizations and individuals with easy integration with various frameworks. This article will build a Twitter counter with Fauna, Netlify, and the Nuxt framework. I used Fauna as my serverless database of choice because of its high scalability and consistency.
観客
あなたが中間のVueを持っているならば、この記事は従うのがより簡単です.Nuxtのバージョンです.js知識.NetLifyにNuxtプロジェクトを展開する方法も知っておくべきです.
ゴール
この記事を読んだ後、あなたはTwitterのカウンターを作成するNuxt Jamstackサイトと動物相のようなServerlessデータベースを使用する方法を知っている.
何が必要
このチュートリアルの目的は、ブログ投稿にTwitterの反応カウンターの種類を実装することです.私はすぐにこのチュートリアル中に参照として構築した個人ポートフォリオのウェブサイトを使用しています.次のパラグラフではNetlifyとFoounaを設定します.我々は、ブログのポストを識別し、適切に各記事をルーティングするために私たちのブログの記事とブログスラグを書くためにNuxtコンテンツモジュールを使用してコンテンツ管理システムです.我々が反応系を実行するので、スラグは大きな使用です.
計画を立てる
まず、ファウナのアカウントを設定します.開始するには、公式サイトに移動し、アカウントを作成する(here) , その後、アカウントにログインし、プロジェクトのデータベースを作成します.
私たちのブログの記事のための反応カウンターを格納する方法が必要ですので、我々はこれを行うには、新しいデータベースにコレクションを追加します.
属性によって文書の簡単な組織化と検索を可能にする索引を作成する
上記のイメージから、ソースコレクションとして使用される反応コレクションの下で“ReactionCount Count”というインデックスを作成します.条件フィールドでは、我々はデータを追加しました.検索することができる用語の一つとしてスラグ.
我々の動物の構成を使用して、我々は我々のNuXTアプリケーションで使用することができます私たちの動物のAPIキーを生成するクエリ
reaction_counter_database 成功しました.これを行うには、ダッシュボードに移動し、セキュリティセクションをクリックしてAPIを生成します.APIを生成するときは、環境変数ファイルのように安全な場所に保管しなければなりません
YOUR_FAUNA_SECRET_KEY , それが第三者によってアクセスできないように.動物のインストールNuxtアプリで
ここでは、FAUNAパッケージをインストールすることによって、私たちのNuxtアプリケーションで動物相を設定することができます.
npm install --save faunadb
@nuxtjs/axios APIリクエストを作る際のプラグインです.手動で実行してインストールできます.npm install @nuxtjs/axios
export default {
modules: ['@nuxtjs/axios']
}
.env 我々のアプリケーションのルートで作成されたファイルYOUR_FAUNA_SECRET_KEY = THE_KEY
publicRuntimeConfig: {
axios: {
baseURL: process.env.NODE_ENV === 'production' ? process.env.BASE_URL || 'http://localhost:8000/' : 'http://localhost:8000/',
}
},
8000 , これは、Serverless関数を実行する際にエラーを避けるためですファウナの秘密鍵の確保
我々は、我々のfauna API秘密を詮索好きな目から隠したいです.あなたの動物相API秘密を保護するためにNetlify機能の使用.あなたがプロジェクトを自動スケールすることができるServerlessな機能を構築するとき、あなたが強力な能力を与えてください.簡単に言えば、サーバ上で動作する関数です.これを行うには、NetLifyを訪問し、以前定義した環境変数を追加できます.
我々は、我々がうまく展開するとき、我々の動物相データベースを問い合わせるために、ここで我々の動物相秘密キーを保存します.netlify、ファウナ、ヌードを設定した後、我々はコードを書くに飛び込むことができます.やあ!
我々の動物相機能を書くこと
私たちのページが読み込まれると、私たちは私たちのブログ上のすべての反応を取得し、反応数を増やすことができるようにしたい.動物相機能は、我々が現在実現することに集中するものです.
私たちの反応カウンターを取得することができますが、最初に、私たちのNuxtプロジェクトのルートで関数のフォルダを作成する機能を記述し、このフォルダでは、fetchount反応を作成します.私たちのフェッチ反応関数を書くJSファイル.
注:一旦展開されると、NetLifyは自動的にすべてのServerlessな機能がある関数フォルダを見つけます.
const faunadb = require('faunadb');
exports.handler = async (event) => {
const q = faunadb.query;
const client = new faunadb.Client({
secret: process.env.YOUR_FAUNA_SECRET_KEY,
});
const { slug } = event.queryStringParameters;
if (!slug) {
return {
statusCode: 400,
body: JSON.stringify({
message: 'Blog slug not available',
}),
};
}
const doesDocExist = await client.query(
q.Exists(q.Match(q.Index('reaction_count'), slug))
);
if (!doesDocExist) {
await client.query(
q.Create(q.Collection('reactions'), {
data: { slug: slug, reactions: 1 },
})
);
}
const document = await client.query(
q.Get(q.Match(q.Index('reaction_count'), slug))
);
return {
statusCode: 200,
body: JSON.stringify({
reactions: document.data.reactions,
}),
};
};
1 我々のスラグをユニークな識別子として使うこと.我々は、作成されたReactionRangeカウントインデックスのクエリを送信し、我々の反応を取得し、ブログの反応数を返します.増加反応カウント機能
この関数の主な目的は、私たちのブログ記事の反応数を増やすことです.以下に示すように、それはフェッチ反応関数とほぼ同じです.違いは、我々が反応カウントを増やしているということです.
注意:この関数は、ブログ投稿のリーダーが反応ボタンをクリックしたときに呼び出される関数です.
これを行うには、私たちの関数フォルダに新しいファイルを作成します.jsとペーストコード.
const faunadb = require('faunadb');
exports.handler = async (event) => {
const q = faunadb.query;
const client = new faunadb.Client({
secret: process.env.YOUR_FAUNA_SECRET_KEY,
});
const { slug } = event.queryStringParameters;
if (!slug) {
return {
statusCode: 400,
body: JSON.stringify({
message: 'Blog slug not available',
}),
};
}
const doesDocExist = await client.query(
q.Exists(q.Match(q.Index('reaction_count'), slug))
);
if (!doesDocExist) {
await client.query(
q.Create(q.Collection('reactions'), {
data: { slug: slug, reactions: 1 },
})
);
}
const document = await client.query(
q.Get(q.Match(q.Index('reaction_count'), slug))
);
await client.query(
q.Update(document.ref, {
data: {
reactions: document.data.reactions + 1,
},
})
);
const updatedDocument = await client.query(
q.Get(q.Match(q.Index('reaction_count'), slug))
);
return {
statusCode: 200,
body: JSON.stringify({
reactions: updatedDocument.data.reactions,
}),
};
};
1 当社のデータベースの更新プログラムを実行します.当社の機能を使用してNuxtアプリ
我々が以前に作成した関数を使用して、我々はTwitterの愛反応ボタンをSVGを使用して作成し、クリックイベントを割り当てます.我々が愛反応をクリックするとき、機能はそれを取得して、愛反応を増やすServerlessな関数にアクセスします.
注:アプリケーションを配備するときに、関数を配置できます.関数の名前
我々のアプリケーションのコンポーネントフォルダで、我々はTwitterReactionを作成します.我々が我々の愛反応とボタンを家に送るVue成分.
// TwitterReaction.vue
<template>
<div>
<button @click="addReaction" class="focus:outline-none">
{{ initialReaction }}
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
></path>
</svg>
</button>
</div>
</template>
// TwitterReaction.vue
<script>
export default {
data() {
return {
initialReaction: null
}
},
async fetch() {
const { data } = await this.$axios.get(
`/.netlify/functions/fetch_reactions?slug=${this.$route.params.slug}`
)
this.initialReaction = data.reactions
},
fetchOnServer: false,
methods: {
addReaction() {
this.initialReaction++
this.incrementLikes()
},
async incrementLikes() {
await this.$axios.post(
`/.netlify/functions/increment_reactions?slug=${this.$route.params.slug}`
)
}
}
}
</script>
initialReaction , そして、fetchchen反応関数を使用して、我々は反応を得て、我々にそれをセットしましたinitialReaction . 静的モードを使用しているのでfetchOnServer to false 取得フックを確実にするには、コンポーネントがマウントされるたびに呼び出されます.その後、読者が反応ボタンをクリックするたびに、我々は
addReaction 我々の反応数を増やす方法.Conclusion
Yayy!我々は最終的にチュートリアルの最後に来ている.このチュートリアルでは、JamstackサイトでServerlessデータベースを使用する方法を学びました.また、NetLifyを設定し、APIキーを隠してみました.最後に、“Twitterのような”反応カウンターを作成しました.
何か質問があれば、私にメッセージを送ってください.
資源
Indexing 動物相
Reference
この問題について(ビルドは、Twitterの反応カウンターファウナ、netlifyとNuxtフレームワークを使用します.), 我々は、より多くの情報をここで見つけました https://dev.to/umavictor6/build-a-twitter-reaction-counter-using-faunadb-netlify-and-the-nuxt-framework-3mc1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol