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

1. מבוא

מה תפַתחו

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

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

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

זו האפליקציה שאתם מפתחים היום.

הגשת בקשה שהושלמה

מה תלמדו

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

מה צריך להכין

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

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

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

כדי להשלים את ה-Codelab הזה, עליכם להתקין את התוכנה הבאה במחשב המקומי.

  • גרסת 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 או עורך קוד אחר לבחירתכם.

התקנת ה-CLI של Angular

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

npm install --global @angular/cli

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

ng version

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש ב-shoestrapApplication API

כדי לאפשר לאפליקציה לפעול בלי NgModule, צריך להשתמש ברכיב עצמאי כרכיב ברמה הבסיסית (root) באמצעות ה-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. עליך להסיר את קוד האתחול הבא כי כבר אין לך מודול אפליקציה.
    platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
    הקובץ main.ts צריך להתאים לדוגמת הקוד הבאה.
    import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

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

הוספת הרכיב shoestrapApplication

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

  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));

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

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

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

  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. המשך את ה-Codelab הזה כדי לקבל מידע נוסף על Jibo.

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

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

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

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

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

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

    חלק

    פרטים

    ng

    מגדיר את כל הפקודות של Angular CLI ל-Angular framework

    generate component

    יצירת הפיגועים עבור רכיב חדש

    feedback-and-chat

    שם הרכיב

    --standalone

    כתוב ל-Angular framework כדי ליצור רכיב עצמאי

ייבוא של הרכיב הנפרד החדש

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

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

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

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

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

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

  1. ניווט לדף הבא.
    http://localhost:4200
  2. פותחים את הכלים למפתחים ב-Chrome ובוחרים בכרטיסייה רשת.
  3. יש לרענן את הדף כדי להציג מספר קבצים, אבל לא את הרכיב feedback-and-chat.המסך אמור להתאים לצילום המסך הבא.צילום מסך של אפליקציה עם חלונית של כלי הפיתוח ל-Chrome
  4. לוחצים על הלחצן למידע נוסף על האנשים האלה! כדי לנתב את הרכיב העצמאי.היומן אמור לציין שהרכיב נטען רק אחרי שלוחצים על הנתב המלא. גוללים למטה לסוף הרשימה כדי לבדוק שהרכיב נטען. המסך שלך צריך להתאים לצילום המסך הבא.צילום מסך של האפליקציה עם חלונית פיתוח פתוחה של 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. לוחצים על הלחצן Submit (שליחה). הודעה על הצלחה אמורה להופיע בדף.
  5. צריך לאמת את הערכים שמוצגים בכרטיסייה מסוף.המסך אמור להתאים לצילום המסך הבא.חלון דפדפן עם המסוף שמוצגים בו נתוני JSON שהוזנו בטופסהטמעת בהצלחה את הקוד כדי להוסיף טופס שליחת הודעה לממשק המשתמש של הרכיב ולנתח את קלט המשתמש.
  6. בשלב הבא, אתם מטמיעים תיבת דו-שיח של צ'אט כדי לאפשר למבקרים באפליקציה לדבר עם יוסי. ג'ימבו הוא קואלה, וממנה תוכלו ללמוד כמה עובדות מעניינות על חיות הבר.

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

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

כבר נוצר סוכן וירטואלי לדוגמה לשימושך. מה שצריך לעשות בשיעור ה-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.

    שם הצ'אט

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

    df-cx

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

    Intent

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

    קוד שפה

    מציין את קוד השפה שמוגדר כברירת מחדל ל-Intent הראשון.

    location

    ההגדרה קובעת את האזור שבו פורסים את הנציג.

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

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

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

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

הוספת סכימה מותאמת אישית לרכיב הנפרד

הרכיב df-messanger אינו רכיב מוכר. זהו רכיב אינטרנט מותאם אישית. לפי הודעת השגיאה מ-Agular 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. בוחרים את הסמל ומקיימים אינטראקציה עם Jibo.Jimbo מספקות עובדות מעניינות על בעלי החיים.אפליקציה שמציגה חלון צ&#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. כדי שתוכלו להשתמש במשאבים ובממשקי API של Cloud, תצטרכו להפעיל את החיוב במסוף Cloud. מידע נוסף זמין במאמר יצירה, שינוי וסגירה של חשבון לחיוב ב-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 ומוודאים ש-gcloud מוגדר לשימוש בפרויקט Google Cloud שבו רוצים לפרוס. למידע נוסף, אפשר לקרוא את המאמר אתחול ה-CLI של gcloud.

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

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

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

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

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

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

התקנת framework של Express.js

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

  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 וכניסה אליה ב-glcoud גלישה

11. מזל טוב

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

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

השלבים הבאים

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

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

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

ניקוי ומחיקה של פרויקט ב-Cloud

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

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

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