عبدالباسط ابراهيم

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

أما بالنسبة للمعرفة باللغة الإنجليزية بالطبع لا تحتاج أن تكون اللغة لديك متقنة لأن الشرح باللغة العربية ومفهوم ولكن ربما تحتاج لتعلم اللغة وليس التعمق فيها  مستقبلاً للتعمق في البرمجة 

بالطبع ذلك قرار صحيح حيث تعتبر ال functional component أفضل من ال class component والإختلاف ببساطة بينهم هو أن في  functional component تقوم بإستخدام دوال جاهزة مثل useState بدلاً من الخواص كما في ال  class component ولذلك فائدة في سهولة الإستخدام والقدرة الكبيرة للتطوير نظراً لتنظيم الكود ويمكنك أيضاً بناء custom hooks 

أما بالنسبة لما يجب عليك التركيز عليه هو طريقة استخدام ال   functional component عموماً وأيضاً يجب التركيز على ال hooks وأشهرها ال useState و ال useEffect 

هذه الخدمة jsonplaceholder تدعم ال get, post, delete, put  ولكن لا تقوم بحفظها على السيرفر أي أنه يمكنك عمل POST وسينتج لك response يحتوي على البينات التي قمت بإضافتها ولكن إذا قمت بعدها بعمل get لن تظهر لك هذه البيانات لأنها لا تحفظ على السيرفر ويمكنك التأكد من ذلك في الموقع الخاص بال api من هنا

المشكلة كما شرح المدرب محمد أنه تم وضع ال header وال method بداخل كائن آخر وهذا غير صحيح وبدلاً من إزالة هذا الكائن يمكن حل هذه  المشكلة باستخدام ال spread operator وهو (...) وهو يقوم بنشر محتويات الكائن كالتالي

fetch(api.posts.link, ...obj) // spread operator  تم إستخدام ال 
  .then((response) => response.json())
  .then((responseData) => {
  console.log(responseData);
}).done();

بتاريخ 31 دقائق مضت قال salahkr:

انا الآن في مرحلة التدريب تقريبا تعديت مرحلة الاساسيات  ولكن مازلت اعمل على المشاريع التدريبة التي توفرها دورة تطوير واجهات المستخدم اي اني اكتب نفس الكود المستخدم في شرح الدروس هذه ما اقصده بنقل الكود 

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

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

تختلف قاعدة البيانات من firebase عن ال mysql تماماً حيث تعتبر ال firebase database من النوع ال non relational database(sql) وال mysql تعتبر من ال (nosql)relational database و لا توجد ما يسمى بالعلاقات في ال firebase (ليس تماماً) كما في ال mysql ولذلك يكون هناك بعض السهولة في التعامل مع هذا النوع من قواعد البيانات

ومن مميزات ال nosql القدرة العالية على التوسع والقابلية للزيادة بدون تكلفة عالية ويمكنك المقارنة بين ال relational database و ال  non relational database لمعرفة المزيد 

أما بالنسبة للوصول للبيانات فبدلاً من العلاقات في ال relational database يتم وضع جميع البيانات المطلوبة فيما يسمى collection فمثلاً يوجد مستخدم و منتج و طلب يتم الوصول للبيانات كالتالي يتم وضع أغلب المعلومات عن المستخدم والمنتج في الطلب وبذلك لن تحتاج للعلاقات 

ولكن لكل نوع عيوب ومميزات ويمكنك إختيار النوع الذي يخدم أهدافك

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

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

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

• الوقت المخصص كل يوم للتعلم
• الخبرة البرمجية لديك فهل لديك خبرة في البرمجة وهل لديك خبرة عن ال backend عموماً
• مدى إستيعابك للشرح فتختلف لعدة عوامل أيضاً

ولكن سأعطيك فترة تقريبية ربما تزيد أو تنقص وسأفترض أن ليس لديك أي خبرة برمجية بإستثناء المتطلبات لهذه الدورة وأيضاً التعلم يومياً ل 3 ساعات تقريباً يمكنك إنهاء هذه الدورة فيما لا يقل عن الشهر (وربما تزيد أو تنقص)  وذلك للخروج بأكثر إستفادة من الدورة لذلك الخلاصة هي أنك لا تشغل بالك بهذا السؤال أبداً واعمل على الخروج بأكثر قدر من الإستفادة  

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

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

الأساسيات: HTML ،CSS ،JavaScript

• HTML هي لغة الترميز المستخدمة لوصف المحتوى على صفحة الويب وكيفية هيكلته — فكر في العناوين والنقاط واالروابط.
• CSS هو الكود الذي يمثل كيفية تصميم محتويات صفحة الويب وتوضيحها. من خلال تغيير كود CSS لصفحة الويب، يمكنك التحكم في الخطوط المستخدمة وتغيير الألوان والصور ووضع محتوى الصفحة لتحقيق أقصى تأثير.
•  JavaScript – لغة برمجة تستخدم للتحكم ديناميكياً في المحتوى على صفحة الويب. يتيح لك JavaScript جعل المواقع تفاعلية – يتم تشغيل جميع تطبيقات الويب والخرائط التفاعلية وصور التمرير والفيديو الديناميكياً بواسطة JavaScript.

هذه الأساسيات يمكنك من خلال بناء أي واجهة مستخدم ولكن لتسريع وجعل العمل أكثر إنتاجية تحتاج لتعلم بعض المكتبات والأدوات المختلفة مثل bootstrap و jquery و webpack وما إلى ذلك

بتاريخ 38 دقائق مضت قال سالي احمد:

شكرا لو نفترض ان المستخدم دخل حروف مكررة كيف يمكن ازالتها من الليست نفسها

يمكنكي استخدام ال set أو ال dict.fromkeys كما في هذه الإجابة 

هناك عدة طرق ولكن أشهر هذه الطرق التالي

• استخدام set حيث سيتم إنشاء set وأثناء إنشاء ال set يتم مسح العناصر المكررة كالتالي

  mylist = ["a", "b", "a", "c", "c"]
  mylist = list( set(mylist) )

   

• أو استخدام ال dict.fromkeys وهذه الطريقة تقوم بإنشاء directory وأثناء إنشائه يتم مسح العناصر المكررة تلقائياً كالتالي

  mylist = ["a", "b", "a", "c", "c"]
  mylist = list( dict.fromkeys(mylist) )

   

الفرق أن الطريقة الأولى لا تحافظ على ترتيب العناصر ولكن الطريقة الثانية تحافظ علي الترتيب

من الطبيعي أن تتأخر أول المشاريع لك ولكن هناك بعض النصائح التي تجعل عملية الحصول على المشاريع سهلة نوعاً ما ستجدها في الإجابات على هذا السؤال

لا تيأس ولا تتوقف عن التقدم للعمل ولكن قبل التقدم للعمل فكر كيف تقنع العميل للعمل معك وتعتبر هذه المهارة لا تقل أهمية عن المهارة التي تعمل بها وبالتوفيق لك  

يمكنك عمل ذلك عن طريق خطوتين كالتالي

• يمكنك أخذ قيمة من المستخدم حفظ هذه القيمة في متغير وذلك عن طريق الدالة ()input 

  string = input()

   

• توليد list من القيمة التي قام المستخدم بإدخالها  عن طريق الدالة ()list

  theList = list(string)

   

لا وجود لخاصية style لل button في ال react native ولكن هناك طريقة أخرى تمكنك من إضافة التنسيق لعنصر ال button وهي عن طريق ال touchableOpacity أو ال touchableHighlight كالتالي

<TouchableOpacity 
style={{
       backgroundColor: '#AEF',
       color: '#000',
       borderRadius: 6
      }}>
         <Button title="Log In" onPress={() => authenticate({ username, password})}/>

</TouchableOpacity> 

يعتمد إختيار إسلوب بناء الموقع على المميزات أو شكل الموقع الذي تحتاجه فبمجرد معرفة الخصائص والمميزات لكل إسلوب سواء ال multi page app (الطريقة التقليدية) أو ال single page app (العمل ب react) ستعرف الإسلوب المناسب لك وذلك في حالة أن لك حرية الإختيار اما في حالة كان العميل يريدك العمل بإسلوب معين ستحتاج للعمل بما يختاره لك وسأقوم بوضع بعض المميزات لل single page 

مميزات ال single page app

• سرعة وتجاوب الموقع تكون عالية
• فصل ال backend عن ال frontend مما يتيح لك فرصة ربط ال backendبأي تطبيق آخر
• تجربة مستخدم أفضل حيث يتم تحديث البيانات بدون إعادة تحميل الموقع ويعمل على الهاتف بشكل أفضل

عيوب ال single page app

• ليس الأفضل لل seo لذك إذا كنت تهتم بال seo فالإختيار الأفضل هو MPA مع أنه يمكنك تحسين ال seo لل SPA

لذلك يعتمد على الأهداف من المشروع والإتفاق مع ال backend developer أيضاً

يمكنك تخطي هذه التقنية فهي فلا ترتبط بال frontend حيث تعتبر هذه التقنية أداة لبناء تطبيقات الهاتف لمختلف المنصات وتعتبر ليست بالصعبة فهي تعتمد على ال react وستضيف إليك الكثير وزيادة فرص العمل لك وبالمناسبة تطبيق ال facebook على الهاتف تم بنائه باستخدام هذه التقنية لذلك أنا أرى أنها فرصة جيدة لك لتعلمها وإن كنت لا تريد تعلمها الأن قم بتخطيها ثم الرجوع إليها لاحقاً ولكن لا تضيع فرصة تعلمها

يمكنك الإطلاع على الإجابات في هذا السؤال حيث تم الإجابة على سؤالك

سأحاول شرح هذه المصطلحات بإختصار لتبسيط المصطلح 

1. props وتعني ال خصائص وتقوم بتمرير البيانات من المكون الأب إلى المكون الأبن كالتالي

   class ParentComponent extends Component {    
       render() {    
           return (        
               <ChildComponent name="First Child" />//prop هنا هي  name  ال
           );  
       }
   }
   
   const ChildComponent = (props) => {    
       return <p>{props.name}</p>; //يتم استخدامها بهذا الشكل
   };
   //الناتج سيكون كالتالي
   <p>First Child</p>

    

2. state و useState نقوم بوضع البيانات الخاصة بالمكون بها ويقوم react بتتبع القيمة في حالة تغيرها الفرق بينهما أن لكل منهما طريقة استخدام مختلفة  و state تستخدم في ال class-based أما ال useState تستخدم في ال functional

3. useEffect تستخدم لتنفيذ مهمة معينة عن حدوث تغيير في قيمة متغير معين 
4. fetch هي الوسيلة الحديثة لعمل http request مشابه لل ()jQuery.ajax وهي خاصة بال javascript

هذا تبسيط للمصطلحات يمكنك الأن التعمق في هذه المصطلحات حيث بها الكثير من التفاصيل

بالإضافة للطريقة بالأعلى حيث تم استخدام ال javascript يمكنك عمل ذلك باستخدامcss فقط من خلال ال input:focus كالتالي

<style>
  #id2{
  	display: none;// مخفي input  هذا ال
  }
  #id1:focus #id2{
  	display: block; //id2 سيظهر ال  input عند الضغط على هذا ال
  }
</style>


<body>
<input id="id1"/>
<input id="id2"/>
</body>

يمكنك عمل ما تريد بال css  فقط بدون التدخل من الجافاسكربت

هل لون العنصر two يبدو باللون الأبيض ؟

إذا كان كذلك تحتاج لوضع تنسيق العنصر two كالتالي

.flex .two{

}

لأن في التنسيق الأول تم إستخدام .flex و  div (تم إستخدام class و عنصر ) بينما في التنسيق الثاني تم إستخدام .two  فقط (تم إستخدام class فقط ) إذاً التنسيق الأول له الأولوية وبالتالي سيتم تنفيذ التنسيق الأول أما إذا كان للتنسيقات نفس الأولوية سيتم تنفيذ التنسيق الأخير  

بتاريخ 2 ساعات قال ملك..:

لم يضبط معي لايختار لي الDesimal اضغغط ولا يتم الاختيار

ما الحل؟!

أرى أنك لم تفتح مجلد currentVersion

قم بفتح المجلد currentVersion عن طريق الضغط على السهم بجوار المجلد ثم إفتح المجلد الذ بإسم رقم إصدار البرنامج لديك ثم متابعة الخطوات من الخطوة إفتح مجلد common

وإن لم تستطع تنقيذ المطلوب قم بالبحث في ال youtube عن  Turn off Hyperlink Warning for office حتى ترى الشرح أمامك 

بتاريخ 11 دقائق مضت قال ملك..:

هذا م ظهر لي ماذا افعل؟

قم بفتح المجلد currentVersion ثم متابعة الخطوات السابقة 

ربما لم تكملي التسجيل في  github أو أي مشكلة خاصة بالتسجيل في الموقع لذلك

• قومي بتسجيل الدخول إلى الموقع 
• وإن لم يعمل قومي بإكمال أي خطوات ناقصة في الحساب الخاص بك 

ثم قومي بالمحاولة مرة أخرى لكن بعد إغلاق ال vs code  ثم إعادة فتحه

بتاريخ 17 ساعات قال ملك..:

اريدها ان لا تظهر لي لان ذلك يعيق ترتيبها ويضيع الوقت

كيف اقوم ب الغاء ظهور هذه النافذه؟

قم بالتالي

• الضغط على window + R معاً من ال keyboard
• ستظهر لك نافذة قم بكتابة التالي regedit ثم إضغط enter
• ستظهر لك هذه النافذة ستفتح كل مجلد كما في الصورة
• في مجلد window ستجد مجلد يسمى برقم اصدار البرنامج قم بفتحه
• إفتح مجلد common

• ثم قم بإنشاء مجلد من خلال edit (من أعلى يسار النافذة) ثم new ثم key ثم قم بتسمية المجلد Security

• ثم قم بإنشاء ملف من خلال edit (من أعلى يسار النافذة) ثم new ثم DWORD Value ثم قم بتسمية الملف DisableHyperlinkWarning ثم إضغط enter

• سيظهر الملف على يمين النافذة إضغط عليه بالزر الأيمن لل mouse ثم اختر modify

• ثم في خانة ال value name اختر ال Decimal و في خانة ال value data اكتب رقم 1  كما في الصورة

ثم قم بإغلاق النافذة والجهاز وسوف تختفي هذه الرسالة 

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