Требования, которые вам нужны.
- Аккаунт Google
- Аккаунт Firebase
Автор: - Ударакс
Еще статьи:- https://udarax.me/blog/
Что такое база данных Firebase в реальном времени?
База данных Firebase Realtime — это облачная база данных NoSQL, которая позволяет хранить и синхронизировать данные между вашими пользователями в режиме реального времени. Это облачная база данных. Данные хранятся в формате JSON и синхронизируются в реальном времени для каждого подключенного клиента. Когда вы создаете кроссплатформенные приложения с нашими платформами Apple, Android и JavaScript SDK, все ваши клиенты совместно используют один экземпляр базы данных Realtime Database и автоматически получать обновления с новейшими данными.
Сегодня мы собираемся создать приложение для чтения и записи данных, используя базу данных в реальном времени с JavaScript.
Создайте учетную запись Firebase — Шаг 01
Первым делом нужно создать это приложение, создать учетную запись. Нажмите здесь, чтобы создать учетную запись.
Войдите в систему с помощью Google, чтобы создать учетную запись. И тогда вы будете автоматически перенаправлены на последнюю страницу проекта. В вашем случае это будет пустая страница без проектов. Настало время создать новый проект. Для этого нажмите на поле добавить проект и создайте проект с заданным именем.
Затем вы будете автоматически перенаправлены на страницу обзора проекта. На этой странице вам нужно добавить платформу. Для этого нажмите кнопку Интернет. Соответствующее изображение прикреплено ниже.
Зарегистрируйте свое приложение по имени. И оставьте флажок Хостинг как есть (не взломанный). Потому что мы не собираемся использовать эту функцию для нашего приложения.
На втором шаге вам нужно выбрать опцию «использовать тег script›» и скопировать тег, и мы будем использовать его для нашего приложения. Эта часть очень важна. Затем нажмите кнопку перейти к консоли.
Создание базы данных в реальном времени — Шаг 02
Для создания базы данных в реальном времени выберите меню «Сборка» в левой панели меню. Затем нажмите на базу данных в реальном времени.
После загрузки страницы нажмите кнопку «Создать базу данных». Затем выберите предлагаемый центр обработки данных из параметров базы данных и нажмите «Далее». Затем выберите «Начать в заблокированном режиме», чтобы создать нашу базу данных, и нажмите «Включить».
Следующей важной частью является изменение правил базы данных. Для этого вам необходимо перейти в раздел «Правила». Вы можете найти это вверху страницы.
Затем измените правила чтения и записи, как показано ниже, и опубликуйте их после изменения.
Создать приложение — Шаг 03
Мы можем использовать любой фреймворк для разработки интерфейса. Но для этого я просто использую bootstrap. А также используйте jQuery для некоторых вещей Js.
Теперь создайте новый файл с именем app.js и поместите скопированные данные проекта в шаг 02.
app.js
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
var database = firebase.database();
Затем создайте еще один новый файл и назовите его index.html. Импортируйте все скрипты в раздел head файла index.html, как показано ниже, и я добавил еще несколько стилей для будущих работ.
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" />
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script>
<title>Udarax.me Post 02</title>
<style>
.content{
padding: 50px;
}
.addsection , .viewSection{
margin-top: 50px;
}
</style>
</head>
Создайте раздел тела для отображения данных, как показано ниже.
<div class="container">
<div class="content">
<h3>Read and Write Data with JavaScript</h3>
<div class="addsection">
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label for="">Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="">Age</label>
<input type="text" name="age" id="age" class="form-control">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="">Address</label>
<input type="text" name="address" id="address" class="form-control">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label for="">Action</label>
<input type="button" name="addButon" id="addButon" class="btn btn-success col-lg-12" value="Add">
</div>
</div>
</div>
</div>
<div class="viewSection">
<table class="table" id="userTable">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
Чтение данных
var ref = firebase.database().ref('/Users/');
ref.on("value", function (snapshot) {
const data = snapshot.val();
}, function (error) {
console.log("Error: " + error.code);
});
Запись данных
firebase.database().ref('/Users/').push({
name: name,
age: age,
address : address
});
index.html (последние правки)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-database.js"></script>
<title>Udarax.me Post 02</title>
<style>
.content{
padding: 50px;
}
.addsection , .viewSection{
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h3>Read and Write Data with JavaScript</h3>
<div class="addsection">
<div class="row">
<div class="col-lg-3">
<div class="form-group">
<label for="">Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="">Age</label>
<input type="text" name="age" id="age" class="form-control">
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label for="">Address</label>
<input type="text" name="address" id="address" class="form-control">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label for="">Action</label>
<input type="button" name="addButon" id="addButon" class="btn btn-success col-lg-12" value="Add">
</div>
</div>
</div>
</div>
<div class="viewSection">
<table class="table" id="userTable">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-analytics.js";
</script>
<script src="app.js"></script>
<script>
function resetInputs(){
$("#name").val("");
$("#age").val("");
$("#address").val("");
}
var ref = firebase.database().ref('/Users/');
ref.on("value", function (snapshot) {
var result = [];
let arr = [];
const data = snapshot.val();
arr.push(data);
$("#userTable").find("tr:gt(0)").remove();
console.log("This");
console.log(result);
console.log(arr.length-1);
for(var i in arr[0]){
result.push([i, arr[0][i]]);
}
console.log(result);
for (i = 0; i <result.length; i++) {
let user_id = String(result[i][0]);
markup = "<tr class='trow'><td>" +
result[i][1]['name'] + "</td><td>" +
result[i][1]['age'] + "</td><td>" +
result[i][1]['address'] + "</td></tr>"
tableBody = $("#userTable tbody");
tableBody.append(markup);
}
}, function (error) {
console.log("Error: " + error.code);
});
function deleteUser(id){
console.log(id);
}
$("#addButon").click(function (){
console.log("Clicked");
$("#userTable").find("tr:gt(0)").remove();
let name = $("#name").val();
let age = $("#age").val();
let address = $("#address").val();
firebase.database().ref('/Users/').push({
name: name,
age: age,
address : address
});
resetInputs();
});
</script>
</body>
</html>
Задайте любой интересующий вас вопрос в разделе контакты. Спасибо!
