![\"images/apache-47.png\"](\"/images/apache-47.png\")
Bu gizlilik politikası aşağıdaki uygulamalarımız için geçerlidir:
\nSon güncelleme: Ocak 2025
\nGizliliğiniz bizim için önemlidir. Asnus olarak, uygulamalarımızı kullanırken topladığımız bilgilerle ilgili gizliliğinize saygı duyuyoruz.
\nUygulamalarımız aşağıdaki bilgileri toplayabilir:
\nTopladığımız bilgileri şu amaçlarla kullanıyoruz:
\nUygulamalarımız aşağıdaki üçüncü taraf hizmetleri kullanabilir:
\nBu hizmetlerin kendi gizlilik politikaları bulunmaktadır.
\nVerilerinizi korumak için ticari olarak kabul edilebilir güvenlik önlemleri uyguluyoruz. Ancak, internet üzerinden hiçbir veri aktarım yöntemi %100 güvenli değildir.
\nUygulamalarımız 13 yaşın altındaki çocuklara yönelik değildir. Bilerek 13 yaşın altındaki çocuklardan kişisel bilgi toplamıyoruz.
\nBu gizlilik politikasını zaman zaman güncelleyebiliriz. Değişiklikler bu sayfada yayınlanacaktır.
\nGizlilik politikamızla ilgili sorularınız için bizimle iletişime geçebilirsiniz:
\nE-posta: info@asnus.com
\nLast updated: January 2025
\nYour privacy is important to us. At Asnus, we respect your privacy regarding any information we collect while you use our applications.
\nOur applications may collect the following information:
\nWe use the collected information for:
\nOur applications may use the following third-party services:
\nThese services have their own privacy policies.
\nWe implement commercially acceptable security measures to protect your data. However, no method of data transmission over the internet is 100% secure.
\nOur applications are not intended for children under 13. We do not knowingly collect personal information from children under 13.
\nWe may update this privacy policy from time to time. Changes will be posted on this page.
\nFor questions about our privacy policy, please contact us:
\nEmail: info@asnus.com
","pages":[{"url":"/contact/","relativePath":"contact.md","relativeDir":"","base":"contact.md","name":"contact","frontmatter":{"title":"İletişim","hide_title":false,"sections":[{"section_id":"contact-form","type":"section_form","content":"Aşağıdaki formu eksiksiz doldurarak bizimle iletişime geçebilirsiniz.","form_id":"contactForm","form_action":"https://mailthis.to/destek@asnus.com","form_fields":[{"input_type":"text","name":"isim","label":"İsim","default_value":"İsminiz","is_required":true},{"input_type":"email","name":"email","label":"E-mail","default_value":"E-mail adresiniz","is_required":true},{"input_type":"select","name":"konu","label":"Konu","default_value":"Konunuz","options":["Hata Ve Öneri","Sponsorluk","Diğer"]},{"input_type":"textarea","name":"mesaj","label":"Mesaj","default_value":"Mesajınız"},{"input_type":"checkbox","name":"onay","label":"Bu formun, benimle iletişime geçilebilmesi için gönderilen bilgilerimi sakladığını biliyor ve onaylıyorum."}],"submit_label":"Gönder"}],"template":"advanced"},"html":""},{"url":"/gizlilik-politikasi/","relativePath":"gizlilik-politikasi.md","relativeDir":"","base":"gizlilik-politikasi.md","name":"gizlilik-politikasi","frontmatter":{"title":"Gizlilik Politikası","subtitle":"AstroFal, Gizem'e Sor, Lazca Sözlük, Ses Değiştirici, Düzce'm, PetGuru","excerpt":"Asnus uygulamaları için gizlilik politikası","img_alt":"","template":"page","img_path":"images/c2ab78.jpg"},"html":"Bu gizlilik politikası aşağıdaki uygulamalarımız için geçerlidir:
\nSon güncelleme: Ocak 2025
\nGizliliğiniz bizim için önemlidir. Asnus olarak, uygulamalarımızı kullanırken topladığımız bilgilerle ilgili gizliliğinize saygı duyuyoruz.
\nUygulamalarımız aşağıdaki bilgileri toplayabilir:
\nTopladığımız bilgileri şu amaçlarla kullanıyoruz:
\nUygulamalarımız aşağıdaki üçüncü taraf hizmetleri kullanabilir:
\nBu hizmetlerin kendi gizlilik politikaları bulunmaktadır.
\nVerilerinizi korumak için ticari olarak kabul edilebilir güvenlik önlemleri uyguluyoruz. Ancak, internet üzerinden hiçbir veri aktarım yöntemi %100 güvenli değildir.
\nUygulamalarımız 13 yaşın altındaki çocuklara yönelik değildir. Bilerek 13 yaşın altındaki çocuklardan kişisel bilgi toplamıyoruz.
\nBu gizlilik politikasını zaman zaman güncelleyebiliriz. Değişiklikler bu sayfada yayınlanacaktır.
\nGizlilik politikamızla ilgili sorularınız için bizimle iletişime geçebilirsiniz:
\nE-posta: info@asnus.com
\nLast updated: January 2025
\nYour privacy is important to us. At Asnus, we respect your privacy regarding any information we collect while you use our applications.
\nOur applications may collect the following information:
\nWe use the collected information for:
\nOur applications may use the following third-party services:
\nThese services have their own privacy policies.
\nWe implement commercially acceptable security measures to protect your data. However, no method of data transmission over the internet is 100% secure.
\nOur applications are not intended for children under 13. We do not knowingly collect personal information from children under 13.
\nWe may update this privacy policy from time to time. Changes will be posted on this page.
\nFor questions about our privacy policy, please contact us:
\nEmail: info@asnus.com
"},{"url":"/ihsansunman/","relativePath":"ihsansunman.md","relativeDir":"","base":"ihsansunman.md","name":"ihsansunman","frontmatter":{"title":"İhsan Sunman","author":"ihsansunman","hide_title":true,"excerpt":"ihsansunman.asnus.com","sections":[],"template":"authorblog"},"html":""},{"url":"/about/","relativePath":"about.md","relativeDir":"","base":"about.md","name":"about","frontmatter":{"title":"Hakkımızda","subtitle":"Asnus Blog Teknoloji Konusunda Makaleleri Paylaştığımız Bir Web Sitesidir.","img_path":"images/kind-giraffe.png","img_alt":"ASNUS-LOGO","template":"page"},"html":"Merhaba arkadaşlar,
\nÖncelikle hepiniz blogumuza hoşgeldiniz. Uzun zamandır aklımızda olan ‘acaba bu işin altından kalkabilir miyim?’ sorusunu da düşünerek blogumuzu an itibariyle açtım. Blogumuz daha çok alanında bilgi sahibi olduğumuz için bilgisayar alanına hitap eden Bilişim ve Teknoloji, Yazılım ve Donanım, Ağ Teknolojisi, Web Programları, İpuçları ve Bilgi makalelerini siz okurlar ile paylaşacağız.
\nBlogumuzun ziyaretçi kitlesine göre ilerleyen zamanlarda kategorileri de artacaktır. Yazacağımız ders makalelerinde mümkün olduğunca özgün olmaya ve anlatılabilir, uygulanabilir şekilde belirtmeye çalışacağız. Elbette ki bazı kaynaklara başvuracağız ancak yine de özgün olmak ana hususumuz olacaktır.
\nUmarız blogumuz uzun yıllar internet serüveninde sizlerin sayesinde ayakta olur ve şimdiden takipleriniz için teşekkür eder ‘favori bloğunuz’ olmamızı da dileriz 🙂
\nSamet & İhsan
\n\n\nHer zaman bir şeyleri nasıl daha iyi yapabileceğinizi düşününün ve kendinizi sorgulayın. Elon Musk
\n
Okuduğunuz için teşekür ederiz!
\n"},{"url":"/blog/","relativePath":"blog/index.md","relativeDir":"blog","base":"index.md","name":"index","frontmatter":{"title":"Tüm Gönderiler","template":"blog"},"html":""},{"url":"/sametsunman/","relativePath":"sametsunman.md","relativeDir":"","base":"sametsunman.md","name":"sametsunman","frontmatter":{"title":"Samet Sunman","author":"sametsunman","hide_title":true,"excerpt":"sametsunman.asnus.com","sections":[],"template":"authorblog"},"html":""},{"url":"/","relativePath":"index.md","relativeDir":"","base":"index.md","name":"index","frontmatter":{"title":"Anasayfa","hide_title":true,"sections":[{"section_id":"hero","type":"section_hero","title":"Asnus Blog'a Hoşgeldiniz!","content":""},{"section_id":"about","type":"section_content"},{"section_id":"featured-posts","type":"featured_posts","title":"Editörün Seçimi","posts_number":2},{"section_id":"recent-posts","type":"section_posts","title":"Son Gönderiler","posts_number":6,"actions":[{"label":"Tüm Gönderiler","url":"blog/","style":"button"}]}],"template":"advanced"},"html":""},{"url":"/posts/apache-maven-windowsa-nasil-yuklenir/","relativePath":"posts/apache-maven-windowsa-nasil-yuklenir.md","relativeDir":"posts","base":"apache-maven-windowsa-nasil-yuklenir.md","name":"apache-maven-windowsa-nasil-yuklenir","frontmatter":{"title":"Apache Maven Windows'a nasıl yüklenir?","author":"sametsunman","subtitle":"Maven bir proje yönetim aracıdır. Gelişiricilere projenin tüm yaşam döngüsüne müdahale edebileceği bir yapı sağlar. Proje kurulumu ve yeniden kullanılabilirliği kolaylaştırır. Geliştirme sürecini basitleştirir ve bu süreci standart hale getirir. Bunlara ek olarak proje bağımlılıklarını yönetmesi de Maven’ın en önemli özelliklerinden birisidir.","date":"2019-12-22","thumb_img_alt":"apache-maven","content_img_alt":"apache-maven","excerpt":"Maven bir proje yönetim aracıdır. Gelişiricilere projenin tüm yaşam döngüsüne müdahale edebileceği bir yapı sağlar. Proje kurulumu ve yeniden kullanılabilirliği kolaylaştırır. Geliştirme sürecini basitleştirir ve bu süreci standart hale getirir. Bunlara ek olarak proje bağımlılıklarını yönetmesi de Maven’ın en önemli özelliklerinden birisidir.","canonical_url":"","template":"post","thumb_img_path":"images/apache-maven.jpg","content_img_path":"images/apache-maven.jpg"},"html":"Apache Maven'in resmi sitesinde kurulumu biraz kafa karıştırıcı bulunabilir. Bu yüzden türkçe yönerge iyi olacağını düşündüm.
\nMaven Kurulumu
\nÖnkoşullar: JDK 1.6 ya da daha üst sürümünün sisteminizde kurulu olması.
\nKontrol Paneli>Sistem Özellikleri>Gelişmiş>Ortam değişiklikleri
\n
![\"images/apache-57.png\"](\"/images/apache-57.png\")
![\"images/apache-64.png\"](\"/images/apache-64.png\")
Bunun için birçok bilgisayarda işlem yapmamız gerekmektedir. Günümüzde bu bilgisayarları ağ bağlantısı ile bir araya getirip sanki bir bilgisayarmış gibi davranmalarına yarayan sistemler geliştirilmiştir. Bu sisteme bilgisayar kümesi yani computer cluster denilir.
\nKişisel bilgisayarlarımız ile bir bilgisayar kümesi oluşturmak mümkün ancak günümüzde küme oluşturmak için özel üretilen kartlar mevcuttur. Hatta Raspberry adı verilen mini board PC’ler ile küme oluşturulması son zamanda oldukça artmıştır.
\nBir bilgisayar kümesi neden oluşturulur; yüksek verim gücüne ulaşmak, yüksek üretim gücüne ulaşmak, sürekli erişebilirlik ve de sistemimizin büyümek için rahat kullanım sağlaması.
\nKullanım alanlarına göre bilgisayar kümelerinin sınıfları:
\nKaynaklar:
\nBir metnin e-posta olup olmadağı aşağıdaki fonksiyonu kullanarak doğrulanabilir.
\nc#
\n public void SendEmail(){\n \n if (!ValidateEmail(mailTo))\n {\n MessageBox.Show(\"Invalid To mail address\");\n return;\n }\n \n }\n\n private bool ValidateEmail(string emailAddress)\n {\n string patternStrict = @\"^(([^<>()[\\]\\\\.,;:\\s@\\\"\"]+\"\n + @\"(\\.[^<>()[\\]\\\\.,;:\\s@\\\"\"]+)*)|(\\\"\".+\\\"\"))@\"\n + @\"((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\"\n + @\"\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+\"\n + @\"[a-zA-Z]{2,}))$\";\n System.Text.RegularExpressions.Regex reStrict = new System.Text.RegularExpressions.Regex(patternStrict);\n bool isStrictMatch = reStrict.IsMatch(emailAddress);\n return isStrictMatch;\n }\nJavaScript
\n<script>\nfunction SendEmail() {\n let mailTo =document.getElementById(\"mailTo\").value; \n \n if (!validateEmail(mailTo)) {\n alert('Invalid To mail address.');\n return;\n }\n }\n\n function ValidateEmail(email) {\n var re = /^(([^<>()\\[\\]\\\\.,;:\\s@@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@@\"]+)*)|(\".+\"))@@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n return re.test(String(email).toLowerCase());\n }\n </script>\n1. Sanal ses sürücüsü yükleme
\nBilgisayarınızda hoparlör varsa ama yine de telefonuza ses iletmek istiyorsanız bu adımı geçebilirsiniz.
\nÖncelikle https://www.vb-audio.com/Cable/index.htm adresinden downloada basarak sanal sürücümüzün dosyasını indiriyoruz. Dosyaları zipten çıkararak uygun olan yükleme exesine sağ tıklayarak yönetici oalrak çalıştırıyoruz. Yükleme adımlarını geçerek programımızı yüklüyoruz. Sağ alt köşede ses simgesi aktif olduysa kurulum başarılıdır.
\n2. Sesi telefona iletme,
\nİşte eğlenceli kısım. Öncelikle belirteyim bilgisayar ve telefonunuz aynı ağda olması gerekiyor :)
\nhttp://georgielabs.net Bu adresten bilgisarınıza uygun olanı yükleyin.
\nAynı şekilde Google Playden (http://play.google.com/store/apps/details?id=com.georgie.SoundWire) uygulamayı telefona yükleyin.
\n![\"images/soundware-app.jpeg\"](\"/images/soundware-app.jpeg\")
Şimdi ise telefonuzundaki uygulamadan bilgisayarın ip adresini girin. Ip adresi bilgisayardaki programda gözüküyor. Daha sonra ise ikona tıklayarak uygulamayı aktif edin. Bilgisayarınızdaki programda connected yazısı gördüyseniz eğer işlem başarılıdır.
\n![\"images/soundware-software.png\"](\"/images/soundware-software.png\")
İşte bu kadar. İyi eğlenceler
"},{"url":"/posts/debounce-nedir-ve-nasil-kullanilir/","relativePath":"posts/debounce-nedir-ve-nasil-kullanilir.md","relativeDir":"posts","base":"debounce-nedir-ve-nasil-kullanilir.md","name":"debounce-nedir-ve-nasil-kullanilir","frontmatter":{"title":"Debounce Nedir ve Nasıl Kullanılır?","subtitle":"Debounce, sürekli olarak tekrarlanan işlemleri kontrol altına almak için kullanılan bir tekniktir. Örneğin, bir kullanıcının bir arama kutusuna metin girdiğini ve bu metni kullanarak bir servise istek göndermeyi düşünelim. Kullanıcı her tuşa bastığında, isteği hemen göndermek yerine belirli bir zaman dilimi sonunda göndermek isteyebilirsiniz. Bu, her tuşa basışta servisiniz üzerinde gereksiz bir yük oluşturmaktan kaçınmanıza yardımcı olur. ","date":"2023-09-25T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/debounceMain.png","content_img_path":"images/debounceMain.png"},"html":"Örnek üzerinden devam edelim. Kullanıcı bir <input/> alanına aramak istediği kelimeyi yazdığında, bu kelime ile ilgili sonuçların görüntülendiği bir yapı hayal edin. Bu girdi değeri her değiştiğinde ilgili servise giderek sonuçları alacağımız bir fonksiyonumuz olsun. Ancak her tuşa bastığınızda bu işlevi çağırmak, servisinizi gereksiz yere yorabilir. İşte burada bir zamanlayıcı kullanabilirsiniz. Bu, her tuşa bastığınızda işlevin her çalıştırıldığında zamanlayıcı sıfırlanır. Bu sayede isteği göndermek için belirli bir zaman dilimini bekler. Kullanıcı yeni bir giriş yapmadıkça zamanlayıcı sıfırlanmaz ve belirlediğiniz süre sonunda istek gönderilir.
![\"nondebounce\"](\"https://asnus.com/images/nondebounce.png\")
Yukarıda örneğini göstermiş olduğum gibi kullanıcı her bir harfi değiştirdiğinde servisimize giderek bir istek atıyoruz. Aşağıdaki örnekte ise kullanıcı veri girişini tamamlandığında isteği gönderecektir.
\n![\"debounce\"](\"https://asnus.com/images/debounce.png\")
Örnekleri canlı olarak da inceleyebilirsiniz.
\n\n\nJavaScript(ES6) ve React için debounce kullanımını inceleyelim. 400ms olarak belirlediğimiz zaman boyunca yeniden fonksiyonumuz çalıştırılmadığı durumda yazdığımız fonksiyon çalışacaktır. Ancak fonksiyon her çağrıldığında verdiğimiz zamanlayıcı sıfırlayacaktır. Verilen zamanı yapımıza uygun değiştirebiliriz. Bu yapıyı dilediğimiz yazılım diline uygun düzenleyebiliriz.
\nlet timer;\nfunction getSearchResults(){\n clearTimeout(timer);\n timer = setTimeout(() => { \n /* İlgili işlemleri yapacak fonksiyonumuz */ \n }, 400);\n}\nimport { useRef } from 'react';\n\nconst timerRef = useRef(null);\n\nconst getSearchResults = () => {\n clearTimeout(timerRef .current);\n timerRef.current = setTimeout(() => {\n /* İlgili işlemleri yapacak fonksiyonumuz */\n }, 400);\n };\nYukarıda vermiş olduğum örnekte yorum satırı olarak verdiğim satıra kullanıcının etkileşimin bitmesi durumunda sistemimize yaptırmak istediğimiz işlemi yazabiliriz. Görüldüğü gibi bu sistemi kurmak oldukça basittir. Basitliği yanı sıra, belirli sorunları çözmede de yardımcı olabilir.
"},{"url":"/posts/chatgpt-nedir-ve-nasil-kullanilir/","relativePath":"posts/chatgpt-nedir-ve-nasil-kullanilir.md","relativeDir":"posts","base":"chatgpt-nedir-ve-nasil-kullanilir.md","name":"chatgpt-nedir-ve-nasil-kullanilir","frontmatter":{"title":"ChatGPT Nedir ve Nasıl Kullanılır?","subtitle":"ChatGPT, OpenAI tarafından geliştirilen bir dil modelidir. Bu model, bir konuşmayı takip edebilme ve doğal dil kullanarak cevaplar verebilme yeteneğine sahip olan bir dil modelidir. Bu model, dil üzerinde yoğun bir şekilde çalışan bir dil modelidir ve birçok farklı dil ve dil kombinasyonu için kullanılabilir. ","date":"2022-12-05T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/Ekran görüntüsü 2022-12-05 093729.png","content_img_path":"images/Ekran görüntüsü 2022-12-05 093729.png"},"html":"ChatGPT kullanımı oldukça basittir. Öncelikle, modeli indirip yüklemek gerekir. Daha sonra, kullanıcının modeli kullanarak bir konuşma yapmak istediği dil seçimi yapması gerekir. Daha sonra, kullanıcı modeli kullanarak bir konuşma başlatabilir ve model, doğal dil kullanarak cevaplar verebilir.
\nModelin kullanımı için birkaç örnek vardır. Örneğin, bir kullanıcı modeli bir konuşma ortamında kullanarak, modeli bir arkadaşı ile konuşturabilir. Bu sayede model, doğal dil kullanarak cevaplar vererek bir konuşma simüle edebilir. Ayrıca, bir kullanıcı modeli bir chatbot olarak kullanarak, modeli bir web sitesinde ya da bir mobil uygulamada kullanarak, kullanıcılara doğal dil kullanarak cevaplar verebilir.
\nGenel olarak, ChatGPT bir dil modelidir ve dil üzerinde yoğun bir şekilde çalışan bir model olarak tasarlandı. Bu model, doğal dil kullanarak cevaplar verebilme yeteneğine sahip olduğu için, birçok farklı dil ve dil kombinasyonu için kullanılabilir. Kullanımı da oldukça basittir ve kullanıcılar modeli bir konuşma ortamında ya da bir chatbot olarak kullanarak faydalanabilirler.
\nBu iki biriminde farklı görev ve sorumlulukları bulunur. Geliştirici birimi; uygulamayı kodlar, uygulamayı yayınlar, güncelleştirme ve iyileştirmeleri yapar, uygulamayı test eder. Operasyon birimi ise; uygulamanın barınacağı alt yapıyı tasarlar, gerekli ağ ve güvenliği sağlar, uygulamanın izlenmesini sağlar, kaynak kullanımını ve bu kaynağın kullanım durumuna göre artırılmasını belirler.
\nDevOps’un daha hızlı ve verimli çalışmasını sağlayan durum iki farklı birimin tek çatı altına girip işlemlerin bir arada yapılmasıdır. Ve bu işlemlerin sürekli ve aralıksız gerçekleşmesi ile yapılan uygulama sürekli gelişir.
\nDevOps birçok insan tarafından bir felsefe olarak da anılır. Ancak günümüzde firmaların DevOps’u bir pozisyon ismi olarak kullandığını görmekteyiz.
\nDevOps’un faydaları ise birimlerin daha verimli çalışmaları, sürekli üretim, sorunlara daha hızlı çözümler üretebilmek, daha hızlı teslim, daha düzenli çalışanlar, daha güvenirlik vb.
"},{"url":"/posts/git-ile-iki-projeyi-birlestirmek/","relativePath":"posts/git-ile-iki-projeyi-birlestirmek.md","relativeDir":"posts","base":"git-ile-iki-projeyi-birlestirmek.md","name":"git-ile-iki-projeyi-birlestirmek","frontmatter":{"title":"Git ile iki projeyi birleştirme","subtitle":"Merhaba arkadaşlar, bazen iki farklı projeyi birleştirmek gerekebilir. Farklı bir projeyi kendi projemize entegre etmek isteriz. Veya aynı proje için iki farklı repo açılmış ve birleştirmek gerekebilir. Bu durumda bu konu size yardımcı olacaktır.","date":"2021-05-13","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/git-project.png","content_img_path":"images/git-project.png"},"html":"İki adet repomuz olsun. Biri YENİ-PROJE, diğeri ise ESKİ-PROJE olsun. Burada yapacağımız ESKİ-PROJE dosyalarını YENİ-PROJE dosyalarının içine dahil ederek YENİ-PROJE'yi güncellemek olacaktır. Bu işlemi sağlarken git kullanmanın da güzelliğini görüyor olacağız. Demek istediğim şu; bir proje geliştiriyoruz. belli kısmı hazır olsun A kişisi bu projeyi geliştirsin. B kişisi ise bu geliştirmeden bağımsız yeri geliştirsin. Birleştirme sağlanırken bağımsız dosyalar sorunsuz entegre olurken, aynı dosyalar veya aynı satırlarda yapılan değğişiklikleri herhangi bir git sistemi (VS Code, Android Studio, Gitkraken) bize hangi kodun kalıcağını veya birleştirme sağlanıp sağlanmıyacağını soruyor olacak. Bu durum ise olası sorunları bizim kontrolümüze bırakıyor olacaktır.
\nGelelim bu işlemi nasıl sağlayacağımıza:
\ncd path/to/YENİ-PROJE\ngit remote add ESKİ-PROJE /path/to/ESKİ-PROJE\ngit fetch ESKİ-PROJE --tags\ngit merge --allow-unrelated-histories ESKİ-PROJE/master\ngit remote remove ESKİ-PROJE //Eğer ESKİ-PROJE'nin silinmesini istemiyorsanız bunu yapmayın.\nDNS Nedir?
\nIP adresini daha önceden duymuşsunuzdur. İnternette gezindiğimiz her web sitesinin bir IP adresi vardır. Eğer DNS olmasaydı Google ’ye girmek istediğimizde www.google.com adresi yerine 172.217.169.206 gibi uzun ve karmaşık sayılar ile web sitelere girmemiz gerekecekti. Bu hem akılda kalması çok zor hem de gereksiz bir uğraş olurdu. Bunun yerine DNS sistemi bize bu IP adresi yerine daha basit olan alan adları ile internette daha rahat gezinmemizi sağlıyor.
\nDNS Nasıl Çalışır?
\nBir web siteye girmek istedik. Adres çubuğuna girmek istediğimiz adresi girdik. Burada örnek www.google.com.tr olsun. Öncelikle tarayıcımız bu alan adını bilgisayarımızdaki çerezlere bakar. Eğer burada varsa IP adresi bulacağı için hızlı bir şekilde açacaktır. Ancak bu çerezler genelde 1 saat, 1 gün gibi bir sürede temizlenir. Girdiğimiz adres çerezlerde yoksa genelde internet sağlayıcılarımızın sunduğu DNS sunucularına gideriz. Ve orada bu alan adına karşılık gelen IP adresini bulup siteye rahatça gireriz. Peki ya bu sunucular nasıl bu kadar hızlı şekilde istediğimiz alan adının karşılığı olan IP adresi buluyor. Bu sistemi bir ağaca benzetebiliriz, dallanan bir ağaca. Örneğimize bakalım sonu tr ile bitiyor. Bu adresin hangi ülkede olduğunu belli eder. Bu sitemiz Türkiye’de bulunmakta. İkinci olarak .com yazısı ile karşılaşıyoruz. Bunlara üst düzey domain denilir. Com bir ticari kuruluş olduğunu belli eder. En sonunda ise google yani sitemizin adı yazar. Bu şekilde IP adresimizi bulunur.
\nDNS Güvenlik Sorunları Nelerdir?
\nBahsettiğim gibi bir sunucu var ve karşılık gelen IP adresi üzerinden siteye girebiliyoruz. Peki ya siber saldırganlar siz farkında olmadan karşılık gelen IP adresini değiştirdiğini düşünün. Siz bir siteye girmek istiyorsunuz ama aslında o siteye benzeyen başka bir siteye girmişsiniz. Farkında olmadan kredi kartı bilgilerini girdiğiniz anda bu bilgiler saldırganların eline geçebilir. Bu yüzden güvendiğimiz DNS servisini tercih etmenizin ne kadar önemli olduğunu anlayabiliriz.
"},{"url":"/posts/excelde-calisma-kitabini-otomatik-kaydetme/","relativePath":"posts/excelde-calisma-kitabini-otomatik-kaydetme.md","relativeDir":"posts","base":"excelde-calisma-kitabini-otomatik-kaydetme.md","name":"excelde-calisma-kitabini-otomatik-kaydetme","frontmatter":{"title":"Excelde çalışma kitabını otomatik kaydetme","subtitle":"Merhaba arkadaşlar, İş yerimde elektrik kesintisinden dolayı önemli bilgiler kayboluyordu, buna çözüm üretmek adına çalışma kitabını otomatik kaydetmeyi öğrendim ve uyguladım, Bunu sizlerle paylaşmak istedim umarım yararlı olur.","date":"2021-01-24","thumb_img_alt":"Excel-oto","content_img_alt":"Excel-oto","excerpt":"Merhaba arkadaşlar, İş yerimde elektrik kesintisinden dolayı önemli bilgiler kayboluyordu, buna çözüm üretmek adına çalışma kitabını otomatik kaydetmeyi öğrendim ve uyguladım, Bunu sizlerle paylaşmak istedim umarım yararlı olur.","canonical_url":"lorem-ipsum","author":"sulesavas","template":"post","thumb_img_path":"images/Excel-oto.png","content_img_path":"images/Excel-oto.png"},"html":"Öncelikle Excel dosyamızı açalım. Geliştirici sekmesini aktif edelim.
\nGeliştirici sekmesini aktif etmek için;
\nDosya sekmesine tıklıyoruz aşağıda yer alan seçeneklere tıklayıp sol taraftaki şeridi özelleştir bölümünden geliştirici kutucuğunu aktif edip tamama tıklıyoruz. Geliştirici sekmemiz aktif oldu :)
\nŞimdi geliştirici sekmesinden Visual Basic e tıklayalım. Açılan pencerede Insert kısmından yeni Module ekleyelim. Sonrasında ise açılan pencereye aşağıdaki kodları yapıştıralım.
\nSub OtoKaydetme()\n\nDim wb As Workbook\nDim durtime As Integer\ndurtime = 1\n\n \n\nWith Application\n.DisplayAlerts = False\n.EnableEvents = False\nFor Each wb In Application.Workbooks\nIf Not wb.ReadOnly And Windows(wb.Name).Visible Then\nwb.Save\n\nEnd If\nNext wb\n.DisplayAlerts = False\n.EnableEvents = True\n.OnTime Now + TimeValue(\"00:00:05\"), \"OtoKaydetme\"\n\nEnd With\n\nExit Sub\n\nsonlandir:\n\nEnd Sub\nŞimdi ise soldan BuÇalışmaKitabı dosyasını açıyoruz ve üstteki General yazan açılır menüden Workbook u seçelim ve alttaki kodu yapıştıralım.
\nPrivate Sub Workbook_Open()\n\nCall OtoKaydetmeModule.OtoKaydetme\n\nEnd Sub\nBöylece yapmış olduğumuz Module ü 5 sn de bir çağıracak ve sayfamız otomatik kaydolacak.
\nİyi çalışmalar...
"},{"url":"/posts/github-api-dosya-paylasimi/","relativePath":"posts/github-api-dosya-paylasimi.md","relativeDir":"posts","base":"github-api-dosya-paylasimi.md","name":"github-api-dosya-paylasimi","frontmatter":{"title":"Github API ile Dosya Yükleme, Düzenleme ve Silme Nasıl Yapılır?","subtitle":"Github projenize uzaktan dosya yüklemek ve bu dosyayı düzenleme ihtiyacı duydunuz mu? ","date":"2022-11-11T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/git-api.webp","content_img_path":"images/git-api.webp"},"html":"Şuan bu yazının bulunduğu blog Github Repo'sundan yayınlanmaktadır. Her bir yazının yayınlanması için Github Repo'suna yeni bir dosya göndermemiz gerekmektedir. Bu sebeple Github API kullanarak form yapısından dosya gönderme işlemi hazırladık. Gelin bu işlemi nasıl yaptığımızdan biraz bahsedelim.
\nDosyalara Ulaşmak
\nÖncelikle Git Repo'muza ulaşabilmemiz adına https://api.github.com/repos/asnuscom/asnus/contents endpointini kullanabiliriz. Buradan repoya ait dosyalar ve indirme uzantılarına ulaşabiliriz. Eğer bir webform hazırlıyorsanız buradan iletişim kurulacak ise bu endpoint size dosyaları sağladığı için dosyalarınızın listesini oluşturmanıza olanak tanır.
![\"API](\"https://asnus.com/images/api-req.png\")
Dosya Yükleme ve Düzenleme
\nÖncelikle yükleme, düzenleme ve silme işlemleri için bir tokena ihtiyacımız var. New Token adresinden bir token almamız gerekmektedir. İzin olarak 'Repo' iznini onaylamamız yeterli olacaktır. Oluştur dediğimizde token bize verilecek. Burada dikkat edilmesi gereken nokta bu token bir kere verilecektir. Kaybetmeniz durumunda tekrar oluşturmanız gerekecektir.
\nconst content = btoa(unescape(encodeURIComponent(\"Dosya içeriği\")))\nconst data = JSON.stringify({\n message: `Commit Mesajı`,\n content: `${content}`,\n });\nvar config = {\n method: \"put\",\n url: `https://api.github.com/repos/${Kullanıcı İsmi}/${Repo İsmi}/contents/${Oluşturulmasını istediğiniz dosya}.txt`,\n headers: {\n Authorization: `Bearer ${Token}`,\n \"Content-Type\": \"application/json\",\n },\n data: data,\n };\naxios(config)\n .then(function (response) {\n console.log(response);\n })\n .catch(function (error) {\n console.log(error);\n });\nYukarıda bulunan kod bloğunu kendi yapınıza uygun düzenliyebilirsiniz. Dosya içeriği yazan bölüme isterseniz bir yazıyı, isterseniz ise bir resmi koyabilirsiniz. Buraya konulan her türlü içerik Base64 formatına çevrilerek Github Reponuza iletilmektedir. Bu sebeple sorun vermemektedir. Aynı dosya ismine sahip endpointe tekrar istek attığınızda ise içerik yeni göndermiş olduğunuz haline düzenlenecektir.
Dosya Silme
\nDosya silme işlemi yukardaki yapıya benzer bir şekilde yapılmaktadır. Bu sefer içerik göndermemize gerek bulunmamaktadır. Methodu 'DELETE' olarak düzenleyip istek attığımızda ise ilgili endpointteki dosya silinecektir. Burada yine commit mesajı yazmamız gerektiğini unutmayalım.
\nBu yöntem ile projelerinize uzaktan erişebilir. Ve dilediğiniz gibi dosya gönderebilir veya silebilirsiniz.
"},{"url":"/posts/git-kullanimi-ve-kafa-karistiran-seyler/","relativePath":"posts/git-kullanimi-ve-kafa-karistiran-seyler.md","relativeDir":"posts","base":"git-kullanimi-ve-kafa-karistiran-seyler.md","name":"git-kullanimi-ve-kafa-karistiran-seyler","frontmatter":{"title":"Git: Herkesin Kafasını Karıştıran Şeyler","author":"sametsunman","subtitle":"Git öğrenmeye başladığında her şey güzel gider. Sonra bir gün \"detached HEAD\" görürsün ve panik başlar. Bu yazıda git'in kafanı karıştıran taraflarını açıklıyoruz.","date":"2025-12-16","thumb_img_alt":"git","content_img_alt":"git","excerpt":"Git öğrenmeye başladığında her şey güzel gider. Sonra bir gün \"detached HEAD\" görürsün ve panik başlar. Bu yazıda git'in kafanı karıştıran taraflarını açıklıyoruz.","canonical_url":"","template":"post","thumb_img_path":"images/git_banner.png","content_img_path":"images/git_banner.png"},"html":"Git kullanmaya başladığında add, commit, push öğrenirsin. \"Ne varmış bunda?\" dersin. Sonra bir gün conflict çıkar, detached HEAD uyarısı görürsün, yanlışlıkla bir şeyleri silersin... Ve o an anlarsın ki git derin bir okyanus.
Gel, bu okyanusta kaybolmamak için en kafa karıştıran şeyleri konuşalım.
\nİki branch'i birleştirmek istiyorsun. İki seçenek var:
\ngit checkout main\ngit merge feature\nBu, feature branch'indeki değişiklikleri main'e getirir ve bir \"merge commit\" oluşturur. Tarihçe şöyle görünür:
\n* Merge branch 'feature'\n|\\\n| * feature commit 2\n| * feature commit 1\n* | main commit\n|/\n* ortak commit\ngit checkout feature\ngit rebase main\nBu, feature branch'ini alır ve main'in ucuna \"yapıştırır\". Sanki feature'ı main'den yeni başlatmışsın gibi olur:
\n* feature commit 2\n* feature commit 1\n* main commit\n* ortak commit\nAltın kural: \"Kendi local branch'inde rebase yap, paylaşılmış branch'lerde merge yap.\"
\nBir commit'i geri almak istiyorsun. Ama nasıl?
\nCommit'leri tarihten siler (aslında silmez ama öyle görünür):
\n# Son commit'i geri al, değişiklikleri staged tut\ngit reset --soft HEAD~1\n\n# Son commit'i geri al, değişiklikleri unstaged tut\ngit reset --mixed HEAD~1\n\n# Son commit'i geri al, değişiklikleri tamamen sil\ngit reset --hard HEAD~1\nDikkat: --hard tehlikelidir. Kaydedilmemiş değişikliklerin gider.
Commit'i geri alan yeni bir commit oluşturur:
\ngit revert abc123\nTarihçeyi değiştirmez, sadece \"bu commit'i geri aldım\" diye yeni bir commit ekler.
\nŞu mesajı gördüğünde panik yapma:
\nYou are in 'detached HEAD' state...\nBu sadece şu anlama geliyor: Bir branch'te değilsin, direkt bir commit'e bakıyorsun.
\nNasıl olur?
\ngit checkout abc123 # Bir commit hash'ine checkout\ngit checkout v1.0 # Bir tag'e checkout\nBu durumda yaptığın commit'ler hiçbir branch'e ait olmaz. Kaybolabilirler!
\n# Ya bir branch oluştur\ngit checkout -b yeni-branch\n\n# Ya da mevcut branch'ine geri dön\ngit checkout main\nYeni başlayanlar hep sorar: \"Neden direkt commit etmiyoruz? Bu add ne işe yarıyor?\"
Staging area (index), commit'e neyin gireceğini seçmeni sağlar. Diyelim 5 dosya değiştirdin ama sadece 3'ünü commit etmek istiyorsun:
\ngit add dosya1.js dosya2.js dosya3.js\ngit commit -m \"Sadece bu üçü\"\nHatta bir dosyanın sadece bazı satırlarını bile seçebilirsin:
\ngit add -p dosya.js\nBu sana her değişikliği tek tek sorar: \"Bunu ekleyeyim mi?\"
\nBir şey üzerinde çalışıyorsun, acil başka branch'e geçmen gerekti. Ama commit etmek istemiyorsun çünkü iş yarım.
\n# Değişiklikleri sakla\ngit stash\n\n# Başka branch'e geç, işini yap\ngit checkout main\n# ...\n\n# Geri dön ve değişiklikleri geri al\ngit checkout feature\ngit stash pop\n# Stash'e isim ver\ngit stash save \"Login sayfası yarım kaldı\"\n\n# Stash listesini gör\ngit stash list\n\n# Belirli bir stash'i geri al\ngit stash apply stash@{2}\n\n# Stash'i silmeden uygula\ngit stash apply\n\n# Stash'i uygula ve sil\ngit stash pop\nBaşka bir branch'ten sadece bir commit'i almak istiyorsun:
\ngit cherry-pick abc123\nBu, o commit'i alır ve şu anki branch'ine uygular. Çok kullanışlı ama dikkatli ol, aynı değişiklik iki yerde olunca ileride conflict çıkabilir.
\nİki kişi aynı satırı değiştirince conflict çıkar:
\n<<<<<<< HEAD\nconst x = 1;\n=======\nconst x = 2;\n>>>>>>> feature\nBu şu demek:
\n<<<<<<< HEAD ile ======= arası: Senin branch'indeki versiyon======= ile >>>>>>> feature arası: Gelen branch'teki versiyongit add dosya.jsgit commitYa da ikisini birleştir:
\nconst x = 3; // İkisinin ortası bir değer\nVS Code conflict'leri çok güzel gösteriyor. \"Accept Current\", \"Accept Incoming\", \"Accept Both\" butonları var. Hayat kurtarıcı.
\nBir şeyleri mahvettin, commit'lerin kayboldu mu? Panik yapma:
\ngit reflog\nBu, yaptığın her şeyin kaydını tutar. Reset, checkout, merge... Hepsi burada.
\nabc123 HEAD@{0}: reset: moving to HEAD~1\ndef456 HEAD@{1}: commit: Önemli değişiklik\nghi789 HEAD@{2}: checkout: moving from main to feature\nKayıp commit'ini buldun mu?
\ngit checkout def456\n# veya\ngit reset --hard def456\nreflog hayat kurtarır. Unutma.
\n.gitignore'a ekledin ama dosya hala takip ediliyor? Çünkü dosya zaten git'e eklenmişti.
# Önce git'ten kaldır (dosyayı silmez)\ngit rm --cached dosya.txt\n\n# Sonra commit et\ngit commit -m \"dosya.txt artık takip edilmiyor\"\nKlasör için:
\ngit rm -r --cached klasor/\n# Origin'i gör\ngit remote -v\n\n# Upstream ekle (fork'larda)\ngit remote add upstream https://github.com/orijinal/repo.git\n\n# Upstream'den güncelleme al\ngit fetch upstream\ngit merge upstream/main\nSadece remote'taki değişiklikleri indirir, birleştirmez:
\ngit fetch origin\nSonra istersen incele:
\ngit log origin/main\ngit diff main origin/main\nfetch + merge yapar:
\ngit pull origin main\n# Şuna eşit:\n# git fetch origin\n# git merge origin/main\nTavsiye: Önce fetch yap, bak ne gelmiş, sonra merge yap. Daha kontrollü.
Kötü commit mesajları:
\nfix\nasdasd\nwip\ndeğişiklik yaptım\nİyi commit mesajları:
\nfeat: Kullanıcı giriş sayfası eklendi\nfix: Login butonunun tıklanmama sorunu düzeltildi\nrefactor: Auth servisindeki tekrar eden kod temizlendi\ndocs: README'ye kurulum adımları eklendi\nBu format çok yaygın:
\n<tip>: <açıklama>\n\n[opsiyonel gövde]\n\n[opsiyonel footer]\nTipler:
\nfeat: Yeni özellikfix: Bug düzeltmedocs: Dokümantasyonstyle: Kod formatı (işlevsel değişiklik yok)refactor: Kod düzenlemetest: Test eklemechore: Build, config değişiklikleri.gitconfig dosyana ekle:
[alias]\n st = status\n co = checkout\n br = branch\n ci = commit\n lg = log --oneline --graph --decorate\n unstage = reset HEAD --\n last = log -1 HEAD\n undo = reset --soft HEAD~1\nArtık git st yazman yeterli.
Git başta zor görünür ama mantığını kavradıktan sonra vazgeçilmez oluyor. En önemli şey: Deney yap, ama önemli projelerde değil!
\nBir test repository'si oluştur, içinde her şeyi dene. Reset yap, rebase yap, conflict oluştur, çöz. Korkmadan öğrenirsin.
\nVe unutma: git reflog her zaman arkanda.
Git ile ilgili sorularını yorumlarda paylaş. Hangi komut kafanı karıştırıyor?
"},{"url":"/posts/javascript-array-object-properties-sum/","relativePath":"posts/javascript-array-object-properties-sum.md","relativeDir":"posts","base":"javascript-array-object-properties-sum.md","name":"javascript-array-object-properties-sum","frontmatter":{"title":"Javascript'te bir array object'nin içindeki veriler nasıl toplanır?","subtitle":"Fonksiyon kullanarak bir nesne dizisinin içerisindeki belirli bir niteliklerin toplamını getirebiliriz. ","date":"2022-11-10T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"sametsunman","template":"post","thumb_img_path":"images/sumFloatingArray.png","content_img_path":"images/sumFloatingArray.png"},"html":"Aşağıdaki fonksiyonu kullanarak bir nesne içerisindeki belirli bir properties'lerin toplamını verir.\narr: Array object'sini ifade eder.\nname: Property ismini ifade eder.
\n const sumFloatingArray = (arr, name) => {\n return parseFloat(arr.reduce((acc, obj) => acc + (parseFloat(obj[name]) ?? 0.0), 0) || 0);\n };\nYukarıdaki gibi tarayıcınızın F12'ye basarak ya da sağ tıkta öğeyi incele diyerek geliştirici sayfasını açın. Konsol bölümüne aşağıdaki kodu yapıştırın.
\nfunction pageScroll() {window.scrollBy(0,100);scrolldelay = setTimeout(pageScroll,1);}pageScroll();\nBöylece sayfa otomatik olarak aşağı inecek ve tüm sayfa yüklenecek. Sayfanın sonu varsa sonuna ulaşabileceksiniz.
"},{"url":"/posts/javascript-asenkron-programlama/","relativePath":"posts/javascript-asenkron-programlama.md","relativeDir":"posts","base":"javascript-asenkron-programlama.md","name":"javascript-asenkron-programlama","frontmatter":{"title":"JavaScript'te Asenkron Programlama: Callback'ten Async/Await'e","author":"sametsunman","subtitle":"Callback hell'de kaybolmuş, Promise zincirlerinde boğulmuş biri misin? Merak etme, JavaScript'in asenkron dünyasını en baştan, adım adım anlatıyoruz.","date":"2025-12-16","thumb_img_alt":"javascript async","content_img_alt":"javascript async","excerpt":"Callback hell'de kaybolmuş, Promise zincirlerinde boğulmuş biri misin? Merak etme, JavaScript'in asenkron dünyasını en baştan, adım adım anlatıyoruz.","canonical_url":"","template":"post","thumb_img_path":"images/async_js.png","content_img_path":"images/async_js.png"},"html":"JavaScript tek thread'li bir dil. Yani aynı anda sadece bir iş yapabilir. Peki API'den veri çekerken sayfa nasıl donmuyor? İşte asenkron programlamanın sihri burada başlıyor.
\nBu yazıda callback'lerden başlayıp, Promise'lere, oradan da async/await'e kadar tüm yolculuğu yapacağız.
\nconsole.log(\"1\");\nconsole.log(\"2\");\nconsole.log(\"3\");\n// Çıktı: 1, 2, 3 (sırayla)\nHer satır bir önceki bitmeden çalışmaz. Basit ve öngörülebilir.
\nconsole.log(\"1\");\nsetTimeout(() => console.log(\"2\"), 1000);\nconsole.log(\"3\");\n// Çıktı: 1, 3, 2\nsetTimeout asenkron. JavaScript \"1 saniye sonra çalıştır\" der ve devam eder. \"3\" yazdırılır, 1 saniye sonra \"2\" gelir.
Callback, bir fonksiyona parametre olarak verdiğin başka bir fonksiyon. \"İşin bitince bunu çağır\" demek gibi.
\nfunction veriCek(callback) {\n setTimeout(() => {\n const veri = { isim: \"Ahmet\", yas: 25 };\n callback(veri);\n }, 1000);\n}\n\nveriCek((sonuc) => {\n console.log(sonuc); // { isim: \"Ahmet\", yas: 25 }\n});\nGüzel görünüyor değil mi? Ama bekle...
\nBirden fazla asenkron işlem sırayla yapman gerekince:
\nkullaniciyiGetir(1, (kullanici) => {\n siparisleriGetir(kullanici.id, (siparisler) => {\n siparisDetayGetir(siparisler[0].id, (detay) => {\n odemeGetir(detay.odemeId, (odeme) => {\n kargoTakip(odeme.kargoNo, (kargo) => {\n console.log(kargo);\n // Daha da derine inebilir...\n });\n });\n });\n });\n});\nBuna \"Callback Hell\" veya \"Pyramid of Doom\" deniyor. Okumak zor, debug etmek kabus, hata yakalamak imkansıza yakın.
\nveriCek((hata, sonuc) => {\n if (hata) {\n console.error(hata);\n return;\n }\n baskaBirsey(sonuc, (hata2, sonuc2) => {\n if (hata2) {\n console.error(hata2);\n return;\n }\n // Her seviyede hata kontrolü...\n });\n});\nHer callback'te ayrı ayrı hata kontrolü. Çıldırtıcı.
\nES6 ile birlikte Promise geldi ve hayatımız değişti.
\nPromise, gelecekte bir değer döneceğini \"söz veren\" bir nesne. Üç durumu var:
\nconst soz = new Promise((resolve, reject) => {\n setTimeout(() => {\n const basarili = true;\n\n if (basarili) {\n resolve({ isim: \"Ahmet\", yas: 25 });\n } else {\n reject(new Error(\"Bir şeyler ters gitti\"));\n }\n }, 1000);\n});\nsoz\n .then((sonuc) => {\n console.log(sonuc);\n })\n .catch((hata) => {\n console.error(hata);\n });\nkullaniciyiGetir(1)\n .then(kullanici => siparisleriGetir(kullanici.id))\n .then(siparisler => siparisDetayGetir(siparisler[0].id))\n .then(detay => odemeGetir(detay.odemeId))\n .then(odeme => kargoTakip(odeme.kargoNo))\n .then(kargo => console.log(kargo))\n .catch(hata => console.error(\"Bir yerde hata oluştu:\", hata));\nDüz bir zincir! Okunması çok daha kolay. Ve tek bir catch tüm hataları yakalar.
Birden fazla Promise'i paralel çalıştır, hepsi bitince devam et:
\nconst p1 = fetch('/api/kullanici');\nconst p2 = fetch('/api/urunler');\nconst p3 = fetch('/api/kampanyalar');\n\nPromise.all([p1, p2, p3])\n .then(([kullanici, urunler, kampanyalar]) => {\n console.log(\"Hepsi geldi!\");\n })\n .catch(hata => {\n // Herhangi biri başarısız olursa burası çalışır\n });\nDikkat: Biri bile reject olursa, tümü başarısız sayılır.
\nHepsi bitsin, başarılı veya başarısız farketmez:
\nPromise.allSettled([p1, p2, p3])\n .then(sonuclar => {\n sonuclar.forEach(sonuc => {\n if (sonuc.status === 'fulfilled') {\n console.log('Başarılı:', sonuc.value);\n } else {\n console.log('Başarısız:', sonuc.reason);\n }\n });\n });\nHangisi önce biterse onun sonucunu al:
\nconst yavas = new Promise(resolve => setTimeout(() => resolve('Yavaş'), 2000));\nconst hizli = new Promise(resolve => setTimeout(() => resolve('Hızlı'), 500));\n\nPromise.race([yavas, hizli])\n .then(sonuc => console.log(sonuc)); // \"Hızlı\"\nTimeout mekanizması için kullanışlı:
\nconst timeout = new Promise((_, reject) =>\n setTimeout(() => reject(new Error('Zaman aşımı!')), 5000)\n);\n\nPromise.race([fetch('/api/veri'), timeout])\n .then(sonuc => console.log(sonuc))\n .catch(hata => console.error(hata)); // 5 saniyede cevap gelmezse hata\nrace'e benzer ama sadece başarılı olanları dikkate alır:
\nPromise.any([p1, p2, p3])\n .then(ilkBasarili => console.log(ilkBasarili));\nHepsi reject olursa AggregateError fırlatır.
ES2017 ile gelen async/await, Promise'leri senkron kod gibi yazmamızı sağlar.
\nasync function veriGetir() {\n const sonuc = await fetch('/api/kullanici');\n const veri = await sonuc.json();\n return veri;\n}\nawait kelimesi Promise'in resolve olmasını bekler. Ama sadece async fonksiyonların içinde kullanabilirsin.
Hatırla o korkunç piramidi:
\nasync function tumSurec() {\n const kullanici = await kullaniciyiGetir(1);\n const siparisler = await siparisleriGetir(kullanici.id);\n const detay = await siparisDetayGetir(siparisler[0].id);\n const odeme = await odemeGetir(detay.odemeId);\n const kargo = await kargoTakip(odeme.kargoNo);\n\n console.log(kargo);\n}\nSenkron kod gibi görünüyor ama asenkron çalışıyor. Güzel değil mi?
\nasync function veriGetir() {\n try {\n const sonuc = await fetch('/api/kullanici');\n const veri = await sonuc.json();\n return veri;\n } catch (hata) {\n console.error(\"Hata oluştu:\", hata);\n throw hata; // Hatayı yukarı fırlat\n }\n}\ntry/catch kullan. Bildiğin senkron hata yakalama gibi.
Dikkat! Bu yavaş:
\nasync function yavas() {\n const a = await islem1(); // 2 saniye\n const b = await islem2(); // 2 saniye\n // Toplam: 4 saniye\n}\nHer await bir öncekinin bitmesini bekliyor. Ama işlemler birbirinden bağımsızsa:
\nasync function hizli() {\n const [a, b] = await Promise.all([\n islem1(),\n islem2()\n ]);\n // Toplam: 2 saniye (paralel çalışır)\n}\nYa da şöyle:
\nasync function hizli2() {\n const p1 = islem1(); // Başlat\n const p2 = islem2(); // Başlat\n\n const a = await p1; // Bekle\n const b = await p2; // Bekle\n}\nconst veriGetir = async () => {\n const sonuc = await fetch('/api/veri');\n return sonuc.json();\n};\nTop-level await yoksa (eski Node.js veya browser):
\n(async () => {\n const veri = await veriGetir();\n console.log(veri);\n})();\nES2022 ve modern ortamlarda modül içinde direkt kullanabilirsin:
\n// module.js\nconst veri = await fetch('/api/veri');\nexport default veri;\nBir kullanıcı profil sayfası düşün:
\nasync function profilSayfasiniYukle(userId) {\n try {\n // Paralel istekler\n const [kullanici, gonderiler, takipciler] = await Promise.all([\n fetch(`/api/kullanici/${userId}`).then(r => r.json()),\n fetch(`/api/kullanici/${userId}/gonderiler`).then(r => r.json()),\n fetch(`/api/kullanici/${userId}/takipciler`).then(r => r.json())\n ]);\n\n return {\n kullanici,\n gonderiler,\n takipciler,\n yuklenmeTarihi: new Date()\n };\n } catch (hata) {\n console.error('Profil yüklenemedi:', hata);\n return null;\n }\n}\n\n// Kullanım\nconst profil = await profilSayfasiniYukle(123);\nif (profil) {\n renderProfil(profil);\n} else {\n gosterHataMesaji();\n}\n// YANLIŞ\nasync function hatali() {\n const veri = fetch('/api/veri'); // Promise döner, veri değil!\n console.log(veri); // Promise { <pending> }\n}\n\n// DOĞRU\nasync function dogru() {\n const response = await fetch('/api/veri');\n const veri = await response.json();\n console.log(veri);\n}\n// YANLIŞ - await çalışmaz!\nids.forEach(async (id) => {\n await islem(id);\n});\n\n// DOĞRU - for...of kullan\nfor (const id of ids) {\n await islem(id);\n}\n\n// VEYA - paralel çalıştır\nawait Promise.all(ids.map(id => islem(id)));\n// YANLIŞ - hata yakalanmaz\nasync function tehlikeli() {\n const veri = await fetch('/api/veri');\n return veri.json();\n}\ntehlikeli(); // Hata olursa? Unhandled rejection!\n\n// DOĞRU\ntehlikeli().catch(hata => console.error(hata));\n\n// VEYA\ntry {\n await tehlikeli();\n} catch (hata) {\n console.error(hata);\n}\n| Yöntem | \nNe Zaman | \n
|---|---|
| Callback | \nEvent listener'lar, basit tek seferlik işler | \n
| Promise | \nKütüphane yazıyorsan, zincirleme işlemler | \n
| Async/Await | \nÇoğu durumda (en okunabilir) | \n
| Promise.all | \nParalel bağımsız işlemler | \n
| Promise.race | \nTimeout, ilk cevap yeter senaryoları | \n
JavaScript'in asenkron yapısı başta kafa karıştırıcı olabilir. Ama mantığını kavradıktan sonra çok güçlü bir araç haline geliyor.
\nŞunu unutma:
\nGünümüzde async/await tercih ediliyor. Kod daha temiz, hata ayıklama daha kolay. Ama Promise'leri de iyi anla çünkü async/await'in altında Promise var.
\nPratik yap, gerçek projeler yaz. Bir süre sonra asenkron düşünmek doğal gelecek.
\nAsenkron JavaScript hakkında soruların varsa yorumlarda paylaş. Hep birlikte öğrenelim!
"},{"url":"/posts/javascript-click-fonsksiyonu-tetikleme/","relativePath":"posts/javascript-click-fonsksiyonu-tetikleme.md","relativeDir":"posts","base":"javascript-click-fonsksiyonu-tetikleme.md","name":"javascript-click-fonsksiyonu-tetikleme","frontmatter":{"title":"Javascript ile bir elementin click fonksiyonu nasıl tetiklenir?","subtitle":"JQuery kullanmadan pure javascript ile bir html elementinin tıklanması nasıl tetikleneceğini inceleyelim. ","date":"2023-01-13T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"sametsunman","template":"post","thumb_img_path":"images/javascript-click-trigger.jpg","content_img_path":"images/javascript-click-trigger.jpg"},"html":"Bu aslında JQuery ile oldukça basit.\nÖrneğin 'blah' id'li bir element aşağıdaki kod ile basitçe tetiklenebilir.
\n$('#blah').trigger('click');\nAncak, temel javascriptte bir kaç kod daha yazılmalı. Bu durumda aşağıdaki şekilde kullanabiliyoruz.
\nvar event = document.createEvent(\"Event\");\nevent.initEvent(\"click\", false, true);\nvar element = document.getElementById(\"blah\");\nelement.dispatchEvent(event);\nBurdana sonrası sizin hayal gücünüze bağlı, ister bunu bir fonksiyon içerisinde kullanın, isterseniz de modern ulaşamadığınız javascript kütüphaneleri için kullanın.
\nÖrneğin aşağıdaki örnekte ben, 'devextreme' kütüphanesindeki delete butonunu tetiklemek için kullandım:\n![](\"http://asnus.com/images/javascript-click-trigger.jpg\")
itemList adında json formatında bir nesnemiz olsun:
\nvar itemList = [{id:1,name:'samet'},{id:2,name:'ihsan'},{id:3,name:'şule'},{id:4,name:'alp'},]\nBu listeyi isme göre alfabetik sıraya dizmek için aşağıdaki fonksiyonu kullanabiliriz:
\n var newItemList = itemList.sort(this.compare);\n\n compare(a, b) {\n\n let comparison = 0;\n if (a.name > b.name) {\n comparison = 1;\n } else if (a.name < b.name) {\n comparison = -1;\n }\n return comparison;\n }\nYada ES6 kullanıyorsanız şu şekilde çok daha kısa şekilde yapabilirsiniz:
\n var newItemList = itemList.sort((a, b) => a.name.localeCompare(b.name);\n \nKibana'daki bir index'e ait bilgileri görmek istiyorsak aşağıdaki komutu Dev Tools sekmesinden konsola yazabiliriz.
\nGET /index_name/_stats\nEğer bir index'in altındaki belli bir aralıktaki kayıtları silmek istiyorsak da 'lt parametresine zaman aralığı vererek kayıtları silebiliriz. Aşağıdaki kayıtta bugünden itibaren son 1 ayın kayıtlarını silecek
\nDELETE /anlik_mail/\n{\n\"query\": {\n\"range\": {\n\"@timestamp\": {\n\"lt\": \"now-30d\"\n}\n}\n}\n}\n <canvas\n className=\"user-avatar rounded-circle mr-2\"\n id=\"canvas\"\n width=\"50\"\n height=\"50\"\n alt=\"User Avatar\"></canvas>\nHtml kodumuzu body kısmına ekleyelim
\n<script>\n //Adımızı tanımlıyoruz\n var name = 'Samet Sunman';\n //Adımızın başharfini ve soyadımızın başharfini buluyoruz\n var initial = name.charAt(0) + name.charAt(name.search(\" \") + 1);\n //Renk belirlemek için rastgele bir sayı belirliyoruz\n var color = Math.floor(Math.random() * 360);\n\n var canvas = document.getElementById(\"canvas\");\n var ctx = canvas.getContext(\"2d\");\n var radius = canvas.height / 2;\n\n ctx.translate(radius, radius);\n \n //Bir daire oluşturuyoruz\n ctx.beginPath();\n ctx.arc(0, 0, radius, 0, 2 * Math.PI);\n ctx.fillStyle = 'hsl(' + color + ', 100%, 30%)';\n ctx.fill();\n\n //Harfleri de dairenin üzerine ekliyoruz\n ctx.beginPath();\n ctx.font = \"25px Arial\";\n ctx.fillStyle = \"white\";\n ctx.textAlign = \"center\";\n ctx.fillText(initial, 0, 9);\n</script>\nİşte bu kadar, ismimizin baş harflerinden rasfele renklerden avatar yapmış olduk.
"},{"url":"/posts/linux'ta-initramfs-hatasi-nasil-duzeltilir/","relativePath":"posts/linux'ta-initramfs-hatasi-nasil-duzeltilir.md","relativeDir":"posts","base":"linux'ta-initramfs-hatasi-nasil-duzeltilir.md","name":"linux'ta-initramfs-hatasi-nasil-duzeltilir","frontmatter":{"title":"Linux'ta Initramfs Hatası Nasıl Düzeltilir?","author":"ihsansunman","subtitle":"Bu hata genelde disk üzerinde bir sorunla karşılaşıldığında bu hatayı ekranımızda görürüz. Sistem işlem anında kapandığında veya diskinizde bad sector gibi ciddi bir sorun oluştuğunda bu hatayı alırız.","date":"2019-12-19","thumb_img_alt":"","content_img_alt":"","excerpt":"Bu hata genelde disk üzerinde bir sorunla karşılaşıldığında bu hatayı ekranımızda görürüz. Sistem işlem anında kapandığında veya diskinizde bad sector gibi ciddi bir sorun oluştuğunda bu hatayı alırız. ","canonical_url":"","template":"post","thumb_img_path":"images/initramfs.jpg","content_img_path":"images/initramfs.jpg"},"html":"Öncelikle yanımızda Linux kurulum USB’si veya CD’si olması lazım çünkü sağlam çalışan bir linux gerekiyor. Linux’u USB üzerinden başlatalım. Daha sonrasında Uç Birimi açalım.
\nsudo fsck /dev/sda1 \nYukarıdaki komutu başlatalım. Sda1 bizim dosya sistemimizin neresi olduğunu belirtir. Eğer farklı bir konuma kurulum yaptıysanız sda1 kısmını kendinize göre lütfen düzeltiniz. Fsck kısmı dosya sistemimizin durumunu kontrol eden komuttur. Sorun olduğunda ise düzeltme sağlanır. Ancak sürekli bu hatayı alıyorsanız diskinizi kontrol ediniz. Çünkü bad sector olma olasılığı yüksek. Burada ise yeni bir disk almanızı tavsiye ediyorum.
"},{"url":"/posts/nedir-bu-react/","relativePath":"posts/nedir-bu-react.md","relativeDir":"posts","base":"nedir-bu-react.md","name":"nedir-bu-react","frontmatter":{"title":"React - Nedir Bu React?","subtitle":"React nedir sorusuna verilebilecek en kısa cevap \"Javascript Kütüphanesi\" olacaktır. Peki neden buna ihtiyaç duyduk? Neden kütüphane oluşturulması gerekti, bunları cevaplamamız gerekir.","date":"2022-04-15","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/react-1.png","content_img_path":"images/react-1.png"},"html":"Vanilla Javascript'te (console veya document çıktı sunan, JQuery gibi her hangi bir kütüphaneye sahip olmayan Javascript'in yalın halidir.) efor sarf ederek yaptığımız bir işlemi React ile daha az efor ve kod yapısı ile yapabiliriz.
\nJavascript imperative bir programlama dilidir. Yani her işlemi tek tek açıklamamız ve bildirmemiz gereken bir yapısı vardır. Örneğin bir H1 elementi oluşturalım ve bunu sayfamızın \"body\" kısmına ekleyelim.
\nconst siteHeader = document.createElement(\"h1\"); \nsiteHeader.innerHtml = \"Siteme Hoşgeldiniz\"; \ndocument.body.append(siteHeader);\nBurada Vanilla Javascript kullanarak öncelik olarak h1 elementi oluşturduk. İçerisine \"Siteme Hoşgeldiniz\" yazısını yazdırdık. Son olarak ise body kısmına bu elementimizi aktarmış olduk.
\nAynı işlemi declarative programlama kullanan react ile yaptığımızda ise sadece ne yapmak istediğimizi bildirmemiz yeterli olacaktır.
\nreturn(\n <h1>Siteme Hoşgeldiniz</h1>\n)\nGördüğünüz gibi XML yapısı gibi sadece tagleme yaparak react kütüphanesine h1 elementi içerisine yazı yazdırmak istediğimizi bildirdik. Daha az kod ile aynı çıktıyı almış olduk.
\nBurada dikkat etmemiz gereken unsur ise return dönerken wrapper element kullanmamız gerektiği olacaktır. Tek çıktı yapması sebebi ile return içerisinde tek bir element olmalı. Diğer elementler bu elemente dahil olmalıdır.
\nreturn(\n <div>Hello</div>\n <div>React</div>\n)\nBu şekilde olduğunda iki farklı element olduğundan hata alırız. Ancak bu iki elementi tek bir element içerisinde döndürdüğümüzde hata almadan çıktımızı görürüz.
\nreturn(\n <div>\n <div>Hello</div>\n <div>React</div>\n </div>\n)\nİnternetten araşttırdığımda ise aşağıdaki yöntemi buldum.
\nSorunumuz .Net Core'un Web API tarafında varsayılan olarak yalnızca GET, POST, OPTIONS ve HEAD isteklerine izin vermesinden kaynaklı. PUT ve DELETE’e izin vermek için, IIS'te Web.Config dosyasından aşağıdaki gibi WebDAV işleyicisini ve modülünü istek kanalından kaldırmanız gerekiyor. Böylece servislerimiz sorunsuzca çalışıyor
\n<system.webServer>\n .\n .\n \n <handlers>\n <remove name=\"WebDAV\" />\n </handlers>\n \n <modules runAllManagedModulesForAllRequests=\"true\">\n <remove name=\"WebDAVModule\"/>\n </modules>\n \n .\n .\n</system.webServer>\nWorker servisleri, .NET Core 3 tarafından sunulan yeni bir şablon. Şimdi, .NET Core 3 Worker hizmetini ve Coravel'i birleştirerek bir zamanlayıcı job'ını nasıl uygulanacağını görelim .
\nWorker Servisi nedir?\nWorker Servisi, e-posta gönderme, sms gönderme, olay yayını, belirli bir zamanda bazı verileri tetikleme, maaş hesaplaması vb. gibi fonksiyonları arkaplanda gerçekleşterebilir.
\nBir örnekle anlayalım:
\nÖnkoşul\n.NET Core 3 SDK'yı resmi Microsoft sitesinden indirin.
\nYeni bir klasör oluşturma\nBu klasörde aşağıdaki komutu çalıştırın. Bu worker servisinin bir şablonu kullanarak örnek bir konsol uygulaması oluşturur.
\ndotnet new worker \n![\"images/netcore-worker.png\"](\"/images/netcore-worker.png\")
Projeyi Visual Studio'da açalım. Progam.cs dosyası aşağıdaki gibi görünecek.
\nusing System; \nusing System.Collections.Generic; \nusing System.Linq; \nusing System.Threading.Tasks; \nusing Microsoft.Extensions.DependencyInjection; \nusing Microsoft.Extensions.Hosting; \n \nnamespace CoreWorkerServiceSchedularJob \n{ \n public class Program \n { \n public static void Main(string[] args) \n { \n CreateHostBuilder(args).Build().Run(); \n } \n \n public static IHostBuilder CreateHostBuilder(string[] args) => \n Host.CreateDefaultBuilder(args) \n .ConfigureServices((hostContext, services) => \n { \n services.AddHostedService<Worker>(); \n }); \n } \n} \nCoravel'i yapılandırılması
\nNuGet Package konsolunda aşağıdaki komutu çalıştırın.
\ndotnet add package coravel \nInvocable uygulama
\n\"Job çalıştırıldı....... !!!\" gibi bir metni yazdığımız sınıfımıza (CoreWorkerServiceSchedularJob.cs) ekleyelim.
\nusing Coravel.Invocable; \nusing System; \nusing System.Collections.Generic; \nusing System.Text; \nusing System.Threading.Tasks; \n \nnamespace CoreWorkerServiceSchedularJob \n{ \n class MyFirstJob : IInvocable \n { \n public Task Invoke() \n { \n Console.WriteLine(\"Job çalıştırıldı.......!!!\" + DateTime.Now.ToString()); \n return Task.CompletedTask; \n } \n } \n} \nJob'ı kaydetme ve zamanı belirtme
\nŞimdi işimizi .NET Core'un service container'ına kaydedelim ve beş saniye için zamanı belirleyelim. İsterseniz başka bir sıklık belirtebilir yada spesifik bir zaman belirleyebilirsiniz. Program.cs dosyasının son kodu aşağıdaki gibidir.
\nusing System; \nusing System.Collections.Generic; \nusing System.Linq; \nusing System.Threading.Tasks; \nusing Coravel; \nusing Microsoft.Extensions.DependencyInjection; \nusing Microsoft.Extensions.Hosting; \n \nnamespace CoreWorkerServiceSchedularJob \n{ \n public class Program \n { \n public static void Main(string[] args) \n { \n IHost host = CreateHostBuilder(args).Build(); \n host.Services.UseScheduler(scheduler => { \n \n // Remind schedular to repeat the same job in every five-second \n scheduler \n .Schedule<MyFirstJob>() \n .EveryFiveSeconds(); \n \n \n }); \n host.Run(); \n } \n \n public static IHostBuilder CreateHostBuilder(string[] args) => \n Host.CreateDefaultBuilder(args) \n .ConfigureServices(services => \n { \n services.AddScheduler(); \n \n // register job with container \n services.AddTransient<MyFirstJob>(); \n }); \n }; \n} \nUygulamayı çalıştırma zamanı
\nUygulamanın çıktısına bakalım.
\n![\"images/coravel.png\"](\"/images/coravel.png\")
.NET Core 3 ve Worker hizmeti şablonu ve Coravel paketinin bir kombinasyonuyla sadece 5 dakikalık sürede bir zamanlayıcı görevi oluşturmuş olduk.
\nKolay gelsin!
"},{"url":"/posts/netcore-projesi-nginx-sunucu-uzerinde-nasil-yayinlanir/","relativePath":"posts/netcore-projesi-nginx-sunucu-uzerinde-nasil-yayinlanir.md","relativeDir":"posts","base":"netcore-projesi-nginx-sunucu-uzerinde-nasil-yayinlanir.md","name":"netcore-projesi-nginx-sunucu-uzerinde-nasil-yayinlanir","frontmatter":{"title":".NET Core Projesi Ubuntu Nginx Sunucu Üzerinde Nasıl Yayınlanır?","author":"sametsunman","featured":true,"subtitle":"Merhaba arkadaşlar. Bu yazımda başlıktan da anlaşıldığı gibi Asp.Net ile kodladığımız bir projeyi web ortamında yayınlayıp kullanılabilir hale getirme konusuna değineceğim. Bildiğiniz gibi web uygulamalarını tamamladığımız zaman internet ortamına o haliyle yükleyemeyiz. Web ortamında çalışabilecek hale getirmek için projelerimizi publish etmemiz gerekir. Hadi nasıl yapıldığına bakalım.","date":"2019-09-23","thumb_img_alt":"netcore-linux-nginx","content_img_alt":"netcore-linux-nginx","excerpt":"Merhaba arkadaşlar. Bu yazımda başlıktan da anlaşıldığı gibi Asp.Net ile kodladığımız bir projeyi web ortamında yayınlayıp kullanılabilir hale getirme konusuna değineceğim. Bildiğiniz gibi web uygulamalarını tamamladığımız zaman internet ortamına o haliyle yükleyemeyiz. Web ortamında çalışabilecek hale getirmek için projelerimizi publish etmemiz gerekir. Hadi nasıl yapıldığına bakalım.","canonical_url":"denmeee","template":"post","thumb_img_path":"images/cover.svg","content_img_path":"images/cover.svg"},"html":"İlk önce terminal üzerinden .NET Core sdk'sını ve runtime'ını kuralım:
\nwget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb\nsudo dpkg -i packages-microsoft-prod.deb\nsudo add-apt-repository universe\nsudo apt-get install apt-transport-https\nsudo apt-get update\nsudo apt-get install dotnet-sdk-2.2\nsudo apt-get install aspnetcore-runtime-2.2\nŞimdi ise projemizi yayınlayalım:
\ndotnet publish --configuration Release\nProjemizin dosyaları şu dizinde bulunacak, \"bin/Release/<framework_adi>/Publish\"
\nUygulamayı test edelim:
\nKomut satırından uygulamayı çalıştırın: dotnet <uygulama_adi>.dll.\nBir tarayıcıda, uygulamanın Linux üzerinde varsayılan olarak http://localhost:5000 adresinde çalışıyor olmalı.
\nNginx'i kuralım:
\nsudo apt-get install nginx\nsudo service nginx start\nsudo service nginx status\nVe config dosyalarını düzeltelim:
\nsudo nano /etc/nginx/sites-available/default\naşağıdaki şekilde düzeltelim:
\nserver \n{\n listen 81; \n location / \n { \n proxy_pass http://localhost:5000;\n proxy_http_version 1.1;\n proxy_set_header Upgrade $http_upgrade;\n proxy_set_header Connection keep-alive;\n proxy_set_header Host $host;\n proxy_cache_bypass $http_upgrade;\n }\n}\nYaptığımız değişiklikleri kaydedelim:
\nsudo nginx -t\nsudo nginx -s reload\nNginx'in yazılacak WebAPI servisi özelinde ilgili Kestrel Process'ini ayağa kaldıracağını bilmesi gerekiyor. IIS'in Worker Process çalışma modeline benzer bir yaklaşım olarak düşünelim. Bunun için service uzantılı bir dosya yazmak lazım.
\nsudo gedit /etc/systemd/system/kestrel-<proje-adi>.service\nŞu şekilde dosyayı düzenleyelim:
\n[Unit]\nDescription=BaseWebAPI(Standard Asp.Net Web API 2.0 project) on NGinx\n \n[Service]\nWorkingDirectory=/var/www/<Proje-Klasörü>\nExecStart=/usr/bin/dotnet/ /var/www/<Proje-Klasörü>/<Proje-Adi>.dll\nRestart=always\nRestartSec=30\nSyslogIdentifier=dotnet-<Proje-Adi>\nUser=www-data\nEnvironment=ASPNETCORE_ENVIRONMENT=Production\nEnvironment=DOTNET_PRINT_TELEMETRY_MESSAGE=false\n \n[Install]\nWantedBy=multi-user.target\nVe son olarak servislerimizi çalıştıralım:
\nsudo systemctl enable kestrel-baseapi.service\nsudo systemctl start kestrel-baseapi.service\nBu da nginx'i yeniden çalıştırıyor:
\nsudo service nginx restart\nİşte bu kadar, sitemiz yayında :)
"},{"url":"/posts/nextjs-modern-web-gelistirme/","relativePath":"posts/nextjs-modern-web-gelistirme.md","relativeDir":"posts","base":"nextjs-modern-web-gelistirme.md","name":"nextjs-modern-web-gelistirme","frontmatter":{"title":"Next.js: Modern Web Geliştirmenin Olmazsa Olmazı","author":"sametsunman","subtitle":"React biliyorsun ama production'a çıkınca SEO, performans, routing derken kafan karışıyor mu? Next.js tam da bu sorunları çözmek için var. Gelin Next.js 15 ile neler değişti, neler yapabiliyoruz birlikte bakalım.","date":"2025-12-01","thumb_img_alt":"nextjs","content_img_alt":"nextjs","excerpt":"React biliyorsun ama production'a çıkınca SEO, performans, routing derken kafan karışıyor mu? Next.js tam da bu sorunları çözmek için var. Gelin Next.js 15 ile neler değişti, neler yapabiliyoruz birlikte bakalım.","canonical_url":"","template":"post","thumb_img_path":"images/next_js.jpg","content_img_path":"images/next_js.jpg"},"html":"React harika bir kütüphane. Component mantığı, state yönetimi, hooks... Ama bir noktada fark ediyorsun ki sadece React yetmiyor. SEO için server-side rendering lazım, routing için kütüphane lazım, API yazmak için backend lazım, build optimizasyonu lazım...
\nİşte Next.js burada devreye giriyor. Vercel'in geliştirdiği bu framework, React'in üzerine production-ready özellikler ekliyor. Ve Next.js 15 ile işler daha da kolaylaştı.
\nNext.js, React tabanlı bir full-stack web framework'ü. Şunları kutudan çıkar çıkmaz veriyor:
\nNext.js 15, React 19 ile tam uyumlu. Bu demek oluyor ki:
\nuseMemo ve useCallback ile uğraşmana gerek yok. Compiler otomatik optimize ediyor.Development server'ı artık Turbopack ile çalışıyor. Ne demek bu?
\nnext dev --turbo\nWebpack'e elveda!
\nheaders, cookies, params ve searchParams artık asenkron:
// Eskiden\nexport default function Page({ params }) {\n const { id } = params;\n}\n\n// Next.js 15'te\nexport default async function Page({ params }) {\n const { id } = await params;\n}\nNeden mi? Daha iyi performans ve streaming desteği için.
\nNext.js 15'te caching varsayılan olarak kapalı. Bu önemli bir değişiklik:
\n// Artık her seferinde fresh data çeker\nconst res = await fetch('https://api.example.com/data');\n\n// Cache istiyorsan belirt\nconst res = await fetch('https://api.example.com/data', {\n cache: 'force-cache'\n});\nGET route handler'ları da artık varsayılan olarak cache'lenmiyor.
Sayfanın statik ve dinamik kısımlarını ayırabiliyorsun:
\n// layout.js\nexport const experimental_ppr = true;\nStatik kısımlar anında yüklenir, dinamik kısımlar streaming ile gelir. En iyi iki dünyanın birleşimi!
\nNext.js'te iki routing sistemi var. Yeni projelerde App Router kullan.
\napp/\n├── page.js → /\n├── about/\n│ └── page.js → /about\n├── blog/\n│ ├── page.js → /blog\n│ └── [slug]/\n│ └── page.js → /blog/:slug\n└── layout.js → Tüm sayfalara uygulanır\npage.js - Sayfa component'ilayout.js - Paylaşılan layoutloading.js - Loading UI (otomatik Suspense)error.js - Error boundarynot-found.js - 404 sayfasıNext.js 15'te varsayılan olarak tüm component'ler Server Component.
\n// Bu server'da çalışır (varsayılan)\nasync function KullaniciListesi() {\n const kullanicilar = await db.kullanici.findMany();\n\n return (\n <ul>\n {kullanicilar.map(k => <li key={k.id}>{k.isim}</li>)}\n </ul>\n );\n}\nAvantajları:
\n'use client'; // Bu satır şart!\n\nimport { useState } from 'react';\n\nfunction Sayac() {\n const [sayi, setSayi] = useState(0);\n\n return (\n <button onClick={() => setSayi(sayi + 1)}>\n Tıklama: {sayi}\n </button>\n );\n}\nNe zaman Client Component kullanmalı?
\nuseState, useEffect gibi hook'laronClick, onChange...)window, localStorage...)async function Blog() {\n // Direkt async/await kullan\n const posts = await fetch('https://api.example.com/posts')\n .then(res => res.json());\n\n return (\n <ul>\n {posts.map(post => <li key={post.id}>{post.title}</li>)}\n </ul>\n );\n}\n// Her istekte fresh data\nfetch(url, { cache: 'no-store' });\n\n// Cache'le (varsayılan değil artık!)\nfetch(url, { cache: 'force-cache' });\n\n// Belirli süre cache'le\nfetch(url, { next: { revalidate: 3600 } }); // 1 saat\n// Sayfa seviyesinde\nexport const revalidate = 60; // 60 saniyede bir yenile\n\n// On-demand revalidation\nimport { revalidatePath, revalidateTag } from 'next/cache';\n\nrevalidatePath('/blog');\nrevalidateTag('posts');\nForm işlemleri artık çok kolay. API route yazmana gerek yok!
\n// actions.js\n'use server';\n\nexport async function kullaniciEkle(formData) {\n const isim = formData.get('isim');\n const email = formData.get('email');\n\n await db.kullanici.create({\n data: { isim, email }\n });\n\n revalidatePath('/kullanicilar');\n}\n// page.js\nimport { kullaniciEkle } from './actions';\n\nexport default function KullaniciFormu() {\n return (\n <form action={kullaniciEkle}>\n <input name=\"isim\" placeholder=\"İsim\" />\n <input name=\"email\" placeholder=\"E-posta\" />\n <button type=\"submit\">Ekle</button>\n </form>\n );\n}\nJavaScript disable olsa bile çalışır!
\n'use client';\nimport { useFormStatus } from 'react-dom';\n\nfunction GonderButonu() {\n const { pending } = useFormStatus();\n\n return (\n <button disabled={pending}>\n {pending ? 'Gönderiliyor...' : 'Gönder'}\n </button>\n );\n}\n'use client';\nimport { useActionState } from 'react';\nimport { girisYap } from './actions';\n\nfunction GirisFormu() {\n const [state, action, pending] = useActionState(girisYap, null);\n\n return (\n <form action={action}>\n <input name=\"email\" />\n <input name=\"sifre\" type=\"password\" />\n {state?.hata && <p className=\"error\">{state.hata}</p>}\n <button disabled={pending}>Giriş Yap</button>\n </form>\n );\n}\n// Statik metadata\nexport const metadata = {\n title: 'Sayfa Başlığı',\n description: 'Sayfa açıklaması',\n openGraph: {\n title: 'OG Başlık',\n description: 'OG Açıklama',\n images: ['/og-image.jpg'],\n },\n};\n\n// Dinamik metadata\nexport async function generateMetadata({ params }) {\n const post = await getPost(params.slug);\n\n return {\n title: post.title,\n description: post.excerpt,\n };\n}\nimport Image from 'next/image';\n\nfunction Profil() {\n return (\n <Image\n src=\"/profil.jpg\"\n alt=\"Profil fotoğrafı\"\n width={300}\n height={300}\n priority // LCP için önemli görsellerde\n placeholder=\"blur\" // Lazy loading sırasında blur efekti\n />\n );\n}\nNext.js otomatik olarak:
\n// app/api/kullanicilar/route.js\nimport { NextResponse } from 'next/server';\n\nexport async function GET() {\n const kullanicilar = await db.kullanici.findMany();\n return NextResponse.json(kullanicilar);\n}\n\nexport async function POST(request) {\n const body = await request.json();\n const yeniKullanici = await db.kullanici.create({ data: body });\n return NextResponse.json(yeniKullanici, { status: 201 });\n}\n// app/api/kullanicilar/[id]/route.js\nexport async function GET(request, { params }) {\n const { id } = await params;\n const kullanici = await db.kullanici.findUnique({ where: { id } });\n\n if (!kullanici) {\n return NextResponse.json({ error: 'Bulunamadı' }, { status: 404 });\n }\n\n return NextResponse.json(kullanici);\n}\nHer request'te çalışan kod:
\n// middleware.js (root'ta)\nimport { NextResponse } from 'next/server';\n\nexport function middleware(request) {\n // Auth kontrolü\n const token = request.cookies.get('token');\n\n if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {\n return NextResponse.redirect(new URL('/giris', request.url));\n }\n\n return NextResponse.next();\n}\n\nexport const config = {\n matcher: ['/dashboard/:path*', '/profil/:path*']\n};\napp/\n├── (auth)/\n│ ├── giris/\n│ │ └── page.js\n│ └── kayit/\n│ └── page.js\n├── (main)/\n│ ├── layout.js\n│ ├── page.js\n│ └── blog/\n│ └── page.js\n├── api/\n│ └── kullanicilar/\n│ └── route.js\n├── layout.js\n└── globals.css\n\ncomponents/\n├── ui/\n│ ├── Button.js\n│ └── Input.js\n└── Header.js\n\nlib/\n├── db.js\n└── utils.js\n\nactions/\n└── kullanici.js\nParantez içindeki klasörler ((auth), (main)) route group. URL'de görünmez, sadece organizasyon için.
Vercel'e deploy etmek çok kolay:
\nnpm i -g vercel\nvercel\nYa da GitHub'a push et, Vercel otomatik deploy eder.
\nSelf-host için:
\nnpm run build\nnpm start\nDocker ile:
\nFROM node:20-alpine\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nRUN npm run build\nEXPOSE 3000\nCMD [\"npm\", \"start\"]\nimport dynamic from 'next/dynamic';\n\nconst HeavyComponent = dynamic(() => import('./HeavyComponent'), {\n loading: () => <p>Yükleniyor...</p>\n});\nnext/font ileimport { Inter } from 'next/font/google';\n\nconst inter = Inter({ subsets: ['latin'] });\n\nexport default function Layout({ children }) {\n return (\n <html className={inter.className}>\n <body>{children}</body>\n </html>\n );\n}\nnpm i @next/bundle-analyzer\nNext.js, React ekosisteminin en güçlü framework'ü. Vercel'in arkasında olması, sürekli gelişim ve mükemmel dokümantasyon ile production-ready uygulamalar yapmak hiç bu kadar kolay olmamıştı.
\nNext.js 15 ile gelen React 19 desteği, Turbopack, ve geliştirilmiş caching mekanizmaları framework'ü daha da güçlü kıldı.
\nYeni bir proje başlıyorsan, Next.js'i kesinlikle değerlendir. Öğrenme eğrisi React biliyorsan çok düşük, kazanımlar ise çok yüksek.
\nNext.js hakkında sorularınız varsa yorumlarda paylaşın. Birlikte öğrenelim!
"},{"url":"/posts/otomatik-klavye-ve-mouse-kontrolu/","relativePath":"posts/otomatik-klavye-ve-mouse-kontrolu.md","relativeDir":"posts","base":"otomatik-klavye-ve-mouse-kontrolu.md","name":"otomatik-klavye-ve-mouse-kontrolu","frontmatter":{"title":"Bilgisayarınızı uyanık tutun. Mouse otomatik olarak nasıl hareket ettirilir? Klavye tuşuna nasıl otomatik bastırılır?","subtitle":"Bazı durumlarda bilgisayarımız uyku moduna geçmemesi için klavyeden tuşa basmalı ya da mouse'u hareket ettirmeliyiz. Uykuya geçme süresini bilgisayar ayarlarından değiştirebiliriz. Peki ya değiştiremediğimiz durumlarda ne yapabiliriz? ","date":"2022-11-11T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"sametsunman","template":"post","thumb_img_path":"images/mouse-and-keyboard.jpg","content_img_path":"images/mouse-and-keyboard.jpg"},"html":"1. Yazılım yolu ile fare ve klavye hareketlerini kaydetme
\nEn basit ve en güzel yöntemlerden biri budur. Bilgisayarınıza kurduğunuz programlarla, mouse'unuzu ya da klavye'nizi programlayabilirsiniz.\n\nÖrnek olarak;
\n![](\"https://www.gezginler.net/indir/resim-grafik/t_automouser-1405699871.jpg\")
Klavye ve Fare Otomatik Tıklama Programı ile ister farenizin isterse klavyenizin belirlediğiniz tuşları veya hareketleri otomatik olarak istediğiniz zamanda ve istediğiniz tekrarda yapmasını sağlayabilirsiniz.\n\n
\n![](\"https://www.gezginler.net/indir/resim-grafik/t_ghost-mouse-1400243050.jpg\")
Küçük boyutu ve basit arayüzüyle kullanım kolaylığı sunan Ghost Mouse oyun ve çeşitli programlarda gerçekleştirmeniz gereken mouse hareketlerini otomatik hale getirerek zaman ve enerji tasarrufu sağlar.\n\n\n\n\n2. Script ile
\nBilgisayarda basitçe oluşturacağımız kod satırlarıyla da otomatik olarak klavyedeki belirli süre içersinde otomatik olarak tuşlara bastırabiliriz.
\n1.Yol
\nHemen bir not defteri açıp aşağıdaki kodları yazın:
\n`\nset wsc = CreateObject(\"WScript.Shell\")\nDo\n WScript.Sleep(5*60*1000)\n wsc.SendKeys(\"{F13}\")\nLoop\n`\nDaha sonrasında ise bu belgeyi farklı kaydederek noSleep.vbs adıyla kaydedin. Kaydettiğiniz dosyayı açtığınızda 5 dakikada bir klavyemizde gizli olan F13 tuşuna basılacak. Böylece bilgisayarımız uyku moduna girmeyecektir. Dilerseniz F13 yerine NUMLOCK yada diğer tuş kombinasyonlarını yazabilirsiniz. Yine aynı şekilde sayılarla oynayarak süreyi düşürebilir ya da arttırabilirsiniz.
\n2.Yol
\nBence en güzel ve en işe yarayan yöntem bu. Çünkü herhangi bir admin yetkisi istemiyor.
\nBir not defterinde aşağıdaki kod satırlarını yazın.
\n`\n $MYJOB = Start-Job -ScriptBlock {\n $MOVEMENTSIZE = 10\n $SLEEPTIME = 60\n\n Add-Type -AssemblyName System.Windows.Forms\n while ($true) { \n $POSITION = [windows.Forms.Cursor]::Position\n $POSITION.x += $MOVEMENTSIZE\n $POSITION.y += $MOVEMENTSIZE\n [windows.Forms.Cursor]::Position = $POSITION\n Start-Sleep -Seconds $SLEEPTIME\n $POSITION = [windows.Forms.Cursor]::Position\n $POSITION.x -= $MOVEMENTSIZE\n $POSITION.y -= $MOVEMENTSIZE\n [Windows.Forms.Cursor]::Position = $POSITION\n Start-Sleep -Seconds $SLEEPTIME\n [windows.Forms.SendKeys]::Sendwait('[F13}')\n }\n }\n`\n![](\"https://asnus.com/images/noSleep2.png\")
\n\nBu kodları noSleep.ps1 adıyla kaydedebilirsiniz. Sonrasında kaydedilen dosyaya sağ tıklayarak düzenleye basın. Dosya PowerShell ISE'de açılacaktır. Run tuşuna basarak komutlarımız çalışmaya başlayacaktır. Burada yapılan işlemler 60 snde bir mouse'u hareket ettirmek ve klavyede F13 tuşuna basmaktır. Dilerseniz süreyi ve tuşu ayarlayabilirsiniz.\n\n3. Video yardımıyla
Bir diğer yöntemiz ise video oynatmak. Evet, böyle bir yöntem mevcut. Yukarıdaki durumlar işe yaramadığında, örneğin bilgisayarınıza yazılım kurma izniniz yoksa bu yöntemi deneyebilirsiniz.\n\n![](\"https://i.ytimg.com/vi/v4bav9V9Bi8/maxresdefault.jpg\")
\n\nKullanımı ise gayet basit. Aşağıdaki videoları tabletinizde ya da telefonunuzda açın. Daha sonrasında ise üzerine mouse'unuzu yerleştirin. İşte bu kadar!\n
Tabi bu yöntem maalesef her mouse ile çalışmayabilir. Size tavsiyem kırmızı ışıklı mouse ile denemeniz.
\n4. Araç yardımıyla
\nBu yöntem video yöntemine benziyor. Satın alacağınız bir alet ile mouse'unuzu hareket ettirebilirsiniz.
\n\nÜlkemizde satışına rastlamadım. Ancak Aliexpress ya da Amazon üzerinden kolaylıkla sipariş edebilirsiniz.
\nHadi sağlıcakla!
"},{"url":"/posts/production-modda-react-sayfa-yenilerken-404-not-found-sorunu/","relativePath":"posts/production-modda-react-sayfa-yenilerken-404-not-found-sorunu.md","relativeDir":"posts","base":"production-modda-react-sayfa-yenilerken-404-not-found-sorunu.md","name":"production-modda-react-sayfa-yenilerken-404-not-found-sorunu","frontmatter":{"title":"Production Mod'da React Sayfa Yenilerken 404 Not Found Sorunu","author":"sametsunman","subtitle":"React uygulamanızı development mod'da çalıştırırken sorun yok ancak production mod'da yani server'a deploy ettiğinizde sayfayı yenilediğinizde yada yeni sekmede açtığınızda sayfa bulunamadı hatası alıyorsanız çözümü burada.","date":"2020-02-21","thumb_img_alt":"404-not-found","content_img_alt":"404-not-found","excerpt":"React uygulamanızı development mod'da çalıştırırken sorun yok ancak production mod'da yani server'a deploy ettiğinizde sayfayı yenilediğinizde yada yeni sekmede açtığınızda sayfa bulunamadı hatası alıyorsanız çözümü burada.","canonical_url":"","template":"post","content_img_path":"images/404-not-found.png","thumb_img_path":"images/royal-owl.png"},"html":"Sunucunuzun config ayarlarını hangisini kullanıyorsanız aşağıdaki şekilde güncelleyin. Bu şekilde sayfalarınız doğru şekilde yönlendirilecek.
\nExpress
\n![](\"https://c1.neweggimages.com/ProductImageCompressAll1280/ASSAD2204050E15URF6.jpg\"){kind=link}
app.get('/*', function(req, res) {\n res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {\n if (err) {\n res.status(500).send(err)\n }\n })\n})\nAppache (.htaccess)
\nRewriteBase /\nRewriteRule ^index\\.html$ - [L]\n RewriteCond %{REQUEST_FILENAME} !-f\n RewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule . /index.html [L]\nNginx (.conf)
\nlocation / {\n if (!-e $request_filename){\n rewrite ^(.*)$ /index.html break;\n }\n}\nIIS (web.config)
\n<configuration>\n <system.webServer>\n<rewrite>\n <rules>\n <rule name=\"Rule1\" stopProcessing=\"true\">\n <match url=\"^index\\.html$\" ignoreCase=\"false\" />\n <action type=\"None\" />\n </rule>\n <rule name=\"Imported Rule 2\" stopProcessing=\"true\">\n <match url=\".\" ignoreCase=\"false\" />\n <conditions>\n <add input=\"{REQUEST_FILENAME}\" matchType=\"IsFile\" ignoreCase=\"false\" negate=\"true\" />\n <add input=\"{REQUEST_FILENAME}\" matchType=\"IsDirectory\" ignoreCase=\"false\" negate=\"true\" />\n </conditions>\n <action type=\"Rewrite\" url=\"/index.html\" />\n </rule>\n </rules>\n</rewrite>\n </system.webServer>\n</configuration>\nMerhaba sevgili hayvan dostları!
\nBugün sizlerle çok özel bir şey paylaşmak istiyorum. Bu proje, sadece aylardır üzerinde çalıştığımız bir kod yığını değil; aynı zamanda hayatıma yön veren küçük dostum, kedim Mia'nın bana fısıldadığı bir hayalin ürünü. Uykusuz geceler geçirdiğimiz, bazen sinir olup bazen de \"vay be, bunu biz mi yaptık?\" dediğimiz projemiz PetGuru sonunda hazır!
\nYıllarca kurumsal dünyanın karmaşasında, kodlar ve teslim tarihleri arasında koşturdum. İşimi seviyordum, evet. Ama akşam eve döndüğümde, Mia'nın o sessiz ama derin karşılamasıyla yüzleştiğimde, içimde hep aynı ses yankılanıyordu: \"Daha fazlasını yapabilirsin. İçinde kalp atışı olan bir şeye dokunabilirsin.\"
\nPetGuru, işte bu sese kulak vermemle başladı. Ve geçen yıl mahallemizdeki bir kedi kaybolduğunda, bu kişisel vizyon bir eylem planına dönüştü. Sahipleri çaresizce her yere ilan astı, sosyal medyada paylaştı ama düzgün bir platform yoktu. İlanlar kaynıyor, bilgiler dağınık, iletişim zordu. O an dedik ki: \"Bu iş böyle olmaz. Evcil hayvan sahiplerinin tek bir yerden her şeyi yapabilecekleri bir platform lazım.\"
\nVe işte PetGuru böyle doğdu; Mia'dan gelen ilhamla, tüm can dostlarımızın hayatını kolaylaştırmak için.
\nDur dur, hepsini anlatayım çünkü gerçekten gurur duyuyoruz:
\nEvcil hayvanınız kaybolduğunda panik yaparsınız, biliyoruz. PetGuru'da saniyeler içinde kayıp ilanı oluşturabilir, harita üzerinde son görüldüğü yeri işaretleyebilir ve çevredeki hayvanseverlere anında ulaşabilirsiniz. Bulanlar da aynı şekilde \"buldum\" ilanı açabiliyor.
\nBarınaklarda, sokaklarda yüzlerce can yuva bekliyor. PetGuru ile sahiplendirme ilanları oluşturabilir, filtreleyebilir ve o tatlı gözlere bakıp \"tamam, sen benimsin\" diyebilirsiniz. Her sahiplendirme ilanının arkasında bir umut var.
\nEvet, Tinder ama evcil hayvanlar için! Kedinize ya da köpeğinize uygun eş mi arıyorsunuz? Eşleştirme sayfasında ırk, yaş, lokasyon filtreleriyle en uygun adayları bulun. Kim bilir, belki de en tatlı yavrular bu eşleşmelerden doğacak.
\nAşı tarihleri, veteriner ziyaretleri, ilaçlar, kilo takibi... Hepsini tek yerden yönetin. Hatırlatmalar sayesinde hiçbir aşıyı kaçırmayın. Sağlık geçmişi her zaman elinizin altında.
\n\"Kedim neden sürekli miyavlıyor?\", \"Köpeğim çimenleri yiyor normal mi?\"... Bu soruları hepimiz sorduk. Forum'da deneyimli hayvan sahipleriyle sohbet edin, blog yazılarından faydalı bilgiler edinin.
\nMama, oyuncak, tasma, kum... Evcil dostlarınız için gereken her şey mağazamızda. (Yakında!)
\nSahiplendirme ya da eşleştirme ilanlarında birini beğendiniz mi? Doğrudan mesaj atın, tanışın, konuşun.
\nHer evcil hayvan için benzersiz QR kod! Tasmasına takın, birisi bulduğunda QR'ı okutup size doğrudan ulaşsın. Süper değil mi?
\nTamam, biraz teknik konuşalım çünkü arkada ciddi bir mühendislik var:
\nWeb Tarafı:
\nMobil Tarafı:
\nBackend:
\nOrtak Silahlarımız:
\n3 Dil Desteği:\nTürkçe, İngilizce ve İspanyolca! Çünkü hayvan sevgisi evrensel.
\nProjemiz Yarn Workspaces ile monorepo yapısında:
\npetguru-app/\n├── apps/\n│ ├── expo/ → Mobil uygulama\n│ ├── next/ → Web uygulaması\n│ └── functions/ → Firebase Cloud Functions\n├── packages/\n│ ├── app/ → Paylaşılan mantık (hooks, store, i18n)\n│ ├── firebase/ → Firebase servisleri\n│ └── types/ → TypeScript tipleri\nWeb ve mobil aynı kodu paylaşıyor. Bir yerde değişiklik yapınca her yere yansıyor. DRY (Don't Repeat Yourself) prensibinin kitabını yazdık resmen.
\nBu projeyi yaparken neler yaşamadık ki:
\nAma her şeye değdi. Çünkü şimdi elimizde hayvanseverlerin hayatını kolaylaştıracak, içinde bir kalp atışı olan bir uygulama var.
\nPetGuru artık canlı ve sizi bekliyor:
\nBu uygulama sadece bir kod yığını değil. Her satırında hayvan sevgisi, her özelliğinde \"keşke olsa\" düşüncesi var. Kayıp bir kediyi sahibine kavuşturmak, barınaktaki bir köpeğe yuva bulmak, hasta bir evcil hayvanın aşısını unutmamak... Bunların hepsi PetGuru ile artık çok daha kolay.
\nPetGuru, Mia'ya ve tüm can dostlarına yazdığımız bir sevgi mektubudur. Evcil dostlarınız için en iyisini hak ediyor. Biz de onlar için en iyisini yapmaya çalıştık.
\nPetGuru - Patili dostlarınız için her şey tek yerde.
\nSevgilerle,\nPetGuru Ekibi (ve Projenin Baş İlham Kaynağı Mia!)
\nP.S: Bir bug bulursanız kızmayın, bize söyleyin düzeltelim. Bir öneriniz varsa mutlaka yazın. Bu uygulama sizin için, sizinle birlikte büyüyecek.
\n"},{"url":"/posts/projede-git-kullanici-adi-ve-epostasi-nasil-degistirilir/","relativePath":"posts/projede-git-kullanici-adi-ve-epostasi-nasil-degistirilir.md","relativeDir":"posts","base":"projede-git-kullanici-adi-ve-epostasi-nasil-degistirilir.md","name":"projede-git-kullanici-adi-ve-epostasi-nasil-degistirilir","frontmatter":{"title":"Projede Git kullanıcı adı ve e-postası nasıl değiştirilir?","author":"sametsunman","subtitle":"Git'e projemizi atarken mevcut adımızı değiştirmek istersek config ayarlarını değiştirmemiz gerekiyor. ","date":"2020-10-19","thumb_img_alt":"github-config","content_img_alt":"github-config","excerpt":"Git'e projemizi atarken mevcut adımızı değiştirmek istersek config ayarlarını değiştirmemiz gerekiyor. ","canonical_url":"","template":"post","content_img_path":"images/github-config.png","thumb_img_path":"images/github-config.png"},"html":"git config --global user.name \"İSİM SOYİSİM\"git config --global user.email \"ORNEK@asnus.com\"Son olarak e-posta ve kullanıcı adınızı teyit edin
\n# kullanıcı adı gösterme\ngit config user.name\ngit config user.email
\n## Tek bir proje dizini için ayarları değiştirmek\n1. Komut çalıştırın (ör: git bash) ve ilgili klasörü gidin(ör: cd C:\\repos)\n2. Kullanıcı adınızı ayarlayın:\n`git config user.name \"İSİM SOYİSİM\"`\n3. E-Postanızı ayarlayın:\n`git config user.email \"ORNEK@asnus.com\"`\n4. Son olarak e-posta ve kullanıcı adınızı teyit edin\ngit config user.name
\ngit config user.email
\nReact projemde aşağıdaki gibi farklı componentlerden oluşan bir yapım vardı. Buradaki tüm yazılanları müşteri bir buton yardımı ile kopyalamak istiyordu.
\n![\"useMemo](\"https://asnus.com/images/copyToClipBoard.png\")
Bunun için bir fonksiyon tanımlayıp buton ile çağırarak yazıların kopyalanmasını sağlayabildik. Fonksiyonumuz aşağıdaki gibi:
\nconst childRef = useRef();\n\nconst copyToClipBoard = () => {\n\n \n const range = document.createRange();\n range.selectNode(childRef.current);\n window.getSelection().removeAllRanges();\n window.getSelection().addRange(range);\n document.execCommand('copy');\n window.getSelection().removeAllRanges();\n \n}\nYukarıdaki ref.current'i useRef ile kopyalamak istediğimiz component'e tanımladık.
\nreturn(\n<div>\n <div ref={childRef}>\n <span style={{color:red}}>Kopyalanacak Veri</span>\n </div>\n <button onClick={() => copyToClipBoard()}>Kopyala</button>\n</div>\n)\nİşte bu kadar! Butona tıklayarak yazımızı stil ile beraber panoya kopyalayabilir istediğimiz yere yapıştırabiliriz.
"},{"url":"/posts/react-custom-hook/","relativePath":"posts/react-custom-hook.md","relativeDir":"posts","base":"react-custom-hook.md","name":"react-custom-hook","frontmatter":{"title":"React - Custom Hook Nedir ve Nasıl Kullanılır?","subtitle":"Hook, React'ın 18.6 versiyonu ile kodlarımıza dahil olan yapılardır. Class component yapısına gerek olmadan, function component içerisinde de state yapısını kullanabilmemize olanak tanır.","date":"2022-04-19","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/reactCustomHook.png","content_img_path":"images/reactCustomHook.png"},"html":"Custom Hook ise tekrarlanan kodun önüne geçebilmemiz adına ortaya çıkan bir yapıdır. Custom Hook yapısı ile tekrar kullanılabilir fonksiyonlar oluştururuz. Böylelikle daha temiz bir kod yapısı ve basitlik elde ederiz.
\nÖrnek bir yapıyı birlikte deneyelim:
\nİlgili kod yapısına doğrudan bu adresten erişebilirsiniz.
\nÖncelik olarak customHook.js dosyası oluşturarak buraya kullanacağımız Custom Hook yapısını tanımlayalım.
\nimport { useState, useEffect } from \"react\";\n\nfunction useCustomHook(initializer, componentName) {\n // \"set\" diyerek hook yapımızı oluşturuyoruz.\n const [counter, setCounter] = useState(initializer);\n\n // setCounter'i çağırarak \"counter\" sayımıza +1 vereceğimiz fonksiyonu oluşturuyoruz.\n function resetCounter() {\n setCounter(counter + 1);\n }\n\n useEffect(() => {\n // useEffect kullanarak counter değiştiğinde console.log çıktısını sağlıyoruz.\n console.log(componentName + \" butonuna \" + counter + \" kere tıklandı.\");\n }, [counter, componentName]);\n \n // counter değiştiğinde resetCounter fonksiyonun çağrılmasını sağlıyoruz.\n return resetCounter;\n}\n\nexport default useCustomHook;\nBu tanımları sağladığımızda Custom Hook yapımızı oluşturmuş oluyoruz. Bu Hook yapısını farklı componentlerde kullanalım. Bunun için FirstComponent.js adlı bir dosya oluşturuyoruz.
\nimport React from \"react\";\n\n// Custom Hook yapısını çağrıyoruz\nimport useCustomHook from \"../useCustomHook\";\n\nfunction FirstComponent(props) {\n // Custom Hook yapısına 0 ve \"FirstComponent\" değerlerini döndüyoruz.\n const clickedButton = useCustomHook(0, \"FirstComponent\");\n\n return (\n <div>\n <h2> Bu FirstComponent'dir.</h2>\n <button onClick={clickedButton}>Tıklayınız!</button>\n </div>\n );\n}\n\nexport default FirstComponent;\nFarkı anlayabilmemiz için SecondComponent.js adlı bir dosya daha oluşturalım. Ve Custom Hook yapısına farklı değerleri döndürelim.
\nimport React from \"react\";\n\nimport useCustomHook from \"../useCustomHook\";\n\nfunction SecondComponent(props) {\n const clickedButton = useCustomHook(0, \"SecondComponent\");\n\n return (\n <div>\n <h2> Bu SecondComponent'dir. </h2>\n <button onClick={clickedButton}>Tıklayınız!</button>\n </div>\n );\n}\n\nexport default SecondComponent;\nSon işlem olarak bu iki yapımızı App.js de çağıralım. Ve çıktımızı kontrol edelim.
\nimport React from \"react\";\nimport FirstComponent from \"./components/FirstComponent\";\nimport SecondComponent from \"./components/SecondComponent\";\n\nfunction App() {\n return (\n <div className=\"App\">\n <h1>Merhaba Dünya!</h1>\n <FirstComponent />\n <SecondComponent />\n <p>ASNUS</p>\n </div>\n );\n}\n\nexport default App;\nÇıktımızı aşağıdaki gibi almamız gerekmektedir. Böylelikle tek bir hook oluşturarak ayrı componentlerde ayrı değerler dönebildik.
\n![\"Custom](\"https://asnus.com/images/custom_hook_cikti.png\")
Daha fazla hook örneği için Beautiful React Hooks sayfasına veya Github sayfasına bakabilirsiniz.
"},{"url":"/posts/react-hooks-rehberi/","relativePath":"posts/react-hooks-rehberi.md","relativeDir":"posts","base":"react-hooks-rehberi.md","name":"react-hooks-rehberi","frontmatter":{"title":"React Hooks: Kafanı Karıştırmadan Öğren","author":"sametsunman","subtitle":"useState, useEffect, useRef derken kafan mı karıştı? Merak etme, hepimiz oradan geçtik. Bu yazıda React Hooks'u sanki kahve içerken sohbet ediyormuşuz gibi anlatacağım.","date":"2025-12-05","thumb_img_alt":"react hooks","content_img_alt":"react hooks","excerpt":"useState, useEffect, useRef derken kafan mı karıştı? Merak etme, hepimiz oradan geçtik. Bu yazıda React Hooks'u sanki kahve içerken sohbet ediyormuşuz gibi anlatacağım.","canonical_url":"","template":"post","thumb_img_path":"images/react-hooks.png","content_img_path":"images/react-hooks.png"},"html":"Hatırlıyor musun, eskiden React'ta class component yazardık? this.state, this.setState, componentDidMount... Bir sürü şey ezberlemen gerekirdi. Sonra 2019'da React ekibi dedi ki: \"Yeter artık, hayatınızı kolaylaştıralım.\" Ve Hooks doğdu.
Şimdi gel, bu hook'ları bir güzel anlatalım.
\nDiyelim ki bir sayaç yapıyorsun. Eskiden class component yazıp this.state falan derdin. Şimdi?
import { useState } from 'react';\n\nfunction Sayac() {\n const [sayi, setSayi] = useState(0);\n\n return (\n <div>\n <p>Sayı: {sayi}</p>\n <button onClick={() => setSayi(sayi + 1)}>Artır</button>\n </div>\n );\n}\nİşte bu kadar. useState(0) diyorsun, sana iki şey veriyor:
sayi: Şu anki değersetSayi: Değeri değiştirmek için kullanacağın fonksiyonParantez içindeki 0 başlangıç değeri. String, array, object ne istersen koyabilirsin.
State'i güncellerken önceki değere ihtiyacın varsa, şöyle yap:
\nsetSayi(oncekiDeger => oncekiDeger + 1);\nNeden mi? Çünkü React bazen state güncellemelerini toplu yapar. Bu şekilde her zaman en güncel değeri alırsın.
\n\"Yan etki\" kulağa kötü bir şey gibi geliyor ama değil. API'den veri çekmek, DOM'u manuel değiştirmek, timer kurmak... Bunların hepsi yan etki.
\nimport { useState, useEffect } from 'react';\n\nfunction Profil({ userId }) {\n const [kullanici, setKullanici] = useState(null);\n\n useEffect(() => {\n // Component yüklendiğinde veya userId değiştiğinde çalışır\n fetch(`/api/kullanici/${userId}`)\n .then(res => res.json())\n .then(data => setKullanici(data));\n }, [userId]); // Bağımlılık dizisi\n\n if (!kullanici) return <p>Yükleniyor...</p>;\n return <h1>{kullanici.isim}</h1>;\n}\nO sondaki [userId] çok önemli. React'a \"sadece userId değiştiğinde bu effect'i tekrar çalıştır\" diyorsun.
[] (boş dizi): Sadece component ilk yüklendiğinde çalışır[userId]: userId her değiştiğinde çalışırBir timer kurdun veya bir event listener ekledin. Component kaldırılınca bunları temizlemen lazım, yoksa memory leak olur:
\nuseEffect(() => {\n const timer = setInterval(() => {\n console.log('Tick!');\n }, 1000);\n\n // Cleanup fonksiyonu\n return () => {\n clearInterval(timer);\n };\n}, []);\nBazen bir input'a focus vermek veya bir elementin boyutunu ölçmek istersin. İşte useRef bunun için:
\nimport { useRef } from 'react';\n\nfunction Form() {\n const inputRef = useRef(null);\n\n const focusla = () => {\n inputRef.current.focus();\n };\n\n return (\n <div>\n <input ref={inputRef} type=\"text\" />\n <button onClick={focusla}>Input'a Focusla</button>\n </div>\n );\n}\nuseRef sadece DOM için değil. Render'lar arasında bir değeri saklamak istiyorsan ama bu değer değiştiğinde yeniden render olmasını istemiyorsan, useRef kullan:
\nfunction Zamanlayici() {\n const renderSayisi = useRef(0);\n\n renderSayisi.current += 1;\n\n console.log(`Bu component ${renderSayisi.current} kez render oldu`);\n\n // ...\n}\nDiyelim ki çok ağır bir hesaplama yapıyorsun. Her render'da tekrar hesaplanmasını istemezsin:
\nimport { useMemo } from 'react';\n\nfunction Liste({ items, filtre }) {\n const filtrelenmisListe = useMemo(() => {\n console.log('Filtreleme yapılıyor...');\n return items.filter(item => item.includes(filtre));\n }, [items, filtre]);\n\n return (\n <ul>\n {filtrelenmisListe.map(item => <li key={item}>{item}</li>)}\n </ul>\n );\n}\nitems veya filtre değişmedikçe, filtreleme tekrar yapılmaz. Önceki sonuç kullanılır.
Her şeyi useMemo'ya sarma. useMemo'nun kendisi de bir maliyet. Sadece gerçekten ağır işlemlerde kullan.
\nBu biraz useMemo'ya benziyor ama fonksiyonlar için:
\nimport { useCallback } from 'react';\n\nfunction Uygulama() {\n const [sayi, setSayi] = useState(0);\n\n const pisBirsey = useCallback(() => {\n console.log('Tıklandı!');\n }, []);\n\n return <Buton onClick={pisBirsey} />;\n}\nButon component'i React.memo ile sarılmışsa, tikla fonksiyonu her render'da yeniden oluşmaz. Böylece Buton gereksiz yere render olmaz.
10 seviye derinlikte bir component'e veri mi geçirmen gerekiyor? Her seviyede prop olarak mı taşıyacaksın? Hayır!
\nimport { createContext, useContext } from 'react';\n\n// Context oluştur\nconst TemaContext = createContext('light');\n\n// Provider ile sar\nfunction Uygulama() {\n return (\n <TemaContext.Provider value=\"dark\">\n <Sayfa />\n </TemaContext.Provider>\n );\n}\n\n// Derinlerde bir yerde kullan\nfunction DerinComponent() {\n const tema = useContext(TemaContext);\n return <div className={tema}>Tema: {tema}</div>;\n}\nArtık aradaki tüm component'lere prop geçirmene gerek yok.
\nuseState yetmiyorsa, birden fazla state birbiriyle bağlantılıysa, useReducer kullan:
\nimport { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'artir':\n return { count: state.count + 1 };\n case 'azalt':\n return { count: state.count - 1 };\n case 'sifirla':\n return { count: 0 };\n default:\n return state;\n }\n}\n\nfunction Sayac() {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n return (\n <div>\n <p>Sayı: {state.count}</p>\n <button onClick={() => dispatch({ type: 'artir' })}>+</button>\n <button onClick={() => dispatch({ type: 'azalt' })}>-</button>\n <button onClick={() => dispatch({ type: 'sifirla' })}>Sıfırla</button>\n </div>\n );\n}\nRedux'a benziyor değil mi? Zaten Redux'un temel mantığı bu.
\nReact 19 ile birkaç güzel şey geldi:
\nimport { use } from 'react';\n\nfunction Kullanici({ userPromise }) {\n const kullanici = use(userPromise);\n return <h1>{kullanici.isim}</h1>;\n}\nimport { useFormStatus } from 'react-dom';\n\nfunction GonderButonu() {\n const { pending } = useFormStatus();\n return (\n <button disabled={pending}>\n {pending ? 'Gönderiliyor...' : 'Gönder'}\n </button>\n );\n}\nKullanıcı bir şey yaptığında, sunucu cevabını beklemeden UI'ı güncelle:
\nimport { useOptimistic } from 'react';\n\nfunction Yorumlar({ yorumlar }) {\n const [iyimserYorumlar, iyimserEkle] = useOptimistic(\n yorumlar,\n (state, yeniYorum) => [...state, yeniYorum]\n );\n\n // Form gönderildiğinde iyimserEkle çağır\n // Sunucu cevabını beklemeden yorum görünür\n}\nEn güzel şeylerden biri: Kendi hook'unu yazabilirsin!
\nfunction useLocalStorage(key, initialValue) {\n const [value, setValue] = useState(() => {\n const saved = localStorage.getItem(key);\n return saved ? JSON.parse(saved) : initialValue;\n });\n\n useEffect(() => {\n localStorage.setItem(key, JSON.stringify(value));\n }, [key, value]);\n\n return [value, setValue];\n}\n\n// Kullanımı\nfunction Ayarlar() {\n const [tema, setTema] = useLocalStorage('tema', 'light');\n // ...\n}\n// YANLIŞ\nif (kosul) {\n const [deger, setDeger] = useState(0);\n}\n\n// DOĞRU\nconst [deger, setDeger] = useState(0);\nif (kosul) {\n // deger'i burada kullan\n}\nHook'lar React'ı çok daha keyifli hale getirdi. Başta biraz kafa karıştırıcı olabilir ama bir kere alıştın mı, class component'lere geri dönmek istemezsin.
\nEn önemli üçlü: useState, useEffect, useRef. Bunları iyi öğren, gerisi gelir.
Takıldığın yer olursa, React dökümantasyonu gerçekten çok iyi. Bir de pratik yap, bol bol yaz. Yazarak öğrenilir bu işler.
\nHooks hakkında aklına takılan bir şey varsa yorumlarda sor. Hep beraber öğrenelim!
"},{"url":"/posts/react-native-env-dosyası/","relativePath":"posts/react-native-env-dosyası.md","relativeDir":"posts","base":"react-native-env-dosyası.md","name":"react-native-env-dosyası","frontmatter":{"title":"React Native'de ENV Dosyası Nasıl Oluşturulur ve Nasıl Kullanılır?","subtitle":"`.env` dosyası, bir proje için kullanılacak ortam değişkenlerinin (environment variables) tutulduğu bir dosyadır. Bu dosya, projenin çalıştırılacağı ortamda (örneğin, test ortamı, üretim ortamı gibi) değişebilecek olan değerlerin tutulduğu bir yerdir. ","date":"2023-01-02T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/react-native-env.png","content_img_path":"images/react-native-env.png"},"html":"Örneğin, bir web uygulamasında kullanılan bir veritabanının adresi ve kullanıcı adı gibi bilgilerin tutulduğu bir dosya olabilir.
\n.env dosyaları genellikle bir projenin kaynak kodu ile birlikte saklanır, ancak projenin çalıştırılacağı ortamdan bağımsızdır ve bu nedenle projenin kaynak kodu deposuna yüklenmez. Bu sayede, projenin farklı ortamlarda çalıştırılması sırasında çevre değişkenlerinin değerleri değiştirilebilir.
Öncelik olarak react-native-dotenv paketini projemize yükleyelim.
npm i react-native-dotenv\nProjemizde bulunan babel çeviricinin yeni eklediğimiz pakete uyumunu sağlayabilmek adına yapılandırmalarını sağlıyalım. Projemizde bulunan babel.configure.js dosyasını düzenliyelim. İçerisine aşağıdaki ayarlamaları sağlıyalım.
module.exports = {\n \"plugins\": [\n [\"module:react-native-dotenv\", {\n \"moduleName\": \"@env\",\n \"path\": \".env\",\n \"blacklist\": null,\n \"whitelist\": null,\n \"safe\": false,\n \"allowUndefined\": true\n }]\n ]\n}\nOrtam değişkinleri için gerekli ayarlamaları sağladık. Sıra kullanımına geldi. Projemize .env isminde bir dosya açalım. İçerisine kullanacağımız değişkenleri belirleyelim.
![\"env-code\"](\"https://asnus.com/images/env-code.png\")
Daha sonra oluşturduğumuz bu değişkenleri kullanacağımız dosya içerisinde değişkenlerimizi çağırıp işlemleri sağlayabiliriz.
\nimport { API_KEY, APP_NAME, APP_VERSION, AUTH_DOMAIN } from '@env';\n\nconsole.log(APP_NAME); // Çıktı Olarak \"Asnus\" ifadesi gelecektir.\nAyrıca, .env dosyasının içeriği projenin çalıştırılacağı ortamdan bağımsızdır ve bu nedenle projenin farklı ortamlarda çalıştırılması sırasında çevre değişkenlerinin değerleri değiştirilebilir. Örneğin, test ortamı için .env.test, üretim ortamı için de .env.production gibi. Bu sayede, her ortam için farklı çevre değişkenleri kullanılabilir.
\nNot: Eğer projenizin çalıştırılacağı ortamı belirtmek istemiyorsanız, varsayılan olarak .env dosyasını kullanabilirsiniz. Bu dosya, projenin çalıştırılacağı ortam belirtilmezse varsayılan olarak kullanılır.
\nBu blog yazısında react-native projemizde ortam değişkenlerini nasıl kullanacağımıza baktık. react-native-dotenv npm paketini kurduktan sonra babel.config.js dosyamızı yapılandırdık. Son olarak, bir env dosyası oluşturduk ve kullanmak istediğimiz dosyada/kaynak kodda ortam değişkenini içe aktardık.
Öncelikle şunu söylemeliyim Linux’ta React Native CLI ile IOS için uygulama geliştirme desteklenmiyor. O yüzden yazımızda yalnızca Android için kurulum adımlarından bahsedeceğiz.
\nKendi bilgisayarımda Linux Mint 20 kurulu, ancak Ubuntu ve diğer Debian tabanlı sistemlerle kurulum, benzerlik göstermekte. Hemen uygulama geliştirmek için gereksinimlerimize bakalım.
\nNodeJs için 10 ya da daha üst versiyonu kurmamız gerekiyor. Birden fazla kurulum yöntemi var ancak bana göre en kolay PPA ile kurulum yapmak. Dilerseniz resmi sitesinden de yardım alabilirsiniz.
\nhttps://nodejs.org/en/download/package-manager/
\nİlk adım olarak paket deposunu güncelleyin.
\nSonrasında NodeJS için gerekli paketi yükleyin. Şuan son sürüm 14 versiyon olduğu için ben onu kuruyorum.
\nNodeJs ile birlikte npm de kurulacaktır. Ve son olarak nodejs versiyonunu kontrol edin.
\nBaşarılı olduysa, size versiyonu verecektir.
\nJDK da uygulama geliştirmemiz için gerekli olan bileşenlerden, kurulumu da oldukça basit. Yine gerekli durumlarda resmi site dökümasyonuna bakmanızı tavsiye ederim.
\nhttps://www.oracle.com/java/technologies/javase-jdk15-downloads.html
\nYukarıdaki linkte öncelikle oturum açmanız gerekiyor ve sonrasında Linux x64 Debian Package (Debian kurulum paketi) indirin. İndirilen dosyayı direk açarak kurulum gerçekleştirin.
\nWatchman ne işe yarıyor derseniz, Facebook tarafından dosya sistemlerini izleyen ve performans açısından mutlaka önerilen bir yazılım. Kurmak için öncelikle Homebrew’i kurmak gerekiyor.
\nArdından da watchman’i yükleyelim
\nEn önemli kısım burası, Android Studio ve Sdk kurulumu biraz zahmetli ve uzun sürmekte, sabırlı olmanız gerekiyor.
\nİlk adım olarak Resmi web sitesinden tar.gz dosyasını indirmeniz gerek.
\nhttps://developer.android.com/studio
\nİndirdiğiniz dosyayı bir dizine çıkarmanız gerekmekte, ben indirdiğimiz yerden local dizinine kopyalıyorum.
\nDaha sonra ise android studio’yu başlatmamız gerekiyor. Ancak öncesinden Menü’ye bir kısayol oluşturalım. Bunun için ise Menü’ye sağ tıklayıp yapılandıra tıklayalım. Ardından ise menü sekmesinden ‘Menü düzenleyiciyi aç’ butonuna tıklayalım. Yeni menü’ye tıklayıp komut kısmında Android Studio’yu kopyaladığımız dizinin altında bin klasöründe studio.sh dosyasını seçelim. Dilerseniz ikon da ekleyebilirsiniz. Herşey doğru şekilde yapıldıktan sonra Menü’de Android Studio’yu görebileceksiniz.
\nŞimdi Android Studio’yu açıp, ilk kurulumu yapalım. Bu adım internet hızınıza bağlı olarak biraz uzun sürecektir.
\nAndroid Studio Kurulumunu yaptıktan sonra Tools>Android>SDK Manager kısmından SDK kurulumunu yapalım. Açılan pencerede sağ alttan “Show Package Details” seçimini yapalım ve sonra React Native güncel olarak Android 10'u desteklediği için menüden “Android SDK Platform 29”, “Intel x86 Atom_64 System Image” ve “Google APIs Intel x86 Atom_64 System Image” seçeneklerini seçerek gerekli kurulumları yapıyoruz.
\nBilgisayarınızın ev dizini diye geçen kullanıcı dizinine gidin. Sağ tıklayıp gizli dosyaları göster diyin ve .bashrc dosyasını bir metin düzenleyicisi ile açıp aşağıdaki kodları en alta yapıştırın. Böyle Android kurulumlarınız diğer programlar tarafından erişilebilecek.
\nBurada üç seçeneğimiz var, ilki android Studionun kendi emülatörünü kullanmak, ikincisi Genymotion gibi diğer yazılımları kullanmak ve diğeri ise kendi telefonumuzu kullanmak.
\nAndroid Studio Emulator
\nTools>Android>AVD Manager’e tıklayarak diyalog penceresini açalım,ardından “Create Virtual Device” a tıklayalım, herhangi bir cihaz seçelim, indirdiğimiz sdk ile uyumlu bir emülatör yaratalım. Burda dikkat etmeniz gerekem bilgisayar ve uygulamanızla uygun bir sdk seçmeniz gerekiyor.
\nHerşey doğru şekilde yapıldıysa emülatörü başlatabilirsiniz.
\nGenymotion
\nAndroid Studio’nun oldukça hantal olmasından dolayı, kendi emülatörü yerine genymotion tercih edebilirsiniz. Ama öncesinde virtualbox kurmamız gerekiyor.
\nArdından ise genymotion’ı kendi sitesinden sistemimize uygun olanını indirip yine klasöre çıkararak kuralım.
\nhttps://www.genymotion.com/download/
\nYukarıdaki kodda indirdiğimiz dosyayı opt dizinine taşıyoruz. Daha sonra ise yapmamız gereken gerekli izinleri vermek. Aşağıdaki kodları sırasıyla yapalım.
\nKısayol oluşturmak için Android Studio’daki gibi yine menü düzenleyiciden “/opt/genymobile/genymotion/genymotion” komutunu ekleyebiliriz.
\nEmülatör’ü çalıştırdıktan sonra önce oturum açmamız gerekiyor, ardından da bir cihaz yaratmamız gerekiyor.
\nFiziksel Cihaz Bağlanması
\nEmülatörler yerine kendi telefonumuzu da uygulamalarımız için kullanabiliriz ve bu windows işletim sistemine göre oldukça kolay, çünkü cihazımızın driver’ı otomatik yüklüyor.
\nHemen anlatalım, ilk önce kurulum yapmamız gerekiyor.
\nArdından Android Studio’u açalım, telefonumuzun geliştirici seçeneklerinden (Eğer telefonunuzda yoksa Android sürümünüze 5 kere tıklamanız gerekli) “USB Hata Ayıklama” seçeneğini aktifleştirelim, ardından usb kablo ile bağlayalım. Ve telefonunuza gelen hata ayıklama ile ilgili bildirimi kabul edelim. Böylece Android Studio’da sağ üstte telefonunuzu görebileceksiniz. Eğer görmüyorsanız. Uygulamada Cihaz ayarları kısmından kurulum yapmayı deneyebiliriniz.
\nUyguluma geliştirmek için bir çok yardımcı aracı, eklentileri, kendine ait uçbirimi, git sistemi olması nedeniyle ben VS Code kullanıyorum. Dilerseniz başka IDE ya da kod düzenleyicisi de kullanabilirsiniz.
\nhttps://code.visualstudio.com/Download adresinden işletim sisteminize uygun deb paketini indirelim ve dosyayı direk açarak kuralım.
\nHerşey hazırsa bir uçbirim açalım ve ilk uygulamamızı oluşturalım:
\nArdından oluşturduğumuz proje klasörünü VS Code’da açalım. Öncelikle terminal pencerimizden uygulamayı başlatalım.
\nEmülatörü çalıştıralım ya da fiziksel cihazımızı bağlayalım ve uygulamayı çalıştıralım. Ardından yeni bir terminalde şu kodu çalıştıralım:
\nUygulamamızı çalıştırırken benim gibi envoriment ile ilgili hata alırsanız, öncelikle ortam değişkenlerini doğru şekilde tanımladığınızdan emin olun eğer işe yaramıyorsa “android/gradle/wrapper/gradle-wrapper.properties” dosyasında gradle versiyonuzu 6.5'e yükseltmeyi deneyin.
\nHerşey yolunda gittiyse ilk uygulamamız emülatörde göreceksiniz. Şimdi dilerseniz App.Js’ten başlayarak düzenleme yapabilirisiniz :)
\nİyi şanslar. Peace :)
"},{"url":"/posts/react-redux-yerine-zustand-kullanimi/","relativePath":"posts/react-redux-yerine-zustand-kullanimi.md","relativeDir":"posts","base":"react-redux-yerine-zustand-kullanimi.md","name":"react-redux-yerine-zustand-kullanimi","frontmatter":{"title":"React'ta Redux Yerine Zustand Kullanımı","author":"sametsunman","subtitle":"Redux'un karmaşık yapısından ve boilerplate kodlarından sıkıldıysanız, Zustand tam size göre. Minimal, hızlı ve öğrenmesi kolay bir state management kütüphanesi olan Zustand ile projelerinizi nasıl sadeleştirebileceğinizi keşfedin.","date":"2025-12-10","thumb_img_alt":"zustand","content_img_alt":"zustand","excerpt":"Redux'un karmaşık yapısından ve boilerplate kodlarından sıkıldıysanız, Zustand tam size göre. Minimal, hızlı ve öğrenmesi kolay bir state management kütüphanesi olan Zustand ile projelerinizi nasıl sadeleştirebileceğinizi keşfedin.","canonical_url":"","template":"post","thumb_img_path":"images/redux-zustand.jpg","content_img_path":"images/redux-zustand.jpg"},"html":"State management, React uygulamalarının en kritik konularından biri. Yıllarca Redux bu alanda standart oldu, ancak son yıllarda daha minimal ve kullanımı kolay alternatifler ortaya çıktı. Bunların başında Zustand geliyor.
\nRedux güçlü bir araç, ancak bazı dezavantajları var:
\nZustand (Almanca \"durum\" anlamına gelir), minimalist bir state management kütüphanesidir. Sadece ~1KB boyutunda ve sıfır bağımlılığa sahip.
\nRedux'ta basit bir counter için:
\n// Redux - actions.js\nexport const INCREMENT = 'INCREMENT';\nexport const increment = () => ({ type: INCREMENT });\n\n// Redux - reducer.js\nconst counterReducer = (state = { count: 0 }, action) => {\n switch (action.type) {\n case 'INCREMENT':\n return { count: state.count + 1 };\n default:\n return state;\n }\n};\n\n// Redux - store.js\nimport { createStore } from 'redux';\nexport const store = createStore(counterReducer);\n\n// Redux - Component\nimport { useSelector, useDispatch } from 'react-redux';\nconst Counter = () => {\n const count = useSelector(state => state.count);\n const dispatch = useDispatch();\n return <button onClick={() => dispatch(increment())}>{count}</button>;\n};\nZustand'da aynı işlem:
\n// Zustand - store.js\nimport { create } from 'zustand';\n\nconst useStore = create((set) => ({\n count: 0,\n increment: () => set((state) => ({ count: state.count + 1 })),\n}));\n\n// Zustand - Component\nconst Counter = () => {\n const { count, increment } = useStore();\n return <button onClick={increment}>{count}</button>;\n};\nFarkı görüyor musunuz? Tek dosya, tek hook, işlem tamam.
\nRedux'ta uygulamanızı <Provider> ile sarmalamanız gerekir. Zustand'da buna gerek yok:
// Redux\n<Provider store={store}>\n <App />\n</Provider>\n\n// Zustand - Direkt kullan, sarmalama yok!\n<App />\nZustand, TypeScript ile sorunsuz çalışır:
\ninterface BearState {\n bears: number;\n increase: (by: number) => void;\n}\n\nconst useBearStore = create<BearState>()((set) => ({\n bears: 0,\n increase: (by) => set((state) => ({ bears: state.bears + by })),\n}));\nRedux'ta async işlemler için Redux Thunk veya Redux Saga gerekir. Zustand'da direkt yazabilirsiniz:
\nconst useStore = create((set) => ({\n users: [],\n loading: false,\n fetchUsers: async () => {\n set({ loading: true });\n const response = await fetch('/api/users');\n const users = await response.json();\n set({ users, loading: false });\n },\n}));\nZustand, sadece kullandığınız state parçası değiştiğinde component'i yeniden render eder:
\n// Sadece 'bears' değiştiğinde render olur\nconst bears = useBearStore((state) => state.bears);\n\n// Sadece 'fish' değiştiğinde render olur\nconst fish = useBearStore((state) => state.fish);\nPersist, devtools, immer gibi middleware'ler kolayca eklenebilir:
\nimport { create } from 'zustand';\nimport { persist, devtools } from 'zustand/middleware';\n\nconst useStore = create(\n devtools(\n persist(\n (set) => ({\n count: 0,\n increment: () => set((state) => ({ count: state.count + 1 })),\n }),\n { name: 'counter-storage' }\n )\n )\n);\npersist middleware ile state'inizi otomatik olarak localStorage'a kaydedebilirsiniz:
import { persist } from 'zustand/middleware';\n\nconst useStore = create(\n persist(\n (set) => ({\n theme: 'light',\n setTheme: (theme) => set({ theme }),\n }),\n {\n name: 'app-settings',\n storage: createJSONStorage(() => localStorage),\n }\n )\n);\nZustand, vanilla JavaScript'te de çalışır:
\nconst { getState, setState, subscribe } = useStore;\n\n// React olmadan state'e erişim\nconsole.log(getState().count);\n\n// State değişikliklerini dinleme\nsubscribe((state) => console.log('State changed:', state));\n| Özellik | \nRedux | \nZustand | \n
|---|---|---|
| Bundle Size | \n~7KB + React-Redux ~5KB | \n~1KB | \n
| Boilerplate | \nÇok | \nMinimal | \n
| Öğrenme Eğrisi | \nYüksek | \nDüşük | \n
| Provider Gerekli | \nEvet | \nHayır | \n
| TypeScript | \nEk ayar gerekli | \nDoğal destek | \n
| Async İşlemler | \nMiddleware gerekli | \nDoğrudan | \n
| DevTools | \nRedux DevTools | \nAynı DevTools | \n
| Middleware | \nEvet | \nEvet | \n
Zustand tercih edin:
\nRedux tercih edin:
\nnpm install zustand\n# veya\nyarn add zustand\nZustand, React state management'ı için mükemmel bir alternatif. Daha az kod yazarak daha çok iş yapmanızı sağlıyor. Redux'un sunduğu özelliklerin çoğunu çok daha basit bir API ile sunuyor.
\nYeni bir projeye başlıyorsanız veya mevcut projenizi sadeleştirmek istiyorsanız, Zustand'ı denemenizi şiddetle tavsiye ederim. Bir kere kullandıktan sonra Redux'a geri dönmek istemeyeceksiniz!
\nZustand hakkında sorularınız varsa yorumlarda belirtebilirsiniz. İyi kodlamalar!
"},{"url":"/posts/regex-ile-turkce-karakter-denetimi/","relativePath":"posts/regex-ile-turkce-karakter-denetimi.md","relativeDir":"posts","base":"regex-ile-turkce-karakter-denetimi.md","name":"regex-ile-turkce-karakter-denetimi","frontmatter":{"title":"Regex ile Türkçe Karakter Denetimi","author":"sametsunman","subtitle":"lorem-ipsum","date":"2021-01-13","thumb_img_alt":"regex","content_img_alt":"regex","excerpt":"lorem-ipsum","canonical_url":"","template":"post","thumb_img_path":"images/regex.png","content_img_path":"images/regex.png"},"html":"Regex rgx = new Regex(\"(?:[^a-zA-Z0-9ğüşöçıİĞÜŞÖÇ!?.\\\\-*() ,<>'\\\":/=]| (?<=['\\\"])s)\", RegexOptions.IgnoreCase | RegexOptions.CultureInvariant | RegexOptions.Compiled);\n string content = \"\";\n\n if (rgx.Matches(product.Content).Count < 150)\n {\n content = rgx.Replace(product.Content, String.Empty); \n\n }\nReact ile hazırladığımız projede oluşturduğumuz state'leri farklı componentlere aktarmamız gerekebilir. Bu durumda state değişmese bile o componentlerin de render edilme sorunu ile karşılaşırız.
\nHerhangi bir props yollamadığımız durumlarda o sayfanın render edilmesini export ederken React.memo ile dışa aktarım yaptığımızda bu sorunu çözebiliriz.
\nimport React from \"react\";\n\nfunction Header() {\n return (\n <div>\n <div>Header</div>\n </div>\n );\n}\nexport default React.memo(Header);\nAncak componentimize prop göndermek istediğimizde state değişmese dahi componentin de tekrar çalıştığını görürüz. Bu sorunu çözmek için ise oluşturduğumuz state'i useMemo kullanarak oluşturmamızdır.
\n![\"useMemo](\"https://asnus.com/images/usememo-cikti.png\")
Yukarıda görüldüğü gibi oluşturduğumuz objenin içerisi değişmesi durumunda Header componenti render ediliyor. Aşağıda bulunan kod ile inceleme sağlayabilirsiniz.
\n\n![\"Edit](\"https://codesandbox.io/static/img/play-codesandbox.svg\")
Reactın bu özelliği sayesinde gereksiz renderın önüne geçebiliriz.
"},{"url":"/posts/vs-code'da-github-deposuna-proje-aktarmak/","relativePath":"posts/vs-code'da-github-deposuna-proje-aktarmak.md","relativeDir":"posts","base":"vs-code'da-github-deposuna-proje-aktarmak.md","name":"vs-code'da-github-deposuna-proje-aktarmak","frontmatter":{"title":"VS Code'da Github Deposuna Proje Aktarmak","subtitle":"Merhaba arkadaşlar, günümüzde birçok proje VS Code ile yazılmakta. Ve bu projeleri GitHub depolarında saklıyoruz. Peki yeni başlayanlar için bu bağlantıyı nasıl sağlayacağız ve güncellemeleri nasıl yapacağız bunu öğreneceğiz.","date":"2021-01-30","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/git0.png","content_img_path":"images/git0.png"},"html":"Öncelik olarak VS Code üzerinden yeni bir depo oluşturalım. Sol menüden \"Source Control\" kısmına girerek \"Publish to GitHub\" butonuna tıklayarak üst kısımda çıkan bölmeden ayarlamaları yaparak depoyu oluşturuyoruz.
\n![](\"https://raw.githubusercontent.com/asnuscom/asnus/master/static/images/git1.png\")
Daha sonrasında yeni bir terminal başlatmak adına yukarıdaki menüden Terminal > New Terminal tuşlamalarını yaparak terminalimizi başlatalım. Açılan terminale daha öncesinde de şu konuda bahsettiğimiz gibi GitHub kullanıcı adı ve mail adreslerimizi ayarlıyalım.
\ngit config user.name \"KULLANICIADI\"\ngit config user.email \"KULLANICIADI@MAIL.COM\"\ngit remote add origin https://github.com/ihsansunman/test.git\ngit branch -M main\ngit push -u origin main\nArtık dosyalarımızın GitHub depomuzda olduğunu göreceksiniz. Ayarlamalarımızı da yaptıktan sonra düzenlemelerimizi işlemek (commit) için yine \"Source Control\" üzerinden aşağıda bulunan görselde \"MESAJINIZ\" yazan yere yapılan değişiklikleri yazarak yukarıda bulanan tik (check) işaretine basarak değğişiklerimizi ayarlıyalım. Ve en son halini görselde bulunan \"Push\" seçeneği ile GitHub ile eşitleyelim. Artık bu şekilde deponuzu güncelleyebilirsiniz.
\n![](\"https://raw.githubusercontent.com/asnuscom/asnus/master/static/images/git2.png\")
İyi Kodlamalar.
"},{"url":"/posts/windows-10'da-komuttan-kablosuz-baglanti-paylasma/","relativePath":"posts/windows-10'da-komuttan-kablosuz-baglanti-paylasma.md","relativeDir":"posts","base":"windows-10'da-komuttan-kablosuz-baglanti-paylasma.md","name":"windows-10'da-komuttan-kablosuz-baglanti-paylasma","frontmatter":{"title":"Windows 10'da Komuttan Kablosuz Bağlantı Paylaşma","author":"ihsansunman","subtitle":"Merhaba arkadaşlar bazen ethernetten (kablolu bağlantı) bazen ise wi-fi (kablosuz bağlantı) ile gelen internetin bilgisayar aracılığı ile tekrar kablosuz bir şekilde paylaşmamız gerekir. Yeni bilgisayarlarda \"Mobil Etkin Nokta\" sekmesi ile paylaşım sağlayabiliyoruz. Ancak eski sürüm Windows 10 ve eski bilgisayarlarımızda bu sekme çıkmıyor. Bundan dolayı Komut İstemcisinden kablosuz bağlantı paylaşmayı görelim:","date":"2020-04-12","thumb_img_alt":"","content_img_alt":"","excerpt":"Merhaba arkadaşlar bazen ethernetten (kablolu bağlantı) bazen ise wi-fi (kablosuz bağlantı) ile gelen internetin bilgisayar aracılığı ile tekrar kablosuz bir şekilde paylaşmamız gerekir. Yeni bilgisayarlarda \"Mobil Etkin Nokta\" sekmesi ile paylaşım sağlayabiliyoruz. Ancak eski sürüm Windows 10 ve eski bilgisayarlarımızda bu sekme çıkmıyor.","canonical_url":"","template":"post","thumb_img_path":"images/cmd2.png","content_img_path":"images/cmd2.png"},"html":"![\"image\"](\"https://raw.githubusercontent.com/asnuscom/asnus/master/static/images/cmd1.png\")
netsh wlan set hostednetwork mode=allow ssid=asnus key=ihsansunman\"\nBurada ssid paylaştışımız internetin adını ve key ise şifresini belirtir. Bunları kendimize göre ayarlıyalım. (Boşluk kullanmıyalım hata alabilirsiniz.)![\"image2\"](\"https://raw.githubusercontent.com/asnuscom/asnus/master/static/images/cmd2.png\")
netsh wlan start hostednetwork\"![\"image3\"](\"https://raw.githubusercontent.com/asnuscom/asnus/master/static/images/cmd3.png\")
![\"image4\"](\"https://raw.githubusercontent.com/asnuscom/asnus/master/static/images/cmd4.png\")
Telefon, tablet veya başka bir cihazdan kontrol ettiğiniz taktirde seçtiğiniz ssid ismini görüyor olacaksınız. İyi internette gezinmeler dilerim.
"},{"url":"/posts/windowsta-orijinal-degil-yazisi-nasil-kaldirilir/","relativePath":"posts/windowsta-orijinal-degil-yazisi-nasil-kaldirilir.md","relativeDir":"posts","base":"windowsta-orijinal-degil-yazisi-nasil-kaldirilir.md","name":"windowsta-orijinal-degil-yazisi-nasil-kaldirilir","frontmatter":{"title":"Windows'ta \"Windows Orijinal Değil\" Yazısı Nasıl Kaldırılır?","author":"sametsunman","subtitle":"Windows'umuz orijinal lisansına sahip olmadığımız taktirde, sağ alt köşede uyarı metni verir. Bu durum oldukça can sıkıcı olabilir. Çünkü tüm ekranlarda göze batarken, aynı zamanda arkaplan resmi de değiştirmemize izin vermez. Hadi nasıl kaldırabileceğimize bakalım.","date":"2019-12-02","thumb_img_alt":"windows-original-uyarisi","content_img_alt":"windows-original-uyarisi","excerpt":"Windows'umuz orijinal lisansına sahip olmadığımız taktirde, sağ alt köşede uyarı metni verir. Bu durum oldukça can sıkıcı olabilir. Çünkü tüm ekranlarda göze batarken, aynı zamanda arkaplan resmi de değiştirmemize izin vermez. Hadi nasıl kaldırabileceğimize bakalım.","canonical_url":"lorem-ipsum","template":"post","thumb_img_path":"images/windows-original-uyarisi.jpg","content_img_path":"images/windows-original-uyarisi.jpg"},"html":"Notepad yada başka bir yazı düzenleyici programı açın ve aşağıdaki komutları yapıştırın.
\n@echo off\ntaskkill /F /IM explorer.exe\nexplorer.exe\nexit\nFarklı Kaydet (Ctrl+Shift+S) yaparak \".txt\" formatını \".bat\" formatına çevirin. Daha sonra kaydedip dosyaya sağ tıklayarak \"Yönetici olarak çalıştır\"a tıklayın.
\nBilgisayarınızı yeniden başlattığınızda yazı kaybolmuş olacak
"},{"url":"/posts/windows-forms-uygulamasina-nasil-konsol-baglanabilir/","relativePath":"posts/windows-forms-uygulamasina-nasil-konsol-baglanabilir.md","relativeDir":"posts","base":"windows-forms-uygulamasina-nasil-konsol-baglanabilir.md","name":"windows-forms-uygulamasina-nasil-konsol-baglanabilir","frontmatter":{"title":"Windows Forms uygulamasına nasıl konsol bağlanabilir?","author":"sametsunman","subtitle":"Daha önce oluşturduğumuz Forms uygulamasında çeşitli sebeplerden dolayı konsol uygulaması da kullanmak isteyebiliriz. Nasıl yapılacağına bakalım.","date":"2020-07-17","thumb_img_alt":"win-forms-console","content_img_alt":"win-forms-console","excerpt":"Daha önce oluşturduğumuz Forms uygulamasında çeşitli sebeplerden dolayı konsol uygulaması da kullanmak isteyebiliriz. Nasıl yapılacağına bakalım.","canonical_url":"","template":"post","content_img_path":"images/win-forms-console.jpg","thumb_img_path":"images/win-forms-console.jpg"},"html":"1. Yöntem
\nWindows Form oluşturun...
\nSonra: Project Properties (Proje Tercihleri) -> Application (Uygulama) -> Output Type (Çıkış Türü) -> Console Application (Konsol Uygulaması)
\n2. Yöntem
\nAşağıdaki kodu Form1_Load ya da Main metoduna yazarak, WinForms uygulamasında konsolu kullanabilirsiniz.
\nusing System.Runtime.InteropServices;\n\nprivate void Form1_Load(object sender, EventArgs e)\n{\n CreateConsole();\n Console.WriteLine(\"Hello World!\");\n\n}\n\n[DllImport(\"kernel32.dll\", SetLastError = true)]\n[return: MarshalAs(UnmanagedType.Bool)]\nstatic extern bool CreateConsole();\nBöyle Form ve Konsol uygulaması birlikte çalışmış olacak. İyi çalışmalar
"},{"url":"/posts/yuksek-cozunurluklu-gorselleri-sikistirma/","relativePath":"posts/yuksek-cozunurluklu-gorselleri-sikistirma.md","relativeDir":"posts","base":"yuksek-cozunurluklu-gorselleri-sikistirma.md","name":"yuksek-cozunurluklu-gorselleri-sikistirma","frontmatter":{"title":"Yüksek Çözünürlüklü Görselleri Sıkıştırma (Compressor.JS)","subtitle":"Firebase gibi sistemlerin bir kotası bulunur. Bu sistemlere yüksek çözünürlüklü görseller yüklendiği taktirde istek indirme kotaları çok hızlı bir şekilde dolmaktadır. Bu gibi sorunları çözebilmek için resimlerin kalitesinden çok fazla ödün vermeden veri boyutlarını düşürmeği sağlayabiliriz. ","date":"2023-02-22T00:00:00.000Z","thumb_img_alt":"","content_img_alt":"","excerpt":"","canonical_url":"","author":"ihsansunman","template":"post","thumb_img_path":"images/Ekran görüntüsü_20230222_101735.png","content_img_path":"images/Ekran görüntüsü_20230222_101735.png"},"html":"Bu işlemi yapabilmek için Compressor.js isimli kütüphane bize yardımcı olacaktır. Aşağıda bulunan görsel giriş ve çıkış görsellerimizi göstermektedir. Fark edilemiyecek kadar küçük bir kayıp ile 2MB boyutlardan 50KB gibi boyutlara inebiliriz.
\n![\"Untitled\"](\"https://asnus.com/images/Untitled.png\")
Öncelikle kütüphanemizi projemize dahil edelim.
\nnpm install compressorjs\nAşağıda bulunan örnek bir React projesinde olacaktır. İlgili kütüphaneyi çağırarak %40 kalite düşürerek yeni bir görsel oluşturmasını sağlayalım.
\nimport React, { useState } from \"react\";\nimport Compressor from \"compressorjs\";\n\nconst FileInput = () => {\n const [file, setFile] = useState(null);\n\n const compressorImage = (file) => {\n // Eğer bir dosya gelmediyese fonksiyonu kırmak için kontrol sağlanır.\n if (!file) {\n return;\n }\n new Compressor(file, {\n // Kalite %40, genişlik ise maksimum 1000px olacak şekilde ayarlamalar verilir.\n // Bu ayarlamaları kendinize göre ayarlayabilirsiniz.\n quality: 0.4,\n maxWidth: 1000,\n success(result) {\n // Firebase File türünde veri istediği için çıkan görüntüyü dönüştürüyoruz.\n const outFile = new File([result], file.name, { type: result.type });\n // Sonuç görseli kullanabilmek için tanımlanan state'de aktarırız.\n setFile(outFile);\n },\n error(err) {\n console.log(err.message);\n },\n });\n };\n\n return (\n <>\n <input\n type=\"file\"\n onChange={(event) => {\n compressorImage(event.target.files[0]);\n }}\n accept=\"/image/*\"\n />\n </>\n );\n};\n\nexport default FileInput;\nArtık çıktımızı istediğimiz gibi kullanabiliriz. Doğrudan firebase gibi sistemlere iletebiliriz. Verilen örnekte çıkan Blob nesnesi File’a çevriliyor. Eğer Blob kullanmak isterseniz doğrudan çıkan result çıktısını kullanabilirsiniz.
Kök dosya sistemimizde ~/.vnc/xstartup dosyasını yönetici izni ile açalım.
\n#!/bin/sh\n\nxrdb $HOME/.Xresources\nxsetroot -solid grey\n#x-terminal-emulator -geometry 80x24+10+10 -ls -title \"$VNCDESKTOP Desktop\" &\n#x-window-manager &\n# Fix to make GNOME work\nexport XKL_XMODMAP_DISABLE=1\n/etc/X11/Xsession\nstartxfce4 &\nYukardakine benzer bir metin bizi karşılayacaktır. Sonuna şu ibareleri eklersek sorun düzelecektir.
\n#!/bin/sh\n\nxrdb $HOME/.Xresources\nxsetroot -solid grey\nx-terminal-emulator -geometry 80x24+10+10 -ls -title \"$VNCDESKTOP Desktop\" &\nx-window-manager &\n# Fix to make GNOME work\nexport XKL_XMODMAP_DISABLE=1\nunset SESSION_MANAGER\nunset DBUS_SESSION_BUS_ADDRESS\n\n/etc/X11/Xsession\n\nxfce4-panel &\nxfsettingsd &\nxfwm4 &\nxfdesktop &\npcmanfm &\nxfce4-terminal &\n