Astro.js बैकेंड कैसे बनाएं? चरण-दर-चरण गाइड।

Astro.js एक स्टैटिक साइट जनरेटर (SSG) और फ्रंटेंड फ्रेमवर्क है, जो तेज़, आधुनिक वेब एप्लीकेशन बनाने के लिए उपयोग होता है।

यह बिल्ड-टाइम पर स्टैटिक HTML, CSS, और JavaScript फाइलों को प्री-रेंडर करके आपको तेज़ और हल्की वेबसाइट बनाने की सुविधा देता है।

पारंपरिक SSGs के विपरीत, Astro.js रनटाइम पर आपके स्टैटिक पेज को JavaScript के साथ हाइड्रेट करने की अनुमति देता है, जिससे आप डायनमिक और इंटरएक्टिव वेबसाइट बनाने के लिए लचीलापन प्राप्त करते हैं।

इस आर्टिकल में, हम एक संपूर्ण ट्यूटोरियल प्रस्तुत कर रहे हैं जिसमें Back4app को Backend as a Service (BaaS) के रूप में उपयोग करते हुए, Astro.js एप्लीकेशन बनाने की प्रक्रिया को दिखाया गया है।

यह Astro.js का एक ओवरव्यू, इसकी खूबियों और सीमाओं पर चर्चा करेगा तथा Astro.js एप्लीकेशन बनाने व होस्ट करने के स्टेप-बाय-स्टेप निर्देश प्रदान करेगा।

Astro.js के फायदे

Astro.js कई प्रमुख फ़ीचर्स से संचालित है, जो इसे आधुनिक वेबसाइटों के निर्माण के लिए एक बेहतरीन विकल्प बनाते हैं, जिनमें शामिल हैं:

आइलैंड आर्किटेक्चर (Island Architecture)

आइलैंड आर्किटेक्चर एक वेब आर्किटेक्चर पैटर्न है, जिसमें एक वेब पेज को स्वतंत्र और इनकैप्सुलेटेड फीचर्स वाले छोटे-छोटे आइलैंड में विभाजित किया जाता है।

प्रत्येक आइलैंड एक ही कंपोनेंट, कंपोनेंट्स के समूह, या यहां तक कि पूरे पेज द्वारा भी दर्शाया जा सकता है।

Astro.js आपके यूज़र इंटरफ़ेस (UI) को छोटे, आइसोलेटेड कंपोनेंट्स में विभाजित करता है, जिन्हें “Astro Islands” कहा जाता है। आप इन आइलैंड्स को किसी भी पेज पर उपयोग कर सकते हैं और इस तरह, बिना उपयोग वाले JavaScript को हल्के HTML से रिप्लेस कर सकते हैं।

आइलैंड आर्किटेक्चर के कई फायदे हैं, जिनमें बेहतर परफॉर्मेंस, बढ़ी हुई फ्लेक्सिबिलिटी और आसान डेवलपमेंट शामिल हैं।

मिनिमल JavaScript

Astro “कम JavaScript” अप्रोच अपनाता है। यह केवल तभी JavaScript को क्लाइंट पर भेजता है जब इंटरएक्टिविटी के लिए आवश्यक हो। इससे JavaScript बंडल का साइज कम होता है और लोडिंग समय सुधरता है।

Astro.js में मिनिमल JavaScript के कई ठोस फायदे हैं: बेहतर वेबसाइट परफॉर्मेंस, उन्नत SEO, कम संसाधन की खपत, बेहतर सुरक्षा और ज्यादा रिस्पॉन्सिव यूज़र एक्सपीरियंस।

यह अप्रोच कुशल और उच्च-प्रदर्शन वाली वेब एप्लीकेशन देने के उद्देश्यों के अनुरूप है, जो Astro.js को आधुनिक वेब डेवलपमेंट के लिए एक आकर्षक विकल्प बनाता है।

लोकप्रिय फ्रेमवर्क्स के साथ इंटीग्रेशन

आप Astro.js को React, Svelte, Vue, और Lit सहित कई लोकप्रिय JavaScript फ्रेमवर्क्स के साथ उपयोग कर सकते हैं।

इससे आप अपनी पसंद के टूल्स का चयन कर सकते हैं, मौजूदा कंपोनेंट्स व नॉलेज का पुनः उपयोग कर सकते हैं, स्थापित इकोसिस्टम्स का लाभ उठा सकते हैं, और एक सुगम डेवलपमेंट प्रक्रिया बनाए रख सकते हैं।

यह फ्लेक्सिबिलिटी और कम्पैटिबिलिटी Astro.js को विभिन्न प्रोजेक्ट्स के लिए एक आकर्षक विकल्प बनाती है।

ऑप्टिमाइज़्ड लोडिंग

ऑप्टिमाइज़्ड लोडिंग Astro.js का मुख्य लाभ है। यह वेब पेज की डिजाइन और डिलीवरी के तरीके को बुनियादी रूप से बदल देता है, जिसका फोकस यूज़र एक्सपीरियंस और वेबसाइट परफॉर्मेंस को बेहतर बनाने पर है।

Astro विभिन्न डिवाइसों पर लोडिंग और रेंडरिंग को ऑप्टिमाइज़ करता है, जिसमें स्मार्टफ़ोन जैसे कम पॉवर वाले डिवाइस भी शामिल हैं। इसका उद्देश्य यूज़र के डिवाइस या नेटवर्क कंडीशन्स की परवाह किए बिना स्मूथ एक्सपीरियंस उपलब्ध कराना है।

Astro.js की सीमाएं

Astro.js में कुछ सीमाएं भी हैं, जिनके बारे में आपको पता होना चाहिए। उनमें से कुछ इस प्रकार हैं:

इकोसिस्टम कम्पैटिबिलिटी

Astro.js को React, Svelte और Vue.js जैसे लोकप्रिय फ्रंटेंड फ्रेमवर्क्स के साथ काम करने के लिए डिज़ाइन किया गया है। हालांकि, इसका इकोसिस्टम React या Vue जैसे फ्रेमवर्क की तुलना में कम विकसित है, इसलिए आपको Astro के लिए विशेष रूप से तैयार किए गए कम थर्ड-पार्टी लाइब्रेरीज़ या कंपोनेंट्स मिल सकते हैं।

फ्रेमवर्क की जानकारी आवश्यक

Astro.js कई फ्रंटेंड फ्रेमवर्क्स का उपयोग करने की अनुमति देता है, जिसका मतलब है कि आपको चुने हुए प्रत्येक फ्रेमवर्क की जानकारी होनी चाहिए।

कई फ्रेमवर्क्स में महारत प्राप्त करना उन डेवलपर्स के लिए चुनौतीपूर्ण हो सकता है जो किसी एक फ्रेमवर्क में विशेषज्ञ हों या वेब डेवलपमेंट में नए हों।

ऐसे प्रोजेक्ट पर काम करना जिसमें कई फ्रेमवर्क्स शामिल हैं, उनके बीच निरंतरता बनाए रखने को भी शामिल करता है।

यह काफी जटिल हो सकता है, क्योंकि हर फ्रेमवर्क की अपनी कॉन्वेंशंस और सर्वोत्तम प्रथाएं होती हैं, और इन सबको एक ही प्रोजेक्ट में एकरूप रखना कोड स्ट्रक्चर को बिखरने से रोकने के लिए चुनौतीपूर्ण साबित हो सकता है।

ऑप्टिमाइज़ेशन सीखना

ऑप्टिमाइज़ेशन सीखना से आशय उन रणनीतियों को समझने और लागू करने से है, जो किसी फ्रेमवर्क से बनी वेब एप्लीकेशन के प्रदर्शन को अधिकतम करती हैं।

हालांकि Astro.js दक्षता और स्पीड के लिए डिज़ाइन किया गया है, इसकी क्षमताओं का पूरा लाभ उठाने के लिए इसकी ऑप्टिमाइज़ेशन तकनीकों की गहन समझ और विकास प्रक्रिया में उनका सही क्रियान्वयन ज़रूरी है। यह जटिल हो सकता है और एडवांस्ड नॉलेज की मांग कर सकता है।

जर्नल एप्लीकेशन बनाना

इस ट्यूटोरियल को फॉलो करते हुए, आप Astro.js फ्रेमवर्क और React.js का उपयोग करके एक बेसिक जर्नल एप्लीकेशन बनाएंगे।

इस जर्नल एप्लीकेशन में CRUD (Create, Read, Update, Delete) फ़ंक्शनैलिटी होगी और डेटा स्टोरेज व रिट्रीवल के लिए Back4app का उपयोग किया जाएगा।

आप अपना Astro.js प्रोजेक्ट टर्मिनल में यह कमांड चलाकर बना सकते हैं:

npm create astro@latest

ऊपर दिया गया कमांड एक बेसिक Astro.js प्रोजेक्ट जेनरेट करता है और आपको एप्लीकेशन की कॉन्फ़िगरेशन के दौरान निर्देशित करता है, जिसमें TypeScript के उपयोग और उसकी स्ट्रिक्टनेस लेवल जैसी चीज़ें शामिल हैं।

React.js को अपने Astro.js प्रोजेक्ट में जोड़ने के लिए, टर्मिनल में यह कमांड चलाएँ:

npx astro add react

अब आपका प्रोजेक्ट तैयार है। आप अपनी पसंदीदा IDE के साथ एप्लीकेशन डिवेलप करना शुरू कर सकते हैं। सबसे पहले, आपको एप्लीकेशन की ग्लोबल स्टाइल्स और लेआउट को परिभाषित करना होगा।

ग्लोबल स्टाइल्स परिभाषित करने के लिए, src डायरेक्टरी में styles नाम का एक फ़ोल्डर बनाएँ। styles फ़ोल्डर में global.css नाम की फाइल बनाकर उसमें अपनी ग्लोबल स्टाइल्स लिखें।

उदाहरण के लिए:

ग्लोबल स्टाइल्स के बाद, आपका अगला कदम लेआउट को परिभाषित करना है। आप src डायरेक्टरी के layouts फ़ोल्डर में Layout.astro फाइल पाएँगे।

Layout.astro फाइल में मौजूद मौजूदा कोड को निम्नलिखित कोड ब्लॉक से बदलें:

ऊपर का कोड ब्लॉक लेआउट कंपोनेंट को दर्शाता है। यह ग्लोबल स्टाइल्स इम्पोर्ट करता है, मेटाडेटा सेट करता है, और slot एलिमेंट के माध्यम से डायनमिक कॉन्टेंट के लिए जगह उपलब्ध कराता है।

कंपोनेंट के मुख्य कॉन्टेंट में h1 हेडिंग होती है, जिसकी स्टाइल style टैग में परिभाषित की गई है।

अपनी पेजेज पर लेआउट और ग्लोबल स्टाइल्स अप्लाई करने के लिए, पेज फाइल में लेआउट कंपोनेंट को इम्पोर्ट करें और HTML सेक्शन को layout कंपोनेंट के अंदर रैप करें।

अपने होमपेज पर लेआउट अप्लाई करने के लिए, src/pages डायरेक्टरी के index.astro फाइल में भी यही स्टेप्स फॉलो करें।

उदाहरण:

यह कोड ब्लॉक आपके एप्लीकेशन का होमपेज परिभाषित करता है। इसमें “/journal” पेज का एक नेविगेशन लिंक होता है और नेविगेशन एलिमेंट को केंद्रित व व्यवस्थित करने के लिए विशेष स्टाइल्स अप्लाई की जाती हैं।

जर्नल पेज बनाने के लिए, src/pages डायरेक्टरी में journal.astro नाम से फाइल बनाएं और उसमें निम्नलिखित कोड ब्लॉक जोड़ें:

ऊपर का कोड ब्लॉक आपके एप्लीकेशन के लिए जर्नल पेज दर्शाता है। यह लेआउट कंपोनेंट को इम्पोर्ट करता है और HTML सेक्शन को रैप करके एक कंसिस्टेंट पेज स्ट्रक्चर उपलब्ध कराता है।

कोड एक जर्नल एंट्री फ़ॉर्म परिभाषित करता है, जिसमें टाइटल और बॉडी के लिए इनपुट फ़ील्ड्स और एक “Log” बटन शामिल है। style टैग में परिभाषित CSS स्टाइल्स इस फ़ॉर्म और उसके एलिमेंट्स का लुक नियंत्रित करती हैं।

अपने एप्लीकेशन को वेब ब्राउज़र में देखने के लिए, एप्लीकेशन का डेवलपमेंट सर्वर स्टार्ट करें। टर्मिनल में प्रोजेक्ट डायरेक्टरी में जाएं और निम्न कमांड चलाएँ:

npm run dev

ऊपर दिया गया कमांड आपको http://localhost:4321/ लिंक देता है। इसे अपने वेब ब्राउज़र में खोलें, जहाँ आप अपना एप्लीकेशन देख सकेंगे।

होम पेज कुछ इस तरह दिखाई देगा:

जर्नल ऐप होमपेज

जर्नल पेज देखने के लिए, नेविगेशन लिंक “Log your experience.” पर क्लिक करें।

जर्नल पेज

Back4app को अपने एप्लीकेशन के साथ इंटीग्रेट करना

Back4app एक क्लाउड-आधारित बैकएंड सेवा प्लेटफ़ॉर्म है, जिसे एप्लीकेशन के विकास और प्रबंधन को आसान बनाने के लिए डिज़ाइन किया गया है, और हम Astro.js के बैकएंड के रूप में Back4app का इस्तेमाल करेंगे।

ओपन-सोर्स Parse Server फ्रेमवर्क पर आधारित होने के कारण, यह डेवलपर्स को कई टूल्स उपलब्ध कराता है, जिससे वे फ्रंट-एंड डेवलपमेंट पर फोकस कर सकते हैं और बैक-एंड की जटिलताओं को सरल बना सकते हैं।

इसके मूल में, Back4app आधुनिक ऐप डेवलपमेंट के लिए महत्वपूर्ण फ़ंक्शनैलिटीज़ प्रदान करता है, जैसे डेटा स्टोरेज, यूज़र ऑथेंटिकेशन, और रियल-टाइम डाटाबेस।

यह विभिन्न प्रोग्रामिंग लैंग्वेज और फ्रेमवर्क्स को सपोर्ट करता है, जिससे यह विभिन्न डेवलपमेंट ज़रूरतों के अनुरूप बन जाता है।

Back4app अकाउंट बनाना

Back4app की सुविधाओं का लाभ उठाने के लिए आपको एक Back4app अकाउंट की जरूरत होगी। इसे बनाने के लिए ये आसान स्टेप्स फॉलो करें:

  1. Back4app की वेबसाइट पर जाएँ।
  2. “Sign up” बटन पर क्लिक करें।
  3. साइन-अप फॉर्म भरें और सबमिट करें।

Back4app ChatGPT प्लगइन का परिचय

हाल ही में Back4app ने अपना ChatGPT प्लगइन पेश किया है, जिससे डेवलपर्स और गैर-टेक्निकल यूज़र Back4app एप्लीकेशन बना और उनसे इंटरएक्ट कर सकते हैं।

Back4app ChatGPT प्लगइन का उपयोग करके, आप अपनी बातचीत को वास्तविक एप्लीकेशन में बदल सकते हैं। इसका मतलब है कि आपको शुरुआत में Back4app प्लेटफ़ॉर्म की जानकारी होने की ज़रूरत नहीं है।

ChatGPT प्लगइन का उपयोग करने के लिए, आपको ChatGPT Plus की सब्सक्रिप्शन लेनी होगी। सब्सक्राइब करने के बाद, “GPT-4” बटन पर क्लिक करें, जिससे एक पॉपओवर मेन्यू खुलेगा। वहां से “Plugins” ऑप्शन चुनें।

GPT-4 प्लगइन्स

इसके बाद आपके सामने उपलब्ध प्लगइन्स की लिस्ट दिखाई देगी। इनमें से Back4app प्लगइन का चयन करें (सर्च बार में “Back4app” टाइप करके खोजें)।

Back4app प्लगइन चुनें

प्लगइन से Back4app एप्लीकेशन बनाना

ChatGPT पर Back4app प्लगइन का उपयोग करके Back4app एप्लीकेशन बनाना बहुत ही आसान है। ChatGPT को बस यह बताएं कि आप किस प्रकार की एप्लीकेशन बनाना चाहते हैं और बाकी काम यह संभाल लेगा।

उदाहरण के लिए:

Back4app प्लगइन का उपयोग करके एप्लीकेशन बनाएं

ऊपर दिखाई गई इमेज में, Back4app ChatGPT प्लगइन ने “Journal application” नाम से एक Back4app एप्लीकेशन क्रिएट किया है।

सुनिश्चित करने के लिए कि Back4app ChatGPT प्लगइन ने एप्लीकेशन सफलतापूर्वक बनाई है, Back4app की वेबसाइट पर जाएँ, अपने अकाउंट में लॉग इन करें और अपनी ऐप्स जांचें। आपको अपनी एप्लीकेशन लिस्ट में “journal application” नाम की एप्लीकेशन दिखाई देनी चाहिए।

Back4app डैशबोर्ड

प्लगइन का उपयोग करके, जर्नल एप्लीकेशन में एक जर्नल क्लास भी बना लें।

जर्नल क्लास बनाएं

ऊपर दी गई इमेज में, Back4app ChatGPT प्लगइन जर्नल क्लास बनाता है और उसमें टाइटल, कंटेंट, एवं डेट फील्ड जोड़ता है।

Back4app एप्लीकेशन में डेटा जोड़ना

Back4app ChatGPT प्लगइन का उपयोग करके, आप एप्लीकेशन में कस्टम डेटा भी जोड़ सकते हैं। उदाहरण के लिए, आप टाइटल और कंटेंट फील्ड्स में कस्टम टेक्स्ट जोड़ सकते हैं।

प्लगइन का उपयोग करके डेटा जोड़ें

टेक्स्ट जोड़ने के बाद, एप्लीकेशन डैशबोर्ड पर जाएँ, जर्नल क्लास पर क्लिक करें और देखें कि टेक्स्ट जुड़ गया है या नहीं।

जर्नल क्लास में डेटा कन्फर्म करें

Back4app से कनेक्ट करना

अपनी जर्नल ऐप को Back4app एप्लीकेशन से कनेक्ट करने के लिए, आपको अपनी एप्लीकेशन में Parse JavaScript SDK इंस्टॉल करना होगा।

इसके लिए, अपने टर्मिनल में निम्न कमांड चलाएँ:

npm install parse 

Parse JavaScript SDK इंस्टॉल करने के बाद, आपको Application ID और Javascript KEY क्रेडेंशियल्स की आवश्यकता होगी।

आप इन्हें अपने Back4app ऐप के डैशबोर्ड के Security & Keys सेक्शन में पा सकते हैं। Application ID और Javascript KEY को सुरक्षा पूर्वक अपने एप्लीकेशन में स्टोर करें।

एप्लीकेशन से Back4app में डेटा जोड़ना

इस आर्टिकल के पहले हिस्से में आपने सीखा कि Back4app ChatGPT प्लगइन का इस्तेमाल करके Back4app में डेटा कैसे जोड़ते हैं। अब अपनी जर्नल एप्लीकेशन से ऐसा करने के लिए आप Parse JavaScript SDK का उपयोग करेंगे।

journal.astro फाइल में निम्न कोड ब्लॉक जोड़ें:

यह कोड ब्लॉक Parse को इंटीग्रेट करके जर्नल एंट्रीज़ को बनाने और सेव करने का काम करता है। यह parse/dist/parse.min.js से Parse को इम्पोर्ट करता है और initialize मेथड को कॉल करता है।

यह मेथड Application_ID और Javascript_KEY क्रेडेंशियल्स को बतौर आर्गुमेंट लेता है। इसके बाद Parse पर serverURL प्रॉपर्टी को https://parseapi.back4app.com/ पर सेट किया जाता है।

कोड DOM से input, textarea, और button एलिमेंट्स को सिलेक्ट करता है और इन्हें title, body, और button वेरिएबल्स में स्टोर करता है।

input फील्ड जर्नल एंट्री का टाइटल लेती है और textarea फील्ड उस एंट्री के बॉडी को।

addJournal फ़ंक्शन में Back4app डाटाबेस में डेटा जोड़ने की पूरी लॉजिक लिखी गई है। यह एक Journal ऑब्जेक्ट बनाता है, उसके title और content प्रॉपर्टीज को input और textarea एलिमेंट्स के मान से सेट करता है, और इसे Back4app पर सेव करता है।

addEventListener मेथड के द्वारा, कोड बटन पर एक इवेंट लिस्नर जोड़ता है, जिससे बटन क्लिक होते ही addJournal फ़ंक्शन कॉल हो जाए।

Back4app से डेटा फेच करना

Back4app से डेटा फेच करके अपने एप्लीकेशन में प्रदर्शित करने के लिए, आप एक React कंपोनेंट का उपयोग करेंगे। src/components डायरेक्टरी में Journal.tsx फाइल बनाएं। इस फाइल में Parse लाइब्रेरी को इम्पोर्ट और इनिशियलाइज़ करें।

उदाहरण:

इसके बाद, कंपोनेंट के JSX एलिमेंट्स को परिभाषित करें:

इसके बाद, एक जर्नल स्टेट बनाएं और Back4app से डेटा फेच करने के लिए एक फ़ंक्शन परिभाषित करें:

उदाहरण:

Parse.Query मेथड के साथ, fetchJournal फ़ंक्शन Journal क्लास से डेटा रिट्रीव करने के लिए Parse SDK का उपयोग करता है।

क्वेरी ऑब्जेक्ट का find मेथड क्वेरी के रिज़ल्ट्स वाला एक ऐरे रिटर्न करता है और setJournal फ़ंक्शन रिट्रीव किए गए डेटा के साथ journal स्टेट को अपडेट करता है।

यह कोड useEffect हुक का प्रयोग करता है, जिससे कंपोनेंट माउंट होने पर fetchJournal कॉल हो जाता है। अब, कंपोनेंट में journal स्टेट की कंटेंट को डिस्प्ले करें:

उदाहरण:

ऊपर का कोड ब्लॉक जर्नल एंट्रीज़ को div एलिमेंट्स के रूप में रेंडर करता है, जिनमें प्रत्येक के लिए एक “Delete” बटन भी दिया गया है।

यह प्रत्येक एंट्री के टाइटल और कंटेंट को h3 और p टैग में दिखाता है और “Delete” बटन के माध्यम से यूज़र्स को एंट्री को हटाने की सुविधा देता है।

अपने जर्नल कंपोनेंट में परिभाषित JSX एलिमेंट्स को स्टाइल करने के लिए, global.css फाइल में निम्नलिखित स्टाइल्स जोड़ें:

अब, अपने होमपेज पर जर्नल कंपोनेंट को डिस्प्ले करें। ऐसा करने के लिए, index.astro फाइल में मौजूद मौजूदा कोड को निम्न कोड ब्लॉक से बदलें:

यह कोड ब्लॉक जर्नल कंपोनेंट को इम्पोर्ट करके रेंडर करता है। client:load डाइरेक्टिव सुनिश्चित करता है कि जर्नल कंपोनेंट पेज लोड होते ही दिखने लगे, जिससे यूज़र्स को स्मूथ और रिस्पॉन्सिव अनुभव मिले।

Back4app से डेटा डिलीट करना

अपने एप्लीकेशन में प्रत्येक एंट्री के साथ दिखने वाले डिलीट बटन को फंक्शनल बनाने के लिए, आपको एक फ़ंक्शन परिभाषित करना होगा जो चुनिंदा एंट्री को डिलीट करे। फिर आप इस फ़ंक्शन को क्लिक इवेंट से बाइंड कर देंगे।

उदाहरण:

deleteJournal फ़ंक्शन Parse.Object.extend मेथड का उपयोग करके एक नया Journal ऑब्जेक्ट बनाता है। फिर इस ऑब्जेक्ट के id प्रॉपर्टी को फ़ंक्शन को मिले id पैरामीटर पर सेट करता है।

इसके बाद, यह “Journal” ऑब्जेक्ट के destroy असिंक्रोनस मेथड को कॉल करता है, जो Back4app से दिए गए id वाली जर्नल एंट्री को डिलीट कर देता है।

filter मेथड का उपयोग करके, फ़ंक्शन journal स्टेट से उस एंट्री को हटा देता है जिसके id की मैचिंग होती है, और एक नया ऐरे बनता है जिसमें डिलीट की गई एंट्री शामिल नहीं होती।

अंत में, setJournal मेथड का उपयोग करके, नया ऐरे journal स्टेट में सेट किया जाता है।

अब deleteJournal फ़ंक्शन को “Delete” बटन से क्लिक इवेंट हैंडलर के जरिए बाइंड करें। इससे आपका Journal.tsx फाइल में JSX एलिमेंट्स कुछ इस तरह दिखेंगे:

एप्लीकेशन की टेस्टिंग

अब जब आपने एप्लीकेशन का निर्माण पूरा कर लिया है, तो इसका टेस्ट करना महत्वपूर्ण है। इसके लिए, टर्मिनल पर जाएँ, डेवलपमेंट सर्वर चलाएँ और अपने वेब ब्राउज़र में एप्लीकेशन देखें।

एप्लीकेशन कुछ इस तरह दिखेगा:

जर्नल एप्लीकेशन होमपेज

“Log your experience” पर क्लिक करें ताकि आप एप्लीकेशन के जर्नल पेज पर जा सकें, और इनपुट फ़ील्ड्स में जानकारी भरें।

एक और जर्नल एंट्री जोड़ना

इनपुट फ़ील्ड्स भरने के बाद, “Log” पर क्लिक करें ताकि डेटा आपके Back4app डाटाबेस में जुड़ जाए। फिर होम पेज पर वापस जाएं।

होम पेज पर नई जर्नल एंट्री

अब यह जांचने के लिए कि आप किसी एंट्री को डिलीट कर सकते हैं, “My First Day Journaling” एंट्री का डिलीट बटन दबाएँ। आपका होम पेज अब कुछ इस तरह दिखना चाहिए:

जर्नल एंट्री डिलीट करें

निष्कर्ष

इस आर्टिकल में, आपने Astro.js फ्रेमवर्क के बारे में सीखा, इसके फायदे और संभावित कमियों पर चर्चा की, और React लाइब्रेरी के साथ सहज इंटीग्रेशन करते हुए एक Astro एप्लीकेशन बनाना सीखा।

Astro.js विभिन्न प्रकार की वेबसाइटों के निर्माण के लिए उत्कृष्ट विकल्प है—चाहे वह सरल लैंडिंग पेज हो या जटिल वेब एप्लीकेशन। यह विशेष रूप से तेज़, हल्की और स्केलेबल वेबसाइटों के लिए उपयुक्त है।

और अधिक जानकारी के लिए, कृपया How to create a backend for Astro.js ट्यूटोरियल पढ़ें।


Leave a reply

Your email address will not be published.