Öğretici: Azure Time Series Insights tek sayfalı web uygulaması oluşturmaTutorial: Create an Azure Time Series Insights single-page web app

Bu öğreticide, Azure Time Series Insights verilerine erişmek için kendi web tek sayfalı uygulama (SPA) oluşturma işlemi boyunca size yol gösterir.This tutorial guides you through the process of creating your own single-page web application (SPA) to access Azure Time Series Insights data.

Bu öğreticide şu konular hakkında bilgi edineceksiniz:In this tutorial, you'll learn about:

  • Uygulama tasarımıThe application design
  • Azure Active Directory (Azure AD) ile uygulamanızı kaydetmeHow to register your application with Azure Active Directory (Azure AD)
  • Web uygulamanızı derleme, yayımlama ve test etmeHow to build, publish, and test your web application

Not

  • Bu öğretici için kaynak kod üzerinde sağlanan GitHub.The source code for this tutorial is provided on GitHub.
  • Time Series Insights istemci örnek uygulaması Bu öğreticide kullanılan tamamlanan uygulama göstermek için barındırılır.The Time Series Insights client sample app is hosted to show the completed app used in this tutorial.

ÖnkoşullarPrerequisites

  • Kaydolun bir Azure aboneliği zaten yoksa.Sign up for a free Azure subscription if you don't already have one.

  • Visual Studio ücretsiz bir kopyası.A free copy of Visual Studio. İndirme 2017 veya 2019 topluluk sürümlerini kullanmaya başlamak için.Download the 2017 or 2019 Community versions to get started.

  • IIS Express, Web dağıtımı ve Azure Cloud Services araçları için çekirdek bileşenler Visual Studio.The IIS Express, Web Deploy, and Azure Cloud Services core tools components for Visual Studio. Bileşenler, Visual Studio yüklemenizi değiştirerek ekleyin.Add the components by modifying your Visual Studio installation.

Uygulama tasarımıApplication design

Time Series Insights örnek SPA tasarım ve Bu öğreticide kullanılan kod temelini oluşturur.The Time Series Insights sample SPA is the basis for the design and code used in this tutorial. Kod, zaman serisi öngörüleri JavaScript istemci kitaplığını kullanır.The code uses the Time Series Insights JavaScript client library. Time Series Insights istemci kitaplığı, iki ana API kategorisi için bir Özet sağlar:The Time Series Insights client library provides an abstraction for two main API categories:

  • Time Series Insights'ı çağırmak için sarmalayıcı yöntemleri sorgu API'leri: JSON göre ifadeler kullanarak zaman serisi öngörüleri için veri sorgulamak için kullanabileceğiniz REST API'ler.Wrapper methods for calling the Time Series Insights query APIs: REST APIs you can use to query for Time Series Insights data by using JSON-based expressions. Yöntemleri kitaplığı TsiClient.server ad alanı altında düzenlenir.The methods are organized under the TsiClient.server namespace of the library.

  • Oluşturma ve doldurma denetimleri grafik türleri çeşitli yöntemleri: Bir Web sayfasındaki zaman serisi öngörüleri verilerini görselleştirmek için kullanabileceğiniz yöntemler.Methods for creating and populating several types of charting controls: Methods you can use to visualize Time Series Insights data in a webpage. Yöntemleri kitaplığı TsiClient.ux ad alanı altında düzenlenir.The methods are organized under the TsiClient.ux namespace of the library.

Bu öğreticide, örnek uygulamanın zaman serisi görüşleri ortamından veri de kullanır.This tutorial also uses data from the sample application's Time Series Insights environment. Öğretici yapısını Time Series Insights örnek uygulama ve Time Series Insights istemci kitaplığını kullanma hakkında daha fazla ayrıntı için bkz Azure zaman serisi öngörüleri JavaScript istemci kitaplığını keşfedin.For details about the structure of the Time Series Insights sample application and how it uses the Time Series Insights client library, see the tutorial Explore the Azure Time Series Insights JavaScript client library.

Uygulamayı Azure AD’ye kaydetmeRegister the application with Azure AD

Uygulamayı oluşturmadan önce Azure AD'ye kaydetmeniz gerekir.Before you build the application, you must register it with Azure AD. Kayıt kimlik yapılandırması sağlar. böylece, uygulama için çoklu oturum açmayı OAuth desteğini kullanabilirsiniz.Registration provides the identity configuration, so the application can use OAuth support for single sign-on. OAuth örtük yetki verme türünü kullanmayı Spa'lar gerektirir.OAuth requires SPAs to use the Implicit authorization grant type. Uygulama bildiriminde yetkilendirme güncelleYou update the authorization in the application manifest. Uygulama bildirimi, uygulama kimliği yapılandırmasının JSON gösterimidir.An application manifest is a JSON representation of the application's identity configuration.

  1. Oturum Azure portalında Azure abonelik hesabınızı kullanarak.Sign in to the Azure portal by using your Azure subscription account.

  2. Azure Active Directory > Uygulama kayıtları > Yeni uygulama kaydı’nı seçin.Select Azure Active Directory > App registrations > New application registration.

    Azure portalı - başlangıç Azure AD uygulama kaydıAzure portal - Begin the Azure AD application registration

  3. İçinde Oluştur bölmesinde, gerekli parametreleri doldurun.In the Create pane, fill in the required parameters.

    ParametreParameter AçıklamaDescription
    AdName Anlamlı kayıt adı girin.Enter a meaningful registration name.
    Uygulama türüApplication type Olarak bırakın Web uygulaması/API'si.Leave as Web app/API.
    Oturum Açma URL'siSign-on URL Oturum açma (ana) sayfası uygulama için URL'yi girin.Enter the URL for the sign-in (home) page of the application. Uygulama daha sonra Azure App Service'te barındırılan olduğundan, bir URL https kullanmalıdır://azurewebsites.net etki alanı.Because the application will later be hosted in Azure App Service, you must use a URL in the https://azurewebsites.net domain. Bu örnekte ad, kayıt adına dayalıdır.In this example, the name is based on the registration name.

    Seçin Oluştur yeni uygulama kaydı oluşturmak için.Select Create to create the new application registration.

    Azure portal - Azure AD uygulama kayıt bölmesinde oluşturma seçeneğiAzure portal - The Create option in the Azure AD application registration pane

  4. Kaynak uygulamaları, diğer uygulamaları kullanabilir ve REST API'ler sağlar.Resource applications provide REST APIs that other applications can use. API'ler ayrıca Azure AD'ye kaydedilir.The APIs are also registered with Azure AD. API'leri göstererek istemci uygulamaları için ayrıntılı ve güvenli erişim sağlamak kapsamları.APIs provide granular, secured access to client applications by exposing scopes. Uygulamanızı Azure zaman serisi öngörüleri API çağırdığı API ve kapsam belirtmeniz gerekir.Because your application calls the Azure Time Series Insights API, you must specify the API and scope. Çalışma zamanı kapsamda ve API için izin verilir.Permission is granted for the API and scope at runtime. Seçin ayarları > gerekli izinler > Ekle.Select Settings > Required permissions > Add.

    Azure portal - Azure AD izinleri ekleme seçeneği EkleAzure portal - The Add option for adding Azure AD permissions

  5. İçinde API erişimi Ekle bölmesinde 1 bir API seçin Azure zaman serisi öngörüleri API belirtmek için.In the Add API access pane, select 1 Select an API to specify the Azure Time Series Insights API. İçinde bir API seçin bölmesinde, arama kutusuna girin azure zaman.In the Select an API pane, in the search box, enter azure time. Ardından, Azure Time Series Insights sonuç listesinde.Then, select Azure Time Series Insights in the results list. Seç’i seçin.Choose Select.

    Azure portal - Azure AD izinleri eklemek için arama seçeneğiAzure portal - The search option for adding Azure AD permissions

  6. API için bir kapsam seçin API erişimi Ekle bölmesinde 2 Select izinleri.To select a scope for the API, in the Add API access pane, select 2 Select permissions. İçinde erişimini etkinleştir bölmesinde erişim Azure Time Series Insights hizmeti kapsam.In the Enable Access pane, select the Access Azure Time Series Insights service scope. Seç’i seçin.Choose Select. Döndürülen API erişimi Ekle bölmesi.You're returned to the Add API access pane. Done (Bitti) öğesini seçin.Select Done.

    Azure portal - Azure AD izinleri eklemek için bir kapsamını ayarlamaAzure portal - Set a scope for adding Azure AD permissions

  7. İçinde gerekli izinler Azure zaman serisi öngörüleri API bölmesinde artık gösterilmektedir.In the Required permissions pane, the Azure Time Series Insights API is now shown. Ayrıca tüm kullanıcılar için kapsam ve API'ye erişmek uygulamanın ön onay izin vermeniz gerekir.You also need to provide pre-consent permission for the application to access the API and scope for all users. Seçin izinleri verinve ardından Evet.Select Grant permissions, and then select Yes.

    Azure portal - Azure AD'ye ekleme izni izinler seçeneğini gerekli izinlerAzure portal - The Grant permissions option for adding Azure AD required permissions

  8. Daha önce açıklandığı gibi uygulama bildirimini de güncelleştirmeniz gerekir.As we discussed earlier, you also must update the application manifest. ("İçerik haritası") Bölmenin üst kısmındaki menüde yatay, geri dönmek için uygulama adı seçin kayıtlı uygulama bölmesi.In the horizontal menu at the top of the pane (the "breadcrumb"), select the application name to return to the Registered app pane. Seçin bildirim, değiştirme oauth2AllowImplicitFlow özelliğini trueve ardından Kaydet.Select Manifest, change the oauth2AllowImplicitFlow property to true, and then select Save.

    Azure portal - Azure AD güncelleştirme bildirimiAzure portal - Update the Azure AD manifest

  9. Alan içerik haritasındaki dönmek için uygulama adı seçin kayıtlı uygulama bölmesi.In the breadcrumb, select the application name to return to the Registered app pane. Değerlerini kopyalayın giriş sayfası ve uygulama kimliği uygulamanız için.Copy the values for Home page and Application ID for your application. Öğreticinin ilerleyen bölümlerinde bu özellikleri kullanın.You use these properties later in the tutorial.

    Azure portalı - giriş sayfası URL'si ve uygulama kimliği, uygulamanız için değerleri kopyalamaAzure portal - Copy the Home Page URL and Application ID values for your application

Web uygulamasını derleme ve yayımlamaBuild and publish the web application

  1. Uygulamanızın proje dosyalarını depolamak için bir dizin oluşturun.Create a directory to store your application project files. Ardından, aşağıdaki URL'lerden her birine gidin.Then, go to each of the following URLs. Sağ ham sayfanın sağ üst köşesinde bulunan bağlantı ve ardından Kaydet proje dizininizde dosyaları kaydetmek için.Right-click the Raw link in the upper-right corner of the page, and then select Save as to save the files in your project directory.

    Not

    Tarayıcıya bağlı olarak, dosyayı kaydetmeden önce dosya uzantılarını .html veya .css değiştirmeniz gerekebilir.Depending on the browser, you might need to change the file extensions to .html or .css before you save the file.

  2. Visual Studio'da gerekli bileşenlerin yüklü olduğunu doğrulayın.Verify that the required components are installed in Visual Studio. Visual Studio için IIS Express, Web dağıtımı ve Azure Cloud Services temel araçları bileşenleri yüklü olmalıdır.The IIS Express, Web Deploy, and Azure Cloud Services core tools components for Visual Studio must be installed.

    Visual Studio - yüklü bileşenlerin değiştirmeVisual Studio - Modify the installed components

    Not

    Visual Studio deneyiminizi sürümü ve yapılandırma ayarlarınıza bağlı olarak gösterilen örneklerden biraz farklı olabilir.Your Visual Studio experience might vary slightly from the depicted examples depending on your version and configuration settings.

  3. Visual Studio'yu açın ve oturum açın.Open Visual Studio and sign in. Web uygulaması projesi oluşturmak için dosya menüsünde açık > Web sitesi.To create a project for the web application, on the File menu, select Open > Web Site.

    Visual Studio - yeni bir çözüm oluşturmaVisual Studio - Create a new solution

  4. İçinde açık Web sitesi bölmesinde, HTML ve CSS dosyaları depolandığı çalışma dizini seçin ve ardından açık.In the Open Web Site pane, select the working directory where you stored the HTML and CSS files, and then select Open.

    Visual Studio - Dosya menüsünü açın ve Web sitesi seçenekleriyleVisual Studio - The File menu, with the Open and Web Site options

  5. Visual Studio görünümü menüsünde Çözüm Gezgini.In the Visual Studio View menu, select Solution Explorer. Yeni çözümünüzü açılır.Your new solution opens. HTML ve CSS dosyaları içeren bir Web sitesi projesi (dünya simgesi) içeriyor.It contains a website project (globe icon), which contains the HTML and CSS files.

    Visual Studio - Çözüm Gezgini'ndeki yeni çözümVisual Studio - The new solution in Solution Explorer

  6. Uygulamanızı yayımlamadan önce yapılandırma ayarlarında alter index.html.Before you publish your app, you must alter the configuration settings in index.html.

    1. Yorum altında üç satırı açıklamadan çıkarın "PROD RESOURCE LINKS" bağımlılıkları geliştirmeden üretime geçin.Uncomment the three lines under the comment "PROD RESOURCE LINKS" to switch the dependencies from DEVELOPMENT to PRODUCTION. Yorum altında üç satır yorum "DEV RESOURCE LINKS".Comment out the three lines under the comment "DEV RESOURCE LINKS".

      <html><head>
          <title>Time Series Insights Sample App</title>
          <meta charset="utf-8">
          <meta http-equiv="cache-control" content="no-cache" />
          <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script>
          
          <!--bluebird for Promise polyfill to support IE in sample client-->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>    
          
          <!-- PROD RESOURCE LINKS -->
          <!-- <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
          <script src="https://unpkg.com/tsiclient@1.1.4/tsiclient.js"></script>
          <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@1.1.4/tsiclient.css"> -->
      
          <!-- DEV RESOURCE LINKS -->
          <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
          <script src="../../dist/tsiclient.js"></script>
          <link rel="stylesheet" type="text/css" href="../../dist/tsiclient.css">
      </head>
      

      Aşağıdaki örnekteki gibi bağımlılıklarınızı Açıklamalı:Your dependencies should be commented like the following example:

      <!-- PROD RESOURCE LINKS -->
      <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
      <script src="https://unpkg.com/tsiclient@1.1.4/tsiclient.js"></script>
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@1.1.4/tsiclient.css">
      
      <!-- DEV RESOURCE LINKS -->
      <!-- <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
      <script src="../../dist/tsiclient.js"></script>
      <link rel="stylesheet" type="text/css" href="../../dist/tsiclient.css"> -->
      
    2. Azure AD uygulama kayıt Kimliğinizi kullanmak için uygulamayı yapılandırmak için değiştirme clientID ve postLogoutRedirectUri değerler için kullanılacak değerler uygulama kimliği ve giriş sayfası içinde9.adımdakopyaladığınız Uygulamayı Azure AD'ye kaydetme.To configure the app to use your Azure AD app registration ID, change the clientID and postLogoutRedirectUri values to use the values for Application ID and Home Page that you copied in step 9 in Register the application with Azure AD.

      // START: AUTHENTICATION RELATED CODE USING ADAL.JS
          // Set up ADAL
          var authContext = new AuthenticationContext({
              clientId: '000000-000000-000000-000000',
              postLogoutRedirectUri: 'https://tsiapp.azurewebsites.net/',
              cacheLocation: 'localStorage'
          });
      

      Örneğin:For example:

      clientId: '8884d4ca-b9e7-403a-bd8a-366d0ce0d460',
      postLogoutRedirectUri: 'https://tsispaapp.azurewebsites.net',
      
    3. Değişiklikleri bitirdiğinizde kaydetmeniz index.html.When you're finished making modifications, save index.html.

  7. Web uygulaması, Azure aboneliğinizde bir Azure uygulama hizmeti olarak yayımlayın.Publish the web application in your Azure subscription as an Azure App Service.

    Not

    Aşağıdaki adımlarda gösterildiği ekran görüntüleri de çeşitli seçenekler, Azure aboneliğinizde verilerle otomatik olarak doldurulur.Several options in the screenshots that are shown in the following steps are automatically populated with data from your Azure subscription. İşlemin her bölme için tamamen yüklemek için birkaç saniye sürebilir.It might take a few seconds for each pane to load completely.

    1. Çözüm Gezgini'nde Web sitesi proje düğümüne sağ tıklayın ve ardından Web uygulaması yayımlama.In Solution Explorer, right-click the website project node, and then select Publish Web App.

      Visual Studio - Çözüm Gezgini Web uygulaması yayımlama seçeneğini seçinVisual Studio - Select the Solution Explorer Publish Web App option

    2. Seçin Başlat uygulamanız yayımlanırken başlatmak için.Select Start to begin publishing your app.

      Visual Studio - yayımlama profili bölmesiVisual Studio - The Publish profile pane

    3. Uygulamayı yayımlamak için kullanmak istediğiniz aboneliği seçin.Select the subscription that you want to use to publish the application. Seçin TsiSpaApp proje.Select the TsiSpaApp project. Sonra Tamam’ı seçin.Then, select OK.

      Visual Studio - App Service bölmesinde yayımlama profiliVisual Studio - The Publish profile App Service pane

    4. Seçin Yayımla web uygulamasını dağıtma işlemi.Select Publish to deploy the web application.

      Visual Studio - Yayımla seçeneğini ve yayınlama günlük çıktısıVisual Studio - The Publish option and the publish log output

    5. Visual Studio'da başarılı Yayımla günlük görünür çıkış bölmesi.A successful publish log appears in the Visual Studio Output pane. Dağıtım tamamlandığında, Visual Studio web uygulaması bir tarayıcı sekmesinde açılır ve oturum açma için ister.When deployment is finished, Visual Studio opens the web application in a browser tab and prompts for sign-in. Başarılı oturum açma işleminden sonra zaman serisi görüşleri denetimlerin verilerle doldurulur.After successful sign-in, the Time Series Insights controls are populated with data.

Sorun gidermeTroubleshoot

Hata kodu/durumuError code/condition AçıklamaDescription
AADSTS50011: Uygulama için kayıtlı yanıt adresi yok.AADSTS50011: No reply address is registered for the application. Azure AD kaydı eksik yanıt URL'si özelliği.The Azure AD registration is missing the Reply URL property. Git ayarları > yanıt URL'leri , Azure AD uygulama kaydı için.Go to Settings > Reply URLs for your Azure AD application registration. Doğrulayın oturum açma adım 3'de belirtilen URL uygulamayı Azure AD'ye kaydetme mevcuttur.Verify that the Sign-on URL specified in step 3 in Register the application with Azure AD is present.
AADSTS50011: Yanıt URL'si istekte belirtilen uygulama için yapılandırılan yanıt URL'lerinden eşleşmiyor: '<Uygulama kimliği GUID >'.AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application: '<Application ID GUID>'. postLogoutRedirectUri Adım 6'de belirtilen oluşturun ve web uygulaması yayımlamaya altında belirtilen değer eşleşmelidir ayarları > yanıt URL'leri içinde Azure AD uygulama kaydı.The postLogoutRedirectUri specified in step 6 in Build and publish the web application must match the value specified under Settings > Reply URLs in your Azure AD application registration. Ayrıca değerini değiştirdiğinizden emin olun hedef URL kullanılacak https başına 5 adımda oluşturun ve web uygulaması yayımlamaya.Be sure to also change the value for Destination URL to use https per step 5 in Build and publish the web application.
Web uygulaması yükler, ancak bir unstyled, salt metin oturum açma sayfası, beyaz arka plan bulunur.The web application loads, but it has an unstyled, text-only sign-in page, with a white background. Ele yolları 4 adımı olduğunu doğrulayın oluşturun ve web uygulaması yayımlamaya doğrudur.Verify that the paths discussed in step 4 in Build and publish the web application are correct. Web uygulaması .css dosyalarını bulamadığında sayfa stili doğru şekilde uygulanmaz.If the web application can't find the .css files, the page won't be styled correctly.

Kaynakları temizlemeClean up resources

Bu öğretici çalışan birkaç Azure hizmeti oluşturur.This tutorial creates several running Azure services. Bu öğretici serisinin tamamlanmasını planlamıyorsanız, gereksiz yinelenen maliyetler oluşmasını önlemek için tüm kaynakları silmeniz önerilir.If you don't plan to finish this tutorial series, we recommend that you delete all resources to avoid incurring unnecessary costs.

Azure portalında sol taraftaki menüde:In the Azure portal left menu:

  1. Seçin kaynak gruplarıve ardından zaman serisi görüşleri ortamı için oluşturduğunuz kaynak grubunu seçin.Select Resource groups, and then select the resource group you created for the Time Series Insights environment. Sayfanın üst kısmında seçin kaynak grubunu Silkaynak grubunun adını girin ve ardından Sil.At the top of the page, select Delete resource group, enter the name of the resource group, and then select Delete.
  2. Seçin kaynak gruplarıve ardından cihaz benzetimi çözüm Hızlandırıcı tarafından oluşturulan kaynak grubunu seçin.Select Resource groups, and then select the resource group that was created by the device simulation solution accelerator. Sayfanın üst kısmında seçin kaynak grubunu Silkaynak grubunun adını girin ve ardından Sil.At the top of the page, select Delete resource group, enter the name of the resource group, and then select Delete.

Sonraki adımlarNext steps

Bu öğreticide, hakkında bilgi edindiniz:In this tutorial, you learned about:

  • Uygulama tasarımıThe application design
  • Uygulamanızı Azure AD'ye kaydetmeHow to register your application with Azure AD
  • Web uygulamanızı derleme, yayımlama ve test etmeHow to build, publish, and test your web application

Bu öğreticide, Azure AD ile tümleştirir ve erişim belirteci alma oturum açmış olan kullanıcının kimliğini kullanır.This tutorial integrates with Azure AD and uses the identity of the user who is signed in to acquire an access token. Bir hizmet veya yordam uygulama kimliğini kullanarak zaman serisi öngörüleri API erişimi öğrenmek için bu makaleye bakın:To learn how to access the Time Series Insights API by using the identity of a service or daemon application, see this article: