= Hostuj dynamiczną witrynę internetową w Google Firebase przy użyciu Node.js i Cloud Firestore DB =
Tushar Kapoor: (httpswww.tusharck.com/)
Demonstracyjny adres URL Gita: httpsgithub.com/tusharck/firebase-demo
= Dlaczego Hosting Firebase? =
Firebase to wszechstronna platforma aplikacji zbudowana na infrastrukturze Google, dzięki czemu zapewnia bezpieczny, szybki, bezpłatny (dostępne są również płatne opcje za dodatkowe zasoby) i łatwy sposób hostowania treści na aplikacje internetowe lub mobilne
== Kluczowe funkcje i zalety darmowej warstwy: ==
- Daje bezpłatną domenę niestandardową&
SSL(SSL zapewnia standardową warstwę bezpieczeństwa dla połączeń https
- Cloud Firestore: elastyczna i skalowalna baza danych do synchronizacji danych w czasie rzeczywistym między aplikacjami klienckimi
- Inne funkcje: Cloud Functions, Cloud Messaging (FCM), Crashlytics, Dynamic Links, Hosting, ML Kit, Storage, Performance Monitoring, Predictions and Test Lab (Funkcjonalność i zasoby tych produktów można zwiększyć, kupując płatny plan, ale usługi warstwy bezpłatnej są bardzo dobre. Aby zapoznać się z planami, sprawdź Cennik Firebase)
- Automatyczne skalowanie zasobów
= Kroki, aby hostować dynamiczną witrynę w Firebase =
== Wymagania ==
**1. Konto Google**Jeśli nie masz konta Google, musisz je założyć. Możesz to zrobić, przechodząc na stronę httpsaccounts.google.com/SignUp. **2. Node.js i npm** Mac/Windows Możesz pobrać instalator ze strony httpsnodejs.org/en/download/. Linuks
Wykonaj poniższe czynności, aby zainstalować Node.js:
1. Otwórz terminal
2. Uruchom następujące polecenia:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs ** Użyłem Uwaga: ** **
setup_13.xponieważ w czasie samouczka była najnowsza wersja
**13**Możesz sprawdzić najnowszą wersję, przechodząc do httpsnodejs.org/en/
Aby sprawdzić, czy Node.js i npm zostały pomyślnie zainstalowane, uruchom następujące polecenia, które wyświetli zainstalowaną wersję:
węzeł -v
npm -v
**3. Firebase-CLI (Interfejs wiersza poleceń Są to narzędzia do zarządzania, przeglądania i wdrażania projektów Firebase
npm install -g firebase-tools
= Krok 1: Utwórz projekt Firebase =
- Przejdź do httpsfirebase.google.com i
Zaloguj się z prawego górnego rogu
- Kliknij
Przejdź do konsoli, z prawego górnego rogu
- Więc kliknij
Utwórz projekt, jak pokazano poniżej
4. Następną rzeczą jest wprowadzenie nazwy projektu i naciśnięcie przycisku Kontynuuj
5. Naciśnij Kontynuuj, aby włączyć Google Analytics dla swojego projektu Firebase (jeśli nie chcesz, zaznacz, aby wyłączyć)
6. Wybierz najbliższą lokalizację dla Google Analytics
7. Kliknij
**Utwórz projekt i poczekaj na jego załadowanie. Wtedy zobaczysz coś takiego jak poniżej
= Krok 2: Zainicjuj logowanie Firebase =
- Otwórz wiersz poleceń/terminal, a następnie utwórz i przejdź do nowego katalogu
mkdir mój-projekt-firebasecd mój-projekt-firebase
2. Aby hostować witrynę w Firebase, zaloguj się do Firebase za pomocą następującego polecenia. Po uruchomieniu polecenia otworzy się okno przeglądarki z prośbą o zalogowanie się do Firebase przy użyciu poświadczeń Google. Wprowadź tam poświadczenia, a Firebase zaloguje się do twojego systemu
logowanie do firebase
= Krok 3: Zainicjuj projekt Firebase w swoim systemie =
- Teraz musimy zainicjować projekt, który stworzyliśmy na konsoli Firebase w systemie. Aby to zrobić, uruchom poniższe polecenie
init bazy ogniowej
2. Naciśnij przycisk w dół, a następnie wybierz
**dwie rzeczy **naciskając **klawisz spacji
- Funkcje
- Hosting
Następnie
**naciśnij Enter**, aby kontynuować
3. Następnie wybierz
następnie naciśnij enter
**Użyj istniejącego projektu**
4. Naciśnij enter na
**my-firebase-project** **lub użyta nazwa projektu lub użyta nazwa projektu
5. Wybierz
**Javascript** i naciśnij Enter
6. Możesz powiedzieć
**Nie** do Czy chcesz używać ESLint do wyłapywania prawdopodobnych błędów i wymuszania stylu?
7. Wpisz
**Tak** do instalowania zależności za pomocą npm
8. Tutaj mamy do wykonania dwa zadania:
- Musisz wybrać katalog, w którym będzie znajdować się Twoja witryna i zasoby. Domyślnie tak jest
pubicMożesz nacisnąć enter, aby kontynuować lub zmienić żądaną nazwę katalogu
- Typy
Tak dla strony z pojedynczą aplikacją, aby Twoje dynamiczne adresy URL mogły zostać przekierowane do właściwego miejsca docelowego
9. Przetestuj aplikację Firebase w systemie lokalnym, uruchamiając następujące polecenie. Następnie idź do
**httplocalhost:5000**, aby zobaczyć, jak działa Twoja podstawowa witryna internetowa
firebase służyć -- tylko hosting, funkcje
Po otwarciu powinieneś zobaczyć coś takiego jak poniżej
**httplocalhost:5000** Adres URL
10. Zamknij serwer z poziomu terminala
= Krok 4: Instalowanie pakietów i tworzenie katalogu widoków dla dynamicznej witryny =
- Tutaj przełączymy się do katalogu funkcji, aby to zrobić
funkcje cd
**2. Install Express** Jest to minimalny i elastyczny framework aplikacji internetowych Node.js
npm i express --save
**3. Install Handle Bars** Jest to silnik szablonów dla Node.js używany do dynamicznego interfejsu strony internetowej
npm i kierownice --zapisz
**4. Zainstaluj konsolidację**
npm konsoliduję --save
5. Utwórz folder o nazwie
**views** w folderze **functions**, w którym będziemy przechowywać cały kod frontendu
mkdir
wyświetlenia
6. Przełącz się z powrotem do katalogu głównego, uruchamiając następującą komendę:
płyta CD .
= Krok 5: Konfigurowanie Firestore (baza danych w chmurze) =
== Konfiguracja bazy danych ==
- Przejdź do httpsconsole.firebase.google.com/
- Wybierz swój projekt
- Wybierać
Baza danych z panelu po lewej stronie
4. Kliknij
**Utwórz bazę danych**
5. Wybierz opcję Uruchom w trybie testowym, ponieważ w przeciwnym razie nie będziesz mieć dostępu do bazy danych ze swojego systemu. Zmienimy to ustawienie, gdy skończymy z rozwojem strony internetowej
Następnie kliknij
**Dalej** po wykonaniu tej czynności
6. Wybierz lokalizację bazy danych Firestore
**Po ustawieniu tej lokalizacji nie można jej później zmienić. Notatka: **
== Utwórz dane ==
- Kliknij na rozpoczęcie zbierania
2. Wprowadź
**Identyfikator kolekcji, z którego możesz teraz pobrać próbkę
3. Wprowadź przykładowe dane. Wchodzić
**sample_doc **jako **Identyfikator dokumentu. **Wprowadź **Nagłówek** w polu **. Podoba mi się chmura** wewnątrz **Wartość Następnie kliknij **Zapisz**
= Krok 6: Tworzenie dynamicznej zawartości witryny =
Porcję podzielimy na dwie części, w pierwszej zobaczymy jak pobrać dane z Firestore i wykorzystać w serwisie. W drugiej części zobaczymy, jak przesłać dane z formularza
**Najpierw pobierzemy dane uwierzytelniające, aby uzyskać dostęp do Firestore**
2. Kliknij
**ustawienia** z lewego panelu i przejdź do **Ustawień projektu**
3. Idź do
**Konta usług** i kliknij **Wygeneruj nowy klucz prywatny
4. Kliknij
**Generuj klucz Pojawi się wyskakujące okienko, aby pobrać klucz. Przechowuj klucz w folderze **functions** swojej witryny
== Pobieranie z Firestore ==
- Otwarty
index.jw folderze functions
2. Musimy zdefiniować niektóre biblioteki, które chcemy wykorzystać w naszej aplikacji. Są to te same biblioteki, które zainstalowaliśmy wcześniej
const functions = require('firebase-functionsconst express = require('expressconst silniki = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin
3. Tutaj ustawiamy kilka rzeczy:
- Zainicjuj aplikację za pomocą ekspresu
- Ustawimy nasz silnik jako kierownicę
- Następnie powiemy ekspresowi, że nasz kod interfejsu będzie znajdować się w folderze views
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. Autoryzuj swoją aplikację, aby uzyskać dostęp do bazy danych Firestore
*Notatka:*
1. Zmień
**YOUR_SDK_NAMEjson z plikiem pobranym w celu uzyskania **danych logowania do Firestore2. Zmień adres URL bazy danych na adres URL swojej bazy danych. Aby zobaczyć adres URL, przejdź do **Ustawienia >Konto usługi**
var konto usługi = wymagaj
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. Funkcja pobierania danych z Firestore
- Identyfikator kolekcji to
próbka
- Identyfikator dokumentu to
próbka_doc
Powyższe zdefiniowaliśmy podczas wprowadzania przykładowych danych
funkcja asynchroniczna getFirestoreconst firestore_con = oczekiwanie admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('Brak takiego dokumentu}
else {powrót doc.data
.catch(err =>{ console.log('Błąd podczas pobierania dokumentu', errreturn writeResult
}
**Używamy Uwaga: ** **async**ponieważ musimy czekać na zakończenie operacji obietnicy między Bazą Danych a naszą stroną
6. Utwórz trasę i wyślij wynik do interfejsu użytkownika
app.getasync (żądanie, odpowiedź) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. Stwórz
**index.hbs** w folderze **views**. hbs to plik handelbars Uwaga: **
8. Wpisz ten podstawowy kod HTML w środku
**index.hbs**, aby zobaczyć pobrany wynik
Tushar Chand Kapoor
