React'ın temellerini biliyorsanız ikisini birlikte yürütebilirsiniz.
Başlangıç için belki faydası olur: https://ebykdrms.gitbook.io/next-js-turkce-dokumantasyonu/
Yazdıklarım tamamen benim bakış açım. Kendi düşüncelerim.
Context iyidir. Redux, henüz Context'in olmadığı zamanlarda ihtiyacı kapatmak için oluşturulmuş bir proje olarak piyasada kendine büyük yer açtı. Ama artık Context var. Doğrudan react ile birlikte geldiği için ekstra kurulumlara gerek yok. Şu an Redux'ın çok kullanılmasının nedeni vaktinde piyasaya yayılmış olması sadece. Eğer redux, context'ten sonra ortaya çıkmış olaydı piyasa çoğunlukla context'in kolaylığından vazgeçip redux karmaşasına girmezdi. Tabi zaman içinde redux da gelişiyor ama ben Context öneririm. Redux'a karşı mutlaka olması gereken herhangi bir eksikliğini görmedim.
Gerçi bana sorarsanız Svelte dururken React da kullanılmamalı. Hem performans hem kullanım kolaylığı açısından kendini kanıtlamış Svelte dururken React kullanılması da React'ın piyasayı ele geçirmiş olmasından kaynaklanıyor. Svelte eğer React'tan önce çıksaydı pek kimse React veya Vue kullanmazdı. Tabi Svelte topluluğu henüz yeterince büyük olmadığı için bir sorun yaşadığınızda stackoverlow'dan hazır cevaplar bulma olasılığınız diğerlerine göre çok düşük. Sorunlarını çözmek için doğrudan projenin github hesabına issue'ler açmanız veya İngilizce dokümantasyonlarda bol bol dolaşmanız gerekebilir.
Bu seçim biraz da sizin olaya bakış açınızla alakalı.
if site performansının bir miktar yavaş olması çok önemli değilse ama hızlı çözümler üretip hızlıca değişikliklerinizi yayına almaya öncelik veriyorsanız:
- React, Vue, Angular, Svelte vs. yerine JQuery kullanın. JQuery büyük projelerde de kullanılır/kullanılıyor. JQuery'nin yavaşlığı biraz da onu yanlış kullanmaktan kaynaklanıyor. Elinizde JQuery kolaylığı var diye sürekli DOM'da element seçip manipulasyon yapmaya kalkarsanız tabii ki yavaş olur. Ama buna dikkat ederseniz, yani DOM'la minimum etkileşime girecek şekilde işlemlerinizi javascript'in arkaplanda yapmasını sağlarsanız ve DOM'a sadece gerektiğinde müdahale ederseniz aşağı yukarı React'ın Sanal DOM olayını gerçekleştirmiş olursunuz. Aradaki performans farkı da son kullanıcının fark edebileceği veya önemseyeceği kadar büyük olmaz.
else if mümkün olduğunca sade (okunaklı, anlaşılır) ve performanslı bir uygulama geliştirmeye öncelik veriyorsanız:
- React, Vue, Angular yerine Svelte kullanın. Büyük projelerde kullanma tercihi tek başına size kalmıyor genelde çünkü bir büyük projeler ekiple geliştirilir ve bir ekipten herkesin Svelte bilmesi pek mümkün olmuyor. Ama pekala büyük projelerde kullanılabilir. Hatta bence büyük projelerde özellikle tercih etmek lazım çünkü proje büyüdükçe kod karmaşası artacaktır. Svelte bu karmaşayı minimumda tutmaya çalışır.
- React kullanmanız gerekiyorsa Redux yerine Context API kullanın.
else if React kullanmak zorundaysanız/istiyorsanız ve mümkün olduğunca ekstra araçlardan kaçınarak projenizi sade tutmak istiyorsanız:
- React kullanın. Yüzlerce büyüklü küçüklü proje yazılmış. Binlerce soruna çözümler bulunmuş. Yavaş da olsa React projesi halen geliştiriliyor ve iyileştirilmeye çalışılıyor.
- Context API kullanın. Redux projenizde işinizi sağlam yaptığınızı hissettiğiniz ama aslında Context ile yapacağınız işleri biraz daha dolambaçlı yaptığınız bir sistem. (Evet Redux'a karşı biraz acımasız yaklaştığım doğrudur.)
else if daha kolay işe girebileceğiniz, yani işi paraya çevirmeye öncelik veriyorsanız:
- Mutlaka React kullanın. Kendi kişisel web sitenizi de yapsanız, freelance işler de yapsanız, ücretsiz uygulamalar da geliştirseniz ille de React kullanın. Yaptığınız işler size referans olacaktır. React biliyor olmanız sizi bugün için aranan eleman yapar.
- Context API'ın temel mantığını da bilin ama Redux'ı iyi bilin ve kullanın. Geçmişte bir çok büyük proje redux kullanarak kodlandı. Bi'gün büyük bir projeye dahil olmaya (büyük bir firmada işe girmeye veya freelance bir projeye dahil olmaya) çalıştığınız zaman redux bilmemek sizi eler.
else
- Pure javascript kullanın. Doğru kurallara dikkat ederek yazarsanız üstteki
iflerin hiçbiri bunun performansına yetişemez (ama svelte çok yaklaşır).
1.Çözüm
Doğrudan veritabanında bir değişiklik olunca sunucu terminalinden bir komut çalıştırmak istiyorsunuz.
Örneğin veritabanında bir update işlemi gerçekleştiğinde sunucunun bir PHP dosyasını çalıştırmasını istiyorsunuz.
stackoverflow'daki şu başlık size bir başlangıç verebilir:
Başlık: Shell komutlarını MySQL fonksiyonundan çalıştırmak
Soru: Bir MySQL fonksiyonu kullanarak mesela bir dosyayı bir klasörden diğerine taşımak için shell komutları kullanılabilir mi?
Cevap: MySQL'de böyle bir özellik yok ama lib_mysqludf_sys kütüphanesini yüklerseniz sys_exec komutunu kullanabilirsiniz:
DELIMITER @@
CREATE TRIGGER Test_Trigger
AFTER INSERT ON MyTable
FOR EACH ROW
BEGIN
DECLARE cmd CHAR(255);
DECLARE result int(10);
SET cmd=('mv path/to/file new/path/file');
SET result = sys_exec(cmd);
END;
@@
DELIMITER ;
(Bu örneği http://crazytechthoughts.blogspot.com/2011/12/call-external-program-from-mysql.html sitesinde buldum.)
Görüldüğü gibi, MySQL içinde bir trigger fonksiyonu yazılmış. Bu fonksiyon sizin data busenizdeki değişimle tetiklenecek. Tabi önce bahsedilen kütüphanenin kurulmuş olması gerekiyor. Bu sizin için bir başlangıç olabilir.
Bu işlemleri yapabilmeniz için sunucu üzerinde böyle kurulumlar yapabilecek yetkilere sahip olmalısınız tabi. Paylaşımlı sunucularda böyle şeyler yapamazsınız.
2.Çözüm
Olayı MySQL'e karışmadan çözmek isterim derseniz de belli bir PHP sayfasının mesela 10 saniyede bir tetiklenmesini sağlamak için sunucuya bir cron kurmalısınız.
Bununla ilgili başlangıç noktası olarak şu kaynağı verebilirim: https://www.cliaweb.com/knowledgebase/16/cron-jobs-nedir-nasil-kurulur-ayarlari-nelerdir.html
3.Çözüm
Hem sunucuya bi'şey kurmayayım hem veritabanına dokunmayayım derseniz tüm gün açık duracak bir bilgisayarda (evinizdeki bilgisayarınız) masaüstü program yazarak mesela 10 saniyede bir sitenizin bir PHP sayfasına istek atabilirsiniz. Bu PHP sayfası veritabanını kontrol edip duruma göre mail gönderiminden sorumlu olur.
electronjs ile nodejs kullanarak masaüstü uygulama yazmaya başlayabilirsiniz.
PHP kullanarak da masaüstü uygulama yazabilirsiniz.
Python ile de masaüstü uygulama yazabilirsiniz. (Önerim bu olur)
4.Çözüm
Masaüstü program da yazmayayım derseniz bilgisayarınızda görev zamanlayıcılardan yararlanabilirsiniz. Yine bilgisayarınız sürekli açık duracak ve sitenizdeki ilgili PHP sayfasına istek atacak.
https://www.zulfumehmet.com/windows-task-scheduler-olusturma/
5.Çözüm
Benim bilgisayarım sürekli açık duramaz derseniz arkaplanda çalışacak bir mobil uygulama yazarak da bu işlemi gerçekleştirebilirsiniz. Telefonunuz sürekli açıksa ve internete bağlıysa bu yöntem de işe yarayabilir.
Bu işe başlamanız için mükemmel olmanız gerekmiyor. Bu işte öğrenmenin sonu yok zaten. Bi'şeyler ürettiğiniz sürece teknik anlamda her şeyi bilseniz bile kurgusal anlamda sürekli gelişiyorsunuz.
Freelance iş alırken işin sadece HTML, CSS ve JS ile tamamlanabilecek işleri seçebilirsiniz. Bu tip siteler bir yönetim paneli olmayan, iletişim formu olmayan, çok fazla ürün içermeyen siteler olacaktır. Hatta muhtemelen karşına sıklıkla zaten hazırlanmış bir tema üzerinde değişiklikler yapman gereken işler çıkacaktır.
Eğer kendinize çok sayfalı bir kişisel web sitesi yapabilmişseniz hazırsın demektir. Ama bu kişisel web sitesini yaparken HTML, CSS, JS ile çözülebileceği halde çözemeyip es geçtiğiniz kurgular varsa hazır değilsinizdir. Kendi sitenizde HTML,CSS,JS ile yapılabilecek aklınıza gelen her şeyi yapabilmişseniz hazırsınızdır.
Çoğunlukla HTML,CSS,JS ile freelance alacağınız işler basit işler olur. Müşteri "Kurumsal web sitesi teması satın aldım ama şimdi bunu kendime göre düzenlemem gerekiyor" der mesela. Burada sadece sitedeki görselleri ve metinleri değiştirmeniz, CSS ile sitenin genel temasını değiştirmeniz yeterli olur. Haliyle müşteri bu işin kolay olduğunu düşünüp az para teklif eder.
İşleri biraz daha büyütmek için PHP iyi bir başlangıç olacaktır. Çünkü bu tip işlerden yürürken sunucu taraflı bazı işlemler de yapmanız istenebilir. Örneğin iletişim formundan mail göndermek istiyorsanız ve 3.parti hizmetlere güvenmiyorsanız form'daki verileri alıp PHP'ye iletip PHP'nin mail atmasını sağlamanız gerekir mesela.
Bu gibi durumlarda müşteri sizi gelişmeye zorlar. "Site tamam da iletişim formu da ekleyemez miyiz?" der mesela. Zaman içinde bu itiklemelerle neyi öğrenmeye ihtiyacınız olduğunu da görmüş olursunuz.
Ayrıca müşterilerinizin sizi kandırmak için birçok oyunu olduğunu göreceksiniz. Örneğin size bütün siteyi yaptırdıktan sonra "şu ufak isteğimi de yapabilir misin?" der. Siz "elime yapışmaz yapayım da bitsin" dersiniz. Sonra müşteri "Çok güzel, harika oldu ama sadece şunu da eklesek ne güzel olur." der. Böyle böyle çaktırmadan zamanınızı yiyerek az paraya çok iş yaptırır.
Bir başka oyunda da müşteri bazı konuları muallakta bırakır. İş tamamlandıktan sonra "ben sana böyle dememiştim" der. Eğer müşteriyle yazılı olarak net bir görüşme yapmamışsanız sizi ekstra isteğini yapmazsanız işi almayacağını söyleyerek tehdit eder. Yine size ekstra bir işi uygun fiyatla yaptırma çabaları...
Başka bir oyunda da müşteri sizden birkaç örnek çalışma ister ve iyi fiyat teklif eder. Siz örnek çalışmayı gönderdiğinizde de başkasıyla anlaştığını söyleyip sizinle irtibatı keser ve başkasına sizin hazırlayıp ücretsiz olarak eline verdiğiniz siteyi uygun fiyata düzenletir.
Bazısı sizi baştan manipule eder. "Daha önce bi'yazılımcıyla çalıştım. Parasını da peşin peşin verdim. Sonra web sitemi tamamlamadan ortadan kayboldu." der. Güya güveni sarsılmıştır. İşin arka planındaysa genellikle bol bol revizeler isteyerek 1000 liraya 5000 liralık site yaptırmaya çalıştığı yazılımcı en sonunda dayanamayıp işi bırakmıştır ve aldığı para da o zamana kadar yaptığı işi zaten karşılamıyordur bile...
Klasik oyunlardan biri "sen bu işi uygun fiyata yap bunun arkasında daha bir sürü iş vereceğim sana" yalanıdır. Müşteri burada doğru söylüyor olsa bile o arkadan gelen işlerin hepsini de ucuza yapmanızı bekleyecektir. Sonraki işlerde fiyatı artırmaya kalktığınızda da bu maliyeti karşılayamayacağını söyler ve yerinize sizin ilk günkü halinize benzer birini arar. Bu tip müşteriler sizinle kapıları tamamen kapatmazlar. Çünkü güvenilir yazılımcı bulmak kolay değildir ve bulamazsa işi size yaptırmayı denemek isteyecektir.
Bunlar dışında ödemelerinizi geciktirenler, "bi'yerden para bekliyorum o gelsin sana da paranı vereceğim" deyip ortadan kaybolanlar, hatta en yüzsüzleri de işi yaparken çok iyi gidiyor deyip iş bitince agrasif tavırla yaptığınız işi beğenmediğini söyleyerek ödeme yapmayı tümden reddedenler...
Eğer böyle oyunlara karşı sabrınız varsa ve hatta kendiniz de bir oyun kurucuysanız freelance işler yapabilirsiniz ama genelde hem yazılımda hem insan manipulasyonunda iyi olmak, o sabır, pek rastlanan bir durum değil. Bunlarla uğraşamam ben derseniz tavsiyem bu işlere küsmek yerine bunlarla uğraşacak biriyle ortaklık kurmanız olur. Siz müşteriyle asla iletişime geçmezsiniz. İletişimi bir aracı arkadaşınız üzerinden yürütürsünüz. O arkadaşınız müşteriyle onun anlayacağı dilden konuşmayı da, yaptığınız eksik kalan işleri müşteriye kabul ettirmeyi de, parasını peşinen tahsil etmeyi de bilir. Siz daha az kazanırsınız belki ama kafanız rahat olur. Ayrıca kendinizi yazılım işinde geliştirmek için arkadaşınızdan zaman satın almış olursunuz.
Aslında demem o ki, başlayın ve kendi deneyimlerinizi yaşayın. Potansiyelinizi görün. Belki de bu işler tam sizliktir kim bilir?
En kötü ihtimalle müşterinizin işini teslim edemezsiniz. O zaman parasını da almazsınız olur biter. Ama edindiğiniz tecrube size kalır.
Eğer çok uygun bir fiyat öneriyorsanız müşteriyle bu işte yeni olduğunuzu, işi layıkıyla yapamama endişeniz olduğunu, işi tamamlayamazsanız parayı geri iade edeceğinizi veya hiç para almayacağınızı da dürüstçe söyleyebilirsiniz. Çoğu müşteri buna anlayışla yaklaşacaktır çünkü müşteri sizde minnet duygusu yaratarak gelecekte de size ucuza iş yaptırabileceğine inanır. Ayrıca müşterinin size gelecekte de iş yaptırma ihtimali varsa sizinle iletişimini kötü şekilde sonlandırmak istemez.
Ben de @munzevi gibi müşterinin böyle oyunlarla yaklaşanına veya anlamsızca kendini üstün görmesine tahammül edemediğimden iletişim problemleri yaşadığım için çok uzun zamandır freelance iş almıyorum.
Merhaba.
Ajax isteğinizi, her tuşa basıştan 300ms sonra atmanız gerekiyor. Tabii ki bu 300ms sayacı her tuşa basışta sıfırlanmalı.
let timeoutCounter = null; // 300ms'lik sayacımızı tutacak değişken.
$inputElement.on("input", function() {
clearTimeout(timeoutCounter); // input'a bir giriş olduğu için 300ms'lik sayacı sıfırlamak için temizleyelim. timeoutCounter değişkeni null'sa zaten bi'şey olmayacak. null değilse, setTimeout fonksiyonu iptal edilmiş olacak.
const text = $(this).val(); // İstekle gönderilecek text'i alalım.
if(!text) return; // text boşsa işlem yapılmayacak.
timeoutCounter = setTimeout(function() { // Sayacı sıfırlamıştık. Şimdi 300ms'ye tekrar kuralım ve sayacı timeoutCounter değişkenine atayalım.
$.ajax({ ... }); // Ajax isteği burada atılabilir. 300ms sonunda istek atılacak.
}, 300);
});
Herkese çok detaylı, uzun ve teknik cevaplar vermeye çalışmamın nedeni aslında cevabı doğrudan soruyu sorana yönelik yazmamam.
Aslında çoğu kez soruyu soranların zaten cevaplarımda anlattıklarımın çoğunu bildiklerini farkındayım.
Ama ben cevaplarımı, konu hakkında az bilgisi olup da araştırırken cevabımı gören olursa onun için de anlaşılır olsun diye düşünerek yazıyorum.
Ama tabi prototurk.com soru cevap bölümünün arama özelliği henüz iyileştirilmediği için çoğunlukla yazdıklarım boşa gidiyor tabi... :( Ama bir gün arama bölümü geliştirilirse kaynaklar hazır olsun istiyorum.
Tayfun Erbilen'e instagram üzerinden buraların geliştirilmesine destek olabileceğimi söyledim ama ya görmedi ya güvenmedi. :)
Açıkçası Chrome eklentisi yazmak üzerine "Merhaba Dünya" dışında pek pratiğim yok.
Extension yazarken storage'a bu şekilde veri basıldığını bile sorunuzdan öğrendim. :)
Cevabım çalışsaymış iyiymiş. :/
Ben sorunuzu görüp diğer cevaplarınızı da okuyup anlayıp cevap yazmaya başladığımda pes etmişsiniz :D
Doğru cevabınızı görmeden bir cevap yazmış oldum (aşağılarda bulabilirsiniz).
Benim cevabımı yazmaya başlamam asenkron bir fonksiyon olsun ve bir obje döndürecek olsun.
Sizin doğru cevap olarak işaretlediğiniz cevap da asenkron bir fonksiyon olsun ve o da obje döndürecek olsun.
Benim fonksiyonum sizinkinden önce başladı ama sonucu sizinkinden sonra döndü.
Eğer sizin cevabınızın sonunda console.log(ebykdrms.cevap, munzevi.cevap) diye bir komut olsaydı
normalde beklenen şey benim cevabım henüz oluşmadığı için (çünkü sizin fonksiyonunuzdayız) ilk parametre için undefined, ikinci parametre için sizin cevabınız olurdu.
Gel gelelim javascript (cevaplar obje oldukları için) ikimizin de cevabını ekrana basacaktı.
Ama şöyle doğrudan string'ler içeren bir komut verseydiniz:
console.log(ebykdrms.cevap.metin, munzevi.cevap.metin); o zaman ilk parametre undefined olarak görünecekti.
Bu da öylesine bir cevap olsun :D
Adım adım işlemleri okuduğumda şöyle bir işleyiş gördüm:
1) Sınıftan nesne oluşturduğunuz anda kurucu fonksiyon çalışıyor.
2) conf = {} ataması yapıyorsunuz.
3) storageData() fonksiyonunu çağırarak data = { lang: 'en', testData1: 1, testdata2: 2 } işlemini sağlyorsunuz.
4) datadaki veriyi Object.entries() işlevinden geçirip şu diziyi elde ediyorsunuz:
[ ["lang", "en"], ["testData1", 1], ["testData2", 2] ]
5) forEach() ile bu dizi üzerinde dönmeye başlıyorsunuz. Döngüyü adım adım işlersek:
5.1) key="lang" ve val="en" iken chrome.storage.local.get("lang", (obj) => {...}) işlevini çağırıyorsunuz. Bu asenkron bir fonksiyon olduğu için henüz sonuçlanmadan döngünün 2.adımına geçiyorsunuz.
5.2) key="testData1" ve val=1 iken chrome.storage.local.get("testData1", (obj) => {...}) işlevini çağırıyorsunuz. Bu asenkron bir fonksiyon olduğu için henüz sonuçlanmadan döngünün 3.adımına geçiyorsunuz.
5.3) key="testData2" ve val=2 iken chrome.storage.local.get("testData2", (obj) => {...}) işlevini çağırıyorsunuz. Bu asenkron bir fonksiyon olduğu için henüz sonuçlanmadan döngünüz bitiyor.
6) Döngü bitti. Henüz asenkron fonksiyonlar sonuç döndürmedi. Yani getData2() fonksiyonu çalışmadığı için henüz conf.lang değeri de dolmadı.
7) conf.now key'ini doldurduğunuz sırada henüz conf.lang key'i tanımlanmadı.
console.log(this.conf, this.conf.lang) sizi yanıltıyor. İlk parametrede obje, ikinci parametrede string gönderdiğiniz için, javascript de objelere ve string'lere farklı yaklaşımlar sergilediği için size yanıltıcı sonuçlar gösteriyor.
console.log() fonksiyonu okunduğu andan ekrana basma işlemini gerçekleştirene kadar geçen sürede this.conf.lang değeri dolmuş oluyor.
Yani console.log(this.conf, this.conf.lang) komutunu verdiğiniz anda şunu söylemiş oluyorsunuz: console.log(obje, "string")
Ekrana basılma sırasında console.log() string değeri doğrudan hafızasında tutarken, ilk parametredeki objenin sadece referansını tutuyor. Bu yüzden ekrana basılırkenki string değer gerçekten console.log() komutu ilk çağırıldığındaki değer olurken obje değeri ekrana basılma anındaki değer neyse o oluyor.
Eğer objenin de o andaki değerini almak istiyorsanız komutu şu şekilde düzeltmelisiniz:
console.log(JSON.stringify(this.conf), this.conf.lang); Böylece iki parametrede de string değer aldığı için çağırıldığı andaki değerler neyse onu yazdıracaktır.
Yani sizin obje olarak basınca değer var ama direkt değeri basınca değer yok olarak bahsettiğiniz olay javascript'in objeleri tutuş biçimindeki yaklaşımından kaynaklanıyor. (Ki aslında bu tutuş biçimi javascript'in yüksek performanslı olmasını sağlayan en büyük etkenlerden biri)
Sorunun çözümü olarak, emin değilim ama, conf.now key'ine değer atama işlemini callback fonksiyonunun içinde yapmanız gerekiyor olabilir.
Yani:
constructor() {
this.conf = {};
Object.entries(this.storageData().data).forEach(([key, val]) => {
chrome.storage.local.get(key, obj => {
if(!obj[key]) chrome.storage.local.set({[key]:val}, this.getData2({[key]:val}));
else this.getData2(obj);
if(key=="lang") {
this.conf.now = new Intl.DateTimeFormat(this.conf.lang, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
timeZoneName: 'longGeneric',
timeZone: this.conf.timeZone
}).format(new Date(Date.now()));
console.log("in callback: ", JSON.parse(JSON.strinify(this.conf)), this.conf.lang);
}
});
});
console.log("in constructor: ", JSON.parse(JSON.strinify(this.conf)), this.conf.lang);
}
React ile site yazıyorsanız aslında tek bir sayfaya sahipsiniz.
React projenizden build aldığınızda size bir grup dosya çıkaracak. Bu dosyalar node.js ile artık bir bağı kalmamış dosyalardır.
.htaccess yardımıyla PHP'ye gelen istekleri buraya yönlendirirseniz react projeniz PHP sunucuda çalışacaktır.
Eğer veritabanından sorgu sonucu dönmüyorsa query() fonksiyonu false dönüyordur.
Bu durumda siz if koşulunda aslında false->rowCount() yazmış gibi oluyorsunuz.
Hata da bundan bahsediyor: boolean bir değer üzerinde sanki objeymiş gibi rowCount() fonksiyonu çağırıyorsun
Bu hatadan kurtulmak için if koşulunu değiştirmelisiniz.
$vList = $db->query("SELECT * FROM news where news_category='30'", PDO::FETCH_ASSOC);
if($vList){
foreach ($vList as $vkey => $List) {
$Dizi[] = $List["news_title"];
}
}