Эта серия пошаговых инструкций иллюстрирует все составляющие работающего дополнения для Classroom. Каждый шаг пошагово рассматривает конкретные концепции, реализуя их в одном веб-приложении. Цель — помочь вам в настройке, конфигурировании и запуске функционального дополнения.
Ваше дополнение должно взаимодействовать с проектом Google Cloud . Если вы не знакомы с Google Cloud, рекомендуем ознакомиться с руководствами по началу работы . Управление учетными данными, доступом к API и SDK Google Workspace Marketplace осуществляется в консоли Google Cloud. Для получения дополнительной информации о SDK Marketplace посетите страницу руководства по размещению в Google Workspace Marketplace .
Данное руководство охватывает следующие темы:
- Используйте Google Cloud для создания страницы, которая будет отображаться во фрейме (iframe) в Classroom.
- Добавьте функцию единого входа (SSO) Google и разрешите пользователям входить в систему.
- Выполняйте API-запросы для прикрепления вашего дополнения к заданию.
- Укажите основные требования к отправке дополнительных модулей и необходимые функции.
Данное руководство предполагает, что вы знакомы с программированием и основными концепциями веб-разработки. Мы настоятельно рекомендуем ознакомиться с руководством по настройке проекта перед началом выполнения пошаговых инструкций. Эта страница содержит важные сведения о настройке, которые не полностью рассматриваются в пошаговых инструкциях.
Примеры реализации
Полный пример кода доступен на Python . Частичные реализации также доступны на Java и Node.js. Эти реализации являются исходными кодами примеров, которые вы найдете на последующих страницах.
Где скачать
Примеры на Python и Java доступны в репозиториях GitHub:
Пример кода на Node.js можно скачать в виде ZIP-архива:
Предварительные требования
Ознакомьтесь со следующими разделами, чтобы подготовить новый проект по созданию дополнений.
Сертификат HTTPS
Хотя вы можете разместить свое приложение в любой среде разработки, ваш надстройкой для Classroom можно пользоваться только через https:// . Поэтому для развертывания приложения или его тестирования в iframe надстройки вам потребуется сервер с SSL-шифрованием.
Можно использовать localhost с SSL-сертификатом; если вам нужно создать сертификат для локальной разработки, рассмотрите mkcert .
Проект Google Cloud
Для использования с этими примерами необходимо настроить проект Google Cloud. Обзор необходимых шагов для начала работы см. в руководстве по созданию проекта Google Cloud . В разделе « Настройка проекта Google Cloud» первого пошагового руководства также подробно описаны конкретные действия по настройке.
После завершения загрузите свой идентификатор клиента OAuth 2.0 в формате JSON; вам необходимо добавить этот файл с учетными данными в распакованную директорию с примерами. См. раздел «Понимание файлов» для получения информации о конкретных местах расположения.
Учетные данные OAuth
Выполните следующие шаги для создания новых учетных данных OAuth:
- Перейдите на страницу «Учетные данные Google Cloud» . Убедитесь, что в верхней части экрана выбран правильный проект.
- Нажмите кнопку «СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ» и выберите идентификатор клиента OAuth из выпадающего списка.
- На следующей странице:
- Установите тип приложения на «Веб-приложение» .
- В разделе «Авторизованные URI перенаправления» нажмите «ДОБАВИТЬ URI» . Добавьте полный путь для маршрута обратного вызова вашего приложения. Например,
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-envsource .classroom-addon-env/bin/activate
В каждой подпапке с примерами, содержащими пошаговое руководство, есть файл requirements.txt . Вы можете быстро установить необходимые библиотеки с помощью pip . Используйте следующие команды для установки необходимых библиотек для первого пошагового руководства.
cd flask/01-basic-apppip install -r requirements.txt
Node.js
В нашем примере на Node.js используется фреймворк Express . Вы можете скачать полный исходный код по предоставленным ссылкам .
Для работы этого примера требуется Node.js версии 16.13 или более поздней.
Установите необходимые модули Node.js с помощью npm .
npm installJava
В нашем примере на Java используется фреймворк Spring Boot . Вы можете скачать полный исходный код по предоставленным ссылкам .
Установите Java 11 или более позднюю версию , если она еще не установлена на вашем компьютере.
Приложения Spring Boot могут использовать Gradle или Maven для сборки и управления зависимостями. В этом примере используется обертка Maven, которая обеспечивает успешную сборку без необходимости установки самого Maven.
В каталоге, куда вы загрузили или клонировали проект, выполните следующие команды, чтобы убедиться, что у вас есть все необходимые компоненты для его запуска.
java --version./mvnw --version
Или в Windows:
java -versionmvnw.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содержит содержимое веб-приложения. Он включает в себя следующее:Каталог
/templates/содержит шаблоны Jinja для различных страниц.Каталог
/static/содержит изображения, CSS-файлы и вспомогательные JavaScript-файлы.routes.py— методы обработчика маршрутов веб-приложения.__init__.py— инициализатор для модуляwebapp. Этот инициализатор запускает сервер Flask и загружает параметры конфигурации, заданные вconfig.py.Дополнительные файлы, необходимые для выполнения конкретного этапа пошагового руководства.
Node.js
Каждый шаг пошагового руководства находится в отдельной подпапке <step> . Каждый шаг содержит:
- Статические файлы, такие как JavaScript, CSS и изображения, находятся в папке
./<step>/publicpublic. - Маршрутизаторы Express находятся в папках
./<step>/routesroutes. - HTML-шаблоны находятся в папках
./<step>/viewsviews. - Серверное приложение находится по адресу
./<step>/app.js.
Java
В каталог проекта входят следующие элементы:
- В директории
src.mainнаходится исходный код и конфигурация для успешного запуска приложения. Эта директория включает в себя следующее: + директорияjava.com.addons.springсодержит файлыApplication.javaиController.java. ФайлApplication.javaотвечает за запуск сервера приложений, а файлController.javaобрабатывает логику конечных точек. + директорияresourcesсодержит директориюtemplatesс HTML- и JavaScript-файлами. Она также содержит файлapplication.properties, который указывает порт для запуска сервера, путь к файлу хранилища ключей и путь к директорииtemplates. В этом примере файл хранилища ключей находится в директорииresources. Вы можете хранить его где угодно, но убедитесь, что вы обновили файлapplication.properties, указав соответствующий путь.-
pom.xmlсодержит информацию, необходимую для сборки проекта и определения требуемых зависимостей. -
.gitignoreсодержит имена файлов, которые не следует загружать в Git. Убедитесь, что вы добавили путь к вашему хранилищу ключей в этот файл.gitignore. В приведенном примере этоsecrets/*.p12(назначение хранилища ключей обсуждается в разделе ниже). Для второго и последующих шагов также следует указать путь к файлуclient_secret.json, чтобы гарантировать, что ваши секреты не будут включены в удаленный репозиторий. Для третьего и последующих шагов следует добавить путь к файлу базы данных H2 и фабрике файловых хранилищ данных. Более подробную информацию о настройке этих хранилищ данных можно найти в третьем шаге, посвященном обработке повторных посещений . -
mvnwиmvnw.cmd— это исполняемые файлы-оболочки Maven для Unix и Windows соответственно. Например, запуск./mvnw --versionв Unix выводит версию Apache Maven, а также другую информацию. - В директории
.mvnсодержится конфигурация для Maven-оболочки.
-
Запустите тестовый сервер
Для тестирования вам необходимо запустить сервер. Следуйте этим инструкциям, чтобы запустить пример сервера на выбранном вами языке:
Python
Учетные данные OAuth
Создайте и загрузите свои учетные данные OAuth, как описано ранее . Поместите JSON-файл в корневой каталог рядом с файлом запуска сервера вашего приложения.
Настройте сервер
У вас есть несколько вариантов запуска веб-сервера. В конце вашего Python-файла добавьте один из следующих вариантов:
Незащищенный
localhost. Обратите внимание, что это подходит только для непосредственного тестирования в окне браузера; незащищенные домены нельзя загрузить во фрейм дополнения 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_contextнеобходимо указать кортеж файлов SSL-ключей.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Чтобы открыть веб-приложение в браузере и убедиться в его корректной работе, щелкните по появившемуся URL-адресу.
Node.js
Настройте сервер
Для запуска сервера по протоколу HTTPS необходимо создать самосертификат, используемый для запуска приложения по 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 в терминале.
Java
Настройте сервер
Для запуска сервера по протоколу HTTPS необходимо создать самосертификат, который будет использоваться для запуска приложения по протоколу HTTPS.
Рекомендуется использовать mkcert для локальной разработки. После установки mkcert следующие команды сгенерируют локально сохраненный сертификат для работы по протоколу HTTPS.
mkcert -installmkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>
В этом примере файл хранилища ключей находится в каталоге ресурсов. Вы можете хранить его где угодно, но обязательно обновите файл 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или в Windows:
mvnw.cmd spring-boot:runЭто запустит сервер по https://localhost:5000 или на порту, указанном в application.properties .