Kais Hasan

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

أول مشروع أي شخص يقوم به بعد تعلم ال html, css هو القيام ببناء موقع شخصي، يحوي على معلوماتك و خبراتك، أي شيء يشبه ال cv و لكن بشكل أكثر تفاعلي، يمكنك القيام بذلك و حتى نشر الموقع باستعمال ما يوفره github لذلك. يمكنك محاولة تصميم قوالب خاصة بالايميلات، حيث أنه في حال كنت تستعمل الايميل لا بد و أنه جاءك الكثير من الايميلات الترويجية و التي يكون لها عادة شكل جميل و منسق، و هنا يمكنك استعمال ال html, css لذلك، فيمكنك محاولة القيام بذلك، و هناك أحياناً الكثير ممن يطلبون مصمم ايميلات، فهذا يعطيك المهارة اللازمة للعمل في ذلك. في حال لم يكن لديك خبرة في ال animation يمكنك تعلم ذلك و صنع موقع بسيط يحوي على هكذا أمور، أو حتى إضافة هكذا أمور إلى موقعك الشخصي.

عليك تنزيل الكومبايلر في البداية، هل قمت بتنزيله؟ لقد أرفقت رابط لذلك. هنالك طريقة أسهل وجدتها منذ قليل، يمكنك استعمال موقع يدعى godbolt للتحويل، استعماله سهل جداً يمكنك تجربته.

نعم، يمكنك استعمال الكومبايلر gcc للقيام بذلك. يمكنك تنزيل هذا الكومبايلر باتباع الخطوات من هنا. بعد ذلك يمكنك الذهاب إلى سطر الأوامر و كتابة ما يلي: gcc -S filename.cpp و سيتم بناء ملف يحوي على كود الاسيمبلي الموافق لكود ال c++.

جربي طباعة هذه القيم قبل var map= new google.maps.Map(document.getElementById('map'),mylocation); يفترض أن يظهر قيمة هنا. و كما ذكرتي فإنه يأخذ وقت طويل، لكن بما أن هناك timeout فيفترض أن الوقت الطويل لجلب البيانات، ربما البيانات كبيرة جداً أو أن اتصال الانترنت لديك بطيء فيجب علينا معرفة هل يتم تحميل بيانات خلال عملية الانتظار أم لا، تحققي من استهلاك الانترنت عند الانتظار.

حسب ما ذكرتي في تعليق ضمن الكود بأن قيم ال latitude , longitude تظهر بشكل صحيح عند طباعتها ضمن التابع sucsess، و قمتي بتعريف هذه المتحولات على أنها global بالتالي يمكن الوصول إليها مباشرة من تابع آخر. أي يفترض في حال كان ما سبق صحيحاً، أنه يمكنك كتابة ما يلي: center:{lat:latitude,lng:longitude} يفترض أن ذلك سيعطي القيم الصحيحة، في حال لم يعطي جربي طباعة قيم latitude,longitude داخل التابع initMap، و إخباري بالنتيجة.

في السطر التالي: center:{lat:success,lng:longitude} لماذا تقومين بتمرير sucess، ألا يجب تمرير latitude ؟

نعم.

تماماً، لكن أولاً يجب عليك أن تبقي على الأقواس {} عندما تقوم بالإسناد، أي يجب أن تكتب id = {plant.id} و هكذا من أجل بقية المتحولات. ثانياً كما ذكر المدرب علي، هناك بعض التفاصيل التي يجب عليك مراعاتها مثل ال key و أن تضع هذه العناصر ضمن block معين، أي مثلاً مكون div أو Fragment.

إن map هي تابع في javascript يقوم بأخذ كل عنصر من حاوية ما (مثلا list) و تطبيق تابع معين عليها، لصنع حاوية أخرى من نتيجة تطبيق التابع على كل عنصر من الحاوية الأولى. في مثالك هذا لديك list من الأغراض، و حسب ما يبدو لي فإن كل غرض يمثل نوع معين من الأزهار مع معلومات عنه. عندما قمت بتطبيق map على هذه ال list فإنك ستقوم بتحويل كل عنصر في ال list عن طريق تابع ستمرره لل map، التابع الذي قمت باستعماله سيأخذ غرض (حيث أن كل عنصر في المصفوفة هي غرض) و في ال javascript يمكننا أخذ خصائص معينة من الغرض باستعمال قوسين {} بالإضافة إلى الخصائص التي نريدها، بالتالي هنا نأخذ الخصائص id,cover,name,water,light، و نقوم ببناء مكون باستعمال قيم هذه الخصائص، أي سيتم إنشاء list جديدة تحوي على نتيجة تطبيق التابع الذي كتبته على كل غرض في ال list الأصلية التي لديك.

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

نعم، في الموقع نفسه هناك قسم اسمه documentation يحوي على الكثير من المقالات التعليمية عن الموقع، يمكنك الوصول إليه من هنا.

نعم يمكنك القيام بذلك، هناك بعض الميزات التي قد لا تجدها إلا باستعمال الحاسوب و لكن لا ضرر من المحاولة بالإمكانيات المتاحة. إن موقع CodeSandbox.io يوفر لك إمكانية بناء التطبيقات من المتصفح الخاص بك، حيث أنه يحوي على ide متطور كما يسمح باستعمال مدراء الحزم مثل ال npm. قد تجد مواقع أخرى و لكن هذا الموقع يعتبر من أفضل المواقع لذلك.

بشكل عام يمكنك البدء بشكل بسيط بدون معرفة جيدة بال oop. و لكن بشكل عام أي شيء يعتمد على ال class سيعتمد في النهاية على مفاهيم ال oop، قد لا تحتاج ذلك في تطبيقات بسيطة و لكن في تطبيقات أكثر تعقيداً ستحتاج لعمليات وراثة أو غيرها من مفاهيم ال oop كالتجميع. أنصحك بتعلم القليل من ال oop و لكن في نفس الوقت الذي تتعلم فيه ال react، حيث أنك لست بحاجة مفاهيم معقدة في ال oop لفهم ال react و لكنك ستحتاجها لتصميم التطبيقات.

إن ال QR هو ترميز لشيء ما لا أكثر كما تم الحديث في التعليق السابق، في حال كنت تريد للمستخدم عندما يقوم بقراءة ال QR أن يذهب إلى موقع ما فيمكنك ترميز ال url الخاص بذاك الموقع. و لكن الأمر لا يتوقف على ذلك، حيث أنه يمكنك استعمال ال QR بطرق إضافية ضمن موقعك، مثلاً في حال كان لديك ملف pdf تريد عرضه عندما يقوم المستخدم بمسح ال QR فيمكنك القيام بذلك، في حال كنت تريد إرسال ايميل عندما يتم مسح ال QR فيمكنك القيام بذلك. هناك الكثير من المواقع التي تساعدك في هذه العملية، من هذه المواقع: QR Code Generator و هو يسمح لك بتوليد QR لترميز الكثير من الأمور منها ما قمت بالتحدث عنه سابقاً، بالإضافة إلى أكثر من ذلك بكثير أيضاً. qr-code-monkey يسمح لك هذا الموقع بتوليد QR لترميز رابط، و لكنه يعطيك خيارات إضافية على تصميم هذا ال QR، مثل أن تضع لوغو ( الكثير من التطبيقات المشهورة تقوم بذلك) أو أن تغير الألوان الخاصة بال QR أو حتى أن تقوم بإضافة لمساتك الخاصة على تصميم ال QR.

إن الخطأ يخبرك أنه هناك متحول ما لا تعطيه قيمة من أجل عبارة ال sql التي تريد تنفيذها. إن عبارة ال sql الخاصة بك هي كما يلي: $addUser = $database->prepare("INSERT INTO suppervisor(name,dept_name,scie_degree,email,password,date) VALUES(:name,:dept_name,:scie_degree,:email,:password,:date)"); إن كافة عمليات الربط التي تقوم بها للمتحولات صحيحة ما عدا واحدة منها و هي: $addUser->bindParam("Password",$Password); حيث أن الاسم الذي تتوقعه تعليمة ال sql هو password و ليس Password.

سأشرح لك الآلية العامة و عليك كتابة الكود، حيث أنك لن تستفيد في حال ذكرت لك الحل بشكل مباشر. سأفترض أنك تريد التحقق من جواب المستخدم أيضاً، أي فيما إذا كان العدد أولي أم لا فعلاً. في البداية توليد الأعداد العشوائية يمكننا القيام به باستعمال Random ضمن المكتبة java.util، حيث أنه يمكن إنشاء غرض منه و القيام بتوليد عدد صحيح عشوائي بين الصفر و الرقم الذي تريده باستعمال الطريقة nextInt التابعة لهذا الغرض. عملية طباعة الرقم و سؤال المستخدم هي عملية بسيطة لا شيء لنشرحه عنها. الآن لنتحقق فيما إذا كان المستخدم قد أجاب بشكل صحيح علينا معرفة فيما إذا كان العدد أولي أم لا. سأفترض العدد الذي تم توليده هو x. الطريقة المباشرة هي القيام بالمرور على كافة الأعداد من 2 إلى x-1 و في حال كان باقي قسمة x على أي من هذه الأعداد يساوي الصفر فإنه ليس أولي، و إلا يكون أولي. الطريقة الأسرع (لن تلاحظ السرعة من أجل مجال صغير كهذا و لكن من الجيد معرفتها في حال أردت التطبيق على أعداد أكبر) هي أن نقوم بالمرور على الأعداد من ال 2 إلى الجذر التربيعي ل x فقط، و ذلك ﻷنه في حال كان هناك قاسم ل x فحتماً هناك قاسم أصغر من الجذر.

قد يكون هذا هو الخيار الافتراضي و ذلك لتسهيل الأمور بالنسبة للمستخدمين، لقد قمت بالبحث قليلاً و وجدت أنه يمكنك تخزين الصور من summernote في وحدات التخزين على السحاب، مثل AWS. أي أنه من الأسهل تجربة المكتبة بالتخزين في قاعدة البيانات و لكن تركوا الخيار لك في حال حدث بطئ يمكنك التحويل إلى التخزين السحابي.

إن الطريقة المنصوح بها هي عدم حفظ الصور بشكل مباشر في قاعدة البيانات، بدلاً عن ذلك يتم حفظ الصور في وسائط تخزين على السحاب و تخزين معرف الصورة فقط في قاعدة البيانات، معرف الصور غالباً يكون إما رابط للصورة أو uuid ، يمكن أن يأخذ أشكال أخرى و لكن بشكل عام يكون صغير الحجم. يمكن التخزين على السحاب باستعمال عدة خدمات تقدمها شركات كبيرة، أشهرها AWS حيث تحتوي على وسائط تخزين تأتي بخيارات عديدة يمكنك الاختيار بينها حسب حجم البيانات و سرعة الوصول التي تريدها، شخصياً لقد قمت بتجريب هذه الخدمة، و كان جلب الصور سريع جداً، بالطبع يفضل وجود CDN لتسريع العملية و لكن لم ألاحظ أي بطئ. إن كافة الشركات التي تقدم خدمات سحابية تقدم خدمات تخزين. في حال كنت لا تملك ميزانية، هناك خدمات مجانية، مثلاً cloudinary ، هذه الخدمة جيدة جداً، و قد تعاملت معها قبل تحويل الصور إلى AWS و أيضاً لم ألاحظ بطء. و لكن في حال كانت الصور التي تخزنها ليست بأبعاد كبيرة، كما أنه لا يوجد الكثير من الصور التي تريد سحبها، فلا أعتقد أنك ستلاحظ الفرق الكبير بين الطريقتين، و لكن من الجيد تعلم الطريقة المثلى، فهي تعطيك خبرة أكثر كما أنها تشكل إضافة مميزة إلى أعمالك.

بشكل عام لست مضطرا للتعامل معها، حيث أن جميع لغات البرمجة قد وفرت آلية غير مباشرة للتعامل معها. في حال كنت تتعامل مع تطوير صفحات الويب التي لا تحتوي على بيانات كبيرة أو لا تحتاج إلى التعامل مع تحليل بيانات كبيرة (كتطبيقات الويب الخاصة بالأمور المالية) فلن تحتاج إلى ذلك. و لكن عند التعامل مع بيانات كثيرة قد تضطر أحياناً إلى تحسين الأداء عن طريق استعمال أحد التقنيات الموجودة في ال data structures أو يمكن أن تستعملها بشكل جزئي. إذا كنت مطور frontend فحتماً لن تحتاجها، و لكن إذا كنت backend و لديك طموح للعمل في شركات كبرى فيجب عليك تعلمها، حتى أنه يمكنك أن تذهب و ترى بعض الأسئلة التي تسأل في مقابلات هذه الشركات و سترى أنه دائماً يوجد أسئلة تتعلق بال data strucures.

سأعطيك مثال على دخل نصي، سأرفق الأكواد المهمة لتوضيح الفكرة فقط حتى لا يختلط الأمر. let text = ''; const [value, onChangeText] = React.useState('enter some text') function textChangeHandler(event){ onChangeText(event.target.value); text = event.target.value; } يمكنك ملاحظة أننا هنا قمنا بتعريف متحول global في البداية، ثم قمنا بكتابة الحالات التي نريدها باستعمال الخطافات طبعاً. و في النهاية قمنا بتعريف تابع نستعمله عند حدوث event، هذا التابع يقوم بتغيير الحالة بالإضافة إلى أنه يقوم بتغيير قيمة المتحول ال global. الآن يمكنك استعمال هذا التابع في أي مكون بوضعه قيمة ل onChange .

يمكنك القيام بذلك عن طريق تعريف متحول global و القيام بإسناد القيمة له عند الضغط على الزر، أي يمكن استعمال onClick و الوصول إلى القيمة المراد حفظها و وضعها في المتحول ال global الذي قمنا بتعريفه، و بعدها يمكنك استعمالها كما تشاء.

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

إن هذا ليس خطأ و إنما مجرد تحذير، حيث يجب على التطبيق أن يعمل بالرغم من وجوده. يقول لك هذا التحذير بأنك تستعمل ReactDOM.render لعرض المكونات و هذه الطريقة قد تم التخلي عنها في النسخة الجديدة من react، أي يبدو أنك تتبع كورس يعتمد على النسخة الأقدم و هي react 17، لا مشكلة فهنا سيقوم التطبيق تلقائياً بالتصرف و كأنه مبني بال react 17 . يمكنك استعمال createRoot بدلاً من ذلك كي يصبح الكود متوافقاً مع react 18. قبل كنا نكتب مثلاً: import { render } from 'react-dom'; const container = document.getElementById('app'); render(<App tab="home" />, container); الآن ليصبح الكود متوافقاً مع react 18 نكتب ما يلي: import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); root.render(<App tab="home" />); لاحظ أننا نجلب ال container ثم نضعها على أنها root ثم نقوم بعمل render. يمكنك الاطلاع على الاختلافات بشكل كامل و كيفية الانتقال إلى النسخة react 18 من هنا.

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