Skip to main content

Consume the API in a Web App

Data services are only practical if you use them in an actual application. Let’s do that! In this section, you will connect an Angular web application to the App Services GraphQL API you just created.

Run the application in StackBlitz​

You will use StackBlitz, an online IDE, to run the application.

  1. Open the StackBlitz project.

  2. Wait until the message Compiling application & starting dev server… is gone.

    StackBlitz editor highlighting the 'Compiling application & starting dev server…' message

  3. Fork the project so you can make changes to it.

    StackBlitz editor highlighting the 'Fork' button

In the code editor, you can see the open environment.ts file:

export const environment = {
 production: true,
 APP_ID: '',
 GRAPHQL_URI: '',
 API_KEY: ''
};

You will add our own credentials to this file. Let’s get them from Atlas App Services.

App Services authentication credentials​

  1. Open MongoDB Atlas in a new tab in your browser and navigate to the App Services tab.

    Atlas navigation bar highlighting the 'App Services' tab

  2. Select the application you created in the previous section.

    App services applications highlighting the 'Bakery' app

  3. Copy your App ID and add it to the environment file.

    App services page highlighting the 'App ID' copy button

  4. Navigate to the GraphQL section, copy the GraphQL endpoint, and add it to the environment file.

    App Services left-hand menu highlighting the 'GraphQL' sectionGraphQL page in App Services highlighting the 'Copy' button next to the GraphQL endpoint

  5. To generate an API key, navigate to the Authentication section.

    App Services left-hand menu highlighting the 'Authentication' section

  6. There are a set of providers available for App Services. For this application, you will use the API Keys provider. Select it from the list, and switch it on. Before generating the key, make sure to deploy the draft.

    Authentication providers list highlighting the 'Edit' button on the 'API Keys' lineAuthentication section with the 'On' toggle button highlightedReview draft and deploy button

  7. Generate a key, copy the value, and—you guessed it—add it to the environment file.

  8. Finally, your environment file should look something like this:

    export const environment = {
        production: false,
        APP_ID: 'bakery-lvtjx',
        GRAPHQL_URI: 'https://realm.mongodb.com/api/client/v2.0/app/bakery-lvtjx/graphql',
        API_KEY: 'RaOyilaiveCXYkNq30iHKq8LDj6kg71FvviTWJauTU5S9Il5zF0ONeDvWkNzrPQ4'
    };

  9. Save the file and you should see a list with the cakes in your database on the right.

    StackBlitz with the editor on the left and the application on the right

The application uses the Atlas GraphQL API to access data from your Atlas database. Explore it by clicking on one of the cakes to open its details page. Add your comment about a cake recipe.

In the following section, you will use the Google Cloud Natural Language API to analyze the sentiment of new comments. Make sure you keep the StackBlitz tab open in your browser!