این مجموعه آموزشها، تمام بخشهای متحرک یک افزونهی Classroom کاربردی را نشان میدهد. هر مرحله از آموزش، مفاهیم خاصی را بررسی میکند و آنها را در یک برنامهی وب پیادهسازی میکند. هدف، کمک به شما در راهاندازی، پیکربندی و راهاندازی یک افزونهی کاربردی است.
افزونه شما باید با یک پروژه Google Cloud تعامل داشته باشد. اگر با Google Cloud آشنا نیستید، توصیه میکنیم راهنماهای شروع به کار را مطالعه کنید. شما اعتبارنامهها، دسترسی به API و SDK بازار Google Workspace را در کنسول Google Cloud مدیریت میکنید. برای اطلاعات بیشتر در مورد SDK بازار، به صفحه راهنمای فهرستبندی بازار Google Workspace مراجعه کنید.
این راهنما مباحث زیر را پوشش میدهد:
- از Google Cloud برای ایجاد صفحهای جهت نمایش در iframe در Classroom استفاده کنید.
- ورود یکپارچه گوگل (SSO) را اضافه کنید و به کاربران اجازه ورود دهید.
- برای پیوست کردن افزونه خود به یک تکلیف، فراخوانیهای API انجام دهید.
- الزامات کلیدی ارسال افزونه و ویژگیهای مورد نیاز را بررسی کنید.
این راهنما فرض میکند که شما با برنامهنویسی و مفاهیم اساسی توسعه وب آشنا هستید. اکیداً توصیه میکنیم قبل از شروع مراحل، راهنمای پیکربندی پروژه را مطالعه کنید. این صفحه شامل جزئیات پیکربندی مهمی است که در مراحل به طور کامل پوشش داده نشدهاند.
پیادهسازیهای نمونه
یک مثال مرجع کامل در پایتون موجود است. پیادهسازیهای جزئی نیز در جاوا و Node.js موجود است. این پیادهسازیها منابع کد مثالی هستند که در صفحات بعدی آمده است.
از کجا دانلود کنیم
مثالهای پایتون و جاوا در مخازن گیتهاب موجود است:
نمونه Node.js را میتوان به صورت یک فایل زیپ دانلود کرد:
پیشنیازها
برای آمادهسازی یک پروژه افزونههای جدید، بخشهای زیر را مرور کنید.
گواهی HTTPS
اگرچه میتوانید برنامه خود را در هر محیط توسعهای میزبانی کنید، افزونه Classroom شما فقط از طریق https:// در دسترس است. بنابراین، برای استقرار برنامه یا آزمایش آن در iframe افزونه، به سروری با رمزگذاری SSL نیاز دارید.
استفاده از localhost با گواهی SSL امکانپذیر است؛ اگر نیاز به ایجاد گواهی برای توسعه محلی دارید، mkcert را در نظر بگیرید.
پروژه گوگل کلود
برای استفاده از این مثالها، باید یک پروژه Google Cloud را پیکربندی کنید. برای مرور کلی مراحل لازم برای شروع، به راهنمای ایجاد پروژه Google Cloud مراجعه کنید. بخش راهاندازی یک پروژه Google Cloud در اولین راهنما، اقدامات پیکربندی خاصی را که باید انجام دهید، شرح میدهد.
پس از اتمام، شناسه کلاینت OAuth 2.0 خود را به صورت یک فایل JSON دانلود کنید؛ باید این فایل اعتبارنامه را به دایرکتوری نمونه از حالت فشرده خارج شده اضافه کنید. برای درک فایلهای مربوط به مکانهای خاص، به بخش «درک فایلها» مراجعه کنید.
اعتبارنامههای OAuth
برای ایجاد اعتبارنامههای جدید OAuth، این مراحل را دنبال کنید:
- به صفحه اعتبارنامههای گوگل کلود بروید. مطمئن شوید که پروژه صحیح را در بالای صفحه انتخاب کردهاید.
- روی CREATE CREDENTIALS کلیک کنید و از منوی کشویی، OAuth client ID را انتخاب کنید.
- در صفحه بعد:
- نوع برنامه را روی برنامه وب تنظیم کنید.
- در زیر Authorized redirect URIs ، روی ADD URI کلیک کنید. مسیر کامل یک مسیر فراخوانی برای برنامه خود را اضافه کنید. به عنوان مثال،
https://my.domain.com/auth-callbackیاhttps://localhost:5000/callback. این مسیر را بعداً در این راهنما ایجاد و مدیریت خواهید کرد. میتوانید هر زمان که خواستید مسیرهای بیشتری از این دست را ویرایش یا اضافه کنید. - روی ایجاد کلیک کنید.
- سپس یک پنجره با اطلاعات احراز هویت جدید خود دریافت میکنید. گزینه دانلود JSON را انتخاب کنید. فایل JSON دانلود شده را در دایرکتوری سرور خود کپی کنید.
پیشنیازهای خاص زبان
برای مشاهدهی بهروزترین فهرست پیشنیازها، فایل README را در هر مخزن مشاهده کنید.
پایتون
مثال پایتون ما از چارچوب Flask استفاده میکند. میتوانید کد منبع کامل را از لینکهای ارائه شده دانلود کنید.
در صورت لزوم، پایتون ۳.۷+ را نصب کنید و مطمئن شوید که pip در دسترس است.
python3 -m ensurepip --upgradeهمچنین توصیه میکنیم که یک محیط مجازی پایتون جدید راهاندازی و فعال کنید.
python3 -m venv .classroom-addon-envsource .classroom-addon-env/bin/activate
در هر زیرشاخه راهنمای گام به گام در مثالهای دانلود شده، یک requirements.txt وجود دارد. میتوانید با استفاده از pip به سرعت کتابخانههای مورد نیاز را نصب کنید. از دستورات زیر برای نصب کتابخانههای مورد نیاز برای اولین گام استفاده کنید.
cd flask/01-basic-apppip install -r requirements.txt
نود جی اس
مثال Node.js ما از فریمورک Express استفاده میکند. میتوانید کد منبع کامل را از لینکهای ارائه شده دانلود کنید.
این مثال به Node.js نسخه ۱۶.۱۳ یا بالاتر نیاز دارد.
ماژولهای گره مورد نیاز را با استفاده از npm نصب کنید.
npm installجاوا
مثال جاوای ما از چارچوب Spring Boot استفاده میکند. میتوانید کد منبع کامل را از لینکهای ارائه شده دانلود کنید.
اگر جاوا ۱۱+ را روی دستگاه خود نصب ندارید، آن را نصب کنید.
برنامههای Spring Boot میتوانند از Gradle یا Maven برای مدیریت ساختها و وابستگیها استفاده کنند. این مثال شامل Maven wrapper است که ساخت موفقیتآمیز را بدون نیاز به نصب خود Maven تضمین میکند.
در دایرکتوری که پروژه را دانلود یا کلون کردهاید، دستورات زیر را اجرا کنید تا مطمئن شوید پیشنیازهای لازم برای اجرای پروژه را دارید.
java --version./mvnw --version
یا در ویندوز:
java -versionmvnw.cmd --version
فایلها را درک کنید
بخشهای زیر طرحبندی دایرکتوریهای نمونه را شرح میدهند.
نامهای دایرکتوری
هر مخزن شامل چندین دایرکتوری است که نام آنها با یک عدد شروع میشود، مانند /01-basic-app/ . اعداد مربوط به مراحل خاص راهنما هستند. هر دایرکتوری شامل یک برنامه وب کاملاً کاربردی است که ویژگیهای شرح داده شده در یک راهنمای خاص را پیادهسازی میکند. به عنوان مثال، دایرکتوری /01-basic-app/ شامل پیادهسازی نهایی راهنمای ایجاد یک افزونه است.
محتویات دایرکتوری
محتویات دایرکتوری بسته به زبان پیادهسازی متفاوت است:
پایتون
دایرکتوری ریشه شامل فایلهای زیر است:
-
main.py- نقطه ورود برنامه پایتون. پیکربندی سرور مورد نظر خود را در این فایل مشخص کنید، سپس آن را اجرا کنید تا سرور شروع به کار کند. -
requirements.txt- ماژولهای پایتون مورد نیاز برای اجرای برنامه وب. این ماژولها را میتوان به طور خودکار با استفاده ازpip install -r requirements.txtنصب کرد. client_secret.json- فایل مخفی کلاینت که از Google Cloud دانلود شده است. توجه داشته باشید که این فایل در آرشیو نمونه وجود ندارد؛ شما باید فایل اعتبارنامههای دانلود شده خود را تغییر نام داده و در ریشه هر دایرکتوری کپی کنید.
-
config.py- گزینههای پیکربندی برای سرور Flask.دایرکتوری
webappشامل محتوای برنامه وب است و شامل موارد زیر است:دایرکتوری
/templates/شامل قالبهای Jinja برای صفحات مختلف.دایرکتوری
/static/شامل تصاویر، CSS و فایلهای کمکی جاوا اسکریپت.routes.py- متدهای هندلر برای مسیرهای برنامه وب.__init__.py- مقداردهنده اولیه برای ماژولwebapp. این مقداردهنده، سرور Flask را شروع میکند و گزینههای پیکربندی تنظیمشده درconfig.pyرا بارگذاری میکند.فایلهای اضافی که در یک مرحله خاص از راهنما مورد نیاز هستند.
نود جی اس
هر مرحله از مراحل پیمایش را میتوان در زیرپوشه <step> مربوط به خود یافت. هر مرحله شامل موارد زیر است:
- فایلهای استاتیک مانند جاوا اسکریپت، CSS و تصاویر در پوشه
./<step>/publicیافت میشوند. - روترهای اکسپرس در پوشههای
./<step>/routesیافت میشوند. - قالبهای HTML در پوشههای
./<step>/viewsیافت میشوند. - برنامهی سرور
./<step>/app.jsاست.
جاوا
دایرکتوری پروژه شامل موارد زیر است:
- دایرکتوری
src.mainشامل کد منبع و پیکربندی برای اجرای موفقیتآمیز برنامه است. این دایرکتوری شامل موارد زیر است: + دایرکتوریjava.com.addons.springشامل فایلهایApplication.javaوController.javaاست. فایلApplication.javaمسئول اجرای سرور برنامه است در حالی که فایلController.javaمنطق نقطه پایانی را مدیریت میکند. + دایرکتوریresourcesشامل دایرکتوریtemplatesبا فایلهای HTML و جاوا اسکریپت است. همچنین شامل فایلapplication.propertiesاست که پورت اجرای سرور، مسیر فایل keystore و مسیر دایرکتوریtemplatesرا مشخص میکند. این مثال شامل فایل keystore در دایرکتوریresourcesاست. میتوانید آن را در هر جایی که ترجیح میدهید ذخیره کنید، اما مطمئن شوید که فایلapplication.propertiesرا با مسیر مربوطه بهروزرسانی میکنید.-
pom.xmlشامل اطلاعات لازم برای ساخت پروژه و تعریف وابستگیهای مورد نیاز است. -
.gitignoreشامل نام فایلهایی است که نباید در git آپلود شوند. مطمئن شوید که مسیر keystore خود را در این.gitignoreاضافه میکنید. در مثال ارائه شده، اینsecrets/*.p12است (هدف از keystore در بخش زیر مورد بحث قرار گرفته است). برای راهنمای ۲ و بعد از آن، باید مسیر فایلclient_secret.jsonخود را نیز اضافه کنید تا مطمئن شوید که اسرار خود را در یک مخزن راه دور قرار نمیدهید. برای راهنمای ۳ و بعد از آن، باید مسیر فایل پایگاه داده H2 و file datastore factory را اضافه کنید. اطلاعات بیشتر در مورد راهاندازی این data storeها را میتوانید در راهنمای سوم در مورد مدیریت بازدیدهای مکرر بیابید. -
mvnwوmvnw.cmdبه ترتیب فایلهای اجرایی Maven برای یونیکس و ویندوز هستند. برای مثال، اجرای./mvnw --versionدر یونیکس، نسخه Apache Maven را به همراه اطلاعات دیگر نمایش میدهد. - دایرکتوری
.mvnشامل پیکربندی مربوط به Maven wrapper است.
-
اجرای سرور نمونه
برای آزمایش سرور خود باید آن را اجرا کنید. برای اجرای سرور نمونه به زبان مورد نظر خود، این دستورالعملها را دنبال کنید:
پایتون
اعتبارنامههای OAuth
همانطور که قبلاً توضیح داده شد، اعتبارنامههای OAuth خود را ایجاد و دانلود کنید. فایل JSON را در دایرکتوری ریشه در کنار فایل راهاندازی سرور برنامه خود قرار دهید.
پیکربندی سرور
شما چندین گزینه برای اجرای وب سرور دارید. در انتهای فایل پایتون خود، یکی از موارد زیر را اضافه کنید:
localhostناامن. توجه داشته باشید که این فقط برای آزمایش مستقیم در یک پنجره مرورگر مناسب است؛ دامنههای ناامن را نمیتوان در iframe افزونه Classroom بارگیری کرد.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 را برای آرگومان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 main.pyبرای مشاهده برنامه وب خود در مرورگر، روی URL که ظاهر میشود کلیک کنید تا از اجرای صحیح آن اطمینان حاصل کنید.
نود جی اس
پیکربندی سرور
برای اجرای سرور از طریق HTTPS، باید یک self-certificate ایجاد کنید که برای اجرای برنامه از طریق HTTPS استفاده شود. این اعتبارنامهها باید با نامهای sslcert/cert.pem و sslcert/key.pem در پوشه ریشه مخزن ذخیره شوند. ممکن است لازم باشد این کلیدها را به زنجیره کلید سیستم عامل خود اضافه کنید تا مرورگر شما آنها را بپذیرد.
مطمئن شوید که *.pem در فایل .gitignore شما وجود دارد، زیرا نمیخواهید این فایل را به git ارسال کنید.
سرور را راه اندازی کنید
شما میتوانید برنامه را با دستور زیر اجرا کنید و step01 به جای مرحله صحیحی که میخواهید به عنوان سرور اجرا شود، قرار دهید (برای مثال، step01 به جای 01-basic-app و step02 به جای 02-sign-in).
npm run step01یا
npm run step02این کار سرور وب را در https://localhost:5000 راهاندازی میکند.
شما میتوانید سرور را با استفاده Control + C در ترمینال خود خاتمه دهید.
جاوا
پیکربندی سرور
برای اجرای سرور از طریق HTTPS، باید یک گواهی خودساخته ایجاد کنید که برای اجرای برنامه از طریق HTTPS استفاده شود.
استفاده از mkcert را برای توسعه محلی در نظر بگیرید. پس از نصب mkcert ، دستورات زیر یک گواهی ذخیره شده محلی برای اجرا روی HTTPS ایجاد میکنند.
mkcert -installmkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>
این مثال شامل فایل keystore در دایرکتوری resources است. شما میتوانید آن را در هر جایی که ترجیح میدهید ذخیره کنید، اما مطمئن شوید که فایل application.properties را با مسیر مربوطه بهروزرسانی میکنید. نام دامنه، دامنهای است که پروژه را روی آن اجرا میکنید (برای مثال، localhost ).
مطمئن شوید که *.p12 در فایل .gitignore شما وجود دارد، زیرا نمیخواهید این فایل به git ارسال شود.
سرور را راه اندازی کنید
با اجرای متد main در فایل Application.java ، سرور را راهاندازی کنید. برای مثال، در IntelliJ، میتوانید روی Application.java کلیک راست کرده و گزینه Run 'Application' در دایرکتوری src/main/java/com/addons/spring انتخاب کنید یا فایل Application.java را باز کنید تا روی فلش سبز رنگ سمت چپ امضای متد main(String[] args) کلیک کنید. همچنین میتوانید پروژه را در یک پنجره ترمینال اجرا کنید:
./mvnw spring-boot:runیا در ویندوز:
mvnw.cmd spring-boot:runاین دستور سرور را در https://localhost:5000 یا در پورتی که در application.properties مشخص کردهاید، راهاندازی میکند.