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

Bu adım adım açıklamalı kılavuzlar, çalışan bir Classroom eklentisinin tüm hareketli bölümlerini göstermektedir. Her adım adım açıklamalı kılavuz adımında, belirli kavramları ele alarak bunları tek bir web uygulamasına uygularsınız. Amaç, işlevsel bir eklentinin kurulumunda, yapılandırılmasında ve lansmanında size yardımcı olmaktır.

Eklentiniz bir Google Cloud projesiyle etkileşime geçmelidir. Google Cloud hakkında bilginiz yoksa 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 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ına aşina olduğunuz varsayılır. Adım adım açıklamalı kılavuzlara 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 eksiksiz bir referans örneği mevcuttur. Kısmi uygulamalar Java ve Node.js'de de mevcuttur. Bu uygulamalar, sonraki sayfalarda bulunan örnek kodun kaynaklarıdır.

Nereden indirilir?

Python ve Java örnekleri, GitHub depolarında mevcuttur:

Node.js örneği, zip dosyası olarak indirilebilir:

Ö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 bir 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 kullanılacak bir Google Cloud projesi yapılandırmanız gerekir. Başlamak için gerekli adımlara genel bir 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.

İşlemi tamamladığınızda, OAuth 2.0 Client-ID'nizi JSON dosyası olarak indirin. Bu kimlik bilgisi dosyasını, çıkartı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çildiğinden 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.
    • Yetkili yönlendirme URI'leri altında URI EKLE'yi tıklayın. Uygulamanızın geri çağırma rotasının tam yolunu ekleyin. Örneğin, https://my.domain.com/auth-callback veya https://localhost:5000/callback. Bu rotayı daha sonra bu adım adım açıklamalı kılavuzun devamında oluşturup işleyeceksiniz. Dilediğiniz zaman bu tür rotaları düzenleyebilir veya daha fazla rota 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. Kaynak kodun tamamını sağlanan 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. Adım adım açıklamalı ilk kılavuz için gerekli kitaplıkları yüklemek amacıyla aşağıdaki komutları kullanın.

cd flask/01-basic-app
pip install -r requirements.txt

Node.js

Node.js örneğimiz, Express çerçevesini kullanır. Kaynak kodun tamamını sağlanan bağlantılardan indirebilirsiniz.

Bu örnek için Node.js v16.13 veya sonraki sürümler gerekir.

npm kullanarak gerekli düğüm modüllerini 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+'yi yükleyin.

Spring Boot uygulamaları, derlemeleri ve bağımlılıkları yönetmek için Gradle veya Maven'i kullanabilir. Bu örnek, Maven'ı yüklemenize gerek kalmadan başarılı bir derleme sağlayan Maven sarmalayıcısını içerir.

Projeyi indirdiğiniz veya klonladığı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

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 depo, adları /01-basic-app/ gibi bir sayıyla başlayan çeşitli dizinler içerir. Bu sayılar, adım adım açıklamalı belirli adımlara karşılık gelir. Her dizin, belirli bir adım adım açıklamalı kılavuzda açıklanan özellikleri uygulayan, tamamen işlevsel bir web uygulaması içerir. Örneğin, /01-basic-app/ dizini, Eklenti oluşturma adlı adım adım açıklamalı kılavuzun son uygulamasını içerir.

Dizin içerikleri

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 uygulama giriş noktası. Bu dosyada kullanmak istediğiniz sunucu yapılandırmasını belirtin ve ardından sunucuyu başlatmak için yapılandırmasını çalıştırın.
    • requirements.txt - Web uygulamasını çalıştırmak için gerekli 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ı. Bunun örnek arşive dahil edilmediğini unutmayın. İndirilen kimlik bilgileri dosyanızı yeniden adlandırıp her bir dizin köküne kopyalamanız gerekir.

  • config.py - Flask sunucusu için yapılandırma seçenekleri.

  • webapp dizini, web uygulamasına ait içeriği barındırır. Bunlardan bazıları:

  • Ç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ü için başlatıcı. 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ının gerektirdiği ek dosyalar.

Node.js

Ancak yürüyüşteki her adım kendi <step> alt klasöründe bulunabilir. 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örde bulundu.
  • 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 dizini Application.java ve Controller.java dosyalarını içerir. Application.java dosyası, uygulama sunucusunu çalıştırmaktan sorumludur. Controller.java dosyası ise uç nokta mantığını işler. + resources dizini, HTML ve JavaScript dosyaları içeren templates dizinini içerir. Ayrıca sunucuyu çalıştıracak bağlantı noktasını, anahtar deposu dosyasının yolunu ve templates dizininin yolunu belirten application.properties dosyasını da içerir. Bu örnek, resources dizinindeki anahtar deposu dosyasını içerir. URL'yi istediğiniz yerde depolayabilirsiniz, ancak application.properties dosyasını yol ile uygun şekilde 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 içinde anahtar deponuzun yolunu eklediğinizden emin olun. Sağlanan örnekte bu, secrets/*.p12 değeridir (anahtar deposunun amacı aşağıdaki bölümde açıklanmıştır). Adım adım açıklamalı 2 ve sonraki adımlarda, gizli anahtarlarınızı uzak bir depoya eklemediğinizden emin olmak için client_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 bilgi, tekrarlanan ziyaretleri yönetme hakkındaki üçüncü adım adım açıklamalı kılavuzda bulunabilir.
    • mvnw ve mvnw.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ü çıkarır.
    • .mvn dizini, Maven sarmalayıcı için yapılandırmayı içerir.

Örnek sunucuyu çalıştırma

Test etmek için sunucunuzu 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

OAuth kimlik bilgilerinizi daha önce açıklandığı şekilde oluşturup 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 birkaç seçeneğiniz vardır. Python dosyanızın sonuna aşağıdakilerden birini ekleyin:

  1. localhost güvenli değil. Bunun yalnızca bir tarayıcı penceresinde doğrudan test yapmak için uygun olduğunu unutmayın. Güvenli olmayan alanlar, Classroom eklenti iframe'inde 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. Güvenli localhost. ssl_context bağımsız değişkeni için bir SSL anahtar dosyası türü belirtmelisiniz.

    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 sunucusuyla iletişim kurmalıdır. Üretime hazır sunucu veya bulut dağıtımı için uygundur. Bu başlatma seçeneğiyle kullanılacak 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ı bir tarayıcıda görüntüleyerek doğru şekilde çalıştığını onaylamak için görünen URL'yi tıklayın.

Node.js

Sunucuyu yapılandırma

Sunucuyu HTTPS üzerinden çalıştırmak için uygulamayı HTTPS üzerinden çalıştırmakta kullanılan bir öz 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şlemle, https://localhost:5000 adresindeki web sunucusu başlatılı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ırmakta kullanılan bir öz 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. URL'yi istediğiniz yerde depolayabilirsiniz, ancak application.properties dosyasını yol ile 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 öğesinin .gitignore dosyanızda olduğ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' öğesini 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 ç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.