DEV Community: omar.dev

لماذا قررت فصل الباك اند عن الفرونت اند؟

omar.dev — Sun, 05 Jan 2025 23:59:54 +0000

قبل سنتين تقريبًا، كنت أتعلم البرمجة وبدأت أتعرف على مفهوم الباك اند. كأي مبتدئ، كنت أبحث عن حلول بسيطة وسهلة تساعدني على بناء تطبيقات عملية. في ذلك الوقت، تعرفت على مفهوم BAAS (Backend as a Service)، وبدأت باستخدام Firebase. ساعدني Firebase كثيرًا في بناء تطبيقات بسيطة مثل تطبيقات المحادثة ومشاريع صغيرة للسوشيال ميديا.

مع مرور الوقت وتعلمي React وNext.js، أصبحت أكتب الباك اند بنفسي، حيث وفرت لي Next.js ميزة كتابة الـAPI داخل نفس الكود بيس الخاص بالفرونت اند. بقيت أعتمد على هذا الأسلوب لسنوات وكنت أراه عمليًا ومناسبًا للمشاريع الصغيرة.

لماذا قررت التغيير؟

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

الأسباب التي دفعتني لفصل الباك اند عن الفرونت اند

تنظيم الكود وتحسين الهيكلية:

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

قابلية التوسع:

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

الاستقلالية بين الفرق:

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

تحسين الأداء:

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

التوثيق والمعايير:

العمل على باك اند منفصل يتيح استخدام أدوات مثل Swagger UI وOpenAPI لتوثيق الـAPIs، مما يجعل النظام أكثر وضوحًا وسهولة في الفهم للمطورين الآخرين.

المرونة التقنية:

يمكنك استخدام تقنيات حديثة ومخصصة لكل جزء. في حالتي، أستخدم:

Express.js: لإنشاء RESTful APIs.

Prisma ORM: لإدارة قاعدة البيانات والتعامل مع PostgreSQL بكفاءة.

TypeScript: لتوفير أمان عالٍ في كتابة الكود وتقليل الأخطاء.

PostgreSQL: كقاعدة بيانات قوية وقابلة للتوسع.

Railway: لإدارة ونشر الباك اند.

Vercel: لاستضافة الفرونت اند باستخدام Next.js.

Swagger UI وOpenAPI: لتوثيق الـAPIs.

قابلية الاختبار والصيانة:

فصل الباك اند عن الفرونت اند يسهل اختبار كل جزء على حدة. يمكنك كتابة اختبارات للوحدات والأنظمة المختلفة دون التأثير على الأجزاء الأخرى.

التعلم والتحسين:

العمل على باك اند منفصل يفتح لك آفاقًا جديدة لتعلم تقنيات وأدوات متقدمة. بالنسبة لي، أتعلم يوميًا كيفية تحسين الـAPI، تحسين قواعد البيانات، واستغلال الأدوات الحديثة مثل Prisma وTypeScript.

ملاحظات إضافية:

الكود بيس المشترك لمشاريع صغيرة:

إذا كنت تعمل على مشروع صغير أو MVP، يمكن أن يكون وجود كود بيس واحد لكل من الباك اند والفرونت اند خيارًا عمليًا وسريعًا.

الباك اند المنفصل للمشاريع الكبيرة:

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

الخلاصة:

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

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

أكثر مجالات البرمجة طلبا في سوق العمل في السنوات القادمة

omar.dev — Thu, 11 Aug 2022 14:25:00 +0000

1. برمجة المواقع

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

2. برمجة تطبيقات الهاتف

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

3. مجال تطوير الالعاب

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

4. مختص قواعد البيانات

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

5. الذكاء الاصطناعي

في أحدث قائمة أعلن عنها موقع "لينكد إن" لأسرع الوظائف

الناشئة نموا في الولايات المتحدة خلال خمس سنوات (2012-2017) حظيت وظيفة مهندس
تعلم الآلة على المرتبة الأولى لتزايد
إقبال المشغلين على توظيف المتخصصين في تعلم الآلة،
سواء شئت ام ابيت تعلم
الالة تتكون من اهم
وظائف
تطلبا في

هذا كان بعض التخصصات المهمة عن البرمجة في عالم العربي

انشاء منشور باستخدام بايثون في devto

omar.dev — Wed, 10 Aug 2022 18:37:00 +0000

اكو مقولة جدا جميلة عن المبرمجين

I always choose a lazy programmer to do the difficult job, because lazy programmer will find an easy way to do it.
bill gates.

قد تسالني كيف يمكن ان يكون الكسل شيء جيد؟ راح نجاوب هذا السؤال في هذا البوست من خلال بناء مشروع ينشىء بوست جديد في باستخدام لغة برمجة بايثون dev.toموقع

راح نستخدم:

dev.to api حتى نسوي الباك اند
python كلغة برمجة
localhost نسوي من خلاله سيرفر بسيط في flask

اول شي نحضر الفايلات

راح نحتاج ننزل هاي بكجات بايثون حتى نكمل المشروع عن طريق cmdكتابة هاي السطر في

pip install requests flask

بسيط flask هسة خلونا نحضر البكجات بايثون ونسوي سيرفر

# بكجات 
from flask import Flask, render_template
import requests

# برنامجنا
app = Flask(__name__)


# الي سويناه html هنا نسوي فد راوت في موقع راح يرجعنا فايل 
@app.route("/create", methods=['GET', 'POST'])
def get_create():
    if request.method == 'GET':
        return render_template('create.html')


# هذا كود نكتبه حتة السيرفر يشتغل
if __name__ == '__main__':
    app.run(debug=True)

html حلو, سيرفر جاهز بس بعدنا ما كاتبين شي في فايل

html فخلونا نكتب اشوية

<!-- /templates/html احنا في  --->
<!-- علمود اشوية ستايل tailwindcss طبعا راح استخدم  --->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="root text-white bg-slate-900 h-screen w-full">
      <div class="text-center text-3xl pt-5 font-bold">create a new post</div>

      <form
        class="flex text-blue-600 flex-col gap-2 mx-auto w-max pt-20"
        action="http://127.0.0.1:5000/create"
        method="post"
      >
        <input required type="text" name="title" placeholder="title" />
        <textarea
          type="text"
          name="body_markdown"
          placeholder="body_markdown"
        ></textarea>
        <input required type="text" name="published" placeholder="published" />
        <input required type="text" name="tags" placeholder="tags" />
        <input
          required
          type="text"
          name="cover_image"
          placeholder="cover_image"
        />
        <input type="submit" value="submit" />
      </form>
    </div>
  </body>
</html>

بعدين خلونا نبدي السيرفر

python app.py

وراح نشوف هذا الشكل http://localhost:5000/create نفتح

dev.to من موقع api key قبل ما نبدي للباك اند نحتاج

https://dev.to/settings/extensions نروح على
generate api key ننزل لاخر شي في الصفحة نكتب اسم و نضغط
الي انطونه ياه بالنسبة الي api key ننسخ

HtLrrPjaAfJdhxpTUJ5jKMxd

backend سوينا البناء الاساسي هسة اشوية

## هذا فنكشن راح يسوي بوست جديد
def Post_to_dev_to(title, body, tags, published, cover):
    headers = {
    'api-key': 'HtLrrPjaAfJdhxpTUJ5jKMxd', # اكتب رمز الي عندك بدال هذا
    }

    json_data = {
        'article': {
            'body_markdown': """
            ---
            title: {}
            published: {}
            tags: {}
            cover_image: {}
            ---
            {}
            """ .format(title, published, tags, cover, body),
        },
    }


    response = requests.post('https://dev.to/api/articles', headers=headers, json=json_data)

بالنهاية نضيف الفنكشن للراوت الي سويناه من قبل

@app.route("/create", methods=['GET', 'POST'])
def get_create():
    if request.method == 'POST':
        title = request.form['title']
        body_markdown = request.form['body_markdown']
        published = request.form['published']
        tags = request.form['tags']
        cover_image = request.form['cover_image']

        Post_to_dev_to(title, body_markdown, tags, published, cover_image)
        return redirect(url_for('get_create'))
    else:
        return render_template('create.html')

هذا هو كل شي نبدي البرنامج

python app.py

اذا عندك اي مشكلة او سؤال تكدر تسال مني في كومنتات

برمجة موقع ملاحظات كانوا نحضر اكل

omar.dev — Wed, 10 Aug 2022 02:20:00 +0000

مرحبا, اليوم راح نعمل موقع ملاحظات باستخدام
html وcss وjavascript

داخل فولدر

نحضر ملعقة من فايل html
نحضر ملعقة من فايل css
نحضر ملعقة من فايل javascript

html نبدا ب

نكتب اكواد الصفحة اساسية و نربطه مع فايلات الاخرى

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ملاحظات</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body></body>
</html>

بعدين نضيف اساس الطبق

<div class="parent-conteiner">
  <button class="save-btn">حفظ</button>
  <input type="text" class="input" placeholder="ملاحظاتك" dir="rtl" />

  <div class="notes"></div>
</div>

css اشوية

body,
html {
  margin: 0;
  height: 100%;
  background-color: rgb(240, 240, 240);

  /* كود لجعل كل ايتمس في المنتصف */
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent-conteiner {
  background-color: rgb(38, 111, 156);
  padding: 20px;
  border-radius: 5px;
}

.input {
  padding: 5px;
  border-radius: 5px;
  background-color: rgb(57, 142, 194);
  border: none;
  color: white;
  font-size: 20px;
}
input::placeholder {
  color: white;
}

.save-btn {
  padding: 5px 10px;
  border-radius: 5px;
  background-color: rgb(57, 142, 194);
  border: none;
  color: white;
  font-size: 20px;
  margin-top: 10px;
}

شكل طعام الحالي

هذا جان مقبلات الطبق الاساسي لازم وي اشوية جافاسكريبت

const input = document.querySelector(".input");
const button = document.querySelector(".save-btn");
const notes = document.querySelector(".notes");

button.addEventListener("click", function () {
  const note = input.value;
  notes.innerHTML += `<p class='note'>${note}</p>`;
  input.value = "";
});

الاكلة خلصناه تقريبا, نكدر نضيف ملاحضات كما في الشكل

css اشوية بعد

.note {
  font-size: 20px;
  color: white;
  background-color: rgb(57, 142, 194);
  padding: 5px;
  border-radius: 5px;
}

الناتج

بالعافية 😅

اشلون ابدي اتعلم برمجة مواقع؟

omar.dev — Tue, 09 Aug 2022 15:43:48 +0000

احلى شي اشوفه بالنسبة للبرمجة هو مدى سهولة ايجاد مصادر لتعلمه من انترنيت. 70% من مبرمجين جميع انحاء العالم تعلموا البرمجة بنفسهم. ايضا اكثر الناس نجاحا في العالم تعلموا البرمجة بدون شهادة جامعية.

هذا البوست الي راح يكون اول بوست انشره و راح احجي بيه عن :

خطوات الي لازم تسويه بالبداية
مصادر عربية لتعلم برمجة المواقع
مصادر انكليزية لتعلم برمجة المواقع

خطوات الي لازم تسويه بالبداية كنووب

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

لو اني ابدي اليوم اتعلم برمجة من جديد شسوي؟
ا) اتاكد اذا كان برمجة المواقع مناسب. كل انسان اله شغف بمجال معين. و برمجة مجال شاسع كلش. قد يكون برمجة المواقع غير مناسب الك. شوف هذا الفيديوا ورا ما تخلص قراية البوست. اذا بعدك ما مقرر ابحث اكثر بمجالات البرمجة و لا تستعجل!

ب) ورا ما تختار مجال تعلم اساسياته بشكل زين! مثلا ببرمجة المواقع لازم تبدي تتعلم بالتسلسل:
1- html
2- css
3- javascript
هاي اللغات كل واحد منهم اله غرض معين افهم اول شي شنو معناهم بهذا الفيديو

ج) خلص اساسيات ؟ لازم تبني مشاريع بسيطة و تختبر مهاراتك بيه. مثلا :
1- ابني موقع بسيط لنفسك
2- ابني مشروع موقع ملاحظات
3- ابني مشروع الة الحاسبة

د) بنيت مشاريعك البسيطة ؟ حلو الان امامك خيارين 🥒🥒

🥒خيار الاول : تصير مبرمج واجهات امامية
🥒 خيار الثاني : تصير مبرمج واجهات الخلفية (هي اسمه هيجي مو بايدي 😂)
هذا الفيديوا فرق بينهم

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

قبل جان صعب تلكى مصادر عربية للبرمجة ولكن بما انوا بدا البرمجة يصير مجال مرغوب بدول وطن العربي فيزداد مصادر تعلمه باللغة العربية يوم بعد يوم.

اهم هاي المصادر:

قناة boodolf الي بيه كلشي عن برمجة مواقع. ابدا بهذا
قناة العظيم TheNewBaghdad تابعه يفيدك
اكو بعد هواي قنوات عراقية او غير عراقية اخرى تكدر تبحث بيه من يوتيوب "مو كلشي اني اكلك ياه"

مصادر انكليزية لتعلم برمجة المواقع

لغة الانكليزية في البرمجة اكبر ميزة راح تساعدك بالموضوع. تكدر تتعلم برمجة من مصادر عربية بس مشكلة مصادر عربية قليلة بالنسبة للانكليزي. بالنسبة الي 99% من تعلمي للبرمجة كانت من مصادر اجنبية. بالبداية كان انكليزي مالتي ضعيف لكن اجبرت نفسي اباوع فيديوهات بالانكليزي و اترجم كلمات ما اعرف للعربي و ورا فترة صرت افهم الفيديوا بدون ترجمة. هذا الشي ساعدني هواية بالتعلم و خاصتا الاكواد البرمجية عباراتها بالانكليزي.

احسن مصادر انكليزية "اذا انت سجاج"

قناة programmingwithmosh
قناة deved
اكو قنوات بالمىات تكدر تبحث عنه باليوتيوب
موقع sololearn. طبعا هذا الموقع كل واحد انصحه يبدا منه احسن شي. و عدهم تطبيق موبايل حملوه كلش مفيد
w3 schools اي شي تفكر تتعلمه موجود بهذا الموقع . codeacademy هم موقع حلو

راح انشر بوستات من اليوم عن البرمجة اتمنى تفيدكم.