Bildirimlerle C++ Yerel Eklentisi Oluşturma

Bu kılavuzda, Electron uygulamanızda Windows Uygulama SDK'sı bildirim API'lerini çağıran bir C++ yerel eklentisinin nasıl oluşturulacağı gösterilmektedir. Bu, daha karmaşık senaryolara geçmeden önce yerel eklentileri anlamak için harika bir başlangıç noktasıdır.

Önkoşullar

Bu kılavuza başlamadan önce şunları yaptığınızdan emin olun:

1. Adım: C++ Yerel Eklentisi Oluşturma

Şimdi C++ ve node-addon-api kullanarak yerel bir eklenti oluşturalım. Bu, en yüksek performansa sahip Windows API'lere doğrudan erişim sağlar.

npx winapp node create-addon

Note

Bu komut, yüklü değilse Python veya gerekli Visual Studio araçlarını yüklemenizi isteyebilir.

Bu, şunu içeren bir nativeWindowsAddon/ klasör oluşturur:

  • nativeWindowsAddon.cc - Windows API'lerini çağıracak C++ kodunuz
  • binding.gyp - Node-gyp için derleme yapılandırması

Komut ayrıca gerekli geliştirme bağımlılıklarını (nan, node-addon-api, node-gyp) yükler ve package.json'ünüze bir build-nativeWindowsAddon betiği ekler.

{
  "scripts": {
    "build-nativeWindowsAddon": "node-gyp clean configure build --directory=nativeWindowsAddon"
  }
}

Oluşturulan şablon, Windows SDK bildirim API'lerini kullanan örnek bir ShowNotification işlevi içerir. Şimdi eklentiyi oluşturarak her şeyin doğru şekilde ayarlandığını doğrulayalım:

# Build the C++ addon
npm run build-nativeWindowsAddon

Note

ayrıca kullanarak npx winapp node create-addon --template csbir C# eklentisi de oluşturabilirsiniz. C# eklentileri node-api-dotnet kullanır. Daha fazla seçenek için eklenti oluşturmak için diğer kılavuzlara veya tam komut belgelerine bakın.

2. Adım: Oluşturulan Eklentiyi test edin

Oluşturulan eklentiyi ana işlemden çağırarak çalıştığını doğrulayalım. dosyasını açın src/index.js:

  1. Eklenti içeri aktarmayı üst kısımdaki diğer require deyimlerinizle birlikte ekleyin:
const nativeWindowsAddon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');
  1. Bildirim fonksiyonunu, createWindow() fonksiyonunun sonunda çağırın.
const createWindow = () => {
  // ... existing window creation code ...

  // Test the Windows SDK notification
  nativeWindowsAddon.showNotification(
    'Hello from Electron!',
    'This notification uses the Windows SDK.'
  );
};

Bildirim API'sinin çalışması için uygulamanızın kimlikle çalıştığından emin olmanız gerekir. Koş!

npx winapp node add-electron-debug-identity

Note

Bu komut, kurulum kılavuzuna postinstall eklediğimiz betiğin bir parçasıdır, bu nedenle komutundan sonra npm installotomatik olarak çalışır. Ancak, uygulama varlıklarını her değiştirdiğinizde Package.appxmanifest, güncelleştirdiğinizde veya bağımlılıkları yeniden yüklediğinizde el ile çalıştırmanız gerekir.

Şimdi uygulamanızı çalıştırın:

npm start

Bir bildirim görmeniz gerekir! 🎉 Oluşturulan eklenti hemen çalışır.

⚠️ Bilinen Sorun: Uygulama Kilitlenmeleri veya Boş Pencere (genişletmek için tıklayın)

Bilinen bir Windows hatası, Electron uygulamalarının seyrek paketleme yönteminde başlangıçta çökmesine veya web içeriğini göstermemesine neden olabilir. Sorun Windows düzeltildi ancak henüz tüm cihazlara yayılmadı.

Geçici çözüm için bkz. geliştirme ortamı kurulumu .

3. Adım: Windows Uygulama SDK'sı Bildirimlerine Yükseltme

Eklentinin çalıştığını onayladığımıza göre, daha iyi bir geliştirici deneyimi ve daha fazla özellik sağlayan modern Windows Uygulama SDK'sı bildirim API'lerini (Microsoft.Windows.AppNotifications) kullanacak şekilde yükseltelim. Kurulum adımlarından init komutunu çalıştırdığımızda Windows Uygulama SDK'sı zaten ayarladık.

İçeriğin tamamını açın nativeWindowsAddon/nativeWindowsAddon.cc ve şu kodla değiştirin:

#include <napi.h>
#include <windows.h>

#include <winrt/Windows.Foundation.h>
#include <winrt/Microsoft.Windows.AppNotifications.h>
#include <winrt/Microsoft.Windows.AppNotifications.Builder.h>

using namespace winrt;
using namespace Microsoft::Windows::AppNotifications;
using namespace Microsoft::Windows::AppNotifications::Builder;

// Function to display a Windows App SDK notification
void ShowNotification(const Napi::CallbackInfo& info) {
    Napi::Env env = info.Env();

    try {
        // Get arguments from JavaScript (title and message)
        if (info.Length() < 2 || !info[0].IsString() || !info[1].IsString()) {
            Napi::TypeError::New(env, "Expected two string arguments: title and message").ThrowAsJavaScriptException();
            return;
        }

        std::string title = info[0].As<Napi::String>();
        std::string message = info[1].As<Napi::String>();

        // Convert to wide strings
        std::wstring wTitle(title.begin(), title.end());
        std::wstring wMessage(message.begin(), message.end());

        // Use AppNotificationBuilder for a cleaner API
        AppNotificationBuilder builder;
        builder.AddText(wTitle);
        builder.AddText(wMessage);
        
        AppNotification notification = builder.BuildNotification();
        AppNotificationManager::Default().Show(notification);

    } catch (const winrt::hresult_error& ex) {
        Napi::Error::New(env, winrt::to_string(ex.message())).ThrowAsJavaScriptException();
    } catch (const std::exception& ex) {
        // Handle exceptions and throw back to JavaScript
        Napi::Error::New(env, ex.what()).ThrowAsJavaScriptException();
    } catch (...) {
        Napi::Error::New(env, "Unknown error occurred").ThrowAsJavaScriptException();
    }
}

// Initialize the module
Napi::Object Init(Napi::Env env, Napi::Object exports) {
    exports.Set(Napi::String::New(env, "showNotification"), Napi::Function::New(env, ShowNotification));
    return exports;
}

NODE_API_MODULE(addon, Init)

Buradaki önemli değişiklikler, eski Windows.UI.Notifications ad alanından modern Microsoft.Windows.AppNotifications API'lerine geçiş yapmak ve XML dizelerini el ile oluşturmak yerine bildirimleri oluşturmak için AppNotificationBuilder kullanmaktır. Bu, Windows Uygulama SDK'sı desenleriyle tutarlı daha temiz ve daha sürdürülebilir bir API sağlar.

4. Adım: Yeniden Oluşturma ve Test

Şimdi eklentiyi güncelleştirilmiş kodla yeniden derleyin:

npm run build-nativeWindowsAddon

içindeki iletiyi src/index.js değişikliği yansıtacak şekilde güncelleştirin:

nativeWindowsAddon.showNotification(
  'Hello from Electron!',
  'This notification is powered by the Windows App SDK!'
);

Uygulamanızı yeniden çalıştırın:

npm start

Modern Windows Uygulama SDK'sı API'lerini kullanarak güncelleştirilmiş bildirimi görürsünüz!

Sonraki Adımlar

Tebrikler! Windows Uygulama SDK'sı API'lerini çağıran yerel bir C++ eklentisini başarıyla oluşturdunuz! 🎉

Artık şunu yapmaya hazırsınız:

Veya diğer kılavuzları keşfedin:

Ek Kaynaklar

  • Last updated on