תחילת העבודה עם Angular Signals

1. לפני שמתחילים

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

מה תפַתחו

• תלמדו על שלושת הפרימיטיביים התגובתיים שנוספו עם אותות זוויתיים: signal(), computed() ו-effect().
• שימוש באותות זוויתיים כדי להפעיל משחק Angular Cipher. הצפנה הם מערכות להצפנה ולפענוח של נתונים. במשחק הזה, המשתמשים יכולים לפענח הודעה סודית על ידי גרירה ושחרור של רמזים שיעזרו להם לפתור הצפנה, להתאים אישית את ההודעה ולשתף את כתובת ה-URL כדי לשלוח הודעות סודיות לחברים.

דרישות מוקדמות

• הידע ב-Agular וב-Typescript
• מומלץ: כדאי לצפות בסרטון חשיבה מחדש על תגובתיות עם אותות כדי ללמוד על ספריית האותות של Angular

2. קבל את הקוד

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

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

כדי להתחיל, צריך לפתוח את הקישור ל-Stackblitz בדפדפן האינטרנט המועדף עליכם:

1. פותחים כרטיסייה חדשה בדפדפן ועוברים לכתובת https://stackblitz.com/edit/io-signals-codelab-starter?file=src%2Fcipher%2Fservice.cipher.ts,src%2Fsecret-message%2Fservice.message.ts&service.massage.ts.
2. פוצלו את Stackblitz כדי ליצור סביבת עבודה משלכם שניתנת לעריכה. Stackblitz אמור להריץ את האפליקציה באופן אוטומטי, ואתם מוכנים להתחיל!

חלופה: שכפול המאגר והצגת האפליקציה

שימוש ב-VSCode או בסביבת פיתוח משולבת (IDE) מקומית הוא שיטה חלופית לעבודה באמצעות ה-Codelab הזה:

1. פותחים כרטיסייה חדשה בדפדפן ועוברים אל https://github.com/angular/codelabs/tree/signals-get-started.
2. פיצול ושכפול המאגר, ושימוש בפקודה cd codelabs/ כדי לעבור למאגר.
3. כדי לבדוק את הסתעפות הקוד לתחילת הפעולה, משתמשים בפקודה git checkout signals-get-started.
4. פותחים את הקוד ב-VSCode או בסביבת הפיתוח המשולבת (IDE) המועדפת.
5. כדי להתקין את יחסי התלות שנדרשים להפעלת השרת, משתמשים בפקודה npm install.
6. כדי להפעיל את השרת, משתמשים בפקודה ng serve.
7. פותחים כרטיסייה בדפדפן אל http://localhost:4200.

3. הגדירו בסיס

נקודת ההתחלה שלך היא משחק Angular Cipher, אבל הוא עדיין לא פועל. Angular Signals יפעילו את הפונקציונליות של המשחק.

כדי להתחיל, צריך לקרוא את הגרסה הסופית של מה שמתכננים לפתח: Angular Signals Cypher.

1. לראות את ההודעה עם הקוד במסך.
2. גוררים ומשחררים לחצן של אות בלוח המקשים כדי לפתור את ההצפנה של ההודעה הסודית.
3. אם ההודעה הצליחה, תוכלו לראות איך היא מתעדכנת כדי לפענח חלק גדול יותר מההודעה הסודית.
4. לוחצים על Customize כדי לשנות את השולח ואת ההודעה, ואז לוחצים על Create & מעתיקים את כתובת ה-URL כדי לראות את הערכים על המסך ואת שינוי כתובת ה-URL.
5. בונוס: מעתיקים ומדביקים את כתובת ה-URL בכרטיסייה חדשה, או משתפים עם חבר ובודקים איך השולח וההודעה נשמרים בכתובת ה-URL.

4. הגדרת האות הראשון()

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

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

המרה של superSecretMessage ל-signal()

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

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

כדי להגדיר את האות הראשון, צריך לבצע את השלבים הבאים מתחת לתגובה TODO(1): Define your first signal() בכל קובץ:

1. בקובץ service.message.ts, משתמשים בספריית האותות כדי להפעיל מחדש את superSecretMessage:

src/app/secret-message/service.message.ts

superSecretMessage = signal(
  'Angular Signals are in developer preview in v16 today!'
);

הפעולה הזו תבקש באופן אוטומטי לייבא את signal מ-@angular/core. אם תרעננו את הדף, סביר להניח שתיתקלו בשגיאות במקומות שבהם התייחסתם בעבר אל superSecretMessage. הסיבה לכך היא ששינית את הסוג של superSecretMessage מ'string' ל'SettableSignal<string>'. כדי לפתור את הבעיה, אפשר לשנות את כל ההפניות של superSecretMessage כך שישתמשו ב-Signals API. בכל מקום שבו קוראים את הערך, צריך לקרוא למקלט האות superSecretMessage(). בכל מקום שבו כותבים את הערך, צריך להשתמש ב-API .set ב-SettableSignal כדי להגדיר את הערך החדש להודעה.

2. בקבצים secret-message.ts ו-service.message.ts, מעדכנים את כל ההפניות של superSecretMessage ל-superSecretMessage():

src/app/secret-message/secret-message.ts

// Before
this.messages.superSecretMessage
this.messages.superSecretMessage = message;

// After
this.messages.superSecretMessage()
this.messages.superSecretMessage.set(message);

src/app/secret-message/service.message.ts

// Before
this.superSecretMessage

// After
this.superSecretMessage()

בחינת שני האותות הנוספים

• שימו לב שיש באפליקציה שני אותות נוספים:

src/app/cipher/service.cipher.ts

cipher = signal(this.createNewCipherKey());
decodedCipher = signal<CipherKey[]>([]);

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

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

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

אימות השינויים

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

5. מגדירים את הפונקציה המחושבת הראשונה

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

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

המרה של solvedMessage ל-computed()

הפונקציה solvedMessage מתרגם את הערך secretMessage ממקודד למפוענח באמצעות האות decodedCipher.

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

נכון לעכשיו, solvedMessage לא מתעדכן כשמשנים את secretMessage, decodedCipher או superSecretMessage. לכן לא מוצגים עדכונים במסך כשהנגן פותר את ההצפנה.

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

כדי להמיר את solvedMessage ל-computed(), צריך לבצע את השלבים הבאים מתחת לתגובה TODO(2): Define your first computed() בכל קובץ:

1. בקובץ service.message.ts, משתמשים בספריית האותות כדי להפעיל מחדש את solvedMessage:

src/app/secret-message/service.message.ts

solvedMessage = computed(() =>
  this.translateMessage(
    this.secretMessage(), 
    this.cipher.decodedCipher()
  )
);

הפעולה הזו תבקש באופן אוטומטי לייבא את computed מ-@angular/core. אם תרעננו את הדף, סביר להניח שתיתקלו בשגיאות במקומות שבהם התייחסתם בעבר אל solvedMessage. הסיבה לכך היא ששינית את הסוג של superSecretMessage מ'string' ל'Signal<string>', פונקציה. כדי לפתור את הבעיה, צריך לשנות את כל ההפניות של solvedMessage ל-solvedMessage().

2. בקובץ secret-message.ts, מעדכנים את כל ההפניות של solvedMessage ל-solvedMessage():

src/app/secret-message/secret-message.ts

// Before
<span *ngFor="let char of this.messages.solvedMessage.split(''); index as i;" [class.unsolved]="this.messages.solvedMessage[i] !== this.messages.superSecretMessage()[i]" >{{ char }}</span>

// After
<span *ngFor="let char of this.messages.solvedMessage().split(''); index as i;" [class.unsolved]="this.messages.solvedMessage()[i] !== this.messages.superSecretMessage()[i]" >{{ char }}</span>

חשוב לשים לב שבניגוד ל-superSecretMessage, solvedMessage אינו SettableSignal — אי אפשר לשנות את הערך שלו ישירות. במקום זאת, הערך מתעדכן בכל פעם שאחד מהאותות של התלות (secretMessage ו-decodedCipher) מתעדכנים.

שתי פונקציות נוספות של computed()

• שימו לב שיש באפליקציה שני ערכים אחרים שמחושבים:

src/app/secret-message/service.message.ts

secretMessage = computed(() => 
  this.translateMessage(
    this.superSecretMessage(),
    this.cipher.cipher()
  )
);

src/app/cipher/service.cipher.ts

unsolvedAlphabet = computed(() =>
  ALPHABET.filter(
    (letter) => !this.decodedCipher().find((guess) => guess.value === letter)
  )
);

הפונקציה MessageService מגדירה ערך secretMessage שמחושב, superSecretMessage עם קידוד של רכיב cipher שהשחקנים פועלים לפתור.

בCipherService מוגדרת unsolvedAlphabet שמחושב, רשימה של כל האותיות שהנגן לא פתר, שנגזרת מרשימת מפתחות ההצפנה שנפתרו ב-decodedCipher.

אימות השינויים

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

1. כדי לפתור את ההצפנה של ההודעה הסודית, עליך לגרור ולשחרר LetterGuessComponent ב-LetterKeyComponent ב-CipherComponent.
2. אפשר לראות איך SecretMessageComponent מתעדכן ככל שמפענחים יותר הודעות סודיות.
3. לוחצים על Customize כדי לשנות את השולח ואת ההודעה, ואז לוחצים על Create & מעתיקים את כתובת ה-URL כדי לראות את הערכים על המסך ואת שינוי כתובת ה-URL.
4. בונוס: מעתיקים ומדביקים את כתובת ה-URL בכרטיסייה חדשה, או משתפים עם חבר ובודקים איך השולח וההודעה נשמרים בכתובת ה-URL.

6. הוספת האפקט הראשון()

יכול להיות שיהיו מקרים שבהם תרצו שמשהו יתרחש כשלאות יש ערך חדש. באמצעות effect() אפשר לתזמן ולהריץ פונקציית handler בתגובה לשינויים באותות.

מוסיפים קונפטי אחרי פתרון ההצפנה

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

כדי להוסיף קונפטי, מבצעים את השלבים הבאים מתחת לתגובה TODO(3): Add your first effect():

1. בקובץ cipher.ts, מתזמנים אפקט להוספת קונפטי אחרי פענוח ההודעה:

src/app/cipher/cipher.ts

import * as confetti from 'canvas-confetti';

ngOnInit(): void {
  ...

  effect(() => {
    if (this.messages.superSecretMessage() === this.messages.solvedMessage()) {
      var confettiCanvas = document.getElementById('confetti-canvas');
      confetti.create()(confettiCanvas, { particleCount: 100 });
    }
  });
}

חשוב לשים לב שההשפעה הזו תלויה באות ובערך שמחושב: this.messages.superSecretMessage() ו-this.messages.solvedMessage().

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

אימות השינויים

• כדאי לנסות לפתור את ההצפנה (רמז: אפשר לשנות את ההודעה למשהו קצר כדי לבדוק אותה מהר יותר). קונפטי קופץ לברך אותך על ה-effect() הראשונים שלך!

7. מעולה!

הצופן האנגלי שלך מוכן עכשיו לפענוח ולשיתוף של הודעות סודיות! יש לך הודעה לצוות Angular? כדאי לתייג את הרשתות החברתיות שלנו בכתובת @Angular כדי שנוכל לפענח את התוכן שלהן! 🎉

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

מידע נוסף

כדאי לנסות את ה-Codelabs הבאים:

• שימוש ברכיבים עצמאיים
• יצירת אפליקציית אינטרנט באמצעות Angular ו-Firebase

מומלץ לקרוא את החומרים הבאים:

• Angular.io
• ReThinking Reactivity with Signals (Google I/O 2023)
• What's new in Angular (מה חדש ב-Agular) (Google I/O 2023)