Setup hosting gratis di firebase

Prasyarat

Sebelum memulai, Anda perlu aplikasi JavaScript (web atau Node.js) yang akan ditambahkan Firebase. Jika belum memiliki aplikasi tersebut, Anda dapat mendownload salah satu contoh panduan mulai cepat kami. Jika Anda melakukan upgrade dari Firebase SDK versi 2.x, baca panduan upgrade untuk Web/Node.js untuk memulai.
Jika Anda ingin menggunakan Node.js di lingkungan istimewa, misalnya server atau backend tanpa server seperti Cloud Functions (bukan klien untuk akses pengguna akhir seperti desktop Node.js atau perangkat IoT), Anda harus mengikuti petunjuk untuk menyiapkan Admin SDK.

Menambahkan Firebase ke aplikasi Anda

Untuk menambahkan Firebase ke aplikasi, Anda memerlukan project Firebase, Firebase SDK, dan cuplikan singkat kode inisialisasi yang berisi sejumlah detail mengenai project Anda.

Buat project Firebase di Firebase console jika Anda belum memilikinya.
- Jika Anda sudah memiliki project Google yang terhubung dengan aplikasi, klik Impor Project Google. Jika belum, klik Buat Project Baru.
- Jika Anda sudah memiliki project Firebase, klik Tambahkan Aplikasi dari halaman ringkasan project.
Klik Tambahkan Firebase ke aplikasi web.
Catat cuplikan kode inisialisasinya karena akan diperlukan nanti.

Web Aplikasi

Salin, lalu tempel cuplikan kode ke HTML aplikasi Anda. Cuplikan kode tersebut akan terlihat seperti ini:







<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

Node.js

Firebase SDK juga tersedia di npm. Jika Anda belum memiliki file package.json, buatlah melalui npm init. Selanjutnya, instal paket npm firebase dan simpan ke package.json Anda:







$ npm install firebase --save

Untuk menggunakan modul di aplikasi, require dari file JavaScript mana pun:







var firebase = require("firebase");

Jika menggunakan ES2015, Anda dapat import modul:







import * as firebase from "firebase";

Kemudian, inisialisasikan Firebase SDK menggunakan cuplikan kode di atas, yang akan terlihat seperti ini:







// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Cuplikan tersebut berisi informasi inisialisasi untuk mengonfigurasi Firebase JavaScript SDK agar menggunakan Authentication, Cloud Storage dan Realtime Database. Anda dapat mengurangi jumlah kode yang digunakan aplikasi dengan menyertakan fitur yang Anda butuhkan saja. Komponen yang dapat diinstal secara individu adalah:

firebase-app - Klien firebase inti (wajib).
firebase-auth - Firebase Authentication (opsional).
firebase-database - Firebase Realtime Database (opsional).
firebase-storage - Cloud Storage (opsional).
firebase-messaging - Firebase Cloud Messaging (opsional).

Dari CDN, sertakan komponen-komponen individual yang Anda butuhkan (sertakan firebase-app terlebih dahulu):







<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-messaging.js"></script>
<!-- Leave out Storage -->
<!-- <script src="https://www.gstatic.com/firebasejs/4.1.1/firebase-storage.js"></script> -->
<script>
  var config = {
    // ...
  };
  firebase.initializeApp(config);
</script>

Jika Anda menggunakan bundler seperti Browserify atau webpack, Anda dapat langsung require() komponen yang digunakan:







var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");
// Leave out Storage
//require("firebase/storage");
var config = {
  // ...
};
firebase.initializeApp(config);

Firebase SDK juga tersedia di npm. Jika Anda belum memiliki file package.json, buatlah melalui npm init. Selanjutnya, instal paket npm firebase dan simpan ke package.json Anda:







$ npm install firebase --save

Untuk menggunakan modul di aplikasi, require dari file JavaScript mana pun:







var firebase = require("firebase");

Jika menggunakan ES2015, Anda dapat import modul:







import * as firebase from "firebase";

Kemudian, inisialisasikan Firebase SDK menggunakan cuplikan kode di atas, yang akan terlihat seperti ini:







// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

Menggunakan layanan Firebase

App Firebase dapat menggunakan beberapa layanan Firebase. Setiap layanan dapat diakses melalui namespace firebase:

firebase.auth() - Authentication
firebase.storage() - Cloud Storage
firebase.database() - Realtime Database

Lihat masing-masing layanan untuk dokumentasi mengenai penggunaannya.

Menjalankan Server Web Lokal untuk Pengembangan

Jika Anda membuat aplikasi web, Anda akan menemukan bahwa beberapa bagian Firebase JavaScript SDK mengharuskan aplikasi web Anda disajikan dari server, bukan dari sistem file lokal. Anda dapat menggunakan Firebase CLI untuk menjalankan server lokal seperti ini:







$ npm install -g firebase-tools
$ firebase init    # Generate a firebase.json (REQUIRED)
$ firebase serve   # Start development server

Menghosting Aplikasi Web Menggunakan Firebase Hosting

Jika Anda membuat aplikasi web dan aplikasi web tersebut berisi konten statis, Anda dapat menerapkannya dengan mudah menggunakan Firebase Hosting.
Firebase Hosting adalah hosting web statis yang fokus pada developer untuk aplikasi web front-end modern. Dengan Firebase Hosting, Anda dapat menerapkan aplikasi web yang dilengkapi SSL ke domain sendiri pada jaringan pengiriman konten (CDN) global hanya dengan satu perintah.

Pengimporan SDK dan inisialisasi implisit

Aplikasi web yang dihosting dengan Firebase Hosting dapat memanfaatkan konfigurasi project yang lebih sederhana. Paste cuplikan kode berikut ke dalam HTML aplikasi untuk mengimpor Firebase SDK dan mengonfigurasinya secara otomatis untuk project yang dihosting aplikasi Anda:







    <script src="/__/firebase/4.1.1/firebase-app.js"></script>
    <script src="/__/firebase/4.1.1/firebase-auth.js"></script>
    <script src="/__/firebase/4.1.1/firebase-database.js"></script>
    <script src="/__/firebase/4.1.1/firebase-messaging.js"></script>

    <!-- Leave out Storage -->
    <!-- <script src="/__/firebase/4.1.1/firebase-storage.js"></script> -->

    <script src="/__/firebase/init.js"></script>

Menginisialisasi beberapa aplikasi

Dalam kebanyakan kasus, Anda hanya perlu menginisialisasi satu aplikasi default. Anda dapat mengakses layanan di luar aplikasi tersebut dengan dua cara yang setara:







// Initialize the default app
var defaultApp = firebase.initializeApp(defaultAppConfig);

console.log(defaultApp.name);  // "[DEFAULT]"
// You can retrieve services via the defaultApp variable...
var defaultStorage = defaultApp.storage();
var defaultDatabase = defaultApp.database();
// ... or you can use the equivalent shorthand notation
defaultStorage = firebase.storage();
defaultDatabase = firebase.database();

Beberapa kasus penggunaan mengharuskan Anda membuat beberapa aplikasi secara bersamaan. Misalnya, Anda mungkin ingin membaca data dari Realtime Database pada satu project Firebase dan menyimpan file di project lain. Atau, Anda mungkin ingin mengautentikasi satu aplikasi sementara aplikasi lain tidak terautentikasi. Firebase SDK dapat digunakan untuk membuat beberapa aplikasi secara bersamaan, masing-masing dengan informasi konfigurasinya sendiri.







// Initialize the default app
firebase.initializeApp(defaultAppConfig);
// Initialize another app with a different config
var otherApp = firebase.initializeApp(otherAppConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherApp.name);        // "other"
// Use the shorthand notation to retrieve the default app's services
var defaultStorage = firebase.storage();
var defaultDatabase = firebase.database();
// Use the otherApp variable to retrieve the other app's services
var otherStorage = otherApp.storage();
var otherDatabase = otherApp.database();

Langkah berikutnya

Pelajari Firebase:

Mempelajari aplikasi Firebase contoh.
Mendapatkan pengalaman langsung dengan Firebase Web Codelab.
Mempelajari kode open source di GitHub.

Menambahkan fitur Firebase ke aplikasi Anda:

Menyiapkan autentikasi pengguna dengan Authentication.
Menyimpan informasi pengguna dengan Realtime Database atau data blob dengan Cloud Storage.
Menerima notification dengan Cloud Messaging.

sumber artikel: Google Firebase