Angular सिग्नल के साथ शुरुआत करना

1. शुरू करने से पहले

Angular Signals, Angular में तीन रिएक्टिव प्रिमिटिव पेश करते हैं. इससे डेवलपमेंट आसान हो जाता है और डिफ़ॉल्ट रूप से तेज़ी से ऐप्लिकेशन बनाने में मदद मिलती है.

आपको क्या बनाने को मिलेगा

• आपको Angular Signals के साथ पेश की गई तीन रिएक्टिव प्रिमिटिव के बारे में जानकारी मिलती है: signal(), computed(), और effect().
• Angular Cipher गेम को बेहतर बनाने के लिए, Angular Signals का इस्तेमाल करें. साइफ़र, डेटा को एन्क्रिप्ट (सुरक्षित) और डिक्रिप्ट करने के सिस्टम होते हैं. इस गेम में, उपयोगकर्ता किसी साइफ़र को हल करने के लिए सुरागों को खींचकर छोड़ सकते हैं. इससे वे किसी सीक्रेट मैसेज को डिकोड कर सकते हैं. साथ ही, मैसेज को पसंद के मुताबिक बना सकते हैं और दोस्तों को सीक्रेट मैसेज भेजने के लिए यूआरएल शेयर कर सकते हैं.

ज़रूरी शर्तें

• Angular और Typescript की जानकारी
• सुझाया गया: Angular Signals लाइब्रेरी के बारे में जानने के लिए, Rethinking Reactivity with Signals देखें

2. कोड प्राप्त करें

इस प्रोजेक्ट के लिए ज़रूरी सभी चीज़ें, Stackblitz में मौजूद हैं. इस कोडलैब को पूरा करने के लिए, Stackblitz का इस्तेमाल करने का सुझाव दिया जाता है. इसके अलावा, कोड को क्लोन करें और इसे अपने पसंदीदा डेवलपमेंट एनवायरमेंट में खोलें.

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 या लोकल आईडीई का इस्तेमाल करके, इस कोडलैब को पूरा किया जा सकता है:

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. सेंडर और मैसेज बदलने के लिए, पसंद के मुताबिक बनाएं पर क्लिक करें. इसके बाद, स्क्रीन पर वैल्यू और यूआरएल में हुए बदलाव देखने के लिए, यूआरएल बनाएं और कॉपी करें पर क्लिक करें.
5. बोनस: यूआरएल को कॉपी करके नए टैब में चिपकाएं या किसी दोस्त के साथ शेयर करें. देखें कि यूआरएल में भेजने वाले का नाम और मैसेज कैसे सेव होता है.

4. अपना पहला signal() तय करना

सिग्नल एक ऐसी वैल्यू होती है जो Angular को यह बताती है कि इसमें कब बदलाव हुआ है. कुछ सिग्नल को सीधे तौर पर बदला जा सकता है, जबकि अन्य सिग्नल अपनी वैल्यू की गिनती, दूसरे सिग्नल की वैल्यू से करते हैं. सिग्नल मिलकर, डिपेंडेंसी का डायरेक्टेड ग्राफ़ बनाते हैं. इससे यह पता चलता है कि आपके ऐप्लिकेशन में डेटा कैसे फ़्लो होता है.

सिग्नल से मिलने वाली सूचनाओं का इस्तेमाल करके, Angular यह पता लगा सकता है कि किन कॉम्पोनेंट में बदलाव का पता लगाना है या आपके तय किए गए इफ़ेक्ट फ़ंक्शन को लागू करना है.

superSecretMessage को signal() में बदलना

superSecretMessage, MessageService में मौजूद एक वैल्यू है. यह उस सीक्रेट मैसेज के बारे में बताती है जिसे प्लेयर डिकोड करता है. फ़िलहाल, वैल्यू में हुए बदलावों की सूचना ऐप्लिकेशन को नहीं मिलती है. इसलिए, पसंद के मुताबिक बनाएं बटन काम नहीं कर रहा है. सिग्नल की मदद से, इस समस्या को हल किया जा सकता है.

superSecretMessage को सिग्नल बनाकर, ऐप्लिकेशन के उन हिस्सों को सूचना दी जा सकती है जिन्हें यह जानना ज़रूरी है कि मैसेज कब बदला है. डायलॉग में मैसेज को पसंद के मुताबिक बनाने पर, आपको सिग्नल सेट करना होगा. इससे ऐप्लिकेशन के बाकी हिस्सों में नया मैसेज अपडेट हो जाएगा.

अपने पहले सिग्नल को तय करने के लिए, हर फ़ाइल में TODO(1): Define your first signal() कमेंट के नीचे दिए गए चरण पूरे करें:

1. service.message.ts फ़ाइल में, Signals लाइब्रेरी का इस्तेमाल करके superSecretMessage को रिएक्टिव बनाएं:

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

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

इससे आपको @angular/core से signal इंपोर्ट करने के लिए अपने-आप कहा जाता है. पेज को रीफ़्रेश करने पर, आपको उन जगहों पर गड़बड़ियां दिख सकती हैं जहां आपने पहले superSecretMessage का इस्तेमाल किया था. ऐसा इसलिए है, क्योंकि आपने superSecretMessage के टाइप को string से बदलकर SettableSignal<string> कर दिया है. इस समस्या को ठीक करने के लिए, superSecretMessage के सभी रेफ़रंस को बदलकर Signals API का इस्तेमाल करें. जहां भी आपको वैल्यू पढ़नी हो वहां सिग्नल गेटर superSecretMessage() को कॉल करें. इसके बाद, जहां भी आपको वैल्यू लिखनी है वहां .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 की Signals लाइब्रेरी के डिज़ाइन की एक यूनीक और बेहतरीन विशेषता यह है कि इसमें हर जगह रिएक्टिविटी का इस्तेमाल किया जा सकता है. आपने ऐप्लिकेशन की सेवाओं में सिग्नल को एक बार तय किया है. इनका इस्तेमाल किसी टेंप्लेट, कॉम्पोनेंट, पाइप, अन्य सेवाओं या ऐप्लिकेशन कोड लिखने की किसी भी जगह पर किया जा सकता है. ये किसी कॉम्पोनेंट के स्कोप तक सीमित नहीं होते.

बदलावों की पुष्टि करें

• ऐप्लिकेशन के काम करने से पहले, आपको एक और चरण पूरा करना होगा. फ़िलहाल, अपने ऐप्लिकेशन के अलग-अलग हिस्सों में console.log() जोड़कर देखें. इससे आपको पता चलेगा कि आपका नया superSecretMessage कैसे सेट किया जा रहा है.

5. अपना पहला computed() तय करना

कई बार, आपको मौजूदा वैल्यू से स्थिति का पता लगाना पड़ सकता है. बेहतर होगा कि जब निर्भर वैल्यू में बदलाव हो, तब डिराइव की गई स्थिति अपडेट हो जाए.

computed() की मदद से, ऐसे सिग्नल को साफ़ तौर पर दिखाया जा सकता है जिसकी वैल्यू अन्य सिग्नल से मिलती है.

solvedMessage को computed() में बदलना

solvedMessage, decodedCipher सिग्नल का इस्तेमाल करके, secretMessage की वैल्यू को एन्कोड किए गए फ़ॉर्मैट से डिकोड किए गए फ़ॉर्मैट में बदलता है.

यह इसलिए भी खास है, क्योंकि आपको पता चलता है कि किसी कंप्यूटेड वैल्यू को दूसरी कंप्यूटेड वैल्यू के आधार पर निकाला जा रहा है. इसलिए, जब भी मैप किए गए रिएक्टिव कॉन्टेक्स्ट में कोई सिग्नल बदलता है, तो डिपेंडेंसी को इसकी सूचना मिल जाती है.

फ़िलहाल, secretMessage, decodedCipher या superSecretMessage में बदलाव करने पर, solvedMessage अपडेट नहीं होता है. इसलिए, जब प्लेयर सिफ़र को हल करता है, तब आपको स्क्रीन पर अपडेट नहीं दिखते.

solvedMessage को कंप्यूटेड बनाकर, एक रिएक्टिव कॉन्टेक्स्ट बनाया जाता है. इससे मैसेज को अपडेट करने या सिफ़र को हल करने पर, ट्रैक की गई डिपेंडेंसी से स्टेट अपडेट किया जा सकता है.

solvedMessage को computed() में बदलने के लिए, हर फ़ाइल में मौजूद TODO(2): Define your first computed() टिप्पणी में जाकर यह तरीका अपनाएं:

1. service.message.ts फ़ाइल में, Signals लाइब्रेरी का इस्तेमाल करके solvedMessage को रिएक्टिव बनाएं:

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

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

इससे आपको @angular/core से computed इंपोर्ट करने के लिए अपने-आप कहा जाता है. पेज को रीफ़्रेश करने पर, आपको उन जगहों पर गड़बड़ियां दिख सकती हैं जहां आपने पहले 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 के तौर पर तय किया जाता है. इसे cipher के ज़रिए कोड में बदला जाता है. खिलाड़ियों को इसे हल करना होता है.superSecretMessage

CipherService, unsolvedAlphabet को तय करता है. यह उन सभी अक्षरों की सूची होती है जिन्हें खिलाड़ी ने हल नहीं किया है. यह सूची, decodedCipher में हल की गई सिफ़र कुंजियों की सूची से मिलती है.

बदलावों की पुष्टि करें

अब superSecretMessage एक सिग्नल है और solvedMessage एक कंप्यूटेड है. इसलिए, ऐप्लिकेशन को काम करना चाहिए! गेम की सुविधाओं को आज़माएं:

1. सिफ़र को हल करने और सीक्रेट मैसेज को डिकोड करने के लिए, अपने CipherComponent में मौजूद किसी LetterKeyComponent को खींचकर किसी LetterKeyComponent पर छोड़ें.LetterGuessComponent
2. देखें कि सीक्रेट मैसेज को डिकोड करने पर, SecretMessageComponent कैसे अपडेट होता है.
3. सेंडर और मैसेज बदलने के लिए, पसंद के मुताबिक बनाएं पर क्लिक करें. इसके बाद, स्क्रीन पर वैल्यू और यूआरएल में हुए बदलाव देखने के लिए, यूआरएल बनाएं और कॉपी करें पर क्लिक करें.
4. बोनस: यूआरएल को कॉपी करके नए टैब में चिपकाएं या किसी दोस्त के साथ शेयर करें. देखें कि यूआरएल में भेजने वाले का नाम और मैसेज कैसे सेव होता है.

6. अपना पहला इफ़ेक्ट() जोड़ना

कभी-कभी ऐसा हो सकता है कि आपको किसी सिग्नल की नई वैल्यू मिलने पर, कोई कार्रवाई करनी हो. effect() की मदद से, सिग्नल में बदलाव होने पर हैंडलर फ़ंक्शन को शेड्यूल और चलाया जा सकता है.

सिफ़र हल होने पर कंफ़ेटी जोड़ना

ऐप्लिकेशन के काम करने के बाद, अब इसमें कुछ मज़ेदार चीज़ें जोड़ी जा सकती हैं. जैसे, जब सिफ़र हल हो जाए और सीक्रेट मैसेज डिकोड हो जाए, तब कंफ़ेटी जोड़ना.

कन्फ़ेट्टी जोड़ने के लिए, 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 Cipher, सीक्रेट मैसेज को डिकोड करने और शेयर करने के लिए तैयार है! क्या आपको Angular टीम के लिए कोई मैसेज भेजना है? हमें @Angular पर टैग करें, ताकि हम इसे डिकोड कर सकें! 🎉

अब आपके पास Angular टूलबॉक्स में तीन नई रिएक्टिव प्रिमिटिव हैं. इनकी मदद से, डेवलपमेंट को आसान बनाया जा सकता है. साथ ही, डिफ़ॉल्ट रूप से तेज़ी से काम करने वाले ऐप्लिकेशन बनाए जा सकते हैं.

ज़्यादा जानें

इन कोडलैब को आज़माएँ:

• स्टैंडअलोन कॉम्पोनेंट का इस्तेमाल शुरू करना
• Angular और Firebase की मदद से वेब ऐप्लिकेशन बनाना

इन दस्तावेज़ों को पढ़ें:

• Angular.io
• सिग्नल की मदद से, रिएक्टिविटी पर फिर से विचार करना (Google I/O 2023)
• Angular में नया क्या है (Google I/O 2023)