{"id":25817355,"url":"https://github.com/andersonkaiti/curso-firebase","last_synced_at":"2026-04-14T14:31:50.269Z","repository":{"id":267160346,"uuid":"879518521","full_name":"andersonkaiti/curso-firebase","owner":"andersonkaiti","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-02T15:54:28.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T07:38:35.469Z","etag":null,"topics":["css3","firebase","firebase-auth","firebase-storage","html5","javascript","webpack"],"latest_commit_sha":null,"homepage":"https://curso-firebase-6ad68.firebaseapp.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andersonkaiti.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-28T03:57:04.000Z","updated_at":"2025-02-02T16:11:02.000Z","dependencies_parsed_at":"2025-02-28T06:57:18.479Z","dependency_job_id":"7c998bb2-85cb-4829-a783-01442b2b7fec","html_url":"https://github.com/andersonkaiti/curso-firebase","commit_stats":null,"previous_names":["andersonkaiti/curso-firebase"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/andersonkaiti/curso-firebase","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersonkaiti%2Fcurso-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersonkaiti%2Fcurso-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersonkaiti%2Fcurso-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersonkaiti%2Fcurso-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andersonkaiti","download_url":"https://codeload.github.com/andersonkaiti/curso-firebase/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersonkaiti%2Fcurso-firebase/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31801243,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","firebase","firebase-auth","firebase-storage","html5","javascript","webpack"],"created_at":"2025-02-28T06:34:45.244Z","updated_at":"2026-04-14T14:31:50.249Z","avatar_url":"https://github.com/andersonkaiti.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Curso de Firebase\n\nSite criado com `Bootstrap`, `Firebase` e `Webpack` durante a realização do curso `Introdução ao Firebase` do `balta.io` para cadastro de usuários com o Banco de dados em tempo real, autenticação e armazenamento de imagens com o Storage do Firebase.\n\n- `Bootstrap` - framework CSS para a estilização do site.\n- `Webpack` - bundler que permitiu utilizar node_modules em web vanilla.\n\n# Introdução ao Firebase\n\n# O que é um BaaS?\n\n`BaaS` significa `Back-end as a Service` e fornece um back-end completo para a aplicação, permitindo focar no front-end. Ele deriva do SaaS (Software as a Service) e é utilizado como um serviço, ou seja, funciona como uma plataforma pronta para uso e que `abstrai tudo o que vem depois da camada de apresentação`.\n\nDentro das abstrações está a `segurança da aplicação`, além da `infraestrutura`. É claro que nem tudo é 100%, mas a segurança de um ambiente OnCloud é mais reforçado que um ambiente OnPremise (servidor físico).\n\nFornece:\n\n- Host.\n- Storage.\n- URL e endpoint.\n- Seriço REST.\n\n# O que é o Firebase?\n\nO Firebase é um `BaaS disponível apenas on-line` (não é possível baixar e utilizar localmente), criada pela Google, e que funciona a partir da URL `firebase.google.com`.\n\nEle fornece o seguinte:\n\n- Autenticação.\n- Real-Time Database.\n- Storage.\n- Notification.\n- Hosting.\n\n# Prós e Contras\n\n## Prós\n\n- `Economia de Tempo` - já fornece tudo pronto, como API REST, autenticação, upload de arquivos, host etc.\n- `Isenção de responsabilidade` - muitas das vezes o programador precisa saber um pouco de tudo, como Cloud, infraestrutura etc. Com o Firebase, o desenvolvedor não é responsável por ataques, invasões etc., mas sim a Google.\n- `Redução de Custos.`\n- `Alta disponibilidade` - a aplicação não cai. No Azure, por exemplo, ao subir uma aplicação ela é replicada em mais dois servidores, então se o primeiro falhar, o segundo já está em ação. Caso a aplicação seja de vendas, por exemplo, a aplicação cai durante um pico de usuário, haveria perda de dinheiro.\n\n## Contras\n\n- `Customizável, mas nem tanto` - se houver muitas regras de negócio, dificilmente é possível migrar um ERP para um BaaS.\n- `É necessário se adequar a ele.`\n- `Dificuldade em cenários OnPremise` - como o Firebase está na nuvem, a ideia pode não ser bem aceita, pois podem preferir localmente.\n\n# Acesso ao Firebase\n\nPara acessar a documentação, seção de preços e anúncios de funcionalidades novas, basta acessar o [firebase.google.com](https://firebase.google.com), e, para utilizar os serviços, basta acessar o [console.firebase.google.com](https://console.firebase.google.com).\n\n# REST e CRUD\n\nO Firebase no `armazenamento de dados trabalha no formato NoSQL`, e não com dados relacionais, e armazena documentos então os dados são adicionados ao banco no formato JSON, em coleções, versionando-os. Para manipular os dados, o Real-Time Database fornece métodos CRUD.\n\nPara utilizar o Real-Time Database, basta realizar um `POST na URL` para salvar os dados da seguinte forma: `https://APP.firebaseio.com/COLEÇÂO.json`. Ao criar uma aplicação, o Firebase cria um `prefixo para a URL (um sub-domínio)` e tudo o que vier `depois da última barra ele tratará como coleção`, sendo necessário colocar a extensão `.json` no final para o Firebase perceber que o POST está `adicionando uma coleção`. O mesmo vale para os métodos GET, PUT e DELETE, com a mesma URL.\n\nAo adicionar um dado, o Firebase sempre `gera um ID automaticamente`, além disso, é possível adicionar `qualquer tipo de informação` ou um `JSON totalmente diferente do anterior`.\n\n# Regras\n\nPara realizar requisições ao banco de dados e outros serviços do Firebase, é necessário `configurar as regras de acesso`. É possível `impedir` a operação read (leitura) ou write (escrita) adicionando o valor `false`, `permitir` as operações com `true` e permitir elas apenas quando o usuário estiver `autenticado` com `\"auth != null\"`:\n\n```json\n{\n  \"rules\": {\n    \".read\": \"auth != null\",\n    \".write\": true\n  },\n  \"clientes\": {\n    \".read\": true,\n    \".write\": false\n  }\n}\n```\n\n# Fazendo o POST\n\n```\n┌─────────┬──────────────────┐\n│ Headers │ application/json │\n└─────────┴──────────────────┘\n```\n\n```json\n{\n  \"nome\": \"Peter\",\n  \"sobrenome\": \"Parker\"\n}\n```\n\n# Fazendo o GET\n\n```json\n{\n  \"id\": {\n    \"nome\": \"Peter\",\n    \"sobrenome\": \"Parker\"\n  }\n}\n```\n\n# Fazendo o PUT\n\n```json\n{\n  \"id\": {\n    \"nome\": \"Peter da Silva\",\n    \"sobrenome\": \"Parker\"\n  }\n}\n```\n\n# Real-Time Database\n\nQuando a aplicação, configurada, se conecta ao Firebase, ela mantém a conexão, permitindo que os dados sejam `trafegados em tempo real`. Tudo o que acontece no banco de dados é refletido na tela e no JavaScript, e tudo o que é feito na tela é passado para o JavaScript que passa para o banco de dados. O nome disso é `Three-Way Binding`.\n\n## WebSockets\n\nToda vez que uma conexão é realizada com o servidor, não estamos conectados a ele. A aplicação conecta-se a ele, executa uma operação, retorna alguma informação para a página e a conexão é fechada. `Com Sockets, a conexão é realizada e se mantém`, tornando o tráfego muito mais rápido, pois todo o processo de abertura e fechamento de conexão é evitado, haja vista que a aplicação já está conectada.\n\n## Snapshots\n\nUma `Snapshot` é como se fosse uma `fotografia do banco de dados`. Toda vez que um dado é `atualizado` ou `inserido`, ele `tira uma foto documento`:\n\n```js\nconst firebase = initializeApp(firebaseConfig);\n\n// O banco de dados é obtido a partir da função getDatabase\nconst database = getDatabase(firebase);\n\n// É criada a referência da coleção \"users\"\nconst usersRef = ref(database, \"users\");\n\n// A função create recebe os dados e realiza os push dele na coleção\nfunction create(data) {\n  return push(usersRef, data);\n}\n\n// Escuta por atualizações no banco e, caso haja, recebe uma snapshot, que é uma fotografia do banco de dados, e, com base nela, exibe os dados na tela\nonValue(usersRef, (snapshot) =\u003e {\n  usersList.innerHTML = \"\";\n  snapshot.forEach((item) =\u003e {\n    const li = document.createElement(\"li\");\n    li.appendChild(\n      document.createTextNode(`${item.val().name} : ${item.val().age}`)\n    );\n    usersList.appendChild(li);\n  });\n});\n```\n\n# Authentication\n\n```js\nconst firebase = initializeApp(firebaseConfig);\n\n// A variável de autenticação é obtida a partir da função getAuth\nconst auth = getAuth(firebase);\n\n// Cria uma conta com base no e-mail e senha inseridos no formulário\nconst createAccountWithEmailAndPassword = async () =\u003e {\n  try {\n    await createUserWithEmailAndPassword(\n      auth,\n      emailInput.value,\n      passwordInput.value\n    );\n  } catch (error) {\n    console.error(\"Falha ao cadastrar.\");\n  }\n};\n\n// Autentica o usuário com base no e-mail e senha inseridos no formulário\nconst authenticateUser = async () =\u003e {\n  try {\n    const result = await signInWithEmailAndPassword(\n      auth,\n      emailInput.value,\n      passwordInput.value\n    );\n  } catch (error) {\n    console.error(error);\n  }\n};\n\n// Desloga o usuário\nlogOutButton.addEventListener(\"click\", async () =\u003e await signOut(auth));\n\nconst authenticateAnonymously = async () =\u003e {\n  try {\n    const result = await signInAnonymously(auth);\n  } catch (error) {\n    console.error(error);\n  }\n};\n\n// Permite se cadastrar por meio de uma rede social com um pop-up que aparece na tela, basta fornecer o Provider da rede social\nconst signIn = async (provider) =\u003e {\n  try {\n    const result = await signInWithPopup(auth, provider);\n  } catch (error) {\n    console.error(error);\n  }\n};\n\n// https://github.com/settings/applications\nauthGitHubButton.addEventListener(\"click\", () =\u003e {\n  const provider = new GithubAuthProvider();\n  signIn(provider);\n});\n\nauthGoogleButton.addEventListener(\"click\", () =\u003e {\n  const provider = new GoogleAuthProvider();\n  signIn(provider);\n});\n```\n\n# Storage\n\n```js\nconst firebase = initializeApp(firebaseConfig);\n\nconst storage = getStorage(firebase);\n\nfileButton.addEventListener(\"change\", ({ target }) =\u003e {\n  // Obtém o arquivo\n  const file = target.files[0];\n\n  // Referencia o Storage\n  const storageRef = ref(storage, `arquivos/${file.name}`);\n\n  // Envia o arquivo. Caso seja necessário apenas enviar o arquivo, a variável task não é necessária, mas como existe o Progress Bar, ela é necessária\n  const task = uploadBytesResumable(storageRef, file);\n\n  // Atualiza a Progress Bar\n  task.on(\n    \"state_changed\",\n    function progress(snapshot) {\n      const percentage =\n        (snapshot.bytesTransferred / snapshot.totalBytes) * 100;\n      uploader.value = percentage;\n    },\n    function error(error) {\n      console.error(error);\n    },\n    function complete() {\n      alert(\"Envio completo!\");\n    }\n  );\n});\n```\n\n# Firebase Tools - CLI\n\n- Conjunto de Comandos usar via Console.\n- Permite iniciar aplicativos e executar deploys.\n- Facilita o uso do Firebase.\n\n```bash\nnpm i -g firebase-tools\n```\n\n# Hosting\n\n- Fornece uma hospedagem de arquivos estáticos, ou seja, apenas HTML, CSS e JavaScript.\n- A partir do `terminal`, é possível realizar o `deploy da aplicação`, então `não é necessário` realizar conexão no `servidor FTP`.\n- O `histórico de deploys` permanecem em uma lista, então caso ocorra um erro em um deploy, é possível realizar um `rollback (reverter)`, realizando o deploy da versão anterior.\n- Permite a `personalização do domínio`.\n\nÉ necessário realizar o login:\n\n```bash\nfirebase login\n```\n\nPara inicializar o Firebase na aplicação, basta executar o seguinte comando no terminal dentro do repositório local da aplicação e responder às perguntas:\n\n```bash\nfirebase init\n```\n\nApós isso, alguns arquivos serão gerados, como o `firebase.json`, com as configurações dos serviços, e o `.firebaserc`, com as configurações padrões do Firebase. Caso uma das features escolhidas nas perguntas seja o `Real-Time Database`, o comando criará um arquivo com as `regras do banco de dados` para serem armazenadas localmente.\n\nApós a configuração, basta executar o seguinte comando para realizar o `deploy`:\n\n```bash\nfirebase deploy\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandersonkaiti%2Fcurso-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandersonkaiti%2Fcurso-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandersonkaiti%2Fcurso-firebase/lists"}