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

Bun هو وقت تشغيل JavaScript مصمم ليكون سريعًا وخفيف الوزن وسهل الاستخدام. وهو مكتوب بلغة Zig ومدعوم من JavaScriptCore، وهو محرك JavaScript الذي يشغل Safari.

يحتوي Bun على مدير حزم مدمج متوافق مع Node.js، ومُدير اختبار، ومُجمِّع. كما يوفر مجموعة صغيرة من واجهات برمجة التطبيقات المحسّنة للغاية لأداء المهام الشائعة، مثل بدء تشغيل خادم HTTP وكتابة الملفات.

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

مزايا Bun

منذ الإعلان الأولي عن Bun، حتى قبل إصدار V1 في سبتمبر 2023، أصبحت Bun تحظى بشعبية متزايدة في مجتمع JavaScript. فيما يلي بعض الأسباب.

السرعة

كُتبت Bun بلغة Zig، وهي لغة برمجة منخفضة المستوى مصممة لبرمجة الأنظمة، مع التركيز على الأداء والسلامة وسهولة القراءة. تهدف إلى أن تكون بديلاً حديثًا لـ C و C++.

بالإضافة إلى ذلك، على عكس Node.js وDeno، الذي يستخدم محرك V8 JavaScript في Chrome، فإنه يستخدم محرك JavaScriptCore، الذي يشغل Safari.

بالإضافة إلى Zig وJavaScript Core، يستخدم Bun أيضًا عددًا من التقنيات الأخرى، مثل أداة تخصيص ذاكرة مخصصة تم تحسينها لجافا سكريبت، ومُترجم في الوقت المناسب (JIT) لتحسين الشيفرة البرمجية أثناء تنفيذها.

بشكل عام، فإن الجمع بين Zig وJavaScript Core والتحسينات الأخرى يجعل من Bun وقت تشغيل JavaScript سريعًا جدًا مقارنةً بأوقات التشغيل الأخرى.

توافق Node.js

صُمم Bun ليكون بديلاً عن Node.js، وبالتالي فهو متوافق مع جميع واجهات برمجة تطبيقات Node.js.

كما أنه يحتوي على جميع وحدات Node.js المدمجة، مثل التشفير و fs والمسار وغيرها. يمكنك التحقق من وحدات Node.js المتوفرة وغير المتوفرة في وثائق Bun.js.

بالإضافة إلى ذلك، Bun هو مدير حزم متوافق مع npm. هذا يعني أنه يمكنك استخدام Bun لتثبيت وإدارة حزم Node.js باستخدام Bun.

دعم TypeScript خارج الصندوق

يحتوي Bun على دعم أصلي وسلس لـ TypeScript، مما يجعله خيارًا ممتازًا إذا كنت تفضل TypeScript أو تحتاج إلى TypeScript في مشاريعك.

TypeScript، وهو نسخة موسعة ومكتوبة بشكل ثابت من JavaScript، يقدم ميزات لغوية متقدمة وكتابة ثابتة لتحسين تطوير JavaScript.

مع Bun، ليست هناك حاجة لتهيئة إضافية، وليس هناك حاجة لإجراءات إعداد أو إنشاء إضافية لتمكين وظيفة TypeScript.

حدود Bun

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

الموارد المحدودة

لا يزال Bun جديدًا نسبيًا، مما يعني أن مجتمعه صغير حاليًا. لا يوجد الكثير من الموارد التي تغطي التطوير الخاص ب Bun-js، مما يعني أنك قد تواجه صعوبة في معرفة كيفية استخدام وقت التشغيل.

ومع ذلك، فإن وثائق Bun شاملة وتمثل نقطة مرجعية قيّمة. إذا واجهتك صعوبات، فهناك أيضاً خيار طلب المساعدة عبر قناة Discord الخاصة بهم.

دعم نظام التشغيل Windows

يوفر Bun حاليًا دعمًا محدودًا لنظام التشغيل Windows. في وقت كتابة هذا التقرير، كان وقت التشغيل فقط مدعومًا على نظام ويندوز.

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

إنشاء تطبيق Bun

قبل أن تتمكن من استخدام Bun، عليك تثبيته.

لتثبيت Bun على أنظمة macOS و WSL و Linux، قم بتشغيل الأمر أدناه:

curl -fsSL https://bun.sh/install | bash

إعداد بيئة التطوير الخاصة بك

لإنشاء مشروع Bun جديد، قم بتشغيل الأمر أدناه:

bun init

يؤدي تشغيل الأمر أعلاه إلى تهيئة مشروع Bun فارغ في دليل المشروع الخاص بك.

بالنسبة للبرنامج التعليمي، ستقوم ببناء واجهة برمجة تطبيقات بسيطة باستخدام Elysia، أحد أسرع أطر عمل خادم Bun HTTP (وفقًالمعاييرهم).

قم بتشغيل الأمر أدناه لتثبيت Elysia والتبعيات الأخرى المطلوبة لهذا المشروع:

bun add elysia knex dotenv pg

تتضمن التبعيات الأخرى المثبتة في الأمر ما يلي:

• Knex، منشئ استعلام. ستستخدم هذه التبعية لتبسيط التفاعل مع قاعدة البيانات الخاصة بك.
• dotenv، تساعدك هذه الحزمة على إدارة المتغيرات البيئية في مشروعك.
• pg (برنامج تشغيل قاعدة بيانات Postgres) للتفاعل مع قاعدة بيانات Postgres الخاصة بك.

بعد ذلك، قم بتهيئة knex في مشروعك عن طريق تشغيل:

knex init

ينشئ الأمر أعلاه ملف knexfile.js. يحتوي هذا الملف على خيارات تهيئة لقاعدة البيانات الخاصة بك.

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

require("dotenv").config();

export const development = {
  client: "pg",
  connection: process.env.DATABASE_URL,
  migrations: {
    directory: "./db/migrations",
  }
};

بعد ذلك، أنشئ ملف db.js في الدليل الجذري لمشروعك وأضف إليه الكتلة البرمجية أدناه.

const knex = require("knex");
const knexFile = require("./knexfile.js");

const environment = process.env.NODE_ENV || "development";

export default knex(knexFile[environment]);

بعد ذلك، أنشئ ملف .env وأضف تفاصيل اتصال قاعدة البيانات أو URI إلى الملف.

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

DATABASE_URL = <YOUR_DATABASE_URI>

استبدل “YOUR_DATABASE_URI” بعنوان URL لقاعدة البيانات الخاصة بك.

ملاحظة: تأكد من إضافة ملف .env الخاص بك إلى ملف .gitignore لضمان عدم التزامك بمعلومات خاصة إلى عنصر تحكم الإصدار.

إنشاء نموذج قاعدة البيانات الخاصة بك

لإنشاء نموذج قاعدة بياناتك باستخدام Knex، ستقوم بإنشاء ملف ترحيل وكتابة أمر إنشاء SQL باستخدام Knex.

قم بتشغيل الأمر أدناه لإنشاء أول عملية ترحيل:

knex migrate:make blog

بعد ذلك، استبدل الشيفرة في ملف الترحيل الذي تم إنشاؤه بالكتلة البرمجية أدناه:

/**
 * @param { import("knex").Knex } knex
 * @returns { Promise<void> }
 */
export function up (knex) {
  return knex.schema.createTable("blog", (table) => {
    table.increments("id").primary();
    table.string("title").notNullable();
    table.string("content").notNullable();
    table.string("author").notNullable();
    table.timestamp("created_at").defaultTo(knex.fn.now());
  });
}

/**
 * @param { import("knex").Knex } knex
 * @returns { Promise<void> }
 */
export function down (knex) {
  return knex.schema.dropTable("blog");
}

أخيرًا، قم بتشغيل كتلة التعليمات البرمجية أدناه لتنفيذ ملف الترحيل:

knex migrate:latest

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

إنشاء خادم Bun-Elysia

في هذه الخطوة، ستقوم بإنشاء خادم API بسيط.

افتح ملف index.ts الخاص بك وأضف الكتلة البرمجية أدناه:

//index.ts
const { Elysia } = require("elysia");
let db = require("./db");

db = db.default;

const app = new Elysia();

في كتلة التعليمات البرمجية أدناه، قمت باستيراد Elysia وإنشاء مثيل لإطار عمل Elysia (التطبيق).

إنشاء معالجات المسار

بعد ذلك، ستنشئ معالجات مسارات لتطبيقك. ستكون المعالجات التي تنشئها للمسارات التالية:

• مشاركة/منشورات/إنشاء-مشاركة جديدة
• الحصول على /المنشورات
• GET /posts/:id
• تصحيح / منشورات / منشورات/:معرف/تحديث المنشور
• حذف /مشاركات/:معرف/حذف-مشاركة

أضف كتلة التعليمات البرمجية أدناه إلى ملف index.ts الخاص بك لإنشاء معالج ل “/posts/ إنشاء منشور جديد-منشور جديد”:

app.post("/posts/create-new-post", async (context) => {
  try {
    //Extract the title, content and author from the request body
    const { title, content, author } = context.body;

    //Insert the post into the database
    const post = await db("blog").insert({
      title,
      content,
      author,
    });

    //Send response to the client
    return new Response(JSON.stringify(post));
  } catch (error: any) {
    //Send error to the client
    return new Response(error.message, { status: 500 });
  }
});

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

أضف كتلة التعليمات البرمجية أدناه إلى ملف index.ts الخاص بك لإنشاء المعالج الذي يجلب جميع مشاركاتك “/posts”:

app.get("/posts", async (context) => {
  try {
    //Get all posts from the database
    const posts = await db.select("*").from("blog");

    //Send response to the client
    return new Response(JSON.stringify(posts));
  } catch (error: any) {
    //Send error to the client
    return new Response(error.message, { status: 500 });
  }
});

أضف كتلة التعليمات البرمجية أدناه إلى ملف index.ts الخاص بك لإنشاء المعالج الذي يجلب منشورًا واحدًا حسب المعرف “/posts/:id”:

app.get("/posts/:id", async (context) => {
  //Extract the id from the request params
  const { id } = context.params;

  //Get the post from the database
  const post = await db("blog").where({ id });

  //If the post is not found, send a 404 response
  if (post.length === 0) {
    return new Response("Post not found", { status: 404 });
  }

  //Send response to the client
  return new Response(JSON.stringify(post));
});

أضف كتلة التعليمات البرمجية أدناه إلى ملف index.ts الخاص بك لإنشاء المعالج الذي يقوم بتحديث منشور واحد بالبيانات الموجودة في الحمولة حسب المعرف “/posts/:id/update-post”:

app.patch("/posts/:id/update-post", async (context) => {
  //Extract the id from the request params
  const { id } = context.params;

  //Extract the title and content from the request body
  const { title, content } = context.body;

  //Update the post in the database
  const post = await db("blog").where({ id }).update(
    {
      title,
      content,
    },
    ["id", "title", "content"]
  );

  //Send response to the client
  return new Response(JSON.stringify(post));
});

أضف كتلة التعليمات البرمجية أدناه إلى ملف index.ts الخاص بك لإنشاء المعالج الذي يحذف منشورًا واحدًا حسب المعرف “/posts/:id/delete-post”:

app.delete("/posts/:id/delete-post", async (context) => {
  //Extract the id from the request params
  const { id } = context.params;

  //Delete the post from the database
  const post = await db("blog").where({ id }).del();

  //Send response to the client
  return new Response(JSON.stringify(post));
});

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

app.listen(3000, () => {
  console.log("Server running on port 3000");
});

قم بتشغيل الأمر أدناه لبدء تشغيل تطبيقك:

bun --watch index.ts

نشر تطبيق Bun على حاويات Back4app

يتطلب نشر تطبيق Bun الخاص بك بعض الخطوات.

الخطوة 1: اكتب ملف Dockerfile

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

touch Dockerfile

يؤدي تشغيل الأمر أعلاه إلى إنشاء ملف Dockerfile في الدليل الجذر لمشروعك.

بعد ذلك، افتح ملف Dockerfile الخاص بك وأضف إليه الكتلة البرمجية أدناه:

FROM oven/bun

WORKDIR /app

COPY package.json .
COPY bun.lockb .

RUN bun install

COPY . .

EXPOSE 3000

CMD ["bun", "index.ts"]

في ملف Dockerfile أعلاه، يحدد السطر الأول، من فرن/Bun الصورة الأساسية المراد استخدامها. هذه الصورة هي صورة مبنية مسبقًا تحتوي على وقت تشغيل Bun وجميع تبعياتها.

يقوم السطر التالي، WORKDIR /app، بتعيين دليل العمل للصورة. هذا هو الدليل حيث سيتم نسخ شيفرة التطبيق وتشغيلها.

يقوم السطران التاليان، COPY package.json . و COPY bun.lockb . بنسخ ملفي package.json و bun.lockb من الدليل الحالي إلى الصورة. هذه الملفات ضرورية لوقت تشغيل Bun لتثبيت تبعيات التطبيق.

يقوم السطر التالي، RUN bun bun install، بتثبيت تبعيات التطبيق باستخدام وقت تشغيل Bun.

يقوم السطر التالي، COPY . . بنسخ الدليل الحالي بالكامل إلى الصورة. يتضمن ذلك رمز التطبيق وأي ملفات أخرى ضرورية.

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

يحدد السطر الأخير، CMD ["bun"، "index.ts"]، الأمر الذي سيتم تشغيله عند بدء تشغيل الحاوية. سيبدأ هذا الأمر تشغيل وقت تشغيل Bun وتشغيل ملف index.ts الخاص بالتطبيق.

وأخيراً، ادفع شفرتك إلى GitHub.

الخطوة 2: إنشاء تطبيق Back4app

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

انقر على زر “تطبيق جديد” وحدد خيار“الحاويات كخدمة“.

كخطوة تالية لاستضافة تطبيق Bun، قم بربط حساب GitHub الخاص بك بحساب Back4app الخاص بك. يسمح توصيل حسابك لـ Back4app بالوصول إلى مستودعات حسابك.

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

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

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

وبدلاً من ذلك، يمكنك استكشاف أخطاء النشر يدويًا باستخدام سجلات Back4app التفصيلية ودليل استكشاف الأخطاء وإصلاحها الخاص بـ Back4app.

الخاتمة

في هذه المقالة، استكشفتَ وقت تشغيل Bun JavaScript ومزاياه وقيوده الواضحة. كما استكشفت أيضًا كيفية إنشاء تطبيق Bun باستخدام Elysia و Knex و PostgreSQL.

وأخيراً، استكشفت حاويات Back4app وكيفية نشر تطبيقات Bun الخاصة بك على المنصة.

عند استخدام تطبيق Bun، من المهم ملاحظة أنه لا يزال في مراحله الأولى وقد يُدخل بعض التغييرات الرئيسية في وقت لاحق في المستقبل.

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