Transcript
00:00:00अरे, आज हमारे साथ जुड़ने के लिए बहुत-बहुत धन्यवाद।
00:00:02मैं Vercel में वर्कफ़्लो टीम से प्रणीत हूँ।
00:00:05नमस्ते, मैं नेट हूँ, मैं भी वर्कफ़्लो टीम से हूँ।
00:00:08नेट, आप और मैं शुरुआत से ही वर्कफ़्लो टीम में रहे हैं,
00:00:12और पिछले छह महीनों में हमने जो कुछ भी शिप किया है,
00:00:15मुझे लगता है कि हुक्स और वेबहुक्स मेरी पसंदीदा विशेषताओं में से एक हैं,
00:00:18और आज आप इसी के बारे में बात करने के लिए यहाँ आए हैं।
00:00:21हुक्स और वेबहुक्स मेरी भी पसंदीदा विशेषता हैं।
00:00:23वे अविश्वसनीय रूप से शक्तिशाली हैं, और मैं आपको यह समझाने के लिए कुछ डेमो दिखाऊँगा।
00:00:28तो पहला डेमो कुछ ऐसा है जिससे हम शायद सभी परिचित हैं, मैजिक लिंक्स।
00:00:33मैजिक लिंक एक लॉगिन फ़ॉर्म है। आप अपना ईमेल टाइप करते हैं, अपने इनबॉक्स में एक ईमेल प्राप्त करते हैं,
00:00:40और जब आप उस लिंक पर क्लिक करते हैं, तो आप सर्विस में लॉग इन हो जाते हैं।
00:00:44हाँ, और अगर मुझे सही याद है, तो Vercel के साथ, वास्तव में इसका नाम Vercel होने से पहले भी,
00:00:48जब इसे ज़ाइट (Zite) कहा जाता था, मैजिक लिंक्स ही एकमात्र तरीका था जिससे आप प्रमाणित होते थे,
00:00:52और हमने उस समय खुद भी यह पूरा सिस्टम बनाया था।
00:00:56सही कहा, और मुझे अभी भी इसके कारण ई-टीएसडी (ETSD) है।
00:01:01क्योंकि वर्कफ़्लो के बिना, इस तरह के सिस्टम को लागू करना जितना दिखता है उससे कहीं अधिक जटिल है।
00:01:08लॉजिक कई फाइलों में बिखर जाता है।
00:01:12आपको अपनी स्थिति (state) पर नज़र रखने के लिए डेटाबेस की आवश्यकता होती है, और यह जल्दी ही उलझ जाता है।
00:01:19हाँ, मैं पहले से ही सोच रहा था कि मैं इसे कैसे स्ट्रक्चर करूँगा और किस डेटाबेस का उपयोग करूँगा,
00:01:24क्योंकि यह एक सामान्य समस्या लगती है जिसे मैंने पहले भी बनाया है।
00:01:28तो हाँ, मुझे यह देखने में बहुत खुशी होगी कि यह कैसा दिखता है।
00:01:30हाँ, तो मैं जिस बारे में बात कर रहा हूँ, जिन समस्याओं (pain points) का मैंने ज़िक्र किया है, उन्हें दिखाने के लिए,
00:01:38मैंने मैजिक लिंक लॉगिन का वर्कफ़्लो के बिना एक "पारंपरिक" वर्ज़न लागू करना शुरू किया।
00:01:43और इसमें तीन एंडपॉइंट्स (endpoints) शामिल हैं।
00:01:47पहला तब होता है जब लॉगिन फ़ॉर्म सबमिट किया जाता है,
00:01:50और इसे एक सेशन जेनरेट करने और उस सेशन को रेडिस (Redis) जैसे डेटाबेस में स्टोर करने की आवश्यकता होती है।
00:01:57आपको एक टीटीएल (TTL) लागू करने की आवश्यकता है, आप डेटा को हमेशा के लिए नहीं रख सकते, आपको इसे एक्सपायर करना होगा।
00:02:06और फिर ईमेल भेजें, यह विफल हो सकता है, और फिर आपका लॉगिन काम नहीं करेगा, जो एक निराशाजनक अनुभव है।
00:02:14सही है, और फिर आपको वापस जाना होगा और अपने डेटाबेस को साफ करने के लिए एक क्रॉन जॉब (cron job) या किसी इंटर्न की ज़रूरत होगी।
00:02:19शायद उस समय मैं ही वह इंटर्न था।
00:02:22लेकिन फिर एक दूसरा एंडपॉइंट है, यह वह है जो तब होता है जब उपयोगकर्ता अपने ईमेल में लिंक पर क्लिक करता है।
00:02:28और इसे मूल रूप से डेटाबेस को क्वेरी करने और उस स्थिति (state) को बहाल करने की आवश्यकता है जो पहले एंडपॉइंट में बनाई गई थी।
00:02:36और हम पहले से ही वास्तव में स्पेगेटी कोड (spaghetti code) की ओर बढ़ रहे हैं।
00:02:38जब मैं कल्पना करने की कोशिश कर रहा था कि यह कैसा दिखेगा, तो यह कोड बहुत परिचित लग रहा है और मैं भी इसे ऐसे ही स्ट्रक्चर करूँगा।
00:02:48हम देख रहे हैं कि यह बहुत जल्दी जटिल होता जा रहा है, भले ही यह एक बहुत ही सरल चीज़, एक बहुत ही सरल अवधारणा है।
00:02:54तो आइए देखें कि आप वर्कफ़्लो में इस सुविधा को कैसे लागू करेंगे।
00:02:59वर्कफ़्लो एसडीके (Workflow SDK) का उपयोग करके मैजिक लिंक का कार्यान्वयन कुछ इस तरह दिखता है।
00:03:05हम देख सकते हैं कि हमारे पास अपना फ़ंक्शन है, इसमें हमारा "useWorkflow" डायरेक्टिव है, जिसका अर्थ है कि यह हमारा वर्कफ़्लो फ़ंक्शन है।
00:03:11और सबसे पहले हम "createWebhook" फ़ंक्शन को कॉल करते हैं, जो वर्कफ़्लो पैकेज से आता है।
00:03:18और हम इस मामले में "respondWithManual" विकल्प का भी उपयोग कर रहे हैं, जिसका अर्थ है कि हमारा वर्कफ़्लो फ़ंक्शन उस एचटीटीपी (HTTP) अनुरोध का जवाब देने या भेजने के लिए ज़िम्मेदार होगा जो इस वेबहुक को ट्रिगर करता है।
00:03:36और यह इसलिए है ताकि आप उनके लॉग इन करने के बाद रीडायरेक्ट या कुछ और कर सकें?
00:03:40हाँ, ताकि अगर हमारे वर्कफ़्लो फ़ंक्शन में कुछ जानकारी है जिसकी हमें यह जानने के लिए ज़रूरत है कि किस तरह का रिस्पॉन्स भेजना है।
00:03:51पहले एंडपॉइंट के समान, हम लॉगिन ईमेल भेजते हैं। यह एक "useStep" फ़ंक्शन है।
00:03:57तो अगर ऐसा कुछ विफल हो जाता है, तो वर्कफ़्लो एसडीके में ऑटोमैटिक रिट्राइज़ (automatic retries) होते हैं।
00:04:03स्थायित्व (durability) का पहलू यहाँ पारंपरिक दृष्टिकोण की तुलना में पहले से ही कुछ लाभ प्रदान कर रहा है।
00:04:10तो sendLoginEmails एक स्टेप है, और अगर ईमेल विफल हो जाता है, तो आप उसी यूआरएल (URL) के साथ भेजे गए ईमेल को फिर से आज़माते हैं जो आपने वेबहुक के लिए पहले ही बनाया है।
00:04:21और अगर हम यहाँ देखें, तो यह एक बहुत ही दिलचस्प पैटर्न है।
00:04:26हम 5 मिनट की स्लीप (sleep) के साथ "promise.race" का उपयोग कर रहे हैं।
00:04:30यह संभव है क्योंकि यह वेबहुक ऑब्जेक्ट एक प्रॉमिस (promise) को लागू करता है।
00:04:35तो इस वेबहुक के अनुरोध की प्रतीक्षा करने के लिए, आप बस "await Webhook" करते हैं।
00:04:40या इस मामले में, आप इसे रेस (race) के साथ कर रहे हैं। और यह अच्छा है क्योंकि मैं उम्मीद कर रहा था कि इस वेबहुक फ़ीचर में टाइमआउट या किसी अन्य तर्क के रूप में कोई विकल्प होगा।
00:04:50लेकिन मुझे यह पसंद है कि यह अब बहुत साफ़ है कि टाइमआउट करने के लिए, आप इसे वेबहुक और स्लीप के साथ रेस के रूप में मॉडल करते हैं।
00:04:58ऐसा महसूस होता है कि मैं इसके साथ बहुत कुछ कर सकता हूँ। मैं शायद दो अलग-अलग वेबहुक को एक-दूसरे के साथ रेस करा सकता हूँ।
00:05:02जब आपके पास एक फ़ंक्शन में कुछ तर्क होते हैं तो आप बहुत कुछ नहीं कर सकते।
00:05:06लेकिन यह तथ्य कि यह सिर्फ एक प्रॉमिस है और मैं स्लीप के खिलाफ promise.race कर सकता हूँ, शायद एक और स्टेप प्राप्त कर सकता हूँ।
00:05:12मुझे यह पैटर्न बहुत पसंद है। ऐसा लग रहा है कि मेरा दिमाग उन सभी चीज़ों के बारे में सोच रहा है जो मैं इसके साथ बना सकता हूँ।
00:05:16सही है, और वर्कफ़्लो एसडीके द्वारा पेश किए जाने वाले प्रिमिटिव्स (primitives) के बारे में यही खूबसूरत बात है।
00:05:21सब कुछ एक प्रॉमिस के रूप में सामने आता है।
00:05:23तो स्टैंडर्ड जावास्क्रिप्ट पैटर्न जैसे "await promise.race" बस काम करते हैं।
00:05:28और फिर यहाँ गौर करने वाली एक और बात यह है कि यहाँ कोई रेडिस नहीं है। कोई डेटाबेस नहीं है।
00:05:33पारंपरिक उदाहरण में, हम इस टाइमआउट को लागू करने के लिए रेडिस टीटीएल (Redis TTL) का उपयोग कर रहे थे।
00:05:41और इस मामले में, हम वर्कफ़्लो स्लीप प्रिमिटिव का उपयोग कर रहे हैं।
00:05:44और कोई इंटर्न भी नहीं है जिसे बाद में गंदे डेटाबेस को साफ करना पड़े।
00:05:50यही सबसे अच्छी बात है।
00:05:51और इसलिए आप देख सकते हैं कि वर्कफ़्लो लॉगिन सफलता पृष्ठ पर रीडायरेक्ट करके सार्वजनिक अनुरोध का जवाब देता है।
00:05:59और फिर लॉगिन पेज शुरू करने वाले क्लाइंट को वापस करने के लिए आपके उपयोगकर्ता के बारे में जानकारी प्राप्त करता है।
00:06:07और यह हमारा पूरा वर्कफ़्लो है। हमारा मैजिक लिंक कार्यान्वयन 50 लाइनों का कोड है।
00:06:12इसे देखना बहुत अविश्वसनीय है। क्या हम इसे एक्शन में देख सकते हैं?
00:06:17तो यहाँ हमारा मैजिक लिंक डेमो है। तो मैं बस अपना ईमेल दर्ज करूँगा।
00:06:24और हमारा वर्कफ़्लो वहाँ शुरू हो गया और ईमेल भेज दिया। और वहाँ एक वेबहुक बस इंतज़ार कर रहा है।
00:06:31और वास्तव में, हमारा वर्कफ़्लो अभी निलंबित (suspended) है। इसलिए ईमेल में लिंक पर क्लिक करने के लिए इंसान का इंतज़ार करते समय शून्य कंप्यूट (compute) की खपत हो रही है।
00:06:41ओह, और Vercel पर यह कैसा दिखता है? क्या मैं एक रन देख सकता हूँ जो अभी जारी है?
00:06:47ठीक है, तो हमें ईमेल मिल गया। और इससे पहले कि मैं उस पर क्लिक करूँ, आइए ऑब्जर्वेबिलिटी (observability) पर नज़र डालें।
00:06:52मुझे पता है कि मैं बस इधर-उधर कूद रहा हूँ, लेकिन मुझे अच्छा लग रहा है कि हम इसे देख रहे हैं।
00:06:57ठीक है, तो हम देख सकते हैं कि हमारा रन यहाँ है और 40 सेकंड पहले शुरू हुआ था।
00:07:02अगर हम नज़र डालें, तो हमारे पास स्टैंडर्ड ऑब्जर्वेबिलिटी फीचर्स हैं जो वर्कफ़्लो प्रदान करता है।
00:07:08हम अपने वर्कफ़्लो रन के इनपुट्स देख सकते हैं। आप मेरा ईमेल पता देख सकते हैं जो मैंने लॉगिन फ़ॉर्म में टाइप किया था।
00:07:13और दिलचस्प बात यह है कि हम देख सकते हैं कि हमारा हुक यहाँ बस इंतज़ार कर रहा है।
00:07:17और आपने कहा कि अभी कोई कंप्यूट नहीं चल रहा है। यह ऑब्जर्वेबिलिटी है, लेकिन वास्तव में मेरे उस हुक पर क्लिक करने का इंतज़ार करने के लिए कुछ भी नहीं बैठा है।
00:07:25यह सही है। हुक इंतज़ार कर रहा है, और स्लीप सो रहा है, और उन दोनों चीज़ों में वास्तव में कोई कंप्यूट शामिल नहीं है।
00:07:39लेकिन हम देख सकते हैं कि हमारा हुक, और अगर आपको याद हो, तो ये दोनों एक "promise.race" में रेस कर रहे हैं।
00:07:46इसलिए वर्कफ़्लो को जारी रखने के लिए इनमें से एक को पहले समाप्त होना होगा।
00:07:50तो अगर मैं आगे बढ़ता हूँ और उस लिंक पर क्लिक करता हूँ, ठीक है, तो हम देख सकते हैं कि मुझे लॉगिन सक्सेस पेज पर रीडायरेक्ट कर दिया गया था, जो हमारे वर्कफ़्लो लॉजिक के स्टेप्स में से एक था।
00:07:59और अगर मैं वापस लॉगिन फ़ॉर्म पर जाऊँ...
00:08:01सही, और फिर डैशबोर्ड पर वापस, वह भी पूरा हो जाना चाहिए।
00:08:05सही है। तो हमारा वर्कफ़्लो पूरा हो गया।
00:08:08और हुक के जीतने के बाद आप देख सकते हैं कि टाइमर भी रुक जाता है।
00:08:11हाँ, इसलिए हम लगभग 50 लाइनों के कोड के साथ मैजिक लिंक को लागू करने में सक्षम थे।
00:08:17यह वाकई बहुत बढ़िया है। यह देखना बहुत अच्छा है कि, कैसे, अगर हमें मैजिक लिंक कैसे काम करता है इसका व्हाइटबोर्ड आरेख बनाना हो और किसी को समझाना हो।
00:08:27तो कोड में आपके जो स्टेप्स हैं वे ठीक वैसे ही हैं जैसे आप इसे मैप करेंगे, लेकिन अब वही फाइनल कोड भी है।
00:08:34बीच में कोई अतिरिक्त डेटाबेस नहीं था। कई एपीआई रूट (API routes) नहीं थे। आपने जो कोड दिखाया वह बहुत ही साफ़-सुथरा लग रहा था।
00:08:41और मुझे लगता है कि वर्कफ़्लो एसडीके का सबसे शक्तिशाली पहलू यही है, जिस तरह से यह आपको अपने एप्लिकेशन लॉजिक को इंफ्रास्ट्रक्चर के हिसाब से खींचने के बजाय तार्किक रूप से प्रवाहित करने की अनुमति देता है।
00:08:59सही। साथ ही, मुझे यहाँ वेबहुक्स का विचार पसंद है, इसे वेबहुक नाम देना क्योंकि यह मुझे वेबहुक्स के बारे में सोचने का एक बिल्कुल अलग तरीका देता है।
00:09:07यह सिर्फ एक अल्पकालिक यूआरएल (ephemeral URL) है जिसे मैं बना सकता हूँ और सस्पेंड कर सकता हूँ।
00:09:10वास्तव में, यह एक अच्छा विषय है क्योंकि मैं सोचता हूँ, आप जानते हैं, हम Vercel में इनमें से बहुत सारे एजेंट्स बनाते हैं।
00:09:16हम बहुत सारे स्लैक (Slack) एजेंट्स और गिटहब (GitHub) एजेंट्स बनाते हैं, और हम अक्सर गिटहब या स्लैक से वेबहुक्स को सब्सक्राइब करते हैं, है ना?
00:09:23हर बार जब पीआर (PR) में कोई नई टिप्पणी होती है और हम एक Vercel एजेंट को किक ऑफ करना चाहते हैं, तो हम इसे एक इवेंट के आधार पर करना चाहते हैं जिसे गिटहब इन वेबहुक्स को भेजता है, है ना?
00:09:31क्या हम वास्तव में गिटहब से इवेंट्स को सब्सक्राइब करने के लिए वर्कफ़्लो वेबहुक्स का उपयोग कर सकते हैं, उदाहरण के लिए?
00:09:36ठीक है, तो स्लैक या गिटहब से भेजे गए वेबहुक जैसी चीज़ के लिए, आम तौर पर आपको डैशबोर्ड में मैन्युअल रूप से जाना पड़ता है और एक स्टैटिक कॉल-बैक यूआरएल कॉन्फ़िगर करना पड़ता है।
00:09:49सही। आप इसे वन-ऑफ (one-off) नहीं बना सकते, मैं इसे यहाँ ईमेल की तरह एक बार का यूआरएल नहीं दे सकता।
00:09:54सही, सही। इसलिए क्रिएट वेबहुक फीचर उस अर्थ में थोड़ा उच्च स्तर का है, जहाँ यह बेतरतीब ढंग से जेनरेट किया गया एक अद्वितीय (unique) वेबहुक यूआरएल प्रदान करता है।
00:10:04जो एक विशिष्ट वर्कफ़्लो रन से वापस मैप होता है।
00:10:07ठीक है। तो यह स्टोरीटाइम बॉट है।
00:10:14सही। आपको कुछ ऐसा प्री-कॉन्फ़िगर करना होगा, आपके पास कई पुल रिक्वेस्ट हैं, लेकिन वे सभी एक ही एंडपॉइंट पर जाती हैं।
00:10:20इसलिए वर्कफ़्लो एसडीके के साथ इसे लागू करने के लिए, हम एक स्तर नीचे जाएँगे, हम अधिक लो-लेवल हुक प्रिमिटिव (hook primitive) का उपयोग करेंगे।
00:10:28और मेरे पास आपको वह दिखाने के लिए एक डेमो है।
00:10:31आइए देखते हैं।
00:10:32ठीक है। तो यह स्टोरीटाइम बॉट (storytime bot) है।
00:10:35यह वह पहला एप्लिकेशन है जिसे मैंने एक साल से थोड़ा पहले वर्कफ़्लो एसडीके के साथ लिखा था।
00:10:40और यह कैसे काम करता है कि आप बस "storytime/" कमांड टाइप करते हैं और हम देखेंगे कि यह थ्रेड बन गया है।
00:10:47प्रत्येक थ्रेड एक व्यक्तिगत वर्कफ़्लो रन द्वारा दर्शाया जाता है।
00:10:52और इसलिए जब हम थ्रेड का विस्तार करते हैं, तो हम देखते हैं कि एक एलएलएम (LLM) ने हमारे लिए यह कहानी शुरू की है और आप या मैं या जो कोई भी इस चैनल में है, वह कहानी को जारी रख सकता है।
00:11:05और एलएलएम हमें इसे इसके अंतिम निष्कर्ष तक पहुँचाने में मदद करेगा।
00:11:09ठीक है। तो लूना के पास एक जादुई बीज है और आगे क्या होता है? वह बीज बोती है।
00:11:13ठीक है। और हम यहाँ कुछ गतिविधि होते हुए देख रहे हैं।
00:11:17आगे क्या होता है? जादुई चीज़।
00:11:20हमारी कहानी खत्म हो गई है और हमारे पास एक अंतिम कहानी है और इसके साथ एक छोटी छवि (image) भी जेनरेट की जाएगी।
00:11:26लेकिन हम उस पर वापस जाएँगे।
00:11:28मैं वास्तव में पहले से ही बहुत उत्सुक हूँ क्योंकि मैंने देखा कि मैं एक वेबहुक अनुरोध की उम्मीद कर रहा था लेकिन वास्तव में वहाँ दो, कम से कम दो अनुरोध थे क्योंकि आपके पास दो संदेश थे।
00:11:35तो मैं यह देखने के लिए बहुत उत्सुक हूँ कि यह कोड में कैसा दिखता है।
00:11:38ठीक है। तो यह हमारे स्टोरीटाइम बॉट के लिए वर्कफ़्लो फ़ंक्शन है।
00:11:44तो हम देख सकते हैं कि यह चैनल आईडी लेता है, जो कि स्टोरीटाइम बॉट चैनल है।
00:11:50इसमें कुछ कॉन्फ़िगरेशन विकल्प हैं जिन्हें आप पास कर सकते हैं।
00:11:53लेकिन दिलचस्प बात यह है कि हम देख सकते हैं कि यह संदेशों (messages) का एरे (array) है, जो कि अगर आप AI SDK से परिचित हैं, तो यह वह डेटा प्रारूप है जिसमें आप अपनी AI बातचीत को स्टोर करते हैं।
00:12:04और यहाँ हमने जो एक सामान्य स्लैक बॉट एप्लिकेशन बनाया है, उसमें आप आम तौर पर इस तरह की चीज़ को डेटाबेस में स्टोर करेंगे और प्रत्येक इटरेशन या प्रत्येक वेबहुक इवेंट पर, थ्रेड में टाइप किए गए प्रत्येक संदेश पर, आप अपनी स्थिति को बहाल करेंगे, आप डेटाबेस से बातचीत की तलाश करेंगे।
00:12:23और यहाँ ऐसा नहीं हो रहा है। यह आपके फ़ंक्शन में सिर्फ एक एरे है।
00:12:27हाँ। वास्तव में, यह ठीक है क्योंकि मैं पहले थोड़ा हँसा था क्योंकि मैंने परिचय देखा था और आपके पास यह कमेंट था जिसमें लिखा था, "देखो माँ, कोई क्यू (queues) या केबी (KB) नहीं।"
00:12:34और यहाँ डेटाबेस के लिए कोई इम्पोर्ट नहीं है। आप केवल वर्कफ़्लो इम्पोर्ट कर रहे हैं।
00:12:40और पिछले संदेश वाली बात पर वापस आते हैं, इस पर लगभग किसी का ध्यान नहीं जाता, लेकिन आपके पास यहाँ वास्तव में "final story" नाम का एक वेरिएबल है जो संभवतः समय के साथ, हम इस एरे में संदेश भेजने जा रहे हैं, मैं कल्पना करता हूँ,
00:12:55और अंतिम कहानी यहाँ एक स्ट्रिंग के रूप में दिखाई देने वाली है, लेकिन इसके लिए कोई डेटाबेस नहीं है जहाँ इसे जाना है। तो यह लगभग वैसा ही है जैसे "let" ही यहाँ आपका डेटाबेस है।
00:13:04हाँ, "let ही आपका डेटाबेस है" एक बढ़िया शब्द है जिसे हमें बनाना चाहिए, हम इसे गढ़ने जा रहे हैं।
00:13:10हो सकता है कि मैंने इसे आपसे ही चुराया हो, लेकिन।
00:13:14यहाँ दिलचस्प बात यह है, और जिसके बारे में हम यहाँ बात करने आए हैं, वह है हुक फीचर जिसे हम देख सकते हैं कि हम यहाँ यह हुक बना रहे हैं। और मैजिक लिंक के साथ देखे गए वेब हुक उदाहरण से अलग यह है कि इस मामले में, हम एक टोकन प्रदान कर रहे हैं,
00:13:28जो एक स्ट्रिंग है जिसमें पहचानकर्ता (identifier) की जानकारी शामिल है जो इस वर्कफ़्लो रन के लिए अद्वितीय है।
00:13:35टीएस (TS) थ्रेड आईडी है। तो यह स्ट्रिंग वह टोकन है जो विशिष्ट रूप से इस वर्कफ़्लो रन की पहचान करता है।
00:13:44तो जब हम वेब हुक रूट के कोड को देखते हैं, तो हम देखेंगे कि स्लैक जो इवेंट पेलोड भेजता है उसमें वह सारी जानकारी होती है जिसकी हमें इस पहचानकर्ता को नियतात्मक रूप से (deterministically) फिर से बनाने के लिए आवश्यकता होती है।
00:13:58और यही वह जादू है कि वेब हुक कैसे व्यक्तिगत वर्कफ़्लो रन पर वापस मैप होता है।
00:14:04हाँ, मैं उत्सुक था जब मैंने वेब हुक देखा क्योंकि आप मैजिक उदाहरण के लिए नए यूआरएल बना रहे हैं, लेकिन क्योंकि हमने पहले भी ये स्लैक बॉट बनाए हैं, आप हर थ्रेड में एक नया यूआरएल नहीं दे सकते।
00:14:17तो आप इसे यहाँ जिस तरह से कर रहे हैं उसे समझने का तरीका यह है कि आपके पास एक एपीआई है और वह पहले से ही स्लैक से जुड़ी हुई है, लेकिन हर बार जब आपको वहाँ एक संदेश मिलता है, तो आप मूल रूप से रेज़्यूम्प्शन साइड (resumption side) पर उसी टोकन की गणना कर रहे हैं।
00:14:29तो आपका वर्कफ़्लो मूल रूप से इस टोकन का इंतज़ार कर सकता है और आप इस वर्कफ़्लो रन को फिर से शुरू करने के लिए संदेश पेलोड से वही टोकन बना सकते हैं।
00:14:37बिल्कुल। हाँ। तो स्लैक बॉट को स्लैक के डैशबोर्ड में मैन्युअल रूप से क्लिक करके कॉन्फ़िगर किया गया था, और आपको एक स्टैटिक वेबहुक कॉलबैक यूआरएल को स्थिर रूप से परिभाषित करने की आवश्यकता है।
00:14:50यही कारण है कि लोअर लेवल हुक प्रिमिटिव इस मामले में बेहतर काम करता है, क्योंकि हम गतिशील रूप से टोकन को फिर से बना सकते हैं।
00:14:59तो बस जल्दी से देखें, यह वेबहुक रूट है, और वास्तव में यहाँ बहुत कुछ नहीं हो रहा है।
00:15:07मुख्य बात यह है कि हम स्लैक द्वारा पारित डेटा से टोकन को फिर से कैसे बनाते हैं।
00:15:13और फिर हम रेज़्यूमे (resume) फ़ंक्शन को कॉल करते हैं और यह उस अद्वितीय वर्कफ़्लो रन को फिर से शुरू करता है।
00:15:20तो मैं वास्तव में कल्पना करता हूँ, वह बहुत अच्छा है। और मुझे लगता है कि मैं वास्तव में कल्पना करता हूँ कि वेबहुक्स के साथ, आप वही चीज़ कर रहे हैं।
00:15:28क्या वेबहुक मूल रूप से सिर्फ एक रैंडम टोकन बना रहा है और फिर आपके पास एक HTTP एंडपॉइंट है जो उसी रैंडम टोकन को रिज़ॉल्व करता है?
00:15:35हाँ, खैर, तो वेबहुक फीचर के साथ अंतर यह है कि आपको अपने कोड में उस एपीआई रूट को परिभाषित करने की आवश्यकता नहीं है।
00:15:44वर्कफ़्लो एसडीके वास्तव में आपके लिए वेबहुक फीचर के लिए एक डिफ़ॉल्ट रूट लागू करता है।
00:15:50लेकिन हाँ, इसके अलावा, यह एक रैंडम तरीके से जेनरेट किया गया टोकन है जो एक विशिष्ट वर्कफ़्लो रन के लिए अद्वितीय है।
00:15:55लेकिन इस मामले में, हमारे पास टोकन के साथ हमारा हुक है और जैसा कि आपने अभी कुछ समय पहले उल्लेख किया था, यह हुक कई बार डेटा प्राप्त कर सकता है।
00:16:06यह मैजिक लिंक उदाहरण से अलग है, जिसे केवल एक बार ट्रिगर करने की आवश्यकता थी।
00:16:11इस मामले में, हम चाहते हैं कि प्रत्येक अद्वितीय संदेश के लिए हुक फायर हो जो कोई स्लैक थ्रेड में टाइप करता है।
00:16:17ऐसा करने के लिए, आप जावास्क्रिप्ट में "for await" सिंटैक्स का उपयोग करते हैं, जो एसिंक इटरेटर्स (async iterators) के साथ सामान्य है।
00:16:25लेकिन इस मामले में, हम अपने हुक का उपयोग करके स्लैक वेबहुक से कई इवेंट पेलोड प्राप्त कर रहे हैं।
00:16:33यह बहुत अच्छा है। मुझे कभी भी इसके लिए कोई अच्छा उपयोग का मामला नहीं मिला... मुझे एसिंक इटरेटर पसंद हैं और मुझे जेनरेटर पसंद हैं और मैंने बहुत समय पहले इस बारे में बात भी की थी।
00:16:42लेकिन वे हमेशा डेमो के लिए अच्छे रहे हैं और मुझे इसका उपयोग करने का कोई अच्छा तरीका नहीं मिल पाया है।
00:16:46यहाँ मुझे ऐसा लग रहा है कि आपके पास बस एक लूप है।
00:16:50लेकिन वस्तुओं के किसी निश्चित सेट पर लूप करने या टाइमस्टैम्प पर लूप करने के बजाय क्योंकि आप "for await" का उपयोग कर रहे हैं और फिर इसे हुक पर कर रहे हैं, यहाँ एक लूप है जो बिल्कुल सटीक बैठता है।
00:17:01लूप के अंदर की हर चीज़ एक उपयोगकर्ता संदेश से मैप होती है।
00:17:05और इसके बारे में सोचने का यह एक अच्छा तरीका है कि नए उपयोगकर्ता संदेश से इस लूप का एक और इटरेशन होगा और यह बस क्यू में लग जाता है और चलता रहता है।
00:17:12इसके बारे में खूबसूरत बात यह है कि इस लूप के प्रत्येक इटरेशन के लिए, जब हम उपयोगकर्ता द्वारा अगला संदेश टाइप करने का इंतज़ार कर रहे होते हैं, तो बिल्कुल भी कंप्यूट की खपत नहीं हो रही होती है।
00:17:22वर्कफ़्लो पूरी तरह से निलंबित है और थ्रेड में अगला संदेश मिनटों या दिनों या शायद कभी नहीं भी आ सकता है और यह बिल्कुल ठीक है।
00:17:33तो शायद उसी चैनल में स्लैकबॉट के साथ स्लैक थ्रेड्स होंगे जहाँ मैं अब वापस जा सकता हूँ और वहाँ अभी भी एक रन बैठा है और कुछ हफ़्तों तक इंतज़ार कर रहा है अगर किसी ने जवाब नहीं दिया।
00:17:42यह वाकई बहुत बढ़िया है।
00:17:43और इसलिए उस संदेश एरे पर वापस जाने के लिए जिसका हमने पहले उल्लेख किया था, अब हम एरे को संशोधित कर रहे हैं।
00:17:48हम नया उपयोगकर्ता संदेश पुश कर रहे हैं और वह हमारा डेटाबेस संशोधन है क्योंकि हमारा संदेश एरे सिर्फ एक स्थानीय वेरिएबल है।
00:17:57यह बहुत अच्छा है। और फिर मैं देख सकता हूँ कि आप बीच में और अधिक स्टेप्स को पैरेललाइज़ करने के लिए और अधिक "promise.all" कर रहे हैं।
00:18:03यह हर एक लूप, स्लैक पर हर एक संदेश के लिए बहुत साफ़ लगता है।
00:18:08मुझे पसंद है कि यह बिल्कुल वैसा ही है जैसा मैं इसे मॉडल करूँगा यदि आप इसे हैकथॉन या किसी चीज़ में बनाने की कोशिश कर रहे थे।
00:18:12यह कुछ इस तरह है कि मैं यहाँ लिखूँगा कि हर एक संदेश में क्या होता है।
00:18:16हाँ, तो फिर "promise.all" मॉडल, ये केवल नियमित "useStep" फ़ंक्शन हैं और विचार उन्हें पैरेलल चलाने का है।
00:18:23और इसलिए स्लैक संदेश पर रिएक्शन जोड़ने जैसी चीज़ केवल उपयोगकर्ता को तत्काल फीडबैक देने के लिए है कि कुछ हो रहा है।
00:18:32लेकिन साथ ही, हम कहानी निर्माण प्रक्रिया को आगे बढ़ाने में मदद करने के लिए एलएलएम शुरू करना चाहते हैं।
00:18:39जब हमें समय मिले तो मैं यह देखने में बहुत दिलचस्पी रखूँगा कि ऑब्जर्वेबिलिटी कैसी दिखती है, क्योंकि मैं कल्पना कर सकता हूँ कि वे स्पैन एक ही समय में शुरू हो रहे हैं और इसे बहुत स्पष्ट बना रहे हैं।
00:18:49तो हमारे पास स्टोरी टाइम के लिए ऑब्जर्वेबिलिटी है।
00:18:52यह पूरा हो गया है, इसलिए हमें वापस जाकर उस छवि की जाँच करनी होगी।
00:18:56तो हम अपना हुक देख सकते हैं।
00:18:58और यहाँ दिलचस्प बात यह है कि इस मामले में, हमारे पास दो हुक प्राप्त इवेंट्स हैं।
00:19:05तो वह उन दो संदेशों से मैप होता है जो मैंने अपने स्लैक थ्रेड में टाइप किए थे।
00:19:10और ऑब्जर्वेबिलिटी हमें उस व्यक्तिगत डेटा को देखने की अनुमति देती है जो हुक को प्रदान किया गया था।
00:19:14ओह, यह वास्तव में बहुत बढ़िया है।
00:19:16तो वे मूल रूप से स्लैक पेलोड हैं। और आपको इसे अतिरिक्त रूप से लॉग नहीं करना पड़ा। स्लैक पेलोड बस इवेंट्स के रूप में दिखाई देते हैं जिन्हें मैं वापस जाकर डैशबोर्ड पर देख सकता हूँ।
00:19:25सही। और फिर हम देख सकते हैं कि हर बार हुक पेलोड प्राप्त होने पर, हमारा वर्कफ़्लो निष्पादन जारी रहता है और हमारे स्टेप्स जारी रहते हैं।
00:19:34और फिर अंत में हमारे पास अपना स्टोरीबोर्ड इमेज जेनरेट करने का परिणाम होता है, जो वहाँ जैसा दिखता है।
00:19:40तो वह स्टोरी टाइम बॉट है।
00:19:42यह वाकई बहुत बढ़िया है।
00:19:43मुझे लगता है कि मैजिक लिंक से जेनरेट किए गए वेबहुक्स को देखना और अब आपको हुक के साथ लोअर लेवल प्रिमिटिव का उपयोग करते हुए देखना और उन्हें एक लूप में करना ताकि आप वास्तव में कई इवेंट्स कर सकें।
00:19:54यह वाकई बहुत बढ़िया है।
00:19:55मुझे लगता है कि मॉडल वास्तव में इस बात पर फिट बैठता है कि मैं वेबहुक के साथ मानवीय संचालन कैसे करता हूँ।
00:20:02क्या आप हुक का उपयोग किसी और चीज़ के लिए कर सकते हैं?
00:20:05हाँ, बिल्कुल।
00:20:06मेरे पास आपके लिए जो आखिरी डेमो है, वह स्लैक वेबहुक का जवाब देने के समान ही एक पैटर्न है।
00:20:17लेकिन इस मामले में, हम वेबहुक का उपयोग अपने एप्लिकेशन कोड के निष्पादन को सौंपने के तरीके के रूप में करने जा रहे हैं और फिर कहीं और कंप्यूट के समाप्त होने की प्रतीक्षा करेंगे जबकि हमारा वर्कफ़्लो निलंबित रहता है और प्रतीक्षा करता है।
00:20:32और फिर उस वेबहुक यूआरएल का उपयोग करके अपने वेबहुक में वापस कॉल करें और फिर हम अपने एप्लिकेशन लॉजिक के साथ जो भी करने की आवश्यकता है उसे समाप्त कर सकते हैं।
00:20:41इस उदाहरण के लिए, हम Vercel Sandbox का उपयोग करेंगे और हम किसी फ़ाइल का कन्वर्जन करने के लिए FFmpeg का उपयोग करने जैसा कोई लंबे समय तक चलने वाला कंप्यूट ऑपरेशन करेंगे।
00:20:51तो यह हमारा FFmpeg कन्वर्जन वर्कफ़्लो है।
00:20:56सबसे पहले होने वाली चीज़ों में से एक यह है कि हम एक Vercel Sandbox बनाते हैं।
00:21:00इसके बारे में दिलचस्प बात यह है कि सैंडबॉक्स एनपीएम पैकेज (Sandbox NPM package) उन फ़ंक्शंस को एक्सपोज़ करता है जिनमें बैकएंड पर "useStep" का उपयोग किया गया है।
00:21:09तो वास्तव में यह ऑपरेशन एक Step है।
00:21:12तो आप एक NPM पैकेज शिप कर सकते हैं।
00:21:15Sandbox मूल रूप से सिर्फ एक NPM पैकेज शिप कर रहा है जिसमें इस फंक्शन के अंदर use Step डायरेक्टिव है।
00:21:21तो जब आप इसे वर्कफ़्लो के अंदर इम्पोर्ट और इस्तेमाल करते हैं, तो यह बिना कोई कोड लिखे Sandbox को अपने आप एक Step बना देता है।
00:21:29इसका मतलब यह नहीं है कि आप अभी भी वर्कफ़्लो के बाहर क्रिएट करने के लिए Sandbox का उपयोग कर सकते हैं।
00:21:32क्या होता है जब आप इसे बिना वर्कफ़्लो के कॉल करते हैं?
00:21:35यदि आप गौर करें तो डायरेक्टिव सिर्फ एक स्ट्रिंग है और यदि आप इसे वर्कफ़्लो कंपाइलर के बिना निष्पादित करने जा रहे थे, तो वह स्ट्रिंग कुछ नहीं करती है।
00:21:47तो यह बस काम करता है।
00:21:49अपने NPM पैकेजों में use Step जोड़ना वर्कफ़्लो SDK के बिना भी ठीक काम करता है।
00:21:55और फिर एक बार जब आप वर्कफ़्लो SDK के अंदर उस फ़ंक्शन का उपयोग करते हैं, तो आपको आउट ऑफ द बॉक्स ड्यूरेबिलिटी के लाभ मिलते हैं।
00:22:03ठीक है, तो Sandbox बस कुछ सामान्य चीजें करता है।
00:22:07यह FFmpeg इंस्टॉल करता है क्योंकि वह डिफ़ॉल्ट रूप से उपलब्ध नहीं है।
00:22:11यह उस फ़ाइल का URL डाउनलोड करता है जिसे हम निर्दिष्ट करने जा रहे हैं।
00:22:14और इनमें से प्रत्येक रन अभी सिर्फ Steps ही हैं?
00:22:17हाँ, तो ये Sandbox में एक व्यक्तिगत कमांड चलाते हैं और वे Steps हैं। हम उन्हें ऑब्जर्वेबिलिटी में देख पाएंगे।
00:22:29और फिर हम वापस create-webhook को कॉल करने पर आते हैं, जो आपको मैजिक लिंक डेमो से याद होगा।
00:22:36लेकिन इस मामले में, हम उस वेबहुक URL को अपनी बैश स्क्रिप्ट में पास करने जा रहे हैं जिसे हम Sandbox में चलाएंगे।
00:22:43यहाँ क्या हो रहा है कि हम FFmpeg चलाएंगे और फ़ाइल को उस प्रारूप में बदलेंगे जिसकी हम UI में मांग करते हैं।
00:22:53और जब वह हो जाएगा, तो बैश स्क्रिप्ट वेबहुक से हमारे कॉलबैक URL के खिलाफ एक cURL चलाएगी।
00:22:59और जब वह cURL अनुरोध होता है, तो हमारा वर्कफ़्लो लॉजिक फिर से शुरू हो जाता है।
00:23:04ठीक है, समझ गया। तो यह बढ़िया है। मैं पहले से ही देख पा रहा हूँ, मैं थोड़ा आगे सोच रहा था, लेकिन मैंने गौर किया कि इस रन पर एक AND है।
00:23:11तो आप वास्तव में स्क्रिप्ट लिख रहे हैं और इसे बैकग्राउंड में चला रहे हैं क्योंकि इस तरह का FFmpeg Step बहुत अधिक समय ले सकता है।
00:23:17आप ऐसा Step नहीं चाहेंगे जो बस बैठा रहे और उसका इंतज़ार करता रहे।
00:23:20सही, बिल्कुल। तो यह लाइन यहीं बैकग्राउंड में हमारी FFmpeg कन्वर्जन स्क्रिप्ट शुरू करती है।
00:23:28और फिर हमारा वर्कफ़्लो फ़ंक्शन सस्पेंड हो जाता है और फिर हम वेबहुक के फिर से शुरू होने का इंतज़ार करते हैं।
00:23:34और मैं एक घंटे की नींद के साथ फिर से प्रॉमिस रेस देख रहा हूँ। यह कितना शानदार पैटर्न है।
00:23:40सही है, और इस बार, आप जानते हैं, हमारी FFmpeg कन्वर्जन प्रक्रिया में लंबा समय लग सकता है।
00:23:46यह एक बहुत बड़ी मीडिया फ़ाइल हो सकती है। इसलिए हम इस मामले में एक घंटे का टाइमआउट निर्दिष्ट कर रहे हैं।
00:23:51और यह पूरी तरह से ठीक है। वर्कफ़्लो में, आप मूल रूप से अनिश्चित समय के लिए सो सकते हैं।
00:23:56और फिर से, जब हम इस वेबहुक के फिर से शुरू होने का इंतज़ार कर रहे होते हैं, तब शून्य कंप्यूट चल रहा होता है।
00:24:01और क्या हम इसे देख सकते हैं? क्या हम इसे चलते हुए देख सकते हैं? क्या हमारे पास कोई डेमो है?
00:24:04हमारे पास है।
00:24:05यह थोड़ा अजीब उदाहरण है।
00:24:07हाँ, नहीं, मैंने बिग बनी वाले उदाहरण को तुरंत पहचान लिया। वह ब्लेंडर से है।
00:24:12हाँ, मुझे बहुत समय पहले ब्लेंडर सीखते समय इन वीडियो को देखना याद है।
00:24:16ओह वाह, मुझे जलन हो रही है।
00:24:19तो हमारे पास मीडिया फ़ाइल का URL पेस्ट किया हुआ है। इस मामले में, हम बस इससे ऑडियो लेयर निकालेंगे।
00:24:26तो एक बार जब हम बटन क्लिक करते हैं, तो वह एक वर्कफ़्लो शुरू करता है और हमें अपनी ऑब्जर्वेबिलिटी पर जाने में सक्षम होना चाहिए।
00:24:33ओह, वह रहा। हाँ, तो हम अपना Sandbox क्रिएट देख सकते हैं।
00:24:37और वह हमारा Sandbox इंस्टेंस वापस करता है। काफी बढ़िया है।
00:24:42और यह इसलिए है क्योंकि Sandboxes, वर्कफ़्लो में सब कुछ सीरियलाइज़ेबल होना चाहिए।
00:24:46लेकिन जैसा कि आपने कहा, Sandboxes सीरियलाइज़ेशन को लागू करते हैं। इसलिए वे वास्तव में सीरियलाइज़ेबल भी हैं जैसा वर्कफ़्लो में दिखता है।
00:24:53सही। हाँ। तो Vercel sandbox NPM पैकेज में एक sandbox क्लास है और वह क्लास वर्कफ़्लो सीरियलाइज़ेशन फ़ंक्शंस को लागू करती है।
00:25:03और इसलिए यह हमारी ऑब्जर्वेबिलिटी में बस काम करता है।
00:25:06और इसलिए कोई भी पैकेज ऐसा कर सकता है, है ना? यह सिर्फ Sandbox नहीं है। Sandbox के बारे में कुछ भी विशेष नहीं है कि कोई भी क्लास जो वर्कफ़्लो के अंदर काम करना चाहती है, वह उन्हीं सिम्बल्स को लागू कर सकती है और step डायरेक्टिव का उपयोग कर सकती है।
00:25:17हाँ, यह सही है। तो हम देख सकते हैं कि हमारे हुक को इस बार 20 सेकंड में वापस कॉल किया गया।
00:25:25कन्वर्जन थोड़ा तेज़ रहा क्योंकि यह एक तरह की छोटी फ़ाइल है, लेकिन इसमें कितना भी समय लग सकता था।
00:25:31हम देख सकते हैं कि हमारे Sandbox के बनने और इनिशियलाइज़ होने के बाद, हमारा हुक बन गया और हमने अपना FFmpeg कमांड शुरू करने के लिए उसे Sandbox में पास कर दिया।
00:25:43और जब वह समाप्त हो गया, तो हमें अपने Sandbox से एक पेलोड प्राप्त हुआ।
00:25:48और यह वह curl है जो पहले बैश स्क्रिप्ट के अंदर हुआ था। तो यह कमांड लिख रहा है और फिर वेबहुक को पूरा करने के लिए शाब्दिक रूप से Sandbox में curl का उपयोग कर रहा है।
00:25:57सही। तो हमारे Sandbox ने वह काम पूरा कर लिया जो वह कर रहा था। इसलिए वह नियंत्रण वापस हमारे वर्कफ़्लो को सौंप रहा है।
00:26:04तो अब मैं जिस तरह से इसके बारे में सोच रहा हूँ वह यह है कि वर्कफ़्लो में steps के साथ, आप एक step चलाते हैं, यह बैकग्राउंड में एक कोड चलाता है, और फिर वर्कफ़्लो जारी रखता है।
00:26:13लेकिन hook और webhook दोनों ही ऐसे लगते हैं जैसे वे निचले स्तर के हों। मैं बस एक टोकन या URL बना सकता हूँ और किसी भी चीज़ का इंतज़ार कर सकता हूँ।
00:26:21वह एक ह्यूमन मैजिक लिंक हो सकता है। यह एक ईमेल हो सकता है। यह एक Sandbox हो सकता है। यह किसी भी प्रकार का कंप्यूटर हो सकता है, जो भी होना है।
00:26:27और मेरा वर्कफ़्लो उस घटना के होने तक अपनी पूरी स्थिति के साथ बस रुक जाता है। यह लगभग ऐसा लगता है कि यह step से भी निचले स्तर का है।
00:26:34हाँ। जिस तरह से मैं इसके बारे में सोचता हूँ वह यह है कि webhook और hook आपके वर्कफ़्लो में बाहरी पेलोड पास करने का एक तरीका हैं।
00:26:42मैं इसके बारे में इस तरह सोचता हूँ कि step एक ऐसा तरीका है जिससे वर्कफ़्लो सस्पेंड हो सकता है और फिर किसी प्रकार के कंप्यूट के खत्म होने का इंतज़ार कर सकता है और फिर हम फिर से शुरू करते हैं।
00:26:50लेकिन hook और webhook दोनों वास्तव में ऐसा महसूस कराते हैं कि वे और भी निचले स्तर के हैं क्योंकि आप सिर्फ एक टोकन या URL बना रहे हैं जिसे आप भेज सकते हैं, इस मामले में एक Sandbox में, लेकिन आप कहीं भी भेज सकते हैं।
00:27:01यह एक इंसान हो सकता है। यह एक ईमेल हो सकता है। उदाहरण के लिए, यह एक अन्य वर्कफ़्लो हो सकता है।
00:27:05और जब भी वह पूरा होता है, आपका पैरेंट वर्कफ़्लो मूल रूप से जाग जाता है और वहीं से फिर से शुरू होता है जहाँ उसने छोड़ा था।
00:27:12तो यह किसी तरह step से भी निचले स्तर का है। यह किसी भी प्रकार की बाहरी कार्रवाई के लिए आपके वर्कफ़्लो को सस्पेंड करने का एक तरीका है।
00:27:19हाँ। मुझे इसके बारे में सोचना पसंद है कि hook आपके वर्कफ़्लो को सस्पेंड करने और आपके वर्कफ़्लो में किसी बाहरी पेलोड के वापस पास होने का इंतज़ार करने का एक तरीका है, जो बहुत शक्तिशाली है।
00:27:31यह वास्तव में बहुत बढ़िया है। मुझे पता है कि आज हमारे पास समय खत्म हो गया है, लेकिन उन डेमो के साथ आपने मेरे लिए फिर से पुष्टि कर दी कि वर्कफ़्लो में hook मेरी पसंदीदा विशेषता क्यों है और मैं इसके साथ निर्माण जारी रखने के लिए बहुत उत्साहित हूँ।
00:27:42शानदार। हाँ। मुझे खुशी है कि आपने आनंद लिया।
Community Posts
No posts yet. Be the first to write about this video!
Write about this video