MDC-101 Web: חומרי לימוד (MDC) - יסודות (אינטרנט)

1. מבוא

logo_components_color_2x_web_96dp.png

Material Components (MDC) עוזר למפתחים להטמיע Material Design. MDC נוצר על ידי צוות של מהנדסים ומעצבי חוויית המשתמש ב-Google, שכולל עשרות רכיבים יפים ופונקציונליים של ממשק המשתמש. זמין ל-Android, ל-iOS, לאינטרנט ול-Flutter.material.io/develop

מהם Material Design ורכיבי Material for באינטרנט?

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

למחשבים ובאינטרנט לנייד, Material Components Web (MDC Web) מאחדים עיצוב והנדסה עם ספריית רכיבים ליצירת עקביות בין אפליקציות ואתרים. כל אחד מרכיבי MDC Web נמצא במודולים נפרדים של צמתים, כך שככל שמערכת Material Design מתפתחת, ניתן לעדכן את הרכיבים האלה בקלות כדי להבטיח הטמעה עקבית של פיקסלים ותאימות לתקני הפיתוח בממשק הקצה של Google. MDC זמין גם למכשירי Android, iOS ו-Flutter.

ב-Codelab הזה תבנו דף התחברות באמצעות מספר רכיבים של MDC Web.

מה תפַתחו

ה-Codelab הזה הוא הראשון מתוך שלושה מעבדי קוד שינחו אותך בתהליך היצירה של אפליקציה בשם Shrine, אתר מסחר אלקטרוני למכירת בגדים ומוצרים לבית. בקורס תלמדו איך אפשר להתאים אישית את הרכיבים כך שישקפו כל מותג או סגנון באמצעות MDC Web.

ב-Codelab הזה בונים דף התחברות למקדש שמכיל:

  • שני שדות טקסט, אחד להזנת שם משתמש והשני לסיסמה
  • שני לחצנים, אחד ל'ביטול' והשני בשביל 'הבא'
  • שם האתר (Shrine)
  • תמונת הלוגו של מקדש

674d1ca8cfa98c9.png

רכיבי MDC ב-Codelab הזה

  • שדה טקסט
  • לחצן
  • גל

מה צריך להכין

  • גרסה עדכנית של Node.js (שנשלחת בחבילה עם npm, מנהל חבילות של JavaScript).
  • הקוד לדוגמה (להורדה בשלב הבא)
  • ידע בסיסי ב-HTML, ב-CSS וב-JavaScript

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

מתחילים בינונית בקיאים

2. הגדרת סביבת הפיתוח

להורדת האפליקציה לתחילת פעולה של Codelab

האפליקציה לתחילת הפעולה נמצאת בספרייה material-components-web-codelabs-master/mdc-101/starter. חשוב להקליד cd בספרייה הזו לפני שמתחילים.

...או לשכפל אותו מ-GitHub

כדי לשכפל את ה-Codelab הזה מ-GitHub, מריצים את הפקודות הבאות:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

תלות של פרויקטים בהתקנות

מספריית ההתחלה, מריצים את:

npm install

יש פעילות רבה ובסופה, ההתקנה אמורה להופיע בטרמינל:

204c063d8fd78f94.png

אם לא, מריצים את npm audit fix.

הפעלת אפליקציה לתחילת פעולה

באותה ספרייה, מריצים את:

npm start

webpack-dev-server יתחיל. מכוונים את הדפדפן אל http://localhost:8080/ כדי לראות את הדף.

17c139dc5a9bebaf.png

הצלחת! הקוד ההתחלתי של דף ההתחברות של Shrine אמור לפעול בדפדפן. השם 'שריין' אמור להופיע. והלוגו של מקדש ה-Shrine שנמצא ממש מתחתיו.

f7e3f354df8d84b8.png

לעיון בקוד

מטא-נתונים בתיקייה index.html

בספרייה למתחילים, פותחים את index.html באמצעות עורך הקוד המועדף עליכם. הקובץ צריך לכלול את הפרטים הבאים:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

כאן נעשה שימוש בתג <link> כדי לטעון את הקובץ bundle-login.css שנוצר על ידי Webpack, והתג <script> כולל את הקובץ bundle-login.js. בנוסף, אנחנו כוללים את normalize.css לעיבוד עקבי בדפדפנים שונים, וכן את הגופן Roboto מ-Google Fonts.

סגנונות מותאמים אישית בטווח login.scss

רכיבי MDC Web מעוצבים באמצעות mdc-* מחלקות CSS, כמו המחלקה mdc-text-field. (MDC Web מתייחסת למבנה ה-DOM שלו כחלק מה-API הציבורי שלו).

באופן כללי, מומלץ לבצע שינויים בסגנון מותאם אישית ברכיבים באמצעות מחלקות משלכם. יכול להיות שהבחנתם בכמה מחלקות CSS מותאמות אישית ב-HTML שלמעלה, כמו shrine-logo. הסגנונות האלה מוגדרים ב-login.scss כדי להוסיף סגנונות בסיסיים לדף.

אפשר לפתוח את login.scss ולראות את הסגנונות הבאים בדף ההתחברות:

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

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

3. הוספת שדות טקסט

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

9ad8a7db0b50f07d.png

מתקינים את שדה הטקסט של MDC

רכיבי MDC Web מתפרסמים באמצעות חבילות NPM. כדי להתקין את החבילה עבור רכיב שדה הטקסט, מריצים את:

npm install @material/textfield@^6.0.0

מוסיפים את ה-HTML

בקובץ index.html, מוסיפים את הטקסט הבא בתוך הרכיב <form> בגוף:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc