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