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

1. מבוא

מה תפַתחו

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

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

כל ההפניות ל-Angular framework ול-Agular CLI מבוססות על Angular v14. רכיבים עצמאיים הם תכונה בתצוגה מקדימה של Angular v14, לכן צריך ליצור אפליקציה חדשה לגמרי באמצעות Angular v14. רכיבים עצמאיים מספקים דרך פשוטה לפיתוח אפליקציות ב-Agular. רכיבים עצמאיים, הוראות נפרדות וצינורות עיבוד נתונים שעומדים בפני עצמם נועדו לשפר את חוויית הכתיבה על ידי צמצום הצורך ב-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. איך יוצרים ענף (fork) ומשכפלים מאגר.
    • ממשק שורת הפקודה (CLI), כמו bash או zsh. איך לנווט בספריות ולהריץ פקודות.

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

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

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

  • גרסת LTS פעילה או גרסת LTS לתחזוקה של Node.js. משמש להתקנת Angular framework ו-Agular 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

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

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

להוריד את קוד המקור:

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

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

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

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

משתמשים ב-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, צריך להשתמש ברכיב עצמאי כרכיב הבסיס באמצעות ה-API של bootstrapApplication.

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

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

  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 כדי להדר ולהפעיל את האפליקציה ולפתוח שרת אינטרנט. כדי להסיר שגיאות הידור, יכול להיות שיהיה צורך לסגור את סביבת הפיתוח המשולבת (IDE) לפני הרצת האפליקציה.
    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. בשלב הבא, יוצרים רכיב עצמאי חדש כדי לשלוח משוב ולשוחח בצ'אט עם Jibo. בהמשך הקודלהב הזה תלמדו עוד על Jimbo.

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

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

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

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

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

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

    חלק

    פרטים

    ng

    הגדרת כל פקודות ה-CLI של Angular למסגרת 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 ואת המודול 'מסלולים'. Angular v 14.2.0 כוללת שיטת ProvideRouter חדשה שמאפשרת לנו להגדיר קבוצת מסלולים לאפליקציה.
    import { provideRouter, Routes } from '@angular/router';
  4. מעתיקים ומדביקים את קטע הקוד הבא בין ה-import לבין משפט 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 מספק שיטות נוחות ליצירת רכיב UI.

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

  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. לוחצים על הלחצן Submit (שליחה). הודעה על הצלחה אמורה להופיע בדף.
  5. מוודאים שהערכים מוצגים בכרטיסייה Console.המסך אמור להיראות כמו בצילום המסך הבא.חלון דפדפן עם המסוף שמוצגים בו נתוני JSON שהוזנו בטופסהטמעתם בהצלחה את הקוד להוספת טופס send message לממשק המשתמש של הרכיב ולניתוח הקלט של המשתמש.
  6. בשלב הבא, מוטמעת שיחה בצ'אט כדי לאפשר למבקרים באפליקציה לדבר עם Jimbo. ג'ימבו הוא קואלה שמלמד עובדות מגניבות על חיות בר.

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

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

כבר נוצר סוכן וירטואלי לדוגמה לשימוש שלכם. מה שצריך לעשות בשיעור ה-Lab הזה הוא להוסיף תיבת דו-שיח בצ'אט לרכיב העצמאי, כדי לאפשר למשתמשים באפליקציה ליצור אינטראקציה עם הבוט. כדי לעמוד בדרישות האלה, תצטרכו להשתמש ב-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.

    מאפיין

    פרטים

    מזהה נציג

    השדה מאוכלס מראש. מזהה ייחודי של נציג 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 מוצגת המלצה להוסיף 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. לוחצים על הסמל ומקיימים אינטראקציה עם Jimbo.Jimbo מספק עובדות מעניינות על בעלי חיים.אפליקציה שבה מוצג חלון צ&#39;אט עם תגובה של בוט ב-Messenger
  3. האפליקציה פועלת באופן מלא.

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

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

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

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

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

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

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

  1. נכנסים לחשבון Gmail או חשבון Google Workspace. אם אין לכם חשבון Google, יוצרים חשבון Google.
  2. מפעילים את החיוב במסוף Cloud כדי שתוכלו להשתמש במשאבים ובממשקי ה-API של Cloud. מידע נוסף זמין במאמר יצירה, שינוי וסגירה של חשבון לחיוב ב-Cloud בניהול עצמי.
  3. יוצרים פרויקט ב-Google Cloud שיכיל את משאבי האפליקציה של App Engine ומשאבים אחרים ב-Google Cloud. מידע נוסף זמין במאמר יצירה וניהול של פרויקטים.
  4. מפעילים את Cloud Build API במסוף Cloud. מידע נוסף זמין במאמר הפעלת הגישה ל-API.
  5. מתקינים את Google Cloud CLI ואת כלי שורת הפקודה gcloud. מידע נוסף זמין במאמר התקנת ה-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 הזה נעשה שימוש במסגרת Express.js כדי לטפל בבקשות HTTP. אפשר להשתמש בסביבת ה-Web המועדפת עליכם.

התקנת מסגרת Express.js

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

  1. כדי להתקין את ה-framework של 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 deployment תושלם, תוצג כתובת 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

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

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

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