كيفية إنشاء تطبيق SvelteKit؟

SvelteKit هو إطار عمل قوي لبناء تطبيقات الويب يجمع بين بساطة وأداء إطار عمل Svelte مع ميزات إضافية. إنه الإطار الرسمي لبناء التطبيقات باستخدام Svelte.

يعتمد SvelteKit على مبادئ Svelte، وهو إطار عمل قائم على المكوّنات يقوم بتجميع شيفرة تطبيقك إلى شيفرة JavaScript عالية الكفاءة أثناء عملية الإنشاء.

يأخذ SvelteKit هذا الأمر خطوة إلى الأمام من خلال توفير إطار عمل متكامل للتطبيقات يوفر ميزات مثل التوجيه، والعرض من جانب الخادم (SSR)، وتقسيم التعليمات البرمجية خارج الصندوق.

في هذه المقالة، سوف تستكشف SvelteKit وتنشئ تطبيقًا أساسيًا باستخدام SvelteKit و Back4app.

مزايا SvelteKit

يوفر SvelteKit العديد من المزايا. فيما يلي بعض المزايا الرئيسية لـ SvelteKit:

الأداء

تشتهر SvelteKit بأدائها الاستثنائي. لديه حجم إطار عمل صغير مما يؤدي إلى سرعة تحميل الصفحات الأولية. يستخدم SvelteKit أيضًا التحديثات التفاعلية التي تقوم بتحديث أجزاء DOM التي تتغير فقط. ينتج عن ذلك تطبيق عالي الأداء سريع الاستجابة وسهل الاستخدام.

يقوم SvelteKit بتجميع كود التطبيق أثناء عملية الإنشاء، مما ينتج عنه كود JavaScript مُحسَّن وفعال للغاية. هذا النهج يلغي الحاجة إلى إطار عمل وقت التشغيل، مما يؤدي إلى أوقات تحميل أسرع وأداء أفضل.

حجم الحزمة الصغيرة

يولد SvelteKit أحجام حزم صغيرة مقارنةً بالأطر الأخرى. يحقق ذلك من خلال تضمين الشيفرة الضرورية فقط لكل مكون، مما يؤدي إلى الحد الأدنى من النفقات العامة. هذا مفيد جدًا للمستخدمين الذين لديهم اتصالات إنترنت أبطأ أو نطاق ترددي محدود.

يعمل حجم حزمة SvelteKit الصغير على تحسين الأداء وتعزيز تجربة المستخدم على الأجهزة المحمولة. كما أنه يتيح تقسيم الشيفرة البرمجية بكفاءة، والتحميل البطيء، مما يحسن تجربة المطور.

نظام بيئي غني بالمكونات

يعد النظام البيئي الغني بالمكونات ميزة كبيرة لـ SvelteKit. يوفر SvelteKit للمطورين مجموعة واسعة من المكونات المبنية مسبقًا والقابلة للتخصيص والتي يمكن دمجها بسهولة في تطبيقاتهم.

يمكن للنظام البيئي الغني للمكونات في SvelteKit تسريع عملية التطوير، وتحسين اتساق واجهة المستخدم، وتعزيز إمكانية إعادة استخدام الشيفرة البرمجية. كما أنه يتيح النماذج الأولية السريعة والتوسعة مع مكتبات وأدوات أخرى.

العرض من جانب الخادم (SSR)

يوفر SvelteKit وظيفة العرض من جانب الخادم، مما يتيح للمطورين عرض الصفحات على الخادم مسبقًا قبل تسليمها إلى العميل. يعزز هذا النهج من سرعة تحميل الصفحات الأولية، ويحسن من ظهورها على محرك البحث، ويرفع من تجربة المستخدم بشكل عام.

يعمل العرض من جانب الخادم في SvelteKit على تحسين الأداء العام لتطبيق SvelteKit. كما أنه يتيح التخزين المؤقت، والمحتوى الديناميكي، والتنقل السلس، ومشاركة التعليمات البرمجية.

توجيه مدمج

يوفر SvelteKit نظام توجيه مدمج يبسط إدارة مسارات التطبيق. فهو يسمح للمطورين بتعريف المسارات بشكل تعريفي. يمكن للمطورين أيضًا تحديد مسارات بمعلمات لإنشاء صفحات ديناميكية.

يوفر نظام التوجيه الخاص بـ SvelteKit التنقل البرمجي. حيث يمكن للمطورين استخدام الدوال التي يوفرها SvelteKit للتنقل إلى مسارات مختلفة برمجيًا. كما يوفر SvelteKit أيضًا دوال حراس المسار والوظائف الوسيطة، مما يسمح للمطورين بتنفيذ منطق توجيه متقدم.

حدود SvelteKit

على الرغم من أن SvelteKit تقدم العديد من المزايا، إلا أن لها أيضًا بعض القيود التي يجب أن يكون المطورون على دراية بها. إليك بعضها:

منحنى التعلم

تعد SvelteKit جديدة نسبيًا مقارنةً بالأطر الأخرى مثل React أو Angular، لذا قد تتوفر موارد تعليمية أقل. يقدم SvelteKit بعض المفاهيم والصيغ الفريدة من نوعها، والتي يمكن أن تشكل تحديًا للمطورين الجدد.

قد يجد المطورون المألوفون بالفعل على Svelte سهولة في الانتقال إلى SvelteKit، ولكن قد يحتاج المطورون الجدد على Svelte إلى استثمار الوقت في تعلم إطار العمل.

الدعم المجتمعي المحدود

نظرًا لأن SvelteKit لا تزال تكتسب شعبية، فقد لا يكون الدعم المجتمعي لها واسع النطاق مثل الأطر الأخرى. قد يجعل الدعم المجتمعي المحدود ل SvelteKit من الصعب على المطورين التعلم واستكشاف الأخطاء وإصلاحها والعثور على وظائف.

ومع ذلك، فإن المجتمع آخذ في النمو، وهناك طرق للتخفيف من تأثير الدعم المحدود. على سبيل المثال، يمكن للمطورين التفاعل مع مجتمع Svelte الحالي من خلال المنتديات ومنصات التواصل الاجتماعي.

التوافق مع قواعد البرمجة الحالية

إذا كانت لديك قاعدة شيفرة حالية مصممة بإطار عمل مختلف، فقد يتطلب ترحيلها إلى SvelteKit جهدًا كبيرًا. يتبع SvelteKit نهجًا معماريًا مختلفًا، مما يتطلب منك إعادة كتابة منطق قاعدة الشيفرة بأكملها.

يقدّم SvelteKit نظام التوجيه الخاص به، والذي يمكن أن يتعارض مع آليات توجيه قاعدة الشيفرة الحالية. عند الترحيل إلى SvelteKit، قد تحتاج إلى تعلم مفاهيم جديدة وتكييف معرفتك الحالية.

مقدمة المشروع

باتباع هذا البرنامج التعليمي، ستقوم ببناء تطبيق ملاحظات أساسي باستخدام إطار عمل SvelteKit. سيوفر تطبيق التغذية الراجعة وظيفة CRUD (إنشاء وقراءة وتحديث وحذف) واستخدام Back4app لتخزين البيانات.

بناء تطبيق SvelteKit

لإنشاء تطبيق Sveltekit، قم بتشغيل الأمر التالي في جهازك الطرفي:

npm create svelte@latest feedback-application

بمجرد تشغيل التعليمات البرمجية أعلاه، ستوجهك عدة مطالبات خلال تهيئة تطبيقك. ستبدو المطالبات على النحو التالي:

بعد تكوين التطبيق الخاص بك، انتقل إلى دليل التطبيق وقم بتثبيت التبعيات اللازمة. للقيام بذلك، قم بتشغيل التعليمات البرمجية التالية في جهازك الطرفي:

cd feedback-application
npm install

لقد نجحت الآن في إنشاء تطبيق الملاحظات وتثبيت التبعيات اللازمة. ستضيف بعض خطوط Google إلى تطبيقك لتحسين مظهر التطبيق. للقيام بذلك، تحتاج إلى إضافة الروابط إلى الخطوط في ملف app.html الخاص بك، الموجود في الدليل src. يمكن العثور على الروابط على موقع Google Fonts.

الخطوط التي ستستخدمها في تطبيقك هي خطي Comforter و Montserrat. يمكنك استخدام هذين الخطين في تطبيقك عن طريق إضافة الكود التالي إلى علامة الرأس في ملف app.html الخاص بك.

<!-- app.html -->
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Comforter&display=swap>" rel="stylesheet">

بعد ذلك، يمكنك إضافة بعض الأنماط العامة إلى التطبيق. للقيام بذلك، انتقل إلى ملف global.css العام في مجلد الأنماط. يمكنك العثور على مجلد الأنماط في دليل src.

في الملف global.css، اكتب هذا الرمز في الملف global.css:

/* global.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 40%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: #f2f2f2;
}

input{
    border: none;
    border-radius: 12px;
    padding: 1rem;
    background-color: #FFFFFF;
    color: #808080;
    inline-size: 100%;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    color: #f2f2f2;
    background-color: #333333;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color: #f2f2f2;
    color: #333333;
}

بعد ذلك، تقوم بإنشاء تخطيط للتطبيق. تقوم بتعريف تخطيط التطبيق الخاص بك باستخدام ملف +layout.svelte. ملف +Llayout .svelte هو ملف خاص لإنشاء مكونات تخطيط قابلة لإعادة الاستخدام تحدد بنية تخطيطات صفحتك. تأكد من إنشاء ملف +layout.svelte في دليل src/routes.

حدد تخطيط تطبيقك هكذا:

<!-- +layout.svelte -->
<script>
    import '../style/global.css'
</script>

<header>
    <h1>Feedback App</h1>
</header>
<slot></slot>

<style>

    h1{
        text-align: center;
        padding: 1rem 0;
        font-family: 'Comforter', cursive;
    }

</style>

كتلة الشيفرة أعلاه تستورد ملف global.css، وتطبق الأنماط العامة على تطبيقك. كما أنه يحدد عنصر رأس. يوجد داخل عنصر الرأس عنصر h1 يحتوي على عنصر h1 بنص “تطبيق الملاحظات”.

يحدد عنصر الفتحة عنصرًا نائبًا لمحتوى الصفحة. عند عرض صفحة، يقوم التطبيق بإدراج محتواها في الفتحة، مما يجعلها مرئية داخل التخطيط. في قسم النمط من كتلة التعليمات البرمجية، تقوم بتصميم عنصر h1.

لقد حددت الآن الأنماط والتخطيط لتطبيقك. بعد ذلك، ستقوم بإنشاء الصفحة الرئيسية لتطبيقك. للقيام بذلك، اكتب الشيفرة التالية في ملف +page.svelte الخاص بك، الموجود في دليل src/routes.

<!-- +page.svelte -->
<script lang="ts">
    let data = {
        feedback: '',
        rating: '',
    }

    const handleClick = (event: any) => {
        data.rating = event.target.value;
    }
</script>

<div class="page">
    <form>
        <input type="text" placeholder="Share your thought" name="feedback" bind:value={data.feedback}/>

        <div class="rating">
            <input type="button" value="1" class="button" on:click={handleClick}>
            <input type="button" value="2" class="button" on:click={handleClick}>
            <input type="button" value="3" class="button" on:click={handleClick}>
            <input type="button" value="4" class="button" on:click={handleClick}>
            <input type="button" value="5" class="button" on:click={handleClick}>
        </div>

        <button>Post</button>
    </form>
</div>

<style>
    form{
        margin-block-start: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .button{
        border-radius: 100%;
        color: #333333;
        padding: 1rem 1.5rem;
        background-color:#ffffff;
    }

    .button:hover{
        background-color: #333333;
        color: #f2f2f2;
    }

    .rating{
        display: flex; 
        gap: 5rem;
    }
</style>

تنشئ كتلة التعليمات البرمجية أعلاه نموذج ملاحظات مع نظام تقييم بسيط. يمكنك إدخال أفكارك في حقل نصي وتقييم تجربتك بالنقر على الأزرار المرقمة. يخزن التطبيق بعد ذلك مدخلاتك في كائن البيانات.

تُخزِّن دالة التعامل مع النقر تقييمك في خاصية data.rating ويخزِّن توجيه الربط ملاحظاتك في خاصية data.feedback. يُتيح لك توجيه الربط تحقيق ربط بيانات ثنائي الاتجاه بين قيم المدخلات والبيانات في مكوّنك.

يمكنك الآن عرض تطبيقك على متصفح الويب الخاص بك. للقيام بذلك، انتقل إلى دليل المشروع الخاص بك في المحطة الطرفية وقم بتشغيل الأمر التالي:

npm run dev

سيؤدي تشغيل الأمر أعلاه إلى تزويدك بالرابط http://localhost:5173/. انتقل إلى هذا الرابط على متصفح الويب الخاص بك، ويمكنك عرض تطبيقك.

إذا كنت تتبع البرنامج التعليمي بشكل صحيح، يجب أن يبدو تطبيقك بهذا الشكل:

دمج تطبيق Back4app مع تطبيقك

Back4App عبارة عن منصة دعم كخدمة (BaaS) توفر لك الأدوات والبنية التحتية اللازمة لبناء وإدارة وظائف الواجهة الخلفية لتطبيقاتك. باستخدام Back4App، يمكنك التركيز على إنشاء ميزات رائعة لتطبيقك دون القلق بشأن تعقيدات إعداد خادم الخلفية وصيانته. يوفر Back4App العديد من الميزات الرائعة، بما في ذلك إدارة قاعدة البيانات، ومصادقة المستخدم، واستضافة واجهة برمجة التطبيقات، وغير ذلك الكثير.

إنشاء حساب Back4app

قبل أن تتمكن من استخدام الميزات الرائعة التي يقدمها تطبيق Back4app، يجب أن يكون لديك حساب Back4app. يمكنك إنشاء حساب باتباع هذه الخطوات البسيطة:

1. قم بزيارة موقع Back4app الإلكتروني.
2. انقر على زر “تسجيل”.
3. املأ نموذج التسجيل وأرسله.

تقديم مُلحق Back4app ChatGPT الإضافي

باتباع الاتجاهات الحديثة لاستخدام الذكاء الاصطناعي لتسهيل حياة المطورين، قدم تطبيق Back4app المكون الإضافي ChatGPT. يساعد هذا المكون الإضافي المطورين وغير التقنيين على إنشاء تطبيقات Back4app والتفاعل معها.

باستخدام المكون الإضافي، يمكنك تحويل محادثاتك مع ChatGPT إلى تطبيقات حقيقية. هذا يعني أنه حتى إذا كنت جديدًا في التطوير أو جديدًا في استخدام منصة Back4App، فلا يزال بإمكانك إنشاء تطبيق Back4App وتخصيصه بسهولة.

لتتمكن من استخدام الإضافات على ChatGPT، تأكد من اشتراكك في ChatGPT Plus. بعد الاشتراك في ChatGPT Plus، إذا لم تكن مشتركاً بالفعل، انقر على زر “GPT-4” ، وستظهر لك نافذة منبثقة تحتوي على خيارات.

حدِّد خيار الإضافات، ثم حدِّد إضافة Back4app. سيتيح لك هذا استخدام إضافة Back4app’s ChatGPT الخاصة بـ Back4App.

إنشاء تطبيق Back4app باستخدام المكوّن الإضافي

مع المكون الإضافي Back4app على ChatGPT، فإن إنشاء تطبيق Back4app سهل. ما عليك سوى إخبار ChatGPT بنوع التطبيق الذي تريد إنشاءه، وسيقوم بالباقي.

على سبيل المثال:

بعد إنشاء التطبيق، انتقل إلى موقع Back4app على الويب، وقم بتسجيل الدخول، وتحقق من تطبيقاتك للتأكد من إنشاء التطبيق.

إضافة بيانات إلى تطبيق Back4app

يمكنك إضافة البيانات إلى تطبيقك باستخدام المكون الإضافي ChatGPT الخاص بـ Back4app. هنا، ستطلب من ChatGPT إنشاء فئة ملاحظات في تطبيق الملاحظات وتعبئتها بملاحظات مخصصة.

إليك مثال على كيفية القيام بذلك:

تنشئ الإضافة فئة الملاحظات في التطبيق وتطلب مثالاً للملاحظات المخصصة التي تريد إضافتها.

بعد إعطاء مثال على الملاحظات المخصصة، تقوم الإضافة بإنشاء الملاحظات والتقييم لتتماشى معها في التطبيق. يمكنك إضافة المزيد من الملاحظات والتقييمات إلى التطبيق من خلال تقديمها إلى ChatGPT.

الآن، يمكنك التأكد من أن المكون الإضافي قد أنشأ فئة الملاحظات والملاحظات والتقييمات المخصصة في تطبيقك.

الاتصال ب Back4app

الخطوة التالية هي توصيل تطبيقك بتطبيق Back4app. للقيام بذلك، تحتاج إلى تثبيت Parse JavaScript SDK. يمكنك تثبيته عن طريق تشغيل التعليمات البرمجية التالية في جهازك الطرفي:

npm install parse

بمجرد الانتهاء من تثبيت Parse JavaScript SDK. ستستخدم معرف التطبيق وبيانات اعتماد Javascript KEY. يمكنك العثور على بيانات الاعتماد هذه في قسم الأمان والمفاتيح في لوحة تحكم تطبيق Back4app الخاص بك. قم بتخزين معرف التطبيق ومفتاح جافا سكريبت بشكل آمن في تطبيقك.

استورد الإصدار المصغّر من Parse من Parse إلى ملف +page.svelte في الدليل src، واستدعِ طريقة التهيئة. تأخذ هذه الطريقة معرف التطبيق وبيانات اعتماد Javascript KEY كوسيطات.

على سبيل المثال:

//+page.svelte
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);

لاحظ أنه عليك إضافة كتلة التعليمات البرمجية أعلاه ضمن علامة البرنامج النصي لملف +page.svelte. بعد استدعاء أسلوب التهيئة في Parse، فإن الخطوة التالية هي تعيين خاصية serverURL في Parse إلى https://parseapi.back4app.com/.

هكذا

//+page.svelte
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";

جلب البيانات من Back4app

قبل عرض البيانات الموجودة بالفعل على تطبيق Back4app الخاص بك، ستحتاج إلى جلب البيانات. لجلب البيانات، ستقوم بإنشاء دالة fetchFeedbacks. ستحتوي هذه الدالة على المنطق الذي يجلب التعليقات والتقييمات من تطبيقك.

قبل إنشاء الدالة، أنشئ مكون بطاقة. يحدد مكون البطاقة شكل ومظهر ملاحظاتك. لإنشاء مكون البطاقة، أنشئ أولًا مجلد مكونات في دليل src. بعد ذلك، أنشئ ملف card.svelte في مجلد المكونات.

في ملف card.svelte، اكتب هذا الرمز في ملف card.svelte:

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
</script>

<div class="card">
	 <h5>{feedback}</h5>
	 <p>{rating} ratings</p>
</div>

<style>
	.card{
	    display: flex;
	    justify-content: space-between;
	    padding: 1rem;
	    background-color: #FFFFFF;
	    border-radius: 12px;
	    inline-size: 100%;
	    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

تُعرِّف هذه الشيفرة مكون البطاقة. في الوسم النصي، تُصدِّر الشيفرة متغيرات الملاحظات والتقييم كخاصيات. هذا يعني أنّ المكوّنات التي تستورد هذا المكوّن يمكنها تحديد قيم هذه الخاصيّات. تُهيئ الشيفرة متغير الملاحظات إلى سلسلة فارغة ومتغير التقييم إلى 0.

تمثل علامة div البنية الرئيسية لمكون البطاقة، وتحتوي علامة النمط على أنماط CSS المطبقة على مكون البطاقة.

بعد ذلك، في علامة النص البرمجي في +page.svelte، استورد مكوّن البطاقة، وأنشئ دالة fetchFeedbacks.

هكذا

//+page.svelte
import Card from "../components/card.svelte";
import { onMount } from "svelte";

let feedbackData: any = [];

const fetchFeedbacks = async () => {
  try {
    const query = new Parse.Query("Feedback");
    const feedbacks = await query.find();
    feedbackData = feedbacks;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchFeedbacks);

يحدد هذا الرمز دالة fetchFeedbacks. يستخدم أيضًا خطاف دورة حياة onMount لجلب الملاحظات من قاعدة البيانات عن طريق استدعاء الدالة fetchFeedbacks.

تستخدم الدالة fetchFeedbacks طريقة Parse.Query() للبحث عن كائن “ملاحظات” في قاعدة بيانات تطبيقك. ثم تقوم بإرجاع مصفوفة من نتائج الاستعلام عن طريق استدعاء طريقة Parse .Query () الخاصة ب Parse .Query() على نتيجة استدعاء Parse.Query(). وأخيرًا، يقوم بتعيين مصفوفة النتائج إلى متغير feedbackData.

والآن، في علامة div التي تحتوي على عناصر HTML لملف +page.svelte، يمكنك استخدام كل كتلة من Svelte لعرض البيانات في مصفوفة بيانات الملاحظات.

على سبيل المثال:

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
	    <Card feedback={feedback.get('feedbackText')} rating={feedback.get('rating')}/>
	{/each}  
</div>

داخل الوسم div، يقوم كل مكوِّن بتكرار كل مكوِّن على مصفوفة التغذية الراجعة ويعين كل عنصر إلى التغذية الراجعة المتغيرة. لكل تعليق في المصفوفة، تقوم بتصيير مكون البطاقة. تحصل على قيم نص الملاحظات والتقييم باستخدام أسلوب get() الخاص بالملاحظات. بعد ذلك تمرر القيم إلى خاصيتي التغذية الراجعة والتقييم في مكون البطاقة.

قم بتصميم علامة div مع ملاحظات الفئة عن طريق إضافة كتلة التعليمات البرمجية أدناه إلى علامة النمط في ملف +page.svelte:

/* +page.svelte */
.feedbacks{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block-start: 3rem;
	border: 2px #e2e2e2 solid;
	padding: 2rem;
	border-radius: 7px;
}

إضافة البيانات إلى تطبيق Back4app من التطبيق

في البداية، قمت بإضافة البيانات إلى تطبيق Back4app الخاص بك باستخدام المكون الإضافي ChatGPT الخاص بـ Back4app، ولكن لن يتمكن مستخدمو تطبيقك من القيام بذلك. للسماح للمستخدمين بالقدرة على إضافة البيانات من تطبيقك، ستقوم بإنشاء وظيفة تضيف ملاحظات وتقييمات جديدة إلى قاعدة بيانات تطبيق Back4app الخاص بك.

هكذا

// +page.svelte
const handleSubmit = () => {
  try {
    const Feedback = new Parse.Object("Feedback");
    Feedback.set("feedbackText", data.feedback);
    Feedback.set("rating", +data.rating);
    Feedback.save().then(() => {
      console.log("New Feedback added successfully");
    });
  } catch (error) {
    console.log(error);
  }

  fetchFeedbacks();
};

أضف كتلة الشيفرة أعلاه إلى علامة النص البرمجي في ملف +page.svelte. تنشئ الدالة handSubmit() كائنًا جديدًا جديدًا من Parse “ملاحظات” وتعيّن خاصيتي نص الملاحظات والتقييم إلى قيم البيانات.feedback والبيانات.rating. ثم تحفظ الكائن إلى خادم Parse باستخدام طريقة حفظ(). أخيرًا، تستدعي الدالة الدالة fetchFeedbacks().

الآن اربط الدالة handleSubmit بالنموذج في ملف +page.svelte باستخدام ربط الحدث. يمكنك ربط الدالة بحدث الإرسال عند:الإرسال بحيث يتم تشغيل الدالة كلما أرسل المستخدم النموذج.

<form on:submit={handleSubmit}>
	<input 
	type="text" 
	placeholder="Share your thought" 
	name="feedback" 
	bind:value={data.feedback}
	/>
	
	<div class="rating">
	    <input type="button" value="1" class="button" on:click={handleClick}>
	    <input type="button" value="2" class="button" on:click={handleClick}>
	    <input type="button" value="3" class="button" on:click={handleClick}>
	    <input type="button" value="4" class="button" on:click={handleClick}>
	    <input type="button" value="5" class="button" on:click={handleClick}>
	</div>
	
	<button>Post</button>
 </form>

حذف البيانات من Back4app

يمكنك حذف البيانات من تطبيق Back4app باستخدام طريقة التدمير لإزالة السجل (السجلات) المقابلة من قاعدة البيانات الخاصة بك. أنشئ دالة حذف الملاحظات التي تحتوي على منطق حذف الملاحظات من قاعدة بيانات تطبيقك استنادًا إلى مُعرِّف مُعيَّن.

قبل إنشاء دالة DeleteFeedback، حدِّث مكوّن البطاقة بإضافة خاصية DeleteFeedback وعنصر زر تربطه بخاصية DeleteFeedback باستخدام حدث النقر عند النقر. استبدل الشيفرة في ملف card.svelte الخاص بك بالكتلة البرمجية أدناه.

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
	export let deleteFeedback: any = '';
</script>

<div class="card">
	<div style="display: flex; flex-direction: column; gap: 1rem; ">
	<h5>{feedback}</h5>
	<button on:click={deleteFeedback}>Delete</button>
	</div>
	<p>{rating} ratings</p>
</div>

<style>
	.card{
	  display: flex;
	  justify-content: space-between;
	  padding: 1rem;
	  background-color: #FFFFFF;
	  border-radius: 12px;
	  inline-size: 100%;
	  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

أنشئ دالة حذف التعليقات في ملف +page.svelte:

// +page.svelte
const deleteFeedback = async (id: string) => {
  try {
    const Feedback = Parse.Object.extend("Feedback");
    const feedback = new Feedback();
    feedback.id = id;
    await feedback.destroy();
    const newData = feedbackData.filter((item: any) => item.id !== id);
    feedbackData = newData;
  } catch (error) {
    console.log(error);
  }
};

تنشئ الدالة DeleteFeedback كائن “ملاحظات” جديد باستخدام طريقة Parse.Object.extension. ثم تُعيِّن خاصية المُعرِّف للكائن إلى المُعرِّف الذي تم تمريره إلى الدالة. بعد ذلك، تستدعي الدالة طريقة التدمير غير المتزامن لكائن “ التغذية الراجعة” لحذف عنصر التغذية الراجعة الذي يحمل المعرف المحدد من Back4app.

تقوم الدالة بعد ذلك بتصفية مصفوفة بيانات الملاحظات باستخدام أسلوب feedbackData.filter. تقوم الدالة بتصفية عنصر الملاحظات الذي يحتوي على المعرف المحدد، مما يؤدي إلى إنشاء مصفوفة جديدة لا تحتوي على عنصر الملاحظات المحذوف. تقوم الدالة بعد ذلك بتعيين المصفوفة الجديدة إلى feedbackData.

مرر الآن دالة حذف التغذية الراجعة إلى خاصية حذف التغذية الراجعة لمكون البطاقة. بهذه الطريقة، كلما نقر المستخدم على عنصر الزر في مكوّن البطاقة، ستعمل دالة الحذفFeedback.

هكذا

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
		<Card 
		feedback={feedback.get('feedbackText')} 
		rating={feedback.get('rating')} 
		deleteFeedback={() => deleteFeedback(feedback.id)}
		/>
	{/each}  
</div>

اختبار التطبيق

لقد انتهيت من بناء التطبيق؛ الخطوة التالية هي اختباره. لاختبار التطبيق، انتقل إلى دليل التطبيقات على جهازك الطرفي وقم بتشغيل خادم التطوير.

بعد تشغيل خادم التطوير، افتح متصفحك وانتقل إلى الرابط التالي: http://localhost:5173/. يجب أن يبدو التطبيق مثل الصورة أدناه.

لإضافة ملاحظة، اكتب “أحب التطبيق حقًا” في حقل الإدخال، ثم انقر على الزر الذي يحمل النص “4” لتقييمه. أخيرًا، انقر على “نشر” لإرسال ملاحظاتك.

لتأكيد إضافتك لتعليق جديد، ستظهر بطاقة جديدة أسفل البطاقات السابقة مع نص “أحب التطبيق حقًا” وتقييم 4. يمكنك أيضًا الانتقال إلى لوحة تحكم التطبيق الخاص بك على Back4app لتأكيد ذلك.

لحذف تعليق ما عليك سوى النقر على زر الحذف. لتأكيد ذلك، احذف التعليق “كان التطبيق رائعًا”.

الخاتمة

SvelteKit هو إطار عمل لتطوير تطبيقات ويب قوية وفعالة باستخدام Svelte. وهو عبارة عن إطار عمل فائق، مما يعني أنه يوفر مجموعة من الأدوات والتجريدات التي يمكن استخدامها لبناء أي نوع من تطبيقات الويب.

يسمح دمج SvelteKit مع Back4app للمطورين بالتركيز على تطوير تطبيقات الواجهة الأمامية بينما يهتم Back4app بالواجهة الخلفية. يقلل Back4app من تعقيدات تطوير الواجهة الخلفية، مما يسهل على المطورين إنشاء تطبيقات ويب كاملة المكدس.

الأسئلة الشائعة