לפרוס את יישום רשימת המטלות הראשון שלך: 8 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:14

אם אתה חדש לגמרי בקידוד או שיש לך קידוד רקע, ייתכן שאתה תוהה היכן להתחיל ללמוד. עליך ללמוד כיצד, מה, היכן לקוד ולאחר מכן, לאחר שהקוד מוכן, כיצד ניתן לפרוס אותו כך שהכל יראה.

ובכן, החדשות הטובות הן שהקידוד אינו קשה.

קהל יעד: הדרכה זו מיועדת למתחילים שרוצים להתחיל קריירה בפיתוח אתרים, בעלי הבנה בטכנולוגיות אינטרנט באופן כללי.

זמן בנייה: 90 דקות.

קושי: קל.

שלב 1: מה נבנה?

בסוף ההדרכה הזו נבצע:

• צור יישום אינטרנט פשוט לביצוע משימות באמצעות HTML5.
• שלב את Bootstrap באפליקציה שלנו כדי להוסיף עיצוב יפה ומראה מהיר.
• השתמש ב- JavaScript ובספריית JQuery כדי להוסיף התנהגות דינאמית לאפליקציה שלנו.
• לפרוס את היישום שלנו בענן באמצעות Ziet/now.

בפעולה:

שלב 2: היכרות עם HTML, Bootstrap, JavaScript ו- JQuery

מהו HTML?

אפשר לחשוב על Hyper Text Markup Language (HTML) כ"שפת האינטרנט ". HTML היא שפת הסימון הסטנדרטית המשמשת ליצירת דפי אינטרנט. הוא תוכנן במקור לשיתוף מסמכים מדעיים. התאמות ל- HTML לאורך שנים איפשרו לתאר כמה סוגים אחרים של מסמכים הניתנים להצגה כדפי אינטרנט באינטרנט.

הדרישה היחידה הנדרשת להצגת דף HTML היא דפדפן אינטרנט, כגון Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome או Apple Safari.

מהו Bootstrap?

Bootstrap היא מסגרת ה- HTML, CSS ו- JavaScript הפופולרית ביותר לבניית אתרים מובילים לניידים. Bootstrap הוא פרויקט קוד פתוח שפותח על ידי טוויטר. הוא מורכב משיעורי CSS הניתנים ליישום על אלמנטים כדי לעצב אותם באופן עקבי וקוד JavaScript המבצע שיפור נוסף.

מהו JavaScript?

JavaScript היא שפת תכנות המשמשת לתכנות בצד הלקוח ביישומי אינטרנט. קוד JavaScript מופעל על ידי הדפדפן ומאפשר למתכנתים של יישומי אינטרנט לבנות תוכן אינטרנט דינאמי, כגון רכיבים המראים או מוסתרים באופן דינמי, לשנות את המראה ולאמת את קלט המשתמש.

מהו JQuery?

JQuery היא ספריית JavaScript מהירה, קטנה ועשירה בתכונות, היא הופכת דברים כמו מעבר מסמכי HTML ומניפולציה, טיפול באירועים, אנימציה להרבה יותר פשוטים.

כל העוצמה של JQuery ניגשת באמצעות JavaScript, ולכן הבנה חזקה של JavaScript היא הכרחית להבנה, בנייה וניפוי באגים של הקוד שלך.

לפרטים נוספים:

HTML

JavaScript

JQuery

רצועת אתחול

שלב 3: הדף הראשון שלך עם HTML

שלב 1: צור תיקיה חדשה:

mkdir פשוט todolist

שלב 2: צור קובץ חדש בתוך התיקייה הפשוטה לקידום ושם אותו index.html.

תקליטור פשוט todolist

גע ב- index.html

שלב 3: הוסף את הקוד הבא ל- index.html.

רשימת מטלות

רשימת המטלות שלי

שלב 4: פתח את index.html בדפדפן שלך.

תראה רשימת המשימות שלי מוצגת (ראה התמונה למעלה).

שלב 4: הוספת Bootstrap

בחלק זה נוסיף תמיכה של Bootstrap לדף index.html שלנו, על מנת להוסיף עיצוב מהיר וטוב לאפליקציית רשימת המטלות.

שים לב: באפליקציה זו נשתמש ב- Bootstrap 3, אתה משתמש בכל מסגרת CSS אחרת, כמו ממשק משתמש סמנטי.

שלב 1: הוסף קובץ CSS Bootstrap בתג הראש:

שלב 2: הוסף קובצי סקריפטים של Bootstrap ו- JQuery CDN בסוף תג הגוף:

שלב 3: פתח את index.html בדפדפן שלך.

ברכותינו, הוספנו בהצלחה את תמיכת Bootstrap לדף שלנו בכמה שלבים.

שלב 5: השלם את ממשק המשתמש

לאחר שהוספנו בהצלחה את תמיכת Bootstrap לאפליקציה שלנו. עכשיו בואו נמשיך להתחרות בממשק המשתמש (ממשק משתמש) כדי לאפשר למשתמש להוסיף משימות חדשות. רשימת המטלות תוכל להוסיף פריטים חדשים לרשימה, כמו גם להסיר פריטים קיימים.

שלב 1: הוסף את הקוד הבא ל- index.html.

הוסף משימה חדשה הוסף נקה הכל!

רשימת המשימות שלי

שלב 2: פתח את קובץ index.html בדפדפן שלך.

שלב 6: הוספת ההיגיון לאפליקציה

כאשר אתה מזין שם משימה ולוחץ על כפתור הוסף, שום דבר לא קורה כרגע. בואו נתקן את זה.

בסוף שלב זה נהפוך את index.html שלנו לדף דינאמי, כך שהוא יתנהג לאינטראקציה של משתמשים.

שלב 1: צור תיקייה חדשה בתוך פשוט-todolist, תן לה שם js ושם קובץ חדש זה script.js בתוך התיקיה הזו:

mkdir js

cd js מגע script.js

שלב 2: קשר את script.js ל- index.html על ידי הוספת הקוד הבא בסוף תג הראש:

שלב 3: הוסף את הקוד הבא לקובץ script.js

$ (document).ready (() => {

var משימות = 0 $ ("#removeAll"). hide (); / * הוסף מטפל משימות חדש */ $ ("#הוסף"). on ("קליק", (אירוע) => {event.preventDefault (); event.stopPropagation (); var val = $ ("קלט"). val (); אם (val! == "") {משימות += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * הסר מטפל משימות ייחודי * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); משימות -= 1; $ (זה).parent.remove ();}); /* הצג כפתור removeAll כאשר יש לנו יותר מ -3 משימות */ אם (משימות> 2) {$ ("#remveAll"). show ();}/ *removeAll מטפל */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". מושבת"). אחים (). להסיר (); משימות = 0; $ ("#removeAll"). להסתיר ();});}});});

  הערה: אתה יכול לשכפל או להוריד את ה- ZIP של הקוד ממאגר GitHub שלי, ובכן זה יכול לחסוך ממך הקשה.

  שיבוט gitub.com/ahmnouira/simple-todolist

  שלב 4: בדוק את הקוד

  פתח את הדפדפן והזן משימה ולאחר מכן לחץ על הוסף, תראה משימה חדשה מתווספת לרשימה, אם תוסיף 3 משימות תבחין שמופיע כפתור clearAll, כפתור זה מאפשר לנו להסיר את כל המשימות שנוספו, אתה יכול גם להסיר רק משימה אחת קנייה בלחיצה על הכפתור שלה.

  שלב 7: (אופציונלי) לפרוס את האפליקציה

  

  עד כה בנינו אפליקציית רשימת מטלות פשוטה, עכשיו הגיע הזמן לפרוס אותה בענן ולשתף את עבודתנו עם אחרים ברחבי העולם.

  כדי להשיג זאת נשתמש בפלטפורמת ענן בשם ZEIT Now.

  מהו ZEIT Now?

  ZEIt Now היא פלטפורמת ענן לאתרים סטטיים ופונקציות ללא שרת, היא מאפשרת למפתחים לארח אתרים ושירותי אינטרנט המתפרסים באופן מיידי, כל זאת ללא אפס תצורה.

  1. התקן את CLI Now

  כדי לפרוס עם ZEIT Now, יהיה עליך להתקין את Now CLI.

  חשוב: ודא שהתקנת npm.

  npm -v # בדוק אם התקנת npm

  npm התקן -g עכשיו@האחרון # התקן את הגירסה האחרונה של Now CLI ברחבי העולם עכשיו -v # chech אם ה- CLI Now מותקן והדפס אותו

  2. לפרוס

  כל שעליך לעשות הוא להיכנס לספרייה ולאחר מכן לפרוס את האפליקציה שלך באמצעות פקודה אחת:

  עכשיו -פרוד # לפרוס את האפליקציה

  לאחר הפריסה תקבל כתובת URL של תצוגה מקדימה שתוקצה בכל פריסה שתשתף את השינויים האחרונים תחת הכתובת.

  האפליקציה שלי:

  שלב 8: סיכום

  זה כל מה שיש בזה!

  אל תהסס לחקור את הקוד על ידי הגדרת תכונות חדשות והרחבת האפליקציה, ושתף את החוויה והשאלות שלך באזור ההערות.

  כדי לראות עבודות נוספות שלי, בקר בקוד הפתוח שלי ב- GitHub.

  myYouTube.

  myLinkedIn

  תודה שהזמנת לקרוא את ההנחיה שלי ^^.

  המשך יום נעים.

  אחמד נוירה