GITBOOK-767: Firebase-finalized

Author: lolipophas

.gitbook/assets/image (1) (1) (2) (3).png

@@ -115,6 +115,7 @@
     * [OAuth 2.0](user-guide/integrations/rest-api/oauth-2.0.md)
     * [Jet Requests Auth](user-guide/integrations/rest-api/jet-requests-auth.md)
   * [Firebase / Firestore](user-guide/integrations/firebase-firestore/README.md)
+    * [Firestore](user-guide/integrations/firebase-firestore/firestore.md)
     * [Import CSV into Firebase](user-guide/integrations/firebase-firestore/import-csv-into-firebase.md)
     * [Firebase Cloud Storage](user-guide/integrations/firebase-firestore/firebase-cloud-storage.md)
     * [Realtime DB](user-guide/integrations/firebase-firestore/realtime-database.md)
@@ -237,7 +238,7 @@
 * [🧮 Data Editor](user-guide/data/README.md)
   * [Syncing Schema and Data](user-guide/data/syncing-schema-and-data.md)
   * [Managing Columns](user-guide/data/managing-columns.md)
-  * [Making API requests](user-guide/data/make-an-http-request/README.md)
+  * [Making API requests](user-guide/data/make-an-http-request.md)
     * [Open API Builder](user-guide/data/make-an-http-request/open-api-builder.md)
     * [Response Transformer](user-guide/data/make-an-http-request/response-transformer.md)
     * [Sorting data](user-guide/data/make-an-http-request/sorting-data.md)

.gitbook/assets/image (1) (1) (2).png

@@ -55,6 +55,6 @@ Simply click `Refresh Data` button to run your request
 
 ![](../../.gitbook/assets/GIF115.gif)
 
-{% content-ref url="../../user-guide/data/make-an-http-request/" %}
-[make-an-http-request](../../user-guide/data/make-an-http-request/)
+{% content-ref url="../../user-guide/data/make-an-http-request.md" %}
+[make-an-http-request.md](../../user-guide/data/make-an-http-request.md)
 {% endcontent-ref %}

.gitbook/assets/image (1) (1).png

@@ -8,7 +8,7 @@ To familiarize yourself with how `Customize with Designer` works, let's build a
 
 {% embed url="https://www.youtube.com/watch?v=-u6X4gpCWj8&t=16s&ab_channel=JetAdmin" %}
 
-<figure><img src="../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../../.gitbook/assets/image (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 We'll go through the whole **process of creation** step-by-step.&#x20;
 

.gitbook/assets/image (1).png

@@ -20,7 +20,7 @@ description: >-
 * Manage your Collection by Adding/Editing rows
 * Search, Filter, and Sorting your Collection Data
 * Define [Relations](../computed-columns/relations.md) between Collections
-* Making [API requests](make-an-http-request/) and [SQL queries](make-a-sql-query.md)
+* Making [API requests](make-an-http-request.md) and [SQL queries](make-a-sql-query.md)
 
 You handle the Data when you add a resource to your component. Collections are visualizations of the data that Jet gets from your resources.
 

.gitbook/assets/image (2) (8) (1).png

@@ -1,12 +1,12 @@
 ---
-description: In this section you will find an overview of HTTP request
+description: An overview of HTTP request
 ---
 
 # Making API requests
 
 To quickly connect a custom API use HTTP Request Builder. You can make `GET` request to visualize order data in the Table component or `POST` request to reset a password for a specific user. 
 
-![](<../../../.gitbook/assets/image (847).png>)
+![](<../../.gitbook/assets/image (847).png>)
 
 Watch the video below on how to get API Builder set up!
 

.gitbook/assets/image (2) (8).png

@@ -1,6 +1,6 @@
 # Form
 
-Submit a **Form** to perform actions with input data. The Form component provides a way for users to view and manipulate multiple data fields with their inputs. Upon submission, forms perform functions like creating (inserting) a new data record, updating an existing record, or [calling APIs](../../../data/make-an-http-request/).
+Submit a **Form** to perform actions with input data. The Form component provides a way for users to view and manipulate multiple data fields with their inputs. Upon submission, forms perform functions like creating (inserting) a new data record, updating an existing record, or [calling APIs](../../../data/make-an-http-request.md).
 
 {% embed url="https://vimeo.com/817555123" %}
 

.gitbook/assets/image (2).png

@@ -1,63 +1,52 @@
 ---
-description: How to business apps on top of Firebase data
+description: How to build business apps on top of Firebase data
 ---
 
 # Firebase / Firestore
 
-In this article, we'll review the integration with Firebase, and its characteristics, and will go through the steps necessary to connect it to Jet Admin
+In this article, we'll review the integration with Firebase and will go through the steps necessary to connect it to Jet Admin
 
 ### Connecting Firebase
 
-You can connect to Firebase from the new app flow, from the data tab on the left menu bar, or from the data section within a UI component.
+To connect to Firebase from the new app flow, follow the steps:
 
-Then, you'll need to provide a **service token** to allow your Firebase to interact with Jet. You can either copy and paste a JSON snippet **(1)** or upload it as a file **(2)**:
+1. Select the `Data` Tab from the **left menu bar**
+2. Click on the `Add Resource` button
+3. Choose **Firebase** resource
 
-![](../../../.gitbook/assets/xngfhy.png)
+{% @arcade/embed flowId="02StOgDDTvaChE64xFrW" url="https://app.arcade.software/share/02StOgDDTvaChE64xFrW" %}
 
-{% hint style="danger" %}
-**It's critical** to have a **proper data structure** in your Firebase database, otherwise, Jet might not detect all or some parts of it. To learn, how to properly structure your data, read the [official Firebase article](https://firebase.google.com/docs/database/web/structure-data).
-{% endhint %}
+### Obtain service token
 
-To obtain a service key, go to your Firebase console, select a project, then proceed to the "Service accounts" section and click "Generate new private key":
+You'll need to paste a service token to allow your Firebase to interact with Jet. You can copy and paste or upload a JSON snippet as a file.
 
-![](../../../.gitbook/assets/dtxhfgy.gif)
+To copy and paste a JSON snippet, follow the steps:
 
-Then you'll need to select the database type: Firestore or Realtime DB:
+1. In the form, paste the **Service Token**
+2. Alternatively, you can upload the Service token as a file
 
-![](../../../.gitbook/assets/tjhyu.png)
+{% @arcade/embed flowId="niLLzEwkvhIKSCNtaAXw" url="https://app.arcade.software/share/niLLzEwkvhIKSCNtaAXw" %}
 
-{% hint style="info" %}
-To learn more about Firestore and Realtime DB, check the [**official Firebase article**](https://firebase.google.com/docs/database/rtdb-vs-firestore)
+{% hint style="danger" %}
+**It's critical** to have a **proper data structure** in your Firebase database. Otherwise, Jet might not detect all or some parts of it. Read the official Firebase article properly to learn how to structure your data.
 {% endhint %}
 
-Further steps vary based on the type of database you want to connect to: Firestore or Realtime DB.
-
-### Firestore
-
-If you selected a Firestore database, you'll be prompted to choose the **connection mode**.
-
-Here, you need to choose how you'd like your Firestore to be integrated with Jet Admin. You can either connect directly or sync it with Jet's internal database to get extended functionality. 
+To obtain a service key, follow the steps:
 
-If you want to be able to **combine** your **Firestore data** with data from other data sources, such as Google Sheets, Airtable, or even REST API within the same tables, you should choose the **"Sync" connection**. You can learn more about it here:
+1. Click on the `Settings` button
+2. Choose **Project Settings**
+3. Go to the **Service Account tab**
+4. Click on the `Generate new private key` button
+5. Click on the `Generate key` button
 
-{% content-ref url="../../data-blending.md" %}
-[data-blending.md](../../data-blending.md)
-{% endcontent-ref %}
+{% @arcade/embed flowId="HgPGN726gSBgt5035iCh" url="https://app.arcade.software/share/HgPGN726gSBgt5035iCh" %}
 
-![](../../../.gitbook/assets/xgncf.JPG)
-
-After having connected your Firestore, you'll be prompted to choose collections you want Jet Admin to generate **an admin panel (CRUD pages)** for. If you don't want an admin panel to be generated at all, leave all the boxes empty.
-
-![](../../../.gitbook/assets/cfmgvyn.png)
-
-You can also watch our video on Firebase to learn how to quickly build **admin panels** or **CRUD apps** with Firebase: 
-
-{% embed url="https://www.youtube.com/watch?v=5TTXZhHHP0I" %}
+Then you'll need to select the database type: Firestore or Realtime DB:
 
-### Realtime DB
+<figure><img src="../../../.gitbook/assets/image (3).png" alt=""><figcaption></figcaption></figure>
 
-To learn how to configure your Realtime DB data, read the page below:
+{% hint style="info" %}
+To learn more about Firestore and Realtime DB, check the [**official Firebase article**](https://firebase.google.com/docs/database/rtdb-vs-firestore)**.**
+{% endhint %}
 
-{% content-ref url="realtime-database.md" %}
-[realtime-database.md](realtime-database.md)
-{% endcontent-ref %}
+Further steps vary based on the type of database you want to connect to: Firestore or Realtime DB.

.gitbook/assets/image (3) (7).png

@@ -1,3 +1,7 @@
+---
+description: In this section you will learn how to use Firebase Cloud Storage
+---
+
 # Firebase Cloud Storage
 
 Before you can use Firebase Cloud storage, you need to obtain a service token key. Follow the steps below to integrate Firebase storage with Jet.‌
@@ -8,13 +12,26 @@ To get the JSON key you need to add Firebase to your Google project. First, go t
 
 ![](<../../../.gitbook/assets/image (791).png>)
 
-First, Choose your Google Account. Then you need to click on **Add project** to get a Firebase Key.​
+To create a project, follow the steps:
+
+1. Click on the `Add Project` button
+2. Choose a name for the project
+3. Click on the `Continue` button
+4. Select the **Google Account**
+5. Click on the `Create Project` button
+
+{% @arcade/embed flowId="lQDBBnBzvaYovj6DJgYW" url="https://app.arcade.software/share/lQDBBnBzvaYovj6DJgYW" %}
+
+Then go to the Service Accounts to generate a new JSON private key. Once you generate a private key, it will automatically download to your computer.​
 
-![](<../../../.gitbook/assets/GIF (316).gif>)
+To generate a private key, follow the steps:
 
-Then you need to go to the Service Accounts to generate a new JSON private key. Once you have generated a private key, it will be automatically downloaded to your computer.​
+1. Click on the `Settings` of the **Project Overview**
+2. Click on the `Project Settings`
+3. Go to the **Service Accounts** tab
+4. Click on the `Generate new private key` button
 
-![](<../../../.gitbook/assets/GIF (1) (1).gif>)
+{% @arcade/embed flowId="Khzwc6u4GUHfVszt1b7m" url="https://app.arcade.software/share/Khzwc6u4GUHfVszt1b7m" %}
 
 ### Add Firebase Storage to Jet Admin <a href="#2-add-firebase-to-jet-admin" id="2-add-firebase-to-jet-admin"></a>
 
@@ -39,6 +56,6 @@ Here's an example of a JSON Service Key obtained from Firebase:
 }
 ```
 
-Once you have integrated Firebase Storage with Jet you will see a **Storage File Viewer** that'll allow you to access your data. For more information about using storages and uploading files, [see the File Storage and Uploading section.](https://docs.jetadmin.io/user-guide/data/file-storage-and-uploading)
+Once you have integrated Firebase Storage with Jet you will see a **Storage File Viewer** that'll allow you to access your data. For more information about using storage and uploading files, [see the File Storage and Uploading section.](https://docs.jetadmin.io/user-guide/data/file-storage-and-uploading)
 
 ![](../../../.gitbook/assets/GIF213.gif)

.gitbook/assets/image (3).png

@@ -0,0 +1,26 @@
+---
+description: In this section you will learn how to use Firestore
+---
+
+# Firestore
+
+If you select a Firestore database, you'll be prompted to choose the **connection mode**.
+
+Here, you must choose how you'd like your Firestore to integrate with Jet Admin. You can connect directly or sync it with Jet's internal database to get extended functionality. 
+
+If you want to be able to **combine** your **Firestore data** with data from other data sources, such as Google Sheets, Airtable, or even REST API within the same tables, you should choose the **"Sync" connection**. You can learn more about it here:
+
+{% content-ref url="../../data-blending.md" %}
+[data-blending.md](../../data-blending.md)
+{% endcontent-ref %}
+
+<figure><img src="../../../.gitbook/assets/image (1).png" alt=""><figcaption></figcaption></figure>
+
+After having connected your Firestore, you'll be prompted to choose collections you want Jet Admin to generate **an admin panel (CRUD pages)** for. If you don't want an admin panel to be generated at all, leave all the boxes empty.
+
+<figure><img src="../../../.gitbook/assets/image (2).png" alt=""><figcaption></figcaption></figure>
+
+You can also watch our video on Firebase to learn how to quickly build **admin panels** or **CRUD apps** with Firebase:&#x20;
+
+{% embed url="https://www.youtube.com/watch?v=5TTXZhHHP0I" %}
+

.gitbook/assets/image (4) (7).png

@@ -1,15 +1,23 @@
+---
+description: In this section you will learn how to use Realtime DB
+---
+
 # Realtime DB
 
 ### Preparing your data with RealtimeDB Builder
 
-Once you have added your resource you will be prompted to create a collection to start preparing your data:
+Once you have added your resource you will be prompted to create a collection to start preparing your data. To create a collection, follow the steps:
 
-![](../../../.gitbook/assets/testgif30.gif)
+1. Click on the `Create Collection` button
+2. Name the collection
+3. Click on the `Create` button to save it
 
-To display your data, you need to define the data structure of your collection. To do this, click the Get Record List button to select the collection to display from your database:
+{% @arcade/embed flowId="62bLgK1VQMEvdD0XWwnO" url="https://app.arcade.software/share/62bLgK1VQMEvdD0XWwnO" %}
 
-![](../../../.gitbook/assets/testgif31.gif)
+To display your data, you need to define the data structure of your collection. To do this, follow the steps:
 
-Next, you need to save the query so you can use this collection in components:
+1. Click the `Get Record List` button 
+2. Select the collection to display from your database
+3. Click to save it
 
-![](../../../.gitbook/assets/testgif32.gif)
+![](../../../.gitbook/assets/testgif31.gif)

.gitbook/assets/image (4).png

@@ -1,3 +1,13 @@
+---
+description: In this section you will learn how to use Visualize Subcollection
+---
+
 # Visualize Subcollection
 
+To visualize the subcollection, follow the steps:
+
+1. Paste a table on the page
+2. From the left menu, choose **Firebase**
+3. Choose the collection, you want to visualize 
+
 {% embed url="https://www.loom.com/share/8017daa902994cfb854a44ba879ebf29" %}

.gitbook/assets/image.png

@@ -74,6 +74,6 @@ You can display the results of GraphQL queries as with any other query in Jet Ad
 
 More information about HTTP Requests in our documentation.
 
-{% content-ref url="../data/make-an-http-request/" %}
-[make-an-http-request](../data/make-an-http-request/)
+{% content-ref url="../data/make-an-http-request.md" %}
+[make-an-http-request.md](../data/make-an-http-request.md)
 {% endcontent-ref %}

SUMMARY.md

@@ -16,8 +16,8 @@ You can also implement your own custom API using API Builder. For instance, you
 
 ![](<../../../.gitbook/assets/image (822).png>)
 
-{% content-ref url="../../data/make-an-http-request/" %}
-[make-an-http-request](../../data/make-an-http-request/)
+{% content-ref url="../../data/make-an-http-request.md" %}
+[make-an-http-request.md](../../data/make-an-http-request.md)
 {% endcontent-ref %}
 
 ### Connect custom API resource
@@ -32,7 +32,7 @@ Let's start with implementing **Rest API**, select it from the list of available
 
 Once you have connected a REST API, you will need to configure the requests in the Data Editor. For more information, please look at the [Data Editor documentation here:](https://docs.jetadmin.io/user-guide/data/make-an-http-request)
 
-{% content-ref url="../../data/make-an-http-request/" %}
-[make-an-http-request](../../data/make-an-http-request/)
+{% content-ref url="../../data/make-an-http-request.md" %}
+[make-an-http-request.md](../../data/make-an-http-request.md)
 {% endcontent-ref %}
 

getting-started/part-2-intermediate/perform-api-requests.md

@@ -29,6 +29,6 @@ Notice there is the URL, followed by:
 
 That is what tips you off that this is Basic Auth. The **-u** part signifies Basic Auth, and then the colon at the end tells you this is being sent as a username. In normal Basic Auth, you send the username and password in the following format **username : password** so if you see a **-u** then you know that anything to left of the colon is the username and to the right is the password. In this example, the API key is sent as a username.
 
-{% content-ref url="../../data/make-an-http-request/" %}
-[make-an-http-request](../../data/make-an-http-request/)
+{% content-ref url="../../data/make-an-http-request.md" %}
+[make-an-http-request.md](../../data/make-an-http-request.md)
 {% endcontent-ref %}

getting-started/pixel-perfect-app/README.md

@@ -18,6 +18,6 @@ Adding an API that uses a bearer token authentication scheme is easy in Jet Admi
 
 ![](<../../../.gitbook/assets/image (824).png>)
 
-{% content-ref url="../../data/make-an-http-request/" %}
-[make-an-http-request](../../data/make-an-http-request/)
+{% content-ref url="../../data/make-an-http-request.md" %}
+[make-an-http-request.md](../../data/make-an-http-request.md)
 {% endcontent-ref %}

user-guide/data/README.md

@@ -37,6 +37,6 @@ Create a new Collection with your Webflow's query:
 
 <figure><img src="../../.gitbook/assets/webflow_api.jpg" alt=""><figcaption></figcaption></figure>
 
-{% content-ref url="../data/make-an-http-request/" %}
-[make-an-http-request](../data/make-an-http-request/)
+{% content-ref url="../data/make-an-http-request.md" %}
+[make-an-http-request.md](../data/make-an-http-request.md)
 {% endcontent-ref %}