1. आप क्या बनाएंगे
इस कोडलैब में, आप हमारी एंगुलर लाइब्रेरी: एंगुलरफायर से नवीनतम के साथ वास्तविक समय के सहयोगी मानचित्र के साथ एक यात्रा ब्लॉग का निर्माण करेंगे। अंतिम वेब ऐप में एक यात्रा ब्लॉग शामिल होगा जहां आप अपने द्वारा यात्रा किए गए प्रत्येक स्थान की छवियां अपलोड कर सकते हैं।
AngularFire का उपयोग वेब ऐप बनाने के लिए किया जाएगा, स्थानीय परीक्षण के लिए एमुलेटर सूट, उपयोगकर्ता डेटा का ट्रैक रखने के लिए प्रमाणीकरण, डेटा और मीडिया को बनाए रखने के लिए फायरस्टोर और स्टोरेज, क्लाउड फ़ंक्शंस द्वारा संचालित, और अंत में, ऐप को तैनात करने के लिए फायरबेस होस्टिंग का उपयोग किया जाएगा।
आप क्या सीखेंगे
- एम्यूलेटर सुइट के साथ स्थानीय स्तर पर फायरबेस उत्पादों का विकास कैसे करें
- AngularFire के साथ अपने वेब ऐप को कैसे बेहतर बनाएं
- फायरस्टोर में अपना डेटा कैसे बनाए रखें
- स्टोरेज में मीडिया को कैसे बनाए रखें
- अपने ऐप को फायरबेस होस्टिंग पर कैसे तैनात करें
- अपने डेटाबेस और एपीआई के साथ इंटरैक्ट करने के लिए क्लाउड फ़ंक्शंस का उपयोग कैसे करें
आपको किस चीज़ की ज़रूरत पड़ेगी
- Node.js संस्करण 10 या उच्चतर
- आपके फायरबेस प्रोजेक्ट के निर्माण और प्रबंधन के लिए एक Google खाता
- फायरबेस सीएलआई संस्करण 11.14.2 या बाद का संस्करण
- आपकी पसंद का ब्राउज़र, जैसे Chrome
- एंगुलर और जावास्क्रिप्ट की बुनियादी समझ
2. नमूना कोड प्राप्त करें
कमांड लाइन से कोडलैब के GitHub रिपॉजिटरी को क्लोन करें:
git clone https://github.com/firebase/codelab-friendlychat-web
वैकल्पिक रूप से, यदि आपके पास गिट स्थापित नहीं है, तो आप रिपॉजिटरी को ज़िप फ़ाइल के रूप में डाउनलोड कर सकते हैं।
जीथब रिपॉजिटरी में कई प्लेटफार्मों के लिए नमूना परियोजनाएं शामिल हैं।
यह कोडलैब केवल वेबफ्रेमवर्क रिपॉजिटरी का उपयोग करता है:
- 📁 वेबफ्रेमवर्क : शुरुआती कोड जिसे आप इस कोडलैब के दौरान बनाएंगे।
निर्भरताएँ स्थापित करें
क्लोनिंग के बाद, वेब ऐप बनाने से पहले रूट और functions फ़ोल्डर में निर्भरताएँ स्थापित करें।
cd webframework && npm install
cd functions && npm install
फायरबेस सीएलआई स्थापित करें
टर्मिनल में इस कमांड का उपयोग करके फायरबेस सीएलआई स्थापित करें:
npm install -g firebase-tools
निम्नलिखित का उपयोग करके दोबारा जांचें कि आपका फायरबेस सीएलआई संस्करण 11.14.2 से बड़ा है:
firebase --version
यदि आपका संस्करण 11.14.2 से कम है, तो कृपया इसका उपयोग करके अपडेट करें:
npm update firebase-tools
3. एक फायरबेस प्रोजेक्ट बनाएं और सेट करें
एक फायरबेस प्रोजेक्ट बनाएं
- फायरबेस में साइन इन करें।
- फायरबेस कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें और फिर अपने फायरबेस प्रोजेक्ट को <your-project> नाम दें। अपने फायरबेस प्रोजेक्ट के लिए प्रोजेक्ट आईडी याद रखें।
- प्रोजेक्ट बनाएं पर क्लिक करें.
महत्वपूर्ण : आपके फायरबेस प्रोजेक्ट का नाम <your-project> होगा, लेकिन फायरबेस स्वचालित रूप से इसे <your-project>-1234 के रूप में एक अद्वितीय प्रोजेक्ट आईडी प्रदान करेगा। यह विशिष्ट पहचानकर्ता वास्तव में आपके प्रोजेक्ट की पहचान कैसे करता है (सीएलआई सहित), जबकि <your-project> केवल एक प्रदर्शन नाम है।
हम जो एप्लिकेशन बनाने जा रहे हैं वह फायरबेस उत्पादों का उपयोग करता है जो वेब ऐप्स के लिए उपलब्ध हैं:
- फायरबेस प्रमाणीकरण आपके उपयोगकर्ताओं को आसानी से आपके ऐप में साइन इन करने की अनुमति देता है।
- क्लाउड फायरस्टोर क्लाउड पर संरचित डेटा को सहेजने और डेटा में बदलाव होने पर तुरंत सूचना प्राप्त करने के लिए है।
- क्लाउड में फ़ाइलों को सहेजने के लिए फायरबेस के लिए क्लाउड स्टोरेज ।
- आपकी संपत्तियों की मेजबानी और सेवा के लिए फायरबेस होस्टिंग ।
- आंतरिक और बाहरी एपीआई के साथ बातचीत करने के कार्य ।
इनमें से कुछ उत्पादों को विशेष कॉन्फ़िगरेशन की आवश्यकता होती है या फायरबेस कंसोल का उपयोग करके सक्षम करने की आवश्यकता होती है।
प्रोजेक्ट में फायरबेस वेब ऐप जोड़ें
- नया फायरबेस वेब ऐप बनाने के लिए वेब आइकन पर क्लिक करें।
- अगले चरण पर, आपको एक कॉन्फ़िगरेशन ऑब्जेक्ट दिखाई देगा. इस ऑब्जेक्ट की सामग्री को
environments/environment.tsफ़ाइल में कॉपी करें।
फायरबेस प्रमाणीकरण के लिए Google साइन-इन सक्षम करें
उपयोगकर्ताओं को अपने Google खातों से वेब ऐप में साइन इन करने की अनुमति देने के लिए, हम Google साइन-इन विधि का उपयोग करेंगे।
Google साइन-इन सक्षम करने के लिए:
- फायरबेस कंसोल में, बाएं पैनल में बिल्ड अनुभाग का पता लगाएं।
- प्रमाणीकरण पर क्लिक करें, फिर साइन-इन विधि टैब पर क्लिक करें (या सीधे वहां जाने के लिए यहां क्लिक करें )।
- Google साइन-इन प्रदाता सक्षम करें, फिर सहेजें पर क्लिक करें।
- अपने ऐप का सार्वजनिक-सामना करने वाला नाम <your-project-name> पर सेट करें और ड्रॉपडाउन मेनू से एक प्रोजेक्ट समर्थन ईमेल चुनें।
क्लाउड फायरस्टोर सक्षम करें
- फ़ायरबेस कंसोल के बिल्ड अनुभाग में, फ़ायरस्टोर डेटाबेस पर क्लिक करें।
- क्लाउड फायरस्टोर फलक में डेटाबेस बनाएं पर क्लिक करें।
- वह स्थान सेट करें जहां आपका क्लाउड फायरस्टोर डेटा संग्रहीत है। आप इसे डिफ़ॉल्ट के रूप में छोड़ सकते हैं या अपने निकट का क्षेत्र चुन सकते हैं।
क्लाउड स्टोरेज सक्षम करें
वेब ऐप चित्रों को संग्रहीत करने, अपलोड करने और साझा करने के लिए फायरबेस के लिए क्लाउड स्टोरेज का उपयोग करता है।
- फायरबेस कंसोल के बिल्ड सेक्शन में, स्टोरेज पर क्लिक करें।
- यदि कोई गेट स्टार्टेड बटन नहीं है, तो इसका मतलब है कि क्लाउड स्टोरेज पहले से ही मौजूद है
सक्षम है, और आपको नीचे दिए गए चरणों का पालन करने की आवश्यकता नहीं है।
- आरंभ करें पर क्लिक करें.
- अपने फायरबेस प्रोजेक्ट के लिए सुरक्षा नियमों के बारे में अस्वीकरण पढ़ें, फिर अगला क्लिक करें।
- क्लाउड स्टोरेज स्थान उसी क्षेत्र के साथ पूर्व-चयनित है जिसे आपने अपने क्लाउड फायरस्टोर डेटाबेस के लिए चुना है। सेटअप पूरा करने के लिए Done पर क्लिक करें।
डिफ़ॉल्ट सुरक्षा नियमों के साथ, कोई भी प्रमाणित उपयोगकर्ता क्लाउड स्टोरेज पर कुछ भी लिख सकता है। हम बाद में इस कोडलैब में अपने भंडारण को और अधिक सुरक्षित बनाएंगे।
4. अपने फायरबेस प्रोजेक्ट से कनेक्ट करें
फायरबेस कमांड-लाइन इंटरफ़ेस (सीएलआई) आपको स्थानीय रूप से अपने वेब ऐप की सेवा के लिए फायरबेस होस्टिंग का उपयोग करने की अनुमति देता है, साथ ही अपने वेब ऐप को अपने फायरबेस प्रोजेक्ट पर तैनात करने की भी अनुमति देता है।
सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय webframework निर्देशिका तक पहुंच रही है।
वेब ऐप कोड को अपने फायरबेस प्रोजेक्ट से कनेक्ट करें। सबसे पहले, कमांड लाइन में फायरबेस सीएलआई में लॉग इन करें:
firebase login
इसके बाद प्रोजेक्ट उपनाम बनाने के लिए निम्न कमांड चलाएँ। $YOUR_PROJECT_ID अपने फायरबेस प्रोजेक्ट की आईडी से बदलें।
firebase use $YOUR_PROJECT_ID
एंगुलरफ़ायर जोड़ें
ऐप में AngularFire जोड़ने के लिए, कमांड चलाएँ:
ng add @angular/fire
फिर, कमांड लाइन निर्देशों का पालन करें, और अपने फायरबेस प्रोजेक्ट में मौजूद सुविधाओं का चयन करें।
फायरबेस आरंभ करें
फायरबेस प्रोजेक्ट को आरंभ करने के लिए, चलाएँ:
firebase init
फिर, कमांड लाइन संकेतों का पालन करते हुए, उन सुविधाओं और एमुलेटरों का चयन करें जो आपके फायरबेस प्रोजेक्ट में उपयोग किए गए थे।
एमुलेटर प्रारंभ करें
webframework निर्देशिका से, एमुलेटर शुरू करने के लिए निम्नलिखित कमांड चलाएँ:
firebase emulators:start
अंततः आपको कुछ इस तरह देखना चाहिए:
$ firebase emulators:start
i emulators: Starting emulators: auth, functions, firestore, hosting, functions
i firestore: Firestore Emulator logging to firestore-debug.log
i hosting: Serving hosting files from: public
✔ hosting: Local server: http://localhost:5000
i ui: Emulator UI logging to ui-debug.log
i functions: Watching "/functions" for Cloud Functions...
✔ functions[updateMap]: firestore function initialized.
┌─────────────────────────────────────────────────────────────┐
│ ✔ All emulators ready! It is now safe to connect your app. │
│ i View Emulator UI at http://localhost:4000 │
└─────────────────────────────────────────────────────────────┘
┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator │ Host:Port │ View in Emulator UI │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting │ localhost:5000 │ n/a │
└────────────────┴────────────────┴─────────────────────────────────┘
Emulator Hub running at localhost:4400
Other reserved ports: 4500
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
एक बार जब आप देखेंगे कि ✔All emulators ready! संदेश, एमुलेटर उपयोग के लिए तैयार हैं।
आपको अपने ट्रैवल ऐप का यूआई देखना चाहिए, जो (अभी तक!) काम नहीं कर रहा है:
अब चलो निर्माण करें!
5. वेब ऐप को एमुलेटर से कनेक्ट करें
एमुलेटर लॉग में तालिका के आधार पर, क्लाउड फायरस्टोर एमुलेटर पोर्ट 8080 पर सुन रहा है और प्रमाणीकरण एमुलेटर पोर्ट 9099 पर सुन रहा है।
एमुलेटरयूआई खोलें
अपने वेब ब्राउज़र में, http://127.0.0.1:4000/ पर जाएँ। आपको एम्यूलेटर सुइट यूआई देखना चाहिए।
एमुलेटर का उपयोग करने के लिए ऐप को रूट करें
src/app/app.module.ts में, AppModule की आयात सूची में निम्नलिखित कोड जोड़ें:
@NgModule({
declarations: [...],
imports: [
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = getAuth();
if (location.hostname === 'localhost') {
connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true });
}
return auth;
}),
provideFirestore(() => {
const firestore = getFirestore();
if (location.hostname === 'localhost') {
connectFirestoreEmulator(firestore, '127.0.0.1', 8080);
}
return firestore;
}),
provideFunctions(() => {
const functions = getFunctions();
if (location.hostname === 'localhost') {
connectFunctionsEmulator(functions, '127.0.0.1', 5001);
}
return functions;
}),
provideStorage(() => {
const storage = getStorage();
if (location.hostname === 'localhost') {
connectStorageEmulator(storage, '127.0.0.1', 5001);
}
return storage;
}),
...
]
ऐप को अब स्थानीय एमुलेटर का उपयोग करने के लिए कॉन्फ़िगर किया गया है, जिससे परीक्षण और विकास स्थानीय स्तर पर किया जा सकता है।
6. प्रमाणीकरण जोड़ना
अब जब ऐप के लिए एमुलेटर सेट हो गए हैं, तो हम यह सुनिश्चित करने के लिए प्रमाणीकरण सुविधाएँ जोड़ सकते हैं कि प्रत्येक उपयोगकर्ता संदेश पोस्ट करने से पहले साइन इन है।
ऐसा करने के लिए, हम सीधे AngularFire से signin फ़ंक्शन आयात कर सकते हैं, और authState फ़ंक्शन के साथ आपके उपयोगकर्ता की स्थिति को ट्रैक कर सकते हैं। लॉगिन पेज फ़ंक्शन को संशोधित करें ताकि पेज लोड होने पर उपयोगकर्ता की स्थिति की जांच कर सके।
AngularFire प्रामाणिक को इंजेक्ट करना
src/app/pages/login-page/login-page.component.ts में, @angular/fire/auth से Auth आयात करें, और इसे LoginPageComponent में इंजेक्ट करें। प्रमाणीकरण प्रदाता, जैसे Google, और signin , signout जैसे फ़ंक्शन भी सीधे उसी पैकेज से आयात किए जा सकते हैं, और ऐप में उपयोग किए जा सकते हैं।
import { Auth, GoogleAuthProvider, signInWithPopup, signOut, user } from '@angular/fire/auth';
export class LoginPageComponent implements OnInit {
private auth: Auth = inject(Auth);
private provider = new GoogleAuthProvider();
user$ = user(this.auth);
constructor() {}
ngOnInit(): void {}
login() {
signInWithPopup(this.auth, this.provider).then((result) => {
const credential = GoogleAuthProvider.credentialFromResult(result);
return credential;
})
}
logout() {
signOut(this.auth).then(() => {
console.log('signed out');}).catch((error) => {
console.log('sign out error: ' + error);
})
}
}
अब लॉगिन पेज क्रियाशील है! लॉग इन करने का प्रयास करें और प्रमाणीकरण एमुलेटर में परिणाम देखें।
7. फायरस्टोर को कॉन्फ़िगर करना
इस चरण में, आप फायरस्टोर में संग्रहीत यात्रा ब्लॉग पोस्ट को पोस्ट करने और अपडेट करने के लिए कार्यक्षमता जोड़ेंगे।
प्रमाणीकरण के समान, फायरस्टोर फ़ंक्शंस AngularFire से पहले से पैक किए गए आते हैं। प्रत्येक दस्तावेज़ एक संग्रह से संबंधित है, और प्रत्येक दस्तावेज़ में नेस्टेड संग्रह भी हो सकते हैं। ट्रैवल ब्लॉग पोस्ट बनाने और अपडेट करने के लिए फायरस्टोर में दस्तावेज़ का path जानना आवश्यक है।
यात्रा सेवा कार्यान्वित करना
चूंकि कई अलग-अलग पेजों को वेब ऐप में फायरस्टोर दस्तावेज़ों को पढ़ने और अपडेट करने की आवश्यकता होगी, हम हर पेज पर समान AngularFire फ़ंक्शंस को बार-बार इंजेक्ट करने से बचने के लिए, src/app/services/travel.service.ts में फ़ंक्शंस को कार्यान्वित कर सकते हैं।
पिछले चरण के समान, Auth इंजेक्ट करने के साथ-साथ Firestore हमारी सेवा में शामिल करने से शुरुआत करें। एक अवलोकन योग्य user$ ऑब्जेक्ट को परिभाषित करना जो वर्तमान प्रमाणीकरण स्थिति को सुनता है, भी उपयोगी है।
import { doc, docData, DocumentReference, Firestore, getDoc, setDoc, updateDoc, collection, addDoc, deleteDoc, collectionData, Timestamp } from "@angular/fire/firestore";
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
user$ = authState(this.auth).pipe(filter(user => user !== null), map(user => user!));
router: Router = inject(Router);
एक यात्रा पोस्ट जोड़ा जा रहा है
यात्रा पोस्ट उन दस्तावेज़ों के रूप में मौजूद होंगे जो फायरस्टोर में संग्रहीत हैं, और चूंकि दस्तावेज़ संग्रह के भीतर मौजूद होने चाहिए, इसलिए जिस संग्रह में सभी यात्रा पोस्ट शामिल हैं उसे travels नाम दिया जाएगा। इस प्रकार, किसी भी यात्रा पद का पथ travels/
AngularFire से addDoc फ़ंक्शन का उपयोग करके, किसी ऑब्जेक्ट को संग्रह में डाला जा सकता है:
async addEmptyTravel(userId: String) {
...
addDoc(collection(this.firestore, 'travels'), travelData).then((travelRef) => {
collection(this.firestore, `travels/${travelRef.id}/stops`);
setDoc(travelRef, {... travelData, id: travelRef.id})
this.router.navigate(['edit', `${travelRef.id}`]);
return travelRef;
})
}
डेटा को अद्यतन करना और हटाना
किसी भी यात्रा पोस्ट की यूआईडी को देखते हुए, कोई फायरस्टोर में संग्रहीत दस्तावेज़ का पथ निकाल सकता है, जिसे एंगुलरफ़ायर के updateFoc और deleteDoc फ़ंक्शंस का उपयोग करके पढ़ा, अपडेट या हटाया जा सकता है:
async updateData(path: string, data: Partial<Travel | Stop>) {
await updateDoc(doc(this.firestore, path), data)
}
async deleteData(path: string) {
const ref = doc(this.firestore, path);
await deleteDoc(ref)
}
डेटा को अवलोकनीय के रूप में पढ़ना
चूंकि यात्रा पोस्ट और रास्ते में पड़ने वाले पड़ावों को निर्माण के बाद संशोधित किया जा सकता है, इसलिए किए गए किसी भी बदलाव की सदस्यता लेने के लिए दस्तावेज़ वस्तुओं को अवलोकन योग्य के रूप में प्राप्त करना अधिक उपयोगी होगा। यह कार्यक्षमता @angular/fire/firestore के docData और collectionData फ़ंक्शंस द्वारा प्रदान की जाती है।
getDocData(path: string) {
return docData(doc(this.firestore, path), {idField: 'id'}) as Observable<Travel | Stop>
}
getCollectionData(path: string) {
return collectionData(collection(this.firestore, path), {idField: 'id'}) as Observable<Travel[] | Stop[]>
}
किसी यात्रा पोस्ट में स्टॉप जोड़ना
अब जब यात्रा पोस्ट संचालन स्थापित हो गया है, तो स्टॉप पर विचार करने का समय आ गया है, जो यात्रा पोस्ट के उपसंग्रह के अंतर्गत मौजूद होगा: travels/ /stops/travels/ /stops/
यह लगभग एक यात्रा पोस्ट बनाने के समान है, इसलिए इसे स्वयं लागू करने के लिए स्वयं को चुनौती दें, या नीचे कार्यान्वयन की जाँच करें:
async addStop(travelId: string) {
...
const ref = await addDoc(collection(this.firestore, `travels/${travelId}/stops`), stopData)
setDoc(ref, {...stopData, id: ref.id})
}
अच्छा! फायरस्टोर फ़ंक्शंस को ट्रैवल सेवा में लागू किया गया है, इसलिए अब आप उन्हें क्रियान्वित होते हुए देख सकते हैं।
ऐप में फायरस्टोर फ़ंक्शंस का उपयोग करना
src/app/pages/my-travels/my-travels.component.ts पर नेविगेट करें और TravelService इसके कार्यों का उपयोग करने के लिए इंजेक्ट करें।
travelService = inject(TravelService);
travelsData$: Observable<Travel[]>;
stopsList$!: Observable<Stop[]>;
constructor() {
this.travelsData$ = this.travelService.getCollectionData(`travels`) as Observable<Travel[]>
}
सभी यात्राओं का अवलोकन योग्य सरणी प्राप्त करने के लिए कंस्ट्रक्टर में TravelService कॉल किया जाता है।
ऐसे मामले में जहां केवल वर्तमान उपयोगकर्ता की यात्रा की आवश्यकता है, query फ़ंक्शन का उपयोग करें।
सुरक्षा सुनिश्चित करने के अन्य तरीकों में सुरक्षा नियमों को लागू करना, या फायरस्टोर के साथ क्लाउड फ़ंक्शंस का उपयोग करना शामिल है जैसा कि नीचे वैकल्पिक चरणों में बताया गया है
फिर, बस TravelService में कार्यान्वित फ़ंक्शन को कॉल करें।
async createTravel(userId: String) {
this.travelService.addEmptyTravel(userId);
}
deleteTravel(travelId: String) {
this.travelService.deleteData(`travels/${travelId}`)
}
अब मेरी यात्रा पृष्ठ क्रियाशील होना चाहिए! जब आप कोई नई यात्रा पोस्ट बनाते हैं तो देखें कि आपके फायरस्टोर एमुलेटर में क्या होता है।
फिर, अपडेट फ़ंक्शन के लिए /src/app/pages/edit-travels/edit-travels.component.ts में दोहराएं:
travelService: TravelService = inject(TravelService)
travelId = this.activatedRoute.snapshot.paramMap.get('travelId');
travelData$: Observable<Travel>;
stopsData$: Observable<Stop[]>;
constructor() {
this.travelData$ = this.travelService.getDocData(`travels/${this.travelId}`) as Observable<Travel>
this.stopsData$ = this.travelService.getCollectionData(`travels/${this.travelId}/stops`) as Observable<Stop[]>
}
updateCurrentTravel(travel: Partial<Travel>) {
this.travelService.updateData(`travels${this.travelId}`, travel)
}
updateCurrentStop(stop: Partial<Stop>) {
stop.type = stop.type?.toString();
this.travelService.updateData(`travels${this.travelId}/stops/${stop.id}`, stop)
}
addStop() {
if (!this.travelId) return;
this.travelService.addStop(this.travelId);
}
deleteStop(stopId: string) {
if (!this.travelId || !stopId) {
return;
}
this.travelService.deleteData(`travels${this.travelId}/stops/${stopId}`)
this.stopsData$ = this.travelService.getCollectionData(`travels${this.travelId}/stops`) as Observable<Stop[]>
}
8. भंडारण को कॉन्फ़िगर करना
अब आप छवियों और अन्य प्रकार के मीडिया को संग्रहीत करने के लिए स्टोरेज लागू करेंगे।
क्लाउड फायरस्टोर का उपयोग JSON ऑब्जेक्ट जैसे संरचित डेटा को संग्रहीत करने के लिए सबसे अच्छा किया जाता है। क्लाउड स्टोरेज को फाइलों या ब्लॉब्स को स्टोर करने के लिए डिज़ाइन किया गया है। इस ऐप में, आप इसका उपयोग उपयोगकर्ताओं को अपनी यात्रा की तस्वीरें साझा करने की अनुमति देने के लिए करेंगे।
इसी तरह फायरस्टोर के साथ, स्टोरेज के साथ फ़ाइलों को संग्रहीत और अपडेट करने के लिए प्रत्येक फ़ाइल के लिए एक विशिष्ट पहचानकर्ता की आवश्यकता होती है।
आइए TraveService में फ़ंक्शंस लागू करें:
फ़ाइल अपलोड हो रही है
src/app/services/travel.service.ts पर नेविगेट करें और AngularFire से स्टोरेज इंजेक्ट करें:
export class TravelService {
firestore: Firestore = inject(Firestore);
auth: Auth = inject(Auth);
storage: Storage = inject(Storage);
और अपलोड फ़ंक्शन लागू करें:
async uploadToStorage(path: string, input: HTMLInputElement, contentType: any) {
if (!input.files) return null
const files: FileList = input.files;
for (let i = 0; i < files.length; i++) {
const file = files.item(i);
if (file) {
const imagePath = `${path}/${file.name}`
const storageRef = ref(this.storage, imagePath);
await uploadBytesResumable(storageRef, file, contentType);
return await getDownloadURL(storageRef);
}
}
return null;
}
फायरस्टोर से दस्तावेज़ों और क्लाउड स्टोरेज से फ़ाइलों तक पहुँचने के बीच प्राथमिक अंतर यह है कि, हालांकि वे दोनों फ़ोल्डर संरचित पथों का पालन करते हैं, आधार यूआरएल और पथ संयोजन getDownloadURL के माध्यम से प्राप्त किया जाता है, जिसे बाद में संग्रहीत किया जा सकता है, और उपयोग किया जा सकता है
ऐप में फ़ंक्शन का उपयोग करना
src/app/components/edit-stop/edit-stop.component.ts पर नेविगेट करें और अपलोड फ़ंक्शन को कॉल करें:
async uploadFile(file: HTMLInputElement, stop: Partial<Stop>) {
const path = `/travels/${this.travelId}/stops/${stop.id}`
const url = await this.travelService.uploadToStorage(path, file, {contentType: 'image/png'});
stop.image = url ? url : '';
this.travelService.updateData(path, stop);
}
जब छवि अपलोड की जाती है, तो मीडिया फ़ाइल स्वयं स्टोरेज में अपलोड हो जाएगी, और यूआरएल तदनुसार फायरस्टोर में दस्तावेज़ में संग्रहीत हो जाएगा।
9. एप्लिकेशन का परिनियोजन
अब हम एप्लिकेशन को तैनात करने के लिए तैयार हैं!
firebase कॉन्फ़िगरेशन को src/environments/environment.ts से src/environments/environment.prod.ts पर कॉपी करें और चलाएं:
firebase deploy
आपको कुछ इस तरह देखना चाहिए:
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
=== Deploying to 'friendly-travels-b6a4b'...
i deploying storage, firestore, hosting
i firebase.storage: checking storage.rules for compilation errors...
✔ firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
✔ cloud.firestore: rules file firestore.rules compiled successfully
i storage: latest version of storage.rules already up to date, skipping upload...
i firestore: deploying indexes...
i firestore: latest version of firestore.rules already up to date, skipping upload...
✔ firestore: deployed indexes in firestore.indexes.json successfully for (default) database
i hosting[friendly-travels-b6a4b]: beginning deploy...
i hosting[friendly-travels-b6a4b]: found 6 files in .firebase/friendly-travels-b6a4b/hosting
✔ hosting[friendly-travels-b6a4b]: file upload complete
✔ storage: released rules storage.rules to firebase.storage
✔ firestore: released rules firestore.rules to cloud.firestore
i hosting[friendly-travels-b6a4b]: finalizing version...
✔ hosting[friendly-travels-b6a4b]: version finalized
i hosting[friendly-travels-b6a4b]: releasing new version...
✔ hosting[friendly-travels-b6a4b]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/friendly-travels-b6a4b/overview
Hosting URL: https://friendly-travels-b6a4b.web.app
10. बधाई हो!
अब आपका आवेदन पूरा हो जाना चाहिए और फायरबेस होस्टिंग पर तैनात हो जाना चाहिए! सभी डेटा और विश्लेषण अब आपके फायरबेस कंसोल में पहुंच योग्य होंगे।
AngularFire, फ़ंक्शंस, सुरक्षा नियमों के संबंध में अधिक सुविधाओं के लिए, नीचे दिए गए वैकल्पिक चरणों के साथ-साथ अन्य Firebase Codelabs को देखना न भूलें!
11. वैकल्पिक: एंगुलरफायर ऑथ गार्ड
फायरबेस प्रमाणीकरण के साथ, AngularFire मार्गों पर प्रमाणीकरण आधारित गार्ड भी प्रदान करता है, ताकि अपर्याप्त पहुंच वाले उपयोगकर्ताओं को पुनर्निर्देशित किया जा सके। यह ऐप को उपयोगकर्ताओं द्वारा संरक्षित डेटा तक पहुंचने से बचाने में मदद करता है।
src/app/app-routing.module.ts में, आयात करें
import {AuthGuard, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard'
फिर आप फ़ंक्शंस को परिभाषित कर सकते हैं कि उपयोगकर्ताओं को कुछ पृष्ठों पर कब और कहाँ रीडायरेक्ट किया जाना चाहिए:
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['signin']);
const redirectLoggedInToTravels = () => redirectLoggedInTo(['my-travels']);
फिर बस उन्हें अपने मार्गों में जोड़ें:
const routes: Routes = [
{path: '', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'signin', component: LoginPageComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectLoggedInToTravels}},
{path: 'my-travels', component: MyTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
{path: 'edit/:travelId', component: EditTravelsComponent, canActivate: [AuthGuard], data: {authGuardPipe: redirectUnauthorizedToLogin}},
];
12. वैकल्पिक: सुरक्षा नियम
फायरस्टोर और क्लाउड स्टोरेज दोनों सुरक्षा लागू करने और डेटा को मान्य करने के लिए सुरक्षा नियमों (क्रमशः firestore.rules और security.rules ) का उपयोग करते हैं।
फिलहाल, फायरस्टोर और स्टोरेज डेटा में पढ़ने और लिखने की खुली पहुंच है, लेकिन आप नहीं चाहेंगे कि लोग दूसरों की पोस्ट बदलें! आप अपने संग्रहों और दस्तावेज़ों तक पहुंच को प्रतिबंधित करने के लिए सुरक्षा नियमों का उपयोग कर सकते हैं।
फायरस्टोर नियम
केवल प्रमाणित उपयोगकर्ताओं को यात्रा पोस्ट देखने की अनुमति देने के लिए, firestore.rules फ़ाइल पर जाएँ और जोड़ें:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/travels {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
}
}
डेटा को सत्यापित करने के लिए सुरक्षा नियमों का भी उपयोग किया जा सकता है:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/posts {
allow read: if request.auth.uid != null;
allow write:
if request.auth.uid == request.resource.data.userId;
&& "author" in request.resource.data
&& "text" in request.resource.data
&& "timestamp" in request.resource.data;
}
}
भण्डारण नियम
इसी तरह, हम storage.rules में स्टोरेज डेटाबेस तक पहुंच को लागू करने के लिए सुरक्षा नियमों का उपयोग कर सकते हैं। ध्यान दें कि हम अधिक जटिल जाँचों के लिए भी फ़ंक्शंस का उपयोग कर सकते हैं:
rules_version = '2';
function isImageBelowMaxSize(maxSizeMB) {
return request.resource.size < maxSizeMB * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
service firebase.storage {
match /b/{bucket}/o {
match /{userId}/{postId}/{filename} {
allow write: if request.auth != null
&& request.auth.uid == userId && isImageBelowMaxSize(5);
allow read;
}
}
}