آموزش و معرفی کامل سایت Firebase
Firebase محصولی از گوگل است که مجموعه‌ای از سرویس‌های ابری برای توسعه‌دهندگان وب و موبایل ارائه میدهد. (آموزش و معرفی کامل سایت Firebase) این سرویس به شما کمک میکند تا بدون نیاز به مدیریت پیچیده سرور، پایگاه داده، احراز هویت کاربران، نوتیفیکیشن، میزبانی فایل‌ها و بسیاری امکانات دیگر را در پروژه‌های خود پیاده‌سازی کنید.
اینجاست که نقش جاوا اسکریپت بسیار پر رنگ جلوه گری میکند! یکی از مهم‌ترین ویژگی‌های Firebase، یکپارچگی سریع و آسان آن با اپلیکیشن‌ها و همچنین مقیاس‌پذیری بالاست. بنابراین چه شما یک اپلیکیشن کوچک دانشجویی بسازید و چه یک پروژه بزرگ تجاری، Firebase می‌تواند نیازهای شما را پوشش دهد.
فایر بیس امکانات و فعالیت های زیادی را پوشش میدهد، اما ما در این مقاله فقط به معرفی این موارد میپردازیم:
- کار با Firestore (CRUD: ایجاد، خواندن، به‌روزرسانی، حذف داده‌ها).
- آموزش کار با Authentication (ورود/ثبت‌نام با ایمیل، گوگل، و…)
- راه‌اندازی Hosting برای وب‌سایت‌ها
- ارسال Push Notification با Firebase Cloud Messaging
آموزش کامل CRUD در Firebase Firestore (ایجاد، خواندن، ویرایش و حذف داده‌ها)
یکی از پرکاربردترین بخش‌های Firebase، پایگاه داده Cloud Firestore است. این سرویس به شما امکان میدهد تا داده‌های اپلیکیشن یا وب‌سایت خود را در محیطی امن و مقیاس‌پذیر ذخیره کنید.
در این قسمت، به صورت گام‌به‌گام نحوه انجام عملیات CRUD (Create, Read, Update, Delete) در Firestore را بررسی می‌کنیم. CRUD به معنی چهار عمل اصلی پایگاه داده است که در همه پروژه‌ها و در وب مدرن در سمت جاوا اسکریپت استفاده می‌شود.
مرحله ۱: ساخت پروژه و فعال‌سازی Firestore
- وارد Firebase Console شوید. (https://console.firebase.google.com)
- یک پروژه جدید ایجاد کنید.
- در منوی سمت چپ به بخش Firestore Database بروید و یک دیتابیس جدید بسازید.
- برای شروع پیشنهاد می‌شود Test Mode را انتخاب کنید تا نیازی به نوشتن Rule نداشته باشید.
- به بخش Project settings → General بروید و تو قسمت Your apps، گزینه </> (Web App) رو بزنید. یه نام بدید و کد پیکربندی را کپی کنید.
کار تمام است! یک پوشه بسازید و در آن کامند زیر را بزنید:
npm install firebase
سپس یک فایل index.html ساخته و کد زیر را داخل آن کپی کنید.
توضیح عملکرد CRUD در Firestore
حذف (Delete):
با متد deleteDoc میتوانید یک سند را به‌طور کامل از دیتابیس پاک کنید.
ایجاد (Create):
با استفاده از متد addDoc میتوانید کاربر جدیدی در مجموعه (collection) users اضافه کنید.
خواندن (Read):
با متد getDocs میتوانید تمام داده‌های ذخیره‌شده را بازیابی کنید و آن‌ها را در لیست HTML نمایش دهید.
به‌روزرسانی (Update):
با متد updateDoc یک سند خاص را تغییر می‌دهید. در اینجا کاربر می‌تواند نام و سن جدید را وارد کند.
داخل کد سایر توضیحات آورده شده است و تمام ساختار CRUD را پشتیبانی میکند!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Firestore CRUD Example</title>
</head>
<body>
<h1>Firestore CRUD Example</h1>
<input id="name" placeholder="Name">
<input id="age" type="number" placeholder="Age">
<button onclick="addUser()">Add User</button>
<button onclick="getUsers()">Get Users</button>
<hr>
<h3>Users:</h3>
<ul id="usersList"></ul>
<!-- Firebase SDK -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
import { getFirestore, collection, addDoc, getDocs, updateDoc, deleteDoc, doc }
from "https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js";
// ✅ کانفیگ درست شده
const firebaseConfig = {
apiKey: "AIzaSyAEcH54KP-4JdkbOE86D5eOX6z26SDj7iI",
authDomain: "pornian-a9b11.firebaseapp.com",
projectId: "parnian-a9b11",
storageBucket: "pornian-a9b11.appspot.com",
messagingSenderId: "135114654620",
appId: "1:135114654620:web:b03d64e734e76763807e59",
measurementId: "G-B63QZB1CZP"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const usersList = document.getElementById("usersList");
// 🔹 CREATE
window.addUser = async function () {
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
await addDoc(collection(db, "users"), {
name: name,
age: parseInt(age)
});
alert("User added!");
getUsers();
}
// 🔹 READ
window.getUsers = async function () {
usersList.innerHTML = "";
const querySnapshot = await getDocs(collection(db, "users"));
querySnapshot.forEach((docSnap) => {
const data = docSnap.data();
const li = document.createElement("li");
li.innerHTML = `${data.name} (${data.age} years)
<button onclick="updateUser('${docSnap.id}')">Update</button>
<button onclick="deleteUser('${docSnap.id}')">Delete</button>`;
usersList.appendChild(li);
});
}
// 🔹 UPDATE
window.updateUser = async function (id) {
const newName = prompt("Enter new name:");
const newAge = prompt("Enter new age:");
const userRef = doc(db, "users", id);
await updateDoc(userRef, {
name: newName,
age: parseInt(newAge)
});
alert("User updated!");
getUsers();
}
// 🔹 DELETE
window.deleteUser = async function (id) {
await deleteDoc(doc(db, "users", id));
alert("User deleted!");
getUsers();
}
// Load users on page load
getUsers();
</script>
</body>
</html>آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟
آموزش Firebase Authentication (ورود/ثبت‌نام با ایمیل و گوگل)
یک سرویس احراز هویت از Google است که به توسعه‌دهندگان امکان میدهد تا سیستم‌های ورود و ثبت‌نام امن و قدرتمند را به برنامه‌های موبایل و وب اضافه کنند. این سرویس با ارائه امکاناتی مانند ثبت‌نام و ورود با ایمیل و رمز عبور، ورود با شبکه‌های اجتماعی (مانند Google، Facebook، Twitter، GitHub)، و مدیریت دوره‌های ورود کاربران، فرایند احراز هویت را برای توسعه‌دهندگان ساده میکند و آن‌ها را قادر می‌سازد تا بر روی توسعه اصلی برنامه خود تمرکز کنند.
چرا Authentication در Firebase؟
- مدیریت کامل کاربران (ثبت‌نام، ورود، خروج).
- پشتیبانی از ایمیل/رمز عبور، گوگل، فیسبوک، گیت‌هاب، شماره موبایل و….
- امنیت بالا + توکن JWT برای ارتباط با دیتابیس.
- رایگان در پلن Spark (کافی برای پروژه‌های کوچک و متوسط).
اما روش کار:
وارد Firebase Console شوید.
پروژه‌ای که ساختید (مثلاً parnian-a9b11) را باز کنید.
از منوی سمت چپ بروید به: Build > Authentication.
روی Get Started بزنید.
در بخش Sign-in method → روش‌هایی که می‌خواهید فعال کنید را روشن کنید:
- Email/Password
نکته مهم قبل از استفاده از کد زیر باید به مسیر زیر رفته و دامین خود را ثبت کنید:
Firebase console -> Authentication -> Settings -> Authorized domains tabحال میتوانید با استفاده از کد زیر و قرار دادن پیش نیاز ها و اطلاعات سرور خود در قسمت firebaseConfig هر کاربری که با گوگل لاگین کرد، اطلاعاتش را در قالب یک آبجکت دریافت کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Login Firebase</title>
</head>
<body>
<h1>Login with Google</h1>
<button id="googleLogin">Login with Google</button>
<h3>User Info:</h3>
<pre id="userInfo">Not logged in</pre>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
import { getAuth, signInWithPopup, GoogleAuthProvider, onAuthStateChanged }
from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";
// 🔹 Firebase Config (مال خودت رو بذار)
const firebaseConfig = {
apiKey: "AIzaSyAEcH54KP-4JdkbOE86D5eOX6z26SDj7iI",
authDomain: "parnian-a9b11.firebaseapp.com",
projectId: "pornian-a9b11",
storageBucket: "pornian-a9b11.appspot.com",
messagingSenderId: "135114654620",
appId: "1:135114654620:web:b03d64e734e76763807e59",
measurementId: "G-B63QZB1CZP"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();
const userInfo = document.getElementById("userInfo");
const btn = document.getElementById("googleLogin");
// دکمه ورود با گوگل
btn.addEventListener("click", async () => {
try {
const result = await signInWithPopup(auth, provider);
// اینجا یک آبجکت کاربر داریم
const user = result.user;
userInfo.textContent = JSON.stringify({
uid: user.uid,
name: user.displayName,
email: user.email,
photoURL: user.photoURL
}, null, 2);
} catch (error) {
alert(error.message);
}
});
// مانیتور کردن تغییرات لاگین
onAuthStateChanged(auth, (user) => {
if (!user) {
userInfo.textContent = "Not logged in";
}
});
</script>
</body>
</html>آیا میدانید مدرسه فرانت اند پرنیان، دوره جاوا اسکریپت و ری اکت نکست از صفر تا صد را بصورت حرفه ای برگزار میکند؟
آموزش کامل هاستینگ در Firebase (Firebase Hosting)
وقتی صحبت از میزبانی وب می‌شود، خیلی‌ها به هاست‌های اشتراکی، VPS یا سرور اختصاصی فکر می‌کنند. اما گوگل با معرفی Firebase Hosting یک سرویس میزبانی ابری و کاملاً رایگان (در پلن اولیه) ارائه کرده است که مخصوص توسعه‌دهندگان وب و موبایل طراحی شده است.
با Firebase Hosting شما میتوانید وب‌سایت‌های استاتیک، SPA (مثل React و Vue)، وب‌اپلیکیشن‌های پیشرفته و حتی فایل‌های API خود را روی زیرساخت امن و سریع گوگل اجرا کنید.
در این بخش، به‌طور کامل و مرحله به مرحله، به بررسی هاستینگ فایربیس، امکانات آن و روش راه‌اندازی یک پروژه خواهیم پرداخت اما قبل از توضیح کامل بخش، خبر بد اینکه برای کاربران داخل ایران این سرویس در دسترس نیست.
اگر از وی پی ان معتبر استفاده کردید و باز هم مراحل اجرا نشدند، بخاطر لوکیشن اکانت گوگل شماست و باید یک اکانت با لوکیشن غیر ایران درست کنید.
دلایلی که باعث می‌شود توسعه‌دهندگان از Firebase Hosting استفاده کنند:
- رایگان بودن (Spark Plan)
- دامنه رایگان
yourapp.web.appوyourapp.firebaseapp.com - اتصال دامنه سفارشی با SSL رایگان
- CDN جهانی برای سرعت بارگذاری بالا
- HTTPS و امنیت پیش‌فرض
- مقیاس‌پذیری خودکار (Auto Scaling) بدون نیاز به VPS یا سرور اختصاصی
مراحل راه‌اندازی هاستینگ در Firebase
1. ساخت پروژه در Firebase
- وارد کنسول فایربیس شوید. (https://console.firebase.google.com)
- روی Add Project کلیک کنید.
- نام پروژه خود را وارد کنید (مثلاً
parnian_project). - گزینه‌های مربوط به Google Analytics را در صورت نیاز تنظیم کنید.
- پروژه ساخته می‌شود.
برای کار با Hosting نیاز به Firebase CLI دارید.
npm install -g firebase-toolsبعد از نصب، لاگین کنید.
firebase loginبرای مقداردهی اولیه پروژه (Initialize Project) به پوشه پروژه خود بروید و دستور زیر را اجرا کنید:
firebase init hostingبعد از آماده شدن پروژه، تنها با یک دستور همه چیز آنلاین می‌شود.
firebase deployپس از اتمام، یک لینک مشابه زیر دریافت می‌کنید:
https://my-website.web.appامیدواریم از این مقاله آموزش و معرفی کامل سایت Firebase نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
خیلی محتوای خوبی بود.
همینطور ادامه بدین لطفا من عاشق سایت شمام همیشه به سایت شما سر میزنم.