{"id":12923,"date":"2025-02-19T13:15:13","date_gmt":"2025-02-19T10:15:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-push-bildirim-servisi-firebase-azure-functions-ve-react\/"},"modified":"2025-02-19T13:15:13","modified_gmt":"2025-02-19T10:15:13","slug":"olceklenebilir-push-bildirim-servisi-firebase-azure-functions-ve-react","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/olceklenebilir-push-bildirim-servisi-firebase-azure-functions-ve-react\/","title":{"rendered":"\u00d6l\u00e7eklenebilir Push Bildirim Servisi: Firebase, Azure Functions ve React"},"content":{"rendered":"

<\/p>\n

\u00d6l\u00e7eklenebilir Push Bildirim Servisi: Firebase, Azure Functions ve React<\/p>\n

Merhaba! Bug\u00fcn, Firebase, Azure Functions ve React kullanarak y\u00fcksek performansl\u0131 ve \u00f6l\u00e7eklenebilir bir push bildirim hizmeti nas\u0131l olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Bu makale, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 bilgiler sunacakt\u0131r. \u00d6ncelikle, projenin mimarisini ve her bile\u015fenin rol\u00fcn\u00fc anlayarak ba\u015flayal\u0131m.<\/p>\n

Proje Mimarisi<\/h2>\n

Bu sistem \u00fc\u00e7 ana bile\u015fenden olu\u015fmaktad\u0131r: React<\/strong> frontend (\u00f6n u\u00e7) uygulaman\u0131z, Azure Functions<\/strong> backend (arka u\u00e7) sunucunuzu ve Firebase Cloud Messaging (FCM)<\/strong> push bildirimlerini y\u00f6netmek i\u00e7in kullanaca\u011f\u0131n\u0131z g\u00fc\u00e7l\u00fc bir servistir. React uygulamas\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturur ve bildirimler i\u00e7in gerekli bilgileri Azure Functions’a g\u00f6nderir. Azure Functions, FCM’ye bildirimleri g\u00f6ndermekten sorumludur. Bu mimari, \u00f6l\u00e7eklenebilirlik ve s\u00fcrd\u00fcr\u00fclebilirlik a\u00e7\u0131s\u0131ndan olduk\u00e7a avantajl\u0131d\u0131r. Ayr\u0131nt\u0131lara inmeden \u00f6nce, her bile\u015fenin \u00f6nemini k\u0131saca \u00f6zetleyelim.<\/p>\n

React: Kullan\u0131c\u0131 Aray\u00fcz\u00fc ve Veri Toplama<\/h3>\n

React, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn dinamik ve h\u0131zl\u0131 bir \u015fekilde g\u00fcncellenmesini sa\u011flar. Uygulama, kullan\u0131c\u0131 eylemlerini yakalar ve bu verileri Azure Functions’a g\u00f6nderir. Bu g\u00f6nderim genellikle HTTP istekleri arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. \u00d6rne\u011fin, kullan\u0131c\u0131 bir bildirim g\u00f6ndermek istedi\u011finde, React uygulamas\u0131 ilgili verileri Azure Functions’a g\u00f6nderir.<\/p>\n

Azure Functions: Serverless Mimarisi<\/h3>\n

Azure Functions, sunucusuz (serverless) bir mimari sa\u011flayan g\u00fc\u00e7l\u00fc bir platformdur. Bu sayede, sunucu y\u00f6netimiyle u\u011fra\u015fmadan sadece kodunuza odaklanabilirsiniz. Azure Functions, React uygulamas\u0131ndan gelen istekleri i\u015fler, FCM’ye bildirimleri g\u00f6nderir ve gerekli yan\u0131tlar\u0131 d\u00f6nd\u00fcr\u00fcr. Bu mimari, \u00f6l\u00e7eklenebilirlik ve maliyet etkinli\u011fi a\u00e7\u0131s\u0131ndan \u00f6nemli bir avantajd\u0131r. \u0130htiya\u00e7 duyuldu\u011funda otomatik olarak \u00f6l\u00e7eklenir, bu da y\u00fcksek y\u00fck alt\u0131nda bile performans\u0131n d\u00fc\u015fmesini engeller.<\/p>\n

Firebase Cloud Messaging (FCM): Bildirim G\u00f6nderimi<\/h3>\n

FCM, Google taraf\u0131ndan sunulan g\u00fc\u00e7l\u00fc bir push bildirim hizmetidir. Azure Functions, FCM API’sini kullanarak bildirimleri Android, iOS ve web uygulamalar\u0131na g\u00f6nderir. FCM, milyonlarca kullan\u0131c\u0131ya g\u00fcvenilir ve h\u0131zl\u0131 bir \u015fekilde bildirim g\u00f6nderme yetene\u011fine sahiptir. Ayr\u0131ca, bildirim teslimat\u0131n\u0131 izlemek ve analiz etmek i\u00e7in geli\u015fmi\u015f \u00f6zellikler sunar.<\/p>\n

Kod \u00d6rnekleri<\/h2>\n

\u0130\u015fte Azure Functions’da kullan\u0131labilecek basit bir C# \u00f6rne\u011fi:<\/p>\n

\nusing System.Net;\nusing System.Net.Http;\nusing Microsoft.Azure.Functions.Worker;\nusing Microsoft.Azure.Functions.Worker.Http;\nusing Microsoft.Extensions.Logging;\nusing FirebaseAdmin;\nusing FirebaseAdmin.Messaging;\n\n\/\/ ... di\u011fer kodlar ...\n\n[Function(\"SendNotification\")]\npublic async Task Run([HttpTrigger(AuthorizationLevel.Anonymous, \"post\")] HttpRequestData req,\n                                        FunctionContext executionContext)\n{\n    \/\/ ... FCM mesaj\u0131n\u0131 olu\u015ftur ve g\u00f6nder ...\n}\n<\/code><\/pre>\n
Ve React taraf\u0131nda bir \u00f6rnek:<\/p>\n
\nfetch('\/api\/sendNotification', {\n  method: 'POST',\n  headers: {\n    'Content-Type': 'application\/json'\n  },\n  body: JSON.stringify({ title: 'Merhaba', body: 'Yeni bir bildirim!' })\n})\n.then(response => response.json())\n.then(data => {\n  console.log('Success:', data);\n});\n<\/code><\/pre>\n
Uygulama ve Sonu\u00e7<\/h2>\n
Bu mimariyi kullanarak, \u00f6l\u00e7eklenebilir ve g\u00fcvenilir bir push bildirim hizmeti olu\u015fturabilirsiniz.  Azure Functions’\u0131n sunucusuz yap\u0131s\u0131, maliyetleri d\u00fc\u015f\u00fcr\u00fcr ve bak\u0131m gereksinimlerini azalt\u0131r.  Firebase Cloud Messaging, geni\u015f bir kullan\u0131c\u0131 kitlesine bildirim g\u00f6nderme yetene\u011fi sunar.  React ile olu\u015fturulan kullan\u0131c\u0131 aray\u00fcz\u00fc ise, kullan\u0131c\u0131 deneyimini geli\u015ftirir.  Bu sistem,  hem mobil hem de web uygulamalar\u0131 i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr.  Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.<\/p>\n
Ayr\u0131ca, daha fazla bilgi edinmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 inceleyebilirsiniz:<\/p>\n