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

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

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

आपको क्या बनाना होगा

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

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

• ऐंग्युलर और टाइपस्क्रिप्ट की जानकारी
• सुझाया गया: ऐंग्युलर सिग्नल लाइब्रेरी के बारे में जानने के लिए, सिग्नल की मदद से फिर से विचार करना देखें

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

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

Stackbltz खोलें और ऐप्लिकेशन चलाएं

शुरू करने के लिए, अपने पसंदीदा वेब ब्राउज़र में Stackbltz लिंक खोलें:

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. अपना खुद का बदलाव किया जा सकने वाला फ़ाइल फ़ोल्डर बनाने के लिए, Stackbltz को फ़ोर्क करें. Stackbltz को ऐप्लिकेशन अपने-आप चलना चाहिए और आप इस्तेमाल करने के लिए तैयार हैं!

दूसरा विकल्प: डेटा स्टोर करने की जगह का क्लोन बनाना और ऐप्लिकेशन को इंस्टॉल करना

इस कोडलैब के ज़रिए काम करने के लिए, VSCode या लोकल IDE का इस्तेमाल करना एक दूसरा तरीका है:

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 सिग्नल साइफ़र.

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

4. अपना पहला सिग्नल() तय करें

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

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

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

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

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

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

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, decodedCipher सिग्नल का इस्तेमाल करके, secretMessage वैल्यू को कोड से बदलकर डिकोड किया जाता है.

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

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

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

यह आपको @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 परिकलित superSecretMessage के बारे में बताता है जिसे cipher के ज़रिए एन्कोड किया जाता है, जिसे खिलाड़ी हल करते हैं.

CipherService, unsolvedAlphabet कंप्यूट के बारे में बताता है. इसमें उन सभी अक्षरों की सूची होती है जिन्हें प्लेयर ने हल नहीं किया है. इसे decodedCipher में हल किए गए साइफ़र बटन की सूची से लिया गया है.

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

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

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

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

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

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

ये कोडलैब देखें:

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

ये कॉन्टेंट पढ़ें:

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