Önceki

Sonraki

Alıştırma - Altair web terminali dağıtma

Tamamlandı

Bu alıştırmada Altair web terminali için statik bir web uygulaması dağıtacaksınız.

1. Adım: AltairWebTerminal depoyu oluşturma

AzureSphereAltair8800.terminal GitHub şablonundan AltairWebTerminal deposunu oluşturun.

1. Web tarayıcınızdan AzureSphereAltair8800.terminal deponuzu açın.

2. Bu şablonu kullan'ı seçin.

3. Deponuza AltairWebTerminal adını verin.

4. Özel’i seçin.

5. Şablondan depo oluştur'u seçin.

6. Kopyalanan depoyu web tarayıcısında açık bırakın.

2. Adım: AltairWebTerminal depoyu kopyalama

AltairWebTerminal deposunu GitHub hesabınızdan bilgisayarınıza kopyalayın.

1. Kod'a ve ardından AltairWebTerminal deposunun Pano simgesine tıklayarak AltairWebTerminal depo adresini kopyalayın.

   

2. Komut istemi penceresinde aşağıdaki komutu çalıştırarak AltairWebTerminal deposunu bilgisayarınıza kopyalayın:

   git clone <AltairWebTerminal_Repository_Address>
   

   AltairWebTerminal depo adresini panodan yapıştırabileceğinizi unutmayın.

3. Adım: Altair web terminali projesini açma

1. Visual Studio Code'u açın.
2. Dosya>Aç klasörü'ne tıklayın.
3. Bilgisayarınıza kopyaladığınız AltairWebTerminal klasörünü açın.

4. Adım: Azure Static Web Apps uzantısını yükleme

Visual Studio Code'da, aşağıdaki yerlerden birinden Azure Static Web Apps uzantısını yükleyin:

• Uzantı Marketi'ne gidin.
• Visual Studio Code'da Uzantı Marketi'nde Azure Static Web Apps araması yapın.

5. Adım: Altair web terminalini dağıtma

1. Uzantı yüklendikten sonra Visual Studio Code'da F1 anahtarını seçin.

2. Statik web uygulaması oluştur yazın ve Azure Statik Web Uygulamaları: Statik Web Uygulaması Oluştur... seçeneğini belirleyin. (Gelişmiş).

3. Aboneliğinizi seçin.

4. Gerekirse, bilgi isteminde GitHub hesabınızla oturum açın.

5. Yeni kaynak grubu oluştur'u seçin.

6. Kaynak grubunu AltairWebTerminal olarak adlandırın.

7. Statik web uygulamasının adı için AltairWebTerminal girin.

8. SKU için Ücretsiz'i seçin.

9. Özel derleme ön ayarını seçin.

10. Uygulama kodunuzun konumu için bir eğik çizgi karakteri (/) girin.

11. Derleme çıktı konumu için değeri boş bırakın.

12. Yeni kaynağın konumu için statik web uygulaması için tercih ettiğiniz konumu seçin.

6. Adım: GitHub eylemini görüntüleme

Visual Studio Code açılır penceresinde GitHub'da Eylemleri Aç'ı seçin.

Eylemin çalıştırılması yaklaşık iki dakika sürer. GitHub eyleminin çalışması tamamlandığında durum göstergesi yeşile dönüşür.

7. Adım: Altair web terminali ayarlarını oluşturma

1. GitHub eylem durumunu temizlemek için Visual Studio Code'ı kapatıp yeniden açın.

2. Dosya>Aç klasörü'ne tıklayın.

3. Bilgisayarınıza kopyaladığınız AltairWebTerminal klasörünü açın ve ardından Altair web terminal api klasörünü açın.

4. local.settings.sample.json dosyasını local.settings.json olarak yeniden adlandırın.

5. local.settings.json dosyasını açın.

   MQTT aracı yapılandırması, test.mosquitto.org genel MQTT aracısı için önceden doldurulur.

6. Daha önce kaydettiğiniz Azure IoT Central API belirtecini ve URL'sini kullanarak Azure IoT Central ayarlarını yapılandırın.

7. Aşağıdaki özellik değerlerini güncelleştirin:

   • IOT_CENTRAL_API_TOKEN
   • IOT_CENTRAL_URL

İşiniz bittiğinde local.settings.json dosyanızın içeriği aşağıdakine benzer görünmelidir:

8. Adım: Altair web terminali yerel ayarlarını karşıya yükleme

1. Hala Visual Studio Code'da F1 tuşunu seçin.

2. Statik yerel yazın ve Ardından Azure Statik Web Uygulamaları: Yerel Ayarlar Karşıya Yükle'yi seçin.

3. Aboneliğinizi seçin.

4. Static Web App için, oluşturduğunuz adı (AltairWebTerminal) girin.

5. Ortam için Üretim girin.

Altair web terminali ayarı karşıya yüklenir.

9. Adım: Kullanıcıları Altair web terminaline davet etme

Altair web terminali, güvenliğini korumak için kimliği doğrulanmış kullanıcılar gerektirir. Bu, kendiniz de dahil olmak üzere kullanıcıları Altair web terminali için statik web uygulamasına davet etmeniz gerektiği anlamına gelir.

1. Azure Portal oturum açın.

2. Sol bölmede Tüm kaynaklar'ı seçin.

   

3. Sol üstteki kaynak filtresi kutusuna altairwebterminal yazın.

   

4. Filtre sonuçları listesinde, Ad'ın altında AltairWebTerminal'i seçin.

5. Sol bölmede Rol yönetimi'ni ve ardından Davet Et'i seçin.

   

6. Davet oluştur bağlantısı bölmesinde aşağıdakileri yapın:

   a. Kimlik doğrulama sağlayıcısı için sağlayıcınızı seçin.
   b. E-posta adresi için e-posta adresinizi veya kullanıcı tanıtıcınızı girin.
   c. Rol alanına kullanıcıları girin.
   d. Oluşturseçeneğini belirleyin.
   e. Davet et bağlantısının yanında, sonraki adımda kullanmak üzere bağlantıyı kopyalayın.

10. Adım: Davet bağlantısını etkinleştirme

Aşağıdakilerden birini yapın:

• Davet bağlantısı sizin içinse:

  a. Bağlantıyı tarayıcı adres çubuğuna yapıştırın.
  b. E-posta adresinizi veya kullanıcı tanıtıcınızı kullanarak kimlik doğrulaması.
  c. İzin verme.

• Davet bağlantısı başka birine aitse, bu kişiye kimlik doğrulaması yapmak ve onay vermek için bağlantıyı gönderin.

11. Adım: Altair web terminalini Azure Sphere cihazınıza Bağlan

Kimliğiniz doğrulandığında Altair öykünücüsuna bağlanın. Öncelikle Azure IoT Central'da cihazınızın adını almanız gerekir:

1. Tarayıcınızda Azure IoT Central'a gidin.
2. Cihazlar sekmesini seçin, Azure Sphere'da Altair şablonunu seçin ve ardından Azure Sphere cihazınızı seçin.
3. Cihaz adını kopyalayın.
4. Tarayıcıdaki Web Terminali sekmesinde cihaz adını yapıştırın ve ardından Bağlan'ı seçin.
5. Tarayıcı sık kullanılanlarınıza Altair Web Terminali sayfasını ekleyin.

MQTT aracısı durum iletisi Bağlan olarak değişir. Web terminali başarıyla bağlandığında, durum Bağlan olarak değişir.

Devam et