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

ستتعلم في هذه المقالة كيفية إنشاء تطبيق ويب باستخدام Svelte ونشره باستخدام حاويات Back4app.

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

نظرة عامة على المشروع: متتبع المخزون

ستعرض هذه المقالة أداة تعقب المخزون التي تتكامل مع قاعدة بيانات Back4App في الوقت الفعلي.

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

سيقوم المتتبع بتخزين التفاصيل الأساسية مثل اسم المنتج والسعر والكمية على Back4App.

فهي تُمكِّن المستخدمين من الحفاظ على مخزونهم ومراقبته بسهولة، مما يضمن الحصول على معلومات دقيقة ومُحدَّثة عن منتجاتهم.

إنشاء تطبيق Svelte

في هذا القسم، ستقوم في هذا القسم بإنشاء مشروع Svelte باستخدام Vite (أداة بناء إطار عمل أمامي).

يمكنك إنشاء تطبيق Svelte الخاص بك باستخدام Vite عن طريق تشغيل الأمر التالي في جهازك الطرفي:

npm init vite

بعد تشغيل هذا الأمر، اكتب اسمًا لمشروعك، وحدد إطار العمل (Svelte)، واختر متغير اللغة المفضل لديك لإطار العمل.

هكذا

توضّح الصورة أعلاه أن اسم مشروع Svelte هو Svelte، واسم مشروع Svelte هو “متتبع المخزون”، ومتغير اللغة هو JavaScript.

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

# Switch to the project directory
cd inventory-tracker

# Install dependencies
npm install

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

إنشاء تطبيق Svelte

في هذا القسم، ستنشئ تطبيق تعقب المخزون باستخدام Svelte و Back4app كميزة خدمة الخلفية كخدمة.

سيحتوي التطبيق على إمكانيات CRUD (إنشاء وقراءة وتحديث وحذف)، مما يسمح لك بإضافة البيانات وجلبها وتعديلها وحذفها.

قبل البدء في إنشاء تطبيق Svelte الخاص بك، تأكد من تثبيت مكتبة svelte-routing.

مكتبة svelte-routing هي مكتبة تضيف إمكانيات التوجيه إلى تطبيقات Svelte الخاصة بك، مما يسمح لك بإنشاء تطبيقات أحادية الصفحة (SPAs).

قم بتثبيت مكتبة svelte-routing عن طريق تشغيل الأمر أدناه:

npm i -D svelte-routing

بمجرد التثبيت، أنشئ مكوّن AddProduct ومكوّن الصفحة الرئيسية في دليل المشروع الخاص بك. في مكوّن AddProduct، أضف الأسطر البرمجية التالية:

<!-- AppProduct.svelte -->
<script>
	let product = {
	  name: "",
	  quantity: "",
	  price: "",
	}
</script>

<form>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
  <input type="number" placeholder="No of Products" bind:value={product.quantity}>
  <input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
		<button>Add Product</button>
	</div>
</form>

<style>
	form{
		display: flex;
		flex-direction: column;
		gap: 2rem;
		align-items: center;
	}
</style>

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

تأخذ حقول الإدخال اسم المنتج، وعدد المنتجات المتاحة، وسعر المنتج.

باستخدام السمة bind:value في عناصر الإدخال، تربط كتلة التعليمات البرمجية قيم المدخلات بخصائص كائن المنتج المحددة. يحتوي قسم النمط على أنماط CSS التي تم تحديد نطاقها إلى هذا المكون Svelte.

بعد ذلك، أضف المكوِّن البرمجي أدناه إلى مكوِّن الصفحة الرئيسية:

<!-- Home.svelte -->
<script>
    import {Link} from "svelte-routing";
</script>

<main>
    <p>A way to manage and keep track of products in your inventory</p>
    <Link to="/add-products" class="link">Add Products here →</Link>
</main>

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

يستورد مكوّن الصفحة الرئيسية مكوّن الرابط من مكتبة svelte-routing. يوجه مكون الرابط المستخدمين إلى مسار “/إضافة منتجات”. ستحتاج إلى تحديد هذا المسار للتأكد من أن مكون الرابط يعمل بالفعل.

لتعريف مساراتك، افتح مكوِّن التطبيق وأضف الكتلة البرمجية أدناه إليه:

<!-- App.svelte -->
<script>
  import {Route, Router} from "svelte-routing";
  import AddProduct from './AddProduct.svelte';
  import Home from './Home.svelte';

  export let url = "";
</script>

<Router {url}>
  <h1>Inventory Tracker</h1>
  
  <div class="container">
    <Route path="/" component={Home} />
    <Route path="/add-products" component={AddProduct} /> 
  </div>
</Router>

<style>
  h1{
    text-align: center;
    font-family: "Poppins", sans-serif;
    margin-block-start: 1rem;
    margin-block-end: 6rem;
  }
</style>

يستورد مكوِّن الشيفرة أعلاه مكوِّنات المسار والموجِّه من svelte-routing جنبًا إلى جنب مع مكوِّنات الصفحة الرئيسية و AddProduct لتحديد مساراتها الفردية.

باستخدام مكون المسار، يمكنك تحديد المسارات المختلفة في التطبيق. في هذه الحالة، مسارات الصفحة الرئيسية و AddProduct.

يؤدي تغليف قسم HTML داخل مكون الموجه إلى تهيئة التوجيه للمكونات المرفقة.

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

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

أضف كتلة التعليمات البرمجية أدناه إلى ملف global.css:

/* global.css */
@import url('<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>');
@import url('<https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap>');

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

body{
    font-family: "Montserrat", sans-serif;
    background-color: #1F2124;
    color: #FFFFFF;
}

.container{
    inline-size: 60%;
    margin: auto;
}

.link{
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.link:hover{
    color: #99BCF6;
}

input{
    padding: 1rem;
    border-radius: 12px;
    outline: none;
    border: none;
    font-family: "Montserrat", sans-serif;
    color: #333333;
    inline-size: 100%;
}

button{
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-weight: 500;
    background-color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
}

button:hover{
    background-color: #99BCF6;
}

بعد تحديد الأنماط، قم باستيراد ملف global.css في مكوّن التطبيق لتطبيق الأنماط المحددة على التطبيق. يمكنك القيام بذلك عن طريق إضافة هذه الشيفرة إلى قسم النص البرمجي في مكوّن التطبيق:

//App.svelte
import './styles/global.css';

الآن، لقد قمت ببناء تطبيق Svelte الخاص بك. بعد ذلك، ستقوم ببناء الواجهة الخلفية لتطبيقك باستخدام Back4app.

إعداد تطبيق Back4app

في هذا القسم، ستقوم بإنشاء تطبيق Back4app الذي يعمل كواجهة خلفية لتطبيقك باستخدام وكيل Back4app AI.

أنت بحاجة إلى حساب Back4app لإنشاء حساب. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.

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

بمجرد وصولك إلى وكيل الذكاء الاصطناعي، أدخل مطالبة تطلب من وكيل الذكاء الاصطناعي إنشاء تطبيق.

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

Create a new application named inventory-tracker

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

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

من بين بيانات الاعتماد المتنوعة التي يوفرها وكيل الذكاء الاصطناعي، تأكد من نسخ معرّف التطبيق ومفتاح JavaScript. ستحتاج إليهما لربط تطبيق Svelte الخاص بك مع تطبيق Back4app.

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

In the inventory-tracker app, create an inventory class and add a name, price, and quantity column to the class.

يجب أن تحصل على رد مشابه للصورة أدناه.

الآن بعد أن أصبحت الواجهة الخلفية Svelte UI Back4app جاهزة، ستقوم بتوصيل واجهة المستخدم بالواجهة الخلفية.

توصيل تطبيق Svelte الخاص بك إلى Back4app

في هذا القسم، ستقوم بتوصيل تطبيق Svelte الخاص بك بتطبيق Back4app. للقيام بذلك، تحتاج إلى Parse SDK.

Parse SDK هي مجموعة من أدوات التطوير التي تقدم خدمات خلفية يمكنك استخدامها في تطبيقات الويب الخاصة بك.

قم بتثبيت Parse SDK عن طريق تشغيل الأمر أدناه:

npm install parse

بعد تثبيت مجموعة أدوات تطوير البرمجيات SDK، داخل علامة النص البرمجي في ملف App.svelte، أضف الكود في كتلة التعليمات البرمجية أدناه.

import Parse from 'parse/dist/parse.min.js';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com/>';

استبدل "Your_APPLICATION_ID" و "YOUR_APPLICATION_ID " و "YOUR_CLIENT_KEY" ببيانات الاعتماد التي نسختها سابقًا. تأكد من تخزينها بشكل آمن باستخدام المتغيرات البيئية.

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

لإضافة البيانات إلى Back4app، ستستخدم قيم الإدخال في نموذج مكون AddProduct AddProduct. ستأخذ القيم التي أرسلها المستخدم ثم تضيفها إلى قاعدة بيانات Back4app الخاص بك.

في قسم النص البرمجي في مكوّن AddProduct، أنشئ دالة AddData. ستحتوي هذه الدالة على المنطق الذي يضيف تفاصيل المنتج إلى Back4app.

هكذا

// AddProduct.svelte
import Parse from 'parse/dist/parse.min.js';
import { navigate } from "svelte-routing";

let addData = (event) => {
  event.preventDefault();
  try {
    const Inventory = new Parse.Object("Inventory");
    Inventory.set("name", product.name);
    Inventory.set("quantity", +product.quantity);
    Inventory.set("price", +product.price);
    Inventory.save().then(() => {
      console.log("New Product added successfully");
      navigate("/", { replace: true });
    });
  } catch (error) {
    console.log(error);
  }
};

في الكتلة البرمجية أعلاه، تنشئ الدالة addData كائنًا جديدًا من كائن Parse Inventory لفئة Inventory.

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

لاحظ أن هناك عامل جمع أحادي (+) قبل خاصيتي Product.quantity و product.price.

يقوم المشغل بتحويل الخصائص إلى نوع الرقم. اربط دالة إضافة البيانات بالنموذج في مكوّن AddProduct مع معالج حدث الإرسال.

سيؤدي ذلك إلى تشغيل الدالة addData في أي وقت يرسل فيه المستخدم النموذج.

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

<!--AddProduct.svelte-->
<form on:submit={addData}>
	<input type="text" placeholder="Name of Product" bind:value={product.name}>
	<input type="number" placeholder="No of Products" bind:value={product.quantity}>
	<input type="number" placeholder="Price of Products" bind:value={product.price}>
	
	<div>
	    <button>Add Product</button>
	</div>
</form>

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

لجلب البيانات من تطبيق Back4app، ستتمكن من الوصول إلى كائن التحليل المحفوظ في تطبيق Back4app في القسم السابق والحصول على القيم الموجودة في الكائن.

قبل جلب البيانات، قم بإنشاء مكون بطاقة في دليل src الخاص بالتطبيق. يحدد هذا المكون شكل ومظهر البيانات التي يتم جلبها من Back4app.

في ملف المكون، اكتب هذا الرمز في ملف المكون:

<!-- Card.svelte -->
<script>
	export let name = '';
	export let quantity = 0;
	export let price = 0;
</script>

<div class="card">
	<h3>{name}</h3>
	<div class="details">
	  <p>Price: ${price}</p>
	  <p>Quantity: {quantity == 0 ? "out of stock" : quantity}</p>
	</div>
	<div>
	  <button>Delete</button>
	</div>
</div>

<style>
	.card{
	    display: flex;
	    flex-direction: column;
	    gap: 1.9rem;
	    padding: 1rem;
	    border-radius: 12px;
	    background-color: #e2e2e2;
	    color: #1F2124;;
	    inline-size: 100%;
	}
	
	.details{
	    display: flex;
	    gap: 3rem;
	}
	
	.details p{
	    font-size: 14px;
	    font-weight: 500;
	    color: #888888;
	}
</style>

يعرض مكوّن البطاقة اسم المنتج، والكمية، والسعر. يحصل على هذه القيم من مكونه الأصلي باستخدام الخصائص الثلاثة في الكتلة البرمجية أعلاه: الاسم، والكمية، والسعر.

والآن، في الوسم النصي لمُكوِّن الصفحة الرئيسية الخاص بك، أضف الشيفرة في الكتلة البرمجية أدناه:

//Home.svelte
import { onMount } from "svelte";
import Parse from "parse/dist/parse.min.js";

let products = [];

const fetchProducts = async () => {
  try {
    const query = new Parse.Query("Inventory");
    const productsData = await query.find();
    products = productsData;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchProducts);

تستورد هذه الشيفرة دالة دورة حياة onMount من إطار عمل Svelte. كما أنها تنشئ مصفوفة منتجات فارغة في البداية.

في كتلة الشيفرة، يمكنك العثور على دالة fetchProducts، والتي تحمل المنطق المسؤول عن جلب البيانات الضرورية من Back4app.

تقوم الدالة fetchProducts بالبحث عن كائن “Inventory” في قاعدة بيانات تطبيقك باستخدام طريقة Parse.Query.Query.

ثم يقوم بإرجاع مصفوفة من نتائج الاستعلام عن طريق استدعاء طريقة البحث() على الاستعلام. وأخيرًا، يعيّن مصفوفة النتائج إلى متغير المنتج.

يضمن جعل دالة fetchProducts وسيطة لدالة onMount أن يقوم التطبيق بجلب بياناتك كلما قمت بتصيير المكون الرئيسي.

في قسم HTML من المكون، اعرض البيانات في مصفوفة المنتجات.

هكذا

<!-- Home.svelte-->
<div class="products">
	{#each products as product}
		<Card name={product.get('name')} quantity={product.get('quantity')} price={product.get('price')}/>
	{/each}
</div>

يقوم كل مكوِّن بتكرار على مصفوفة المنتجات ويعرض مكون البطاقة لكل منتج في المصفوفة.

يحصل مكوّن البطاقة على قيم الاسم، والكمية، وسعر المنتج باستخدام طريقة الحصول على المنتج. ثم يعيِّن تلك القيم إلى خاصياته.

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

/* Home.svelte */
.products{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	border-top: 2px solid #e2e2e2;
	margin-block-start: 3rem;
	padding-block-start: 2rem;
}

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

لإضافة وظيفة الحذف إلى تطبيق Svelte الخاص بك. ستحتاج إلى تعديل مكوناتك، بدءًا من مكون البطاقة. في مكوّن البطاقة، أنشئ خاصية جديدة تُدعى handleClick.

أنشئ الخاصية عن طريق إضافة سطر الشيفرة أدناه في قسم النص البرمجي للمكوّن:

//Card.svelte
export let handleClick;

والآن، اربط الخاصية بعنصر الزر في قسم HTML الخاص بالمكوّن باستخدام معالج حدث النقر.

هكذا

<!-- Card.svelte -->
<div>
	<button on:click={handleClick}>Delete</button>
</div>

في مكون الصفحة الرئيسية، ستنشئ دالة حذف المنتج DeleteProduct. تحتوي هذه الدالة على المنطق المسؤول عن حذف المنتج المحدد.

أضف الأسطر البرمجية أدناه في قسم النص البرمجي للمكوّن.

// Home.svelte
const deleteProduct = async (id) => {
  try {
    const Product = Parse.Object.extend("Inventory");
    const product = new Product();
    product.id = id;
    await product.destroy();
    const newData = products.filter((item) => item.id !== id);
    products = newData;
  } catch (error) {
    console.log(error);
  }
};

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

تقوم الدالة بتصفية المنتج الذي يحمل المُعرِّف المُعطى من مصفوفة المنتجات وتُنشئ مصفوفة جديدة بدون المنتج المحذوف. تقوم الدالة بعد ذلك بتعيين المصفوفة الجديدة إلى المنتجات.

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

هكذا

<!-- Home.svelte -->
<Card 
	name={product.get('name')} 
	quantity={product.get('quantity')} 
	price={product.get('price')}
	handleClick={() => deleteProduct(product.id)}
/>

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

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

npm run dev

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

عند النقر على الرابط، يجب أن ترى تطبيقاً يشبه الصورة أدناه.

انقر على رابط “إضافة منتجات هنا” ، وستتم إعادة توجيهك إلى صفحة جديدة تبدو بهذا الشكل:

املأ النموذج ثم أرسله بالنقر على زر“إضافة منتج“.

سيؤدي ذلك إلى إضافة التفاصيل التي قدمتها إلى قاعدة بيانات Back4app. يمكنك التحقق من ذلك من خلال زيارة لوحة تحكم تطبيق Back4app.

إذا أضاف التطبيق البيانات بنجاح، سيضيف Back4app صفًا جديدًا إلى قاعدة البيانات.

هكذا

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

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

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

يجب أن تقوم بإرساء تطبيق Svelte الخاص بك قبل أن تتمكن من نشره على Back4app. لإرساء تطبيق Svelte الخاص بك، قم بإنشاء ملف Dockerfile وملفات .dockerignore في الدليل الجذر لتطبيقك.

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

# Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npm", "run", "dev"]

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

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

# .dockerignore
node_modules

تخبر كتلة التعليمات البرمجية أعلاه Docker باستبعاد دليل node_modules من السياق أثناء عملية بناء الصورة. بما أنك أنشأت تطبيق Svelte الخاص بك باستخدام Vite، يجب عليك تهيئة Vite لدعم Docker.

للقيام بذلك، قم بالوصول إلى ملف vite.config.js في الدليل الجذر للتطبيق الخاص بك. استبدل الشيفرة الموجودة في الملف بالكتلة البرمجية أدناه:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [svelte()],
  server: {
    host: true,
    strictPort: true,
    port: 5173,
   },
})

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

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

docker build -t inventory-tracker .

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

والآن بعد أن قمتَ بتهيئة تطبيقك لـ docker، فإن الخطوة التالية هي كيفية نشر تطبيق Svelte. لنشر تطبيق Svelte، ستستخدم حاويات Back4app.

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

بعد منح Back4app حق الوصول إلى مستودع التطبيق، يمكنك الآن نشر التطبيق على Back4app باستخدام وكيل الذكاء الاصطناعي باستخدام المطالبة أدناه:

Deploy my repository <<repository-url>> on Back4app containers

تبدأ هذه المطالبة أعلاه عملية النشر. تأكد من استبدال < > بعنوان URL الخاص بمستودع التطبيق الخاص بك.

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

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

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

الخاتمة

في هذه المقالة، تعلمت كيفية إنشاء تطبيق Svelte بسيط باستخدام Back4pp. باستخدام وكيل Back4app AI، قمت بإنشاء واجهة خلفية للتطبيق الخاص بك، والتي تفاعلت معها باستخدام Parse SDK.

قام وكيل الذكاء الاصطناعي أيضًا بتبسيط عملية نشر تطبيقك على حاويات Back4app.

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

الكود المستخدم في هذا البرنامج التعليمي متاح على مستودع GitHub هذا.