Primeiros passos com o Firebase

Adicione o Firebase ao seu projeto Android #

Aqui estão as etapas necessárias para criar um projeto do Firebase e conectar-se a um aplicativo Android.

Adicione o Firebase ao seu aplicativo #

1. Crie um projeto do Firebase no Firebase console e clique em Create New Project.

2. Clique em Add Firebase to your Android app e siga as etapas de configuração.

3. Quando solicitado, digite o nome do pacote do aplicativo. É importante inserir o nome do pacote que seu aplicativo está usando; isso só pode ser definido quando você adiciona um aplicativo ao seu projeto do Firebase.

4. Para adicionar o certificado de assinatura de depuração SHA1, que é necessário para suporte a links dinâmicos, convites e login do Google no Auth, acesse seu projeto no Android Studio, clique na guia “Gradle” no lado direito do seu janela, clique no botão Refresh, vá para project(root) -> Tasks -> android -> signingReport. Isso gerará MD5 e SHA1 na guia Executar. Copie e cole SHA1 no console do Firebase.

5. No final, você fará o download de um arquivo google-services.json. Você pode baixar este arquivo novamente a qualquer momento.

6. Se você ainda não fez isso, copie isso na pasta do módulo do seu projeto, normalmente app/.

A próxima etapa é adicionar o SDK para integrar as bibliotecas do Firebase no projeto.

Adicione o SDK #

Para integrar as bibliotecas do Firebase em um de seus próprios projetos, você precisa realizar algumas tarefas básicas para preparar seu projeto do Android Studio. Você já deve ter feito isso como parte da adição do Firebase ao seu aplicativo.

1. Adicione regras ao seu arquivo build.gradle de nível raiz para incluir o plug-in de serviços do google:

   buildscript { // … dependencies { // … classpath ‘com.google.gms:google-services:3.0.0’ } }

Em seguida, no arquivo do módulo Gradle (geralmente o app/build.gradle), adicione a linha apply plugin na parte inferior do arquivo para habilitar o plugin Gradle:

apply plugin: 'com.android.application'

android {
  // ...
}

dependencies {
  // ...
  compile 'com.google.firebase:firebase-core:9.4.0'
}

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

A etapa final é adicionar as dependências do SDK do Firebase usando um ou mais bibliotecas disponíveis para os diferentes recursos do Firebase.

Configurando o Firebase para IOS #

1. Em primeiro lugar, você deseja acessar o painel do Firebase e criar um novo projeto usando o botão ‘Criar novo projeto’.

2. Você deseja criar um novo projeto adicionando o nome do seu aplicativo, por exemplo, eu coloquei o meu como ‘Nome do aplicativo legal’, escolha sua região e pressione ‘Criar projeto’

3. Depois de criar o projeto, você será direcionado para esta página que é o painel e a partir daqui você deve escolher uma plataforma na qual deseja instalar o Firebase para este exemplo, escolheremos IOS.

4. Após selecionar IOS, você deverá ver o mesmo pop-up da imagem abaixo solicitando o IOS Bundle e o ID da loja de aplicativos. Você só precisará fornecer o pacote IOS porque nosso aplicativo ainda não está na loja de aplicativos.

5. Obtenha o ID do pacote do xcode depois de criar um projeto xcode de qualquer maneira que você normalmente faria depois disso, você pode obter o ID do pacote para seu aplicativo na visualização geral do aplicativo no xcode, ele será o primeiro campo na parte superior e, depois de obtê-lo, cole no campo Bundle no firebase, por exemplo, o meu seria ‘MauginInc.KIKOO’

6. Depois de fazer isso e pressionar ‘Próximo’, um arquivo ‘GoogleService-Info.plist’ será baixado e o que você precisará fazer é movê-lo para a pasta raiz do seu aplicativo dentro do xcode

7. Você vai querer inicializar os pods e instalar os pods do Firebase que você precisa. Você pode fazer isso entrando no seu terminal e navegue até a pasta do seu projeto xcode e siga estas instruções fornecidas pelo Firebase.

8. Finalmente, você deseja configurar seu aplicativo para permitir que o swift faça o que faz melhor e que está tornando o desenvolvimento de aplicativos muito mais fácil e eficiente, tudo o que você precisa fazer é editar seus arquivos AppDelegate.swift da mesma forma que o pop-up mostra.

Isso é tudo que você agora tem o Firebase instalado em seu projeto xcode para IOS

Introdução ao Firebase com um aplicativo da Web simples Hello World em JavaScript #

Este exemplo demonstrará como começar a usar o Firebase em seus aplicativos da Web com JavaScript.

Vamos adicionar um text child em nosso Firebase Database e exibi-lo em tempo real em nosso aplicativo da web.

Vamos começar. #

• Acesse o Console do Firebase - https://console.firebase.google.com e crie um novo projeto. Digite o nome do projeto, País/região e clique em criar projeto.

• Agora crie um arquivo index.html em seu computador. E adicione o seguinte código a ele.

    <body>
        <p>Getting started with Firebase</p>
        <h1 id="bigOne"></h1>
        <script>
              // your firebase JavaScript code here
        </script>
  
    </body>
  

• Agora vá para o seu projeto no Firebase Console e você pode ver isso

• Agora clique em Add Firebase to your web app. Você verá o seguinte pop-up, clique no botão copiar

• Agora vá para o seu arquivo index.html e adicione o snippet à seção de script da seguinte forma

    <body>
  
      <p>Getting started with Firebase</p>
      <h1 id="bigOne"></h1>
  
      <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script>
      <script>
        // Initialize Firebase
        var config = {
          apiKey: "apiKey",
          authDomain: "authDomain",
          databaseURL: "databaseURL",
          storageBucket: "storageBucket",
          messagingSenderId: "messagingSenderId"
        };
        firebase.initializeApp(config);
      </script>
    </body>
  

• Agora você concluiu a adição do código de inicialização do Firebase. Agora precisamos obter nosso valor text do banco de dados.

• Para fazer isso, adicione o seguinte código (Inicialize o Firebase já adicionado na última etapa. Não adicione novamente) dentro do script em index.html

    <script>
  
        // Initialize Firebase
        var config = {
          apiKey: "apiKey",
          authDomain: "authDomain",
          databaseURL: "databaseURL",
          storageBucket: "storageBucket",
          messagingSenderId: "messagingSenderId"
        };
        firebase.initializeApp(config);
  
        // getting the text value from the database
        var bigOne = document.getElementById('bigOne');
        var dbRef = firebase.database().ref().child('text');
        dbRef.on('value', snap => bigOne.innerText = snap.val());
  
    </script>
  

• Agora terminamos com o arquivo index.html e agora vamos para o Database no Firebase Console.

• Você verá que está em branco e vazio agora. Vamos adicionar um texto filho no banco de dados e adicionar qualquer valor a ele.

• Agora clique no botão ADICIONAR.

• Agora vá para a seção RULES no banco de dados.

• Para fins de desenvolvimento, agora vamos habilitar todas as consultas ler e escrever.

    {
      "rules": {
          ".read": "true",
          ".write": "true"
        }
    }
  

  

• Agora abra index.html no navegador

• Você verá o valor do texto em sua página da seguinte forma -

• Agora, se você voltar ao seu banco de dados e alterar o valor text child para outra coisa, verá que o texto no navegador também muda sem nenhuma atualização ou recarregamento. É assim que o banco de dados em tempo real funciona no Firebase.