Bubble.io and Codecademy integration: Step-by-Step Guide 2024

Step 1: Start a New Project in Bubble.io

The first step is to create a new project in Bubble.io.

• Access Bubble's official website by typing "https://bubble.io/" into your browser and pressing "Enter". If you haven't logged in yet, click on the "Log In" button in the home page's top right corner, and enter your credentials to log in to your Bubble.io account.

• After logging in, you'll be redirected to your "Dashboard". Click on the "New App" button, which is usually located in the top right corner of the dashboard.

• In the popup window, provide the required information for your new app. This includes the app name, plan, and privacy settings.

• When you have completed the necessary information, click on "Create a new app". You'll be redirected to the app editor after your new app is successfully created.

Step 2: Obtain Your Bubble.io API Key

In order to integrate Bubble.io with Codecademy, you need to generate an API key in Bubble.io.

• Access your Bubble.io application's dashboard, then find and click on the "Settings" tab located at the top of the dashboard page.

• On the Settings page, click on the "API" tab.

• Here, you'll need to check the box to "Enable Data API". This will make the app data accessible through the Bubble API.

• Generate a new API token by clicking "Add a new API token". Name this key (you may want to name it Codecademy for clarity) and click "Generate".

• The API key will be created. Keep this page open or copy the key somewhere secure – we'll need it in the next step when we go to Codecademy.

Step 3: Configure your Codecademy Project

Now it's time to move over to Codecademy to configure the Bubble.io API.

• Open a new web browser tab and go to "https://www.codecademy.com".

• Sign in to your Codecademy account by clicking on the "Log In" button at the top right corner of the home page. If you don't have an account yet, sign up by clicking on the "Sign Up" button located at the homepage's upper right corner.

• Once logged in, navigate to the project where you want to integrate Bubble.io. If you haven't created any projects yet, then you can create one.

• Then we need to configure the HTTP client inside your Codecademy project for Bubble.io. Use the Fetch API and paste the Bubble.io API endpoint URL. Remember to replace app_id with your Bubble.io application ID and api_key with the key generated in the previous step. The URL would look something like this:

  https://app_id.bubbleapps.io/version-test/api/1.1/obj/object_type?api_token=api_key

Step 4: Test the Integration

This step involves testing the connection to ensure that your Codecademy project is correctly integrated with Bubble.io using the API.

• Start by creating a simple API call in your Codecademy project to fetch data from your Bubble.io app.

• If the API call returns the expected data, then your integration is working correctly.

• If the API call returns an error, check your API key and endpoint to ensure they are correct, and try the steps again.

Remember, some functions also require setting up workflows on Bubble.io, so you need to go back and forth between the two platforms when building complex applications. Make sure to check out the corresponding documentations of both platforms to explore more intricate functionalities.