AWS Mobile Hub Developer Guide
Developer Guide

Access Your APIs

Important

The following content applies if you are already using the AWS Mobile CLI to configure your backend. If you are building a new mobile or web app, or you're adding cloud capabilities to your existing app, use the new AWS Amplify CLI instead. With the new Amplify CLI, you can use all of the features described in Announcing the AWS Amplify CLI toolchain, including AWS CloudFormation functionality that provides additional workflows.

Set Up Your Backend

The AWS Mobile CLI and Amplify library make it easy to create and call cloud APIs and their handler logic from your JavaScript.

BEFORE YOU BEGIN

The steps on this page assume you have already completed the steps on Get Started.

Create Your API

In the following examples you will create an API that is part of a cloud-enabled number guessing app. The CLI will create a serverless handler for the API behind the scenes.

To enable and configure an API

  1. In the root folder of your app, run:

    awsmobile cloud-api enable --prompt
  2. When prompted, name the API Guesses.

    ? API name: Guesses
  3. Name a HTTP path /number. This maps to a method call in the API handler.

    ? HTTP path name (/items): /number
  4. Name your Lambda API handler function guesses.

    ? Lambda function name (This will be created if it does not already exists): guesses
  5. When prompted to add another HTTP path, type N.

    ? Add another HTTP path (y/N): N
  6. The configuration for your Guesses API is now saved locally. Push your configuration to the cloud.

    awsmobile push

To test your API and handler

From the command line, run:

awsmobile cloud-api invoke Guesses GET /number

The Cloud Logic API endpoint for the Guesses API is now created.

Customize Your API Handler Logic

The AWS Mobile CLI has generated a Lambda function to handle calls to the Guesses API. It is saved locally in YOUR-APP-ROOT-FOLDER/awsmobilejs/backend/cloud-api/guesses. The app.js file in that directory contains the definitions and functional code for all of the paths that are handled for your API.

To customize your API handler

  1. Find the handler for POST requests on the /number path. That line starts with app.post('number',. Replace the callback function’s body with the following:

    # awsmobilejs/backend/cloud-api/guesses/app.js app.post('/number', function(req, res) { const correct = 12; let guess = req.body.guess let result = "" if (guess === correct) { result = "correct"; } else if (guess > correct) { result = "high"; } else if (guess < correct) { result = "low"; } res.json({ result }) });
  2. Push your changes to the cloud.

    awsmobile push

The Guesses API handler logic that implements your new number guessing functionality is now deployed to the cloud.

Connect to Your Backend

The examples in this section show how you would integrate AWS Amplify library calls using React (see the AWS Amplify documentation to use other flavors of Javascript).

The following simple component could be added to a create-react-app project to present the number guessing game.

// Number guessing game app example # src/GuessNumber.js class GuessNumber extends React.Component { state = { answer: null }; render() { let prompt = "" const answer = this.state.answer switch (answer) { case "lower": prompt = "Incorrect. Guess a lower number." case "higher": prompt = "Incorrect. Guess a higher number." case "correct": prompt = `Correct! The number is ${this.refs.guess.value}!` default: prompt = "Guess a number between 1 and 100." } return ( <div style={styles}> <h1>Guess The Number</h1> <p>{ prompt }</p> <input ref="guess" type="text" /> <button type="submit">Guess</button> </div> ) } } let styles = { margin: "0 auto", width: "30%" }; export default GuessNumber;

Make a Guess

The API module from AWS Amplify allows you to send requests to your Cloud Logic APIs right from your JavaScript application.

To make a RESTful API call

  1. Import the API module from aws-amplify in the GuessNumber component file.

    import { API } from 'aws-amplify';
  2. Add the makeGuess function. This function uses the API module’s post function to submit a guess to the Cloud Logic API.

    async makeGuess() { const guess = parseInt(this.refs.guess.value); const body = { guess } const { result } = await API.post('Guesses', '/number', { body }); this.setState({ guess: result }); }
  3. Change the Guess button in the component’s render function to invoke the makeGuess function when it is chosen.

    <button type="submit" onClick={this.makeGuess.bind(this)}>Guess</button>

Open your app locally and test out guessing the number by running awsmobile run.

Your entire component should look like the following:

// Number guessing game app example import React from 'react'; import { API } from 'aws-amplify'; class GuessNumber extends React.Component { state = { guess: null }; async makeGuess() { const guess = parseInt(this.refs.guess.value, 10); const body = { guess } const { result } = await API.post('Guesses', '/number', { body }); this.setState({ guess: result }); } render() { let prompt = "" switch (this.state.guess) { case "high": prompt = "Incorrect. Guess a lower number."; break; case "low": prompt = "Incorrect. Guess a higher number."; break; case "correct": prompt = `Correct! The number is ${this.refs.guess.value}!`; break; default: prompt = "Guess a number between 1 and 100."; } return ( <div style={styles}> <h1>Guess The Number</h1> <p>{ prompt }</p> <input ref="guess" type="text" /> <button type="submit" onClick={this.makeGuess.bind(this)}>Guess</button> </div> ) } } let styles = { margin: "0 auto", width: "30%" }; export default GuessNumber;

Next Steps