Ahmed Elmrsawy

السلام عليكم , بالنسبة للclosure : الclosure مقصود به هو قدرة الدالة على التعرف على المتغيرات الموجودة في النطاق الجانبي لها و المعروف ب lexial scope , حتا إذا تم الانتهاء منه و تدميرة . مثال : function outerFunction(x) { // نلاحظ هنا أن الinnerFunction يمكنها التعرف على المتغير X // حيث أنة موجود في النطاق الجانبي لها function innerFunction(y) { return x + y; } return innerFunction; } // صنع الclosure var closure = outerFunction(10); // الإستخدام console.log(closure(5)); // الخرج: 15 كيف تم الخرج بشكل صحيح ؟ كيف تمكنت الدالة closure على `تذكر` الargument 10 ?? هنا يأتي قوة الclosure و هو بشكل مختصر قدرة الدالة على ال`تذكر` للمتغيرات الموجودة في النطاق الجانبي لها حتا بعد الإنتهاء منه __________________________________________________ بالنسبة للprototype فكما هو معرووف أن الjavascript هي في الأصل prototype-based language ولا يوجد بها نظام لإدارة الclasses مثل بعض اللغات الأخرى و انها تدعم الoop عبر الprototypes و أن الclasses الموجودة بها ماهي الا syntax suger _____ الprototype في الجافاسكريبت هو خاصية أو proberity موجودة في كل object , و عند صناعة object جديد منة فأنة يورث الخصائص الموجودة فيه let x ={type:`car`}; console.log(x.hasOwnProperty(`type`)) // true في المثال السابق نلاحظ استعمال دالة hasOwnProperty على الobj رغم عدم تعريفها عند صناعة الobj كيف تم ذلك ؟ كيف تعرف الobj عليها ؟ حدث ذلك لأن الobject x تعرف على الدالة hasOwnProperty لأنة ورثها من الprototype الخاصة بالglobal parent object مثال أخر : // تعريف دالة البناء function Animal(name) { this.name = name; } // إنشاء object من الحيوان const cat = new Animal("فلفي"); // الوصول إلى النموذجptototype وإضافة طريقة جديدة Animal.prototype.sayHello = function() { console.log("مرحبًا، أنا " + this.name); }; // الوصول إلى النموذجprototype وإضافة خاصية جديدة Animal.prototype.species = "ثديي"; // الوصول إلى النموذجprototype وتعديل طريقة موجودة Animal.prototype.sayHello = function() { console.log("مياو، أنا " + this.name); }; // استخدام الprototype المحدث cat.sayHello(); // يخرج: "مياو، أنا فلفي" console.log(cat.species); // يخرج: "ثديي"

على ما يبدو أنو بداية من سنة 2020 لم يعد بالإمكان تغييرة لأسباب أمنية تفاصيلأكثر هنا https://developers.facebook.com/docs/facebook-login/security#https

https أكثر أمانا بكثير من http لأسباب مثل تشفير البيانات و الوقاية من الهجمات الوسيطة و التحقق من الهوية و غيرها و لتلك الأسباب قامت شركة meta بعمل نظام جديد يجبر على استعمال https و ليس http لذيادة امان مستخدميها , و هذا النظام يسمى https enforce و تم إنشاؤه عام 2018 يمكنك إيقاف ذلك النظام من لوحة التحكم الخاصة بك في حسابك في meta developer كما هو موضح بالصورة و أيضا هذا لينك لمقالة من meta تشرح فيه بتفاصيل أكثر و أنصح بقرائتها https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/

السلم عليكم , بدايةً لماذا نستخدم أمر php artisan serve ? لنقوم بانشاء local server على لجهاز الخاص بنا يكون مسؤول عن استقبال الrequests مننا فقط ولا يمكن مشاركتة . وهو أمر مناسب للاختبارات و ال debugging بينما عند الرفع على سيرفر مش digitalOcean , hostinger , AWS أو غيرهم فأن في تلك الحالة فأنك لا تريد عمل سيرفر محلي و ذلك لعدة أسباب مثل الأداء و الأمان ولكن أهمها ان السيرفر المحلي يكون فقط مصمم لتحمل thread واحد أو request واحد فقط ب> لذلك نقوم بالاستعانة بسيرفر خاص مثل apache و nginx لأن يكون لديهم مواصفات أفض أكثر من حيث أداء و حماية و غيرها و أهمها أنهم يكونو multi thread أي لديهم القدرة على تحمل أكثر من request واحد في نفس الوقت . فباختصار php artisan serve هو أمل لا يستخدم في الproduction ولكن في حالة الdevelopment ليس الا أما في الproduction يتم الأستعانة بسيرفرات مثل أباتشي و nginx و يتم تنصيبها باستعمال واجهات معدة من قبل الاستضافة نفسها و من أمثلة الواجهات هي الcPanel و Plesk و فائدة الواجهات هو تسهيل عملية تنصيب السيرفر و اعداد ملفاتك لتكون جاهزة .

علامة الزائد + هنا تُستخدم لتحويل القيمة المُدخلة من المستخدم إلى نوع البيانات "number"، إذا كانت القيمة المدخلة هي عبارة عن رقم. دعونا نشرح ذلك: prompt("Enter Day:"): تستخدم لعرض نافذة توجيه إلى المستخدم لإدخال بيانات. +prompt("Enter Day:"): يأخذ الناتج من prompt ويقوم بتحويله إلى نوع "number". إذا كان المستخدم يدخل رقمًا، سيتم تخزينه كرقم في المتغير day، وإذا كانت القيمة المُدخلة ليست رقمًا، فإن day سيكون NaN (Not a Number). بدون علامة الزائد +، القيمة المُدخلة ستتم تخزينها كنص (string).

يوجد فروق كثرة بين الأثنين أبرزها هو التالي : -basic auth 1-يقوم بارسال بيانات المستخدم مثل اسم المستخدم و كلمة المرور مع كل request . 2- البيانات تكون base64-encoded و ليست encrypted مما يجعلها أكثر عرضة للخطر . و أيضا في هذة الحالة يكون التواصل باستعمال https ضرورة قصوى لعمل encryption للتواصل كامل 3-لا يعتمد على الtoken و يجب على المستخدم ادخال البيانات في كل مرة 4- أبسط من الmodern modern auth 1- يقوم بارسال البيانات في مرة واحدة فقط و يعتمد على التقنيات الحديثة في استرجاعهم في كل مرة مثل الcookies و ذاكرة المتصفح الlocal storage 2- البيانات تكون مشفرة encrypted مما يجعلة أكثر أمانا 3-يعتمد على الtokens و تكون من مسؤولية المتصفح تخزينها و ارسالها في كل مرة 4- يعطي حرية و اتاحة أكثر للتحكم في بيانات المستخدم و الsession الخاص به و غيره 5-أكثر تعقيدا من الbasic

يوجد أثر من طريقة لإستعمال laravel مع Vue : 1- الطريقة الأبسط و هي أستعمال vue ك single page application و تطوير تطبيق vue بشكل منمفصل و استعمال laravel ك api // مثال على استعمال vue بشكل منفصل <template> <div> <h1>{{ message }}</h1> </div> </template> <script> import axios from 'axios'; export default { data() { return { message: '', }; }, mounted() { // قم بالاتصال بتطبيق laravel الخاص بك axios.get('https://your-laravel-api.com/api/data') .then(response => { this.message = response.data.message; }) .catch(error => { console.error('API Request Error', error); }); }, }; </script> و قم بتجهيز تطبيق laravel الخاص بك لاستقبال الrequests // routes/api.php Route::get('/data', [ApiController::class, 'getData']); _______________________________________________ // app/Http/Controllers/ApiController.php namespace App\Http\Controllers; use Illuminate\Http\Request; class ApiController extends Controller { public function getData() { return response()->json(['message' => 'Data from Laravel API']); } } و في هذة الحالة فأن المسؤول عن الrouting (الموجه) هو الموجه الخاص ب vue لأن في هذة الحالة نكون استعملنا vue ك single page application _____________ 2-الطريقة الثانية : و هي استعمال inertia و في هذة الحالة نقوم بالدمج بين laravel و vue ولكن في هذة الحالة لا نستخدم vue ك single page application ولا نقوم بالاستفادة بمميزات الSPA ولا نستخدم الموجه الخاص ب vue بل يتم الإعتماد على التوجية من سيرفير laravel نفسو و ليس من ال client side و نقوم في هذة الحالة بالأعتمال على الview template الخاص بlaravel و من أمثالة blade او handlebars و غيرهم ولكن لها مميزات أخرى و أبرزها هو : 1- تبسيط بيئة التطوير (simple development workflow) 2-أداء أفضل : و ذلك نتيجة الserver-side rendering و هو أيضا ما يؤدي الى نتيجة أفضل في محركات البحث 3- السهولة في التعلم في حال ما إذا كنت تألف بالفعل laravel مثال على استعمال laravel و vue والربط بينهم ب inertia // لنفترض أن التالي هو الroot الخاص بك <!-- resources/views/app.blade.php --> <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> </head> <body> <div id="app" data-page="{{ json_encode($page) }}"></div> <script src="{{ asset('js/app.js') }}" defer></script> // هنا يكون الطريق الى الvue components </body> </html> ________________ // التالي هو الvue component المسمى app // والذي سييكون مصنوع اعتمادا على inertia <!-- resources/views/js/Pages/Home/Index.vue --> <template> <div> <h1>Welcome to Inertia.js with Vue.js and Laravel!</h1> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { message: 'This is a simple Inertia.js example.', }; }, }; </script> و كود السيرفر في هذة الحالة هو التالي : // routes/web.php use App\Http\Controllers\HomeController; Route::get('/', [HomeController::class, 'index'])->name('home'); __________________________________ // و قم بتخصيص الcontroller لتعمل بشكل مناسب كالتالي // app/Http/Controllers/HomeController.php namespace App\Http\Controllers; use Illuminate\Http\Request; use Inertia\Inertia; class HomeController extends Controller { public function index() { return Inertia::render('Home/Index'); } }

السلام عليكم , لقد راجعت ملفات الكود الخاصة بك لا يوجد خطأ في ملفات السيرفر , الخطأ في ملفات ال client . في ملفات الclient .catch(err=>{ this.setState({error: err.response.data.message}); }); // هذة سوف تعمل فقط في حال وجود خطأ من السريفر ولكن في حالتك الخطا من الclient لذلك يظهر لك خطأ undefined لقيمة الdata و الخطأ الموجود في ال client هو موجود هنا كما هو موضح في الصورة في هذة الfunction axios.post("/api/auth/register", data).then(res => { Auth.login(res.data); this.props.history.push('/'); // هنا بالتحديد }) و المشكلة هو أن الhistory غير معرف , يوجد أكثر من حل لهذة المشكلة ولكن أبسطهم هو استعمال functional component بدلا من class component لان ذلك سيتيح لك استعمال useNavigation hook و التي ستمكنك من التنقل بسهولة و هذا هو الكود للتوضيح import React, { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Card, Form, Input, Button } from "reactstrap"; import Error from "components/Error"; import Logo from "assets/logo.png"; import axios from "axios"; import Auth from "Auth"; const Register = () => { const navigate = useNavigate(); // استعمال useNavigation بدلا من props.history const [state, setState] = useState({ name: "", username: "", password: "", error: "", }); const onChange = (e) => { setState({ ...state, [e.target.name]: e.target.value, error: null, }); }; const onSubmit = (e) => { e.preventDefault(); let data = { name: state.name, username: state.username, password: state.password, }; axios .post("/api/auth/register", data) .then((res) => { Auth.login(res.data); navigate("/"); // استعمال التنقل بهذة الطريقة }) .catch((err) => { setState({ ...state, error: err.response.data.message, }); }); }; return ( <Card className="auth col-lg-3 col-sm-6"> <Form onSubmit={onSubmit}> <img src={Logo} alt="" width="200" /> <h5 className="mb-4">إنشاء حساب جديد</h5> <Error error={state.error} /> <Input value={state.name} name="name" onChange={onChange} placeholder="الاسم" required autoFocus /> <Input value={state.username} name="username" onChange={onChange} placeholder="اسم المستخدم" required /> <Input type="password" value={state.password} name="password" onChange={onChange} placeholder="كلمة المرور" required /> <Button color="primary" block className="mb-3"> إنشاء </Button> <small> <Link to="/login">تسجيل الدخول</Link> </small> <p className="m-3 text-muted">&copy; {new Date().getFullYear()}</p> </Form> </Card> ); }; export default Register;

السلام عليكم , في حالة إذا أردت عمل مشروع api فبدايةً أول ما تقو به هو 1- تصميم قاعدة البيانات الخاصة بك و تصميم العلاقات بين كل الجداول و هذا ليس في الكود , لا هذا يكون في board خارجي أو غيره أولا ثم بعد ذلك يتم عملة في الكود 2- قم بعمل السيرفر الخاص بك و تأكد من الconnection بينة و بين قاعدة البيانات التي سوف تستخدمها 3-قم بعمل مسارات الapi (api routes) مثل /user و /product و غيرها مع تحديد الrequest method سواء GET ,POST , DELETE , PUT 4-قم بتصميم قاعدة البيانات الخاصة بك في الكود 5- قم بتهيئة الcontrollers في كل route حتى تقوم بما تحتاجها أن تقوم به مثلا GET /product تقوم تهيئة الcontroller ألخاصة به أن يحضر عدد 1 product من قاعدة البيانات و هكذا

1-الglobal scope - يكون هذا هو النطاق الذي يكون فيه أي متغير أو دالة معرفة خارج أي دالة . - يكون هناك متغيرات على مستوى البرنامج والتي يمكن الوصول إليها من أي مكان في الكود. - تعرف في النطاق العلوي من الكود وخارج أي دالة. var globalVar = "I am global"; // في ال global scope function exampleFunction() { console.log(globalVar); // يمكن الوصول إلى المتغير العالمي داخل الدالة } 2-function scope -عند تعريف متغير داخل دالة، فإن هذا المتغير يكون محددًا للنطاق الذي يتم فيه تعريف الدالة. -لا يمكن الوصول إلى المتغيرات داخل دالة من خارجها. إذا توجد دالة بداخل الدالة تسطيع الوصول الى متغيرات الدالة الأم . وليس العكس . const outerFunction =()=>{ const X= 1; const innerFunction =()=>{ const y=2; console.log(x,y)//1,2 =>لن يحدث خطا } console.log(x,y)//ReferenceError y is not defined } 3-block scope منذ ES6، تمت إضافة النطاق الكتلي بواسطة let و const، ويتعلق هذا بكتلة الكود بين أقواس الفتح {}. المتغيرات التي تستخدم let أو const في النطاق block تكون محددة لهذا الblock، وليس فقط للدوال. و تمة أضافتة لتسهيل القيام بعمليات مثل الloop , for,while و غيرها if (true) { var x = 5; // لديهfunction scope (ES5) let y = 10; // block scope (ES6) } console.log(x); // يمكن الوصول إلى x console.log(y); // سيؤدي إلى خطأ لأن y RefrenceError

schema.statics.paginate = async function ({ limit = 10, page = 1, sort = -1, where = {} }) { // حساب عدد العناصر التي يجب تخطيها استنادًا إلى الصفحة الحالية والحد (أقصد عدد) const skip = limit * (page - 1); // يتم استعمال الدالة التالية لاسترجاع العناصر من قاعدة البيانات // //حيث where تحتوي على الشروط مثل السعر const items = await this.find({ ...where, parent: null }) .limit(limit) // حدد عدد الوثائق المُرجعة في كل صفحة .skip(skip) // تخطي الوثائق استنادًا إلى القيمة المحسوبة للتخطي .sort({ createdAt: sort }) // فرز الوثائق استنادًا إلى حقل 'createdAt' .populate('user', 'name') // ملء الحقل 'user' بخاصية 'name' .populate('tags', 'name slug') // ملء الحقل 'tags' بخصائص 'name' و 'slug' .exec(); // تنفيذ الاستعلام // حساب العدد الإجمالي للصفحات استنادًا إلى إجمالي عدد الوثائق const pages = Math.ceil(await this.count({ ...where, parent: null }).exec() / limit); // إرجاع كائن يحتوي على الوثائق المُرجعة للصفحة الحالية والعدد الإجمالي للصفحات return { items, // الوثائق المُرجعة للصفحة الحالية pages // العدد الإجمالي للصفحات }; }; حتى تقوم بعملية الpaginate تحتاج الى معرفة عم عدد العناصر التي سوف تتخطاها و كم عدد العنصر في كل صفحة عدد العناصر التي سوف تتخطاها هو الskip و هو معرف داخل الfunction و يتم حسابة باستخدام الpage و الlimit كما هو موضح عدد العناصر في الصفحة الواحدة هو الlimit نلاحظ أيضا استعمال function بطريقة الfunction definition حتا تعمل كلمة this بدورها و تكون عائدة على الموديل نفسة و هو في حالتنا schema.statics _ مثلا لنفترض وجود 10 عناصر في كل صفحة اذا في الصفحة الأولى نريد تفويد عدد 0 منم العناصر و احضار 10 => skip=0 , limit =10 الصفحة الثانية نريد تفويت 10 و احضار 10 => skip=10 , limit=10 و هكذا

السلام عليكم , هذا الخطأ لا يحدث بسبب مشكلة في react-native بل أنة خطا يحدث من الback-end فاذا كنت تستخدم express على سبيل المثال فيجب مراعاة ارسال response واحد فقط داخل الcontroller . إذا حاولت إرسال أكثر من response سوف تواجة ذلك الخطأ . أحيانا يكون هناك middlewares أو nested-functions موجودة داخل الcontroller تقوم بارسال الresponse فيحب مراجعة ذلك و التأكد من إرسال response واحد فقط .

السلام عليكم , لقد قمت بتنزيل الملف الخاص بالسيرفر و لاحظت أنو يعمل جيدا في حالة ما إذا كان المستخدم بemail جديد , و يحدث الخطأ في حالة تكرر الأيميل وذلك على الرغم من كونك تتأكد أولا من تواجد الحساب مسبقا او لا وكن المشكلة التي تحدث فانها تحدث هنا (في الصورة ) و هو بالتحديد في السطر التالي : res.status().json({message: "email is using before"}) حيث أن استعمال .status() يجب معها تحديد نوعية الstatus المناسبة ولا يجب تركها فارغة , فالحل هو جعلها كالتالي : res.status(309).json({message: "email is using before"})

و عليكم السلام , الmiddleware validateObjectId يستوجب وجود id في الrequest params module.exports = (req, res, next) => { if (!mongoose.Types.ObjectId.isValid(req.params.id)) { // يفحص إذا كان الid مناسب مع mongoose من حيث الlength مثلا و غيرها من المواصفات/ return res.status(400).json({message: "Invalid Id"}) } next() } وفي الcontroller getPostCountCtrl لا تحضر معلومات عنصر واحد بid واحد بل تحضر معلومة عن كل العناصر لذلك فعند أستدعائك لها لا يوجد id في الrequest params و هو ما يسبب المشكلة و الحل أن تحذف الmiddleware validateObjectId منها و من كل الcontrollers المسؤولة عن عرض أو اضافة معلومات خاصة بأكثر نم عنصر و ليس عنصر واحد فقط

في react عند تغيير الstate يتم عمل rerender للcomponent كامل ولكن للحد من تلك المشكلة يتم اللجوء لإستخدام حلول مثل useMemo حيث أنة يتم تقسيم الكود الي components أصغر و تستعمل useMemo لإخبار react أن ذلك الcomponent لن يحدث له rerender الا في حالة تغير الstates الموجودة في قائمة الإعتمادات أو الarray of dependencies و أيضا استعمال useCallBack لعدم تعريف الfunction من جديد في كل مرة يتم فيها عمل rerender للcomponent import React, { useState } from 'react'; const DisplayCount = React.memo(({ count }) => { console.log('Rendering DisplayCount'); return <p>العدد: {count}</p>; }); const MyComponent = () => { const [count, setCount] = useState(0); const handleIncrement = React.useCallBack(()=>{ setCount(count + 1); },[setCount,count]) return ( <div> <DisplayCount count={count} /> <button onClick={handleIncrement}>زيادة</button> </div> ); }; export default MyComponent;

وعليكم السلام , يوجد أكثر من طريقة لتنفيذ center لل div : 1-لعمل center أفقيا : في هذة الحالة فعمل margin:auto تفي بالغرض . <div class="parent" > <div class="child" ></div> </div> css .center { border: 5px solid; margin: auto; width: 50%; padding: 10px; } _________ 2- رأسيا : من ضمن الطرق لعمل ذلك هو وضع الposition : absolute و وضع الtop او الbottom بقيمة 50%و ذلك يخبر المتصفح أن يضع الحد الأدنى من الchild في منتصف الparent و سوف نحتاج لأن نحركة لأعلى بقيمة 50% من قيمة ارفاع العنصر نفسو لذلك نستعمل transform:translate(0,50%) .child { border: 5px solid; position: absolute; top: 50%; transform: translate(0, -50%); padding: 10px; } 3-رأسيا و أفقيا : 1-عمل نفس الخطوات السابقة ولكن بإضافة left:50% و هو اخبار المتصفح أن يضع طرف الchild في منتصف الparent و سنحتاج أيضاتحريك الchild بنسبة 50% من قيمتة حتا يصبح منتصفة في منتصف الparent .child { border: 5px solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; } 1-باستعمال flexbox و هي الطريقة الأفضل : حيث نقوم بعمل display :flex للparent و نختار الاتجاه الأساسي و ليكن صف (row) على سبيل المثال فنقول : flex-direction:row و عمل justify-content:center و هذا معناة وضع محتوى الparent في المنتصف في الإتجاه الأساسي و الذي هو الأفقي في حالتنا و عمل أيضا align-items:center و هو معناة وضع محتويات الparent في الاتجاه الفرعي و هو الرأسي في حالتنا .parent{ display:flex; flex-direction:row; justify-content:center; align-items:center; } .child{ border:10px solid; padding:10px; } 2- من الممكن أيضا تنفيذ نفس الطريقة السابقة باستعمال bootstrap كالتالي : <div class="d-flex flex-row justify-content-center align-items-center" > <div class="border border-2 border-solid p-4" ></div> </div> 3-باستعمال grid system display:grid و باستعمال place-items:center و التي تعمل لوضع العناصر في الcenter افقيا و رأسيا .parent { display: grid; height: 100vh; place-items: center; } .child { border:10px solid padding:10px }

و عليكم السلام , انواع البيانات (Primitive data types )في لغة الjavascript هي كالتالي : string , number , object , booleans ,BigInt و أهمهم بالنسبة للسؤال و هو الundefined و ذلك أول فارق جوهري بين الnull و الundefined و هو أن الundefined هو بالفعل data type في لغة الجافاسكريبت . يوجد نوع أخر من الdata types في لغة الjs و هو نوع الobject data types و هو يضم الarrays و الfunctions و غيرهم و الnull ينتمي الى هذا النوع . بمعنى أن الnull هو في الأصل object ولكن لا قيمة لة . لذلك فأن الفارق في المعنى بين الأثنين أن الundefined يعني غياب قيمة المتغير كليا . بينما الnull يأتي بمعنى غياب قيمة الobject . let x; concole.log(x,typeof x)//الرسالة سوف تظهر (undefined , undefined) let y = null ; console.log(y , typeof y)//الرسالة (null , object) و من هنا نستنج أن لغة الjs نفسها تضع قيمة الundefined للمتغيرات التي لاقيمة لها ولا نحتاج نحن لوضعها . بينما الnull هو object لا قيمة له و يتم تعريفة يدويا .