G\u00fcn\u00fcm\u00fcz\u00fcn h\u0131zl\u0131 tempolu dijital d\u00fcnyas\u0131nda, \u00f6nemli bilgilere an\u0131nda eri\u015fim sa\u011flamak, hem ki\u015fisel \u00fcretkenlik hem de profesyonel verimlilik i\u00e7in kritik bir hale gelmi\u015ftir. Geleneksel masa\u00fcst\u00fc uygulamalar\u0131 genellikle tam ekran kaplayarak veya g\u00f6rev \u00e7ubu\u011funda yer i\u015fgal ederek bu h\u0131zl\u0131 eri\u015fim ihtiyac\u0131n\u0131 kar\u015f\u0131lamakta yetersiz kalabilir. Peki, s\u00fcrekli a\u00e7\u0131k kalmas\u0131na gerek olmayan, ancak bir t\u0131kla \u00f6nemli verileri sunan k\u00fc\u00e7\u00fck, kullan\u0131\u015fl\u0131 ara\u00e7lara ne dersiniz? \u0130\u015fte tam da bu noktada men\u00fc \u00e7ubu\u011fu (menubar) widget’lar\u0131 ve Tauri gibi modern masa\u00fcst\u00fc uygulama geli\u015ftirme \u00e7er\u00e7eveleri devreye giriyor.<\/p>\n
Bu makalede, web teknolojilerini kullanarak hafif ve performansl\u0131 masa\u00fcst\u00fc uygulamalar\u0131 geli\u015ftirmeye olanak tan\u0131yan Tauri framework’\u00fcn\u00fc temel alarak, men\u00fc \u00e7ubu\u011funda \u00e7al\u0131\u015fan bir mini kontrol paneli (mini-dashboard) widget’\u0131 olu\u015fturmay\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Amac\u0131m\u0131z, okuyucunun konuya s\u0131f\u0131rdan ba\u015flayarak, kendi h\u0131zl\u0131 eri\u015fim ara\u00e7lar\u0131n\u0131 nas\u0131l geli\u015ftirebilece\u011fini \u00f6\u011frenmesini sa\u011flamak ve bu s\u00fcre\u00e7te kar\u015f\u0131la\u015fabilece\u011fi teknik detaylar\u0131 net bir \u015fekilde a\u00e7\u0131klamakt\u0131r. Ger\u00e7ek d\u00fcnya senaryolar\u0131yla desteklenen bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak.<\/p>\n
Masa\u00fcst\u00fc uygulamalar\u0131 geli\u015ftirmek, tarihsel olarak karma\u015f\u0131k ve platforma \u00f6zg\u00fc dillerle ili\u015fkilendirilmi\u015ftir. Ancak son y\u0131llarda, web teknolojilerinin g\u00fcc\u00fcn\u00fc masa\u00fcst\u00fcne ta\u015f\u0131yan Electron gibi \u00e7\u00f6z\u00fcmler pop\u00fclerlik kazanm\u0131\u015ft\u0131r. Tauri, Electron’a modern ve daha performansl\u0131 bir alternatif olarak ortaya \u00e7\u0131km\u0131\u015ft\u0131r. Peki, Tauri’yi bu kadar cazip k\u0131lan nedir ve men\u00fc \u00e7ubu\u011fu uygulamalar\u0131 ba\u011flam\u0131nda ne anlama gelir?<\/p>\n
Tauri, web frontend’lerini (HTML, CSS, JavaScript) Rust ile yaz\u0131lm\u0131\u015f bir backend (arka u\u00e7) ile birle\u015ftirerek platformlar aras\u0131 masa\u00fcst\u00fc uygulamalar\u0131 olu\u015fturman\u0131za olanak tan\u0131yan a\u00e7\u0131k kaynakl\u0131 bir ara\u00e7 tak\u0131m\u0131d\u0131r (toolkit). Temel fark\u0131, Electron’un aksine kendi Chromium kopyas\u0131n\u0131 paketlemek yerine, i\u015fletim sisteminin yerel webview bile\u015fenlerini (Windows’ta WebView2, macOS’ta WKWebView, Linux’ta WebKitGTK) kullanmas\u0131d\u0131r. Bu yakla\u015f\u0131m, Tauri uygulamalar\u0131n\u0131n \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131na sahip olmas\u0131n\u0131 ve \u00f6nemli \u00f6l\u00e7\u00fcde daha az bellek ve CPU t\u00fcketmesini sa\u011flar. Rust’\u0131n g\u00fcvenlik ve performans avantajlar\u0131 da cabas\u0131d\u0131r.<\/p>\n
Tauri’nin sundu\u011fu ba\u015fl\u0131ca avantajlar \u015funlard\u0131r:<\/p>\n
Bu \u00f6zellikler, \u00f6zellikle men\u00fc \u00e7ubu\u011fu gibi hassas alanlarda s\u00fcrekli \u00e7al\u0131\u015fan ve sistem kaynaklar\u0131n\u0131 minimal d\u00fczeyde kullanmas\u0131 beklenen uygulamalar i\u00e7in Tauri’yi ideal bir se\u00e7im haline getirir.<\/p>\n
Men\u00fc \u00e7ubu\u011fu uygulamalar\u0131, i\u015fletim sisteminin \u00fcst men\u00fc \u00e7ubu\u011funda (macOS) veya sistem tepsisinde (Windows\/Linux) k\u00fc\u00e7\u00fck bir simge olarak g\u00f6r\u00fcnen ve t\u0131kland\u0131\u011f\u0131nda genellikle k\u00fc\u00e7\u00fck bir pencere veya a\u00e7\u0131l\u0131r men\u00fc g\u00f6steren uygulamalard\u0131r. Bu uygulamalar, kullan\u0131c\u0131lara belirli bilgilere veya i\u015flevlere h\u0131zl\u0131 ve kesintisiz eri\u015fim sa\u011flamak i\u00e7in tasarlanm\u0131\u015ft\u0131r. Geleneksel masa\u00fcst\u00fc uygulamalar\u0131n\u0131n aksine, men\u00fc \u00e7ubu\u011fu uygulamalar\u0131 genellikle tam ekran kaplamaz ve kullan\u0131c\u0131n\u0131n ana i\u015f ak\u0131\u015f\u0131n\u0131 b\u00f6lmez.<\/p>\n
Men\u00fc \u00e7ubu\u011fu uygulamalar\u0131n\u0131n yayg\u0131n kullan\u0131m alanlar\u0131 \u015funlard\u0131r:<\/p>\n
Bu t\u00fcr uygulamalar, kullan\u0131c\u0131lar\u0131n ba\u011flam de\u011fi\u015ftirmeden (\u00f6rne\u011fin, tam ekran bir uygulamadan \u00e7\u0131kmadan) ihtiya\u00e7 duyduklar\u0131 bilgilere veya ara\u00e7lara ula\u015fmalar\u0131n\u0131 sa\u011flayarak genel kullan\u0131c\u0131 deneyimini zenginle\u015ftirir. Tauri’nin yerel webview’leri kullanmas\u0131, bu t\u00fcr uygulamalar\u0131n hafif ve h\u0131zl\u0131 olmas\u0131n\u0131 garanti eder, bu da onlar\u0131 men\u00fc \u00e7ubu\u011fu i\u00e7in m\u00fckemmel bir uyum haline getirir.<\/p>\n
Mini kontrol paneli, men\u00fc \u00e7ubu\u011fu uygulamas\u0131n\u0131n sundu\u011fu a\u00e7\u0131l\u0131r pencerede yer alan, genellikle birden fazla bilgi par\u00e7as\u0131n\u0131 veya etkile\u015fimli \u00f6\u011feyi bir araya getiren k\u00fc\u00e7\u00fck, \u00f6zelle\u015ftirilebilir bir aray\u00fczd\u00fcr. Ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, bu paneller bir “kontrol paneli”nin temel \u00f6zelliklerini (veri g\u00f6rselle\u015ftirme, h\u0131zl\u0131 durum \u00f6zetleri, temel etkile\u015fimler) k\u00fc\u00e7\u00fck bir alana s\u0131\u011fd\u0131r\u0131r. Kullan\u0131c\u0131lar, men\u00fc \u00e7ubu\u011fundaki simgeye t\u0131klayarak bu mini paneli a\u00e7ar, gerekli bilgiyi al\u0131r veya h\u0131zl\u0131 bir eylem ger\u00e7ekle\u015ftirir ve ard\u0131ndan paneli kapat\u0131r. Bu, s\u00fcrekli a\u00e7\u0131k kalmas\u0131 gerekmeyen ancak s\u0131k\u00e7a ba\u015fvurulan veriler i\u00e7in ideal bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\n
\u00d6rne\u011fin, bir geli\u015ftirici i\u00e7in tasarlanm\u0131\u015f bir mini kontrol paneli \u015funlar\u0131 i\u00e7erebilir:<\/p>\n
Bu t\u00fcr paneller, kullan\u0131c\u0131n\u0131n g\u00fcn boyunca ihtiya\u00e7 duyabilece\u011fi \u00e7e\u015fitli veri noktalar\u0131n\u0131 tek bir yerden sunarak bilgiye eri\u015fimi basitle\u015ftirir ve zaman kazand\u0131r\u0131r. Tauri’nin modern web teknolojilerini desteklemesi sayesinde, bu mini panelleri interaktif grafikler, dinamik listeler ve kullan\u0131c\u0131 dostu formlarla zenginle\u015ftirmek olduk\u00e7a kolayd\u0131r. B\u00f6ylece, hem estetik hem de i\u015flevsel a\u00e7\u0131dan zengin mini kontrol panelleri olu\u015fturmak m\u00fcmk\u00fcn hale gelir.<\/p>\n
Men\u00fc \u00e7ubu\u011fu mini-kontrol panelleri, modern \u00e7al\u0131\u015fma al\u0131\u015fkanl\u0131klar\u0131m\u0131zda ve dijital ya\u015famlar\u0131m\u0131zda giderek daha fazla yer edinen bir ihtiyaca cevap veriyor: bilgiye an\u0131nda, kesintisiz ve ba\u011flamdan kopmadan eri\u015fim. Bu t\u00fcr widget’lar, sadece estetik birer eklenti olmakla kalm\u0131yor, ayn\u0131 zamanda verimlili\u011fi art\u0131rma ve karar alma s\u00fcre\u00e7lerini h\u0131zland\u0131rma potansiyeli ta\u015f\u0131yor. Peki, bu k\u00fc\u00e7\u00fck uygulamac\u0131klar bize tam olarak hangi avantajlar\u0131 sunuyor ve ger\u00e7ek d\u00fcnyada nas\u0131l kullan\u0131l\u0131yorlar?<\/p>\n
G\u00fcn i\u00e7inde s\u00fcrekli olarak farkl\u0131 uygulamalar aras\u0131nda ge\u00e7i\u015f yapmak, odaklanmay\u0131 da\u011f\u0131tabilir ve zaman kayb\u0131na yol a\u00e7abilir. Men\u00fc \u00e7ubu\u011fu mini-kontrol panelleri, bu sorunu \u00e7\u00f6zerek kritik bilgilere tek bir t\u0131klama ile eri\u015fim sa\u011flar. \u00d6rne\u011fin, bir finans profesyoneli g\u00fcncel borsa verilerini veya d\u00f6viz kurlar\u0131n\u0131 an\u0131nda kontrol edebilirken, bir pazarlamac\u0131 web sitesi trafik istatistiklerini veya sosyal medya etkile\u015fimlerini h\u0131zl\u0131ca g\u00f6rebilir. Bu, \u00f6nemli kararlar\u0131 daha h\u0131zl\u0131 ve daha bilin\u00e7li bir \u015fekilde almalar\u0131na olanak tan\u0131r.<\/p>\n
\u00d6rnek kullan\u0131m senaryolar\u0131:<\/p>\n
Bu t\u00fcr uygulamalar, kullan\u0131c\u0131lar\u0131n ana i\u015f ak\u0131\u015flar\u0131n\u0131 b\u00f6lmeden, ihtiya\u00e7 duyduklar\u0131 bilgilere eri\u015fmelerini sa\u011flayarak genel \u00fcretkenli\u011fi \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. H\u0131zl\u0131ca a\u00e7\u0131l\u0131p kapanabilen bu paneller, dikkatin da\u011f\u0131lmas\u0131n\u0131 minimuma indirir ve kullan\u0131c\u0131n\u0131n oda\u011f\u0131n\u0131 korumas\u0131na yard\u0131mc\u0131 olur.<\/p>\n
Geli\u015ftiriciler, tasar\u0131mc\u0131lar veya yo\u011fun bilgisayar kullan\u0131c\u0131lar\u0131 i\u00e7in sistem kaynaklar\u0131n\u0131 (CPU, RAM, a\u011f, disk) izlemek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Yava\u015flayan bir bilgisayar\u0131n nedenini h\u0131zl\u0131ca tespit etmek veya bir uygulaman\u0131n ne kadar kaynak t\u00fcketti\u011fini g\u00f6rmek, sorun giderme ve performans optimizasyonu i\u00e7in kritik \u00f6neme sahiptir. Men\u00fc \u00e7ubu\u011fu mini-kontrol panelleri, bu bilgileri anl\u0131k olarak sunarak kullan\u0131c\u0131lara sistemleri \u00fczerinde daha fazla kontrol sa\u011flar.<\/p>\n
Bir sistem izleme widget’\u0131 \u015funlar\u0131 g\u00f6sterebilir:<\/p>\n
Bu t\u00fcr bilgiler, \u00f6zellikle \u00e7oklu g\u00f6revler y\u00fcr\u00fct\u00fcrken veya kaynak yo\u011fun uygulamalar kullan\u0131rken sistemin sa\u011fl\u0131\u011f\u0131n\u0131 anlamak i\u00e7in vazge\u00e7ilmezdir. Tauri’nin Rust backend’i sayesinde, i\u015fletim sistemi seviyesindeki bu verilere g\u00fcvenli ve verimli bir \u015fekilde eri\u015fmek ve bunlar\u0131 kullan\u0131c\u0131 dostu bir aray\u00fczde sunmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n
Ekip \u00e7al\u0131\u015fmas\u0131 ve proje y\u00f6netimi, g\u00fcn\u00fcm\u00fcz i\u015f d\u00fcnyas\u0131n\u0131n temelini olu\u015fturur. Jira, Trello, Asana gibi platformlar bu s\u00fcre\u00e7leri kolayla\u015ft\u0131rsa da, her seferinde bu platformlar\u0131n web aray\u00fcz\u00fcne gitmek zaman al\u0131c\u0131 olabilir. Men\u00fc \u00e7ubu\u011fu mini-kontrol panelleri, bu platformlardan kritik bilgileri \u00e7ekerek do\u011frudan masa\u00fcst\u00fcn\u00fcze getirir.<\/p>\n
Vaka Analizi: Bir Yaz\u0131l\u0131m \u015eirketinin “Proje Durumu \u0130zleyici” Widget’\u0131<\/p>\n
Orta \u00f6l\u00e7ekli bir yaz\u0131l\u0131m geli\u015ftirme \u015firketi olan “KodMimarlar\u0131”, g\u00fcnl\u00fck stand-up toplant\u0131lar\u0131nda ve anl\u0131k karar alma s\u00fcre\u00e7lerinde proje durumlar\u0131n\u0131 h\u0131zl\u0131ca takip etme ihtiyac\u0131 duyuyordu. Mevcut Jira panolar\u0131na s\u00fcrekli bakmak, geli\u015ftiricilerin kod yazma ak\u0131\u015f\u0131n\u0131 bozuyordu. Bu sorunu \u00e7\u00f6zmek i\u00e7in, Tauri kullanarak bir men\u00fc \u00e7ubu\u011fu mini-kontrol paneli geli\u015ftirmeye karar verdiler. Bu widget, a\u015fa\u011f\u0131daki \u00f6zellikleri i\u00e7eriyordu:<\/p>\n
Bu “Proje Durumu \u0130zleyici” widget’\u0131, geli\u015ftiricilerin ve proje y\u00f6neticilerinin masa\u00fcstlerini terk etmeden, tek bir t\u0131klama ile t\u00fcm bu bilgilere eri\u015fmelerini sa\u011flad\u0131. Sonu\u00e7 olarak, stand-up toplant\u0131lar\u0131 daha verimli hale geldi, kritik hatalar daha h\u0131zl\u0131 tespit edildi ve genel proje takibi kolayla\u015ft\u0131. Bu, men\u00fc \u00e7ubu\u011fu mini-kontrol panellerinin sadece bireysel \u00fcretkenli\u011fi de\u011fil, ayn\u0131 zamanda ekip verimlili\u011fini de nas\u0131l art\u0131rabilece\u011finin somut bir \u00f6rne\u011fidir.<\/p>\n
Ki\u015fiselle\u015ftirilmi\u015f ara\u00e7lar a\u00e7\u0131s\u0131ndan, geli\u015ftiriciler i\u00e7in h\u0131zl\u0131 kod par\u00e7ac\u0131klar\u0131 y\u00f6netimi, renk se\u00e7iciler, IP adresi g\u00f6stericiler veya belirli bir sunucu durumunu izleyen widget’lar geli\u015ftirilebilir. Bu, her kullan\u0131c\u0131n\u0131n kendi \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re tasarlanm\u0131\u015f, i\u015f ak\u0131\u015f\u0131n\u0131 h\u0131zland\u0131ran k\u00fc\u00e7\u00fck ama g\u00fc\u00e7l\u00fc ara\u00e7lara sahip olmas\u0131n\u0131 sa\u011flar. Tauri’nin esnekli\u011fi sayesinde, bu t\u00fcr \u00f6zelle\u015ftirilmi\u015f \u00e7\u00f6z\u00fcmleri hayata ge\u00e7irmek olduk\u00e7a eri\u015filebilirdir.<\/p>\n
Bir Tauri men\u00fc \u00e7ubu\u011fu mini-kontrol paneli geli\u015ftirmeye ba\u015flamak i\u00e7in \u00f6ncelikle gerekli ortam\u0131 kurmam\u0131z ve ard\u0131ndan Tauri projemizi men\u00fc \u00e7ubu\u011fu uygulamas\u0131 olarak yap\u0131land\u0131rmam\u0131z gerekiyor. Bu b\u00f6l\u00fcmde, s\u00fcreci ad\u0131m ad\u0131m ele alaca\u011f\u0131z.<\/p>\n
Tauri projesi geli\u015ftirmek i\u00e7in sisteminizde baz\u0131 \u00f6nko\u015fullar\u0131n kurulu olmas\u0131 gerekmektedir:<\/p>\n
xcode-select --install<\/code> komutuyla kurabilirsiniz).<\/li>\n- Linux:<\/strong>
webkit2gtk-4.0<\/code> ve libappindicator3-dev<\/code> gibi paketler (da\u011f\u0131t\u0131m\u0131n\u0131za g\u00f6re farkl\u0131l\u0131k g\u00f6sterebilir, genellikle sudo apt install libwebkit2gtk-4.0-dev libappindicator3-dev<\/code> gibi bir komutla kurulur).<\/li>\n<\/ul>\n<\/li>\n<\/ol>\nYeni Tauri Projesi Ba\u015flatma<\/h3>\n
T\u00fcm gereksinimler kar\u015f\u0131land\u0131ktan sonra, yeni bir Tauri projesi olu\u015fturabiliriz. Bu i\u015flem i\u00e7in create-tauri-app<\/code> arac\u0131n\u0131 kullanaca\u011f\u0131z. A\u015fa\u011f\u0131daki komutu terminalinizde \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n\n\nnpm create tauri-app\n <\/code><\/pre>\n<\/div>\nBu komut size birka\u00e7 soru soracakt\u0131r:<\/p>\n
\nProject name (projec_ad\u0131)<\/code>: Projenizin ad\u0131n\u0131 girin, \u00f6rne\u011fin “MenubarMiniDash”.<\/li>\nChoose your package manager (paket y\u00f6neticisi se\u00e7in)<\/code>: npm<\/code>, yarn<\/code> veya pnpm<\/code> se\u00e7in.<\/li>\nChoose your UI template (UI \u015fablonu se\u00e7in)<\/code>: Frontend framework’\u00fcn\u00fcz\u00fc se\u00e7in. Bu rehberde pop\u00fclerli\u011fi nedeniyle “React (Vite)” se\u00e7ene\u011fini kullanaca\u011f\u0131z, ancak Vue, Svelte veya di\u011ferlerini de tercih edebilirsiniz.<\/li>\nChoose your UI template variant (UI \u015fablonu varyant\u0131 se\u00e7in)<\/code>: “TypeScript” se\u00e7ene\u011fini se\u00e7in.<\/li>\n<\/ul>\nKurulum tamamland\u0131ktan sonra, projenizin dizinine gidin:<\/p>\n
\n\ncd MenubarMiniDash\n <\/code><\/pre>\n<\/div>\nVe uygulamay\u0131 ilk kez \u00e7al\u0131\u015ft\u0131rmak i\u00e7in:<\/p>\n
\n\nnpm run tauri dev\n <\/code><\/pre>\n<\/div>\nBu komut, uygulaman\u0131z\u0131 geli\u015ftirme modunda ba\u015flatacak ve varsay\u0131lan Tauri penceresini g\u00f6rmelisiniz.<\/p>\n
tauri.conf.json<\/code> Dosyas\u0131nda Men\u00fc \u00c7ubu\u011fu Penceresi Yap\u0131land\u0131rmas\u0131<\/h3>\nTauri uygulaman\u0131z\u0131 bir men\u00fc \u00e7ubu\u011fu widget’\u0131na d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in src-tauri\/tauri.conf.json<\/code> dosyas\u0131nda baz\u0131 de\u011fi\u015fiklikler yapman\u0131z gerekir. Bu dosya, Tauri uygulaman\u0131z\u0131n ana yap\u0131land\u0131rma dosyas\u0131d\u0131r. A\u00e7\u0131n ve tauri.windows<\/code> dizisini bulun. Varsay\u0131lan pencere yap\u0131land\u0131rmas\u0131n\u0131 men\u00fc \u00e7ubu\u011fu uygulamas\u0131na uygun hale getirece\u011fiz:<\/p>\n\n\n{\n \"tauri\": {\n \"windows\": [\n {\n \"title\": \"Mini Dashboard\",\n \"width\": 320,\n \"height\": 480,\n \"resizable\": false,\n \"decorations\": false,\n \"transparent\": true,\n \"alwaysOnTop\": true,\n \"visible\": false,\n \"skipTaskbar\": true,\n \"fullscreen\": false\n }\n ],\n \"bundle\": {\n \"active\": true,\n \"targets\": \"all\",\n \"identifier\": \"com.yourcompany.minidashboard\",\n \"icon\": [\n \"icons\/32x32.png\",\n \"icons\/128x128.png\",\n \"icons\/128x128@2x.png\",\n \"icons\/icon.icns\",\n \"icons\/icon.ico\"\n ]\n },\n \"allowlist\": {\n \"all\": false,\n \"window\": {\n \"all\": true\n },\n \"shell\": {\n \"all\": false,\n \"open\": true\n },\n \"systemTray\": {\n \"all\": true\n }\n }\n },\n \"build\": {\n \"devPath\": \"..\/src\",\n \"distDir\": \"..\/dist\",\n \"beforeDevCommand\": \"npm run dev\",\n \"beforeBuildCommand\": \"npm run build\"\n }\n}\n <\/code><\/pre>\n<\/div>\nYukar\u0131daki yap\u0131land\u0131rmada \u00f6nemli noktalar:<\/p>\n
\nwidth<\/code> ve height<\/code>: Men\u00fc \u00e7ubu\u011fu widget’\u0131n\u0131z\u0131n boyutlar\u0131n\u0131 belirler. Genellikle k\u00fc\u00e7\u00fck ve dikey bir pencere tercih edilir.<\/li>\nresizable: false<\/code>: Pencerenin boyutunun de\u011fi\u015ftirilememesini sa\u011flar.<\/li>\ndecorations: false<\/code>: Pencere kenarl\u0131klar\u0131, ba\u015fl\u0131k \u00e7ubu\u011fu gibi i\u015fletim sistemi taraf\u0131ndan sa\u011flanan dekorasyonlar\u0131 kald\u0131r\u0131r. Bu, \u00f6zel bir g\u00f6r\u00fcn\u00fcm olu\u015fturmak i\u00e7in \u00f6nemlidir.<\/li>\ntransparent: true<\/code>: Pencerenin \u015feffaf bir arka plana sahip olmas\u0131n\u0131 sa\u011flar, bu da modern UI tasar\u0131mlar\u0131 i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/li>\nalwaysOnTop: true<\/code>: Pencerenin di\u011fer pencerelerin \u00fczerinde kalmas\u0131n\u0131 sa\u011flar.<\/li>\nvisible: false<\/code>: Uygulama ba\u015flat\u0131ld\u0131\u011f\u0131nda pencerenin otomatik olarak g\u00f6r\u00fcn\u00fcr olmamas\u0131n\u0131 sa\u011flar. Men\u00fc \u00e7ubu\u011fu simgesine t\u0131kland\u0131\u011f\u0131nda g\u00f6r\u00fcn\u00fcr hale getirece\u011fiz.<\/li>\nskipTaskbar: true<\/code>: Pencerenin g\u00f6rev \u00e7ubu\u011funda (Windows\/Linux) veya dock’ta (macOS) g\u00f6r\u00fcnmemesini sa\u011flar. Bu, bir men\u00fc \u00e7ubu\u011fu uygulamas\u0131 i\u00e7in tipiktir.<\/li>\nallowlist.systemTray.all: true<\/code>: Sistem tepsisi (system tray) API’lerini kullanmam\u0131za izin verir. Bu, men\u00fc \u00e7ubu\u011fu simgesini y\u00f6netmek i\u00e7in gereklidir.<\/li>\n<\/ul>\nRust Backend’inde Men\u00fc \u00c7ubu\u011fu Penceresinin Olu\u015fturulmas\u0131 ve Kontrol\u00fc<\/h3>\n
\u015eimdi src-tauri\/src\/main.rs<\/code> dosyas\u0131n\u0131 a\u00e7\u0131n. Burada, sistem tepsisi simgesini olu\u015fturacak ve bu simgeye t\u0131kland\u0131\u011f\u0131nda pencereyi g\u00f6sterecek\/gizleyecek Rust kodunu yazaca\u011f\u0131z.<\/p>\n\n\n#![cfg_attr(not(debug_assertions), windows_subsystem = \"windows\")]\n\nuse tauri::{Manager, SystemTray, SystemTrayEvent, CustomMenuItem, Menu, MenuItem, Submenu};\nuse tauri::api::notification::Notification;\n\nfn main() {\n let quit = CustomMenuItem::new(\"quit\".to_string(), \"\u00c7\u0131k\u0131\u015f\");\n let hide = CustomMenuItem::new(\"hide\".to_string(), \"Gizle\");\n let show = CustomMenuItem::new(\"show\".to_string(), \"G\u00f6ster\");\n let tray_menu = SystemTrayMenu::new()\n .add_item(show)\n .add_item(hide)\n .add_native_item(SystemTrayMenuItem::Separator)\n .add_item(quit);\n\n tauri::Builder::default()\n .system_tray(SystemTray::new().with_menu(tray_menu))\n .on_system_tray_event(|app, event| match event {\n SystemTrayEvent::LeftClick {\n position: _,\n size: _,\n ..\n } => {\n let window = app.get_window(\"main\").unwrap();\n if window.is_visible().unwrap() {\n window.hide().unwrap();\n } else {\n window.show().unwrap();\n window.set_focus().unwrap();\n }\n }\n SystemTrayEvent::MenuItemClick { id, .. } => {\n let window = app.get_window(\"main\").unwrap();\n match id.as_str() {\n \"quit\" => {\n std::process::exit(0);\n }\n \"hide\" => {\n window.hide().unwrap();\n }\n \"show\" => {\n window.show().unwrap();\n window.set_focus().unwrap();\n }\n _ => {}\n }\n }\n _ => {}\n })\n .run(tauri::generate_context!())\n .expect(\"error while running tauri application\");\n}\n <\/code><\/pre>\n<\/div>\nBu kodda:<\/p>\n
\nSystemTray::new().with_menu(tray_menu)<\/code>: Sistem tepsisi simgesini ve sa\u011f t\u0131kland\u0131\u011f\u0131nda a\u00e7\u0131lacak men\u00fcy\u00fc olu\u015fturur.<\/li>\non_system_tray_event<\/code>: Sistem tepsisi olaylar\u0131n\u0131 dinler.<\/li>\nSystemTrayEvent::LeftClick<\/code>: Men\u00fc \u00e7ubu\u011fu simgesine sol t\u0131kland\u0131\u011f\u0131nda tetiklenir. Bu olayda, ana pencerenin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc kontrol ederiz. E\u011fer g\u00f6r\u00fcn\u00fcrse gizleriz, gizliyse g\u00f6sterir ve odaklan\u0131r\u0131z.<\/li>\nSystemTrayEvent::MenuItemClick<\/code>: Sistem tepsisi men\u00fcs\u00fcndeki \u00f6\u011felere t\u0131kland\u0131\u011f\u0131nda tetiklenir. “\u00c7\u0131k\u0131\u015f” (quit), “Gizle” (hide) ve “G\u00f6ster” (show) \u00f6\u011felerini y\u00f6netiriz.<\/li>\n<\/ul>\nBu ad\u0131mlarla, Tauri uygulaman\u0131z\u0131 bir men\u00fc \u00e7ubu\u011fu widget’\u0131 olarak yap\u0131land\u0131rm\u0131\u015f olursunuz. Art\u0131k npm run tauri dev<\/code> komutuyla uygulamay\u0131 \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, bir pencere yerine sadece men\u00fc \u00e7ubu\u011funuzda (veya sistem tepsinizde) bir Tauri simgesi g\u00f6rmelisiniz. Bu simgeye t\u0131klad\u0131\u011f\u0131n\u0131zda, yap\u0131land\u0131rd\u0131\u011f\u0131n\u0131z boyutlarda ve \u00f6zelliklerde pencere a\u00e7\u0131l\u0131p kapanacakt\u0131r. Frontend kodunuz (React) bu pencerenin i\u00e7inde g\u00f6r\u00fcnt\u00fclenecektir.<\/p>\nMini Kontrol Paneli Aray\u00fcz Tasar\u0131m\u0131 ve Veri Entegrasyonu: Kullan\u0131c\u0131 Deneyimi Nas\u0131l Olu\u015fturulur?<\/h2>\n
Men\u00fc \u00e7ubu\u011fu mini-kontrol panelinizin i\u015flevselli\u011fi kadar, kullan\u0131c\u0131 deneyimi de b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. K\u00fc\u00e7\u00fck bir alana s\u0131\u011fd\u0131r\u0131lan bilgilerin anla\u015f\u0131l\u0131r, eri\u015filebilir ve estetik olmas\u0131 gerekir. Bu b\u00f6l\u00fcmde, aray\u00fcz tasar\u0131m prensiplerini, frontend framework se\u00e7imini ve dinamik veri entegrasyonunu ele alaca\u011f\u0131z.<\/p>\n
Minimalist Tasar\u0131m Prensipleri ve Frontend Framework Se\u00e7imi<\/h3>\n
Mini kontrol panelleri, s\u0131n\u0131rl\u0131 ekran alan\u0131na sahip olduklar\u0131 i\u00e7in minimalist bir tasar\u0131m yakla\u015f\u0131m\u0131n\u0131 benimsemelidir. Karma\u015f\u0131k d\u00fczenler, gereksiz animasyonlar veya yo\u011fun metin bloklar\u0131 yerine, net ve \u00f6zl\u00fc bilgi sunumuna odaklan\u0131lmal\u0131d\u0131r. \u0130\u015fte baz\u0131 tasar\u0131m prensipleri:<\/p>\n
\n- Netlik ve Okunabilirlik:<\/strong> K\u00fc\u00e7\u00fck yaz\u0131 tiplerinden ka\u00e7\u0131n\u0131n, kontrast\u0131 y\u00fcksek renkler kullan\u0131n ve bilgiyi hiyerar\u015fik olarak d\u00fczenleyin.<\/li>\n
- Sadelik:<\/strong> Her \u00f6\u011fenin bir amac\u0131 olmal\u0131. Gereksiz g\u00f6rsel karma\u015fadan ka\u00e7\u0131n\u0131n.<\/li>\n
- H\u0131zl\u0131 Anla\u015f\u0131labilirlik:<\/strong> Kullan\u0131c\u0131 paneli a\u00e7t\u0131\u011f\u0131nda, ana bilgiyi saniyeler i\u00e7inde anlayabilmelidir. \u0130konlar ve k\u00fc\u00e7\u00fck grafikler bu konuda yard\u0131mc\u0131 olabilir.<\/li>\n
- Etkile\u015fim:<\/strong> E\u011fer panel etkile\u015fimli \u00f6\u011feler i\u00e7eriyorsa (d\u00fc\u011fmeler, anahtarlar), bunlar\u0131n kolayca eri\u015filebilir ve anla\u015f\u0131l\u0131r oldu\u011fundan emin olun.<\/li>\n
- Bo\u015fluk Kullan\u0131m\u0131:<\/strong> \u00d6\u011feler aras\u0131nda yeterli bo\u015fluk b\u0131rakarak aray\u00fcz\u00fcn “nefes almas\u0131n\u0131” sa\u011flay\u0131n ve kalabal\u0131k g\u00f6r\u00fcn\u00fcmden ka\u00e7\u0131n\u0131n.<\/li>\n<\/ul>\n
Frontend framework se\u00e7imi konusunda, Tauri herhangi bir web teknolojisini destekledi\u011fi i\u00e7in \u00f6zg\u00fcrs\u00fcn\u00fcz. Bu rehberde, geni\u015f toplulu\u011fu ve bile\u015fen tabanl\u0131 yap\u0131s\u0131yla pop\u00fcler olan React’i kullanaca\u011f\u0131z. Ancak Vue, Svelte veya hatta vanilla JavaScript ile de ayn\u0131 sonu\u00e7lar\u0131 elde edebilirsiniz.<\/p>\n
\u00d6rnek React Bile\u015feni Yap\u0131s\u0131 (src\/App.tsx<\/code>):<\/p>\n\n<\/div>\nBu \u00f6rnek kod, temel bir hava durumu ve borsa widget’\u0131 g\u00f6steriyor. Ger\u00e7ek API anahtarlar\u0131n\u0131z\u0131 YOUR_WEATHER_API_KEY<\/code> ve YOUR_FINNHUB_API_KEY<\/code> yerine koyman\u0131z gerekecektir. Bu kod, useEffect<\/code> hook’u ile verileri ba\u015flang\u0131\u00e7ta \u00e7ekiyor ve belirli aral\u0131klarla g\u00fcncelliyor. Aray\u00fczde ise minimalist bir tasar\u0131m hedefleniyor.<\/p>\nAPI \u00c7a\u011fr\u0131lar\u0131 ile Dinamik Veri \u00c7ekme<\/h3>\n
Mini kontrol panellerinin g\u00fcc\u00fc, dinamik verileri ger\u00e7ek zamanl\u0131ya yak\u0131n bir \u015fekilde sunabilmeleridir. Bu genellikle harici API’ler arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilir. Yukar\u0131daki React \u00f6rne\u011finde fetch<\/code> API’si kullan\u0131larak d\u0131\u015f kaynaklardan hava durumu ve borsa verileri \u00e7ekilmi\u015ftir. Tauri uygulamalar\u0131, webview i\u00e7inde \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in standart fetch<\/code> veya axios<\/code> gibi HTTP istemcilerini do\u011frudan kullanabilir.<\/p>\nDikkat edilmesi gerekenler:<\/p>\n
\n- API Anahtarlar\u0131:<\/strong> Hassas API anahtarlar\u0131n\u0131 do\u011frudan frontend kodunda tutmaktan ka\u00e7\u0131n\u0131n. E\u011fer m\u00fcmk\u00fcnse, bunlar\u0131 Tauri’nin Rust backend’i \u00fczerinden proxy olarak ge\u00e7irin veya ortam de\u011fi\u015fkenleri (environment variables) kullanarak derleme zaman\u0131nda enjekte edin.<\/li>\n
- CORS (Cross-Origin Resource Sharing):<\/strong> Baz\u0131 API’ler CORS k\u0131s\u0131tlamalar\u0131 uygulayabilir. Tauri webview’leri genellikle
file:\/\/<\/code> protokol\u00fcnden \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in bu durum bazen sorunlara yol a\u00e7abilir. Bu durumda, ya API’nin CORS politikalar\u0131n\u0131 ayarlaman\u0131z ya da Rust backend \u00fczerinden bir proxy olu\u015fturman\u0131z gerekebilir.<\/li>\n- Hata Y\u00f6netimi:<\/strong> API \u00e7a\u011fr\u0131lar\u0131n\u0131n ba\u015far\u0131s\u0131z olma ihtimaline kar\u015f\u0131 her zaman sa\u011flam hata y\u00f6netimi (
try-catch<\/code> bloklar\u0131) uygulay\u0131n ve kullan\u0131c\u0131ya anlaml\u0131 geri bildirimler sunun.<\/li>\n<\/ul>\nYerel Depolama (Local Storage) Kullan\u0131m\u0131<\/h3>\n
Uygulaman\u0131z\u0131n baz\u0131 ayarlar\u0131n\u0131 veya \u00f6nbelle\u011fe al\u0131nm\u0131\u015f verileri kal\u0131c\u0131 olarak saklamas\u0131 gerekebilir. Webview ortam\u0131nda, standart localStorage<\/code> API’si bu ama\u00e7la kullan\u0131labilir. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n tercih etti\u011fi \u015fehir bilgisini veya son g\u00fcncellenen verinin zaman damgas\u0131n\u0131 saklayabilirsiniz.<\/p>\n\n\n\/\/ localStorage'a veri kaydetme\nlocalStorage.setItem('userCity', 'Ankara');\n\n\/\/ localStorage'dan veri okuma\nconst city = localStorage.getItem('userCity');\nif (city) {\n console.log('Kullan\u0131c\u0131 \u015fehri:', city);\n}\n <\/code><\/pre>\n<\/div>\nAncak, hassas veya b\u00fcy\u00fck boyutlu veriler i\u00e7in Tauri’nin Rust backend’ini kullanarak daha g\u00fcvenli ve performansl\u0131 yerel dosya depolama \u00e7\u00f6z\u00fcmlerini (\u00f6rne\u011fin, SQLite veritaban\u0131 veya yap\u0131land\u0131r\u0131lm\u0131\u015f dosyalar) d\u00fc\u015f\u00fcnebilirsiniz.<\/p>\n
Tauri API’leri ile \u0130leti\u015fim: invoke<\/code>, emit<\/code>, listen<\/code><\/h3>\nFrontend (JavaScript) ile Rust backend aras\u0131nda ileti\u015fim kurmak i\u00e7in Tauri, invoke<\/code>, emit<\/code> ve listen<\/code> gibi g\u00fc\u00e7l\u00fc API’ler sunar. Bu, web frontend’inin i\u015fletim sistemi d\u00fczeyinde i\u015flevleri tetiklemesini veya Rust backend’inden olaylar\u0131 dinlemesini sa\u011flar.<\/p>\n\ninvoke<\/code>: Frontend’den Rust backend’indeki bir komutu \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, pencereyi yeniden boyutland\u0131rmak veya bir sistem bildirimi g\u00f6ndermek i\u00e7in.<\/li>\nemit<\/code>: Rust backend’inden frontend’e bir olay g\u00f6ndermek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir arka plan g\u00f6revi tamamland\u0131\u011f\u0131nda frontend’i bilgilendirmek i\u00e7in.<\/li>\nlisten<\/code>: Frontend’de Rust backend’inden gelen olaylar\u0131 dinlemek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n\u00d6rnek olarak, men\u00fc \u00e7ubu\u011fu penceresinin boyutunu dinamik olarak de\u011fi\u015ftirmek isteyebiliriz:<\/p>\n
\n\n\/\/ src\/App.tsx (Frontend)\nimport { invoke } from '@tauri-apps\/api\/tauri';\n\n\/\/ ...\n\nconst adjustWindowSize = async (newWidth: number, newHeight: number) => {\n try {\n await invoke('set_window_size', { width: newWidth, height: newHeight });\n console.log('Pencere boyutu ayarland\u0131.');\n } catch (error) {\n console.error('Pencere boyutu ayarlanamad\u0131:', error);\n }\n};\n\n\/\/ Bir d\u00fc\u011fmeye t\u0131klanarak boyutu de\u011fi\u015ftirebilirsiniz\n\/\/