Adım adım açıklamalı kılavuzlar

Bu adım adım açıklamalı eğitim serisinde, çalışan bir Classroom eklentisinin tüm hareketli parçaları gösterilmektedir. 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:

  • Classroom'da iFrame içinde 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.
  • Eklenti göndermeyle ilgili temel koşulları 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ı yer alı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.

İndirme yeri

Python ve Java örneklerini GitHub depolarında bulabilirsiniz:

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'sinde test etmek için SSL şifrelemesi olan bir sunucuya ihtiyacınız vardır.

localhost'ü SSL sertifikasıyla kullanmak mümkündür. Yerel geliştirme için sertifika oluşturmanız gerekiyorsa mkcert'i kullanabilirsiniz.

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ılavuzun Google Cloud projesi oluşturma bölümünde, yapılması gereken belirli yapılandırma işlemleri de adım adım 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 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İĞİ 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 yolunun tam yolunu ekleyin. Örneğin, https://my.domain.com/auth-callback veya https://localhost:5000/callback. Bu rotayı bu adım adım açıklamalı kılavuzun ilerleyen bölümlerinde oluşturup yöneteceksiniz. Bu tür rotaları istediğiniz zaman düzenleyebilir veya daha fazlasını ekleyebilirsiniz.
    • OLUŞTUR'u tıklayın.
  • Ardından, yeni oluşturulan kimlik bilgilerinizi içeren bir iletişim kutusu görürsünüz. JSON'U İ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 depoda BENİOKU dosyasını görüntüleyin.

Python

Python örneğimizde Flask çerçevesi kullanılmaktadır. Tam kaynak kodunu sağladığımız 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şturmanızı ve etkinleştirmenizi öneririz.

python3 -m venv .classroom-addon-env
source .classroom-addon-env/bin/activate

İndirilen örneklerdeki her adım adım açıklamalı çözüm alt dizininde 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 kodunun tamamını sağlanan bağlantılardan indirebilirsiniz.

Bu örnek için Node.js 16.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. Kaynak kodunun 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 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 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. 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ş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ın bulunduğu /templates/ dizini.

  • Resim, CSS ve yardımcı JavaScript dosyalarının bulunduğu /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 ve config.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.
  • Hızlı 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, uygulamayı başarıyla çalıştırmak için kaynak kodu ve yapılandırmayı içerir. Bu dizin aşağıdakileri içerir: + java.com.addons.spring dizini, Application.java ve Controller.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çeren templates dizinini içerir. Ayrıca, sunucunun çalıştırılacağı bağlantı noktasını, anahtar deposu dosyasının yolunu ve templates dizininin yolunu belirten application.properties dosyasını da içerir. Bu örnekte, resources dizinindeki anahtar deposu dosyası yer almaktadır. Dosyayı dilediğiniz yerde saklayabilirsiniz ancak application.properties dosyasını buna 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. Bu .gitignore dosyasına anahtar deponuzun yolunu eklediğinizden emin olun. Bu örnekte secrets/*.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çin client_secret.json dosyanızın yolunu da eklemeniz gerekir. 3. ve sonraki adımlarda, 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 ve mvnw.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 çalıştırıldığında diğer bilgilerin yanı sıra Apache Maven sürümü de gösterilir.
    • .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:

  1. 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)
    
  2. 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)
    
  3. 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 düzgün ç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ünde sslcert/cert.pem ve sslcert/key.pem olarak kaydedilmelidir. Tarayıcınızın bu anahtarları kabul etmesi için OS anahtar zincirinize eklemeniz gerekebilir.

Dosyayı git'e kaydetmek istemediğiniz için *.pem dosyanızda .gitignore bulunduğ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ükledikten sonra aşağıdaki komutlar, HTTPS üzerinden çalışacak yerel olarak depolanan bir sertifika oluşturur.

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

Bu örnekte, kaynak dizininde anahtar kapsülü dosyası yer alır. 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 main(String[] args) yöntem imzasının solundaki yeşil oku tıklamak için Application.java dosyasını açabilirsiniz. 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'te belirttiğiniz bağlantı noktasında başlatır.