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

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

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

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

  • 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+ को पहले से अपने कंप्यूटर पर इंस्टॉल नहीं किया है, तो उसे इंस्टॉल करें.

बिल्ड और मैनेज करने के लिए, Spring बूट ऐप्लिकेशन 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 से डाउनलोड की गई क्लाइंट की सीक्रेट फ़ाइल क्लाउड. ध्यान दें कि उदाहरण के तौर पर दिए गए संग्रह में यह शामिल नहीं है; की पहचान करें को आपकी डाउनलोड की गई क्रेडेंशियल फ़ाइल का नाम बदलना और कॉपी करना चाहिए डायरेक्ट्री रूट शामिल है.

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

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

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

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

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

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

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

Node.js

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

  • JavaScript, CSS, और इमेज जैसी स्टैटिक फ़ाइलें ./<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 है (इसका मकसद कीस्टोर के बारे में नीचे दिए गए सेक्शन में बताया गया है). सिलसिलेवार तरीके से दिए गए चरण 2 और आगे, आपको अपना पाथ भी शामिल करना चाहिए client_secret.json फ़ाइल पक्का करें कि आप अपनी रिमोट रिपॉज़िटरी (डेटा स्टोर करने की जगह) में सीक्रेट बनाए रखता है. सिलसिलेवार तरीके से दिए गए तीन चरणों को पूरा करने के लिए, को H2 डेटाबेस फ़ाइल और फ़ाइल डेटास्टोर में पाथ जोड़ना चाहिए फ़ैक्ट्री में किया गया था. इन डेटा स्टोर के सेटअप के बारे में ज़्यादा जानकारी ये सुझाव, वेबसाइट पर बार-बार आने वाले लोगों की संख्या मैनेज करने के बारे में तीसरे चरण में मिले हैं.
    • mvnw और mvnw.cmd, Unix के लिए Maven रैपर का एक्ज़ीक्यूटेबल हैं और Windows. उदाहरण के लिए, ./mvnw --version इस पर चल रहा है Unix अन्य जानकारी के साथ-साथ, 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 को बदलकर, नीचे दिए गए निर्देश का इस्तेमाल करके ऐप्लिकेशन को चलाया जा सकता है जिसे आप सर्वर के रूप में चलाना चाहते हैं (उदाहरण के लिए, step01 01-बेसिक ऐप्लिकेशन के लिए और step02-02-साइन-इन के लिए.

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 में, दाएं क्लिक करके Application.java Run 'Application' src/main/java/com/addons/spring डायरेक्ट्री या Application.java खोलें main(String[] args) की बाईं ओर हरे तीर पर क्लिक करने के लिए फ़ाइल तरीका सिग्नेचर. इसके अलावा, प्रोजेक्ट को किसी टर्मिनल में भी चलाया जा सकता है विंडो:

./mvnw spring-boot:run

या Windows पर:

mvnw.cmd spring-boot:run

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