इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

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

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

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

डाउनलोड करने का तरीका

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

ज़रूरी शर्तें

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

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

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

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

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

अगर आपने 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 से डाउनलोड की गई क्लाइंट सीक्रेट फ़ाइल. ध्यान दें कि यह उदाहरण संग्रह में शामिल नहीं है. आपको डाउनलोड की गई क्रेडेंशियल फ़ाइल का नाम बदलकर उसे हर डायरेक्ट्री रूट में कॉपी करना चाहिए.
  
  अहम जानकारी: उदाहरण चलाने से पहले, आपको अपने Google Cloud प्रोजेक्ट से क्लाइंट सीक्रेट फ़ाइल देनी होगी.
config.py - Flask सर्वर के लिए कॉन्फ़िगरेशन के विकल्प.
webapp डायरेक्ट्री में वेब ऐप्लिकेशन का कॉन्टेंट शामिल है. इसमें ये शामिल हैं:
अलग-अलग पेजों के लिए, Jinja टेंप्लेट वाली /templates/ डायरेक्ट्री.
इमेज, सीएसएस, और एंसीलरी JavaScript फ़ाइलों वाली /static/ डायरेक्ट्री.
routes.py - वेब ऐप्लिकेशन रूट के लिए हैंडलर के तरीके.
__init__.py - webapp मॉड्यूल के लिए इनिशलाइज़र. यह इनिशलाइज़र, फ़्लास्क सर्वर को शुरू करता है और config.py में सेट किए गए कॉन्फ़िगरेशन के विकल्पों को लोड करता है.
सिलसिलेवार तरीके से निर्देश देने के लिए ज़रूरी अतिरिक्त फ़ाइलें.

Node.js

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

./<step>/public फ़ोल्डर में JavaScript, सीएसएस, और इमेज जैसी स्टैटिक फ़ाइलें होती हैं.
एक्सप्रेस राऊटर ./<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 फ़ाइल का पाथ भी शामिल करना चाहिए. इससे यह पक्का किया जा सकेगा कि आपके सीक्रेट, किसी रिमोट रिपॉज़िटरी (डेटा स्टोर करने की जगह) में शामिल न हों. कदम-दर-कदम निर्देश के लिए, आपको H2 डेटाबेस फ़ाइल और फ़ाइल डेटास्टोर फ़ैक्ट्री में पाथ जोड़ना चाहिए. इन डेटा स्टोर के सेटअप के बारे में ज़्यादा जानकारी, बार-बार होने वाली विज़िट से निपटने के बारे में सिलसिलेवार तरीके से दिए गए तीसरे चरण में मिल सकती है.
- mvnw और mvnw.cmd, Unix और Windows के लिए Maven रैपर एक्ज़ीक्यूटेबल हैं. उदाहरण के लिए, Unix पर ./mvnw --version चलाने से, अन्य जानकारी के साथ-साथ Apache Maven का वर्शन भी मिलता है.
- .mvn डायरेक्ट्री में मेवन रैपर का कॉन्फ़िगरेशन शामिल है.

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

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

Python

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

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

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

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

असुरक्षित 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)
```
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)
```
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 मौजूद हो, क्योंकि आपको फ़ाइल को गिट में नहीं भेजना है.

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

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

npm run step01

या

npm run step02

इससे वेब सर्वर को https://localhost:3000 पर लॉन्च किया जाता है.

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

Java

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

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

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

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

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

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

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

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 में तय किए गए पोर्ट पर सर्वर लॉन्च हो जाएगा.