diff --git a/docs/Universe/.DS_Store b/docs/Universe/.DS_Store index 8aec5894..fef4aea2 100644 Binary files a/docs/Universe/.DS_Store and b/docs/Universe/.DS_Store differ diff --git a/docs/Universe/bubble.md b/docs/Universe/bubble.md index 220320a3..caf4eb50 100644 --- a/docs/Universe/bubble.md +++ b/docs/Universe/bubble.md @@ -5,21 +5,23 @@ description: Flotiq allows you to integrate your content with any system easily. ## Introduction -In Bubble.io, there's significant potential for various integrations with [Flotiq](https://editor.flotiq.com/). The -platform offers many -communication possibilities with APIs, not limited to just GET requests, thanks to its "API Connector" plugin. -On their [YouTube channel](https://www.youtube.com/watch?v=nO8PSqeJaWk), Bubble.io has a video showcasing the -capabilities of this plugin. As part of a sample -integration, let's consider replicating a section of [Flotiq blog](https://blog.flotiq.com/) within a Bubble.io -application. Specifically, we aim to -display our blog posts on the homepage as tiles. Upon clicking on any of these tiles, users should be redirected to -a dedicated page for that particular post. +In Bubble.io, there's significant potential for various integrations with [Flotiq](https://editor.flotiq.com/){target="_ +blank"}. The platform offers many communication possibilities with APIs, not limited to just GET requests, thanks to +its "API Connector" plugin. On their [YouTube channel](https://www.youtube.com/watch?v=nO8PSqeJaWk){target="_blank"}, +Bubble.io has a video showcasing the capabilities of this plugin. As part of a sample integration, let's consider +replicating a section of [Flotiq blog](https://blog.flotiq.com/){target="_blank"} within a Bubble.io application. +Specifically, we aim to display our blog posts on the homepage as tiles. Upon clicking on any of these tiles, users +should be redirected to a dedicated page for that particular post. ## First step To start working on connecting Flotiq with Bubble.io, we need to have some data in Flotiq to display. I -used the "flotiq-cli" to import a "CTD" (Content Type Definition) along with several "CO" (Content -Objects) necessary for the blog's functionality. Then, we need to create our application in Bubble.io. +used the ["flotiq-cli"](https://flotiq.com/docs/CLI/contentful-importer/?h=flotiq+import#imported-data){target="_blank"} +to import a "CTD" (Content Type Definition) along with several "CO" (Content Objects) necessary for the blog's +functionality, The `.json` files with `CTD` and `CO` that will be used during this integration can be +found [here](https://github.com/flotiq/flotiq-blog){target="_blank"} in the `./flotiq` folder. Then, we need to create +our application in Bubble.io. + To do this, on the account management panel, we click on "create an app." ![](images/bubble/bubble-create-app.png){: .center .width75 .border} @@ -38,9 +40,7 @@ Upon successfully creating our application, we will be presented with the editor ## Connection with Flotiq API -To retrieve information about our posts from Flotiq, we need to go to the plugins tab, select "API Connector," and then -press "Add another API." - +To retrieve information about our posts from Flotiq, we need to go to the plugins tab, select "API Connector" ![](images/bubble/bubble-configure-api-connector-1.png){: .center .width75 .border} Then press “Add another API” button @@ -50,19 +50,20 @@ Then press “Add another API” button We select the name of our API, which in our case will be "Flotiq," and then click the "add a shared header" button. In the key field, we enter "X-AUTH-TOKEN," and in the value field, we input our API key for Flotiq. Then, we click "expand" in the "API Call" section. You can read more about Flotiq API keys -in [our documentation](https://flotiq.com/docs/API/?h=api+keys##application-api-keys) +in [our documentation](https://flotiq.com/docs/API/?h=api+keys##application-api-keys){target="_blank"} ![](images/bubble/bubble-configure-api-headers.png){: .center .width75 .border} Next, we choose a name for our request, for example, "Get all posts." We make sure it's a GET request and enter the URL to the Flotiq API pointing to our CTD with posts (how to create such a -URL: [Docs](https://flotiq.com/docs/API/content-type/listing-co/)). +URL: [Docs](https://flotiq.com/docs/API/content-type/listing-co/){target="_blank"}). ![](images/bubble/bubble-configure-api-request.png){: .center .width75 .border} Next, we click on "Add parameter" to set the parameter "hydrate" to 1, which enables us to retrieve data from relationships such as tags or the author of our post. (more about hydrate -parameter: [Docs](https://flotiq.com/docs/API/content-type/listing-co/##hydrating-objects)) And finally, we click on " +parameter: [Docs](https://flotiq.com/docs/API/content-type/listing-co/##hydrating-objects){target="_blank"}) And +finally, we click on " Initialize call." ![](images/bubble/bubble-configure-api-request-headers.png){: .center .width75 .border} @@ -74,8 +75,10 @@ their types match those from our Flotiq CTD (FlotiqBlogPost), we click "SAVE." ![](images/bubble/bubble-configure-api-response.png){: .center .width75 .border} Next, we move to the design tab where we will design our application. We can use a pre-made template or design our own. -In this presentation, I will replicate a section of the page [https://blog.flotiq.com/](https://blog.flotiq.com/), which -includes tiles presenting posts on the homepage, as well as a dedicated page for reading a specific post. +In this presentation, I will replicate a section of the page +[https://blog.flotiq.com/](https://blog.flotiq.com/){target="_blank"}, which includes tiles presenting posts on the +homepage, as well as a dedicated page for reading a +specific post. ## Designing diff --git a/docs/Universe/images/.DS_Store b/docs/Universe/images/.DS_Store index 7b10e237..65f793b5 100644 Binary files a/docs/Universe/images/.DS_Store and b/docs/Universe/images/.DS_Store differ diff --git a/docs/Universe/images/bubble/.DS_Store b/docs/Universe/images/bubble/.DS_Store index 76f8cbe7..4d4cc1fc 100644 Binary files a/docs/Universe/images/bubble/.DS_Store and b/docs/Universe/images/bubble/.DS_Store differ diff --git a/docs/Universe/images/bubble/bubble-configure-api-headers.png b/docs/Universe/images/bubble/bubble-configure-api-headers.png index 7a0cf97d..61abd40a 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-api-headers.png and b/docs/Universe/images/bubble/bubble-configure-api-headers.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-image-3.png b/docs/Universe/images/bubble/bubble-configure-image-3.png index 3e11fafd..97e29e0b 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-image-3.png and b/docs/Universe/images/bubble/bubble-configure-image-3.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-image-4.png b/docs/Universe/images/bubble/bubble-configure-image-4.png index 9e1d4b1c..14078436 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-image-4.png and b/docs/Universe/images/bubble/bubble-configure-image-4.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-image-5.png b/docs/Universe/images/bubble/bubble-configure-image-5.png index f6c66791..fdba14a5 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-image-5.png and b/docs/Universe/images/bubble/bubble-configure-image-5.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-reapeating-group-2.png b/docs/Universe/images/bubble/bubble-configure-reapeating-group-2.png index 3f3cb022..16a10ee6 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-reapeating-group-2.png and b/docs/Universe/images/bubble/bubble-configure-reapeating-group-2.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-reapeating-group-3.png b/docs/Universe/images/bubble/bubble-configure-reapeating-group-3.png index 5f6f9df9..7f676f53 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-reapeating-group-3.png and b/docs/Universe/images/bubble/bubble-configure-reapeating-group-3.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-reapeating-group-5.png b/docs/Universe/images/bubble/bubble-configure-reapeating-group-5.png index d0145394..04d1be87 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-reapeating-group-5.png and b/docs/Universe/images/bubble/bubble-configure-reapeating-group-5.png differ diff --git a/docs/Universe/images/bubble/bubble-configure-workflow-1.png b/docs/Universe/images/bubble/bubble-configure-workflow-1.png index 37b2470b..4b0a4ec6 100644 Binary files a/docs/Universe/images/bubble/bubble-configure-workflow-1.png and b/docs/Universe/images/bubble/bubble-configure-workflow-1.png differ diff --git a/docs/Universe/images/bubble/bubble-create-new-page-3.png b/docs/Universe/images/bubble/bubble-create-new-page-3.png index 7e76fc28..1b64abcc 100644 Binary files a/docs/Universe/images/bubble/bubble-create-new-page-3.png and b/docs/Universe/images/bubble/bubble-create-new-page-3.png differ