谷歌firebase_我使用Google Firebase学到的东西

谷歌firebase

When I first started my coding journey, I always here fellow programmers talk about how annoying Authentication and Authorization are. You can spend hours upon hours of time scratching your head and melting your brain and researching on Stack Overflow about it, and the end results are simply not as fancy and visible as some front end JavaScript codes and CSS styling. Thanks to third party Authentication services such as OAuth & Google Firebase, we don’t have to ever write our own authentication and authorization codes. Today we will take deeper look at Google Firebase.

当我第一次开始编码之旅时，我总是在这里与其他程序员谈论认证和授权是多么令人讨厌。 您可能需要花费数小时的时间挠头挠脑，研究大脑的Stack Overflow，最终结果并不像某些前端JavaScript代码和CSS样式那样花哨且可见。 借助OAuth和Google Firebase等第三方身份验证服务，我们无需编写自己的身份验证和授权代码。 今天，我们将更深入地研究Google Firebase。

Before we begin, I want to mention that Google Firebase has so many services under their belt, such as Authentications, storage, database, hosting and machine learning. Personally I haven’t experienced all of their services yet, but let us go over some of the features and services that I used throughout my recent project/app built and hosted with Google Firebase. First of all, in order for us to use Firebase, we need a google account, after signing into the google account, we can access the firebase by simply google search the term(https://firebase.google.com/), once we are on firebase website, we are going to create a project.

在开始之前，我想提到Google Firebase拥有众多服务，例如身份验证，存储，数据库，托管和机器学习。 就我个人而言，我还没有体验过它们的所有服务，但是让我们了解一下我最近在使用Google Firebase构建和托管的项目/应用中使用的一些功能和服务。 首先，为了使我们能够使用Firebase，我们需要一个google帐户，登录到google帐户后，只需通过google搜索术语 ( https://firebase.google.com/ )即可访问Firebase。我们在Firebase网站上，我们将创建一个项目。

Once the project is created, the first thing that we want to do is to create an application for the project, since our project is web based app, we would the third option to start our app with web (shown in the image below). During the creation of our app on firebase, it will promptly ask us to install google firebase CLI, which we would gladly do so for the first time using firebase by typing the following command to our terminal npm install -g firebase-tools once the firebase tools are installed on our CLI, we can begin with our process of using firebase as a tool to help us authenticate, store data, and host our app. A side tip to install firebase tools, if there is an error saying that permission is denied while installation, we can also try sudo npm install -g firebase-tools which will promptly ask the user to type in the password then proceeds to install firebase.

创建项目后，我们要做的第一件事就是为该项目创建一个应用程序，因为我们的项目是基于Web的应用程序，因此我们将选择第三个选项来通过Web启动我们的应用程序(如下图所示)。 在Firebase上创建我们的应用程序期间，它将立即要求我们安装google firebase CLI，我们很乐意首次使用firebase进行npm install -g firebase-tools一旦firebase键入以下命令到终端npm install -g firebase-tools工具已安装在CLI上，我们可以从使用Firebase作为工具来帮助我们进行身份验证，存储数据和托管应用程序的过程开始。 安装firebase工具的提示，如果出现错误，表明安装时权限被拒绝，我们也可以尝试sudo npm install -g firebase-tools ，它会立即要求用户输入密码，然后继续安装firebase。

So what I have learned using firebase is that they provide database for programmers to build their apps, this means that we don’t need to use a traditional back end such as Node.js or Ruby on Rails (MVP) style of codes, and API requests through the back end. Firebase simplified us with cloud functions and real-time database to store our information. Real-time database means that we don’t have to make a request to our backend every time some data is added to our app, firebase will automatically updates it and will show on our app automatically once we set it up correctly.

因此，我使用Firebase了解到的是，它们为程序员提供了数据库来构建他们的应用程序，这意味着我们不需要使用传统的后端，例如Node.js或Ruby on Rails(MVP)风格的代码，并且通过后端的API请求。 Firebase通过云功能和实时数据库来简化我们的存储信息。 实时数据库意味着我们不必每次将一些数据添加到我们的应用程序时都向后端发出请求，firebase会自动更新它，并在我们正确设置后自动在我们的应用程序上显示。

First thing we do to set up our database on firebase is to create it on Cloud Firestore shown in the image above, always start our database in test mode for default and quick setup. Make sure to use the correct time zone accordingly as it might affect the speed of the information transfer from your app to firebase. Once the database is set up properly, we can create a collection in our database. A collection is like the information on our SQL or NoSQL database with column and rows of certain sets of paired information for document collection purpose.

要在firebase上设置数据库，我们要做的第一件事就是在上图所示的Cloud Firestore上创建数据库，始终以测试模式启动数据库以进行默认和快速设置。 请确保相应地使用正确的时区，因为这可能会影响从应用程序到Firebase的信息传输速度。 正确设置数据库后，我们可以在数据库中创建一个集合。 收集就像我们SQL或NoSQL数据库上的信息一样，具有成对配对信息的某些列和行，用于文档收集。

What we do next after we started a collection is to add information to the collection manually (shown in the snippet below). For simplicity purpose, we usually use Auto-ID for the Document ID, proceeds to add field and value to setup our database info. The type of value can be string, numbers, boolean, array, null, and etc. In our demonstration, we simply use string since all the info such as name, bio & image URL is related to string format. Once we create our first document on the collection, by clicking add document, we continue to create more documents for our database collection.

开始收集后，我们下一步要做的是手动向收集中添加信息(如下面的代码片段所示)。 为了简单起见，我们通常使用自动ID作为文档ID，然后继续添加字段和值以设置我们的数据库信息。 值的类型可以是字符串，数字，布尔值，数组，空值等。在我们的演示中，我们仅使用字符串，因为所有信息(例如名称，bio和图像URL)都与字符串格式有关。 在集合上创建第一个文档后，通过单击添加文档，我们将继续为数据库集合创建更多文档。

Next thing we need to do is to connect our app to the database that we just created. First we go to the Project Overview on the left sidebar of firebase, go to Project settings and we will see the web app that we previously created on firebase, scroll all the way down to the bottom of the screen, we will see the Firebase SDK snippet, click on Config and we will see a similar code snippet as shown below. This is the magic code that we need in our project to connect the firebase database to our app. Copy the firebaseConfig code and go to our app files, create a file name firebase.js, and paste that magic code to that file.

接下来需要做的就是将我们的应用程序连接到我们刚刚创建的数据库。 首先，我们转到Firebase左侧栏中的“项目概述”，转到“项目设置”，我们将看到之前在Firebase上创建的Web应用程序，一直向下滚动到屏幕底部，我们将看到Firebase SDK片段，单击“配置”，我们将看到一个类似的代码片段，如下所示。 这是我们在项目中将Firebase数据库连接到我们的应用程序所需的魔术代码。 复制firebaseConfig代码并转到我们的应用程序文件，创建文件名firebase.js，然后将该魔术代码粘贴到该文件中。

Of course the magic doesn’t automatically run, we need to edit our code in firebase.js to setup the maximum uses of firebase in our app. In the follow code snippet shown below, we have simply tweak and edit some codes to initialize our app using firebase as a database, an authentication and storage purposes. Next thing we need to do is to install firebase database into our terminal by using npm install firebase, this will install and recognize all the functions that firebase offers such as initializeApp(), firestore(), auth(), and etc.

当然，魔术不会自动运行，我们需要在firebase.js中编辑代码以在我们的应用中设置firebase的最大使用率。 在下面显示的以下代码段中，我们仅需调整和编辑一些代码即可使用firebase作为数据库，身份验证和存储目的来初始化我们的应用程序。 接下来需要做的是使用npm install firebase将firebase数据库安装到我们的终端中，这将安装并识别firebase提供的所有功能，例如initializeApp()，firestore()，auth()等。

Once the config file for firebase is setup correctly, all we need to do is to call the information that we put on our database. Whenever we want to call the information from our database into our codes, we can simply import the firebase.js import firebase { db } from './firebase'; once db is imported, we can use React Hooks which is really helpful in terms of calling the database and manipulating the states.

正确设置Firebase的配置文件后，我们要做的就是调用我们存储在数据库中的信息。 每当我们想将数据库中的信息调用到代码中时，我们都可以简单地import firebase { db } from './firebase'; 一旦导入了db，我们就可以使用React Hooks，这在调用数据库和操作状态方面确实很有帮助。

Line 35 useState and line 43 useEffect in the code snippet above, it is super helpful in terms of pulling info and storing it into our code state. In the code snippet, db is simply representing the database from our firebase.js. Line 50 basically means that we will run useEffect once when our app refreshes. db.collection(‘posts’) will access our firebase database collection that we named posts, onSnapshot is like a really powerful listener that helps us take a snapshot of our collection whenever the database is manipulated (add or delete documents in database), firebase will automatically take a snapshot and fire our code again to update our app with the most current data. setPosts is the way we use state to map through the array of documents in our posts collection, and output our results by the document ID (firebase Auto ID)and the document data (in our case is name, bio, and imgUrl from our firebase database document). Once we complete this setup codes within our app, if we add a document to our posts collection on firebase, the code will re-run and add the new document and re-render our app with the updated info.

上面的代码片段中的第35行useState和第43行useEffect，对于拉取信息并将其存储到我们的代码状态方面非常有用。 在代码片段中，db只是表示我们firebase.js中的数据库。 第50行基本上意味着我们在应用刷新后将运行一次useEffect。 db.collection('posts')将访问我们命名为帖子的firebase数据库集合，onSnapshot就像一个真正强大的监听器，它可以在操作数据库(在数据库中添加或删除文档)，firebase时帮助我们为集合快照会自动拍摄快照并再次触发我们的代码，以使用最新数据更新我们的应用程序。 setPosts是我们使用状态映射帖子集合中文档数组的方式，并通过文档ID(firebase自动ID)和文档数据(在我们的情况下是firebase中的名称，bio和imgUrl)输出结果数据库文档)。 在我们的应用程序中完成此设置代码后，如果将文档添加到firebase上的帖子集合中，则代码将重新运行并添加新文档，并使用更新后的信息重新呈现我们的应用程序。

I know I haven’t covered all the features and services that Google Firebase has offered, and I plan to continue writing more blogs / part II of this blog to give more information about how to setup authentication and hosting through firebase. In the mean time, check out the following links for more information regarding the topics and my recent project that I built using React.js and Google Firebase. Thanks for reading and happy to chat with Y’all through my LinkedIn!

我知道我还没有介绍Google Firebase提供的所有功能和服务，并且我计划继续写更多博客/该博客的第二部分，以提供有关如何通过Firebase设置身份验证和托管的更多信息。 同时，请查看以下链接，以获取有关主题和我最近使用React.js和Google Firebase构建的项目的更多信息。 感谢您的阅读，并很高兴通过我的LinkedIn与Y'all聊天！

翻译自: https://medium.com/@haihuan.chen1/things-i-learned-using-google-firebase-beff40c17fae

谷歌firebase