TOC

Как отображать данные из API DigitalOcean с помощью React

_ Автор выбрал Wikimedia Foundation, чтобы получить пожертвование в рамках программы Write for DOnations ._

Вступление

За последние несколько лет веб-платформы с открытым исходным кодом значительно упростили процесс кодирования приложения. Например, React только повысил популярность JavaScript, сделав язык более доступным для новых разработчиков и повысив производительность опытных разработчиков. React, созданный Facebook, позволяет разработчикам быстро создавать высокопроизводительные пользовательские интерфейсы для масштабируемых веб-приложений, поддерживая такие функции, как декларативные представления, управление состоянием и рендеринг на стороне клиента, каждый из которых может значительно снизить сложность построения приложение в JavaScript.

Вы можете использовать такие среды, как React, для загрузки и отображения данных из DigitalOcean API, с помощью которых вы можете управлять своими каплями и другими продуктами в облаке DigitalOcean с помощью HTTP-запросов. Хотя можно получать данные из API со многими другими средами JavaScript, React предоставляет полезные преимущества, такие как жизненные циклы и управление локальными состояниями, которые делают его особенно подходящим для работы. С помощью React данные, полученные из API, добавляются в локальное состояние при запуске приложения и могут проходить различные жизненные циклы при подключении и отключении компонентов. В любой момент вы можете получить данные из своего местного штата и отобразить их соответствующим образом.

В этом руководстве вы создадите простое приложение React, которое взаимодействует с DigitalOcean API v2 для выполнения вызовов и получения информации о ваших каплях. Ваше приложение отобразит список, содержащий ваши текущие Droplets и их детали, такие как имя, регион и технические характеристики, а вы будете использовать интерфейсную среду Bootstrap для стилизации вашего приложения.

После того, как вы закончите этот урок, у вас будет базовый интерфейс, отображающий список ваших дроплетов DigitalOcean, стилизованный под следующее:

изображение: https: //assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [Окончательная версия вашего приложения React]

Предпосылки

Перед началом работы с этим руководством вам понадобится DigitalOcean account и хотя бы один https://www.digitalocean.com/docs/droplets/how-to/ create / [Droplet set up], в дополнение к следующему:

Шаг 1 - Создание базового приложения React

На этом первом шаге вы создадите базовое приложение React с помощью пакета Create React App из npm. Этот пакет автоматически устанавливает и настраивает основные зависимости, необходимые для запуска React, такие как сборщик модулей Webpack и компилятор JavaScript Babel. После установки вы запустите пакет Create React App, используя бегунка пакета npx, который поставляется с предустановленной Node.js.

Чтобы установить Create React App и создать первую версию вашего приложения, выполните следующую команду, заменив + my-app + именем, которое вы хотите дать своему приложению:

npx create-react-app

После завершения установки перейдите в новый каталог проекта и запустите приложение, используя следующие команды:

cd
npm start

Предыдущая команда запускает локальный сервер разработки, предоставленный Create React App, который отключает приглашение командной строки в вашем терминале. Чтобы продолжить обучение, откройте новое окно терминала и вернитесь в каталог проекта, прежде чем переходить к следующему шагу.

Теперь у вас есть первая версия вашего приложения React, работающая в режиме разработки, которую вы можете просмотреть, открыв + http: // localhost: 3000 + в веб-браузере. На этом этапе ваше приложение будет отображать экран приветствия только из приложения Create React:

изображение: https: //assets.digitalocean.com/articles/cart_61768/React_App_BoilerPlate.jpg [Первая версия вашего приложения React]

Теперь, когда вы установили и создали первую версию своего приложения React, вы можете добавить в приложение компонент таблицы, который в конечном итоге будет содержать данные из API DigitalOcean.

Шаг 2 - Создание компонента для отображения данных капли

На этом шаге вы создадите первый компонент, который отображает информацию о ваших каплях. Этот компонент будет таблицей, в которой перечислены все ваши капли и соответствующие им данные.

В DigitalOcean API документация говорится, что вы можете получить список, содержащий все ваши капли, отправив запрос на следующую конечную точку с помощью cURL: + https: // api .digitalocean.com / v2 / капли + `. Используя выходные данные этого запроса, вы можете создать компонент таблицы, содержащий `+ id +, + name +, + region +, + memory +, + vcpus + и + disk + для каждой капли. Позже в этом руководстве вы вставите данные, полученные из API, в компонент таблицы.

Чтобы определить четкую структуру для вашего приложения, создайте новый каталог с именем + components внутри каталога` + src`, где вы будете хранить весь код, который вы пишете. Создайте новый файл с именем + Table.js + внутри каталога + src / components in и откройте его с помощью nano или текстового редактора на ваш выбор:

mkdir src/components
nano src/components/Table.js

Определите компонент таблицы, добавив в файл следующий код:

SRC / компоненты / Table.js

import React from 'react';

const Table = () => {
 return (
   <table>
     <thead>
       <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Region</th>
         <th>Memory</th>
         <th>CPUs</th>
         <th>Disk Size</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
       </tr>
     </tbody>
   </table>
 );
}

export default Table

Приведенный выше блок кода импортирует инфраструктуру React и определяет новый компонент с именем + Table, который состоит из таблицы с заголовком и телом.

После добавления этих строк кода сохраните и выйдите из файла. С помощью текстового редактора nano вы можете сделать это, нажав + CTRL + X +, набрав + y + и нажав + ENTER +.

Теперь, когда вы создали компонент таблицы, пришло время включить этот компонент в ваше приложение. Вы сделаете это, импортировав компонент в точку входа приложения, которая находится в файле + src / App.js +. Откройте этот файл с помощью следующей команды:

nano src/App.js

Затем удалите стандартный код, который отображает приветственное сообщение Create React App, в + src / App.js +, который выделен в следующем блоке кода.

SRC / App.js

import React, { Component } from 'react';



class App extends Component {
 render() {
   return (
     <div className="App">














     </div>
   );
 }
}

export default App;

После удаления строк, отображавших приветственное сообщение, включите компонент таблицы в этот же файл, добавив следующие выделенные строки:

SRC / App.js

import React, { Component } from 'react';


class App extends Component {
 render() {
   return (
     <div className="App">

     </div>
   );
 }
}

export default App;

Если вы снова откроете + http: // localhost: 3000 + в своем веб-браузере, ваше приложение теперь будет отображать базовую таблицу с заголовками таблиц:

изображение: https: //assets.digitalocean.com/articles/cart_61768/React_App_TableComponent.jpg [Приложение React с базовой таблицей]

На этом шаге вы создали компонент таблицы и включили этот компонент в точку входа вашего приложения. Затем вы установите соединение с API DigitalOcean, которое будете использовать для получения данных, которые будут отображаться в этой таблице.

Шаг 3 - Защита ваших учетных данных API

Настройка подключения к API DigitalOcean состоит из нескольких действий, начиная с безопасного хранения вашего токена личного доступа в качестве переменной среды. Это можно сделать с помощью dotenv - пакета, который позволяет хранить конфиденциальную информацию в файле + .env +, к которому ваше приложение может впоследствии получить доступ из среды.

Используйте npm для установки пакета + dotenv +:

npm install dotenv

После установки + dotenv + создайте файл среды с именем + .env + в корневом каталоге вашего приложения, выполнив эту команду:

nano .env

Добавьте следующее в + .env +, который содержит ваш токен личного доступа и URL для API DigitalOcean:

env
DO_API_URL=https://api.digitalocean.com/v2
DO_ACCESS_TOKEN=

Чтобы эти конфиденциальные данные не были переданы в репозиторий, добавьте их в файл + .gitignore + с помощью следующей команды:

echo ".env" >> .gitignore

Теперь вы создали безопасный и простой файл конфигурации для переменных среды, который предоставит вашему приложению информацию, необходимую для отправки запросов в API DigitalOcean. Чтобы убедиться, что ваши учетные данные API не видны на стороне клиента, вы должны настроить прокси-сервер для пересылки запросов и ответов между вашим сервером приложений и API DigitalOcean.

Установите _https: //www.redhat.com/en/topics/middleware/what-is-middleware [middleware] _ + http-proxy-middleware +, выполнив следующую команду:

npm install http-proxy-middleware

После установки, следующим шагом будет настройка вашего прокси. Создайте файл + setupProxy.js в каталоге` + src`:

nano src/setupProxy.js

Внутри этого файла добавьте следующий код для настройки прокси-сервера:

SRC / setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {

 require('dotenv').config()

 const apiUrl =
 const apiToken =
 const headers  = {
   "Content-Type": "application/json",
   "Authorization": "Bearer " + apiToken
 }

 // define http-proxy-middleware
 let DOProxy = proxy({
   target: apiUrl,
   changeOrigin: true,
 pathRewrite: {
   '^/api/' : '/'
 },
   headers: headers,
 })

 // define the route and map the proxy
 app.use('/api', DOProxy)

};

В предыдущем блоке кода + const apiURL = + устанавливает URL-адрес API DigitalOcean в качестве конечной точки, а + const apiToken = + загружает ваш токен личного доступа в прокси-сервер. Опция + pathRewrite + монтирует прокси-сервер в + / api +, а не в + / +, чтобы он не мешал серверу приложений, но по-прежнему соответствовал API DigitalOcean.

Вы успешно создали прокси-сервер, который будет отправлять все запросы API, сделанные из приложения React, в API DigitalOcean. Этот прокси-сервер будет следить за тем, чтобы ваш личный токен доступа, который безопасно хранится в качестве переменной среды, не был открыт на стороне клиента. Далее вы создадите фактические запросы на получение данных капли для вашего приложения.

Шаг 4 - Выполнение API-вызовов для DigitalOcean

Теперь, когда ваш компонент дисплея готов, а данные о подключении к DigitalOcean сохранены и защищены через прокси-сервер, вы можете начать извлекать данные из API DigitalOcean. Сначала добавьте следующие выделенные строки кода в + src / App.js + непосредственно перед и после объявления класса + App +:

SRC / App.js

import React, { Component } from 'react';
...
class App extends Component {







   render() {
...

Эти строки кода вызывают метод + constructor + в вашем компоненте класса, который в React инициализирует локальное состояние, предоставляя + this.state + объект или объекты. В этом случае объекты являются вашими каплями. Из приведенного выше блока кода вы можете видеть, что массив, содержащий ваши Droplets, пуст, что позволяет заполнить его результатами вызова API.

Чтобы отобразить текущие капли, вам нужно получить эту информацию из API DigitalOcean. Используя функцию JavaScript Fetch, вы отправите запрос в API DigitalOcean и обновите состояние для + droplets + с помощью данные, которые вы получаете. Вы можете сделать это, используя метод + componentDidMount +, добавив следующие строки кода после конструктора:

SRC / App.js

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







...

Когда ваши данные Droplet хранятся в + state +, пришло время извлечь их из функции + render + вашего приложения и отправить эти данные в виде + prop + компоненту таблицы. Добавьте следующий выделенный оператор в компонент таблицы в + App.js:

SRC / App.js

...
class App extends Component {
 render() {
   return (
     <div className="App">
       <Table  />
     </div>
   );
 }
}
...

Вы создали функциональность для извлечения данных из API, но вам все еще нужно сделать эти данные доступными через веб-браузер. На следующем шаге вы достигнете этого, отобразив данные капли в компоненте таблицы.

Шаг 5 - Отображение данных капли в компоненте таблицы

Теперь, когда вы перенесли данные капли в компонент таблицы, вы можете перебрать эти данные по строкам в таблице. Но поскольку приложение делает запрос к API после монтирования + App.js +, значение свойства для + droplets + сначала будет пустым. Поэтому вам также необходимо добавить код, чтобы убедиться, что + droplets + не пусто, прежде чем пытаться отобразить данные. Для этого добавьте следующие выделенные строки в раздел + body` + Table.js`:

SRC / компоненты / Table.js

const Table = () => {
 return (
   <table>
     <thead>
       <tr>
         <th>Id</th>
         <th>Name</th>
         <th>Region</th>
         <th>Memory</th>
         <th>CPUs</th>
         <th>Disk Size</th>
       </tr>
     </thead>
     <tbody>












     </tbody>
   </table>
 );
}

С добавлением предыдущего кода ваше приложение будет отображать сообщение-заполнитель + Loading …​ +, когда нет данных Droplet. Когда API DigitalOcean возвращает данные Droplet, ваше приложение будет перебирать их по строкам таблицы, содержащим столбцы для каждого типа данных, и отображать результат в вашем веб-браузере:

изображение: https: //assets.digitalocean.com/articles/cart_61768/React_App_WithData.jpg [Приложение React с данными капельки]

На этом шаге вы изменили компонент таблицы вашего приложения, чтобы отображать данные капли в веб-браузере, и добавили сообщение-заполнитель, если капли не найдены. Затем вы будете использовать интерфейсную веб-среду для стилизации ваших данных, чтобы сделать их более привлекательными и удобными для чтения.

Шаг 6 - Стилизация компонента таблицы с помощью начальной загрузки

Ваша таблица теперь заполнена данными, но информация отображается не самым привлекательным образом. Чтобы это исправить, вы можете стилизовать ваше приложение, добавив Bootstrap в ваш проект. Bootstrap - это библиотека стилей и компонентов с открытым исходным кодом, которая позволяет добавлять адаптивные стили к проекту с помощью шаблонов CSS.

Установите Bootstrap с помощью npm, используя следующую команду:

npm install bootstrap

После завершения установки Bootstrap импортируйте его CSS-файл в ваш проект, добавив следующую выделенную строку в + src / App.js +:

SRC / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';


class App extends Component {
...

Теперь, когда вы импортировали CSS, примените стиль Bootstrap к вашему компоненту таблицы, добавив класс + table + к тегу + <table> + в + src / components / Table.js +.

SRC / компоненты / Table.js

import React from 'react';

const Table = ({ droplets }) => {
 return (
   <table >
     <thead>
...

Затем завершите стилизацию приложения, поместив над таблицей заголовок с заголовком и логотипом DigitalOcean. Нажмите * Download Logos * в разделе * Brand Assets * на странице DigitalOcean’s Press, чтобы загрузить набор логотипов, выберите свой любимый в каталоге + SVG + (это Учебное пособие использует + DO_Logo_icon_blue.svg +) и добавит его в свой проект, скопировав файл логотипа в новый каталог с именем + assets + в каталоге + src + вашего проекта. После загрузки логотипа импортируйте его в заголовок, добавив выделенные строки в + src / App.js +:

SRC / App.js

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';


class App extends Component {
...
 render() {
   return (
     <div className="App">





       <Table droplets={ this.state.droplets } />
     </div>
   );
 }
}

export default App;

В предыдущем блоке кода классы внутри тега + nav + добавляют определенный стиль из Bootstrap в ваш заголовок.

Теперь, когда вы импортировали Bootstrap и применили его стиль к своему приложению, ваши данные будут отображаться в вашем веб-браузере с упорядоченным и разборчивым отображением:

изображение: https: //assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [Окончательная версия вашего приложения React]

Заключение

В этой статье вы создали базовое приложение React, которое извлекает данные из API DigitalOcean через защищенный прокси-сервер и отображает их в стиле Bootstrap. Теперь, когда вы знакомы с платформой React, вы можете применить концепции, которые вы узнали здесь, к более сложным приложениям, например, найденным в https://www.digitalocean.com/community/tutorials/how-to-build-a. -современная-веб-приложение в управлении-клиентов-информации с-Джанго-и реагировать-на-убунту-18-04 # шаг 3% E2% 80% 94 создающей-реагировать-интерфейс [ Как создать современное веб-приложение для управления информацией о клиентах с помощью Django и React в Ubuntu 18.04]. Если вы хотите узнать, какие другие действия возможны с помощью API DigitalOcean, загляните в API документацию на веб-сайте DigitalOcean.

Related