MoJaffer

تستطيع فعل ذلك عن طريق FlatList componnet حيث ستسمح لك بعرض البيانات بالشكل الذي تريده سواء افقي أو عمودي طبعاً في البداية ستحتاج لعمل import للـ FlatList import { FlatList } from "react-native" الآن سنقوم بعمل بعض التعديلات على الكود الخاص بك : export default function CoulumnsInMap() { const renderItem = ({ item }) => ( <Card id={item.id} name={item.name} /> ); return ( <FlatList data={data} /* هنا سنضغ البيانات الخاصة بك */ renderItem={renderItem} /* تأخذ كل عنصر من البيانات وتقوم بعرضه */ keyExtractor={item => item.id} /* تحديد المعرق */ horizontal={false} /* هنا سنقوم بجعل عرض البيانات بشكل عرضي */ numColumns={2} /* عدد الصفوف */ /> ); } معاينة

من الأفضل إرفاق ملفات المشروع

بعد اضافة position: fixed تقوم بتحديد تموقع العنصر بالنسبة للمتصفح دون التأثير على أي عنصر اخر في الصفحة فقبل اضافة position: fixed كان sidebar يأخذ جزء من الصفحة (30%) قما قمت بتحديدها أنت لذلك الـ content كان يتأثر بهذا بـ sidebar وكان يتموقع بعده مباشرة في الصفحة الآن بعد أن قمت بإضافة position: fixed لم يعد content يتأثر بعرض الـ sidebar الذي حددته بـ (30%) لذلك ستجده يعود إلى اقصى يسار الصفحة سيكون خلف الـ sidebar مباشرة الحل هنا بعد أن تقوم بإضافة position: fixed ستذهب إلى الـ content وتقوم بإعطائه margin-left: 30% وستحل مشكلتك نصيحة : حاول تعلم كيفية عمل position Property في CSS

عندما تستخدم خاصية opacity على عنصر معين فإن جميع العناصر (childs) ستتأثر بذلك في حالتك أنا بصراحة لا اعلم لماذا تريد استخدام خاصية opacity من الأساس هل ذلك من اجل تخفيف اللون الأسود ؟ الأفضل لك هنا هو أن تقوم بتقليل شفافية اللون الأسود وليس شفافية العنصر نفسه احذف خاصية opacity واستبدل اللون الأسود (black) باللون (#0000007a) هنا قمت بتغيير شفافية اللون الأسود نفسه وليس العنصر وبهذا لن تتأثر بقية العناصر بالشفافية

بعد تسجيل الدخول ستستطيع الوصول لبيانات user عن طريق req.user بهذا الشكل الآن أنت تحتاج أن تتحقق من أن هذا user قد قام بتسجيل الدخول من خلال views لعمل ذلك ستحتاج إلى عمل متغيير تقوم فيه بتخزين بيانات user ومن ثم تمريرها للـ views تستطيع عمل ذلك بالشكل التالي : app.use((req, res, next) => { res.locals.user = req.user; next(); }); هنا req.locals.user ستسمح لنا بقراءة المتغيير user على أي ملف من ملفات veiws الآن بكل بساطة بداخل اي ملف view (if user) <button>logout</button> (else) <button>login</button> <button>register</button>

لماذا تحتاج تمرير المتغيير app إلى ملف controllers ؟

في البداية انصحك بإستخدام اطار عمل مثل vue.js أو React.js لتسهيل العمل ولكن في حالتك إن اردت فعل ذلك بإمكانك فعلها بإستخدام الجافاسكريبت الفكرة هنا هي تعريف متغييرين اثنين الأول ستسميه مثلاً ar والآخر ستسميه مثلاً en وبداخل كل متغيير ستضيف كائن وفي كل كائن ستضيف عدة Properties ستضيف فيها جميع النصوص الكلمات التي تريدها بعدها سنقوم بتعريف متغيير اخر وهذا المتغيير سيتم فيه تحديد اللغة التي تريدها واخيراً بعدها ستقوم بإنشاء دالة من خلالها ستقوم بتغيير هذا المتغيير دعنا نأخذ المثال للتضح لك الصورة بشكل افضل اولاً HTML <h2 id="hello"></h2> <!-- هنا سيظهر النص --> <p id="text"></p> <!-- هنا لتتغير اللغة عند الضغط --> <button onclick="setLang('en')">English</button> <button onclick="setLang('ar')">عربي</button> ثانياً : الجافاسكريت // هنا حيث نقوم بتخزين الكلمات والعبارات التي نريدها لكل لغة في متغيير منفصلين var ar = { hello: "مرحباً!!", text: 'تغيير اللغة' }; var en = { hello: 'Hello!!', text: 'Change language' }; var language = ar; // تحديد اللغة // تغيير نص HTML function changeText(){ for (const key in language) { document.getElementById(key).innerText = language[key]; } } changeText(); // تغيير اللغة عند الضغط على ازرار تغيير اللغة var setLang = function (lang){ lang === 'ar' ? language = ar : language = en; changeText(); }

في النسخة الـ 4 من Express لم تعد بحاجة لإستخدام كل من app.configure & app.use لإعداد الـ middleware المطلوبة فقد تم حذف جيمع تلك الـ middleware الآن حيث اصبح بالإمكان تحديثها وصيانتها بشكل مستقل من Express Core وهنا في الملف www سيكون المكان الذي ستقوم فيه بإنشاء السيرفر وتمرير التطبيق من خلاله (ملف app.js) حيث سيكون ملف app.js الملف الذي يحتوي على الـ middlewares & routes

لا يمكنك تثبت الحزمة globally حيث يجب عليك تثبيت حزمة express داخل ملفات المشروع locally ولعمل ذلك ادخل واكتب في سطر الأوامر الأمر التالي : npm install express

اسرع طريقة لفعل ذلك هي بإضافة app.disable('x-powered-by'); بإمكانك ايضاً اضافة middleware لإزلة header بهذه الطريقة : app.use(function (req, res, next) { res.removeHeader("X-Powered-By"); next(); });

لقد قمت بنسيان اضافة كل من passport.serializeUser & passport.deserializeUser كل ما عليك فعله هو اضافتها passport.serializeUser(function(user, done) { done(null, user.id); }); passport.deserializeUser(function(id, done) { User.findById(id, function(err, user) { done(err, user); }); });

في البداية عليك معرفة ماهية وكيفة عمل "npm start" "npm start" تقوم بتشغيل امر محدد مسقباً في الخاصية start داخل الكائن scripts في ملف package.json وبما أن الخطأ الذي ظهر لك هو "missing script: start" فهذا يعني أنك لم تقم بإضفة خاصية start في ملف package.json لذلك كل ما عليك فعله هو الدخول إلى ملف package.json واضافتها كما يلي : "scripts": { "start": "node YOUR_FILE.js" } وسيعمل معك الخادم اذا فهنا الأمر npm start وكأنك تقوم بكتابة الأمر "node YOUR_FILE.js" في سطر الأوامر

لو قمت بطابعة المتغير y عن طريق console.log سترى بأن نتيجة المتغيير هي عبارة عن مصفوفة ستكون بهذا الشكل [div.col, div.col, div.col, ...] وطبعاً هنا أخي عندما قمت بإستخدام الشرط if للتحقق من قيمة المتغير y فمن المستحيل أن يتحقق الشرط "وهو أن تكون القيمة اكبر من أو يساوي ثمانية" وهنا الحل بسيط جدا أخي أنت في الإساس لست بحاجة بالتحقق من قيمة المتغيير y وفي الإساس ليس هناك حاجة في انشاء هذا المتغيير إذا انه يمكنك التحقق من قيمة المتغيير t الذي قمت بإنشائه بدلا من ذلك كما في التالي : function ik() { var t = Math.round(Math.random() * 10); alert("this is column: " + t) if (t >= 8) { alert("YOU WON"); } else { alert("YOU LOST"); } } للإضافة : don't repeat yourself هناك طريقة اكثر احترافية لكتابة الكود الخاص بك فبدلاً من تكرار كتابة onclick في كل عنصر من عناصر (div) تستطيع بدلاً من ذلك استعمال الدالة addEventListener عند الضغط على اي عنصر يحوي كلاس بإسم (col) سنعود هنا لإستخدم document.getElementsByClassName كما استخدمتها في الكود الخاص بك وكما تذكر فإن هذا سيعود لنا بمصفوفة عن طريقها سنستطيع عمل عملية تكرار بسيطة بإستخدام for ومن ثم استخدام addEventListener للإستماع للحدث عند الضغط على أي عنصر لديه كلاس (col) سيمنحك هذا كود نظيف ولن تحتاج لتكرار كتابة onclick عند كل عنصر كما في التالي : var elements = document.getElementsByClassName("col"); var ik = function(){ var randomNum = Math.round(Math.random() * 10); alert("this is column" + "=" + randomNum); console.log('Number is:', randomNum); if (randomNum >= 8) { alert("YOU WON"); } else { alert("YOU LOST"); } } for(var i = 0; i < elements.length; i++){ elements[i].addEventListener('click', ik) } لا تنسى حذف onclick من على العناصر في الرابط التالي ستجد الكود بشكل كامل : اضغط هنا

للدخول إلى مجال العمل الحر في الإنترنت عليك أن تمتلك مهارة في مجال معين وفي عالم الربح من الإنترنت هناك الكثير من المجالات قد لا استطيع ذكرها جميعا 1 - البرمجة : وهناك عدة مجالات في البرمجة منها : تطوير تطبيقات الويب تطوير تطبيقات الهواتف الذكية تطوير برامج الحاسوب وكل مجال من هذه المجالات ينقسم لعدة مجالات اخرى 2- تصميم الجرافيك : وطبعاً هذا المجال ينقسم لعدة أقسام منها : تصميم الهويات البصرية والشعارات تصميم منشورات التواصل الإجتماعي تصميم واجهات المواقع الإلكترونية تصميم الإعلانات تصميم المطبوعات الموشن جرافيك 3 - مونتاج الفيدو 4 - الكتابة والترجمة 5 - التسويق الإلكتروني 6 - تسجيل الصوتيات

بكل سهولة بإمكانك اضافة مسار في النهاية بهذا الشكل app.use('*', (req, res) => res.render('YOUR_TEMPLET_NAME') );

req & res هي كائنات لتمرير طلب واستجابة HTTP req : هو كائن يحوي مجموعة من البيانات عند طلب HTTP مثل : parameters - queries - بيانات الحقول الكوكيز وغيرها res : تستخدم لإعادة ارسال الـ HTTP عند الإستتجابة عادة ما تكون بهذا الشكل : res.send, res.render, res.redirect

تسطيع ذلك بسهولة بإستخدام fs const fs = require('fs') const content = 'Some Content' fs.writeFile('./test.txt', content, err => { if (err) { console.error(err) return } console.log('تم الكتابة بنجاح'); })

طبعاً في البداية نحن لا نعرف مدى مستواك في كل من HTML - CSS - JS لذلك من الصعب الجزم بأن انصحك بمتابعة دورة جديدة لكن بشكل عام إن كنت ترى بأن اساسياتك جيدة إلى جيدة جداً فليس هناك داعي لأخذ دروة لتعلم الأساسيات من جديد الأفضل أن تبدأ بأخذ دورة الـ php مباشرة في حال وجدت أنك نسيت شيئاَ من اساسيات HTML & CSS اثناء متابعة دورة الـ PHP فبإمكانك مراجعتها من خلال البحث على الإنترنت

تستطيع قراءة ملف في Node.js بإستخدام مكتبة fs var fs = require('fs'); app.get('/', (req, res) => { fs.readFile('./index.html', function (err, html) { if (err) { throw err; } res.send(html); }); }); لكن سيظل من الإفضل لك استعمال محركات القوالب (templating engine) وهناك الكثير منها : PUG EJS Handlebars

في دورة تطوير واجهات المستخدم ستتعلم التالي : HTML CSS JAVASCRIPT وبإستخدام هذه اللغات ستتمكن من صنع واجهات المستخدم سؤال قد يدور على بالك ... ماهي واجهات المستخدم ؟ واجهات المستخدم او كما تعرف UI على أنها العناصر المرئية مثل الأزرار والأيقونات وغيرها، والتي تمكن الشخص من التفاعل مع الموقع أو التطبيق. ببساطة، هي أي شيء قد يتفاعل معه المستخدم عند استخدام الموقع وللإجابة على سؤالك هل تكفي دورة تطوير واجهات المستخدم لبناء موقع الكتروني؟ بإختصار لا بناء مواقع الكتروني كامل يحتاج منك ايضاً معرفة بـ Back End وذلك حتى تتمكن للإتصال بالسيرفر وتخزين وقراءة البيانات وهذا ما لا تشمل عليه هذه الدورة لذلك في حال اردت تعلم كيفية بناء موقع كامل فبعد اكمال دورة تطوير واجهات المستخدم ستحتاج ايضاً اخذ واحدة من الدورتين التاليتن : دورة تطوير تطبقات الويب بإستخدام لغة PHP دورة تطوير تطبيقات الويب بإستخدام لغة Ruby

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

لا يمكننا مساعدتك الرجاء التوضيح اكثر ... ماهي رسالة الخطأ التي تظهر لك

ستحتاج لعمل Restful API ومن خلالها تستطيع نقل المعلومات بين الـ Server و Client عن طريق بروتوكلات الـ HTTP

تحتاج إلى رفع ملفات القالب في استضافة ابحث عن استضافة مجانية أو ادخل https://000webhost.com ستحتاج للتسجيل ثم قم برفع قالبك على الإستضافة

السلام عليكم أخي @Hosain Shawer هذه التقنية تسمى تقنية Ajax وهي عبارة عن إستخدام متكامل لخصائص لغتين من اللغات المستخدمة في تطوير المواقع ، الجافا سكربت و الـ XML . ببساطة تتيح AJAX عملية إرسال البيانات للسيرفر و إستقبالها منه دون أن يكون هناك إعادة تحميل للصفحة. للمزيد من المعلومات : https://www.w3schools.com/js/js_ajax_intro.asp