Bu adım adım açıklama serisi, çalışan bir Classroom eklentisinin tüm hareketli parçalarını gösterir. Her adımda belirli kavramlar ele alınır ve tek bir web uygulamasında uygulanır. Amaç, işlevsel bir eklentiyi ayarlamanıza, yapılandırmanıza ve başlatmanıza yardımcı olmaktır.
Eklentiniz bir Google Cloud projesiyle etkileşimde bulunmalıdır. Google Cloud'a aşina değilseniz Başlangıç 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 hakkında daha fazla bilgi için Google Workspace Marketplace listeleme rehber sayfasını ziyaret edin.
Bu rehberde aşağıdaki konular ele alınmaktadır:
- Classroom'da bir iFrame'de gösterilecek bir sayfa oluşturmak için Google Cloud'u kullanın.
- Google tek oturum açma (TOA) özelliğini ekleyin ve kullanıcıların oturum açmasına izin verin.
- Eklentinizi bir ödeve eklemek için API çağrıları yapın.
- Temel eklenti gönderme ş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ılır. Adımlara başlamadan önce Proje yapılandırma kılavuzunu okumanızı önemle tavsiye ederiz. Bu sayfada, adım adım açıklamalarda tam olarak ele alınmayan önemli yapılandırma ayrıntıları yer almaktadır.
Örnek uygulamalar
Tam bir referans örneği Python'da mevcuttur. Kısmi uygulamalar Java ve Node.js'de de kullanılabilir. Bu uygulamalar, sonraki sayfalarda yer alan ö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'inde test etmek için SSL şifrelemeli 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 kullanabilirsiniz.
Google Cloud projesi
Bu örneklerle kullanılmak üzere bir Google Cloud projesi yapılandırmanız gerekir. Başlamak için gereken adımlara genel bir bakış için Google Cloud projesi oluşturma kılavuzuna bakın. İlk adım adım kılavuzdaki Google Cloud projesi oluşturma 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ılmamış örnek dizine eklemeniz gerekir. Belirli konumlar için Dosyaları anlama başlıklı makaleyi inceleyin.
OAuth kimlik bilgileri
Yeni OAuth kimlik bilgileri oluşturmak için aşağıdaki 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İK 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.
- Yetkilendirilmiş yönlendirme URI'leri bölümünde URI EKLE'yi tıklayın. Uygulamanız için geri çağırma rotasının tam yolunu ekleyin. Örneğin,
https://my.domain.com/auth-callback
veyahttps://localhost:5000/callback
. Bu rotayı, bu kılavuzun ilerleyen bölümlerinde oluşturup işleyeceksiniz. Bu tür rotaları istediğiniz zaman düzenleyebilir veya daha fazla rota ekleyebilirsiniz. - OLUŞTUR'u tıklayın.
- Ardından, yeni oluşturulan kimlik bilgilerinizin yer aldığı bir iletişim kutusu alırsınız. JSON İNDİR seçeneğini belirleyin. İndirilen JSON dosyasını sunucu dizininize kopyalayın.
Dile özgü ön koşullar
Ön koşulların en güncel listesi için her depodaki README dosyasını inceleyin.
Python
Python örneğimizde Flask çerçevesi kullanılmaktadır. Tam kaynak kodunu sağlanan bağlantılardan indirebilirsiniz.
Gerekirse Python 3.7 veya sonraki bir sürümü yükleyin ve pip
'nin kullanılabilir olduğundan emin olun.
python3 -m ensurepip --upgrade
Ayrıca yeni bir Python sanal ortamı oluşturup etkinleştirmenizi öneririz.
python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate
İndirilen örneklerdeki her adım adım açıklama alt dizininde requirements.txt
bulunur. pip
kullanarak gerekli kitaplıkları hızlıca yükleyebilirsiniz. İlk adım adım açıklama 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. Tam kaynak kodunu sağlanan bağlantılardan indirebilirsiniz.
Bu örnek için Node.js v16.13 veya sonraki bir sürüm gereklidir.
Gerekli düğüm modüllerini npm
kullanarak yükleyin.
npm install
Java
Java örneğimizde Spring Boot çerçevesi kullanılmaktadır. Tam kaynak kodunu sağlanan bağlantılardan indirebilirsiniz.
Makinenizde yüklü değilse Java 11+'yı yükleyin.
Spring Boot uygulamaları, derlemeleri işlemek ve bağımlılıkları yönetmek için Gradle veya Maven'i kullanabilir. Bu örnekte, Maven'in kendisini yüklemenizi gerektirmeden başarılı bir derleme sağlayan Maven sarmalayıcısı yer alır.
Projeyi indirdiğiniz veya klonladığınız dizinde, projeyi çalıştırmak için ön koşulları karşıladığınızdan emin olmak üzere aşağıdaki komutları çalıştırın.
java --version
./mvnw --version
Alternatif olarak Windows'da:
java -version
mvnw.cmd --version
Dosyaları anlama
Aşağıdaki bölümlerde örnek dizinlerin düzeni açıklanmaktadır.
Dizin adları
Her depoda, adları sayıyla başlayan çeşitli dizinler bulunur. Örneğin, /01-basic-app/
. Numaralar, belirli adım adım açıklama adımlarına karşılık gelir.
Her dizinde, belirli bir adım adım açıklama bölümünde açıklanan özellikleri uygulayan, tam işlevli bir web uygulaması bulunur. Örneğin, /01-basic-app/
dizini, Eklenti oluşturma
rehberinin nihai uygulamasını içerir.
Dizin içerikleri
Dizin içerikleri, uygulama diline göre 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, ardından sunucuyu başlatmak için dosyayı çalıştırın.requirements.txt
- Web uygulamasını çalıştırmak için gereken Python modülleri. Bunlar,pip 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şivde yer almadığını unutmayın. İndirilen kimlik bilgileri dosyanızı yeniden adlandırmanız ve 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 barındırır. Aşağıdaki konular ele alınmıştır:Çeşitli sayfalar için Jinja şablonlarının bulunduğu
/templates/
dizini.Resimler, CSS ve yardımcı JavaScript dosyalarının bulunduğu
/static/
dizini.routes.py
- Web uygulaması rotalarının 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 kılavuz adımının gerektirdiği ek dosyalar.
Node.js
Adımların her biri kendi <step>
alt klasöründe yer alır. Her adımda şunlar bulunur:
- JavaScript, CSS ve resim gibi statik dosyalar
./<step>/public
klasöründe bulunur. - Express yönlendiriciler
./<step>/routes
klasörlerinde bulunur. - HTML şablonları
./<step>/views
klasörlerinde bulunur. - Sunucu uygulaması
./<step>/app.js
.
Java
Proje dizini şunları içerir:
src.main
dizini, uygulamanın başarıyla çalıştırılması için kaynak kodu ve yapılandırmayı içerir. Bu dizin aşağıdakileri içerir: +java.com.addons.spring
dizini,Application.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
dizinini içerir. Ayrıca, sunucunun çalıştırılacağı bağlantı noktasını, anahtar deposu dosyasının yolunu vetemplates
dizininin yolunu belirtenapplication.properties
dosyasını da içerir. Bu örnekte,resources
dizininde anahtar deposu dosyası yer almaktadır. Dosyayı istediğiniz yerde saklayabilirsiniz ancakapplication.properties
dosyasını yola göre güncellediğinizden emin olun.pom.xml
, projeyi oluşturmak ve gerekli bağımlılıkları tanımlamak için gereken bilgileri içerir..gitignore
, git'e yüklenmemesi gereken dosya adları içeriyor. Anahtar deponuzun yolunu.gitignore
içine eklediğinizden emin olun. Sağlanan örnekte busecrets/*.p12
'dır (anahtar deposunun amacı aşağıdaki bölümde açıklanmıştır). 2. adım ve sonrasında, gizli dizilerinizi uzak bir depoya eklememek içinclient_secret.json
dosyanızın yolunu da eklemeniz gerekir. 3. ve sonraki kılavuzlarda H2 veritabanı dosyası ve dosya veri deposu fabrikası yolunu eklemeniz gerekir. Bu veri depolarının kurulumu hakkında daha fazla bilgiyi Tekrarlanan ziyaretleri işleme ile ilgili üçü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, Unix'te./mvnw --version
komutunu çalıştırmak, diğer bilgilerin yanı sıra Apache Maven sürümünü de verir..mvn
dizini, Maven sarmalayıcısı için yapılandırma içerir.
Örnek sunucuyu çalıştırma
Sunucunuzu test etmek için başlatmanız gerekir. Örnek sunucuyu istediğiniz dilde çalıştırmak için aşağıdaki talimatları uygulayın:
Python
OAuth kimlik bilgileri
OAuth kimlik bilgilerinizi daha önce açıklandığı gibi oluşturup indirin. JSON dosyasını, uygulamanızın sunucu başlatma dosyasıyla birlikte 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
. Bu yöntemin yalnızca doğrudan bir tarayıcı penceresinde test etmek 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)
Güvenli
localhost
ssl_context
bağımsız değişkeni için bir SSL anahtar dosyası demeti 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 kullanılmak üzere 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
Sunucuyu önceki adımda yapılandırıldığı şekilde 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 tarayıcıda web uygulamanızı görüntülemek üzere gösterilen URL'yi tıklayın.
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ünde sslcert/cert.pem
ve sslcert/key.pem
olarak kaydedilmelidir. Tarayıcınızın bu anahtarları kabul etmesi için işletim sisteminizin anahtarlık bölümüne eklemeniz gerekebilir.
Dosyayı Git'e işlememek istediğiniz için *.pem
karakterinin .gitignore
dosyanızda bulunduğundan emin olun.
Sunucuyu başlatma
Uygulamayı aşağıdaki komutla çalıştırabilirsiniz. step01
yerine sunucu olarak çalıştırmak istediğiniz doğru adımı (örneğin, 01-basic-app için step01
ve 02-sign-in için step02
) kullanın.
npm run step01
veya
npm run step02
Bu işlem, https://localhost:5000
adresinde web sunucusunu başlatır.
Sunucuyu terminalinizde Control + C
ile 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 kullanabilirsiniz. mkcert
'ı yükledikten sonra aşağıdaki komutlar, HTTPS üzerinden çalışacak yerel olarak depolanmış bir sertifika oluşturur.
mkcert -install
mkcert -pkcs12 -p12-file <path_to_keystore> <domain_name>
Bu örnekte, kaynaklar dizininde anahtar deposu dosyası bulunur. Dosyayı istediğiniz yerde saklayabilirsiniz ancak application.properties
dosyasını yola göre güncellediğinizden emin olun. Alan adı, projeyi üzerinde çalıştırdığınız alandır (örneğin, localhost
).
Dosyayı Git'e işlememek istediğiniz için *.p12
karakterinin .gitignore
dosyanızda bulunduğundan emin olun.
Sunucuyu başlatma
main
dosyasında Application.java
yöntemini çalıştırarak sunucuyu başlatın. Örneğin, IntelliJ'de Application.java
> Run 'Application'
öğesini src/main/java/com/addons/spring
dizininde sağ tıklayabilir veya Application.java
dosyasını açıp main(String[] args)
yöntem imzasının solundaki yeşil oku tıklayabilirsiniz. Alternatif olarak, projeyi bir terminal penceresinde çalıştırabilirsiniz:
./mvnw spring-boot:run
veya Windows'da:
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.