لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 10/24/24 في كل الموقع
-
السلام عليكم هو اي تحليل الانحدار؟3 نقاط
-
السلام عليكم انا طالب في اكادميية حسوب في دورة تطوير الواجهات واريد انا ابدا في دورة ال php laravel هل يوجد كود خصم يمكنني الاستفاده منهو3 نقاط
-
السلام عليكم هو اي ال Interview Warmup ؟2 نقاط
-
لماذا تم اختيار react and react native بالتحديد في دوره هذه بدلا من anguler وسمعت من البعض من يمدح react native و البعض يمدح anguler وايهما افضل والبعض يقول anguler لانها تستعمل ts و لا تحتاج الى مكتبات والاخر يقول react وهي ايضا قابله للاستعمال في ts اذا ما الفرق الجهوري بينهم وهل هناك فعلا اطار افضل من اطار ام انها تفضيل شخصي؟2 نقاط
-
السلام عليكم جميعا كيف يمكن انشاء موقع لشحن العاب او تطبيقات عبر player id بشكل اوتوماتيكي2 نقاط
-
انا مبتدي في مجال Data Analytics وتعلم الاله وعملت مشروع موجود حاليا علي كاجل ده غير الا انا شغل حاليا برد علي مشروع تعلم الاله وده برد غير ان انا حاليان بدرس شهادات جوجل في تحليل البيانات فا هل يعني اقدر اشرك الان المسابقه دي عليها حويزا كمان ؟2 نقاط
-
السلام عليكم! الآن في WordPress إذا طلب مني العميل موقها فأتممته، كيف سأعطيه الموقع مع أن الDomain خاص بي؟ مع جزيل الشكر.2 نقاط
-
السلام عليكم. الرجاء المساعدة في تجاوز الخطأ التالي Error: Hydration failed because the initial UI does not match what was rendered on the server. See more info here: https://nextjs.org/docs/messages/react-hydration-error الكود 'use client' import { useTranslations } from 'next-intl'; import { useEffect, useState } from 'react'; import Description from './Description'; import { IoIosClose } from 'react-icons/io'; import { Task } from '@prisma/client'; import moment from 'moment'; interface UpdateTaskProps { task: Task } const UpdateTask = ({ task }: UpdateTaskProps) => { const t = useTranslations("Add Task"); const [isMounted, setIsMounted] = useState(false) // Handle open/close update modal const [updateTaskModal, setUpdateTaskModal] = useState(false) const openUpdateTaskModal = () => setUpdateTaskModal(true) const closeUpdateTaskModal = () => setUpdateTaskModal(false) // handle update modal const [title, setTitle] = useState(task.title); const [description, setDescription] = useState(task.description); const [from, setFrom] = useState(task.from); const [to, setTo] = useState(task.to); const [status, setStatus] = useState(task.status); useEffect(() => { setIsMounted(true); if (task) { setTitle(task.title || "") setDescription(task.description || "") setFrom(task.from || null); setTo(task.to || null); setStatus(task.status || "") } }, [task]); if (!isMounted) return null; return ( <div className="relative"> {/* Modal */} {updateTaskModal ? ( <div className="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50"> <div className="bg-white dark:bg-gray-800 rounded-lg p-6 w-11/12 md:w-3/4 shadow-xl overflow-auto max-h-[85vh]"> {/* {alert.type && <Toast alertText={alert.alertText} type={alert.type} />} */} {/* Close Button */} <button onClick={closeUpdateTaskModal} className="absolute top-1 right-1 bg-rubyRed p-1 rounded-full hover:bg-red-600" > <IoIosClose className="text-3xl text-white" /> </button> {/* Form */} <form // onSubmit={AddNewTask} className="space-y-6" > <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("title")} </label> <input type="text" name="title" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" placeholder={t("enter_task_title")} value={title} onChange={(e) => setTitle(e.target.value)} /> </div> {/* Text editor Component */} <Description description={description} setDescription={setDescription} /> <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("status")} </label> <select name="status" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" onChange={(e) => setStatus(e.target.value)} > <option value="NotStarted">{t("not_started")}</option> <option value="InProgress">{t("in_progress")}</option> <option value="Completed">{t("completed")}</option> </select> </div> <div className="grid grid-cols-2 gap-4"> <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("from")} </label> <input type="date" name="from" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" value={from ? moment(from).format('YYYY-MM-DD') : ''} onChange={(e) => setFrom(new Date(e.target.value))} /> </div> <div> <label className="block text-gray-800 dark:text-gray-300 font-medium mb-2"> {t("to")} </label> <input type="date" name="to" className="w-full p-3 border rounded-lg dark:bg-gray-700 dark:text-white" value={to ? moment(to).format('YYYY-MM-DD') : ''} onChange={(e) => setTo(new Date(e.target.value))} /> </div> </div> <button type="submit" className="w-full bg-royalPurple text-white p-3 rounded-lg hover:bg-slate-700 transition" >{t('update')}</button> </form> </div> </div> ) : (<button onClick={openUpdateTaskModal} className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all" > Update </button>)} </div> ) } export default UpdateTask شكرا لكم.1 نقطة
-
السلام عليكم هي اي المسابقه دي AI Mathematical Olympiad (AIMO) ؟1 نقطة
-
هل يجب علي كمبرمج تعلم algorithm and data structure أو لا واذا كان الموضوع مهم هل هنالك كورسات أو كتب لتعلم algorithm and data structure1 نقطة
-
سيدي الفاضل شكرا علي الرد . ماقلته صحيح لاكن ليس فيه اي حلول عل الاطلاق , سيدي مذا علي ان افعل الان ان اجلس فقط انتظر التحديث الذي ربما يكون بعد عشر سنوات او اقول اكادمية حاسوب تنصب علي . اخي ارجو منك ان تكون موضوعي انا شخص احب هذا المجال و اريد ادرسه قرأ عن كورسات كثيرة و اخترت دورة الجافاسكربت من هذه الاكادمية و ذالك حسب العرض علي موقعكم الرسمي و دفعت و بدات لاتفاجئ اني امام محتوي قديم جدا فيديوهات اليوتيوب احدث منه محتوي و تحاولون ان تقتعونني بشء غير منطقي . الان مذا تتوقع مني ؟ مذا تتوقع و انا لا استطيع ان اطبق اي شيء ؟ عندما تقوللي ان الاساسيات لم تتغير هذا طبيعي لاكن مذا تغني الاساسيات ؟ سيدي في نكست جس ترتيب الملفات مختلف تمااااااما و نفس الشيء في رياكت نتيف مختلف تمااااام و مكتبات التي استعمل المسار لم اجدها. انا لم استطع حتي الان ان اقوم بمشروع واحد من رياكت نيتيف. ماذا اقعل الان ؟1 نقطة
-
كيف يمكن لإدارة الإنتاج التغلب على التحديات المرتبطة بتنوع المتتجات1 نقطة
-
السلام عليكم . انا اتعلم لغة بايثون في دورة تطوير التطبيقات بإستخدام بايثون . اريد ان اتعلم تصميم واجهات المستخدم Front end هل يجب ان أتعلم هذا المسار بعد الإتنهاء من الدورة ام قبل الدخول في مسار "أساسيات جانغو" ؟ و ما هي اهم القنوات او المواقع المجانية التي يمكن ان اتعلم منها من خلال Road Map واضح و كامل ؟ و هل لو درست اول مسار من دورة "تطوير واجهات المستخدم" ( بما انه مجاني )يكفيني لتعلم أساسيات Front end و الانطلاق في هذا المجال ؟1 نقطة
-
هل العمل في IDX Google يعتبر خيار افضل ؟؟1 نقطة
-
شكراا جدا1 نقطة
-
وعليكم السلام ورحمة الله وبركاته. تحليل الانحدار هو أسلوب إحصائي يُستخدم لفهم العلاقة بين متغيرين أو أكثر و يتم إستخدامه بشكل أساسي للتنبؤ بقيمة متغير تابع (Y) بالنسبة إلى عدد من المتغيرات المستقلة (X). الأنواع الرئيسية لتحليل الانحدار: الانحدار الخطي البسيط: يستخدم لتحليل العلاقة بين متغير تابع واحد ومتغير مستقل واحد. يتم تمثيل العلاقة بخط مستقيم. الانحدار الخطي المتعدد: يتعامل مع متغير تابع واحد وعدة متغيرات مستقلة. الانحدار غير الخطي: يستخدم عندما تكون العلاقة بين المتغيرات غير خطية. ويستخدم للتنبؤ بالقيم المستقبلية. ويمكنك قراءة المقال التالي لشرح أفضل :1 نقطة
-
صحيح أن تطبيقات ضخمة مثل Facebook وInstagram وUber تعتمد على React Native، وأن العديد من المواقع الكبيرة تعمل بـ React.js. ولكن يجب أن نأخذ في الاعتبار أن Facebook وغيرها من الشركات الكبرى لديها فرق عمل ضخمة تتمتع بخبرة عالية. هذه الفرق قادرة على تنظيم العمل وترتيب الملفات بشكل جيد، كما أنها تستخدم أسلوب عمل مخصص يساعدهم في اختيار المكتبات المناسبة لكل جزء من المشروع دون أن يؤثر ذلك سلبًا على أداء التطبيق ككل إذا كنت تعمل على مشروع كبير ولديك الخبرات الكافية فيمكن استخدام React بالطبع. على الجانب الآخر، Angular يأتي مدمجًا مع مكتبات وميزات متكاملة، مثل Dependency Injection وRouting و httpClient مما يوفر راحة للمطورين والفرق الصغيرة. إذ أنه يزيل عبء المفاضلة بين المكتبات المختلفة ويوفر إطار عمل شامل يتيح لك البدء بسرعة دون الحاجة للبحث عن أدوات إضافية. إذا كان المطور مرتاحًا مع React، فمن الأفضل أن يطور مهاراته في هذا الإطار حيث إنه مطلوب بشكل كبير في سوق العمل. التخصص في React يوفر فرصًا أكبر ويتيح له الانتقال بسهولة إلى React Native أيضًا. يمكن أن يكون Angular خيارًا جيدًا لبعض المشاريع الكبيرة في المستقبل وعند عملك بإطار عمل يسهل عليك الإنتقال بينهم حيث يكون لديك كل المفاهيم الأساسية لكيفية عمل الإطار. ستستفيد بالطبع من المميزات التي تقدمها Typescript من وضع أنواع ثابتة للمتغيرات والتعريف لشكل البيانات لكل مكون مما يوفر لك التحقق من الأنواع و يساعد في تقليل الأخطاء أثناء التطوير ويجعل الكود أكثر وضوحًا وصيانة.1 نقطة
-
اليس هناك تطبيقات ضخمه مقل فيسبكون وانستقرام و اوبر يعنلات على react native و مواقع كبيره تعمل على react js اذا هل على المطور التحول من react الى anguler ام انه من الامهم ان يطور نفسه في react js بشكل عام؟ وهل في حال استعمال react with typescript يعد مثل anguler؟1 نقطة
-
توجد أطر عمل كثيرة في الواجهة الأمامية، مثل Angular وReact وVue.js. عند اختيار الإطار المناسب، نقوم بالتركيز على Angular وReact يتم النظر إلى عدة عوامل رئيسية. الشعبية: تحتل React المرتبة الأولى في أطر العمل الخاصة بالواجهة الأمامية، مما يجعلها خيارًا شائعًا بين المطورين. سهولة التعلم: يُعتبر React سهل التعلم، حيث يمكن للمطورين الذين يتقنون JavaScript الانتقال إليه بسهولة دون الحاجة إلى تعلم TypeScript. هناك العديد من المكتبات المتوافقة مع React، مما يسهل بناء التطبيقات. بعد تعلم React يمكنك الانتقال مباشرة إلى React Native،الذي يُستخدم لبناء تطبيقات الموبايل حيث إنه مبني على React وأيضا React يمكن استخدام TypeScript معها إن أردت لا مشكلة في ذلك. تنظيم المشروع: يتطلب React منك تنظيم الملفات بنفسك وتثبيت المكتبات التي تفضلها مثل Axios لعملية إرسال الطلبات و React Router DOM للتوجيه بين المكونات ، مما يمنحك مرونة كبيرة. في المقابل، يعتمدAngular بشكل إلزامي على TypeScript ويأتي مدمجًا مع العديد من المكتبات التي تُستخدم أثناء التطوير وعلى الرغم من أنك تستطيع تثبيت مكتبات إضافية، يُفضل استخدام المكتبات المدمجة. المتطلبات المسبقة: يحتاج Angular إلى معرفة سابقة TypeScript وأساليب التصميم مثل المزخرفات (Decorators) وحقن التبعية (Dependency Injection) وعملية التوجيه (Routing). من المهم فهم هذه المفاهيم، مما يجعل Angular يتطلب وقتًا أطول في التعلم مقارنةً بـ React. بشكل عام، يتمتع كل من React وAngular بخصائص قوية تناسب مختلف المشاريع. React مناسب للمبتدئين والمشاريع الصغيرة إلى المتوسطة، بينما يُفضل Angular في المشاريع الكبيرة التي تتطلب هيكلًا تنظيميًا قويًا ومعرفة مسبقة. يمكنك النظر لهذه المقالات لمعرفة الإختلافات أكثر1 نقطة
-
AI Mathematical Olympiad (AIMO) هي مسابقة دولية في الرياضيات مصممة خصيصا لنماذج الذكاء الاصطناعي وتعرف أيضا باسم أولمبياد الرياضيات الذكي (AIMO) يهدف إلى تعزيز المهارات الرياضية لدى الطلاب، سواء على مستوى المدارس الثانوية أو المراحل الأخرى بحيث يركز الحدث على تحدي المشاركين من خلال مسائل رياضية معقدة تتطلب التفكير النقدي والإبداع وعادة ما يستهدف طلاب المدارس الثانوية، ولكن يمكن أن يشمل فئات عمرية مختلفة كما تتضمن المسابقة مجموعة من المسائل الرياضية المتنوعة، تشمل مجالات مثل الجبر والهندسة ونظرية الأعداد والتركيبات وبالنسبة للصعوبة تتراوح المسائل من السهلة إلى الصعبة، مما يسمح لجميع المشاركين بالاستفادة والتعلم والمميز فيها أنه يمكن أن تعقد المسابقة بشكل فردي أو كفريق، مما يعزز التعاون بين المشاركين كما يمكن أن تكون الأسئلة متعددة الخيارات أو مفتوحة.1 نقطة
-
حسنا إذا كانت لدي كيف أقوم بإعطائه ملفاتي (أرى أن هذه الطريقة الأفضل أي يكون الدومين خاص بي أنا، وما رأيك أيها المدرب أيها أفضل؟)1 نقطة
-
إذا كانت الاستضافة والدومين خاصين بك يمكنك طلب بيانات استضافة العميل أي أن تطلب من العميل توفير بيانات استضافته (مثل بيانات FTP أو cPanel) ثم قم بتصدير الموقع كاملا (الملفات وقاعدة البيانات) من استضافتك باستخدام أدوات مثل phpMyAdmin لقاعدة البيانات، وبرنامج FTP للملفات ولرفع الملفات والقاعدة يمكنك استخدام بيانات استضافة العميل لرفع الملفات واستيراد قاعدة البيانات إلى استضافته باستخدام phpMyAdmin أيضا، أما تحديث إعدادات الموقع هو ممكن من خلال لوحة تحكم ووردبرس فيمكنك أن تعدل إعدادات ك WordPress URL و Site URL في قاعدة البيانات لتشير إلى دومين العميل. وإذا كان الدومين مرتبطًا باستضافة أخرى، قم بتحديث إعدادات DNS ك (A Record، CNAME) ليشير إلى استضافة العميل الجديدة.1 نقطة
-
وعليكم السلام ورحمة الله وبركاته. هل الإستضافة Hosting خاصة بك أم بالعميل ؟ إذا كانت خاصة بك إذا يجب تسليمه الملفات ليقوم برفع موقعه بنفسه أو يعطيك هو بيانات الإستضافة الخاصة به وتقوم أنت برفع الملفات مع ربط الدومين الخاص به في الإستضافة. أما إذا كانت الإستضافة خاصة بالعميل ولكنك قمت بربط الدومين الخاص بك فيمكنك تعديل الـDNS من لوحة التحكم cpanel أو لوحة التحكم الخاصة بالإستضافة وتقوم بكتابة بيانات ال DNS الخاصة بالدومين الجديد في لوحة التحكم مثل إعدادات A Record و CNAME . ويجب عليك مستقبلا الإتفاق مع العميل على كل شئ مسبقا مثل الإستضافة والدومين . و يمكنك فقط رفع المشروع على الإستضافة الخاصة بك لعرض المشروع على العميل وحتي يستطيع تجربته بنفسه حتي لا تقوم بتسليم الملفات قبل إرسال الأموال إليك . وبعد تجربة الموقع على الإستضافة الخاصة بك و التأكد من أن كل شئ يعمل يمكنك إستلام الأموال منه وتسليمه ملفات المشروع أو رفعه على الإستضافة الخاصة به.1 نقطة
-
الأمر يعتمد على المجال الذي تريد إستخدامه فيه، و على الأغلب في مجال البرمجة، في هذه الحالة يمكن أن يعطيك أفكار في كيفية حل المشاكل و لكن لا يمكنك الإعتماد عليه في كتابة الكود أو تصحيحه لأن الكودات التي يكتبها بالتحديثات القديمة للمكاتب و بالتالي لا تشتغل معك. أما في حالة تريد إستخدامه في شرح الكود فيمكنك ذلك و يجب أن يكون الكود واضح و المتغيرات بأسماءها الصحيحة حتى يكون شرحه صحيح، يعني يمكنك جعله كمساعد لك لكن لا تعول عليه في كل شيء.1 نقطة
-
قبل كل شيء ارجو فهم هذا انني اريد الاستفادة فقط و لا شيئ اخر . مشكلتي هي في بناء تطبيقات : رياكت نتيف مع اكسبو و نكست باختصار : تفاصيل الحزم حسب المشاريع 1. مشروع Node.js الأساسي Node.js: v11.6.0 (v11.6.0) ، v12 (v12) npm: 6.5.0 Express: 4.16.1 Mongoose: 6.3.4 2. مشروع Experience Tracker Node.js: v20.10.0 npm: 10.2.0 Next.js: 13.4.12 React: 18.2.0 Mongoose: 7.4.2 3. مشروع React Native Node.js: v20.10.0 React Native: 0.72.6 Expo: 49.0.15 4. مشروع Chat App Node.js: v20.10.0 Express: 4.17.1 Next.js: 13.4.12 React: 18.2.0 React Native: 0.72.6 Expo: 49.0.15 Socket.io: 3.1.2 Socket.io-Client: 3.1.2 5. مشروع MyDoctor Express: 4.18.2 Socket.io: 3.1.2 Mongoose: bcryptjs: 2.4.3 6. مشروع React React: 16.13.1 (16.13.1)
1 نقطة -
مرحباً ، إنه من الممكن تضمين ميزات مثل chat bot ولوحة تحكم لتحليل البيانات على موقع ويب. لكن فيما يتعلق بميزة تصوير الشاشة وتعقب الوقت، فإن المطور الذي تواصلت معه محق إلى حد كبير، حيث أن هذه الميزة تتطلب عادة صلاحيات نظام التشغيل التي لا تتوفر لتطبيقات الويب. عادة مثل هذه الوظائف تتطلب تطبيق سطح مكتب مستقل باستخدام تقنيات مثل Electron أو JavaFX لأنها تحتاج إلى الوصول المباشر إلى الجهاز (الشاشة والوقت). أفضل حل ممكن لتنفيذ هذه الميزات بأقل تكلفة وحماية للمعلومات: اولاً تقوم ببناء موقع ويب رئيسي للمكتب: يتضمن معلومات عن المكتب والخدمات. يحتوي على لوحة تحكم لتحليل البيانات (مثل عدد الزوار، الجلسات، نشاط المستخدم). يتضمن نظام chat bot باستخدام تقنيات مثل Dialogflow من Google أو Botpress. تشفير SSL لتأمين الموقع وضمان حماية البيانات الشخصية. ثانياً قم ببناء تطبيق سطح مكتب مستقل: استخدام Electron.js لتطوير تطبيق يمكنه الوصول إلى ميزات النظام مثل تصوير الشاشة وتعقب الوقت. هذا التطبيق يمكنه العمل جنباً إلى جنب مع الموقع، وإرسال البيانات إلى قاعدة بيانات آمنة عبر واجهة برمجية (API). ثالثاً ، يجب تحقيق التكامل بين الموقع والتطبيق: يمكن للتطبيق إرسال البيانات (مثل وقت العمل واللقطات) إلى الخادم الذي يدير الموقع، بحيث تكون لوحة التحكم على الموقع قادرة على تحليل وعرض هذه البيانات. يمكن أيضاً تخزين البيانات المتعلقة بالأداء والإنتاجية وتحليلها وعرضها على الويب بشكل آمن.1 نقطة
-
مرحبا لقد اوضحت مشكلتي بالتفصيل فالرسالة الماضية . انا اسف جدا علي قولي هذا لاكنها الحقيقة و سأعد ورقة انشالله عن اصدارات المكتبات المستعمل في المسارات التي مررت عليها و هي 6 مسارات الاولي تثبت ان التحديثات لم تطل دورة جافاسكربت علي الاقل من ثلاث سنوات. و المفروض ان هذه دورة مدفوعة و ليست دورة عادية او دورة علي اليوتيوب. و انا هنا لتعلم مهارة جدية لسوق العمل (فقط). شكرا علي الرد .1 نقطة
-
يستخدم كل من ووردبريس بدون رأس Headless WordPress وواجهات برمجة التطبيقات REST API ضمن بيئة تطوير ووردبريس بشكل كبير مؤخرًا، ويحتاج المطورون لامتلاك مجموعة من الأدوات القياسية التي يرغبون في استخدامها عند العمل على هذه النوع من المشاريع. سسنشرح في مقال اليوم طريقة التعامل مع مفهوم ووردبريس مقطوع الرأس (بلا رأس) باستخدام مجموعة من الأدوات وعلى الرغم أننا لا نؤكد أن مجموعة الأدوات التي سنستخدمها ينبغي أن تكون قياسية إلا أننا نرى أن هذه الادوات ستكون مناسبة للاستخدام عند بناء تطبيقاتنا باستخدام REST API، وهذه الأدوات هي : MailHog: وهي أداة اختبار SMTP تعتمد على الويب وواجهة برمجة التطبيقات. Insomnia: هو عميل REST قوي متعدد الأنظمة يستخدم لاختبار واجهات برمجة التطبيقات. JWT Auth: هي أداة شائعة الاستخدام لتأمين واجهات برمجة التطبيقات. تطبيقات ووردبرس بدون رأس Headless WordPress باستخدام REST API لنتعرف في الفقرات التالية على أهم المتطلبات والخطوات التي تحتاجها لتطور تطبيقات ووردبريس بدون رأس مع توضيح حالات الاستخدام المفيدة لهذا النوع من التطبيقات. المتطلبات قبل النظر في استخدام هذه الأدوات في بناء مشروع فعلي يجب عليك تجهيز الحاسوب الذي سيستخدم هذه الأدوات. وعلى الرغم من أنك لن تقوم بذلك في مشاريع التطوير الفعلية لكن تجهيز بيئة تطوير محلية يفيدك في مرحلة التعلم واختبار التطبيق وإليك قائمة بأهم الأدوات التي ستحتاجها: خادم ويب يدعم لارافيل مثل Valet نظام إدارة قواعد البيانات مثل MariaDB لغة البرمجة PHP (أي إصدار أعلى من 7.4.33 حسب نوع الخادم الذي تشغل المشروع عليه) ولمزيد من المعلومات حول إعداد بيئة تطوير محلية يمكنك الاطلاع على مقال تثبيت وضبط تطبيق لارافيل مع خادم Nginx على حزمة LEMP من أوبنتو ومقال دليل إعداد خادم ويب محلي خطوة بخطوة سنستخدم أيضاً الأدوات التالية بالنسبة لبيئة التطوير الخاصة بنا: Visual Studio Code Insiders: لتحرير الأكواد. PHPDoc Comment: لتوثيق الأكواد. PHP Sniffer & Beautifier مع PSR12: لتحليل وتنسيق كود PHP والتأكد من مطابقته للمعايير والقواعد البرمجية. PHP Debug: لمراقبة تطبيقات PHP وتتبع أخطائها. Ray: أداة تسهل تصحيح الأخطاء البرمجية. عملياً إذا كنت على معرفة بكل الأدوات والتقنيات السابقة وكان لديك الإعدادات الخاصة بك أو كنت معتاد على بناء التطبيقات أو الحلول باستخدام ووردبرس فقد يكون كل ما سبق لا يعنيك. وإلا يجب عليك أن تأخذ بعض الوقت لتتعرف على كل ما ورد أعلاه. دراسة حالة بسيطة: بفرض طلب منك تطوير تطبيق ووردبرس بدون رأس Headless WordPress يوفر نقاط نهاية مخصصة endpoints ويمكن لتطبيق iOS الاتصال بها لتسجيل الدخول والقيام بالاستيثاق أو التأكد من صحة البيانات وإرسال واستقبال البيانات. سيقدم تطبيق ووردبريس الوظائف التالية بالتحديد: إنشاء حساب جديد للمستخدم. الحصول على معلومات المستخدم. طلب مفتاح التشفير المساعد token. التحقق من المفتاح المساعد token. ضبط بيانات المستخدم. إن هذه البنود ليست كاملة ولكنها كافية لتوضيح طريقة استخدام الأدوات المختلفة في بناء تطبيقات مماثلة.كما أن الوظائف المذكورة في التطبيق يمكنها أن توفر عبر نقاط الوصول endpoints التالية: /acme/v1/getUser /acme/v1/createUser /jwt-auth/v1/token /jwt-auth/v1/token/validate /acme/v1/setData ملاحظة: إن acme هنا عبارة عن قيمة مؤقتة placeholder تعبر عن اسم التطبيق. أما jwt-auth فهو اسم المكتبة الخاصة بعملية المصادقة (اسم المستخدم وكلمة المرور) التي نقوم باستخدامها وهذا ما سيتم مناقشته لاحقاً في هذه المقالة توثيق واجهة برمجة التطبيقات API: يعد توثيق واجهة برمجة التطبيقات API شرطاً أساسياً من شروط نجاحها، وبما أننا نعمل على إنجاز تطبيق بدون رأس Headless فمن المهم جداً تنفيذ واجهة جميلة موثقة جيدًا للتطبيق، وسننفذ واجهة تطبيقنا باستخدام REST API ليتفاعل معها المستخدمون. لكن واجهة برمجة التطبيق API لا ينبغي أن تكون كصندوق أسود نتفاعل معها دون الاهتمام بتوثيقها وتوضيح تفاصيلها الداخلية إذ يحتاج المطور لمعرفة رأي المستخدمين في التطبيق الذي أنشأه فربما يكتشف المستخدمون بعض الثغرات التي تجاهلها المطور عند بناء التطبيق. وهناك أسباب أخرى تدعونا إلى توثيق واجهة برمجة التطبيقات APIs حتى لو لم يكن التطبيق متداول على نطاق واسع. وهذه الأسباب هي: الاتصال الجيد بين نقاط الوصول والوسطاء والخرج المتوقع. سهولة تواصل المطورين الجدد مع الواجهة. سهولة العودة لتصحيح الأخطاء في حال ظهورها في التطبيق المقدم للعميل. وجود عدة إصدارات من واجهة برمجة التطبيق API يمنح للمطورين المرونة باختيار الإصدار المناسب لتطبيقاتهم ومعرفة المميزات الموجودة في كل إصدار. لذا من المفيد أن تأخذ هذه الأسباب بعين الاعتبار عندما تقوم بإنشاء وتنفيذ أي تطبيق في المستقبل. الأداة MailHog إذا قمت سابقاً بتثبيت برنامج ووردبريس فمن المؤكد أنك رأيت كمية رسائل البريد الإلكتروني المرسلة لك وذلك إما عبر واجهة التطبيق أو عبر واجهة سطر الأوامر Command Line Interface فعندما تعمل في بيئة التطوير الخاصة بك سيكون هناك اختلاف بسيط في التعامل وإدارة رسائل البريد الإلكتروني (سواء في طريقة استلامها أو تخصيصها) وهنا يمكنك استخدام تقنية MailHog وهي عبارة عن تطبيق ويب مفيد جداً عندما تصل إلى مراحل متقدمة في تطوير واختبار مشروعك حيث تقوم هذه التقنية بدور خادم SMTP وهمي وتقوم بشكل أساسي بدور خادم بريد إلكتروني وهمي لمساعدتك في اختبار وظائف البريد الإلكتروني وتصحيح الأخطاء. تقوم الأداة MailHog بشكل أساسي باعتراض وفحص رسائل البريد الإلكتروني الصادرة من تطبيقك بدلاً من إرسالها بشكل مباشر إلى المستلمين الحقيقيين ثم تقدم هذه الرسائل عبر واجهة التطبيق، وهذا يسهل قراءة وتحليل ومراجعة الرسائل الصادرة من ووردبريس. إذ تسمح لك هذه الأداة بإلقاء نظرة كاملة على رسائل البريد الإلكتروني وهذا يتضمن: الموضوع (عنوان الرسالة) المرسل المستقبل (مستلم الرسالة) الرسالة (نص الرسالة) كما تسهل هذه الأداة وظائف البريد الإلكتروني من خلال التأكد من تنسيق رسائل البريد الإلكتروني وتسليمها بشكل صحيح. وعلى الرغم من أن هذه الأداة تعد مفيدة نوعاً ما عند العمل ضمن برنامج ووردبريس إلا أنه يجب الأخذ بعين الاعتبار معرفة كيفية استجابة التطبيق عندما نستخدم بيئة ووردبريس بدون رأس Headless WordPress فكل الأوامر تشغل من خلال نقاط الوصول الخاصة بواجهة برمجة التطبيق API الأداة Insomnia الأداة Insomnia هي تطبيق عميل API مفتوح المصدر متوافق مع مختلف الأنظمة، لكن إذا كنت معتادًا على التعامل مع تطبيقات REST API مثل تطبيق Postman أو تطبيق Paw (المسمى حالياً RapidAPI) فإنك لن تكون مهتماً بالعمل على هذه التقنية بالرغم من أنها أبسط نوعاً ما من التطبيقات المذكورة أعلاه بالنسبة للمطورين الذين لا يعملون على البرامج المذكورة أعلاه فإن هدفهم الأول هو تبسيط عملية التفاعل مع واجهة برمجة التطبيق REST API واختبارها. تنشئ الأداة Insomnia طلبات بروتوكول HTTP وتحللها وترسلها إلى نقاط وصول واجهة برمجة التطبيق API باستخدام الأوامر GET و POST و PUT و DELETE القياسية وتجعل التعامل معها أكثر سهولة. كما أنها تسهل التعامل مع ملفات JSON, XML وبيانات النماذج أو الاستمارات forms. وإن كان هذا الأمر غير مهم عند إنشاء التطبيقات لأنه يمكنك التحكم بنوع ملفات الخرج التي سيتم استرجاعها ولكنه أساسي عندما تتعامل API آخر لأن تحتاج لتغيير تنسيق البيانات قبل إرسالها أو استقبالها. ومن أهم ميزات هذه الأداة هي قدرتها على تنظيم الطلبات requests في مجلدات ومساحات عمل workspaces وهذا يسمح للمطورين بتنظيم وإدارة مشاريع اختبار واجهة برمجة التطبيق API الخاصة بهم ويسهل عملية التنقل والتبديل بين نقاط الوصول المختلفة. بالإضافة إلى ذلك فإن الطريقة التي يسمح لنا التطبيق بها في هذه الأداة بتوثيق وتنظيم كل نقطة وصول تجعل عملية مشاركة التطبيق مع المطورين الآخرين أسهل وبالتالي يمكنهم اختبار التطبيق على تطبيق واجهة برمجية API آخر على سبيل المثال بمجرد إنشاء REST API لموقع مبني بواسطة ووردبريس يمكنك مشاركته بواسطة الأداة Insomnia مع مطوري تطبيقات iOS ليتمكنوا من معرفة ما يلي: بنية نقطة الوصول الوسطاء المتوقعة الخرج الذي سيعيده التطبيق توثيق كل نقطة وصول في حال حدوث خطأ غير متوقع أخيراً فإن هذا النوع من الأدوات يسهل بناء وتطوير التطبيقات عند العمل مع مطورين يعملون على تطبيقات أخرى الأداة JWT-Auth قبل البدء في معرفة أهمية الأداة JWT-Auth فإنه من المفيد جداً معرفة ما هي JWT ومدى فائدتها في تطوير واجهة برمجة التطبيقات REST API بشكل عام يمكن تعريف JWT على أنه طريقة آمنة لنقل المعلومات بين المطورين بصيغة JSON وبعبارة أبسط هي عبارة عن آلية مصادقة معتمدة على المفتاح المساعد token وتستخدم بشكل كبير في تطبيقات الويب ملاحظة: على الرغم من صحة ما سبق فإنك إن لم تكن على دراية بآلية عمل مصادقة REST API لن تستطيع بناء المصادقة التي تحتاج إليها. عند إجراء مقارنة بين طريقة تفاعلنا مع الووردبريس من خلال المتصفح، وطريقة تفاعلنا مع الوورد بريس من خلال JWT فإنه يجب الانتباه إلى النقاط التالية: أولا نقوم بإرسال بيانات الاستيثاق (اسم المستخدم وكلمة السر) إلى المتصفح ومن ثم يطابق التطبيق تلك البيانات ويرسلها إلى المتصفح وبعد ذلك نكون قادرين على العمل والتنقل ضمن الوورد بريس (إدارة المستخدمين - كتابة وتحرير المنشورات وما إلى ذلك وأحياناً يكون عبارة عن مراجعة للمنشورات فقط) وهذه الأمور تتم فقط من خلال مدير نظام ووردبريس. أما عندما تتم المصادقة عبر واجهة برمجة التطبيقات REST APIs فيجب أن يكون هناك طريقة أخرى للمصادقة يستطيع التطبيق من خلالها معرفة بيانات استيثاق المستخدم وهنا يأتي دور المفتاح المساعد token حيث ستقوم آلية المصادقة المعتمدة على JWT بإنشاء مفتاح مساعد token ثم تقوم بتضمين هذا المفتاح المساعد token مع كل طلب وفي انتهاء صلاحية المفتاح المساعد token ستقوم واجهة برمجة التطبيق API بإعلامك من أجل أن تقوم بتحديث المفتاح المساعد token من الواضح بأنك بحاجة إلى عمل كثير عند تطبيق JWT في ووردبريس ولكن عند استخدام إضافة JWT-Auth فإن ستصبح الأمور أسهل بكثير. وكما توضح الصورة أعلاه المأخوذة من توثيق الإضافة فإن استيثاق ووردبريس باستخدام JSON Web Token يسمح بإجراء مصادقة واجهة REST API باستخدام المفتاح المساعد token وهي عملية بسيطة وغير معقدة وسهلة الاستخدام وهذه الإضافة مناسبة جداًَ لعمل مصادقة JWT ضمن ووردبريس. وللتعامل معها عليك القيام بما يلي: ضع مفتاح سري في الملف wp-config.php حدد فيما إذا كنت تريد من الإضافة أن تدعم خاصية CROS (وهو موضوع مهم إذا كنت تريد تمكين الاتصال الآمن بين تطبيقات الويب) بعد الانتهاء من تثبيت الإضافة يمكنك ان تقوم بعمل طلب request إلى wp-json/jwt-auth/v1/token/ متضمنا اسم المستخدم وكلمة السر للحساب بتنسيق JSON كما في المثال التالي: { "username": "John@appleseed.com", "password": "kn6oLrcW0\/D1M" } وبعدها سوف تستقبل الرد التالي: { "success": true, "statusCode": 200, "code": "jwt_auth_valid_credential", "message": "Credential is valid", "data": { "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NjYXJpZi50ZXN0IiwiaWF0IjoxNjg0MzU1MzA5LCJuYmYiOjE2ODQzNTUzMDksImV4cCI6MTY4NDk2MDEwOSwiZGF0YSI6eyJ1c2VyIjp7ImlkIjoyNTksImRldmljZSI6IiIsInBhc3MiOiJiMWM3OTBhMmJhYzExNzNlYzI4ZTQxZGUxMDYyYzIwZiJ9fX0.q3-DRC_DQvezy1w-XV0CYNQYyKC3X8iSs7GKy86zjbg", "id": 259, "email": "John@appleseed.com", "nicename": "johnappleseed-com", "firstName": "John", "lastName": "Appleseed", "displayName": "John@appleseed.com" } وبعد ذلك ستقوم بتضمين المفتاح المساعد token مع كل طلب جديد، وإما أن يسمح لك الووردبريس مع إضافة JWT Auth بإرسال هذا الطلب request أو أن يمنعك من ذلك. هذا هو باختصار جوهر عمل الأداة JWT ضمن التطبيقات دون الرأس headless ولكن هذا ليس كل شيء إذ توفر هذه الأداة الكثير من المميزات الأخرى التي لن نتطرق لها حاليًا الخاتمة تعرفنا في مقال اليوم على أهم الأدوات التي سنحتاجها لبناء تطبيقات ووردبريس بدون رأس Headless WordPress باستخدام واجهة برمجة التطبيق REST API والتي يمكنك من خلالها الاستفادة من مرونة الووردبريس كنظام إدارة محتوى. نتمنى لكم الاستفادة الجيدة من هذا المقال وفي حال كان لديكم أي تساؤل حول ما ورد فيه فيمكن تركه في قسم التعليقات أسفل المقال أو كتابته في قسم الأسئلة والأجوبة في أكاديمية حسوب. ترجمة وبتصرف للمقال How To Build Headless WordPress Applications with a REST API لكاتبه Tom McFarlin اقرأ أيضًا مُقدّمة إلى برمجة إضافات Wordpress مدخل إلى برمجة قوالب ووردبريس أفضل طريقة للتّعديل على ووردبريس وإضافة نص برمجي إليه استقبال وحفظ خيارات الإضافة في ووردبريس من خلال التعامل مع Setting API وOptions API1 نقطة
