لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 04/22/23 في كل الموقع
-
السلام عليكم و عيد مبارك. أريد القيام بanimation عند الscroll في صفحة الويب كما يلي: المشكل الحاصل هو في القيمة percentage لكل عنصر حيث تمت إعادة نفس القيمة لكل العناصر (35%). الكود الذي قمت به: function App() { const skills = [ { id: 1, language: 'html', progress: 70, }, { id: 2, language: 'css', progress: 65, }, { id: 3, language: 'javascript', progress: 50, }, { id: 4, language: 'github', progress: 40, }, { id: 5, language: 'jest', progress: 35, }, ] const progressAnim = useRef() const [percentage, setPercentage] = useState(1) window.onscroll = function () { if (window.scrollY >= progressAnim.current.offsetTop - 300) { skills.map(skill => setPercentage(skill.progress)) } } return ( <div className="App"> <Section src = {img_1}/> <Section src = {img_2}/> <div className="skills" ref={progressAnim}> { skills.map(skill => ( <Progress key = {skill.id} percentage = {percentage} circleWidth = "200" name = {skill.language} /> )) } </div> </div> ); }
2 نقاط -
سنتعلّم مبادئ HTML و CSS لإنشاء مشاريع ويب خاصة بنا. سيتميّز هذا الدرس بتركيزه على الجانب العملي بشكل كبير، حيث سنبدأ فورًا بإنشاء مشروع خاص بنا. أمّا بالنسبة للنواحي النظرية فسنشرحها عند الحاجة أثناء تقدّمنا ببناء المشروع. بهذه الطريقة سنكتسب أساسًا متينًا وسريعًا في مجال تطوير الويب. سأوجّهك خلال هذا المشروع إلى روابط خارجية تُشير إلى مصادر أخرى للتوسُّع في نقاط معيّنة إن أحببت ذلك. المشروع سيكون المشروع عبارة عن بناء ملف شخصي portfolio على الويب. سيضم صفحة بداية Home ومدوّنة Blog وصفحة تُظهر مشاريع ويب المستقبلية التي تنوي إنشائها Projects، بالإضافة إلى صفحة للتواصل Contact. الهدف من المشروع الهدف منه هو جعلك تدخل عالم برمجة الويب ومساعدتك كي تتعلّم كيفية إيجاد المزيد من المعلومات حول أي موضوع لوحدك. ستصبح قادرًا بعد ذلك على معالجة مشاريع ويب أكثر تعقيدًا. ما هو HTML و CSS؟ لغة الرُماز المعلَّم Hypertext Markup Language والتي ندعوها اختصاراً HTML هي لغة مسؤولة عن بُنية structure صفحة الويب. فمثلًا يمكنك تعريف عناوين headings وفقرات paragraphs ونصوص texts وصور images في HTML. أمّا بالنسبة لأوراق الأنماط المتتالية Cascading Style Sheet وندعوها اختصاراً CSS فهي مسؤولة عن تنسيق (تنميط) style وتخطيط layout صفحة الويب. يمكنك تعريف تنسيقات جديدة خاصة بالألوان والخطوط وطرق المحاذاة وحتى يمكنك إنشاء بعض التحريكات animations البسيطة في CSS. تذكّر: تزوّدنا HTML بالمحتوى في حين تُنسّق CSS هذا المحتوى. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن موقع ويب أم تطبيق ويب يمكننا بناء مواقع ويب websites معقّدة جدًّا باستخدام HTML و CSS فحسب. لكن ستكون مواقع الويب هذه ساكنة static، ويعني ذلك أنّ زوّار الموقع يمكنهم استعراض الصفحات لكنّهم لا يمكنهم التفاعل مع هذه الصفحات (باستثناء النقر على الروابط الموجودة في الصفحات). لبرمجة مواقع ويب ديناميكية dynamic تكون تفاعلية مع المستخدم، سنحتاج إلى لغة برمجة إضافية مثل JavaScript أو Dart. ويمكننا باستخدامهما تطوير (هو مفهوم أوسع من البرمجة) تطبيقات ويب Web Applications كاملة مثل التطبيقات التي تهتم بإجراء الحسابات المختلفة أو تطبيقات الألعاب أو تطبيقات المحادثة وغيرها الكثير. تعمل هذه التطبيقات في الواقع ضمن متصفّح الويب. كما توجد لغات برمجة وتقنيات أخرى مثل PHP وRuby وASP.NET تسمح ببناء تطبيقات ويب ديناميكية أيضًا ولكن تعمل هذه التطبيقات ضمن مزوّد خدمة الاستضافة (على المخدّم). كما يمكن المزج بين هذين الأسلوبين لإنشاء مواقع ويب فعّالة للغاية. يمكنك بعد الانتهاء من هذه الدروس، البدء بتعلّم مثل هذه اللغات والتقنيات وإنشاء تطبيقات ويب ديناميكية. أنشئ موقع احترافي لأعمالك وعزّز حضورك الرقمي صمم موقع إلكتروني فريد وجذاب لعملائك في دقائق دون خبرة برمجية باستخدام سنديان منشئ المواقع العربي أطلق موقعك الآن الأجهزة المحمولة يُشكّل الوصول إلى مواقع الويب عن طريق الأجهزة المحمولة كالهواتف الذكيّة أو الأجهزة اللوحية نسبة كبيرة من عمليات الوصول العامة. وهكذا فإنّه من الضروري أن يظهر موقعنا بشكل جيّد على الشاشات الصغيرة. على العموم سنولي هذا الأمر اهتمامًا خلال هذه السلسلة التعليمية. الأدوات المستخدمة نحتاج إلى تطبيقين للدخول في عالم تطوير وبرمجة الويب، محرّر نصوص لإنشاء الملفات الخاصة بموقع الويب، ومتصفّح ويب لعرض وتجربة الموقع. 1- المحرر Editor سيكون كافيًا استخدام محرّر نصوص عادي (كبرنامج المفكرة Notepad في ويندوز مثلًا). ولكن من الأفضل استخدام محرّر نصوص يسهّل عملنا إلى حدٍّ كبير. لهذا الغرض أنصح باستخدام محرّر نصوص عصري ومخصّص لتحرير HTML. محرّر النصوص الذي أنصح به حاليًا هو Brackets (مجّاني من شركة أدوبي Adobe). يمكنك أن تستخدم أي محرّر تريده، ولكنّني في هذه السلسلة سأُشير أحيانًا إلى بعض وظائف تطبيق Brackets. يوجد محرّر نصوص جيّد أيضاً ويمكنك استخدامه وهو Atom، ويوجد محرّر نصوص آخر أيضًا، قديم قليلًا لكنّه جيّد وهو ++Notepad. حمّل ونصّب المحرّر Brackets إذا أردت ذلك. 2- المتصفح Browser يتوجّب على موقعنا أن يعمل على جميع المتصفحات الرئيسية بالطبع (Internet Explorer و Firefox و Chrome و Safari). على أية حال، أنصح باستخدام المتصفح Chrome لأغراض التطوير والبرمجة. يضم Chrome أدوات مفيدة للغاية لمطوّر الويب والتي سيستخدمها على نحو متكرّر. بالإضافة إلى ذلك، يدعم المحرّر Brackets المتصفّح Chrome بشكل جيّد، بحيث أنّ التغييرات التي تحدث في النص ستظهر مباشرةً ضمن Chrome (عن طريق ميزة اسمها Live Reload). حمّل ونصّب المتصفح Chrome الآن من هنا. إنشاء مستند HTML لنبدأ الآن بإنشاء مستند HTML الأوّل لنا من أجل موقع الويب: أنشئ مجلّدًا من أجل المشروع. سمّ المجلّد بالاسم Portfolio (أو أي اسم آخر ترغبه). افتح برنامج Brackets. من القائمة File اختر الأمر …Open Folder لتحديد وفتح المجلّد الذي أنشأناه قبل قليل. انقر بزر الفأرة الأيمن أسفل اسم المجلّد واختر New File لإنشاء ملف جديد، سمّه index.html. لديك الآن ملف نصّي فارغ اسمه index.html لماذا الملف index.html؟ في الواقع للملف index.html معنى خاص، فعندما نطلب من المتصفّح عنوان موقع ويب ما، وليكن مثلًا http://code.makery.ch، فعند ذلك سيُعرَض الملف index.html أولاً بشكل تلقائي، أي كأنّنا طلبنا العنوان http://code.makery.ch/index.html. بالنسبة إلينا، سيمثّل الملف index.html الصفحة الرئيسية. عمليتا العرض والتحديث يمكننا الآن تعبئة مستند HTML (الملف index.html) بالمحتوى. اكتب الأسطر التالية ضمن مستند HTML. لعرض الصفحة ضمن المتصفّح، انقر الأيقونة التي تُشبه البرق في الطرف الأيمن من البرنامج (المعاينة الحية Live Preview). سيُفتَح المتصفّح Chrome وسيُعرض المستند ضمنه، وفي حال أجريت أي تغيير جديد على مستند HTML فسترى نتيجة ذلك على المتصفّح مباشرةً، وهي في الحقيقة ميزة هامة وفعّالة. إذا لم تظهر الصفحة، اذهب إلى المكان الذي يوجد فيه الملف index.html وافتحه مباشرةً باستخدام Chrome أو أي متصفّح آخر. أمّا لم تُحدّث الصفحة تلقائياً، فاحفظ جميع الملفات المفتوحة (سننشئ ملفات أخرى تباعاً) ثم من نافذة المتصفح اضغط F5 على لوحة المفاتيح. تهانينا، لقد أنشأت موقع ويب الأوّل الخاص بك. التحييد Indentation لكي نُبقي الشيفرة نظيفة وواضحة، من المهم أن تعمل على تحييد النص بشكل صحيح باستخدام مفتاح الجدولة Tab من لوحة المفاتيح. يأخذ مفتاح Tab في برنامج Brackets أربعة فراغات بشكل افتراضي. بالنسبة لي أجد ذلك كثيراً بعض الشيء، لذلك أنصح أن تغيّر هذا لتصبح الفراغات spaces التي يأخذها المفتاح Tab تساوي 2، وذلك من أسفل نافذة Brackets. من المهم جدًّا أن ننتبه إلى تحييد الشيفرة من البداية، لكي نكتب شيفرة نظيفة وواضحة من بداية تعلّمنا للبرمجة عموماً. تلميح 1: استخدام Shift+Tab لكي تنقل المحاذاة إلى اليسار بدلاً من اليمين. تلميح 2: يمكنك محاذاة عدة أسطر بنفس الوقت إذا اخترتهم وضغطت Tab أو حتى Shift+Tab. عناصر HTML 1- الوسوم Tags في المثال السابق رأيت رموزًا مكتوبة ضمن رمزي <> تشكل هذه الرموز كلمات نُسميها الوسوم Tags. تتألف عناصر HTML عادةً (ولكن ليس دائماً) من وسمين، وسم للفتح opening tag ووسم للإغلاق closing tag. في مثالنا السابق كان <html> هو وسم للفتح، أمّا <html/> هو وسم للإغلاق حيث نلاحظ وجود محرف slash قبل اسم الوسم. أي نص موجود بين وسمي الفتح والإغلاق يُعتبر محتوى لعنصر HTML هذا. فمثلاً بالنسبة للوسمين <html> و <html/> نُخبر متصفّح الويب عن بداية ونهاية مستند HTML لصفحة الويب الخاصة بنا. أمّا الوسم الثاني الذي صادفناه هو الوسم <body>. يُحدّد هذا الوسم أنّ جميع المحتوى الواقع بين وسم الفتح <body> والإغلاق <body/> سيظهر بشكل مرئي للمستخدم في المنطقة الرئيسية من نافذة المتصفّح. 2- السمات Attributes تُعرّف السمات معلومات إضافية لعنصر HTML. وتقع هذه السمات ضمن وسم الفتح لعنصر HTML، ويكون لها دائماً اسم name وقيمة value. كمثال على السمات، دعنا ننظر إلى عنصر HTML الخاص بالروابط. وهو ربما من أهم العناصر على الإطلاق. يضم عنصر الروابط <a> السمة href (وهي اختصار للكلمتين hypertext reference) التي تحمل القيمة في هذا المثال http://code.makery.ch.ولكن سيعرض المتصفّح هذا الرابط على شكل النص التالي: My Website. البنية الأساسية لصفحة HTML لقد رأينا قبل قليل عنصري HTML وهما <html> و <body>. ولكن بنية صفحة (مستند) HTML تتكوّن عادةً من المزيد من العناصر. استبدل محتويات الملف index.html بالشيفرة التالية، بعد ذلك سنناقش كل عنصر HTML موجود فيها. بنية ملف (مستند) HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <p>Write anything you want to tell the world.</p> </body> </html> الشرح نضع في السطر الأوّل <DOCTYPE html!> دوماً. فهي تخبر المتصفّح عن نوع المستند. يشير الوسم <html> إلى بداية المستند والوسم <html/> إلى نهايته. يحتوي العنصر <head> (بين وسمي الفتح والإغلاق له) على معلومات إضافية حول الصفحة. وبشكل مختلف عن العنصر <body>، لا تظهر هذه المعلومات في نافذة المتصفح الرئيسية. يجب أن تكون هناك إشارة ضمن العنصر <head> حول الترميز character set المستَخدَم في هذا المستند: <"meta charset="utf-8>. إذا لم تحدّد الترميز المستَخدَم فإنّ بعض الرموز قد لا تظهر بصورة صحيحة. ربما قد لاحظت أنّ العنصر <meta> لا يمتلك وسم إغلاق. توجد بعض عناصر HTML التي لا تمتلك أيضًا وسوم إغلاق، ولكنها تعتبر استثناءً. نرى بعد ذلك الوسم <title> الذي يضم عنوان المستند والذي سيظهر على شريط العنوان لنافذة المتصفّح. كل شيء ضمن الوسم <body> سيظهر ضمن نافذة المتصفّح الرئيسية. يُعرّف العنصر <h1> العنوان الرئيسي الذي سيظهر للمستخدم ضمن صفحة الويب. ويمكن إنشاء عناوين فرعية أيضاً باستخدام العناصر <h2> <h3> <h4> <h5> <h6>. النص الموجود بين الوسمين <p> و <p/> يُعتبر فقرة مستقلة، وهذا ما يُعبّر عنه العنصر <p>. بعد كل وسم فتح لعنصر ما، يجب أن نحاذي العنصر التالي (بمفتاح الجدولة Tab) لتحسين عرض الشيفرة. ورغم أنّ ذلك ليس ضرورياً ولا يؤثّر أصلاً في عرض المستند، ولكن تأكّد من امتلاكك لهذه العادة الجيّدة. تلميح 1: يمكنك استخدام بنية HTML السابقة لأي صفحة HTML جديدة. تلميح 2: استخدم الاختصار Ctrl+S من لوحة المفاتيح لحفظ الملف الحالي. تلميح 3: استخدم الاختصار Ctrl+Z من لوحة المفاتيح للتراجع عن العمليات التي أجريتها. نحن مستعدّون الآن وبعناصر HTML البسيطة هذه، أن نرتقي بموقعنا إلى مستوى أعلى. في البداية لنُضِف صورة بحيث تبدو الصفحة الرئيسية لمشروعنا أكثر جمالًا. إدراج صورة لإدراج صورة نستخدم العنصر <img>. المثال التالي سيُدرج صورة موجودة ضمن ملف اسمه marco.jpg: <img src="marco.jpg" alt="Picture of me"> للعنصر <img> وسم فتح فقط ولا يوجد له وسم إغلاق. وهو يحتوي على سمتين src و alt. السمة src تُحدّد عنوان URL الذي يُعبّر عن اسم ملف الصورة ومساره. أمّا السمة alt فتمثّل النص البديل، وهو النص الذي يصف محتويات الصورة. يُستخدم هذا النص من قِبل محرّكات البحث، وفي حال تعذّر عرض الصورة ضمن الصفحة سيُعرض هذا النص بدلاً عنها. 1- عناوين URL النسبية والمطلقة تُستخدم عناوين URL من أجل السمة src الخاصة بعنصر الصورة، وأيضاً من أجل السمة href الخاصة بعنصر الارتباط. يُحدّد عنوان URL عنوان (مسار) ملف، وبصورة عامة العنوان هو مصدر resource قد يكون صورة أو صفحة ويب من موقع آخر. بالاعتماد على موقع الملف نستخدم إمّا العنوان النسبي relative أو العنوان المطلق absolute. فإذا كان الملف موجودًا ضمن نفس موقع الويب، عندها يمكن استخدام عنوان نسبي. فكما رأينا في المثال السابق اسم الملف وحده موجود دون عنوانه الفعلي (المطلق). يكون عنوان URL من النوع النسبي، نسبيًا دومًا إلى صفحة HTML الحالية، فإذا كان الملف المستهدف وصفحة HTML التي ستستخدمه موجودان ضمن نفس المجلّد فعندها يكفي الإشارة إلى اسم الملف فقط، أمّا إذا كانا ضمن مجلّدين مختلفين فعندها يحب أن يؤخذ ذلك بعين الاعتبار. فإذا فرضنا مثلًا أنّ ملف الصورة من المثال السابق موجودة ضمن مجلّد فرعي اسمه images سيكون عنوان URL النسبي لملف الصورة images/marco.jpg. أمّا إذا كان ملف الصورة موجود ضمن المجلّد الأب، فيمكنك عندئذ الوصول إليه باستخدام البادئة ( /.. ) أي سيصبح عنوان الملف في هذه الحالة marco.jpg/.. أمّا إذا كان الملف موجوداً ضمن موقع ويب آخر، فعندها يجب استخدام عنوان URL مطلق. تحتوي عناوين URL المطلقة على الاسم والمسار الكاملين للملف. حقائق عن عناوين URL: عنوان URL الذي يبدأ بـ //:http هو عنوان URL مطلق. عنوان URL بدون //:http هو عنوان URL نسبي بالنسبة إلى صفحة ويب الحالية. تُشير النقطة ( . ) إلى المجلّد الحالي. تُشير النقطتان ( .. ) إلى المجلّد الأب. أمثلة عن عناوين ويب النسبية والمطلقة: <!-- عناوين نسبية --> <a href="image-gallery.html">Image Gallery</a> <a href="blog/first-blog-entry.html">My First Blog Entry</a> <a href="../image-gallery.html">Back to Image Gallery</a> <!-- عناوين مُطلقة --> <a href="http://www.my-colleague.com/blog.html">Blog of a Colleague</a> 2- إضافة صورة إلى موقعنا لندرج صورة ضمن الصفحة، ينبغي نسخ ملف الصورة إلى المجلّد Portfolio. من الممكن أن تستخدم نفس الصورة الموجودة مع هذا الدرس، أو أن تستخدم صورة من عندك، ولكن احرص في جميع الأحوال على أنّك ستُحدّد اسم الملف مع الامتداد بدقّة. يجب أن تحصل على شيفرة شبيهة بما يلي (لاحظ أنّني أضفت عناوين فرعية بالإضافة إلى مزيد النصوص): الملف index.html مع الشيفرة اللازمة: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web Portfolio of Marco</title> </head> <body> <h1>Web Portfolio of Marco</h1> <h2>Welcome!</h2> <p>Thanks for stopping by.</p> <p>Please have a look around. In the blog section I document my experiences in programming. You may also look at my web projects. Have Fun.</p> <img src="marco.jpg" alt="Picture of me"> <p>Marco :-)</p> </body> </html> والصورة التالية لما ستبدو عليه الصفحة في متصفّح الويب: إن أردت تعلم المزيد حول HTML و CSS وأن تصبح خبيرًا بهما وأن تطور مواقع وتطبيقات ويب عالية الجودة، فأنصحك بالاطلاع على دورة تطوير واجهات المستخدم المقدمة من أكاديمية حسوب. سنتعلّم في الدرس الثاني كيف ننشر موقعنا على الانترنت. ترجمة -وبتصرّف- للدّرس HTML & CSS Tutorial - Part 1: Your First Website لصاحبه Marco Jakob. اقرأ أيضًا المدخل الشامل لتعلم تطوير الويب دليل تعلم لغة HTML دليل تعلم البرمجة1 نقطة -
عايزة اعرف ايه الكورسات اللى ممكن اخدها علشان ادخل مجال العمل الحر وبتاخد اد ايه فالوقت وازاى اعرف احدد المهارة اللى ممكن اتعلمها علشان الشغل1 نقطة
-
هل يمكنني اضافة صوت ترحيبي عند الدخول لصفحة الويب مع loader معين زي هذا https://shoppingecommerce.netlify.app/dist/imgs/loaders/08.gif؟ وهل يمكنني اضافة صوت عندما يسوي الزائر حساب جديد ويكون في الرسالة الصوتية متغير اضيف فيها اسم العميل الي كتبه في خانة الاسم؟1 نقطة
-
أنا الآن أدرس دورة علوم الحاسوب و أنا على وشك إنهاء مسار أنظمة التشغيل ونظام لينكس. قمنا في هذا المسار بتنصيب بيئة لينكس إفتراضية أعطيتها 2 غيغا بايت تقريبا لكي تعمل. ثم قمنا بتنصيب Ubuntu-server أيضا على البيئية الوهمية و أعطيته أيضا أقل من 2 غيغا بايت بقليل للذاكرة العشوائية لكي تعمل. الآن عند تشغيلهما معا ثم محاولة الإتصال بخادم Ubuntu من البيئة الوهمية للينيكس يتوقف الجهاز تقريبا أي أنه يصبح بطيئ جدا جدا جدا و لدرجة لا أستطيع العمل عليه. مساحة الرام عندي 4 فهل إذا زدتها إلى 6 أو 8 هل سيحل ذلك المشكلة أم أنه شيئا آخر يمكن أن يكون في حاجة للتطوير في جهازي و أن تطوير الرام أو تطويها وحدها لن ينفع أم شيء آخر.1 نقطة
-
مجال العمر الحر ليس مجال بحد ذاته بل سوق عمل، ويجب عليك إمتلاك مهارة للمنافسة به والحصول على مشاريع وفرص توظيف عن بعد. وفي البداية عليك بمعرفة المجالات الملطوبة في مواقع العمل الحر والتي منها المواقع التالية: مستقل خمسات بعيد ومن المفترض أن تكوني متخصصة في أحد المهارات التالية للعمل على المواقع السابقة: أعمال وخدمات استشارية برمجة، تطوير المواقع والتطبيقات هندسة، عمارة وتصميم داخلي تصميم، فيديو وصوتيات تسويق إلكتروني ومبيعات كتابة، تحرير، ترجمة ولغات دعم، مساعدة وإدخال بيانات تدريب وتعليم عن بعد وكل مجال من السابق بداخله تخصصات أخرى، فمثلاً، مجال البرمجة يحتوي على برمجة المواقع وبرمجة تطبيقات الهاتف وبرمجة برامج سطح المكتب، وبداخل كل تخصص هناك لغات برمجة مختلفة وهكذا. والأمر قد يبدوا معقد من الخارج، لكن خطوة بخطوة سيسهل الأمر عليك والجميع بدأ من نقطة الصفر. وبالنسبة للمدة اللازمة لتعلم أي مهارة، ففي رأي من 6 شهور وحتى سنة أو سنتين، حيث أن الأمر يتوقف على مقدار إجتهادك، وأيضًا معلوماتك المتوفرة أو خبراتك التي قد تساعدك في التعلم بشكل أسرع. والأفضل لك هو قراءة المقالات التالية لتحديد المجال الذي تريده، وفهم طبيعة العمل الحر بشكل شامل، بدلاً من التصورات الخيالية التي يروج لها على وسائل التواصل الإجتماعي. دليلك الشامل إلى العمل الحر عبر الإنترنت 28 وظيفة من وظائف العمل الحر الأكثر طلبًا للمبتدئين: 10 مقالات في مجال العمل الحر ينبغي لك قراءتها كيفية العمل على موقع مستقل وتحقيق أول 25 دولار بعد أن تقومي بقراءة المقالات السابقة، لا تترددي في الاستفسار عما تحتاجيه هنا، ولكن بعد قراءة المقالات. وأيضًا قد تحتاجي إلى قراءة النقاش التالي:1 نقطة
-
السلام عليكم.. هل يمكن عمل تطبيق هاتف متكامل باستخدام الجافاسكريبت؟وكيف ستكون كفاءته مقارنة باللغات الأخرى المستخدمه في إنشاء تطبيقات الهواتف؟1 نقطة
-
بالإمكان ربط كود بايثون مع كود React Native باستخدام Bridge API. ويستخدم Bridge API لإنشاء واجهات المستخدم والتعامل مع قواعد البيانات والاتصال بخدمات الويب والتحكم في التحليلات والأدوات الأخرى التي تعمل بلغة بايثون. ويتم تنفيذ Bridge API باستخدام وظيفة "native modules" في React Native و "Python modules" في بايثون. ويجب معرفة أنه يمكن استخدام Bridge API لتوفير القدرة على إعادة استخدام برامج بايثون الموجودة بالفعل وإضافة ميزات جديدة إلى تطبيقات React Native باستخدام لغة بايثون. مثلاً، تستطيعي استخدام بايثون لإنشاء نماذج التعلم الآلي والتفاعل معها في تطبيق React Native، وذلك من خلال مكتبة TensorFlow المتاحة في بايثون لإنشاء نماذج تعلم الآلة وتدريبها على البيانات. وبعد ذلك نستخدم Bridge API لربط تطبيق React Native مع تلك النماذج وتوفير واجهة المستخدم اللازمة لتفاعل المستخدمين معها. مثال بسيط على طريقة الربط بين بايثون وReact Native في البداية، عليك بإنشاء وحدة بايثون بسيطة تُسمى "calculator.py" وضعي بها الكود التالي: def add(a, b): return a + b الآن سنقوم بإنشاء Native Module في React Native لاستدعاء هذه الوحدة. يمكنك إنشاء ملف جديد يسمى "CalculatorModule.js" وضعي به التالي: import { NativeModules } from 'react-native'; const { Calculator } = NativeModules; export default { add: (a, b) => { return Calculator.add(a, b); }, }; وتأكدي من تحديد اسم Native Module كـ "Calculator"، ثم يمكنك استخدام هذا Native Module في كود React Native الخاص بك. من خلال إنشاء شاشة جديدة تُسمى "CalculatorScreen.js" كالتالي: import React, { useState } from 'react'; import { View, Text, TextInput, Button } from 'react-native'; import Calculator from './CalculatorModule'; const CalculatorScreen = () => { const [a, setA] = useState(''); const [b, setB] = useState(''); const [result, setResult] = useState(''); const handleAdd = () => { const res = Calculator.add(Number(a), Number(b)); setResult(res.toString()); }; return ( <View> <TextInput value={a} onChangeText={setA} /> <TextInput value={b} onChangeText={setB} /> <Button title="Add" onPress={handleAdd} /> <Text>{result}</Text> </View> ); }; export default CalculatorScreen; وكما ترين يتم استدعاء Native Module "Calculator" واستخدامه في دالة "handleAdd" لجمع الأعداد المدخلة، وعرض نتيجة الجمع في عنصر "Text". والمثال بسيط لكنه يوضح كيفية استخدام Bridge API لربط كود بايثون مع كود React Native، وبنفس المبدأ تستطيعي تطوير تطبيقات React Native متكاملة مع قواعد البيانات والتحكم في التحليلات والأدوات الأخرى.1 نقطة
-
نعم، يمكن عمل تطبيق هاتف متكامل باستخدام الجافاسكريبت، ولكن يجب أن تستخدم إطارات عمل مخصصة لهذا الغرض، مثل React Native أو Ionic أو Cordova. هذه الإطارات تسمح لك بكتابة كود جافاسكريبت واستخدام تقنيات الويب مثل HTML و CSS لإنشاء واجهات مستخدم أصلية أو هجينة تعمل على نظامي Android و iOS. كفاءة هذه التطبيقات تعتمد على عوامل عديدة، مثل جودة الكود وأداء السيرفر. بشكل عام، يمكن أن تكون التطبيقات المبنية على الجافاسكريبت أقل كفاءة من التطبيقات المبنية على لغات أخرى مثل Java أو Kotlin أو Swift، لأنها تحتاج إلى استخدام محرك جافاسكريبت لتفسير الكود في وقت التشغيل، بدلا من ترجمته إلى كود آلة مسبقا. لذلك، قد تواجه بعض التحديات في التعامل مع المهام المعقدة أو الموارد المحدودة أو التفاعل مع خصائص الجهاز الأصلية. لكن هذا لا يعني أن التطبيقات المبنية على الجافاسكريبت غير قابلة للاستخدام أو ذات جودة منخفضة، فهناك العديد من التطبيقات الناجحة والشهيرة التي تم إنشاؤها بهذه الطريقة، مثل Facebook و Instagram و Skype و Uber و Airbnb وغيرها. إذا كنت ترغب في تعلم كيفية إنشاء تطبيق هاتف باستخدام الجافاسكريبت، و هناك العديد من المصادر والدورات المتاحة على الإنترنت تعلم هذه التقنيات، نعم، يمكنك ربط كود بايثون مع كود React Native من خلال سيرفر مثل Flask أو Django, يمكنك كتابة API بلغة بايثون وتشغيل سيرفر ، ومن ثم تستخدم لغة الجافاسكريبت للإتصال بالAPI والتواصل مع السيرفر في تطبيق React Native. و يمكن ايضاً ربط كود بايثون مع كود React Native باستخدام مكتبات مثل Native Modules. يمكن استخدام هذه المكتبة للاتصال بتطبيق Python واستدعاء الوظائف من خلال تطبيق React Native. يمكن استخدام هذه التقنية لإضافة مزايا إضافية إلى تطبيق React Native أو لتحسين أداء التطبيق.1 نقطة
-
شكرا ،جزاك الله خيرا، سؤال آخر لوسمحت هل تعلم إذا كان بإمكان ربط كود بايثون مع كود React Native؟1 نقطة
-
بالطبع يمكنك إنشاء مواقع، تطبيقات وبرامج سطح مكتب باستخدام جافاسكريبت. والتطبيقات يتم إنشائها باستخدام إطار العمل الشهير "React Native"، و الذي يستخدم مجموعة متنوعة من التقنيات والأدوات بما في ذلك HTML و CSS و JavaScript لإنشاء تطبيقات الهواتف. وبالنسبة لكفاءة التطبيقات المبنية باستخدام الجافاسكريبت، فإنها متقاربة في الأداء مقارنة باللغات الأخرى المستخدمة في تطوير التطبيقات مثل Swift و Kotlin و Java. ومع ذلك ، فإن كفاءة التطبيق يعتمد على عدة عوامل أخرى بما في ذلك نوع التطبيق وحجم البيانات التي يتم تداولها ومستوى تحسين الأداء للكود. والمقارنة ظالمة بعض الشيء، حيث أن React Native يسمح لك بإنشاء تطبيقات متعددة المنصات بسهولة بين منصتي iOS و Android ، وبالتالي يسهل عملية تطوير التطبيقات ويوفر الكثير من الوقت والجهد. أما التطبيقات الأصلية Native المبنية بواسطة Swift و Kotlin و Java فهي لا تعمل على المنصات الأخرى، أي Swift تستخدم لبناء تطبيقات لنظام iOS بينما Kotlin و Java لنظام أندرويد. وقد تم ذكر المزيد من التفاصيل والشرح والمقارنات في نقاشات سابقة، أرجو منك قرائتها تجنبًا للتكرار.1 نقطة
-
يؤثر حجم الذاكرة العشوائية RAM على أداء الحاسوب بشكل كبير، فكلما زاد حجم الذاكرة العشوائية RAM زادت سرعة الحاسوب وأداءه، والسبب في ذلك هو أنه كلما زاد حجم الذاكرة العشوائية RAM زاد عدد التطبيقات التي يمكن تشغيلها في نفس الوقت، وزادت سرعة تشغيل هذه التطبيقات، وأيضًا زادت سرعة تحميل الملفات والبرامج، وزادت سرعة تصفح الإنترنت، وزادت سرعة تشغيل الألعاب، وزادت سرعة تشغيل برامج المونتاج والجرافيكس. وفي حالتك فالـ 4 جيغا غير كافية أبداً فأقل ما يمكن يجب ان يتم رفع الذاكرة إلى 8 أو 12، والافضل هو ان تصبح 16 أو 32. ولكن سرعة الجهاز تعتمد على عدة عوامل ومنها القرص الصلب فمكما اخبرك المدرب في الاجابة السابقة فإن القرص الصلب من نوع SSD يحسن اداء الجهاز بشكل جذري حيث يعتبر القرص الصلب من النوع SSD أسرع بكثير من الأقراص الصلبة التقليدية، وذلك لأنه لا يحتوي على أجزاء متحركة، بالإضافة إلى أنه يستخدم ذاكرة فلاش لتخزين البيانات بدلاً من الأقراص المغناطيسية التي تستخدم في الأقراص الصلبة التقليدية. وبالتالي، فإنه يوفر سرعات قراءة وكتابة أسرع. ومن بين المزايا الأخرى للاستخدام SSD هو أنه يستهلك طاقة أقل من الأقراص الصلبة التقليدية، مما يؤدي إلى تحسين عمر بطارية جهاز الكمبيوتر المحمول، كما أنه يعمل بشكل هادئ ولا يحتوي على أجزاء متحركة، مما يجعله أكثر موثوقية وأقل عرضة للفشل. بعد قول ذلك فإن اداء الحاسوب يتأثر بشكل كبير من قدرة المعالج، وما انصحك به هو ان تنظر إلى مدير المهام task manager وتراقب اداء الحاسوب فإذا رأيت أن الهارد هو الذي يتم استخدامه بنسبة 100% فهذا يعني ان المشكلة لديك هي من الـ هارد وإذا كان الرام أو المعالج هو الذي يتم استهخدامه بنسبة 100% فهذا يعني ان المشكلة من الرام أو المعالج.1 نقطة
-
مساحة الرامات لديك صغيرة جدًا، وتشغيل نظامي وهمي على تلك المساحة من الرامات أمر صعب، لذلك يجب أن تكون على الأقل 8 جيجابايت وتلك مساحة صغيرة أيضًا، ففي الوقت الحالي المساحة المناسبة للرامات هي 16 جيجابايت. وذلك لتتمكن من تشغيل المتصفح ومتابعة الدروس وتشغيل محرر الأكواد وبرامج أخرى بجانب النظام الوهمي وأيضًا النظام الأساسي الخاص بك يشغل ما بين 2 جيجابايت إلى 4 جيجابايت. ولا تضغط على نفسك كثيرًا، يكفيك 8 جيجابايت من الذاكرة العشوائية لتعمل بشكل جيد، والأفضل هو 16 أو 12 جيجابايت حسب استطاعتك. وأيضًا سيفيدك بالتأكيد شراء هارد SSD وجعله وحدة التخزين الأساسية للنظام والبرامج لديك، فالعمل على هارد HDDيجعلك تشعر كأن الجهاز يعاني حتى لو كانت مواصفات الحاسوب مرتفعة، وذلك سبب سرعة القراءة والكتابة المنخفضة لذلك النوع من وحدة التخزين. لكن كما أشرت لك، الأمر يتوقف على ميزانيتك ولا تضغط على نفسك كثيرًا ،قم بشراء الرامات أولاً وتستطيع شراء رامات مستخدمة و SSD وأيضًا بتكلفة منخفضة.1 نقطة
-
إضافة صوت ترحيبي و Loader لإضافة صوت الترحيب ، تستطيع استخدام عنصر HTML5 audio ، ويتم تشغيله باستخدام JavaScript. أولاً ، قم بإنشاء عنصر audio في HTML الخاص بك باستخدام العلامة <audio> ، وحدد مصدر الصوت الخاص بك باستخدام العلامة <source> ، كما يلي: <audio id="welcome-sound"> <source src="path/to/sound/file.mp3" type="audio/mp3"> </audio> بعد ذلك، عليك استخدام addEventListener لتعيين حدث load لتشغيل الصوت عندما تنتهي صفحة الويب من التحميل بدلاً من استخدام window.onload. وسنعتمد على حدث DOMContentLoaded بدلاً من load لتحديد الحدث الذي يتم إطلاقه عندما يتم تحميل كل العناصر في الصفحة بشكل كامل بدلاً من انتظار الصفحة بالكامل (مثل الصور) للانتهاء من التحميل ، وهذا يجعل الصفحة تستجيب بشكل أسرع. document.addEventListener("DOMContentLoaded", function(event) { // تشغيل الصوت document.getElementById('welcome-sound').play(); }); إضافة loader إلى صفحتك سيتم الجمع ما بين استخدام العناصر المختلفة في CSS لإنشاء loader مخصص، وتستطيع استخدام صور GIF المحملة مسبقًا ، مثل الصورة التي أرفقتها، أو يمكنك استخدام الرسومات SVG أو CSS لإنشاء loader. بعد ذلك ، سنعتمد على JavaScript لإظهار وإخفاء loader بناءً على حالة تحميل الصفحة. HTML <!-- loader --> <div class="loader"> <img src="path/to/loader/image.gif"> </div> CSS .loader { border: 16px solid #f3f3f3; border-top: 16px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } في الكود أعلاه ، يتم إنشاء loader باستخدام حدود CSS ودائرة مع مجموعة محددة من الألوان. يتم إنشاء الحركة باستخدام animation CSS ، والذي يسمح لل loader بالدوران بشكل لا نهائي. Javascript document.addEventListener("DOMContentLoaded", function(event) { const loader = document.querySelector(".loader"); loader.style.display = "none"; // إخفاء loader عند بدء تحميل الصفحة // تشغيل الصوت document.getElementById('welcome-sound').play(); // إظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة setTimeout(function() { loader.style.display = "block"; }, 3000); // إخفاء loader بعد 5 ثوانٍ من بدء تحميل الصفحة setTimeout(function() { loader.style.display = "none"; }, 5000); }); من خلال استهداف العنصر .loader باستخدام document.querySelector يتم إخفاؤه باستخدام style.display = "none". ثم تشغيل الصوت بواسطة document.getElementById('welcome-sound').play();. بعد ذلك ، يتم استخدام setTimeout لإظهار loader بعد 3 ثوانٍ من بدء تحميل الصفحة ، وإخفائه بعد 5 ثواني. إضافة صوت عندما يقوم الزائر بإنشاء حساب جديد عليك باستخدام العنصر audio في HTML لتشغيل الصوت ويمكنك تعيين مصدر الصوت في الـ JavaScript. بالنسبة لإضافة اسم العميل المسجل إلى رسالة الصوت ، سنعتمد على قيمة العنصر input الخاص بالاسم لاسترداد الاسم الذي قام المستخدم بكتابته. ثم يمكنك إضافة هذا الاسم إلى نص الرسالة الصوتية باستخدام concat في JavaScript. HTML <input type="text" id="name" placeholder="الاسم"> <button id="submit">إنشاء الحساب</button> <audio id="welcome-sound"> <source src="welcome.mp3" type="audio/mpeg"> </audio> Javascript document.getElementById("submit").addEventListener("click", function() { const name = document.getElementById("name").value; const welcomeMessage = "مرحباً " + name + "! تم إنشاء حسابك بنجاح"; const audio = document.getElementById("welcome-sound"); audio.src = "welcome.mp3"; // مصدر الصوت audio.play(); setTimeout(function() { alert(welcomeMessage); }, 3000); // 3 ثوانٍ للتأكد من عرض الرسالة الصوتية بشكل كامل }); الكود يستخدم addEventListener لاستماع حدث النقر على الزر "إنشاء الحساب". ويتم استخدام قيمة العنصر input الخاص بالاسم لإعداد رسالة الترحيب بشكل ديناميكي. ثم يتم تشغيل الصوت وإضافة رسالة الترحيب إلى الـ alert التي تظهر بعد ثلاث ثوانٍ من تشغيل الصوت. ويمكنك تغيير المدة المحددة في setTimeout وفقًا لاحتياجاتك.1 نقطة
-
Telegram Bot API هي واجهة برمجية تم تصميمها للمطورين الذين يرغبون في بناء الروبوتات (Bots) لـ Telegram و يمكنك البدء في استخدام Telegram Bot API عن طريق قراءة الدليل الرسمي للمطورين في Telegram والذي يحتوي على شرح مفصل لكيفية استخدام الـ API والتعامل معها وهو الشرح الاكثر شمولية والمقدم من تلغرام. كذلك قد تجد بعض الشروحات إذا بحث عن (انشاء بوت تلغرام) على يوتيوب. وهذه بعض المقالات عن الموضوع :1 نقطة
