Vuejs ile ilgili localde proje geliştirmeye çalışıyorum ama daha ilk sayfadan ileriye gidemedim.
vuejs versiyon 3.3.0 kullanıyorum.
vue-cli3 kurulumunu yaptım ve gerekli olan vuex ve vue-router entegrasyonu yaptım.
yapmak istediğim olay firebase üzerinde bulunan bir veri tabanındaki verileri çekip uygulamama entegre etmek ve bu veriler üzerinde çeşitli işlemler yapıp bunları firebase üzerinde güncellemek.
veritabanını firebase üzerinde oluşturdum ve okuma-yazma izinlerini verdim.
daha sonra uygulamaya ekle diyerek web sayfasına eklemem gereken kodu aldım.
hata: error: 'firebase' is not defined (no-undef) at src\xxxxxx.js:
bu hatayı nasıl çöze bilirim konu hakkında bilgisi olan varsa lütfen yardımcı olsun.
İngilizce kaynaklardan çeşitli çözüm önerilerini aldım ama hiçbiri işe yaramadı. araştırmaya devam ediyorum bu arada buradan bilen olur diye sormak istedim.
söylediğiniz yöntemi daha önce denedim ama yine çözüme ulaşamadım. firebase yeni sürümü ile ilgili mi yoksa kurulum ile mi ilgili kestiremedim ve bu nedenle şimdi sıfırdan bir app kurup sadece firebası kısmını denemeyi düşünüyorum.
ayrıca sizin kodu uygularken şöyle bir hata aldım;
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
Javascript ve Vuejs konusunda çok tecrübesizim ama uygulamaya yaparak ilerlemek daha çok öğretici. çeşitli video ve ders notları ile çalıştım ancak uygulama yapmadıktan sonra hepsi silinip gidiyor.
birde ingilizce sorunu olunca aslında çok iyi bir durumda değilim ama bir şekilde öğrenemk için emek harcıyorum ve öğreneceğim. tabi sizlerin desteği ile olacak inşallah.
Bunlar hata değil, uyarı. WARN, "warning"in yani "uyarı"nın kısaltması.
Zamanla olur merak etmeyin. JavaScript, Node.js, NPM ve Vue.js’i öğrenmeye ara sıra biraz vakit ayırmanızı tavsiye ederim. Böylece öğrenme süreciniz biraz daha sancısız olur.
üstad söylediğiniz şekil yaptım ama sorun yine çözülmedi.
src klasörü altında firebase adında yeni bir klasör ekledim ve içerisinde index.js diye javascript dosyası oluşturup firebase den aldığım kodları ekledim.
eklediğim kodlar:
import firebase from ‘firebase’;
const config = {
apiKey: “xxxxxxxxxxxxxx”,
authDomain: “xxxxxxxxxxxxxxxxxxx”,
databaseURL: “xxxxxxxxxxxxxxxxx”,
projectId: “xxxxxxxxxxxx”,
storageBucket: “xxxxxxxx”,
messagingSenderId: “xxxxxxx”
};
firebase.initializeApp(config);
daha sonra main.js içerisine import '@/firebase'; diyerek import ettim. ihtiyaç duyulan sayfada artık firebase ulaşabiliyorum.
ama hala istediğim veriyi çekemedim. vuedevtools üzerinde vuex bakıyorum ama veriyi çektiğim dizi hala boş görünüyor. bu akşam bıkmadan yeniden bir uygulama klasörü oluşturup bu sefer işi çözeceğim inşallah.
eğer çözemezsem özelden dosyaları göndereceğim siz göz atarsınız
Özelden yardımcı olamıyorum; zaman bulamıyorum maalesef.
Firebase nasıl çalışıyor, bilmiyorum. Bir HTTP istemci ile birlikte mi geliyor yoksa ayrı bir HTTP istemci mi bulmanız gerek? Eğer bulmanız gerekiyorsa, Axios’u öneririm.
Bu arada neden çekemediniz veriyi, aldığınız bir hata var mı? Tam olarak ne denediniz?
Bir de Firebase’i kurma yolunuz hiç hoş değil, ileride başınıza dert açar; NPM yolunu kullanmanızda ısrarcıyım halen.
npm ile kurulum yaptım zaten ama kurulumdan sonra firebase bize bir APİ veriyor ve bunu sistemdeki ana dosyaya eklememiz gerekiyor. dediğiniz gibi npm ile kurulum yaptım ama firebase ile veriyi çekip bir diziye atıyorum ama vuedevtool ile bakınca dizi boş görünüyor. arka planda da aynı şekilde veriye ulaşamıyorum. neyse iş yerindeki pc de bakmıştım. birazdan sıfır bir app kurulumu ile sonkez test edeceğim. bakalım nasıl olacak.
edit: npm firebase ile ilgili şöyle bir döküman var ama açıkçası tam olarak algılayamadım durumu.
Bu sorun ile ilgili olarak bir çözüme ulaştım. daha sonra aynı sorun ile karşılaşan kişiler olur diye kısaca çözümü anlatayım.
öncelikle uygulamanın ‘src’ klasörünün içinde ‘firebase’ adında yeni bir klasör oluşturdum ve bu klasörün içerisine ‘config.js’ adında bir dosya oluşturdum.
oluşturduğum bu dosyanın içerisine firebase tarafından bana verilen kodu ekledim. config.js dosyasının içeriği aşağıdaki gibi olacak.
daha sonra terminal ile projenin bulunduğu dizinin içerisine girerek npm install firebase --save kodunu çalıştırarark projemize npm aracılığı ile firebase kurulumunu yapıyoruz.
kurulum bittikten sonra src klasörünün içinde bulunan main.js dosyasının içerisine import '@/firebase/config.js'; bu satırı ekleyerek oluşturmuş olduğumuz config.js dosyasını projemize klemiş oluyoruz.
bundan sonra firebase kullanmak istediğimiz dosyaların içerisine import firebase from 'firebase'; satırını ekleyerek gerekli erişimi sağlamış oluyoruz.
vuejs ile ilgili çeşitli tutorial takip edeceğim ve orda edindiğim bilgileri dilim döndüğü kadarı ile burada paylaşmayı hedefliyorum.
hocam sizin tavsiyeniz üzerine nodejs konusunda bazı kaynakları araştırdım ve gerçekten koca bir derya olmuş nodejs ve javascript alanı. Bazı konularda sizden fikir almak istiyorum bu soruları yanıtlarsanız çok sevinirim.
soruların bir kısmını yazdıktan sonra işin ana odak noktasından kaydığımı düşündüm ve bu nedenle bütün soruları özetleyen tek bir soru sorup sizden ve diğer arkadaşlardan fikir ve yorum bekliyorum. şimdiden teşekkürler.
**** Tek bir kişinin veya küçük bir ekibin bir projeyi sıfırdan tasarlıyacağını düşünürsek izlemesi gereken bir yol haritası nasıl olmalıdır? *****
Not: Lütfen en küçük adımı bile atlamayın. Örneğin olaya öncelikle arka planda başlamanız gerekiyor ise oradaki olayları adım adım basitçe yazarsanız çok sevinirim.
Benin aklımdaki yol haritası şöyle ama daha emin olamadığım için sizden fikir almak istiyorum.
1- Projeye için basit ve minimal özelliklere sahip bir arayüz tasarlamak. (Vuejs and CSS)
2- Arayüz tasarımından sonra veritabanı seçimi ve ihtiyaç duyulan tabloları vs. oluşturmak. (MYSQ veya MongoDB)
3- Proje için API tasarımını ve desteğini sağlamak. (GraphQL)
4- API desteğini sağladıktan sonra front-end kısımına yoğunlaşıp projeyi sonlandırmak. (Vuejs)
bunlar benim aklımdan geçen yol haritası ama çok fazla boşluklar var ve ciddi anlamda kafam karışıyor.
Bu konuda tecrübeli olan arkadaşların daha derli toplu bir yol haritası hazırlarlarsa sevinirim.
Günümüzde yapılan projeler ve izlenen geliştirme süreçleri için artık böyle bir yol haritası pek uygulanabilir değil. Eskiden nispeten küçük ve öngörülebilir olan projeler için böyle bir yol izlenebilirdi ama şu an projeler hem karmaşık hem de öngörülemez oldular. Çünkü gelişen teknoloji ve hızlanan bilgisayarlar ile daha iyi kullanıcı deneyimine sahip uygulamalar yapmak için uğraşmaya başladık.
Şu zamanda sıfırdan bir uygulama geliştirmek için daha “çevik” olmak gerek. Son zamanlarda popüler olan “agile” deyimi de “çevik” demektir zaten. Yani daha kısa süren döngülerde sürekli tekrarlamamız gerek. Örneğin, şöyle bir döngünüz olsun:
Bir özellik belirleme.
Bu özelliği analiz etme, nasıl yapılabileceğini planlama (Kısa ve öz bir şekilde.).
Bu özelliği gerçekleme.
Bu özellik için bir test yazma.
Bu özelliğin kodlarını refactor etme.
Bu adımları kısa periyotlar halinde (birkaç saat) uygulamalısınız ve kodunuzu her seferinde olabildiğince temiz tutmalısınız. Bu adımlar arayüz tasarımı, veritabanı, API, vb. kısımları içerebilir. Böyle yaparak önceden öngörülemeyen şeylere daha hızlı adapte olabilirsiniz.
Yani kısaca projeyi bir bütün olarak yazmak yerine yapboz parçaları gibi bölmek ve onu uygulamak en mantıklısı diyorsunuz.
birde nodejs alanı gerçekten çok korkutucu geliyor bana. seçenekler çok fazla ve karmaşık.
Şöyle bir twitter veya facebook gibi kullanıcıların sürekli etkileşim içerisinde olduğu ve real time olan bir uygulama için önerdiğiniz bir alet çantası var mı?
yukarıda benim aklımdan geçenleri belirtmiştim ama ciddi anlamda her özellik için farklı ihtiyaçlar doğuyor ve bunları karşılamak çok güç oluyor.
Gerçek zamanlı websocket uygulaması geliştirmedim hiç. Ama genel olarak Vue.js + Express + Bootstrap önerebilirim. Geliştirme süreci için ESLint + Mocha + Chai + Sinon önerebilirim. Authentication için Express tarafında Passport var, Vue.js tarafında da birçok kütüphane mevcut. Başka ihtiyaçlarınız için de Node.js ve JS taraflarında oldukça çok kütüphane var; karşılaştırma yaparak size en çok uyanını seçmeniz gerek.
Bunun oncelikle real-time olmayaninin yapilmasini tavsiye ediyorum. F5 ile calisiyor mu? Tamam, o zaman kullanici arayuzu, servisler, onlarin arayuzleri, database, bilmemne, hepsi oturmus demek.
Sonra kaldigi yerden devam eden feed mekanigi. Kullanici sayfada “kontrol et” butonuna bastiginda (veya x saniyede bir tetiklendiginde) sayfa kendini yenilemeden yeni yazilari/mesajlari gosterebiliyor mu? Tamam, kullanici arayuzu ve data sorgulari hazir demek.
Sonra, bir kullanicinin gormesi gereken yeni bir yazi/mesaj geldiginde bu kullanicinin bagli oldugu onyuzlerdeki “kontrol et” butonlarini tetiklemek. Gerektiginde olsun iste her sey. Bu noktada durabiliriz.
Ilerisinde onyuze “bir sey oldu, bir bak istersen” demek yerine dogrduan yeni datayi yollamak var. Sart degil ama, kullanici fonksiyonalitesi bir onceki asamayla (ve nihai hedefle) ayni.
