= Node.js ve Cloud Firestore DB kullanarak Google Firebase'de dinamik bir web sitesi barındırın =
Tushar Kapoor: (httpswww.tusharck.com/)
Demo Git URL'si: httpsgithub.com/tusharck/firebase-demo
= Neden Firebase Barındırma? =
Firebase, Google'ın altyapısı üzerine kurulmuş kapsamlı bir uygulama platformudur, bu nedenle içeriğinizi Google'da barındırmanın güvenli, hızlı, ücretsiz (ek kaynaklar için ücretli seçenekler de mevcuttur) ve kolay bir yolunu sunar. web veya mobil uygulamalar
== Ücretsiz kullanımın Temel Özellikleri ve Avantajları: ==
- Ücretsiz Özel alan adı verir&
SSL(SSL, https bağlantıları için standart bir güvenlik katmanı sağlar
- Cloud Firestore: İstemci uygulamalarında gerçek zamanlı veri senkronizasyonu için esnek ve ölçeklenebilir bir veritabanı
- Diğer Özellikler: Bulut İşlevleri, Bulut Mesajlaşma (FCM), Crashlytics, Dinamik Bağlantılar, Barındırma, ML Kiti, Depolama, Performans İzleme, Tahminler ve Test Laboratuvarı (Bu ürünlerin işlevselliği ve kaynakları ücretli bir plan satın alınarak artırılabilir, ancak ücretsiz katman hizmetleri çok iyi. Planlara bakmak için Firebase Fiyatlandırmasına bakın)
- Kaynakların otomatik ölçeklendirilmesi
= Dinamik web sitenizi Firebase'de barındırma adımları =
== Gereksinimler ==
**1. Google Hesabı**Bir Google hesabınız yoksa, kaydolmanız gerekir. Bunu httpsaccounts.google.com/SignUp adresine giderek yapabilirsiniz. **2. Node.js ve npm** Mac/WindowsYükleyiciyi httpsnodejs.org/en/download/ adresinden indirebilirsiniz. linux
Node.js'yi yüklemek için aşağıdaki adımları izleyin:
1. Bir terminal açın
2. Aşağıdaki komutları çalıştırın:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
kurulum_13.x| sudo bash -sudo apt install nodejs **Kullandım Not: ** **
setup_13.xçünkü eğitim sırasında en son sürüm şuydu:
**13**httpsnodejs.org/en/ adresine giderek en son sürümü kontrol edebilirsiniz.
Node.js ve npm'nin başarıyla yüklenip yüklenmediğini kontrol etmek için, kurulu sürümün çıktısını alacak aşağıdaki komutları çalıştırın:
düğüm -v
npm -v
**3. Firebase-CLI (Komut Satırı ArayüzüBunlar, Firebase projelerini yönetmek, görüntülemek ve dağıtmak için kullanılan araçlardır.
npm install -g firebase araçları
= 1. Adım: Firebase projesi oluşturun =
- httpsfirebase.google.com adresine gidin ve
Sağ üst köşeden Giriş Yapın
- Tıklamak
Sağ üst köşeden konsola gidin
- Ardından tıklayın
Aşağıda gösterildiği gibi proje oluşturun
4. Sonraki şey, projenizin adını girmek ve devam düğmesine basmaktır.
5. Firebase projeniz için Google Analytics'i etkinleştirmek üzere devam düğmesine basın (istemiyorsanız devre dışı bırakmak için işaretleyin)
6. Google Analytics için en yakın konumu seçin
7. tıklayın
**Proje oluşturun ve yüklenmesini bekleyin. Sonra aşağıdaki gibi bir şey göreceksiniz
= 2. Adım: Firebase girişini başlatın =
- Bir komut satırı/terminal açın, ardından yeni bir dizin oluşturun ve bu dizine gidin
mkdir my-firebase-projectcd my-firebase-project
2. Firebase'de bir web sitesi barındırmak için aşağıdaki komutu kullanarak firebase'e giriş yapın. Komutu çalıştırdıktan sonra, Google kimlik bilgilerinizi kullanarak firebase'de oturum açmanızı isteyen bir tarayıcı penceresi açılır. Kimlik bilgilerini oraya girin, Firebase sisteminizde oturum açacaktır.
Firebase girişi
= 3. Adım: Sisteminizde Firebase projesini başlatın =
- Şimdi Firebase konsolunda oluşturduğumuz projeyi sisteme başlatmamız gerekiyor. yapmak için aşağıdaki komutu çalıştırın
ateş üssü başlangıcı
2. Aşağı tuşuna basın ve ardından seçin
**iki şey **boşluk çubuğuna basarak
- Fonksiyonlar
- Barındırma
Sonra
**devam etmek için Enter'a basın**
3. Ardından seçin
sonra entere basın
**Mevcut bir projeyi kullanın**
4. Enter tuşuna basın.
**my-firebase-project** **veya kullandığınız proje adı veya kullandığınız proje adı
5. Seçin
**Javascript** ve enter tuşuna basın
6. diyebilirsin
**Hayır** olası hataları yakalamak ve stili uygulamak için ESLint'i kullanmak istiyor musunuz?
7. Tip
**Evet** npm ile bağımlılıkları kurmak için
8. Burada iki görev yapmalıyız:
- Web sitenizin ve varlıklarınızın yer alacağı dizini seçmelisiniz. varsayılan olarak
pubicdevam etmek için enter tuşuna basabilir veya istediğiniz dizin adını değiştirebilirsiniz
- Türler
Dinamik URL'lerinizin uygun hedeflerine yönlendirilebilmesi için tek uygulama sayfası için evet
9. Aşağıdaki komutu çalıştırarak firebase uygulamasını yerel sisteminizde test edin. Sonra şuraya git
**httplocalhost:5000** temel web sitenizin çalıştığını görmek için
firebase hizmeti -- yalnızca barındırma, işlevler
Açtıktan sonra aşağıda böyle bir şey görmelisiniz.
**httplocalhost:5000** URL'si
10. Sunucuyu terminalden kapatın
= Adım 4: Paketlerin yüklenmesi ve dinamik web sitesi için görünüm dizini oluşturulması =
- Burada kullanmak için functions dizininin içine geçeceğiz
cd işlevleri
**2. Install Express**Minimal ve esnek bir Node.js web uygulama çerçevesidir.
npm i ifade -- kaydet
**3. Tutma Çubuklarını Kurun**Web sitesinin dinamik ön ucu için kullanılan Node.js için şablon oluşturma motorudur.
npm i gidon -- kaydet
**4. Konsolide kurun**
npm i konsolide ediyorum -- kaydet
5. adlı bir klasör oluşturun.
**views** içinde tüm ön uç kodunu saklayacağımız **functions** klasörü
mkdir
Görüntüleme
6. Aşağıdaki komutu çalıştırarak ana dizine geri dönün:
cd .
= Adım 5: Firestore (Bulut Veritabanı) Kurulumu =
== Veritabanı Yapılandırması ==
- httpsconsole.firebase.google.com/ adresine gidin
- Projenizi seçin
- Seçme
Soldaki bölmeden veritabanı
4. tıklayın
**Veritabanı yarat**
5. Test modunda başlat'ı seçin çünkü aksi halde sisteminizden veritabanına erişemezsiniz. Web sitesinin geliştirilmesini tamamladığımızda bu ayarı değiştireceğiz.
Sonra tıklayın
**Sonraki** bunu yaptıktan sonra
6. Firestore DB'nizin konumunu seçin
**Bu konumu ayarladıktan sonra daha sonra değiştiremezsiniz. Not: **
== Veri Oluştur ==
- Koleksiyonu başlat'a tıklayın
2.
**Şimdilik örnekleyebileceğiniz Koleksiyon Kimliği
3. Örnek verileri girin. Giriş
**sample_doc **, **Belge Kimliği olarak. **** Alanına **Başlık** girin. **Değer içinde Cloud**'u beğendim Ardından **Kaydet**'i tıklayın
= 6. Adım: Web sitesinin dinamik içeriğini oluşturmak =
Kısmı ikiye ayıracağız, ilk kısımda Firestore'dan nasıl veri çekeceğimizi ve web sitesinde nasıl kullanılacağını göreceğiz. İkinci bölümde, form verilerinin nasıl gönderileceğini göreceğiz.
**İlk olarak, Firestore'a erişmek için kimlik bilgilerini indireceğiz**
2. tıklayın
**ayarlar**'ı sol bölmeden seçin ve **Proje ayarları**'na gidin
3. Git
**Hizmet hesapları** ve **Yeni özel anahtar oluştur'a tıklayın
4. tıklayın
**Anahtar Oluştur Anahtarı indirmek için bir açılır pencere verecektir. Anahtarı web sitenizin **işlevler** klasöründe saklayın
== Firestore'dan getiriliyor ==
- Açık
index.jsinişlevler klasörünün içinde
2. Uygulamamızda kullanmak istediğimiz bazı kütüphaneleri tanımlamamız gerekiyor. Bunlar daha önce kurduğumuz kitaplıkların aynısı
const işlevleri = request('firebase-functionsconst express = request('expressconst motorları = request('consolidatevar hbs = request('handlebarsconst admin = request('firebase-admin)
3. Burada birkaç şey belirledik:
- Ekspres kullanarak uygulamayı başlat
- Motorumuzu gidon olarak ayarlayacağız
- Ardından ifadeye ön uç kodumuzun görünümler klasörünün içinde olacağını söyleyeceğiz.
const uygulama = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs)
4. Uygulamanızı Firestore DB'nize erişmesi için yetkilendirin
*Not:*
1. Değiştir
**YOUR_SDK_NAMEjson, **Firestore2'ye erişmek için indirdiğiniz dosyayla birlikte **kimlik bilgileri. Veritabanı URL'sini veritabanı URL'niz olarak değiştirin. URL'yi görmek için**Ayarlar >Hizmet Hesabı**'nı yapabilirsiniz.
var serviceAccount = gerektir
YOUR_SDK_NAME.jsonadmin.initializeApp({kimlik bilgisi: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com)
5. Firestore'dan veri alma işlevi
- Koleksiyon kimliği
örneklem
- Belge Kimliği:
örnek_doc
Örnek verileri girerken yukarıdakileri tanımladık
zaman uyumsuz işlev getFirestoreconst firestore_con = bekliyor admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Böyle bir belge yok }
başka {doc.data'yı döndür
.catch(err =>{ console.log('Belge alınırken hata oluştu', errreturn writeResult
}
**Not: ** **async** kullanıyoruz çünkü Veritabanı ile web sitemiz arasında taahhüt işleminin tamamlanmasını beklemek zorundayız
6. Rotayı oluşturun ve sonucu ön uca gönderin
app.getasync (istek,yanıt) var db_result = wait getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Oluştur
**views** klasörünün içindeki **index.hbs**. hbs bir el çubuğu dosyasıdır Not: **
8. İçine bu temel HTML kodunu yazın
**index.hbs** getirilen sonucu görmek için
Tushar Chand Kapoor
