انشر تطبيق قائمة المهام الأولى: 8 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

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

حسنًا ، الخبر السار هو أن البرمجة ليست صعبة.

الجمهور المستهدف: هذا البرنامج التعليمي مخصص للمبتدئين الذين يرغبون في بدء حياة مهنية في تطوير الويب ، ولديهم فهم لتقنيات الويب بشكل عام.

وقت البناء: 90 دقيقة.

الصعوبة: سهل.

الخطوة 1: ما الذي سنبنيه؟

بنهاية هذا البرنامج التعليمي سنقوم بما يلي:

• قم بإنشاء تطبيق ويب بسيط لقائمة المهام باستخدام HTML5.
• ادمج Bootstrap مع تطبيقنا لإضافة تصميم جميل وسريع المظهر.
• استخدم مكتبة JavaScript و JQuery لإضافة بعض السلوك الديناميكي لتطبيقنا.
• انشر تطبيقنا في السحابة باستخدام Ziet / الآن.

في العمل:

الخطوة الثانية: مقدمة إلى HTML و Bootstrap و JavaScript و JQuery

ما هو HTML؟

يمكن اعتبار لغة ترميز النص التشعبي (HTML) "لغة الإنترنت". HTML هي لغة الترميز القياسية المستخدمة لإنشاء صفحات الويب. تم تصميمه في الأصل لمشاركة الوثائق العلمية. جعلت عمليات التكيف مع HTML على مر السنين من المناسب وصف عدة أنواع أخرى من المستندات التي يمكن عرضها كصفحات ويب على الإنترنت.

الشرط الوحيد المطلوب لعرض صفحة HTML هو متصفح الويب ، مثل Microsoft Internet Explorer (IE) أو Mozilla Firefox أو Google Chrome أو Apple Safari.

ما هو Bootstrap؟

Bootstrap هو إطار عمل HTML و CSS و JavaScript الأكثر شيوعًا لبناء مواقع ويب متنقلة سريعة الاستجابة. Bootstrap هو مشروع مفتوح المصدر تم تطويره بواسطة Twitter. يتكون من فئات CSS التي يمكن تطبيقها على العناصر لتصميمها بشكل متسق ورمز JavaScript الذي يؤدي إلى تحسينات إضافية.

ما هو جافا سكريبت؟

JavaScript هي لغة برمجة تُستخدم للبرمجة من جانب العميل في تطبيقات الويب. يتم تشغيل كود JavaScript بواسطة المستعرض ويسمح لمبرمجي تطبيقات الويب بإنشاء محتوى ويب ديناميكي ، مثل المكونات التي تظهر أو يتم إخفاؤها ديناميكيًا وتغيير المظهر والتحقق من صحة إدخال المستخدم.

ما هو JQuery؟

JQuery هي مكتبة JavaScript سريعة وصغيرة وغنية بالميزات ، فهي تجعل أشياء مثل اجتياز مستندات HTML والتلاعب ومعالجة الأحداث والرسوم المتحركة أبسط بكثير.

يتم الوصول إلى كل قوة JQuery عبر JavaScript ، لذا فإن امتلاك فهم قوي لجافا سكريبت يعد أمرًا ضروريًا لفهم التعليمات البرمجية الخاصة بك وهيكلتها وتصحيحها.

لمزيد من التفاصيل:

لغة البرمجة

جافا سكريبت

مسج

التمهيد

الخطوة 3: صفحتك الأولى مع HTML

الخطوة 1: إنشاء مجلد جديد:

mkdir بسيط todolist

الخطوة 2: قم بإنشاء ملف جديد داخل مجلد Simple-todolist وقم بتسميته index.html.

قرص مضغوط بسيط للأطفال

المس index.html

STEP3: أضف الكود التالي إلى index.html.

عمل قائمة

قائمة المهام الخاصة بي

الخطوة 4: افتح index.html في متصفحك.

سترى قائمة المهام الخاصة بي معروضة (انظر الصورة أعلاه).

الخطوة 4: إضافة Bootstrap

في هذا القسم ، سنضيف دعم Bootstrap إلى صفحة index.html الخاصة بنا ، من أجل إضافة تصميم سريع وجيد إلى تطبيق قائمة المهام.

ملاحظة: في هذا التطبيق ، سنستخدم Bootstrap 3 ، وستستخدم أي إطار عمل CSS آخر ، مثل Semantic UI.

الخطوة 1: أضف ملف Bootstrap CSS في علامة head:

الخطوة 2: أضف ملفات البرامج النصية Bootstrap و JQuery CDN في نهاية علامة النص الأساسي:

الخطوة 3: افتح index.html في متصفحك.

تهانينا ، لقد نجحنا في إضافة دعم Bootstrap إلى صفحتنا في خطوات قليلة.

الخطوة 5: أكمل واجهة المستخدم

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

الخطوة 1: أضف الكود التالي إلى index.html.

إضافة مهمة جديدة إضافة مسح الكل!

قائمة المهام الخاصة بي

الخطوة 2: افتح ملف index.html في متصفحك.

الخطوة 6: إضافة المنطق إلى التطبيق

عند إدخال اسم مهمة والنقر فوق الزر "إضافة" ، لا يحدث شيء في الوقت الحالي. دعونا نصلح ذلك.

بنهاية هذه الخطوة ، سنحول index.html إلى صفحة ديناميكية ، بحيث تتعامل مع تفاعل المستخدم.

الخطوة 1: قم بإنشاء مجلد جديد داخل Simple-todolist ، وقم بتسميته js واسم ملف جديد هو script.js داخل هذا المجلد:

مكدير شبيبة

cd js touch script.js

الخطوة 2: قم بربط script.js بملف index.html عن طريق إضافة الكود التالي في نهاية علامة head:

الخطوة 3: أضف التعليمات البرمجية التالية إلى ملف script.js

$ (المستند).ready (() => {

مهام var = 0 $ ("# removeAll"). hide ()؛ / * إضافة معالج مهام جديد * / $ ("# add"). على ("click"، (event) => {event.preventDefault ()؛ event.stopPropagation ()؛ var val = $ ("input"). val () ؛ إذا (val! == "") {مهام + = 1 ؛ فار إلم = $ ("

• ")؛ $ (" # mylist "). append (elem)؛ $ (" input "). val (" ")؛ / * إزالة معالج المهام الفريدة * / $ (". text-right "). on (" clikc "، function (event) {event.preventDefault ()؛ event.stopPropagation ()؛ مهام - = 1؛ $ (this).parent.remove ()؛})؛ / * إظهار زر removeAll عندما يكون لدينا أكثر من 3 مهام * / if (مهام> 2) {$ ("# remveAll"). show ()؛} / * removeAll handler * / $ ("# removeAll"). on ("click"، event => {event.preventDefault ()؛ event.stopPropagation ()؛ $ (". ؛

  ملاحظة: يمكنك الحصول على استنساخ أو تنزيل الرمز البريدي من مستودع GitHub الخاص بي ، وهذا يحميك جيدًا من النقر.

  git clone github.com/ahmnouira/simple-todolist

  الخطوة 4: اختبر الكود

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

  الخطوة 7: (اختياري) انشر التطبيق

  

  لقد أنشأنا حتى الآن تطبيقًا بسيطًا لقائمة المهام ، حان الوقت الآن لنشره في السحابة ومشاركة عملنا مع الآخرين في جميع أنحاء العالم.

  لتحقيق ذلك ، سوف نستخدم منصة سحابية تسمى ZEIT Now.

  ما هو ZEIT Now؟

  ZEIt Now هو نظام أساسي سحابي للمواقع الثابتة والوظائف التي لا تحتاج إلى خادم ، وهو يمكّن المطورين من استضافة مواقع الويب وخدمات الويب التي تنشر على الفور ، كل هذا بدون تكوين.

  1. ثبِّت الآن CLI

  للنشر مع ZEIT Now ، ستحتاج إلى تثبيت Now CLI.

  هام: تأكد من تثبيت npm.

  npm -v # تحقق مما إذا كان تثبيت npm

  npm install -g now @ latest # تثبيت الإصدار الأخير من Now CLI عالميًا الآن -v # chech إذا تم تثبيت CLI الآن وطباعته

  2. نشر

  كل ما عليك فعله هو الانتقال إلى الدليل ثم نشر تطبيقك بأمر واحد:

  الآن --prod # نشر التطبيق

  بمجرد النشر ، ستحصل على عنوان URL للمعاينة يتم تعيينه في كل عملية نشر لمشاركة أحدث التغييرات تحت العنوان.

  تطبيقي:

  الخطوة 8: الخاتمة

  هذا كل ما في الامر !

  لا تتردد في استكشاف الكود عن طريق تعيين ميزات جديدة وتوسيع التطبيق ومشاركة تجربتك وأسئلتك في منطقة التعليق.

  لمشاهدة المزيد من أعمالي ، يرجى زيارة المصدر المفتوح في GitHub.

  myYouTube.

  myLinkedIn

  شكرًا على الوقت الذي قضيته في قراءة التعليمات الخاصة بي ^ ^.

  طاب يومك.

  أحمد نويرة