كيفية نشر تطبيق SvelteKit؟

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

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

في عام 2020، تم إنشاء SvelteKit على يد Rich Harris، مبتكر Svelte، وفي أكتوبر 2022، انضم Rich Harris وفريقه إلى شركة Vercel.

عند نشر تطبيق SvelteKit، من المفيد استخدام حاويات Back4app Containers. Back4app Containers هي منصة تسمح للمطورين بنشر وإدارة التطبيقات المعبأة في حاويات على البنية التحتية لـ Back4app.

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

ما هو SvelteKit؟

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

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

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

مزايا SvelteKit

فيما يلي بعض مزايا استخدام إطار عمل SvelteKit:

منحنى التعلُّم السهل

عند اختيار إطار عمل للواجهة الأمامية لتطوير الويب، فإن أحد العوامل الحاسمة التي يجب مراعاتها هو منحنى التعلم المرتبط بهذا الإطار.

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

يحتوي SvelteKit على منحنى تعليمي بسيط، خاصةً إذا كنت معتادًا على HTML و CSS و JavaScript. بناء الجملة الخاص به واضح وبديهي، مما يجعل من السهل فهم وبناء تطبيقات الويب.

دعم TypeScript

TypeScript هي مجموعة فائقة مكتوبة بشكل ثابت من JavaScript اكتسبت شعبية في عالم تطوير الويب. وهي تجلب كتابة قوية ووضوحًا في الشيفرة البرمجية وأدوات أفضل لمشاريع JavaScript.

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

التوجيه المستند إلى الملفات

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

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

المجتمع والنظام البيئي

في مجال تطوير الويب، يعد وجود مجتمع قوي وداعم إلى جانب نظام بيئي مزدهر ميزة كبيرة.

تستفيد SvelteKit من نظام Svelte البيئي الأوسع نطاقًا، والذي يتضمن مجتمعًا متناميًا، ومجموعة غنية من المكونات والمكتبات القابلة لإعادة الاستخدام، ووثائق شاملة.

حدود SvelteKit

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

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

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

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

أدوات محدودة

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

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

النظام البيئي المحدود

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

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

حجم المجتمع

يمكن أن يؤثر حجم المجتمع بشكل كبير على تجربة التطوير والدعم المتاح لإطار عمل معين.

على الرغم من أن مجتمع SvelteKit ينمو بسرعة، إلا أنه لا يزال أصغر من المجتمعات المحيطة بالأطر الرئيسية الأخرى مثل React و Vue.js.

وهذا قد يعني موارد أقل متاحة بسهولة، واعتماد أبطأ للميزات الجديدة، وموارد تعليمية أقل، وأوقات استجابة أطول محتملة لدعم المجتمع.

خيارات نشر SvelteKit

يمكنك نشر تطبيقات SvelteKit على منصات مختلفة، بما في ذلك البنية التحتية كخدمة (IaaS) والحاوية كخدمة (CaaS).

البنية التحتية كخدمة (IaaS)

منصات البنية التحتية كخدمة (IaaS) هي خدمات الحوسبة السحابية التي توفر موارد حوسبة افتراضية عبر الإنترنت. وتشمل هذه الموارد الأجهزة الافتراضية والتخزين والشبكات والمكونات الأساسية الأخرى.

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

كما أنها توفر خدمات مُدارة وخدمات النسخ الاحتياطي والتعافي من الكوارث والأمن والامتثال وفعالية التكلفة باتباع نموذج تسعير الدفع حسب الاستخدام.

تتضمن بعض الأمثلة على منصات IaaS التي يمكنك استخدامها لنشر تطبيقات SvelteKit ما يلي:

• Amazon Web Services (AWS)
• Microsoft Azure
• Google Cloud Platform (GCP)

الحاوية كخدمة (CaaS)

منصات الحاويات كخدمة (CaaS)، والمعروفة أيضًا باسم منصات إدارة الحاويات أو منصات تنسيق الحاويات، هي خدمات قائمة على السحابة تُبسّط نشر التطبيقات المجهزة في حاويات وتوسيع نطاقها وإدارتها وتنسيقها.

صُمِّمت هذه المنصات لتبسيط عملية إنشاء الحاويات وتوفير حل شامل لإدارة الحاويات، مما يتيح لك التركيز على تطوير تطبيقاتك دون تعقيدات إدارة البنية التحتية.

يمكنك نشر تطبيقات SvelteKit الخاصة بك باستخدام منصات CaaS. تتضمن بعض هذه المنصات ما يلي:

• Docker
• Kubernetes
• Back4App

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

عملية النشر

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

ما هي حاويات Back4app Containers؟

حاويات Back4App، المعروفة أيضًا باسم “Back4App CaaS” (الحاويات كخدمة)، هي ميزة يوفرها Back4App تتيح للمطورين نشر حاويات Docker وإدارتها في البيئة السحابية التي يوفرها Back4App.

إنه حل استضافة حاويات مُدار يعمل على تبسيط نشر وإدارة حاويات Docker في السحابة.

توفر حاويات Back4app Containers قابلية التوسع والمرونة والتكامل مع خدمات Back4App الأخرى، مما يجعلها مناسبة لمجموعة كبيرة من التطبيقات والخدمات.

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

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

في هذا البرنامج التعليمي، ستُنشئ تطبيقًا بسيطًا لتوليد الاقتباسات باستخدام SvelteKit، باستخدام واجهة برمجة تطبيقات الاقتباس لجلب اقتباسات عشوائية لعرضها.

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

npm create svelte@latest quote-generator

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

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

كما هو موضح في الصورة أعلاه، سيستخدم مشروع مولد الاقتباس صيغة TypeScript، و ESLint لتلوين الشيفرة، و Prettier لتنسيق الشيفرة.

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

cd quote-generator
npm install

بعد تثبيت التبعيات اللازمة، افتح المشروع على IDE المفضل لديك وابدأ في بناء التطبيق.

بناء التطبيق الخاص بك

عند إنشاء تطبيقك، أول شيء تفعله هو تحديد الأنماط والتخطيط العام للتطبيق. لتحديد الأنماط العامة لتطبيقك، قم بإنشاء مجلد أنماط في الدليل src وأضف ملف global.css إلى المجلد .

في ملف global.css، اكتب الأسطر البرمجية التالية:

/*global.css*/
@import url('<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 100%;
    block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #36454F;
    font-size: 15px;
    color: #FFFFF0;
    font-family: 'Montserrat', sans-serif;
}

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

button:hover{
    background-color:  #28282B;
    color: #333333;
}

تقوم كتلة الشيفرة أعلاه بإعداد بعض الأنماط الأساسية لتطبيقك. وهو يستورد خط مونتسيرات من Google Fonts.

كما أنها تطبق الأنماط الافتراضية لجميع العناصر، وتركز المحتوى على الجسم، وتضع أنماط عنصر الزر في حالتي التظليل والتمرير الافتراضية.

بمجرد الانتهاء من تحديد الأنماط العامة لتطبيقك، يجب عليك تطبيق الأنماط على التطبيق.

للقيام بذلك، تحتاج إلى مسار التخطيط. يوفر SvelteKit ملف +layout.svelte لمساعدتك في تحديد التخطيطات في تطبيقك. يمكنك تحديد تخطيط تطبيقك عن طريق إضافة ملف +layout.svelte إلى دليل src/routes.

في ملف +layout.svelte، استورد ملف global.css لتطبيق أنماطك العامة على التطبيق.

هكذا

<!--+layout.svelte-->
<script lang="ts">
    import '../styles/global.css'
</script>
  
<slot></slot>

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

في دليل src/lib الخاص بمشروعك، أنشئ ملف Card.svelte. هذا هو مكوّن البطاقة الذي ستستخدمه لتصيير البيانات التي تم جلبها من واجهة برمجة التطبيقات الخاصة بالاقتباس.

يجب أن يبدو مكون البطاقة بهذا الشكل:

<!-- Card.svelte -->
<script lang="ts">
    export let author: string = ""; 
    export let content: string = "";
</script>

<main>
    <h4>{author}</h4>
    <p>{content}</p>
</main>

<style>
    main{
        inline-size: 80%;
        padding: 3rem;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: #f2f2f2;
        color: #36454F;
    }
</style>

في الوسم النصي لمكوّن البطاقة، هناك خاصيّتان مُعرَّفتان، خاصية المؤلف وخاصية المحتوى. كلاهما من نوع السلسلة مع قيم أولية من السلاسل الفارغة.

يحدد العنصر الرئيسي قالب المكون. يتضمن القالب عنصر h4 الذي يعرض قيمة خاصية المؤلف وعنصر p الذي يعرض قيمة خاصية المحتوى. أخيرًا، تحتوي علامة النمط على خصائص وقيم CSS التي تصمم المكون.

والآن، قم باستيراد مكوّن البطاقة وتصييره في ملف +page.svelte. هذا هو المسار الرئيسي الذي يُعرض عند تصيير تطبيقك.

في ملف +page.svelte، ستجلب البيانات من واجهة برمجة التطبيقات الخاصة بالاقتباس وتمريرها إلى مكوّن البطاقة باستخدام خاصياته.

هكذا

<!-- +page.svelte -->
<script lang="ts">
    import Card from "$lib/Card.svelte";
    import Icon from '@iconify/svelte';
    import { onMount } from "svelte";

    let quote: any = {};

    const fetchQuote = async () => {
        const response = await fetch('<https://api.quotable.io/random>');
        const data = await response.json();
        quote = data;
    }

    onMount( fetchQuote );
</script>

<main>
   <h1>Quote Generator</h1>
    <Card author={quote.author} content={quote.content}/>
   <div>
        <button on:click={fetchQuote}>
            <Icon icon="subway:random" color="#FFF" />
        </button>
    </div>
</main>

<style>
    main{
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }

    h1{
        margin-block-end: 0.8rem;
    }
</style>

تقوم الكتلة البرمجية أعلاه بجلب البيانات من واجهة برمجة التطبيقات الخاصة بالاقتباس باستخدام الدالة fetchQuote ثم تعين البيانات التي تم جلبها إلى متغير الاقتباس.

يضمن تمرير دالة fetchQuote إلى خطاف onMount تشغيلها عند تثبيت المكوّن (أي عند التصيير الأولي للمكوّن).

يقبل مكون البطاقة قيم خصائص المؤلف والمحتوى من كائن الاقتباس ويعرضها. يؤدي النقر على الزر إلى تشغيل دالة fetchQuote لجلب اقتباس عشوائي آخر لعرضه.

تستخدم الشيفرة البرمجية أعلاه مكون أيقونة من الحزمة @iconify/svelte. لاستخدام هذا المكون، يجب عليك أولًا تثبيت الحزمة @iconify/svelte عن طريق تشغيل الأمر التالي في دليل مشروعك على طرفك الطرفي:

npm install --save-dev @iconify/svelte

بعد تثبيت الحزمة @iconify/svelte، قم بتشغيل تطبيقك على خادم التطوير لرؤية التطبيق. يمكنك القيام بذلك عن طريق تشغيل الأمر التالي على جهازك الطرفي:

npm run dev

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

يجب أن يبدو التطبيق بهذا الشكل:

إرساء التطبيق الخاص بك

قبل أن تتمكن من نشر تطبيقك على منصة Back4app CaaS، يجب عليك إرساءه أولاً. لإرساء تطبيق SvelteKit، تحتاج أولاً إلى تثبيت محول عقدة Svelte.

يمكنك تثبيت محول العقدة عن طريق تشغيل الأمر التالي في جهازك الطرفي:

npm i -D @sveltejs/adapter-node

يؤدي تشغيل هذا الأمر إلى تثبيت الحزمة @svelteKitjs/adapter-node كحزمة تابعة للتطوير في مشروع SvelteKit الخاص بك. تستخدم هذا المحول عندما تريد نشر تطبيق SvelteKit الخاص بك في بيئة Node.js.

بمجرد الانتهاء من تثبيت الحزمة، استبدل السطر الأول من الشيفرة في ملف svelte.config.js بالشفرة أدناه:

import adapter from '@sveltejs/adapter-node';

الخطوة التالية هي إنشاء ملف .dockerignore في الدليل الجذر لمشروعك. في ملف .dockerignore، حدد الملفات والدلائل التي يجب استبعادها عند بناء صورة Docker.

هكذا

node_modules
.svelte-kit
build
public

بعد تحديد الملفات والدلائل التي يجب استبعادها. أنشئ ملف Docker باسم Dockerfile في الدليل الجذر للمشروع.

في ملف Dockerfile، أضف هذه الأسطر من التعليمات البرمجية:

FROM node:18-alpine as build
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM node:18-alpine AS production
COPY --from=build /app/build .
COPY --from=build /app/package.json .
COPY --from=build /app/package-lock.json .
RUN npm ci --omit dev
EXPOSE 3000
CMD ["node", "."]

يؤدي ملف Dockerfile هذا إلى بناء متعدد المراحل، حيث تقوم المرحلة الأولى ببناء التطبيق والمرحلة الثانية بإنشاء صورة إنتاج أصغر مع التبعيات الضرورية فقط.

يمكنك الآن إنشاء صورة docker للتطبيق الخاص بك عن طريق تشغيل الأمر التالي في جهازك الطرفي:

docker build -t quote-generator .

نشر التطبيق الخاص بك

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

لإنشاء حساب Back4app، اتبع الخطوات التالية:

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

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

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

بمجرد ربط حساب GitHub الخاص بك ب Back4app، حدد مستودع تطبيقك للنشر.

قم بتسمية التطبيق وتهيئة النشر الأولي له قبل نشر التطبيق في النهاية.

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

الخاتمة

وختامًا، فإن نشر تطبيق SvelteKit باستخدام منصة Back4pp’s CaaS يسهّل عملية التطوير. العملية بسيطة.

يتضمن إنشاء التطبيق الخاص بك، وإرساء التطبيق، ودفع التطبيق إلى مستودع GitHub، وأخيراً نشر التطبيق.

عند التفكير في نشر تطبيقات SvelteKit الخاصة بك، توفر منصة Back4app CaaS.

إذا أعجبك هذا المقال، فقد تستمتع أيضًا بقراءة المقال كيفية إنشاء تطبيق SvelteKit باستخدام ChatGPT.

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