Aracılığıyla paylaş

Öğretici: GitHub Spark ve Codespaces kullanarak tek sayfalı uygulama oluşturma ve dağıtma

Yeni tek sayfalı uygulama desteği geliştiricilere daha fazla esneklik sağlar: Power Pages sitelerini tamamen kaynak kodda oluşturabilir, özelleştirebilir ve yönetebilirsiniz. GitHub Spark'ın son sürümüyle geliştiriciler artık bir site yazabilir, doğrudan GitHub Codespace'te düzenleyebilir ve tarayıcılarından çıkmadan power pages ortamına dağıtabilir. Bu rehber, tüm iş akışının tamamında size adım adım yol gösterir.

GitHub Spark, GitHub Copilot'un yapay zeka destekli yeni bir doğal dil platformudur. Geliştiricilerin modern web uygulamalarını hızla önyüklemesine yardımcı olmak için tasarlanmıştır. Spark, kod düzenleme için GitHub Codespaces ile birleştirildiğinde şunları sağlar:

  • Projeniz için kullanıma hazır bir şablon deposu.
  • Tutarlı ortamlar için önceden yapılandırılmış geliştirme kapsayıcıları.
  • GitHub Copilot'tan yapay zeka destekli, doğal dil platformu.

Power Pages geliştiricileri için bu, hazır bir site şablonuyla başlayabileceğiniz, özelleştirebileceğiniz ve geleneksel yerel kurulum olmadan dağıtabileceğiniz anlamına gelir.

Bu makalenin sonunda şunları nasıl yapacağınızı öğreneceksiniz:

  1. GitHub Spark'ı kullanarak bir prototip Power Pages sitesi oluşturun.
  2. .NET ve PAC CLI desteği için Codespace'inizi yapılandırın.
  3. Tek sayfalı uygulamanızı derleyin ve bir Power Pages ortamına yükleyin.
  4. Sitenizi doğrudan Power Pages'ten yeniden etkinleştirin ve test edin.

Önkoşullar

Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun:

Uyarı

  • GitHub Spark'ı kullanmak için uygun GitHub lisanslarına sahip olduğunuzdan emin olun.
  • GitHub Spark veya Codespaces desteği Spark destek ekibi aracılığıyla sağlanır.

1. Adım: GitHub Spark şablonuyla başlayın

  1. GitHub Spark aracına gidin ve doğal dil kullanarak yeni bir site oluşturun.
  2. Oluşturulduktan sonra Codespaces'ta Aç'a tıklayın.

Bu, power pages projenizde herhangi bir yerel kurulum olmadan çalışabileceğiniz bulut tabanlı bir geliştirme ortamı sağlar.

2. Adım: Geliştirme kapsayıcısı yapılandırmasını güncelleştirme

Depoda dosyayı bulun:

.devcontainer/devcontainer.json

.NET 9.0 desteği eklemek için özellikler bölümünü değiştirin. Yapılandırmanız şu şekilde görünmelidir:

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

Kapsayıcıyı Yeniden Oluşturma

Değişikliklerinizi kaydettikten sonra:

  1. Komut paletini açmak için Ctrl + Shift + P tuşuna (Mac'te Command + Shift + P) basın.
  2. Codespaces: Container'ı yeniden oluşturun yazın ve seçin.
  3. Kapsayıcı yeniden başlatılacak. Bu işlem sırasında .NET 9 ve diğer tüm bağımlılıklar yüklenir.
  4. Devam etmeden önce yüklemenin tamamlanması için birkaç saniye bekleyin.

Bu adım, Codespace ortamınızın yeni yapılandırmayla yenilenmesini sağlar. Bu, Codespace'inizin Power Pages derleme araçları için gerekli çalışma zamanını içermesini sağlar.

3. Adım: Power Platform araçlarını yükleme

Codespaces terminalinizden:

  1. Power Platform araçlarını yükleyin (VS Code uzantısı olarak kullanılabilir).
  2. Bu kurulum ayrıca sitelerin kimliğini doğrulamanıza, indirmenize ve yüklemenize olanak tanıyan bir komut satırı arabirimi olan PAC CLI'yi de sunar.

4. Adım: Power Platform ortamınıza bağlanma

Hedef ortamınızda kimlik doğrulaması yapmak için PAC CLI'yi kullanın:

pac auth create -u https://org12x34x45.crm.dynamics.com

URL'yi gerçek Power Platform ortamı URL'nizle değiştirin.

5. Adım: Sitenizi oluşturma

Dağıtmadan önce site kodunuzu oluşturun:

npm run build

Bu komut sitenizi derler ve yapıtları bir dist klasöre aktarır.

6. Adım: Sitenizi yükleyin

Aşağıdakileri kullanarak sitenizi Power Pages ortamına dağıtın:

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

Parametreler

Parametre Diğer ad Description
--rootPath -rp Sitenizin kaynak dosyalarını içeren yerel klasör
--compiledPath -cp React build gibi derlenmiş varlıklara giden yol
--siteName -sn Power Pages sitenizin görünen adı

7. Adım: Yeniden etkinleştirme ve test

  1. Karşıya yüklemeden sonra siteniz Power Pages içindeki Etkin Olmayan siteler altında görünür.
  2. Etkin olmayan siteler'e gidin, sitenizi bulun ve Yeniden etkinleştir'i seçin.
  3. Site etkin hale geldiğinde, dağıtımı onaylamak için URL'sini açın.

Sonraki Adımlar: Sitenizin Güvenliğini Sağlama ve Genişletme

Artık siteniz dağıtıldı, şimdi:

  • Last updated on