به‌روزرسانی‌های بی‌درنگ برای توسعه نرم‌افزار مدرن، به‌ویژه برای برنامه‌هایی که نیاز به اطلاعات به‌روز برای کاربران دارند، بسیار مهم هستند.
Appwrite یک پلتفرم محبوب باطن به عنوان یک سرویس است که مدیریت پایگاه داده، احراز هویت کاربر، مدیریت حساب و ذخیره سازی را ساده می کند. با ویژگی بلادرنگ خود، به‌روزرسانی‌های پایگاه داده برنامه فوراً در رابط کاربری ظاهر می‌شوند بدون اینکه نیازی به بازخوانی دستی یا پاسخ سرور داشته باشند.
این امر به ویژه برای برنامه های چت، تجزیه و تحلیل، یا تابلوهای امتیازی زنده بسیار حیاتی است. عملکرد بلادرنگ Appwrite همچنین می تواند برای ویژگی های پیچیده تر مانند پخش زنده یا ویرایش مشترک استفاده شود.
این پست وبلاگ نحوه استفاده از ویژگی بلادرنگ Appwrite برای ایجاد تابلوی امتیازات مسابقه در Nuxt.js را نشان می دهد. شما با استفاده از سیستم Appwrite’s Pink Design به تابلوی امتیازات خود، ظاهری منسجم و از نظر بصری جذاب می دهید.
کد منبع این پروژه در زیر موجود است:
تابلوی امتیازات مسابقه در زمان واقعی | GitHub
پرش به جلو:
پیش نیازها
برای ایجاد یک تابلوی امتیازات بلادرنگ در Nuxt.js، این شرایط را دنبال کنید:
- درک کاملی از جاوا اسکریپت، Vue.js، CSS و استایل داشته باشید. (اگر نیاز دارید در مورد هر یک از این موضوعات صحبت کنید، قبل از ادامه این آموزش، زمانی را به مطالعه آنها اختصاص دهید).
- بررسی کنید که Node.js روی رایانه شخصی شما (رایانه) نصب شده باشد
node -vدر ترمینال شما اگر نه، آن را از وب سایت رسمی دانلود و نصب کنید. - با اجرا کردن، مطمئن شوید که Yarn روی رایانه شخصی شما نصب شده است
yarn -vدر ترمینال شما اگر نه، آن را با اجرا نصب کنیدnpm install --location=global yarnدر ترمینال شما - بررسی کنید که Docker Desktop روی رایانه شخصی شما نصب شده باشد
docker -vدر ترمینال خود، یا این راهنما را برای نصب آن دنبال کنید. - با دنبال کردن این پست وبلاگ، یک نمونه Appwrite محلی را در رایانه شخصی خود تنظیم کنید.
- راه‌اندازی یک نمونه Appwrite از راه دور را با Appwrite Cloud (اختیاری اما توصیه‌شده) برای بهبود تجربه خود در نظر بگیرید. همچنین می توانید نمونه راه دور خود را در Digital Ocean یا Gitpod تنظیم کنید.
راه اندازی یک پروژه Nuxt
می توانید با رفتن به مخزن دلخواه خود در ترمینال و اجرای دستور زیر، یک پروژه جدید Nuxt.js ایجاد کنید:
npx nuxi init <project name>
با این حال، برای سرعت بخشیدن به فرآیند، پروژه خود را با این قالب شروع در GitHub بوت استرپ کنید. همراه با Nuxt 3، Appwrite’s Pink Design، و Appwrite’s Nuxt ماژول است. همچنین شامل برخی از توابع کمکی در utils پوشه
مخزن تولید شده خود را در فهرست محلی دلخواه خود کلون کنید و اجرا کنید yarn برای نصب وابستگی های ذکر شده در package.json.
راه اندازی یک پایگاه داده Appwrite
اگر یک حساب Appwrite Cloud دارید، اینجا را کلیک کنید تا آن را در مرورگر خود باز کنید و یک پروژه جدید ایجاد کنید.
در پروژه Appwrite خود بر روی آن کلیک کنید پایگاه های دادهو سپس بر روی آن کلیک کنید ایجاد پایگاه داده برای ایجاد یک پایگاه داده جدید
در پایگاه داده تازه ایجاد شده خود، یک مجموعه ایجاد کنید.
در تنظیمات برگه مجموعه جدید خود، به پایین بروید به روز رسانی مجوزها و تنظیم کنید هر به خواندن.
این تضمین می کند که هر کسی می تواند داده ها را در پایگاه داده شما مشاهده کند. اگر می‌خواهید کاربرانتان اسنادی را در پایگاه داده ایجاد، به‌روزرسانی یا حذف کنند، کادرهای لازم را علامت بزنید.
در مجموعه خود، بر روی ویژگی های را برگه و برای هر سند در مجموعه خود چند ویژگی ایجاد کنید.
شما چهار ویژگی ایجاد خواهید کرد:
-
car– رشته -
carNumber– عدد صحیح -
driver– رشته -
duration– عدد صحیح (در ثانیه)
پایگاه داده را با برخی از داده ها با کلیک بر روی نشان می دهد اسناد برگه و کلیک کنید سند ایجاد کنید.
پیاده سازی به روز رسانی زمان واقعی با Appwrite
تنظیم متغیرهای محیطی
در ویرایشگر کد خود، نام خود را تغییر دهید .env.example به .env. برای به روز رسانی فایل با داده های صحیح از پایگاه داده Appwrite خود، این راهنما را دنبال کنید:
- اگر پایگاه داده خود را با Appwrite Cloud ایجاد کرده اید، نقطه پایانی شما است
https://cloud.appwrite.io/v1. اگر یک نمونه محلی را اجرا می کنید، استفاده کنیدhttp://localhost/80به عنوان نقطه پایانی شما اگر در Digital Ocean یا Gitpod میزبانی می کردید، از نقطه پایانی ارائه شده برای پلتفرم انتخابی خود استفاده کنید. - شناسه پروژه خود را در آن ذخیره کنید
APPWRITE_PROJECT_ID، شناسه پایگاه داده شما درAPPWRITE_DATABASE_IDو شناسه مجموعه شما درAPPWRITE_COLLECTION_ID.
در فهرست اصلی پروژه خود، به روز رسانی کنید nuxt.config.ts با کد زیر:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
runtimeConfig: {
public: {
database: process.env.APPWRITE_DATABASE_ID,
collection: process.env.APPWRITE_COLLECTION_ID,
},
},
modules: ['nuxt-appwrite'],
appwrite: {
endpoint: process.env.APPWRITE_ENDPOINT,
project: process.env.APPWRITE_PROJECT_ID,
},
});
در اینجا، پیکربندی زمان اجرا Nuxt.js را برای خواندن داده ها از خود تنظیم می کنید .env فایل و راه اندازی کنید nuxt-appwrite ماژول با نقطه پایانی و شناسه پروژه صحیح.
دریافت داده از پایگاه داده Appwrite
باز کن app.vue و به روز رسانی کنید <script> با کد زیر تگ کنید:
<script setup>
import '@appwrite.io/pink';
import '@appwrite.io/pink-icons';
const config = useRuntimeConfig();
const { account, client, database } = useAppwrite();
// Create an anonymous session if it doesn't already exist
if (account.getSession === null) {
await account.createAnonymousSession();
}
// Get initial data from the database
const { documents } = await database.listDocuments(
config.database,
config.collection
);
// Add racing data to state
const { value: racingData } = useState('racingData', () => sortData(documents));
</script>
در اینجا شما کارهای زیر را انجام دادید:
- پیکربندی زمان اجرا را برای دسترسی به داده های خود تنظیم کنید
.envفایل - وارداتی
account،client، وdatabaseاز ماژول Nuxt.js Appwrite - یک جلسه Appwrite ناشناس ایجاد کرد تا هر کاربری بتواند به پایگاه داده شما دسترسی داشته باشد
- داده های اولیه را از پایگاه داده تابلوی امتیازات خود دریافت کرده و آن را برای دریافت آن تخریب کرده است
documentsکلید؛ این شامل آرایه ای از تمام اسناد در پایگاه داده شما است - آرایه اسناد خود را بر اساس مدت زمان با استفاده از یک تابع کمکی مرتب کرد (
sortData) و آرایه مرتب شده را به حالت Nuxt.js با اضافه کردracingDataبه عنوان نام متغیر آن
هنوز در تو app.vue، به روز رسانی <RacingLeaderboard> در شما <template> برچسب:
<template>
<NuxtLayout>
<RacingLeaderboard :data="racingData" />
</NuxtLayout>
</template>
اگر پروژه را با yarn dev و باز کنید localhost:3000 در ترمینال خود، رابط کاربری زیر را خواهید دید:
اشتراک در به روز رسانی های زمان واقعی
در app.vue <script> تگ کنید، کد زیر را اضافه کنید:
<script>
// ...previous code, do not delete; just add the one below
// Subscribe to real-time updates from the database
onMounted(() => {
try {
client.subscribe(
`databases.${config.database}.collections.${config.collection}.documents`,
(res) => updateState(racingData, res.payload)
);
} catch (error) {
console.log(error);
}
});
<script/>
در اینجا شما کارهای زیر را انجام دادید:
- برپایی
onMounted()برای اطمینان از اینکهclient.subscribe()روش فقط زمانی کار می کند که پروژه در مرورگر بارگذاری شود. این به این دلیل است که به آن نیاز داردwindowروشی که فقط در مرورگر موجود است - شما
client.subscribe()متد مکان دقیق اسناد شما را به عنوان کانال خود می گیرد و در صورت ایجاد هرگونه تغییر در اسناد در پایگاه داده، وضعیت شما را با یک تابع کمکی به روز می کند.
در اینجا پیش نمایشی از نحوه عملکرد آن است.
توجه داشته باشید که برای دیدن به روز رسانی های پایگاه داده خود نیازی به رفرش کردن مرورگر ندارید.
نتیجه
این پست وبلاگ عملکرد بلادرنگ Appwrite را در تابلوی امتیازات مسابقه نشان داد. این پست نحوه راه‌اندازی یک پروژه Nuxt.js با طراحی صورتی Appwrite، راه‌اندازی پایگاه داده Appwrite، پیاده‌سازی به‌روزرسانی‌های بلادرنگ با Appwrite و اشتراک به‌روزرسانی‌های بلادرنگ را شرح می‌دهد. با پیروی از این مراحل، توسعه‌دهندگان می‌توانند قابلیت‌های بلادرنگ را به برنامه‌های خود اضافه کنند و تجربه‌ای پویا و جذاب برای کاربر ایجاد کنند.
منابع
