कदम-दर-कदम निर्देश

सिलसिलेवार निर्देशों की इस सीरीज़ में, Classroom ऐड-ऑन के काम करने वाले सभी हिस्सों के बारे में बताया गया है. सिलसिलेवार तरीके से दिए गए हर चरण में, खास कॉन्सेप्ट को समझने की कोशिश की जाती है. साथ ही, उन्हें एक ही वेब ऐप्लिकेशन में लागू किया जाता है. इसका मकसद ऐड-ऑन को सेट अप करने, कॉन्फ़िगर करने, और लॉन्च करने में आपकी मदद करना है.

यह ज़रूरी है कि आपका ऐड-ऑन, Google Cloud प्रोजेक्ट के साथ इंटरैक्ट करे. अगर आपको Google Cloud के बारे में नहीं पता है, तो हमारा सुझाव है कि आप शुरुआती निर्देश पढ़ें. Google Cloud Console में क्रेडेंशियल, एपीआई ऐक्सेस, और Google Workspace Marketplace SDK टूल को मैनेज किया जा सकता है. Marketplace SDK टूल के बारे में ज़्यादा जानकारी के लिए, Google Workspace Marketplace की लिस्टिंग गाइड पेज पर जाएं.

इस गाइड में ये विषय शामिल हैं:

  • Classroom में iframe में दिखाने के लिए पेज बनाने के लिए, Google Cloud का इस्तेमाल करें.
  • Google सिंगल साइन-ऑन (SSO) जोड़ें और उपयोगकर्ताओं को साइन इन करने की अनुमति दें.
  • अपने ऐड-ऑन को किसी असाइनमेंट में अटैच करने के लिए, एपीआई कॉल करें.
  • मुख्य ऐड-ऑन सबमिशन की ज़रूरी शर्तों और ज़रूरी सुविधाओं को पूरा करें.

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

लागू करने का उदाहरण

रेफ़रंस फ़ाइल का एक पूरा उदाहरण, Python में उपलब्ध है. कुछ हद तक लागू करने की सुविधा, Java और Node.js में भी उपलब्ध है. ये लागू करने का तरीका, बाद के पेजों में मिले उदाहरण कोड के सोर्स हैं.

कहां से डाउनलोड करें

Python और Java के उदाहरण, GitHub डेटा स्टोर करने की जगहों में उपलब्ध हैं:

Node.js के सैंपल को ZIP फ़ाइल के तौर पर डाउनलोड किया जा सकता है:

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

नया ऐड-ऑन प्रोजेक्ट तैयार करने के लिए, नीचे दिए गए सेक्शन देखें.

एचटीटीपीएस सर्टिफ़िकेट

हालांकि, आपके पास अपने ऐप्लिकेशन को किसी भी डेवलपमेंट एनवायरमेंट पर होस्ट करने का विकल्प है. हालांकि, Classroom ऐड-ऑन की सुविधा सिर्फ़ https:// पर उपलब्ध है. इसलिए, अपने ऐप्लिकेशन को डिप्लॉय करने या ऐड-ऑन iframe में उसकी जांच करने के लिए, आपको एसएसएल एन्क्रिप्शन वाले सर्वर की ज़रूरत होगी.

एसएसएल सर्टिफ़िकेट के साथ localhost का इस्तेमाल किया जा सकता है. अगर आपको लोकल डेवलपमेंट के लिए सर्टिफ़िकेट बनाना है, तो mkcert का इस्तेमाल करें.

Google Cloud प्रोजेक्ट

आपको इन उदाहरणों के साथ इस्तेमाल करने के लिए, Google Cloud प्रोजेक्ट को कॉन्फ़िगर करना होगा. शुरू करने के ज़रूरी चरणों के बारे में खास जानकारी पाने के लिए, Google Cloud प्रोजेक्ट बनाने से जुड़ी गाइड देखें. सिलसिलेवार तरीके से दिए गए पहले चरण में, Google Cloud प्रोजेक्ट सेट अप करें सेक्शन में, कॉन्फ़िगरेशन से जुड़ी खास कार्रवाइयों के बारे में भी बताया गया है.

काम पूरा हो जाने पर, अपने OAuth 2.0 क्लाइंट आईडी को JSON फ़ाइल के तौर पर डाउनलोड करें. आपको इस क्रेडेंशियल फ़ाइल को अनज़िप की गई उदाहरण वाली डायरेक्ट्री में जोड़ना होगा. खास जगहों के बारे में जानने के लिए, फ़ाइलों को समझना लेख पढ़ें.

OAuth क्रेडेंशियल

नए OAuth क्रेडेंशियल बनाने के लिए यह तरीका अपनाएं:

  • Google Cloud क्रेडेंशियल पेज पर जाएं. पक्का करें कि आपने स्क्रीन पर सबसे ऊपर सही प्रोजेक्ट चुना हो.
  • क्रेडेंशियल बनाएं पर क्लिक करें और ड्रॉप-डाउन से OAuth क्लाइंट आईडी चुनें.
  • अगले पेज पर:
    • ऐप्लिकेशन टाइप को वेब ऐप्लिकेशन पर सेट करें.
    • अनुमति वाले रीडायरेक्ट यूआरआई में जाकर, यूआरआई जोड़ें पर क्लिक करें. अपने ऐप्लिकेशन के कॉलबैक रूट का पूरा पाथ जोड़ें. उदाहरण के लिए, https://my.domain.com/auth-callback या https://localhost:5000/callback. सिलसिलेवार तरीके से दिए गए निर्देशों में, आपने बाद में इस रास्ते को बनाया और मैनेज किया. आपके पास किसी भी समय इस तरह के और रास्तों की जानकारी में बदलाव करने या जोड़ने का विकल्प होता है.
    • बनाएं पर क्लिक करें.
  • इसके बाद आपको अपने नए बनाए गए क्रेडेंशियल के साथ एक डायलॉग मिलेगा. JSON डाउनलोड करें विकल्प चुनें. डाउनलोड की गई JSON फ़ाइल को अपने सर्वर डायरेक्ट्री में कॉपी करें.

भाषा के हिसाब से ज़रूरी शर्तें

ज़रूरी शर्तों की सबसे अप-टू-डेट सूची के लिए, हर रिपॉज़िटरी में README फ़ाइल देखें.

Python

हमारे Python के उदाहरण में Flask फ़्रेमवर्क का इस्तेमाल किया गया है. दिए गए लिंक से पूरा सोर्स कोड डाउनलोड किया जा सकता है.

अगर ज़रूरी हो, तो Python 3.7+ इंस्टॉल करें और पक्का करें कि pip उपलब्ध है.

python3 -m ensurepip --upgrade

हमारा यह भी सुझाव है कि आप Python वर्चुअल एनवायरमेंट को सेट अप और चालू करें.

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

डाउनलोड किए गए उदाहरणों में, सिलसिलेवार तरीके से निर्देश देने वाली हर सबडायरेक्ट्री के लिए, requirements.txt है. pip का इस्तेमाल करके, ज़रूरी लाइब्रेरी को तुरंत इंस्टॉल किया जा सकता है. पहले सिलसिलेवार तरीके से ज़रूरी लाइब्रेरी इंस्टॉल करने के लिए, नीचे दिए गए निर्देशों का पालन करें.

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

हमारा Node.js उदाहरण एक्सप्रेस फ़्रेमवर्क का इस्तेमाल करता है. दिए गए लिंक से पूरा सोर्स कोड डाउनलोड किया जा सकता है.

इस उदाहरण के लिए, Node.js v16.13 या इसके बाद का वर्शन होना चाहिए.

npm का इस्तेमाल करके, ज़रूरी नोड मॉड्यूल इंस्टॉल करें.

npm install

Java

हमारे Java उदाहरण में स्प्रिंग बूट फ़्रेमवर्क का इस्तेमाल किया गया है. दिए गए लिंक से पूरा सोर्स कोड डाउनलोड किया जा सकता है.

अगर आपने Java 11+ को पहले से अपने कंप्यूटर पर इंस्टॉल नहीं किया है, तो उसे इंस्टॉल करें.

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

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

java --version
./mvnw --version

या Windows पर:

java -version
mvnw.cmd --version

फ़ाइलों को समझें

नीचे दिए सेक्शन में, उदाहरण के तौर पर दी गई डायरेक्ट्री के लेआउट के बारे में बताया गया है.

डायरेक्ट्री के नाम

हर रिपॉज़िटरी में कई डायरेक्ट्री होती हैं, जिनके नाम किसी संख्या से शुरू होते हैं, जैसे कि /01-basic-app/. ये आंकड़े, सिलसिलेवार तरीके से दिए गए निर्देशों के हिसाब से हैं. हर डायरेक्ट्री में पूरी तरह से फ़ंक्शनल वेब ऐप्लिकेशन होता है, जो सिलसिलेवार तरीके से बताए गए सुविधाओं को लागू करता है. उदाहरण के लिए, /01-basic-app/ डायरेक्ट्री में ऐड-ऑन बनाने के लिए सिलसिलेवार तरीके से निर्देश देने वाला फ़ाइनल टेस्ट शामिल होता है.

डायरेक्ट्री का कॉन्टेंट

डायरेक्ट्री का कॉन्टेंट, लागू करने के लिए इस्तेमाल की जाने वाली भाषा के हिसाब से अलग-अलग होता है:

Python

  • डायरेक्ट्री रूट में ये फ़ाइलें शामिल होती हैं:

    • main.py - Python ऐप्लिकेशन का एंट्री पॉइंट. वह सर्वर कॉन्फ़िगरेशन तय करें जिसका इस्तेमाल आपको इस फ़ाइल में करना है. इसके बाद, सर्वर चालू करने के लिए उसे चलाएं.
    • requirements.txt - वेब ऐप्लिकेशन को चलाने के लिए ज़रूरी Python मॉड्यूल. pip install -r requirements.txt का इस्तेमाल करके, ये अपने-आप इंस्टॉल हो सकते हैं.
    • client_secret.json - क्लाइंट की सीक्रेट फ़ाइल, जिसे Google Cloud से डाउनलोड किया गया है. ध्यान दें कि यह उदाहरण संग्रह में शामिल नहीं है; आपको अपनी डाउनलोड की गई क्रेडेंशियल फ़ाइल का नाम बदलना और उसे हर डायरेक्ट्री रूट में कॉपी करना चाहिए.

  • config.py - फ़्लास्क सर्वर के लिए कॉन्फ़िगरेशन के विकल्प.

  • webapp डायरेक्ट्री में वेब ऐप्लिकेशन का कॉन्टेंट होता है. इसमें ये शामिल हैं:

  • अलग-अलग पेजों के लिए, Jinja टेंप्लेट के साथ /templates/ डायरेक्ट्री.

  • /static/ डायरेक्ट्री, जिसमें इमेज, सीएसएस, और एंसीलरी JavaScript फ़ाइलें हैं.

  • routes.py - वेब ऐप्लिकेशन रूट के लिए हैंडलर तरीके.

  • __init__.py - webapp मॉड्यूल के लिए शुरू करने वाला. यह शुरू करने वाला टूल, फ़्लास्क सर्वर को शुरू करता है और config.py में सेट किए गए कॉन्फ़िगरेशन के विकल्प लोड करता है.

  • सिलसिलेवार तरीके से दिए गए निर्देशों के मुताबिक, ज़रूरत के मुताबिक अन्य फ़ाइलें.

Node.js

पैदल चलने के हर चरण को उसके <step> सब-फ़ोल्डर में देखा जा सकता है. हर चरण में शामिल हैं:

  • JavaScript, सीएसएस, और इमेज जैसी स्टैटिक फ़ाइलें ./<step>/public फ़ोल्डर में पाई जाती हैं.
  • एक्सप्रेस राऊटर ./<step>/routes फ़ोल्डर में पाए जाते हैं.
  • ./<step>/views फ़ोल्डर में एचटीएमएल टेंप्लेट मौजूद होते हैं.
  • सर्वर ऐप्लिकेशन ./<step>/app.js है.

Java

प्रोजेक्ट डायरेक्ट्री में ये चीज़ें शामिल हैं:

  • ऐप्लिकेशन को चलाने के लिए, src.main डायरेक्ट्री में सोर्स कोड और कॉन्फ़िगरेशन शामिल होता है. इस डायरेक्ट्री में ये शामिल हैं: + java.com.addons.spring डायरेक्ट्री में Application.java और Controller.java फ़ाइलें शामिल हैं. Application.java फ़ाइल, ऐप्लिकेशन सर्वर को चलाने के लिए ज़िम्मेदार है, जबकि Controller.java फ़ाइल एंडपॉइंट लॉजिक को हैंडल करती है. + resources डायरेक्ट्री में एचटीएमएल और JavaScript फ़ाइलों वाली templates डायरेक्ट्री शामिल है. इसमें application.properties फ़ाइल भी होती है, जो सर्वर को चलाने के लिए पोर्ट, कीस्टोर फ़ाइल के पाथ, और templates डायरेक्ट्री के पाथ के बारे में बताती है. इस उदाहरण में, resources डायरेक्ट्री में मौजूद कीस्टोर फ़ाइल शामिल है. इसे अपनी पसंद के हिसाब से कहीं भी सेव किया जा सकता है. हालांकि, पाथ के साथ application.properties फ़ाइल को ज़रूर अपडेट करें.
    • pom.xml में प्रोजेक्ट बनाने और ज़रूरी डिपेंडेंसी तय करने के लिए ज़रूरी जानकारी शामिल है.
    • .gitignore में ऐसे फ़ाइल नाम हैं जिन्हें git में अपलोड नहीं किया जाना चाहिए. पक्का करें कि आपने इस .gitignore में, अपने कीस्टोर में पाथ जोड़ा हो. दिए गए उदाहरण में, यह secrets/*.p12 है (कीस्टोर के मकसद के बारे में नीचे दिए गए सेक्शन में बताया गया है). सिलसिलेवार तरीके से दिए गए चरण 2 और इसके बाद के लिए, आपको अपनी client_secret.json फ़ाइल का पाथ भी शामिल करना चाहिए. इससे, यह पक्का किया जा सकता है कि आप किसी रिमोट रिपॉज़िटरी (डेटा स्टोर करने की जगह) में अपने सीक्रेट शामिल न करें. चरण 3 और उसके बाद के चरणों के लिए, आपको H2 डेटाबेस फ़ाइल और फ़ाइल डेटास्टोर फ़ैक्ट्री में पाथ जोड़ना चाहिए. इन डेटा स्टोर के सेटअप के बारे में ज़्यादा जानकारी, वेबसाइट पर बार-बार होने वाली विज़िट को मैनेज करने के बारे में तीसरे चरण में दी गई जानकारी में मिल सकती है.
    • mvnw और mvnw.cmd, Unix और Windows के लिए Maven रैपर का एक्ज़ीक्यूटेबल हैं. उदाहरण के लिए, Unix पर ./mvnw --version चलाने से, अन्य जानकारी के साथ-साथ Apache Maven वर्शन भी मिलता है.
    • .mvn डायरेक्ट्री में, Maven रैपर के लिए कॉन्फ़िगरेशन शामिल है.

सैंपल सर्वर चलाएं

इसकी जांच करने के लिए, आपको अपना सर्वर लॉन्च करना होगा. अपनी पसंद की भाषा में उदाहरण सर्वर चलाने के लिए इन निर्देशों का पालन करें:

Python

OAuth क्रेडेंशियल

ऊपर बताए गए तरीके से, OAuth क्रेडेंशियल बनाएं और उन्हें डाउनलोड करें. JSON फ़ाइल को अपने ऐप्लिकेशन की सर्वर लॉन्च फ़ाइल के साथ, रूट डायरेक्ट्री में रखें.

सर्वर को कॉन्फ़िगर करना

वेब सर्वर चलाने के लिए आपके पास कई विकल्प हैं. अपनी Python फ़ाइल के आखिर में, इनमें से कोई एक जोड़ें:

  1. localhost असुरक्षित है. ध्यान दें कि यह सिर्फ़ ब्राउज़र विंडो में सीधे टेस्ट करने के लिए सही है; असुरक्षित डोमेन को Classroom ऐड-ऑन iframe में लोड नहीं किया जा सकता.

    if __name__ == "__main__":
      # Disable OAuthlib's HTTPs verification.
      os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"
    
      # Run the web app at http://localhost:5000.
      app.run(debug=True)
    
  2. localhost को सुरक्षित करें. आपको ssl_context आर्ग्युमेंट के लिए, एसएसएल कुंजी की फ़ाइलों का एक टपल तय करना होगा.

    if __name__ == "__main__":
      # Run the web app at https://localhost:5000.
      app.run(host="localhost",
              ssl_context=("localhost.pem", "localhost-key.pem"),
              debug=True)
    
  3. Gunicorn सर्वर. यह प्रोडक्शन के लिए तैयार सर्वर या क्लाउड डिप्लॉयमेंट के लिए सही है. हमारा सुझाव है कि इस लॉन्च विकल्प के साथ इस्तेमाल करने के लिए, PORT एनवायरमेंट वैरिएबल सेट करें.

    if __name__ == "__main__":
      # Run the web app at https://<your domain>:<server_port>.
      # Defaults to https://<your domain>:8080.
      server_port = os.environ.get("PORT", "8080")
      app.run(debug=True, port=server_port, host="0.0.0.0")
    

सर्वर लॉन्च करना

पिछले चरण में कॉन्फ़िगर किए गए तरीके से सर्वर को लॉन्च करने के लिए, अपना Python ऐप्लिकेशन चलाएं.

python main.py

आपका वेब ऐप्लिकेशन ठीक से काम कर रहा है या नहीं, इसकी पुष्टि करने के लिए ब्राउज़र में उस यूआरएल पर क्लिक करें.

Node.js

सर्वर को कॉन्फ़िगर करना

सर्वर को एचटीटीपीएस पर चलाने के लिए, आपको एक सेल्फ़-सर्टिफ़िकेट बनाना होगा. इसका इस्तेमाल करके, ऐप्लिकेशन को एचटीटीपीएस पर चलाया जा सकता है. इन क्रेडेंशियल को डेटा स्टोर करने की जगह के रूट फ़ोल्डर में, sslcert/cert.pem और sslcert/key.pem के तौर पर सेव किया जाना चाहिए. आपको इन कुंजियों को अपनी ओएस की चेन में जोड़ना पड़ सकता है, ताकि आपका ब्राउज़र इन्हें स्वीकार कर सके.

पक्का करें कि आपकी .gitignore फ़ाइल में *.pem मौजूद हो, क्योंकि आपको फ़ाइल को git के साथ इस्तेमाल नहीं करना है.

सर्वर लॉन्च करना

आप जिस चरण को सर्वर के रूप में चलाना चाहते हैं उसके सही चरण के लिए, आप step01 को बदलकर नीचे दिए गए निर्देश का इस्तेमाल करके ऐप्लिकेशन चला सकते हैं (उदाहरण के लिए, 01-basic-app के लिए step01 और 02-साइन-इन के लिए step02).

npm run step01

या

npm run step02

इससे https://localhost:5000 पर वेब सर्वर लॉन्च हो जाएगा.

अपने टर्मिनल में, Control + C का इस्तेमाल करके सर्वर को बंद किया जा सकता है.

Java

सर्वर को कॉन्फ़िगर करना

सर्वर को एचटीटीपीएस पर चलाने के लिए, आपको एक सेल्फ़-सर्टिफ़िकेट बनाना होगा. इसका इस्तेमाल करके, ऐप्लिकेशन को एचटीटीपीएस पर चलाया जा सकता है.

स्थानीय डेवलपमेंट के लिए mkcert का इस्तेमाल करने के बारे में सोचें. mkcert इंस्टॉल करने के बाद, नीचे दिए गए निर्देश, एचटीटीपीएस पर चलाने के लिए स्थानीय तौर पर सेव किया गया सर्टिफ़िकेट जनरेट करते हैं.

mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>

इस उदाहरण में, रिसॉर्स डायरेक्ट्री में मौजूद कीस्टोर फ़ाइल शामिल है. इसे अपनी पसंद के हिसाब से कहीं भी सेव किया जा सकता है. हालांकि, application.properties फ़ाइल को पाथ के हिसाब से अपडेट करना न भूलें. डोमेन नेम वह डोमेन होता है जिस पर प्रोजेक्ट चलाया जाता है (उदाहरण के लिए, localhost).

पक्का करें कि आपकी .gitignore फ़ाइल में *.p12 मौजूद हो, क्योंकि आपको फ़ाइल को git के साथ इस्तेमाल नहीं करना है.

सर्वर लॉन्च करना

Application.java फ़ाइल में main तरीका चलाकर सर्वर लॉन्च करें. उदाहरण के लिए, IntelliJ में, src/main/java/com/addons/spring डायरेक्ट्री में Application.java > Run 'Application' पर राइट क्लिक करें या main(String[] args) मेथड सिग्नेचर की बाईं ओर मौजूद हरे रंग के ऐरो पर क्लिक करने के लिए, Application.java फ़ाइल खोलें. इसके अलावा, प्रोजेक्ट को टर्मिनल विंडो में भी चलाया जा सकता है:

./mvnw spring-boot:run

या Windows पर:

mvnw.cmd spring-boot:run

इससे https://localhost:5000 या application.properties में बताए गए पोर्ट पर सर्वर लॉन्च होगा.