Apache Cordova uygulamanıza anında iletme bildirimleri ekleme

Genel Bakış

Bu öğreticide, Apache Cordova hızlı başlangıç projesine anında iletme bildirimleri ekleyerek her kayıt eklendiğinde cihaza anında iletme bildirimi gönderilmesini sağlarsınız.

İndirilen hızlı başlangıç sunucusu projesini kullanmıyorsanız, anında iletme bildirimi uzantısı paketine ihtiyacınız vardır. Daha fazla bilgi için bkz . Mobile Apps için .NET arka uç sunucusu SDK'sı ile çalışma.

Önkoşullar

Bu öğreticide, Visual Studio 2015 ile geliştirilmiş bir Apache Cordova uygulamanız olduğu varsayılır. Bu cihaz Google Android Emulator, Android cihaz, Windows cihaz veya iOS cihaz üzerinde çalıştırılmalıdır.

Bu öğreticiyi tamamlamak için aşağıdakiler gerekir:

Bildirim hub’ını yapılandırma

Azure App Service Mobile Apps özelliği, gönderim göndermek için Azure Notification Hubs'ı kullandığından, mobil uygulamanız için bir bildirim hub'ı yapılandıracaksınız.

  1. Azure portalApp Services'e gidin ve uygulamanızın arka ucunu seçin. Ayarlar altında Gönder'i seçin.

  2. Uygulamaya bildirim hub'ı kaynağı eklemek için Bağlan'ı seçin. Hub oluşturabilir veya mevcut bir hub'a bağlanabilirsiniz.

    Configure a hub

Artık Mobile Apps arka uç projenize bir bildirim hub'ı bağladınız. Daha sonra bu bildirim hub'sını cihazlara göndermek üzere bir platform bildirim sistemine (PNS) bağlanacak şekilde yapılandıracaksınız.

Bu bölümdeki adımları gösteren bir video izleyin.

Sunucu projesini güncelleştirme

Bu bölümde, mevcut Mobile Apps arka uç projenizdeki kodu her yeni öğe eklendiğinde anında iletme bildirimi gönderecek şekilde güncelleştirirsiniz. Bu işlem, platformlar arası gönderime olanak tanıyan Azure Notification Hubs'ın şablon özelliğiyle desteklenir. Çeşitli istemciler şablonlar kullanılarak anında iletme bildirimleri için kaydedilir ve tek bir evrensel gönderim tüm istemci platformlarına ulaşabilir.

Arka uç proje türünüzle eşleşen aşağıdaki yordamlardan birini seçin: .NET arka ucu veya arka ucuNode.js.

.NET arka uç projesi

  1. Visual Studio'da sunucu projesine sağ tıklayın. Ardından NuGet Paketlerini Yönet'i seçin. için Microsoft.Azure.NotificationHubsarama yapın ve yükle'yi seçin. Bu işlem, arka uçtan bildirim göndermek için Notification Hubs kitaplığını yükler.

  2. Sunucu projesinde Controllers>TodoItemController.cs dosyasını açın. Ardından aşağıdaki using deyimlerini ekleyin:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. PostTodoItem yönteminde InsertAsync çağrısından sonra aşağıdaki kodu ekleyin:

    // Get the settings for the server project.
    HttpConfiguration config = this.Configuration;
    MobileAppSettingsDictionary settings =
        this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();
    
    // Get the Notification Hubs credentials for the mobile app.
    string notificationHubName = settings.NotificationHubName;
    string notificationHubConnection = settings
        .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;
    
    // Create a new Notification Hub client.
    NotificationHubClient hub = NotificationHubClient
    .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);
    
    // Send the message so that all template registrations that contain "messageParam"
    // receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
    Dictionary<string,string> templateParams = new Dictionary<string,string>();
    templateParams["messageParam"] = item.Text + " was added to the list.";
    
    try
    {
        // Send the push notification and log the results.
        var result = await hub.SendTemplateNotificationAsync(templateParams);
    
        // Write the success result to the logs.
        config.Services.GetTraceWriter().Info(result.State.ToString());
    }
    catch (System.Exception ex)
    {
        // Write the failure result to the logs.
        config.Services.GetTraceWriter()
            .Error(ex.Message, null, "Push.SendAsync Error");
    }
    

    Bu işlem, öğeyi içeren bir şablon bildirimi gönderir. Yeni öğe eklendiğinde metin.

  4. Sunucu projesini yeniden yayımlayın.

Arka uç proje Node.js

  1. Arka uç projenizi ayarlayın.

  2. todoitem.js'da var olan kodu aşağıdaki kodla değiştirin:

    var azureMobileApps = require('azure-mobile-apps'),
    promises = require('azure-mobile-apps/src/utilities/promises'),
    logger = require('azure-mobile-apps/src/logger');
    
    var table = azureMobileApps.table();
    
    table.insert(function (context) {
    // For more information about the Notification Hubs JavaScript SDK,
    // see https://aka.ms/nodejshubs.
    logger.info('Running TodoItem.insert');
    
    // Define the template payload.
    var payload = '{"messageParam": "' + context.item.text + '" }';  
    
    // Execute the insert. The insert returns the results as a promise.
    // Do the push as a post-execute action within the promise flow.
    return context.execute()
        .then(function (results) {
            // Only do the push if configured.
            if (context.push) {
                // Send a template notification.
                context.push.send(null, payload, function (error) {
                    if (error) {
                        logger.error('Error while sending push notification: ', error);
                    } else {
                        logger.info('Push notification sent successfully!');
                    }
                });
            }
            // Don't forget to return the results from the context.execute().
            return results;
        })
        .catch(function (error) {
            logger.error('Error while running context.execute: ', error);
        });
    });
    
    module.exports = table;  
    

    Bu işlem, yeni bir öğe eklendiğinde item.text dosyasını içeren bir şablon bildirimi gönderir.

  3. Dosyayı yerel bilgisayarınızda düzenlediğinizde, sunucu projesini yeniden yayımlayın.

Cordova uygulamanızı değiştirme

Apache Cordova uygulama projenizin anında iletme bildirimlerini işlemeye hazır olduğundan emin olmak için Cordova anında iletme eklentisini ve platforma özgü anında iletme hizmetlerini yükleyin.

Projenizdeki Cordova sürümünü güncelleştirin.

Projeniz 6.1.1 sürümünden önceki bir Apache Cordova sürümünü kullanıyorsa istemci projesini güncelleştirin. Projeyi güncelleştirmek için aşağıdaki adımları uygulayın:

  • Yapılandırma tasarımcısını açmak için öğesine sağ tıklayın config.xml.
  • Platformlar sekmesini seçin.
  • Cordova CLI metin kutusunda 6.1.1'i seçin.
  • Projeyi güncelleştirmek için Derle'yi ve ardından Çözüm Derle'yi seçin.

Anında iletme eklentisini yükleme

Apache Cordova uygulamalar cihaz veya ağ özelliklerini yerel olarak işlemez. Bu özellikler, npm veya GitHub üzerinde yayımlanan eklentiler tarafından sağlanır. Eklenti, phonegap-plugin-push ağ anında iletme bildirimlerini işler.

Anında iletme eklentisini aşağıdaki yollardan biriyle yükleyebilirsiniz:

Komut isteminden:

Şu komutu çalıştırın:

cordova plugin add phonegap-plugin-push

Visual Studio içinden:

  1. Çözüm Gezgini dosyasını açınconfig.xml. Ardından Eklentiler>Özel'i seçin. Ardından yükleme kaynağı olarak Git'i seçin.

  2. Kaynak olarak girin https://github.com/phonegap/phonegap-plugin-push .

    Open the config.xml file in Solution Explorer

  3. Yükleme kaynağının yanındaki oku seçin.

  4. SENDER_ID'da, Google Developer Console projesi için zaten bir sayısal proje kimliğiniz varsa, buraya ekleyebilirsiniz. Aksi takdirde, 777777 gibi bir yer tutucu değer girin. Android hedefliyorsanız, bu değeri daha sonra config.xml dosyasında güncelleştirebilirsiniz.

    Not

    2.0.0 sürümünden itibaren, gönderen kimliğini yapılandırmak için projenizin kök klasörüne google-services.json dosyasının yüklenmesi gerekir. Daha fazla bilgi için yükleme belgelerine bakın.

  5. Add (Ekle) seçeneğini belirleyin.

Anında iletme eklentisi artık yüklüdür.

Cihaz eklentisini yükleme

Anında iletme eklentisini yüklemek için kullandığınız yordamı izleyin. Core eklentileri listesinden Cihaz eklentisini ekleyin. (Bulmak için Eklentiler'i> seçin Çekirdek.) Platform adını almak için bu eklentiye ihtiyacınız vardır.

Uygulama başlatıldığında cihazınızı kaydetme

Başlangıçta, Android için çok az kod ekleyeceğiz. Daha sonra uygulamayı iOS veya Windows 10 üzerinde çalışacak şekilde değiştirebilirsiniz.

  1. Oturum açma işlemi için geri çağırma sırasında registerForPushNotifications çağrısı ekleyin. Alternatif olarak, onDeviceReady yönteminin altına ekleyebilirsiniz:

    // Log in to the service.
    client.login('google')
        .then(function () {
            // Create a table reference.
            todoItemTable = client.getTable('todoitem');
    
            // Refresh the todoItems.
            refreshDisplay();
    
            // Wire up the UI Event Handler for the Add Item.
            $('#add-item').submit(addItemHandler);
            $('#refresh').on('click', refreshDisplay);
    
                // Added to register for push notifications.
            registerForPushNotifications();
    
        }, handleError);
    

    Bu örnekte, kimlik doğrulaması başarılı olduktan sonra registerForPushNotifications çağrısı gösterilmektedir. Gerektiğinde istediğiniz sıklıkta arayabilirsiniz registerForPushNotifications() .

  2. Yeni registerForPushNotifications yöntemini aşağıdaki gibi ekleyin:

    // Register for push notifications. Requires that phonegap-plugin-push be installed.
    var pushRegistration = null;
    function registerForPushNotifications() {
        pushRegistration = PushNotification.init({
            android: { senderID: 'Your_Project_ID' },
            ios: { alert: 'true', badge: 'true', sound: 'true' },
            wns: {}
        });
    
    // Handle the registration event.
    pushRegistration.on('registration', function (data) {
        // Get the native platform of the device.
        var platform = device.platform;
        // Get the handle returned during registration.
        var handle = data.registrationId;
        // Set the device-specific message template.
        if (platform == 'android' || platform == 'Android') {
            // Register for GCM notifications.
            client.push.register('gcm', handle, {
                mytemplate: { body: { data: { message: "{$(messageParam)}" } } }
            });
        } else if (device.platform === 'iOS') {
            // Register for notifications.
            client.push.register('apns', handle, {
                mytemplate: { body: { aps: { alert: "{$(messageParam)}" } } }
            });
        } else if (device.platform === 'windows') {
            // Register for WNS notifications.
            client.push.register('wns', handle, {
                myTemplate: {
                    body: '<toast><visual><binding template="ToastText01"><text id="1">$(messageParam)</text></binding></visual></toast>',
                    headers: { 'X-WNS-Type': 'wns/toast' } }
            });
        }
    });
    
    pushRegistration.on('notification', function (data, d2) {
        alert('Push Received: ' + data.message);
    });
    
    pushRegistration.on('error', handleError);
    }
    
  3. (Android) Önceki kodda değerini Google Geliştirici Konsolu'ndan uygulamanızın sayısal proje kimliğiyle değiştirinYour_Project_ID.

(İsteğe bağlı) Uygulamayı Android yapılandırma ve çalıştırma

Android anında iletme bildirimlerini etkinleştirmek için bu bölümü tamamlayın.

Firebase Cloud Messaging'i etkinleştirme

Başlangıçta Google Android platformunu hedeflediğiniz için Firebase Cloud Microsoft Mesajlaşma'ı etkinleştirmeniz gerekir.

  1. Firebase konsolunda oturum açın. Henüz bir tane yoksa yeni bir Firebase projesi oluşturun.

  2. Projenizi oluşturduktan sonra Firebase’i Android uygulamanıza ekleyin’i seçin.

    Add Firebase to your Android app

  3. Android uygulamanıza Firebase ekleme sayfasında aşağıdaki adımları uygulayın:

    1. Android paket adı için uygulamanızın build.gradle dosyasında applicationId değerini kopyalayın. Bu örnekte, şeklindedir com.fabrikam.fcmtutorial1app.

      Specify the package name

    2. Uygulamayı kaydet'i seçin.

  4. Google-services.json dosyasını indir'i seçin, dosyayı projenizin uygulama klasörüne kaydedin ve ardından İleri'yi seçin.

    Download google-services.json

  5. Android Studio'da projenizde aşağıdaki yapılandırma değişikliklerini yapın.

    1. Proje düzeyi build.gradle dosyanızda (<project>/build.gradle), bağımlılıklar bölümüne aşağıdaki deyimi ekleyin.

      classpath 'com.google.gms:google-services:4.0.1'
      
    2. Uygulama düzeyi build.gradle dosyanızda (<project>/<app-module>/build.gradle), bağımlılıklar bölümüne aşağıdaki deyimleri ekleyin.

      implementation 'com.google.firebase:firebase-core:16.0.8'
      implementation 'com.google.firebase:firebase-messaging:17.3.4'
      
    3. Bağımlılıklar bölümünden sonra uygulama düzeyi build.gradle dosyasının sonuna aşağıdaki satırı ekleyin.

      apply plugin: 'com.google.gms.google-services'
      
    4. Araç çubuğunda Şimdi eşitle'yi seçin.

      build.gradle configuration changes

  6. İleri’yi seçin.

  7. Bu adımı atla'yı seçin.

    Skip the last step

  8. Firebase konsolunda projenizin dişli simgesini seçin. Sonra, Proje Ayarları’nı seçin.

    Select Project Settings

  9. google-services.json dosyasını Android Studio projenizin uygulama klasörüne indirmediyseniz bu sayfadan yapabilirsiniz.

  10. Üstteki Bulut Microsoft Mesajlaşma sekmesine geçin.

  11. Sunucu anahtarını kopyalayıp daha sonra kullanmak üzere kaydedin. Hub'ınızı yapılandırmak için bu değeri kullanırsınız.

FCM kullanarak anında iletme istekleri göndermek için Mobil Uygulama arka ucunu yapılandırma

  1. Azure portal Tüm >Uygulama HizmetlerineGözat'ıseçin. Ardından Mobile Apps arka ucunuzu seçin.
  2. Ayarlar altında Gönder'i seçin. Ardından Anında iletme bildirimi hizmetlerini yapılandır'ı seçin.
  3. Google'a (GCM) gidin. Firebase konsolundan aldığınız FCM eski sunucu anahtarını girin ve Kaydet'i seçin.

Hizmetiniz artık Firebase Cloud Microsoft Mesajlaşma ile çalışacak şekilde yapılandırılmıştır.

Cordova uygulamanızı Android için yapılandırma

Cordova uygulamanızda config.xmlaçın. Ardından değerini Google Geliştirici Konsolu'ndan uygulamanızın sayısal proje kimliğiyle değiştirinYour_Project_ID.

<plugin name="phonegap-plugin-push" version="1.7.1" src="https://github.com/phonegap/phonegap-plugin-push.git">
    <variable name="SENDER_ID" value="Your_Project_ID" />
</plugin>

index.jsaçın. Ardından kodu sayısal proje kimliğinizi kullanacak şekilde güncelleştirin.

pushRegistration = PushNotification.init({
    android: { senderID: 'Your_Project_ID' },
    ios: { alert: 'true', badge: 'true', sound: 'true' },
    wns: {}
});

Android cihazınızı USB hata ayıklaması için yapılandırma

Uygulamanızı Android Cihazınıza dağıtmadan önce USB hata ayıklamayı etkinleştirmeniz gerekir. Android telefonunuzda aşağıdaki adımları uygulayın:

  1. Ayarlar>Telefon hakkında'ya gidin. Ardından geliştirici modu etkinleştirilene kadar Derleme numarasına dokunun (yaklaşık yedi kez).
  2. Ayarlar>Geldirici Seçenekleri'ne dönün, USB hata ayıklamayı etkinleştirin. Ardından Android telefonunuzu bir USB kablosuyla geliştirme bilgisayarınıza bağlayın.

Bunu Android 6.0 (Marshmallow) çalıştıran bir Google Nexus 5X cihazı kullanarak test ettik. Ancak teknikler tüm modern Android sürümlerinde ortaktır.

Google Play Hizmetleri yükleme

Anında iletme eklentisi, anında iletme bildirimleri için Android Google Play Hizmetleri dayanır.

  1. Visual Studio'da Araçlar>Android Android>SDK Yöneticisi'ne tıklayın. Ardından Extras klasörünü genişletin. Aşağıdaki SDK'ların her birinin yüklendiğinden emin olmak için uygun kutuları işaretleyin:

    • Android 2.3 veya üzeri
    • Google Deposu düzeltmesi 27 veya üzeri
    • Google Play Hizmetleri 9.0.2 veya üzeri
  2. Paketleri Yükle'yi seçin. Ardından yüklemenin tamamlanmasını bekleyin.

Geçerli gerekli kitaplıklar phonegap-plugin-push yükleme belgelerinde listelenmiştir.

Android'da uygulamadaki anında iletme bildirimlerini test edin

Artık uygulamayı çalıştırıp TodoItem tablosuna öğe ekleyerek anında iletme bildirimlerini test edebilirsiniz. Aynı arka ucu kullandığınız sürece aynı cihazdan veya ikinci bir cihazdan test edebilirsiniz. Cordova uygulamanızı aşağıdaki yollardan biriyle Android platformunda test edin:

  • Fiziksel bir cihazda: Android cihazınızı bir USB kablosuyla geliştirme bilgisayarınıza takın. Google Android Emulator yerine Cihaz'ı seçin. Visual Studio uygulamayı cihaza dağıtır ve çalıştırır. Daha sonra cihazda uygulamayla etkileşim kurabilirsiniz.

    Mobizen gibi ekran paylaşım uygulamaları, Android uygulamaları geliştirmenize yardımcı olabilir. Mobizen, Android ekranınızı bilgisayarınızdaki bir web tarayıcısına projeleriz.

  • Android öykünücüsnde: Öykünücü kullanırken gereken ek yapılandırma adımları vardır.

    Android Sanal Cihaz (AVD) yöneticisinde gösterildiği gibi Google API'lerinin hedef olarak ayarlandığı bir sanal cihaza dağıtım yaptığınızdan emin olun.

    Android Virtual Device Manager

    Daha hızlı bir x86 öykünücüsü kullanmak istiyorsanız HAXM sürücüsünü yükleyin ve ardından öykünücüyü bunu kullanacak şekilde yapılandırın.

    Uygulamalar>Ayarlar> Hesap ekle'yi seçerek Android cihazına bir Google hesabı ekleyin. Ardından istemleri izleyin.

    Add a Google account to the Android device

    Yapılacaklar listesi uygulamasını daha önce olduğu gibi çalıştırın ve yeni bir yapılacaklar öğesi ekleyin. Bu kez, bildirim alanında bir bildirim simgesi görüntülenir. Bildirimin tam metnini görüntülemek için bildirim çekmecesini açabilirsiniz.

    View notification

(İsteğe bağlı) iOS yapılandırma ve çalıştırma

Bu bölüm, Cordova projesini iOS cihazlarda çalıştırmaya yöneliktir. iOS cihazlarla çalışmıyorsanız bu bölümü atlayabilirsiniz.

Mac veya bulut hizmetinde iOS uzaktan derleme aracısını yükleme ve çalıştırma

Visual Studio kullanarak cordova uygulamasını iOS çalıştırabilmeniz için önce iOS kurulum kılavuzundaki adımları izleyerek uzak derleme aracısını yükleyin ve çalıştırın.

Uygulamayı iOS için derleyebileceğinizden emin olun. Kurulum kılavuzundaki adımlar, uygulamayı Visual Studio'dan iOS oluşturmak için gereklidir. Mac'iniz yoksa, MacInCloud gibi bir hizmette uzak derleme aracısını kullanarak iOS için derleme yapabilirsiniz. Daha fazla bilgi için bkz. iOS uygulamanızı bulutta çalıştırma.

Not

Xcode 7 veya üzeri, iOS anında iletme eklentisini kullanmak için gereklidir.

Uygulama Kimliğiniz olarak kullanılacak kimliği bulma

Uygulamanızı anında iletme bildirimleri için kaydetmeden önce Cordova uygulamanızda config.xml açın, widget öğesinde öznitelik değerini bulun id ve daha sonra kullanmak üzere kopyalayın. Aşağıdaki XML'de kimlik değeridir io.cordova.myapp7777777.

<widget defaultlocale="en-US" id="io.cordova.myapp7777777"
    version="1.0.0" windows-packageVersion="1.1.0.0" xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="https://schemas.microsoft.com/appx/2014/htmlapps">

Daha sonra, Apple'ın geliştirici portalında bir Uygulama Kimliği oluştururken bu tanımlayıcıyı kullanın. Geliştirici portalında farklı bir Uygulama Kimliği oluşturursanız, bu öğreticinin devamında birkaç ek adım uygulamanız gerekir. Pencere öğesindeki kimlik, geliştirici portalındaki Uygulama Kimliği ile eşleşmelidir.

Apple'ın geliştirici portalında anında iletme bildirimleri için uygulamayı kaydetme

Benzer adımları gösteren bir video izleyin

Azure'ı anında iletme bildirimleri gönderecek şekilde yapılandırma

  1. Mac bilgisayarınızda Anahtarlık Erişimi'ni başlatın. Sol gezinti çubuğundaki Kategori'nin altında Sertifikalarım'ı açın. Önceki bölümde indirdiğiniz SSL sertifikasını bulun ve içeriğini açıklayın. Yalnızca sertifikayı seçin (özel anahtarı seçmeyin). Ardından dışarı aktarın.
  2. Azure portal Tüm >Uygulama HizmetlerineGözat'ıseçin. Ardından Mobile Apps arka ucunuzu seçin.
  3. Ayarlar altında App Service Gönder'i seçin. Ardından bildirim hub'ınızın adını seçin.
  4. Apple Anında İletme Bildirimi Hizmetleri>Upload Sertifikası'na gidin. Doğru Modu seçerek .p12 dosyasını Upload (önceki istemci SSL sertifikanızın üretim veya korumalı alan olmasına bağlı olarak). Değişiklikleri kaydedin.

Hizmetiniz artık iOS anında iletme bildirimleriyle çalışacak şekilde yapılandırılmıştır.

Uygulama Kimliğinizin Cordova uygulamanızla eşleştiğinden emin olun

Apple Geliştirici Hesabınızda oluşturduğunuz Uygulama Kimliği zaten config.xml dosyasındaki pencere öğesi kimliğiyle eşleşiyorsa, bu adımı atlayabilirsiniz. Ancak kimlikler eşleşmiyorsa aşağıdaki adımları uygulayın:

  1. Platformlar klasörünü projenizden silin.
  2. Eklentiler klasörünü projenizden silin.
  3. projenizden node_modules klasörünü silin.
  4. Apple geliştirici hesabınızda oluşturduğunuz uygulama kimliğini kullanmak için config.xml dosyasındaki pencere öğesi id özniteliğini güncelleştirin.
  5. Projenizi yeniden oluşturun.
iOS uygulamanızda anında iletme bildirimlerini test etme
  1. Visual Studio dağıtım hedefi olarak iOS seçildiğinden emin olun. Ardından bağlı iOS cihazınızda anında iletme bildirimlerini çalıştırmak için Cihaz'ı seçin.

    Anında iletme bildirimlerini iTunes ile bilgisayarınıza bağlı bir iOS cihazda çalıştırabilirsiniz. iOS Simülatörü anında iletme bildirimlerini desteklemez.

  2. Projeyi oluşturmak ve uygulamayı iOS bir cihazda başlatmak için Visual Studio'da Çalıştır düğmesini veya F5'i seçin. Ardından anında iletme bildirimlerini kabul etmek için Tamam'ı seçin.

    Not

    Uygulama, ilk çalıştırma sırasında anında iletme bildirimleri için onay isteğinde bulunur.

  3. Uygulamada bir görev yazın ve artı (+) simgesini seçin.

  4. Bildirim alındığını doğrulayın. Ardından bildirimi kapatmak için Tamam'ı seçin.

(İsteğe bağlı) Windows yapılandırma ve çalıştırma

Bu bölümde Apache Cordova uygulama projesinin Windows 10 cihazlarda nasıl çalıştırıldığı açıklanır (PhoneGap anında iletme eklentisi Windows 10'de desteklenir). Windows cihazlarla çalışmıyorsanız bu bölümü atlayabilirsiniz.

WNS ile anında iletme bildirimleri için Windows uygulamanızı kaydetme

Visual Studio'da Mağaza seçeneklerini kullanmak için Çözüm Platformları listesinden Windows-x64 veya Windows-x86 gibi bir Windows hedefi seçin. (Anında iletme bildirimleri için Windows-AnyCPU kullanmaktan kaçının.)

  1. Visual Studio Çözüm Gezgini'da Windows Store uygulama projesine sağ tıklayın. Ardından Mağaza Uygulamayı Mağaza>ile ilişkilendir'i seçin.

    Associate app with Windows Store

  2. Sihirbazda İleri'yi seçin. Ardından Microsoft hesabınızla oturum açın. Yeni bir uygulama adı ayır alanına uygulamanız için bir ad yazın ve ardından Ayır'ı seçin.

  3. Uygulama kaydı başarıyla oluşturulduktan sonra yeni uygulama adını seçin. İleri'yi ve ardından İlişkile'yi seçin. Bu işlem, gerekli Windows Mağaza kayıt bilgilerini uygulama bildirimine ekler.

  4. daha önce Windows Store uygulaması için oluşturduğunuz kaydı kullanarak Windows Phone Store uygulama projesi için 1. ve 3. adımları yineleyin.

  5. Windows Geliştirme Merkezi gidin ve Microsoft hesabınızla oturum açın. Uygulamalarım'da yeni uygulama kaydını seçin. Ardından Hizmetler>Anında İletme bildirimleri'ni genişletin.

  6. Anında iletme bildirimleri sayfasında, Anında İletme Bildirimi Hizmetleri (WNS) Windows ve Mobile Apps Microsoft Azure altında Live Services siteyi seçin. Paket SID'sinin değerlerini ve Uygulama Gizli Anahtarı'ndakigeçerli değeri not edin.

    App setting in the developer center

    Önemli

    Uygulama gizli anahtarı ve paket SID'si önemli güvenlik kimlik bilgileridir. Bu değerleri kimseyle paylaşmayın veya uygulamanızla dağıtmayın.

Benzer adımları gösteren bir video izleyin

WNS için bildirim hub'ını yapılandırma

  1. Azure portal Tüm >Uygulama HizmetlerineGözat'ıseçin. Ardından Mobile Apps arka ucunuzu seçin. Ayarlar altında App Service Gönder'i seçin. Ardından bildirim hub'ınızın adını seçin.

  2. Windows (WNS) bölümüne gidin. Ardından, Live Services sitesinden aldığınız Güvenlik anahtarını (istemci gizli anahtarı) ve Paket SID'sini girin. Ardından Kaydet'i seçin.

    Set the WNS key in the portal

Arka ucunuz artık anında iletme bildirimleri göndermek için WNS kullanacak şekilde yapılandırıldı.

Cordova uygulamanızı Windows anında iletme bildirimlerini destekleyecek şekilde yapılandırma

config.xmlsağ tıklayarak yapılandırma tasarımcısını açın. Ardından Görünüm Tasarımcısı'nı seçin. Ardından Windows sekmesini seçin ve ardından Hedef Sürüm'Windows altında Windows 10'ı seçin.

Varsayılan (hata ayıklama) derlemelerinizde anında iletme bildirimlerini desteklemek için build.json dosyasını açın. Ardından "release" yapılandırmasını hata ayıklama yapılandırmanıza kopyalayın.

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
    }
}

Güncelleştirmeden sonra build.json dosyası aşağıdaki kodu içermelidir:

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        },
    "debug": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        }
    }

Uygulamayı derleyin ve hata olmadığını doğrulayın. İstemci uygulamanızın artık Mobile Apps arka ucundan bildirimlere kaydolması gerekir. Çözümünüzdeki her Windows projesi için bu bölümü yineleyin.

Windows uygulamanızda anında iletme bildirimlerini test etme

Visual Studio dağıtım hedefi olarak Windows-x64 veya Windows-x86 gibi bir Windows platformun seçildiğinden emin olun. Uygulamayı Visual Studio barındıran bir Windows 10 bilgisayarda çalıştırmak için Yerel Makine'yi seçin.

  1. Projeyi oluşturmak ve uygulamayı başlatmak için Çalıştır düğmesini seçin.

  2. Uygulamada, yeni bir todoitem için bir ad yazın ve ardından artı (+) simgesini seçerek ekleyin.

Öğe eklendiğinde bir bildirim alındığını doğrulayın.

Sonraki adımlar

Aşağıdaki SDK'ları kullanmayı öğrenin: