Membuat Addon Asli C++ dengan Pemberitahuan

Panduan ini menunjukkan cara membuat addon asli C++ yang memanggil API pemberitahuan SDK Aplikasi Windows di aplikasi Electron Anda. Ini adalah titik awal yang bagus untuk memahami addon asli sebelum menyelami skenario yang lebih kompleks.

Prasyarat

Sebelum memulai panduan ini, pastikan Anda telah:

Langkah 1: Membuat Addon Asli C++

Mari kita buat addon asli menggunakan C++ dan node-addon-api. Ini menyediakan akses langsung ke API Windows dengan performa maksimum.

npx winapp node create-addon

Note

Perintah ini mungkin meminta Anda untuk menginstal alat Python atau Visual Studio yang diperlukan jika Anda belum menginstalnya.

Ini membuat sebuah folder nativeWindowsAddon/ dengan:

  • nativeWindowsAddon.cc - Kode C++ Anda yang akan memanggil API Windows
  • binding.gyp - Pengaturan build untuk node-gyp

Perintah ini juga menginstal dependensi pengembangan yang diperlukan (nan, node-addon-api, node-gyp) dan menambahkan skrip build-nativeWindowsAddon ke package.json.

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

Templat yang dihasilkan mencakup contoh fungsi ShowNotification yang menggunakan API pemberitahuan SDK Windows. Mari kita verifikasi semuanya disiapkan dengan benar dengan membangun addon:

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

Note

Anda juga dapat membuat addon C# menggunakan npx winapp node create-addon --template cs. Addon C# menggunakan node-api-dotnet. Lihat panduan lain untuk membuat addon atau dokumentasi perintah lengkap untuk opsi lainnya.

Langkah 2: Uji Addon yang dihasilkan

Mari kita periksa apakah addon yang dibuat berfungsi dengan memanggilnya dari proses utama. Buka src/index.js:

  1. Tambahkan impor addon bersama dengan pernyataan lainnya require di bagian paling atas.
const nativeWindowsAddon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');
  1. Panggil fungsi pemberitahuan pada akhir dari fungsi createWindow().
const createWindow = () => {
  // ... existing window creation code ...

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

Sebelum API pemberitahuan berfungsi, Anda perlu memastikan aplikasi Anda berjalan dengan identitas. Menjalankan:

npx winapp node add-electron-debug-identity

Note

Perintah ini sudah menjadi bagian dari skrip yang postinstall kami tambahkan dalam panduan penyiapan, sehingga berjalan secara otomatis setelah npm install. Namun, Anda perlu menjalankannya secara manual setiap kali Anda memodifikasi Package.appxmanifest, memperbarui aset aplikasi, atau menginstal ulang dependensi.

Sekarang jalankan aplikasi Anda:

npm start

Anda akan melihat pemberitahuan muncul! 🎉 Addon yang dihasilkan langsung bisa digunakan.

⚠️ Masalah umum: Aplikasi Crash atau Jendela Kosong (klik untuk memperluas)

Diketahui ada bug pada Windows dengan aplikasi Electron yang dikemas secara sparse, yang menyebabkan aplikasi mengalami crash saat startup atau gagal merender konten web. Masalah ini telah diperbaiki di Windows tetapi belum disebarluaskan ke semua perangkat.

Lihat penyiapan lingkungan pengembangan untuk solusinya.

Langkah 3: Upgrade ke Notifikasi SDK Aplikasi Windows

Sekarang setelah kami mengonfirmasi bahwa addon berfungsi, mari kita tingkatkan untuk menggunakan API pemberitahuan modern SDK Aplikasi Windows (Microsoft.Windows.AppNotifications), yang memberikan pengalaman pengembang yang lebih baik dan lebih banyak fitur. Kami sudah menyiapkan SDK Aplikasi Windows saat menjalankan perintah init dari langkah-langkah penyiapan.

Buka nativeWindowsAddon/nativeWindowsAddon.cc dan ganti seluruh konten dengan kode ini:

#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)

Perubahan utama di sini adalah beralih dari namespace yang lebih lama ke API /> > < modern, dan menggunakan untuk membuat pemberitahuan alih-alih membangun string XML secara manual. Ini menyediakan API yang lebih bersih dan lebih dapat dipertahankan yang konsisten dengan pola SDK Aplikasi Windows.

Langkah 4: Membangun kembali dan Menguji

Sekarang bangun ulang addon dengan kode yang diperbarui:

npm run build-nativeWindowsAddon

Perbarui pesan di src/index.js untuk mencerminkan perubahan:

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

Jalankan aplikasi Anda lagi:

npm start

Anda akan melihat pemberitahuan yang diperbarui menggunakan API SDK Aplikasi Windows modern!

Langkah Selanjutnya

Selamat! Anda berhasil membuat addon C++ asli yang memanggil API SDK Aplikasi Windows! 🎉

Sekarang Anda siap untuk:

Atau jelajahi panduan lain:

Sumber Daya Tambahan

  • Last updated on