= Node.js اور Cloud Firestore DB کا استعمال کرتے ہوئے Google Firebase پر ایک متحرک ویب سائٹ کی میزبانی کریں =
تشار کپور: (httpswww.tusharck.com/)
ڈیمو گٹ یو آر ایل: httpsgithub.com/tusharck/firebase-demo
= فائر بیس ہوسٹنگ کیوں؟ =
Firebase ایک جامع ایپ پلیٹ فارم ہے جو Google کے بنیادی ڈھانچے پر بنایا گیا ہے، اس لیے یہ ایک محفوظ، تیز، مفت (اضافی وسائل کے لیے ادائیگی کے اختیارات بھی دستیاب ہیں) اور آپ کے مواد کی میزبانی کرنے کا آسان طریقہ فراہم کرتا ہے۔ ویب یا موبائل ایپلی کیشنز
== مفت درجے کی اہم خصوصیات اور فوائد: ==
- یہ مفت کسٹم ڈومین دیتا ہے۔&
SSL(SSL https کنکشن کے لیے ایک معیاری حفاظتی تہہ فراہم کرتا ہے۔
- کلاؤڈ فائر اسٹور: کلائنٹ ایپس میں ریئل ٹائم ڈیٹا کی مطابقت پذیری کے لیے ایک لچکدار اور قابل توسیع ڈیٹا بیس
- دیگر خصوصیات: کلاؤڈ فنکشنز، کلاؤڈ میسجنگ (ایف سی ایم)، کریشلیٹکس، ڈائنامک لنکس، ہوسٹنگ، ایم ایل کٹ، اسٹوریج، پرفارمنس مانیٹرنگ، پیشین گوئیاں اور ٹیسٹ لیب مفت درجے کی خدمات بہت اچھی ہیں۔ منصوبوں کو دیکھنے کے لیے Firebase کی قیمتیں چیک کریں)
- وسائل کی خودکار پیمانہ کاری
= Firebase پر آپ کی متحرک ویب سائٹ کی میزبانی کے لیے اقدامات =
== ضروریات ==
**1۔ Google اکاؤنٹ**اگر آپ کے پاس Google اکاؤنٹ نہیں ہے، تو آپ کو ایک کے لیے سائن اپ کرنا ہوگا۔ آپ httpsaccounts.google.com/SignUp پر جا کر ایسا کر سکتے ہیں۔ **2۔ Node.js اور npm** Mac/Windows آپ انسٹالر کو httpsnodejs.org/en/download/ سے ڈاؤن لوڈ کر سکتے ہیں۔ لینکس
Node.js انسٹال کرنے کے لیے درج ذیل مراحل پر عمل کریں:
1. ٹرمینل کھولیں۔
2. درج ذیل کمانڈز چلائیں:
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
سیٹ اپ_13.x| sudo bash -sudo apt install nodejs ** میں نے استعمال کیا ہے نوٹ: ** **
setup_13.xbecause اس وقت ٹیوٹوریل کا تازہ ترین ورژن تھا۔
**13**آپ httpsnodejs.org/en/ پر جا کر تازہ ترین ریلیز چیک کر سکتے ہیں۔
چیک کرنے کے لیے کہ آیا Node.js اور npm کامیابی کے ساتھ انسٹال ہوئے ہیں درج ذیل کمانڈز چلائیں، جو انسٹال شدہ ورژن کو آؤٹ پٹ کرے گا۔
node -v
npm -v
**3۔ Firebase-CLI (Command-Line Interfaceیہ Firebase پروجیکٹس کے انتظام، دیکھنے اور تعیناتی کے ٹولز ہیں
npm install -g firebase-tools
= مرحلہ 1: فائر بیس پروجیکٹ بنائیں =
- httpsfirebase.google.com پر جائیں اور
اوپر دائیں کونے سے سائن ان کریں۔
- پر کلک کریں
اوپر دائیں کونے سے کنسول پر جائیں۔
- پھر کلک کریں۔
پروجیکٹ بنائیں، جیسا کہ ذیل میں دکھایا گیا ہے۔
4. اگلی چیز اپنے پروجیکٹ کا نام درج کرنا ہے، اور جاری رکھیں کو دبائیں۔
5. اپنے Firebase پروجیکٹ کے لیے Google Analytics کو فعال کرنے کے لیے جاری رکھیں کو دبائیں (اگر آپ اسے نہیں چاہتے ہیں تو غیر فعال کرنے کے لیے چیک کریں)
6. Google Analytics کے لیے قریب ترین مقام منتخب کریں۔
7. پر کلک کریں۔
** پروجیکٹ بنائیں اور اس کے لوڈ ہونے کا انتظار کریں۔ پھر آپ کو نیچے کی طرح کچھ نظر آئے گا۔
= مرحلہ 2: فائر بیس لاگ ان شروع کریں =
- ایک کمانڈ لائن/ٹرمینل کھولیں پھر ایک نئی ڈائریکٹری بنائیں اور جائیں۔
mkdir my-firebase-projectcd my-firebase-project
2. Firebase پر ویب سائٹ کی میزبانی کرنے کے لیے درج ذیل کمانڈ کا استعمال کرتے ہوئے Firebase میں لاگ ان کریں۔ آپ کے کمانڈ چلانے کے بعد ایک براؤزر ونڈو کھل جائے گی جو آپ کو اپنے Google اسناد کا استعمال کرتے ہوئے فائر بیس میں لاگ ان کرنے کو کہے گی۔ وہاں اسناد درج کریں اور Firebase آپ کے سسٹم میں سائن ان ہو جائے گا۔
فائر بیس لاگ ان
= مرحلہ 3: اپنے سسٹم میں فائربیس پروجیکٹ کو شروع کریں =
- اب ہمیں اس پروجیکٹ کو شروع کرنا ہے جو ہم نے فائر بیس کنسول پر سسٹم میں بنایا تھا۔ ایسا کرنے کے لیے نیچے دی گئی کمانڈ کو چلائیں۔
firebase init
2. نیچے کلید دبائیں پھر منتخب کریں۔
**دو چیزیں **اسپیس بار کی کلید کو دبانے سے
- افعال
- ہوسٹنگ
پھر
**جاری رکھنے کے لیے Enter** دبائیں۔
3. پھر منتخب کریں۔
پھر انٹر دبائیں۔
**موجودہ پروجیکٹ کا استعمال کریں**
4. پر انٹر دبائیں۔
**my-firebase-project** **یا پروجیکٹ کا نام جو آپ نے استعمال کیا یا پروجیکٹ کا نام جو آپ نے استعمال کیا۔
5. منتخب کریں۔
**جاوا اسکرپٹ** اور انٹر دبائیں۔
6. آپ کہہ سکتے ہیں۔
**نہیں** کیا آپ ممکنہ کیڑے پکڑنے اور اسٹائل کو نافذ کرنے کے لیے ESLint استعمال کرنا چاہتے ہیں؟
7. ٹائپ کریں۔
**ہاں** npm کے ساتھ انحصار کو انسٹال کرنے کے لیے
8. یہاں ہمیں دو کام کرنے ہیں:
- آپ کو وہ ڈائریکٹری منتخب کرنی ہوگی جس میں آپ کی ویب سائٹ اور اثاثے رہیں گے۔ پہلے سے طے شدہ طور پر یہ ہے۔
pubic آپ جاری رکھنے کے لیے انٹر دبا سکتے ہیں یا آپ اپنی مطلوبہ ڈائرکٹری کا نام تبدیل کر سکتے ہیں۔
- اقسام
ہاں سنگل ایپ پیج کے لیے تاکہ آپ کے متحرک یو آر ایل کو ان کی مناسب منزل کی طرف ری ڈائریکٹ کیا جا سکے۔
9. درج ذیل کمانڈ کو چلا کر اپنے مقامی سسٹم پر فائربیس ایپ کی جانچ کریں۔ پھر جائیں
**httplocalhost:5000** اپنی بنیادی ویب سائٹ کو چلتے ہوئے دیکھنے کے لیے
فائر بیس سرو --صرف ہوسٹنگ، فنکشنز
کھولنے کے بعد آپ کو نیچے کچھ ایسا نظر آنا چاہیے۔
**httplocalhost:5000** URL
10. ٹرمینل سے سرور بند کریں۔
= مرحلہ 4: پیکجز کو انسٹال کرنا اور ڈائنامک ویب سائٹ کے لیے ویوز ڈائرکٹری بنانا =
- یہاں ہم ایسا کرنے کے لیے فنکشنز ڈائرکٹری کے اندر سوئچ کریں گے۔
سی ڈی کے افعال
**2۔ ایکسپریس انسٹال کریں**یہ ایک کم سے کم اور لچکدار Node.js ویب ایپلیکیشن فریم ورک ہے۔
npm i express --save
**3۔ ہینڈل بارز انسٹال کریں** یہ Node.js کے لیے ایک ٹیمپلیٹنگ انجن ہے جو ویب سائٹ کے متحرک فرنٹ اینڈ کے لیے استعمال ہوتا ہے۔
npm i handlebars --save
**4۔ کنسولیڈیٹ انسٹال کریں**
npm i consolidate --save
5. نام کا ایک فولڈر بنائیں
**فنکشنز** فولڈر کے اندر **ویوز** جس میں ہم تمام فرنٹ اینڈ کوڈ کو اسٹور کریں گے۔
mkdir
مناظر
6. درج ذیل کمانڈ کو چلا کر مین ڈائرکٹری میں واپس جائیں:
سی ڈی
= مرحلہ 5: فائر اسٹور (کلاؤڈ ڈیٹا بیس) کو ترتیب دینا =
== ڈیٹا بیس کی ترتیب ==
- httpsconsole.firebase.google.com/ پر جائیں
- اپنا پروجیکٹ منتخب کریں۔
- منتخب کریں۔
بائیں طرف پین سے ڈیٹا بیس
4. پر کلک کریں۔
**ڈیٹا بیس بنائیں**
5. ٹیسٹ موڈ میں اسٹارٹ کو منتخب کریں کیونکہ بصورت دیگر آپ اپنے سسٹم سے ڈیٹا بیس تک رسائی حاصل نہیں کر پائیں گے۔ ویب سائٹ کی ترقی کے ساتھ ہم اس ترتیب کو تبدیل کر دیں گے۔
پھر کلک کریں۔
**اگلا** ایسا کرنے کے بعد
6. اپنے Firestore DB کا مقام منتخب کریں۔
** یہ مقام متعین کرنے کے بعد، آپ اسے بعد میں تبدیل نہیں کر سکتے۔ نوٹ: **
== تخلیق ڈیٹا ==
- اسٹارٹ کلیکشن پر کلک کریں۔
2. درج کریں۔
** کلیکشن ID جس کا آپ ابھی نمونہ لے سکتے ہیں۔
3. نمونہ ڈیٹا درج کریں۔ داخل کریں۔
** نمونہ_دستاویز ** بطور **دستاویزی ID۔ ** فیلڈ کے اندر **ہیڈنگ** درج کریں۔ مجھے **ویلیو کے اندر کلاؤڈ** پسند ہے پھر **محفوظ کریں** پر کلک کریں
= مرحلہ 6: ویب سائٹ کے متحرک مواد کی تعمیر =
ہم اس حصے کو دو حصوں میں تقسیم کریں گے، پہلے حصے میں، ہم دیکھیں گے کہ Firestore سے ڈیٹا کیسے حاصل کیا جائے اور ویب سائٹ میں کیسے استعمال کیا جائے۔ دوسرے حصے میں، ہم دیکھیں گے کہ فارم کا ڈیٹا کیسے جمع کیا جائے۔
**سب سے پہلے، ہم Firestore تک رسائی کے لیے اسناد ڈاؤن لوڈ کریں گے**
2. پر کلک کریں۔
**سیٹنگز** بائیں پین سے اور **پروجیکٹ سیٹنگز** پر جائیں
3. پر جائیں۔
**سروس اکاؤنٹس** اور **نئی نجی کلید بنائیں پر کلک کریں۔
4. پر کلک کریں۔
** کلید بنائیں یہ کلید کو ڈاؤن لوڈ کرنے کے لیے ایک پاپ اپ دے گا۔ کلید کو اپنی ویب سائٹ کے اپنے **فنکشنز** فولڈر میں اسٹور کریں۔
== فائر اسٹور سے بازیافت کرنا ==
--.کھولنا n
index.jsin فنکشنز فولڈر کے اندر
2. ہمیں کچھ لائبریریوں کی وضاحت کرنے کی ضرورت ہے جو ہم اپنی درخواست میں استعمال کرنا چاہتے ہیں۔ یہ وہی لائبریریاں ہیں جو ہم نے پہلے انسٹال کی تھیں۔
const functions = درکار('firebase-functionsconst express = درکار('expressconst انجن = درکار('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin)
3. یہاں ہم نے کچھ چیزیں مقرر کی ہیں:
- ایکسپریس کا استعمال کرتے ہوئے ایپ کو شروع کریں۔
- ہم اپنے انجن کو ہینڈل بار کے طور پر سیٹ کریں گے۔
- پھر ہم ایکسپریس کو بتائیں گے کہ ہمارا فرنٹ اینڈ کوڈ ویوز فولڈر کے اندر ہونے والا ہے۔
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs)
4. اپنی درخواست کو اپنے Firestore DB تک رسائی حاصل کرنے کی اجازت دیں۔
*نوٹ:*
1. تبدیلی
**YOUR_SDK_NAMEjson اس فائل کے ساتھ جسے آپ نے ڈاؤن لوڈ کیا ہے **فائر اسٹور2 تک رسائی کے لیے اسناد۔ ڈیٹا بیس یو آر ایل کو اپنے ڈیٹا بیس یو آر ایل میں تبدیل کریں۔ یو آر ایل دیکھنے کے لیے آپ ** سیٹنگز >سروس اکاؤنٹ**
var serviceAccount = درکار ہے۔
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5. فائر اسٹور سے ڈیٹا حاصل کرنے کا فنکشن
- کلیکشن آئی ڈی ہے۔
نمونہ
- دستاویز کی شناخت ہے۔
نمونہ_دستاویز
نمونہ کے اعداد و شمار میں داخل کرتے وقت ہم نے اوپر کی وضاحت کی۔
async فنکشن getFirestoreconst firestore_con = انتظار کریں admin.firestoreconst writeResult = firestore_con.collection('نمونہ ڈاک('نمونہ_ڈاکیٹتھن(دستاویز =>{
اگر (!doc.exists) { console.log('ایسا کوئی دستاویز نہیں }
else {واپسی doc.data
.catch(err =>{ console.log('دستاویز حاصل کرنے میں خرابی'، errreturn writeResult
}
**ہم نوٹ استعمال کرتے ہیں: ** **async**کیونکہ ہمیں ڈیٹا بیس اور ہماری ویب سائٹ کے درمیان وعدے کی کارروائی مکمل ہونے کا انتظار کرنا ہوگا۔
6. راستہ بنائیں اور نتیجہ سامنے والے سرے پر بھیجیں۔
app.getasync (درخواست، جواب) var db_result = انتظار کریں getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7. تخلیق کریں۔
**views** فولڈر کے اندر **index.hbs**۔ hbs ایک ہینڈل بار فائل ہے نوٹ: **
8. اس بنیادی HTML کوڈ کو اندر لکھیں۔
حاصل کردہ نتیجہ دیکھنے کے لیے **index.hbs**
تشار چند کپور
