Implementar una aplicación web en Amazon Amplify

GUÍA DE INTRODUCCIÓN

Módulo 2: Crear el frontend y conectar una API

En este módulo, aprenderá a agregar una API a su proyecto de Amplify

Introducción

En este módulo, creará el frontend para su aplicación web y se conectará a una API (interfaz de programación de aplicaciones) mediante la API GraphQL. GraphQL es un lenguaje de consultas para API que le ayuda a recuperar y actualizar datos de su aplicación.

Lo que aprenderá

  • Crear una aplicación de frontend de React básica
  • Llamar a una API GraphQL desde su aplicación
  • Llamar a la API desde el frontend de su aplicación

 Tiempo de realización

10 minutos

 Requisitos previos del módulo

  • Una cuenta de AWS con acceso de nivel de administrador**
  • Navegador recomendado: la última versión de Chrome o Firefox

[**] Es posible que las cuentas creadas en las últimas 24 horas aún no tengan acceso a los servicios necesarios para este tutorial.

Implementación

Instalar bibliotecas de Amplify

Debe instalar la biblioteca de Amplify para React @aws-amplify/ui-react (contiene los componentes de la interfaz de usuario de React). 

Ejecute el siguiente comando para realizar la instalación:

npm install @aws-amplify/ui-react

Ahora necesita crear el frontend para su aplicación. Abra el archivo src/App.js y sustituya todo su contenido por el siguiente código:

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

function App() {
  return (
    <div>
      <h1>Notes App</h1>
      <AmplifySignOut />
    </div>
  );
}

export default withAuthenticator(App);

Pruebe la aplicación

Ahora puede ejecutar su aplicación de manera local para probarla:

npm start

Esto hará que se inicie un servidor de desarrollo en http://localhost:3000 y abrirá la página en su navegador. Se le pedirá que inicie sesión antes de poder utilizar el servicio; estos datos se almacenan en la base de datos de Cognito de su proyecto, a la que solo usted tiene acceso. Una vez que haya iniciado sesión, la aplicación solo mostrará un encabezado con la aplicación de notas y un botón de inicio de sesión, puesto que aún no ha agregado nada. A continuación, agregará una API a la aplicación. Puede utilizar CTRL + C para detener de nuevo el servidor.

gsg-build-amplify-2

Con tan solo unos pocos comandos de la CLI y líneas de código, hemos creado una aplicación de una página operativa con flujo de inicio de sesión. Esta aplicación es solo un esqueleto y el inicio de sesión aún no funciona. Continúe incorporando funcionalidades a su aplicación en las siguientes secciones.

Agregar una API GraphQL con Amplify

Ahora agregará una API a la aplicación. Amplify utiliza AWS AppSync y Amazon DynamoDB para soportar las API GraphQL. AppSync es un servicio de GraphQL administrado que se encargará de nuestra API, y Amazon DynamoDB es una base de datos de NoSQL que almacena los datos que usará la API.

Para agregar la API, ejecute amplify add api y elija las siguientes opciones para las preguntas (las líneas comienzan con el símbolo >); durante este paso, se realizarán preguntas sobre el proveedor de la autorización, lo cual se utilizará en una próxima guía:

Un esquema de GraphQL es una representación de un objeto y sus campos. Necesita definir su esquema de GraphQL y Amplify creará la tabla de DynamoDB necesaria, además de configurar GraphQL para administrar las lecturas, escrituras, actualizaciones y eliminaciones por usted. Abra el archivo amplify/backend/api/amplifyapp/schema.graphql y sustituya los contenidos por lo siguiente:

amplify add api

? Please select from one of the below mentioned services:
❯ GraphQL
  REST
? Provide API name: amplifyapp
? Choose the default authorization type for the API
  API key
❯ Amazon Cognito User Pool
  IAM
  OpenID Connect
? Do you want to configure advanced settings for the GraphQL API
? Do you want to use the default authentication and security configuration?
❯ Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.
? How do you want users to be able to sign in?
 ◯ Email
❯◉ Username
 ◯ Phone number
? Do you want to configure advanced settings?
❯ No, I am done.
  Yes, I want to make some additional changes.
? Do you have an annotated GraphQL schema? No
? Choose a schema template:
❯ Single object with fields (e.g., “Todo” with ID, name, description)
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
  Objects with fine-grained access control (e.g., a project management app with owner-bas
ed authorization)
? Do you want to edit the schema now? Yes
Si ingresó Yes (Sí) para editar el esquema, su editor predeterminado deberá abrir el archivo necesario para la siguiente sección.

Crear un esquema de GraphQL

Un esquema de GraphQL es una representación de un objeto y sus campos. Necesita definir su esquema de GraphQL y Amplify creará la tabla de DynamoDB necesaria, además de configurar GraphQL para administrar las lecturas, escrituras, actualizaciones y eliminaciones por usted. Abra el archivo amplify/backend/api/amplifyapp/schema.graphql y sustituya los contenidos por lo siguiente:

type Note @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  text: String!
}

Este esquema define un tipo de nota con id y texto como campos requeridos. También contiene unas directivas que son parte de la biblioteca de transformaciones de GraphQL de Amplify:

@model: Un tipo anotado con @model se almacena en DynamoDB y cuenta con operaciones CRUDL (crear, leer, actualizar, eliminar, enumerar) que se crean de manera automática para el tipo.

@auth: Un tipo anotado con @auth está protegido por un conjunto de reglas de autorización. Aquí, estamos utilizando autorización de propietario para asegurarnos que únicamente el propietario de una nota podrá acceder a ella y modificarla.

Implementar la aplicación

Ahora está listo para implementar su aplicación web de Amplify; puede hacerlo si ejecuta amplify push. Esto cargará su aplicación en su cuenta de AWS para usted y Amplify le mostrará los cambios que se están implementando, además de pedirle que confirme la implementación:

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev
    
┌──────────┬────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name      │ Operation │ Provider plugin   │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Auth     │ amplifyapp6177aede │ Create    │ awscloudformation │
├──────────┼────────────────────┼───────────┼───────────────────┤
│ Api      │ amplifyapp         │ Create    │ awscloudformation │
└──────────┴────────────────────┴───────────┴───────────────────┘
? Are you sure you want to continue? Yes

Después de confirmar, seleccione los valores predeterminados para las siguientes preguntas que se le realizarán:

? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2

El proceso de implementación tardará unos minutos y, a continuación, verá una lista de los recursos que se han creado para usted. Amplify realizó las siguientes acciones:

  • Creó una API GraphQL, respaldada por AWS AppSync, con los tres tipos de operaciones de GraphQL (consultas, mutaciones y suscripciones).
  • Generó código dentro de la carpeta src/graphql/ en las operaciones de GraphQL necesarias para crear, recuperar y actualizar notas.
  • Creó una tabla de DynamoDB para almacenar cualquier nota creado con nuestra aplicación.

Actualizar frontend para utilizar la API

Para utilizar la nueva API que acaba de implementar, actualice el archivo src/App.js al sustituir los contenidos con el siguiente código:

import { Component } from 'react';
import Amplify, { API, graphqlOperation } from 'aws-amplify';
import { createNote, deleteNote } from './graphql/mutations';
import { listNotes } from './graphql/queries';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import awsExports from './aws-exports';

Amplify.configure(awsExports);

class AddNote extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  handleChange = (event) => {
    this.setState({ text: event.target.value });
  }

  handleClick = () => {
    this.props.addNote(this.state);
    this.setState({ text: '' });
  }

  render() {
    return (
      <div style={styles.form}>
        <input
          value={this.state.text}
          onChange={this.handleChange}
          placeholder="New Note"
          style={styles.input}
        />
        <button onClick={this.handleClick} style={styles.addButton}>Add Note</button>
      </div>
    );
  }
}

class NotesList extends Component {
  render() {
    return (
      <div>
        {this.props.notes.map(note =>
          <div key={note.id} style={styles.note}>
            <p>{note.text}</p>
            <button onClick={() => { this.props.deleteNote(note) }} style={styles.deleteButton}>x</button>
          </div>
        )}
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { notes: [] };
  }

  async componentDidMount() {
    var result = await API.graphql(graphqlOperation(listNotes));
    this.setState({ notes: result.data.listNotes.items });
  }

  deleteNote = async (note) => {
    const id = {
      id: note.id
    };
    await API.graphql(graphqlOperation(deleteNote, { input: id }));
    this.setState({ notes: this.state.notes.filter(item => item.id !== note.id) });
  }

  addNote = async (note) => {
    var result = await API.graphql(graphqlOperation(createNote, { input: note }));
    this.state.notes.push(result.data.createNote);
    this.setState({ notes: this.state.notes });
  }

  render() {
    return (
      <div style={styles.container}>
        <h1>Notes App</h1>
        <AddNote addNote={this.addNote} />
        <NotesList notes={this.state.notes} deleteNote={this.deleteNote} />
        <AmplifySignOut />
      </div>
    );
  }
}

export default withAuthenticator(App);

const styles = {
  container: { width: 480, margin: '0 auto', padding: 20 },
  form: { display: 'flex', marginBottom: 15 },
  input: { flexGrow: 2, border: 'none', backgroundColor: '#ddd', padding: 12, fontSize: 18 },
  addButton: { backgroundColor: 'black', color: 'white', outline: 'none', padding: 12, fontSize: 18 },
  note: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 22, marginBottom: 15 },
  deleteButton: { fontSize: 18, fontWeight: 'bold' }
}

Ahora tiene una aplicación operativa. Inicie sesión con autenticación multifactor y la aplicación podrá comunicarse con la API para guardar, actualizar o eliminar notas. Para probarla de manera local, ejecute npm start de nuevo para confirmar.

gsg-build-amplify-3

Conclusión

En este módulo, aprendió cómo crear una aplicación de frontend de React, agregarle una API e implementar la API en su cuenta de AWS. En el siguiente módulo, aprenderá cómo implementar el frontend desde un repositorio de GitHub y configure una canalización CI/CD para implementar los cambios futuros de manera automática.

Siguiente: Automatizar la implementación

Háganos saber su opinión.

Agradecemos sus comentarios
Nos alegra que esta página le haya ayudado. ¿Le gustaría compartir detalles adicionales para ayudarnos a seguir mejorando?
Cerrar
Agradecemos sus comentarios
Lamentamos que esta página no le haya ayudado. ¿Le gustaría compartir detalles adicionales para ayudarnos a seguir mejorando?
Cerrar