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

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

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

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

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

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

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

रेफ़रंस का पूरा उदाहरण 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 उदाहरण में, Express फ़्रेमवर्क का इस्तेमाल किया गया है. दिए गए लिंक से, पूरा सोर्स कोड डाउनलोड किया जा सकता है.

इस उदाहरण के लिए, Node.js v16.13 या इसके बाद का वर्शन ज़रूरी है.

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

npm install

Java

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

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

Spring Boot ऐप्लिकेशन, बिल्ड मैनेज करने और डिपेंडेंसी मैनेज करने के लिए, Gradle या 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 - Flask सर्वर के लिए कॉन्फ़िगरेशन के विकल्प.

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

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

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

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

  • __init__.py - webapp मॉड्यूल के लिए शुरुआती फ़ंक्शन. यह शुभारंभ करने वाला टूल, Flask सर्वर को शुरू करता है और 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 डायरेक्ट्री में templates डायरेक्ट्री होती है, जिसमें एचटीएमएल और JavaScript फ़ाइलें होती हैं. इसमें application.properties फ़ाइल भी शामिल होती है. इसमें, सर्वर को चलाने के लिए पोर्ट, पासकोड वाली फ़ाइल का पाथ, और templates डायरेक्ट्री का पाथ शामिल होता है. इस उदाहरण में, resources डायरेक्ट्री में कीस्टोर फ़ाइल शामिल है. इसे अपनी पसंद के मुताबिक कहीं भी सेव किया जा सकता है. हालांकि, पक्का करें कि आपने application.properties फ़ाइल को उसी पाथ के साथ अपडेट किया हो.
    • pom.xml में प्रोजेक्ट बनाने और ज़रूरी डिपेंडेंसी तय करने के लिए ज़रूरी जानकारी होती है.
    • .gitignore में फ़ाइल के ऐसे नाम शामिल हैं जिन्हें git पर अपलोड नहीं किया जाना चाहिए. पक्का करें कि आपने इस .gitignore में अपने पासकोड का पाथ जोड़ा हो. दिए गए उदाहरण में, यह secrets/*.p12 है (कीस्टोर के मकसद के बारे में नीचे दिए गए सेक्शन में बताया गया है). दूसरे और उसके बाद के वॉकथ्रू के लिए, आपको अपनी client_secret.json फ़ाइल का पाथ भी शामिल करना चाहिए. इससे यह पक्का किया जा सकेगा कि आपने अपने पासवर्ड को किसी रिमोट रिपॉज़िटरी में शामिल न किया हो. तीसरे और उसके बाद के वॉकथ्रू के लिए, आपको H2 डेटाबेस फ़ाइल और फ़ाइल डेटास्टोर फ़ैक्ट्री का पाथ जोड़ना चाहिए. इन डेटा स्टोर के सेटअप के बारे में ज़्यादा जानकारी, बार-बार आने वाले उपयोगकर्ताओं को मैनेज करने के तीसरे वॉकथ्रू में मिल सकती है.
    • mvnw और mvnw.cmd, Unix और Windows के लिए Maven wrapper executables हैं. उदाहरण के लिए, 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 के तौर पर, रिपॉज़िटरी के रूट फ़ोल्डर में सेव किया जाना चाहिए. आपके ब्राउज़र को ये कुंजियां स्वीकार करने के लिए, आपको इन्हें अपने ओएस की की-चेन में जोड़ना पड़ सकता है.

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

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

इस कमांड का इस्तेमाल करके ऐप्लिकेशन को चलाया जा सकता है. इसके लिए, step01 के स्थान पर उस चरण का नाम डालें जिसे आपको सर्वर के तौर पर चलाना है. उदाहरण के लिए, 01-basic-app के लिए step01 और 02-sign-in के लिए 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.

पक्का करें कि *.p12 आपकी .gitignore फ़ाइल में मौजूद हो, क्योंकि आपको फ़ाइल को 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 में बताए गए पोर्ट पर लॉन्च हो जाता है.