תחילת העבודה עם רכיבים עצמאיים

1. מבוא

מה תפַתחו

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

אתם בונים את כל מה שצריך באפליקציה באמצעות Angular v14 והתכונה החדשה של רכיבים עצמאיים.

כל ההפניות ל-Angular framework ול-Angular CLI משקפות את Angular v14. רכיבים עצמאיים הם תכונת תצוגה מקדימה של Angular v14, ולכן צריך ליצור אפליקציה חדשה לגמרי באמצעות Angular v14. רכיבים עצמאיים מספקים דרך פשוטה לבניית אפליקציות Angular. רכיבים עצמאיים, הנחיות עצמאיות וצינורות עצמאיים נועדו לייעל את חוויית הכתיבה על ידי צמצום הצורך ב-NgModules. רכיבים עצמאיים יכולים לנצל את היתרונות של המערכת האקולוגית הקיימת של ספריות Angular.

זו האפליקציה שאתם בונים היום.

בקשה שהושלמה

מה תלמדו

  • איך משתמשים ב-Angular CLI כדי ליצור פרויקט חדש
  • איך משתמשים ברכיבים עצמאיים של Angular כדי לייעל את הפיתוח של אפליקציות Angular
  • איך יוצרים רכיב עצמאי, כלומר איך בונים את ממשק המשתמש ומוסיפים לו לוגיקה עסקית
  • איך מפעילים אפליקציה באמצעות רכיב עצמאי
  • איך מבצעים טעינה עצלה של רכיב עצמאי
  • איך מטמיעים דיאלוג בצ'אט ברכיב עצמאי באמצעות Dialogflow Messenger
  • איך פורסים אפליקציית Angular ב-Google Cloud App Engine באמצעות Google Cloud CLI‏ (gcloud)

מה צריך

  • חשבון Gmail או חשבון Google Workspace
  • ידע בסיסי בנושאים הבאים
    • HTML. איך יוצרים רכיב
    • ‫CSS ו-less. איך משתמשים בסלקטור ב-CSS ויוצרים קובץ הגדרת סגנון.
    • ‫TypeScript או JavaScript. איך מבצעים פעולות במבנה ה-DOM.
    • ‫git ו-GitHub. איך יוצרים עותק של מאגר ומורידים אותו.
    • ממשק שורת פקודה, כמו bash או zsh. איך מנווטים בספריות ומריצים פקודות.

2. הגדרת הסביבה

הגדרת הסביבה המקומית

כדי להשלים את ה-codelab הזה, צריך להתקין את התוכנה הבאה במחשב המקומי.

  • גרסה של Node.js מסוג active LTS או maintenance LTS. משמש להתקנת מסגרת Angular ו-Angular CLI.

    גרסת הצומת

    נתמך על ידי Angular

    גרסה 14.15 ואילך

    נתמך

    גרסה 16.10 ואילך

    נתמך

    18.1.0

    לא נתמך

    כדי לאמת את הגרסה של Node.js במחשב המקומי, מריצים את הפקודה node מחלון שורת הפקודה.
    node -v
  • עורך קוד או סביבת פיתוח משולבת (IDE). משמש לפתיחה ולעריכה של קבצים.Visual Studio Code או עורך קוד אחר לפי בחירתכם.

התקנת Angular CLI

אחרי שמגדירים את כל התלויות, מריצים את הפקודה npm הבאה כדי להתקין את Angular CLI מחלון של שורת פקודה.

npm install --global @angular/cli

כדי לוודא שההגדרה נכונה, מריצים את פקודת Angular הבאה משורת הפקודה.

ng version

אם פקודת Angular מסתיימת בהצלחה, אמורה להתקבל הודעה שדומה לזו שמופיעה בצילום המסך הבא.

פלט הטרמינל של גרסת Angular

קוד מקור ותמונות

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

כדי להוריד את קוד המקור.

  1. בדפדפן, עוברים לדף הבא.
    https://github.com/angular/codelabs/tree/standalone-components
  2. בחלון שורת הפקודה, יוצרים עותק של המאגר ומורידים אותו.

בשלב הבא, בונים את אפליקציית גלריית התמונות.

3. יצירת אפליקציה חדשה

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

משתמשים ב-Angular CLI כדי ליצור סביבת עבודה חדשה. מידע נוסף על Angular CLI ועל מסגרת Angular זמין באתר angular.io.

יצירת פרויקט חדש

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

  1. מזינים את פקודת Angular הבאה כדי ליצור פרויקט Angular חדש בשם photo-gallery-app.
    ng new photo-gallery-app
  2. בכל הנחיה, מאשרים את ברירת המחדל.מסגרת Angular מתקינה את החבילות והרכיבים התלויים הנדרשים. התהליך עשוי להימשך כמה דקות.

אחרי שה-Angular CLI יסיים את הפעולה, יהיה לכם סביבת עבודה חדשה של Angular ואפליקציה פשוטה שמוכנה להרצה.

המבנה של האפליקציה החדשה דומה למבנה של אפליקציית Angular רגילה. ה-NgModule באפליקציה החדשה מיותר בשביל ה-codelab הזה.

הסרת מודול האפליקציה

כדי להסיר את מודול האפליקציה, מבצעים את הפעולה הבאה.

  1. מנווטים לספרייה src/app בספריית הפרויקט החדשה photo-gallery-app.
  2. מוחקים את הקובץ app.module.ts.

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

הצהרה על רכיב עצמאי

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src/app בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ app.component.ts.
  3. מוסיפים את הפרמטר והערך הבאים לרשימת ה-decorators.
    ‫
    standalone: true
    קובץ app.component.ts צריך להיות דומה מאוד לדוגמת הקוד הבאה.
    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  4. שומרים את קובץ ה-app.component.ts.

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

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app
  2. מזינים את פקודת Angular הבאה כדי לקמפל את האפליקציה החדשה.
    ng serve

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

שימוש ב-bootstrapApplication API

כדי לאפשר לאפליקציה לפעול בלי NgModule, צריך להשתמש ברכיב עצמאי כרכיב הבסיס באמצעות bootstrapApplication API.

הסרת הפניות למודול האפליקציה

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src בספריית הפרויקט החדשה photo-gallery-app
  2. פותחים את הקובץ main.ts.
  3. צריך להסיר את קוד הייבוא הבא, כי אין לך יותר מודול של אפליקציה.
    import { AppModule } from './app/app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  4. מסירים את קוד ה-bootstrap הבא, כי אין יותר מודול אפליקציה.
    ‫
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    קובץ main.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

הוספת הרכיב bootstrapApplication

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ main.ts.
  3. מייבאים את הרכיב bootstrapApplication מהשירות @angular/platform-browser.
    import { bootstrapApplication } from '@angular/platform-browser';
  4. מוסיפים את הקוד הבא כדי להפעיל את האפליקציה.
    bootstrapApplication(AppComponent).catch(err => console.error(err));
  5. מייבאים את הרכיב ואת הספריות הנדרשות.
    ‫
    import { AppComponent } from './app/app.component';
    קובץ main.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent).catch(err => console.error(err));

הוספת נתב ומודולים נפוצים

כדי להשתמש ב-Router ובתכונות נפוצות אחרות של מודולים, צריך לייבא כל מודול ישירות לרכיב.

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src/app בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ app.component.ts.
  3. מייבאים את המודולים הנדרשים לרכיב.
    import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
  4. מוסיפים את הייבוא לרכיב.
    ‫
    imports: [CommonModule, RouterModule],
    קובץ app.component.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. שומרים את קובץ ה-app.component.ts.

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

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל ולהריץ את האפליקציה ולפתוח שרת אינטרנט. יכול להיות שתצטרכו לסגור את סביבת הפיתוח המשולבת לפני שתריצו את האפליקציה כדי להסיר שגיאות קומפילציה.
    ng serve

שרת הפיתוח צריך לפעול ביציאה 4200. כל השגיאות הקודמות אמורות להיעלם והקומפילציה אמורה להצליח. כל הכבוד. יצרתם בהצלחה אפליקציית Angular שפועלת בלי מודול ועם רכיב עצמאי.

  1. בשלב הבא, נשפר את האפליקציה כדי להציג כמה תמונות.

4. הצגת התמונות

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

רכיבים הם אבני הבניין העיקריות של אפליקציות Angular. לרכיבים יש 3 היבטים עיקריים.

  • קובץ HTML לתבנית
  • קובץ CSS לסגנונות
  • קובץ TypeScript להתנהגות האפליקציה

מעבירים את התמונות לאפליקציה

התמונות מופיעות באפליקציה שהורדתם בעבר מ-GitHub.

  1. מנווטים לספרייה src/assets של פרויקט GitHub.
  2. מעתיקים את הקבצים ומדביקים אותם בספרייה analogue בספריית הפרויקט photo-gallery-app.

יצירת תבנית HTML

קובץ app.component.html הוא קובץ תבנית HTML שמשויך לרכיב AppComponent.

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src/app בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ app.component.html.
  3. מוחקים את כל קוד ה-HTML הקיים.
  4. מעתיקים ומדביקים את קוד ה-HTML מדוגמת הקוד הבאה.
    <article>
    <h1>Above and below the Ocean</h1>
        <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
        <section>
            <section class="row">
                <div class="column">
                  <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                  <img src="/assets/49413271167_22a504c3fa_w.jpg">
                  <img src="/assets/47099018614_5a68c0195a_w.jpg">
                </div>
                <div class="column">
                  <img src="/assets/41617221114_4d5473251c_w.jpg">
                  <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                  <img src="/assets/46972303215_793d32957f_c.jpg">
                </div>
                <div class="column">
                  <img src="/assets/45811905264_be30a7ded6_w.jpg">
                  <img src="/assets/44718289960_e83c98af2b_w.jpg">
                  <img src="/assets/46025678804_fb8c47a786_w.jpg">
                </div>
              </section>
        </section>
</article
  5. שומרים את קובץ ה-app.component.html.

יצירת קובץ הגדרת הסגנון

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ styles.css.
  3. מעתיקים ומדביקים את ה-CSS מדוגמת הקוד הבאה.
    article {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Raleway';
}

h1 {
  color: #4479BA;
  text-align: center;
  font-size: xx-large;
}

h2 {
  color: rgb(121, 111, 110);
  text-align: center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/*   Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.link_button {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #20538D;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #4479BA;
  color: #FFF;
  padding: 8px 12px;
  text-decoration: none;
  margin-top: 50px;
  font-size: large;
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
  4. שמירת קובץ styles.css

עדכון קובץ האינדקס

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ index.html.
  3. מוסיפים את הגופן Raleway כדי שכל הדפים יירשו אותו.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  4. שומרים את קובץ ה-index.html.
  5. שומרים את הקוד ובודקים בדפדפן. כשהשרת לפיתוח פועל, השינויים משתקפים בדפדפן כששומרים.
  6. בשלב הבא, תיצרו רכיב עצמאי חדש כדי לשלוח משוב ולשוחח עם ג'ימבו. כדאי להמשיך ב-Codelab הזה כדי לקבל מידע נוסף על Jimbo.

5. הוספת רכיב עצמאי חדש

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

יצירת רכיב עצמאי חדש

כדי ליצור את הרכיב החדש הזה, משתמשים שוב ב-Angular CLI.

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי ליצור רכיב חדש בשם feedback-and-chat.
    ng generate component feedback-and-chat --standalone
    בטבלה הבאה מתוארים חלקי הפקודה.

    חלק

    פרטים

    ng

    הגדרת כל הפקודות של Angular CLI עבור מסגרת Angular

    generate component

    יוצר את התשתית לרכיב חדש

    feedback-and-chat

    שם הרכיב

    --standalone

    הפקודה הזו אומרת למסגרת Angular ליצור רכיב עצמאי

ייבוא של רכיב חדש עצמאי

כדי להשתמש ברכיב החדש העצמאי, צריך קודם להוסיף אותו למערך imports בקובץ app.components.ts.

זהו רכיב עצמאי, ולכן צריך לייבא אותו כמו מודול.

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src/app בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ app.component.ts.
  3. מייבאים את הרכיב העצמאי החדש.
    import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';
  4. מעדכנים את הייבוא ברכיב.
    ‫
    imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
    קובץ app.component.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FeedbackAndChatComponent } from './feedback-and-chat/feedback-and-chat.component';

@Component({
  selector: 'app-root',
  imports: [CommonModule, RouterModule, FeedbackAndChatComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {
  title = 'photo-gallery-app';
}
  5. שומרים את קובץ ה-app.component.ts.

טעינה מדורגת של הרכיב

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

עדכון תבנית ה-HTML שמשויכת לרכיב האפליקציה

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

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src/app בספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ app.component.html.
  3. גוללים לסוף הקובץ ומוסיפים את קוד הדוגמה הבא לפני שסוגרים את הרכיב article.
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
<router-outlet></router-outlet>
  4. קובץ app.component.html צריך להיות זהה לדוגמת הקוד הבאה.
    <article>
    <h1>Above and below the Ocean</h1>
    <h2>A taste of the Australia and Galapagos Wildlife, meet my friends!</h2>
    <section>
        <section class="row">
            <div class="column">
                <img src="/assets/49412593648_8cc3277a9c_c.jpg">
                <img src="/assets/49413271167_22a504c3fa_w.jpg">
                <img src="/assets/47099018614_5a68c0195a_w.jpg">
            </div>
            <div class="column">
                <img src="/assets/41617221114_4d5473251c_w.jpg">
                <img src="/assets/47734160411_f2b6ff8139_w.jpg"> 
                <img src="/assets/46972303215_793d32957f_c.jpg">
            </div>
            <div class="column">
                <img src="/assets/45811905264_be30a7ded6_w.jpg">
                <img src="/assets/44718289960_e83c98af2b_w.jpg">
                <img src="/assets/46025678804_fb8c47a786_w.jpg">
            </div>
        </section>
    </section> 
    <a class="link_button" routerLink="feedback-and-chat">Find out more about these guys!</a>
    <router-outlet></router-outlet>
</article>
  5. שומרים את קובץ ה-app.component.html.

הגדרת המסלולים

בעורך קוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספרייה src בספריית הפרויקט החדשה photo-gallery-app.
  2. פתיחת הקובץ main.ts
  3. מייבאים את השיטה provideRouter ואת המודול Routes. ב-Angular גרסה 14.2.0 נוספה שיטה חדשה בשם provideRouter, שמאפשרת להגדיר קבוצה של מסלולים לאפליקציה.
    import { provideRouter, Routes } from '@angular/router';
  4. מעתיקים את קטע הקוד הבא ומדביקים אותו בין שורות הייבוא לבין ההצהרה if.
    const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]
  5. מעתיקים ומדביקים את קטע הקוד הבא ומחליפים את השיטה bootstrapApplication.
    ‫
    bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
    קובץ main.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes } from '@angular/router';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';

const routes = [
  {
    path: 'feedback-and-chat',
    loadComponent: () => 
      import('./app/feedback-and-chat/feedback-and-chat.component').then(c => c.FeedbackAndChatComponent),
  }
]

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
}).catch(err => console.error(err));
  6. שומרים את קובץ ה-main.ts.

קומפילציה ובדיקה באמצעות הכלים למפתחים ב-Chrome

משתמשים בכלים למפתחים ב-Chrome כדי לבדוק איך רכיב Angular נטען באופן עצלני.

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל ולהריץ את האפליקציה ולפתוח שרת אינטרנט.
    ‫
    ng serve
    שרת הפיתוח צריך לפעול ביציאה 4200.

בדפדפן, מבצעים את הפעולות הבאות.

  1. עוברים לדף הבא.
    http://localhost:4200
  2. פותחים את הכלים למפתחים ב-Chrome ובוחרים בכרטיסייה רשת.
  3. מרעננים את הדף כדי להציג כמה קבצים, אבל לא את הרכיב feedback-and-chat.המסך אמור להיראות כמו צילום המסך הבא.צילום מסך של אפליקציה עם חלונית כלי הפיתוח ל-Chrome פתוחה
  4. לוחצים על הלחצן Find out more about these guys!‎ כדי לעבור לרכיב העצמאי.ביומן אמור להופיע שהרכיב נטען רק כשמגיעים לנתב המלא. גוללים לתחתית הרשימה כדי לבדוק שהרכיב נטען. המסך שלכם אמור להיראות כמו צילום המסך הבא.צילום מסך של אפליקציה עם חלונית כלי הפיתוח ל-Chrome פתוחה, שמציג רכיב שנטען באופן עצלני

6. הוספת ממשק המשתמש לטופס

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

כדי לתמוך בממשק המשתמש, מוסיפים מאפיין formControlName ברכיב input שקושר לכל רכיב בקרה של טופס contactForm שמשויך לכל אחד משלושת שדות הקלט בממשק המשתמש.

הוספת הטופס לתבנית ה-HTML

מוסיפים טופס לממשק המשתמש כדי לאפשר למשתמש לשלוח משוב.

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. עוברים לקובץ feedback-and-chat.component.html.
  2. מסירים את ה-HTML הקיים.
  3. מעתיקים ומדביקים את קוד ה-HTML מדוגמת הקוד הבאה.
    <article>    
    <h2>Send me a message or use the chat below to learn some cool facts of the animals in the photos</h2>
    <section class="container">
        <form ngNativeValidate [formGroup]="contactForm" (ngSubmit)="onSubmit()">
            <div class="row" *ngIf="showMsg">
                <div class="row">
                    <p>
                        <strong>Thanks for your message!</strong>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="name">Full Name</label>
                </div>
                <div class="col-75">
                    <input type="text" id="fname" placeholder="Your name.." formControlName="fullname" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="lemail">Email</label>
                </div>
                <div class="col-75">
                    <input type="text" id="lemail" placeholder="Your email.." formControlName="email" required>
                </div>
            </div>
            <div class="row">
                <div class="col-25">
                    <label for="comments">Comments</label>
                </div>
                <div class="col-75">
                    <textarea id="subject" formControlName="comments" placeholder="Write something.." style="height:200px" required></textarea>
                </div>
            </div>
            <div class="row">
              <button type="submit" class="submit">Submit</button>
            </div>
        </form>
    </section>
</article>
  4. שומרים את קובץ ה-feedback-and-chat.component.html.

עדכון קובץ הסגנונות של הטופס

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. עוברים לקובץ feedback-and-chat.component.css.
  2. מעתיקים ומדביקים את ה-CSS מדוגמת הקוד הבאה.
    /*   Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/*   Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/*   Style the submit button */
button {
  background-color: #4479BA;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  font-size: medium;
  font-family: 'Raleway';
}

/*   Style the container */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 100%;
}

/*   Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/*   Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/*   Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*   Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
  3. שומרים את קובץ ה-feedback-and-chat.component.css.

קומפילציה של עדכון ממשק המשתמש של הטופס

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל ולהריץ את האפליקציה ולפתוח שרת אינטרנט.
    ng serve
    הקומפילציה של האפליקציה שלך אמורה להיכשל. אל דאגה, צריך לקשר את הטופס.
  3. בשלב הזה, כדאי לבדוק את הפריטים הבאים.
    • משתמשים בקשירת המאפיין formGroup כדי לקשור את contactForm לרכיב form ואת קשירת האירוע ngSubmit
    • ההנחיה FormGroup מקשיבה לאירוע השליחה שמופק על ידי הרכיב form. לאחר מכן, ההנחיה FormGroup שולחת אירוע ngSubmit שאפשר לקשר לפונקציית הקריאה החוזרת onSubmit.
    • בשלב מאוחר יותר, מטמיעים את פונקציית הקריאה החוזרת onSubmit בקובץ feedback-and-chat.component.ts.
  4. בשלב הבא, תקשרו את הטופס.

7. הוספת טיפול באירועים לטופס

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

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

  1. ניתוח קלט של משתמשים ממבנה ה-DOM שעבר רינדור ומשויך לרכיב.
  2. מאמתים את קלט של משתמשים, כולל captcha או מנגנון דומה כדי למנוע הפצת ספאם מבוטים.
  3. שליחת אימייל לכתובת אימייל ייעודית.
  4. להציג למשתמש הודעה ידידותית.

ב-codelab הזה מטמיעים רק את הפעולות הבאות.

  1. ניתוח קלט של משתמשים ממבנה ה-DOM שעבר רינדור ומשויך לרכיב.
  2. להציג למשתמש הודעה ידידותית.

כדאי לנסות את כל ארבע הפעולות כדי לשפר את הכישורים שלכם.

הוספת המודל של טופס שליחת ההודעה לרכיב

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

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. עוברים לקובץ feedback-and-chat.component.ts.
  2. מייבאים את השירות FormBuilder ואת המודול ReactiveModule מהחבילה @angular/forms. השירות הזה מספק שיטות נוחות ליצירת אמצעי בקרה. בשלב הבא נשתמש בפונקציה inject, ולכן נצטרך לייבא אותה גם מ-@angular/core.
    import { Component, inject, OnInit } from '@angular/core';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
  3. מייבאים את המודול ReactiveFormsModule.
    imports: [CommonModule,ReactiveFormsModule],
  4. מסירים את ה-constructor הבא.
    constructor() { }
  5. מזריקים את השירות FormBuilder דרך הפונקציה inject ממש מתחת לחתימת המחלקה.
    ‫
    private formBuilder = inject(FormBuilder);
    משתמשים בשיטה group מהשירות FormBuilder כדי ליצור מודל של טופס ולאסוף את השם, כתובת האימייל וההערות של המשתמש.
  6. יוצרים את הנכס החדש contactForm ומשתמשים בשיטה group כדי להגדיר אותו למודל של טופס.מודל הטופס מכיל את השדות name, email ו-comments.
    contactForm = this.formBuilder.group({
  fullname: '',
  email: '',
  comments: ''
});
    מגדירים שיטה onSubmit לטיפול בטופס.בתרחיש אמיתי, השיטה onSubmit מאפשרת למשתמש לשלוח הודעת משוב לצלם באמצעות הודעת אימייל שנשלחת לכתובת אימייל ייעודית.ב-codelab הזה, מציגים את קלט המשתמש, משתמשים בשיטה reset כדי לאפס את הטופס ומציגים הודעת הצלחה ידידותית למשתמש.
  7. מוסיפים את השיטה החדשה onSubmit ומגדירים את המשתנה showMsg לערך true אחרי האתחול שלו.
    ‫
    showMsg: boolean = false;

onSubmit(): void {
  console.log('Your feedback has been submitted', this.contactForm.value);
  this.showMsg = true;
  this.contactForm.reset();
}
    קובץ feedback-and-chat.component.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { Component, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css']
})
export class FeedbackAndChatComponent {

  showMsg: boolean = false;
  private formBuilder = inject(FormBuilder);

  contactForm = this.formBuilder.group({
    fullname: '',
    email: '',
    comments: ''
  });

  ngOnInit(): void {
  }

  onSubmit(): void {
    console.log('Your feedback has been submitted', this.contactForm.value);
    this.showMsg = true;
    this.contactForm.reset();
  }
}
  8. שומרים את קובץ ה-feedback-and-chat.component.ts.

איך אוספים ומציגים את המודל של טופס המשוב

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל ולהריץ את האפליקציה ולפתוח שרת אינטרנט.
    ng serve
  3. שרת הפיתוח צריך לפעול ביציאה 4200.

בדפדפן, מבצעים את הפעולות הבאות.

  1. עוברים לדף הבא.
    http://localhost:4200
  2. פותחים את הכלים למפתחים ב-Chrome ובוחרים בכרטיסייה מסוף.
  3. מזינים ערכים בתיבות הטקסט שם מלא, אימייל והערות.
  4. לוחצים על הלחצן שליחה.אמורה להופיע הודעה על הצלחת הפעולה בדף.
  5. מוודאים שהערכים מוצגים בכרטיסייה Console.המסך צריך להיות זהה לצילום המסך הבא.חלון דפדפן עם המסוף שבו מוצגים נתוני JSON שהוזנו לטופסהטמעתם בהצלחה את הקוד כדי להוסיף טופס send message לממשק המשתמש של הרכיב ולנתח את קלט המשתמש.
  6. בשלב הבא, מטמיעים דיאלוג צ'אט כדי לאפשר למבקרים באפליקציה לדבר עם Jimbo. ג'ימבו הוא קואלה שממנו אפשר ללמוד עובדות מגניבות על חיות בר.

8. הוספת דו-שיח בצ'אט

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

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

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

הוספת Dialogflow Messenger לרכיב

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

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. עוברים לקובץ feedback-and-chat.component.ts.
  2. מעתיקים את הרכיב df-messenger שבדוגמת הקוד הבאה ומדביקים אותו בכל מקום בדף.
    ‫
    <df-messenger agent-id="762af666-79f7-4527-86c5-9ca06f72c317"
              chat-title="Chat with Jimbo!"
              df-cx="true"
              intent="messanger-welcome-event"
              language-code="en"
              location="us-central1"></df-messenger>
    מערכת Dialogflow יוצרת את המאפיינים של הרכיב df-messenger כשבוחרים בשילוב של Dialogflow Messenger.

    מאפיין

    פרטים

    agent-id

    מאוכלס מראש. מציין את המזהה הייחודי של נציג Dialogflow.

    chat-title

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

    df-cx

    מציין שהאינטראקציה היא עם נציג CX. מגדירים את הערך כ-true.

    Intent

    מציין את האירוע המותאם אישית שמשמש להפעלת הכוונה הראשונה כשתיבת הדו-שיח של הצ'אט נפתחת.

    language-code

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

    location

    מציינים את האזור שבו פורסים את הסוכן.

  3. שומרים את קובץ ה-feedback-and-chat.component.ts.

הצגת טופס לדוגמה לשליחת משוב

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל את האפליקציה.
    ng serve
    הקומפילציה של האפליקציה שלך אמורה להיכשל. שורת הפקודה אמורה להציג את הודעת השגיאה הבאה.הודעת שגיאה של df-messenger
  3. לאחר מכן מוסיפים סכימה מותאמת אישית.

הוספת סכימה מותאמת אישית לרכיב עצמאי

הרכיב df-messanger הוא לא רכיב מוכר. זהו רכיב אינטרנט בהתאמה אישית. הודעת השגיאה מ-Angular framework מצביעה על כך שצריך להוסיף CUSTOM_ELEMENTS_SCHEMA לשני הרכיבים העצמאיים כדי להסתיר את ההודעה.

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. עוברים לקובץ feedback-and-chat.component.ts.
  2. מייבאים את הסכימה של CUSTOM_ELEMENTS_SCHEMA.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
  3. מוסיפים את CUSTOM_ELEMENTS_SCHEMA לרשימת הסכימות.
    ‫
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    קובץ feedback-and-chat.component.ts צריך להיות זהה לדוגמת הקוד הבאה.
    import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-feedback-and-chat',
  standalone: true,
  imports: [CommonModule,ReactiveFormsModule],
  templateUrl: './feedback-and-chat.component.html',
  styleUrls: ['./feedback-and-chat.component.css'],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

...
  4. רכיב האינטרנט df-messanger דורש JavaScript שצריך להוסיף אותו רק כשמרכיב המשוב והצ'אט נטען. לשם כך, נוסיף את הקוד הרלוונטי לשיטה ngOnInit()‎, שתטען את סקריפט הצ'אט שנדרש להפעלת הרכיב .
    ngOnInit() {
    // Load the chat script, which activates the `<df-messenger>` element.
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1';
    document.head.appendChild(script);
}
  5. שומרים את קובץ ה-feedback-and-chat.component.ts.

הידור והצגה של תיבת הדו-שיח המעודכנת של הצ'אט

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל ולהריץ את האפליקציה ולפתוח שרת אינטרנט.
    ‫
    ng serve
    שרת הפיתוח צריך לפעול ביציאה 4200.

בדפדפן, מבצעים את הפעולות הבאות.

  1. עוברים לדף הבא.
    http://localhost:4200
    סמל הצ'אט אמור להופיע בחלק התחתון של הדף.
  2. לוחצים על הסמל ומקיימים אינטראקציה עם ג'ימבו.ג'ימבו מספק עובדות מעניינות על בעלי חיים.אפליקציה שבה מוצג חלון צ&#39;אט עם בוט של מסנג&#39;ר שמשיב
  3. האפליקציה פועלת באופן מלא.

9. פריסת האפליקציה ב-Google App Engine

האפליקציה פועלת באופן מקומי במחשב. בשלב הבא והאחרון של ה-codelab הזה, תצטרכו לפרוס את האפליקציה ב-Google App Engine.

מידע נוסף על Google App Engine זמין במאמר App Engine.

הגדרת הסביבה ל-Google App Engine

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

  • יצירת פרויקט בענן עם App Engine
  • הפעלתם את Cloud Build API
  • התקנתם את Google Cloud CLI

צריך לבצע את הפעולות הבאות.

  1. נכנסים לחשבון Gmail או לחשבון Google Workspace. אם אין לכם חשבון, צרו חשבון Google.
  2. כדי להשתמש במשאבי Cloud ובממשקי API של Cloud, צריך להפעיל את החיוב ב-Cloud Console. מידע נוסף זמין במאמר יצירה, שינוי וסגירה של חשבון לחיוב ב-Cloud בניהול עצמי.
  3. יוצרים פרויקט ב-Google Cloud כדי לאחסן את משאבי אפליקציית App Engine ומשאבים אחרים ב-Google Cloud. מידע נוסף זמין במאמר יצירה וניהול של פרויקטים.
  4. מפעילים את Cloud Build API במסוף Cloud. מידע נוסף מופיע במאמר הפעלת גישה ל-API.
  5. מתקינים את Google Cloud CLI ואת כלי שורת הפקודה של Google Cloud. למידע נוסף, אפשר לקרוא את המאמר בנושא התקנת ה-CLI של gcloud.
  6. מפעילים את Google Cloud CLI ומוודאים שה-CLI של gcloud מוגדר לשימוש בפרויקט Google Cloud שבו רוצים לבצע פריסה. מידע נוסף זמין במאמר אתחול ה-CLI של gcloud.

פיתוח אפליקציה נפרדת

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את פקודת Angular הבאה כדי לקמפל וליצור גרסה של האפליקציה שמוכנה לייצור.
    ng build

הגרסה של האפליקציה שמוכנה לייצור נוצרת בספריית המשנה dist של ספריית הפרויקט photo-gallery-app.

10. פריסת האפליקציה באמצעות מסגרת Express.js

קוד לדוגמה ב-Codelab הזה משתמש ב-framework‏ Express.js כדי לטפל בבקשות HTTP. אתם יכולים להשתמש ב-framework האינטרנטי המועדף עליכם.

התקנה של Express.js framework

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

  1. מזינים את הפקודה הבאה כדי להתקין את המסגרת Express.js.
    npm install express --save

הגדרת שרת האינטרנט

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. יוצרים קובץ server.js חדש.
  3. מעתיקים ומדביקים את הקוד הבא.
    const express = require("express");
const path = require("path");

// Running PORT is set automatically by App Engine
const port = process.env.PORT || 3000;
const app = express();

const publicPath = path.join(__dirname, "/dist/photo-gallery-app");

app.use(express.static(publicPath));

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname + "/dist/photo-gallery-app/index.html"));
});

app.listen(port, () => {
  console.log(`Server is up on ${port}`);
});
  4. שומרים את קובץ ה-server.js.

צירוף שרת האינטרנט

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. פותחים את הקובץ package.json.
  3. משנים את פקודת ההתחלה כדי להריץ את הצומת בקובץ server.js.
    ‫
    "name": "photo-gallery-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
    המאפיין start הוא נקודת הכניסה לאפליקציה.
  4. שומרים את קובץ ה-package.json.

הגדרת App Engine

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. יוצרים קובץ app.yaml חדש.
  3. מעתיקים ומדביקים את הקוד הבא.
    runtime: nodejs16
service: default
    המידע בקובץ app.yaml מציין את ההגדרה של App Engine. צריך לציין רק את זמן הריצה והשירות.
  4. שומרים את קובץ ה-app.yaml.

עדכון רשימת קטעי הקוד להתעלמות של gcloud

כדי לוודא שהספרייה node_modules לא תועלה, יוצרים קובץ .gcloudignore. הקבצים שמופיעים בקובץ .gcloudignore לא מועלים.

בעורך הקוד, מבצעים את הפעולות הבאות.

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. יוצרים קובץ .gcloudignore חדש.
  3. מעתיקים ומדביקים את הקוד הבא.
    # This file specifies files that are *not* uploaded to Google Cloud
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore

# Node.js dependencies:
node_modules/
  4. שומרים את קובץ ה-.gcloudignore.

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

לפני שמפעילים את האפליקציה, צריך לאתחל אותה באמצעות הפרויקט ולבחור אזור משויך.

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את הפקודה הבאה כדי לאתחל את האפליקציה.
    gcloud app create --project=[YOUR_PROJECT_ID]
  3. בבקשה, בוחרים את האזור שבו רוצים למקם את אפליקציית App Engine.

פריסת האפליקציה

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

  1. מנווטים לספריית הפרויקט החדשה photo-gallery-app.
  2. מזינים את הפקודה הבאה כדי לפרוס את האפליקציה.
    gcloud app deploy --project=[YOUR_PROJECT_ID]
  3. בבקשה לאישור, מאשרים את הפעולה.אחרי שפקודת הפריסה של gcloud מסתיימת בהצלחה, מוצגת כתובת URL לגישה לאפליקציה.
  4. מזינים את הפקודה הבאה כדי לפתוח כרטיסייה חדשה בדפדפן.
    gcloud app browse
    פלט המסוף של gcloud app deploy והזנת glcoud app browse

11. מזל טוב

מעולה. יצרתם גלריית תמונות לדוגמה באמצעות Angular v14 ופרסתם אותה בהצלחה ב-App Engine.

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

השלבים הבאים

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

  • הטופס לא שולח משוב בפועל, צריך לשכתב אותו כדי להוסיף את הלוגיקה העסקית לשליחת אימייל.
  • בתרחיש מהעולם האמיתי, כדאי לאמת את קלט של משתמשים ולכלול Captcha או מנגנון דומה כדי למנוע מבוטים להפיץ ספאם
  • יצירת סוכן חדש והסבר על תכנון זרימות שיחה ב-Dialogflow CX

תמשיכו להתנסות עם מסגרת Angular ותהנו.

ניקוי ומחיקה של הפרויקט בענן

אתם יכולים להשאיר את הפרויקט ב-Cloud או למחוק אותו כדי להפסיק את החיוב על כל המשאבים שנעשה בהם שימוש בפרויקט.

בדפדפן, מבצעים את הפעולות הבאות.

  1. נכנסים לחשבון Gmail או לחשבון Google Workspace.
  2. במסוף Google Cloud, לוחצים על הלחצן IAM & Admin Settings (הגדרות IAM ואדמין).
  3. בדף IAM ואדמין, בוחרים בכרטיסייה ניהול משאבים.
  4. בדף Manage resources, עוברים לפרויקט שרוצים למחוק ובוחרים אותו. לוחצים על הלחצן Delete כדי לפתוח חלון דו-שיח.
  5. בתיבת הדו-שיח, מזינים את מזהה הפרויקט ולוחצים על הלחצן Shut down כדי למחוק את הפרויקט.