Bu adım adım açıklamalı kılavuzlar, çalışan bir Classroom eklentisinin tüm hareketli bölümlerini göstermektedir. Her adımda belirli kavramlar ele alınır ve tek bir web uygulamasında uygulanır. Amacımız, işlevsel bir eklenti oluşturmanıza, yapılandırmanıza ve yayınlamanıza yardımcı olmaktır.
Eklentiniz bir Google Cloud projesiyle etkileşim kurmalıdır. Google Cloud'a aşina değilseniz Başlarken kılavuzlarını okumanızı öneririz. Kimlik bilgilerini, API erişimini ve Google Workspace Marketplace SDK'sını Google Cloud Console'da yönetirsiniz. Marketplace SDK'sı hakkında daha fazla bilgi için Google Workspace Marketplace girişi kılavuz sayfasını ziyaret edin.
Bu kılavuzda aşağıdaki konular ele alınmaktadır:
- Google Cloud'u kullanarak Classroom'da iFrame'de gösterilecek bir sayfa oluşturun.
- Google tek oturum açma (TOA) özelliğini ekleyin ve kullanıcıların oturum açmasına izin verin.
- Eklentinizi ödeve eklemek için API çağrıları yapın.
- Önemli eklenti gönderim şartlarını ve gerekli özellikleri ele alın.
Bu kılavuzda, programlama ve temel web geliştirme kavramları hakkında bilgi sahibi olduğunuz varsayılmaktadır. Rehberleri incelemeye başlamadan önce Proje yapılandırma kılavuzunu okumanızı önemle tavsiye ederiz. Bu sayfada, adım adım açıklamalı kılavuzlarda tam olarak ele alınmayan önemli yapılandırma ayrıntıları bulunmaktadır.
Örnek uygulamalar
Python'da tam referans örneğini bulabilirsiniz. Kısmi uygulamalar Java ve Node.js'de de kullanılabilir. Bu uygulamalar, sonraki sayfalarda bulunan örnek kodun kaynaklarıdır.
Nereden indirilir?
Python ve Java örnekleri, GitHub depolarında mevcuttur:
Node.js örneğini ZIP dosyası olarak indirebilirsiniz:
Ön koşullar
Yeni bir eklenti projesi hazırlamak için aşağıdaki bölümleri inceleyin.
HTTPS sertifikası
Uygulamanızı herhangi bir geliştirme ortamında barındırabilirsiniz ancak Classroom eklentiniz yalnızca https://
üzerinden kullanılabilir. Bu nedenle, uygulamanızı dağıtmak veya eklenti iframe'i içinde test etmek için SSL şifrelemesine sahip bir sunucuya ihtiyacınız vardır.
localhost
, SSL sertifikasıyla kullanılabilir. Yerel geliştirme için sertifika oluşturmanız gerekiyorsa mkcert'i kullanmayı düşünün.
Google Cloud projesi
Bu örneklerle kullanmak için bir Google Cloud projesi yapılandırmanız gerekir. Başlamak için gereken adımlara genel bakış için Google Cloud projesi oluşturma kılavuzuna bakın. İlk adım adım açıklamalı kılavuzdaki Google Cloud projesi oluşturun bölümünde de gerçekleştirilecek belirli yapılandırma işlemleri açıklanmaktadır.
İşlem tamamlandığında OAuth 2.0 istemci kimliğinizi JSON dosyası olarak indirin. Bu kimlik bilgisi dosyasını, sıkıştırılmış örnek dizine eklemeniz gerekir. Belirli konumlar için Dosyaları anlama bölümüne bakın.
OAuth kimlik bilgileri
Yeni OAuth kimlik bilgileri oluşturmak için şu adımları uygulayın:
- Google Cloud Kimlik Bilgileri sayfasına gidin. Ekranın üst kısmında doğru projenin seçili olduğundan emin olun.
- KİMLİĞİ BİLGİLERİ OLUŞTUR'u tıklayın ve açılır menüden OAuth istemci kimliği'ni seçin.
- Sonraki sayfada:
- Uygulama türü'nü Web uygulaması olarak ayarlayın.
- Yetkili yönlendirme URI'leri altında URI EKLE'yi tıklayın. Uygulamanız için geri çağırma yolunun tam yolunu ekleyin. Örneğin,
https://my.domain.com/auth-callback
veyahttps://localhost:5000/callback
. Bu rotayı daha sonra bu adım adım açıklamalı kılavuzun devamında oluşturup işleyeceksiniz. Bu tür rotaları istediğiniz zaman düzenleyebilir veya daha fazlasını ekleyebilirsiniz. - OLUŞTUR'u tıklayın.
- Bunun üzerine, yeni oluşturulan kimlik bilgilerinizin yer aldığı bir iletişim kutusu görüntülenir. JSON'U İNDİR seçeneğini belirleyin. İndirilen JSON dosyasını sunucu dizininize kopyalayın.
Dile özgü ön koşullar
En güncel ön koşul listesi için her bir depodaki BENİOKU dosyasını görüntüleyin.
Python
Python örneğimiz, Flask çerçevesini kullanır. Tam kaynak kodunu sağladığımız bağlantılardan indirebilirsiniz.
Gerekirse Python 3.7+ yükleyin ve pip
sürümünün kullanılabilir olduğundan emin olun.
python3 -m ensurepip --upgrade
Ayrıca yeni bir Python sanal ortamı kurup etkinleştirmenizi öneririz.
python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate
İndirilen örneklerdeki adım adım açıklamalı her alt dizinde bir requirements.txt
bulunur. pip
'ü kullanarak gerekli kitaplıkları hızlıca yükleyebilirsiniz. İlk adım adım açıklamalı kılavuz için gerekli kitaplıkları yüklemek üzere aşağıdaki komutları kullanın.
cd flask/01-basic-app
pip install -r requirements.txt
Node.js
Node.js örneğimizde Express çerçevesi kullanılmaktadır. Kaynak kodun tamamını sağlanan bağlantılardan indirebilirsiniz.
Bu örnek için Node.js v16.13 veya sonraki sürümler gereklidir.
Gerekli düğüm modüllerini npm
kullanarak yükleyin.
npm install
Java
Java örneğimiz, Spring Boot çerçevesini kullanır. Kaynak kodun tamamını sağlanan bağlantılardan indirebilirsiniz.
Makinenize henüz yüklemediyseniz Java 11 veya sonraki bir sürümü yükleyin.
Spring Boot uygulamaları, Gradle veya Maven'i kullanarak derlemeleri yapabilir ve bağımlılıkları yönetebilir. Bu örnekte, Maven'i yüklemenizi gerektirmeden başarılı bir derleme sağlayan Maven sarmalayıcısı yer alır.
Projeyi indirdiğiniz veya kopyaladığınız dizinde, projeyi çalıştırmak için gerekli ön koşullara sahip olduğunuzdan emin olmak üzere aşağıdaki komutları çalıştırın.
java --version
./mvnw --version
Windows'ta:
java -version
mvnw.cmd --version
Dosyaları anlama
Aşağıdaki bölümlerde örnek dizinlerin düzeni açıklanmaktadır.
Dizin adları
Her depo, adları sayıyla başlayan birkaç dizin içerir (ör. /01-basic-app/
). Sayılar, belirli adım adım açıklamalı kılavuz adımlarına karşılık gelir.
Her dizin, belirli bir adım adım açıklamalı kılavuzda açıklanan özellikleri uygulayan, tam işlevli bir web uygulaması içerir. Örneğin, /01-basic-app/
dizininde Eklenti oluşturma başlıklı adım adım açıklamalı kılavuzun nihai uygulaması bulunur.
Dizin içeriği
Dizin içerikleri, uygulama diline bağlı olarak farklılık gösterir:
Python
Dizin kökü aşağıdaki dosyaları içerir:
main.py
: Python uygulamasının giriş noktası. Bu dosyada kullanmak istediğiniz sunucu yapılandırmasını belirtin ve sunucuyu başlatmak için dosyayı çalıştırın.requirements.txt
: Web uygulamasını çalıştırmak için gereken Python modülleri. Bunlarpip install -r requirements.txt
kullanılarak otomatik olarak yüklenebilir.client_secret.json
: Google Cloud'dan indirilen istemci gizli anahtarı dosyası. Bu dosyanın örnek arşive dahil edilmediğini unutmayın. İndirdiğiniz kimlik bilgileri dosyasını yeniden adlandırıp her dizin köküne kopyalamanız gerekir.
config.py
: Flask sunucusu için yapılandırma seçenekleri.webapp
dizini, web uygulamasının içeriğini içerir. Aşağıdakiler bu kapsamdadır:Çeşitli sayfalar için Jinja şablonlarını içeren
/templates/
dizini.Resimler, CSS ve yardımcı JavaScript dosyalarını içeren
/static/
dizini.routes.py
: Web uygulaması rotaları için işleyici yöntemleri.__init__.py
:webapp
modülünün başlatıcısı. Bu başlatıcı, Flask sunucusunu başlatır veconfig.py
içinde ayarlanan yapılandırma seçeneklerini yükler.Belirli bir adım adım açıklamalı kılavuz adımı için gereken ek dosyalar.
Node.js
Rehberin her adımı kendi <step>
alt klasöründe bulunur. Her adımda şunlar bulunur:
- JavaScript, CSS ve resimler gibi statik dosyalar
./<step>/public
klasöründe bulunur. - Ekspres yönlendiriciler
./<step>/routes
klasörlerinde bulunuyor. - HTML şablonları
./<step>/views
klasörlerinde bulunur. - Sunucu uygulaması
./<step>/app.js
.
Java
Proje dizini şunları içerir:
src.main
dizini, uygulamayı başarıyla çalıştırmak için gereken kaynak kodunu ve yapılandırmayı içerir. Bu dizin şunları içerir: +java.com.addons.spring
diziniApplication.java
veController.java
dosyalarını içerir.Application.java
dosyası uygulama sunucusunu çalıştırmaktan,Controller.java
dosyası ise uç nokta mantığını yönetmekten sorumludur. +resources
dizini, HTML ve JavaScript dosyalarını içerentemplates
dizin Ayrıca sunucuyu çalıştıracak bağlantı noktasını, anahtar deposu dosyasının yolunu vetemplates
dizininin yolunu belirtenapplication.properties
dosyasını da içerir. Bu örnekte,resources
dizinindeki anahtar deposu dosyası yer almaktadır. Dosyayı dilediğiniz yerde saklayabilirsiniz ancakapplication.properties
dosyasını buna göre güncellediğinizden emin olun.pom.xml
, projeyi derlemek ve gerekli bağımlılıkları tanımlamak için gereken bilgileri içerir..gitignore
, git'e yüklenmemesi gereken dosya adları içeriyor. Bu.gitignore
dosyasına anahtar deponuzun yolunu eklediğinizden emin olun. Bu örnektesecrets/*.p12
olarak gösterilmiştir (anahtar deposunun amacı aşağıdaki bölümde açıklanmıştır). 2. ve sonraki adımlarda, gizli bilgilerinizi uzak bir depoya eklemediğinizden emin olmak içinclient_secret.json
dosyanızın yolunu da eklemeniz gerekir. Adım adım açıklamalı 3. adım ve sonrası için H2 veritabanı dosyasının ve dosya veri deposu fabrikasının yolunu eklemeniz gerekir. Bu veri depolarının kurulumu hakkında daha fazla bilgiyi tekrarlanan ziyaretleri işleme konulu üçüncü adım adım açıklamalı kılavuzda bulabilirsiniz.mvnw
vemvnw.cmd
, sırasıyla Unix ve Windows için Maven sarmalayıcı yürütülebilir dosyalarıdır. Örneğin, Uniix'te./mvnw --version
çalıştırmak, diğer bilgilerin yanı sıra Apache Maven sürümünün çıktısını verir..mvn
dizini, Maven sarmalayıcısının yapılandırmasını içerir.
Örnek sunucuyu çalıştırma
Sunucunuzu test etmek için başlatmanız gerekir. Örnek sunucuyu seçtiğiniz dilde çalıştırmak için aşağıdaki talimatları uygulayın:
Python
OAuth kimlik bilgileri
Daha önce açıklandığı şekilde OAuth kimlik bilgilerinizi oluşturun ve indirin. JSON dosyasını, uygulamanızın sunucu başlatma dosyasının yanındaki kök dizine yerleştirin.
Sunucuyu yapılandırma
Web sunucusunu çalıştırmak için çeşitli seçenekleriniz vardır. Python dosyanızın sonuna aşağıdakilerden birini ekleyin:
Güvenli olmayan
localhost
. Bunun yalnızca tarayıcı penceresinde doğrudan test için uygun olduğunu unutmayın. Güvenli olmayan alanlar Classroom eklentisi iFrame'ine yüklenemez.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
'ü güvenli hale getirin.ssl_context
bağımsız değişkeni için bir SSL anahtar dosyası grubu belirtmeniz gerekir.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 sunucusu. Bu, üretime hazır bir sunucu veya bulut dağıtımı için uygundur. Bu başlatma seçeneğiyle birlikte kullanmak için bir
PORT
ortam değişkeni ayarlamanızı öneririz.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")
Sunucuyu başlatma
Önceki adımda yapılandırıldığı gibi sunucuyu başlatmak için Python uygulamanızı çalıştırın.
python main.py
Web uygulamanızın doğru şekilde çalıştığını onaylamak için görünen URL'yi tıklayarak tarayıcıda görüntüleyin.
Node.js
Sunucuyu yapılandırma
Sunucuyu HTTPS üzerinden çalıştırmak için uygulamayı HTTPS üzerinden çalıştırmak üzere kullanılan bir kendi kendine sertifika oluşturmanız gerekir. Bu kimlik bilgileri, depo kök klasörüne sslcert/cert.pem
ve sslcert/key.pem
olarak kaydedilmelidir. Tarayıcınızın bu anahtarları kabul etmesi için anahtarları OS anahtar zincirinize eklemeniz gerekebilir.
Dosyayı Git'e kaydetmek istemediğiniz için *.pem
öğesinin .gitignore
dosyanızda olduğundan emin olun.
Sunucuyu başlatma
Uygulamayı, sunucu olarak çalıştırmak istediğiniz doğru adım için step01
yerine aşağıdaki komutu kullanarak çalıştırabilirsiniz (örneğin, 01-basic-app için step01
ve 02-sign-in için step02
).
npm run step01
veya
npm run step02
Bu işlem, web sunucusunu https://localhost:5000
adresinde başlatır.
Terminalinizde Control + C
ile sunucuyu sonlandırabilirsiniz.
Java
Sunucuyu yapılandırma
Sunucuyu HTTPS üzerinden çalıştırmak için uygulamayı HTTPS üzerinden çalıştırmak üzere kullanılan bir kendi kendine sertifika oluşturmanız gerekir.
Yerel geliştirme için mkcert'i kullanabilirsiniz. mkcert
yüklendikten sonra aşağıdaki komutlar, HTTPS üzerinden çalışacak şekilde yerel olarak depolanan bir sertifika oluşturur.
mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>
Bu örnek, kaynaklar dizinindeki anahtar deposu dosyasını içerir. Dosyayı istediğiniz yerde saklayabilirsiniz ancak application.properties
dosyasını uygun şekilde yola göre güncellediğinizden emin olun. Alan adı, projeyi çalıştırdığınız alandır (örneğin, localhost
).
Dosyayı git'e kaydetmek istemediğiniz için *.p12
dosyanızda .gitignore
bulunduğundan emin olun.
Sunucuyu başlatma
Application.java
dosyasında main
yöntemini çalıştırarak sunucuyu başlatın. Örneğin, IntelliJ'de src/main/java/com/addons/spring
dizininde Application.java
> Run 'Application'
'i sağ tıklayabilir veya Application.java
dosyasını açarak main(String[] args)
yöntem imzasının solundaki yeşil oku tıklayabilirsiniz. Alternatif olarak, projeyi bir terminal penceresinde de çalıştırabilirsiniz:
./mvnw spring-boot:run
veya Windows'ta:
mvnw.cmd spring-boot:run
Bu işlem, sunucuyu https://localhost:5000
adresinde veya application.properties
içinde belirttiğiniz bağlantı noktasında başlatır.