ReactでDigitalOcean APIからのデータを表示する方法

著者はhttps://www.brightfunds.org/organizations/wikimedia-foundation-inc [ウィキメディア財団]を選択して、https：//do.co/w4do-cta [寄付のために書く]プログラムの一環として寄付を受け取りました.

前書き

過去数年にわたって、オープンソースのWebフレームワークは、アプリケーションのコーディングプロセスを大幅に簡素化しました。たとえば、https：//reactjs.org/ [React]は、新しい開発者が言語にアクセスしやすくなり、ベテランの開発者の生産性を高めることで、JavaScriptの人気を高めています。 Facebookで作成されたReactを使用すると、開発者は宣言型ビュー、状態管理、クライアント側レンダリングなどの機能をサポートすることにより、拡張性の高いWebアプリケーション用のハイエンドユーザーインターフェイスをすばやく作成できます。 JavaScriptのアプリ。

Reactなどのフレームワークを活用して、https：//developers.digitalocean.com/documentation/v2/ [DigitalOcean API]からデータをロードおよび表示できます。これにより、HTTPリクエストを使用してDigitalOceanクラウド内でDropletやその他の製品を管理できます。他の多くのJavaScriptフレームワークを使用してAPIからデータを取得できますが、Reactは、ライフサイクルやローカル状態管理など、ジョブに特に適した便利な利点を提供します。 Reactでは、アプリケーションの起動時にAPIから取得したデータがローカル状態に追加され、コンポーネントがマウントおよびマウント解除されるときにさまざまなライフサイクルを実行できます。いつでも、ローカル状態からデータを取得し、それに応じて表示できます。

このチュートリアルでは、https：//developers.digitalocean.com/documentation/v2/ [DigitalOcean API v2]と対話して呼び出しを行い、ドロップレットに関する情報を取得する単純なReactアプリケーションを作成します。アプリには、現在のドロップレットと、名前、地域、技術仕様などの詳細を含むリストが表示されます。フロントエンドフレームワークhttps://getbootstrap.com/[Bootstrap]を使用して、アプリケーションのスタイルを設定します。

このチュートリアルを終了すると、DigitalOcean Dropletsのリストを表示する基本的なインターフェイスが表示され、次のようにスタイルが設定されます。

image：https：//assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [Reactアプリケーションの最終バージョン]

前提条件

このガイドを始める前に、https：//cloud.digitalocean.com/registrations/new [DigitalOcean account]と少なくとも1つのhttps://www.digitalocean.com/docs/droplets/how-to/が必要です。以下に加えて、作成/ [ドロップレットの設定]：

Node.js（少なくともv6）およびhttps://www.npmjs.com/[npm]（少なくともv5.2）のローカルインストール。 Node.jsは、ブラウザーの外部でコードを実行できるJavaScriptランタイム環境です。 npmという名前のプリインストールされたパッケージマネージャーが付属しており、パッケージをインストールおよび更新できます。これらをmacOSまたはUbuntu 18.04にインストールするには、https：//www.digitalocean.com/community/tutorials/how-to-install-node-js-and-create-a-local-development-environment-onの手順に従います-macos [macOSでNode.jsをインストールしてローカル開発環境を作成する方法]またはhttps://www.digitalocean.com/community/tutorials/how-to-install-node-の「PPAを使用してインストールする」セクションjs-on-ubuntu-18-04 [Ubuntu 18.04にNode.jsをインストールする方法]。
読み取り専用https://www.digitalocean.com/community/tutorials/how-to-use-the-digitalocean-api-v2#how-to-generate-a-personal-access-token [個人アクセストークンDigitalOcean API]。トークンは必ず安全な場所に記録してください。このチュートリアルの後半で必要になります。
HTMLとJavaScriptの組み合わせに精通している。詳細については、https：//www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html [JavaScriptをHTMLに追加する方法]をご覧ください。
JSONデータ形式に精通していること。https：//www.digitalocean.com/community/tutorials/how-to-work-with-json-in-javascript [JavaScriptでJSONを使用する方法]で詳細を確認できます。。
APIへのリクエストの作成に関する知識。 APIの操作に関する包括的なチュートリアルについては、https：//www.digitalocean.com/community/tutorials/how-to-use-web-apis-in-python-3 [Python 3でWeb APIを使用する方法]をご覧ください。 ]。 Python向けに書かれていますが、APIを使用する際のコアコンセプトの理解に役立ちます。

ステップ1-基本的なReactアプリケーションの作成

この最初のステップでは、npmのhttps://github.com/facebook/create-react-app[Reactアプリの作成]パッケージを使用して、基本的なReactアプリケーションを作成します。このパッケージは、モジュールビルダーhttps://webpack.js.org/[Webpack]やJavaScriptコンパイラhttps://babeljs.io/[Babel]など、Reactの実行に必要な必須の依存関係を自動的にインストールして構成します。インストール後、パッケージランナーhttps://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b[npx]を使用してReact Appパッケージを実行します。 Node.js。

Create React Appをインストールしてアプリケーションの最初のバージョンを作成するには、次のコマンドを実行し、 `+ my-app +`をアプリケーションに付けたい名前に置き換えます：

npx create-react-app

インストールが完了したら、新しいプロジェクトディレクトリに移動し、次のコマンドを使用してアプリケーションの実行を開始します。

cd
npm start

上記のコマンドは、React Appの作成によって提供されるローカル開発サーバーを起動し、ターミナルのコマンドラインプロンプトを無効にします。チュートリアルを続行するには、新しいターミナルウィンドウを開き、プロジェクトディレクトリに戻ってから次の手順に進みます。

これで、Reactアプリケーションの最初のバージョンが開発モードで実行され、Webブラウザーで `+ http：// localhost：3000 +`を開くと表示できます。この時点では、アプリはCreate React Appからのようこそ画面のみを表示します。

image：https：//assets.digitalocean.com/articles/cart_61768/React_App_BoilerPlate.jpg [Reactアプリケーションの最初のバージョン]

Reactアプリケーションの最初のバージョンをインストールして作成したので、最終的にDigitalOcean APIからのデータを保持するテーブルコンポーネントをアプリに追加できます。

手順2-ドロップレットデータを表示するコンポーネントの作成

この手順では、ドロップレットに関する情報を表示する最初のコンポーネントを作成します。このコンポーネントは、すべてのドロップレットとそれに対応する詳細をリストするテーブルになります。

DigitalOcean API documentationでは、cURLを使用して次のエンドポイントにリクエストを送信することで、すべてのドロップレットを含むリストを取得できると述べています： `+ https：// api .digitalocean.com / v2 / droplets + `。このリクエストからの出力を使用して、各ドロップレットに対して「+ id 」、「 name 」、「 region 」、「 memory 」、「 vcpus 」、および「 disk +」を含むテーブルコンポーネントを作成できます。このチュートリアルの後半で、APIから取得したデータをテーブルコンポーネントに挿入します。

アプリケーションの明確な構造を定義するには、記述したすべてのコードを保存する「+ src」ディレクトリ内に「+ components」という新しいディレクトリを作成します。 `+ src / components `ディレクトリ内に ` Table.js +`という新しいファイルを作成し、nanoまたは任意のテキストエディターで開きます。

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

次のコードをファイルに追加して、テーブルコンポーネントを定義します。

src / components / 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

次に、次のコードブロックで強調表示されている `+ src / App.js +`でReact Appの作成のウェルカムメッセージを表示する定型コードを削除します。

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;

Webブラウザで `+ http：// localhost：3000 +`に再度アクセスすると、アプリケーションはテーブルヘッド付きの基本的なテーブルを表示します。

image：https：//assets.digitalocean.com/articles/cart_61768/React_App_TableComponent.jpg [基本的なテーブルを使用したReactアプリケーション]

この手順では、テーブルコンポーネントを作成し、このコンポーネントをアプリケーションのエントリポイントに含めました。次に、DigitalOcean APIへの接続を設定します。このAPIを使用して、このテーブルに表示されるデータを取得します。

ステップ3-APIクレデンシャルの保護

DigitalOcean APIへの接続の設定は、環境変数として個人アクセストークンを安全に保存することから始まるいくつかのアクションで構成されます。これはhttps://www.npmjs.com/package/dotenv[dotenv]を使用して行うことができます。これは、アプリケーションが後で環境からアクセスできる `+ .env +`ファイルに機密情報を保存できるパッケージです。

npmを使用して `+ dotenv +`パッケージをインストールします。

npm install dotenv

`+ dotenv `をインストールしたら、次のコマンドを実行して、アプリケーションのルートディレクトリに ` .env +`という環境ファイルを作成します。

nano .env

次を「+ .env +」に追加します。これには、パーソナルアクセストークンとDigitalOcean APIのURLが含まれます。

env

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

この機密データがリポジトリにコミットされないようにするには、次のコマンドを使用して `+ .gitignore +`ファイルに追加します：

echo ".env" >> .gitignore

これで、環境変数用の安全でシンプルな構成ファイルが作成されました。これにより、DigitalOcean APIに要求を送信するために必要な情報がアプリケーションに提供されます。 API資格情報がクライアント側に表示されないようにするには、次に、アプリケーションサーバーとDigitalOcean APIの間で要求と応答を転送するプロキシサーバーを設定します。

次のコマンドを実行して、_https：//www.redhat.com/en/topics/middleware/what-is-middleware [middleware] _ `+ http-proxy-middleware +`をインストールします。

npm install http-proxy-middleware

これをインストールしたら、次はプロキシを設定します。 + src`ディレクトリに + setupProxy.js`ファイルを作成します：

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 = `がDigitalOcean APIのURLをエンドポイントとして設定し、 ` const apiToken = `がパーソナルアクセストークンをプロキシサーバーにロードします。オプション「 pathRewrite 」は、プロキシサーバーを「 / 」ではなく「 / api +」にマウントするため、アプリケーションサーバーに干渉することなく、DigitalOcean APIと一致します。

これで、Reactアプリケーションから作成されたすべてのAPIリクエストをDigitalOcean APIに送信するプロキシサーバーが正常に作成されました。このプロキシサーバーは、環境変数として安全に保存されているパーソナルアクセストークンがクライアント側に公開されないようにします。次に、実際のリクエストを作成して、アプリケーションのDropletデータを取得します。

ステップ4-DigitalOceanへのAPI呼び出しを行う

ディスプレイコンポーネントの準備が整い、DigitalOceanへの接続の詳細がプロキシサーバーを介して保存および保護されたので、DigitalOcean APIからデータの取得を開始できます。まず、クラス `+ App `を宣言する直前と直後に、次の強調表示されたコード行を ` src / App.js +`に追加します。

src / App.js

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







   render() {
...

これらのコード行は、クラスコンポーネントの `+ constructor `メソッドを呼び出します。これは、Reactで1つまたは複数のオブジェクトに ` this.state +`を提供することでローカル状態を初期化します。この場合、オブジェクトはドロップレットです。上記のコードブロックから、Dropletを含む配列が空であり、API呼び出しの結果を入力できることがわかります。

現在のドロップレットを表示するには、DigitalOcean APIからこの情報を取得する必要があります。 JavaScript関数https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API[Fetch]を使用して、DigitalOcean APIにリクエストを送信し、 `+ 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からデータを取得する機能を作成しましたが、Webブラウザーからこのデータにアクセスできるようにする必要があります。次のステップでは、テーブルコンポーネントにドロップレットデータを表示することでこれを実現します。

ステップ5-テーブルコンポーネントでのドロップレットデータの表示

ドロップレットデータをテーブルコンポーネントに転送したので、このデータをテーブル内の行に対して反復処理できます。しかし、アプリケーションは + App.js`がマウントされた後にAPIにリクエストを行うため、最初は + droplets`のプロパティ値は空になります。したがって、データを表示する前に、「+ droplets 」が空でないことを確認するコードを追加する必要もあります。これを行うには、以下の強調表示された行を ` Table.js`の` + body`セクションに追加します。

src / components / 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>
 );
}

上記のコードを追加すると、Dropletデータが存在しない場合、アプリケーションは「+ Loading … +」プレースホルダーメッセージを表示します。 DigitalOcean APIがDropletデータを返す場合、アプリケーションは各データタイプの列を含むテーブル行に対してそれを繰り返し、結果をWebブラウザーに表示します。

image：https：//assets.digitalocean.com/articles/cart_61768/React_App_WithData.jpg [ドロップレットデータを使用したReactアプリケーション]

この手順では、アプリケーションのテーブルコンポーネントを変更して、Webブラウザにドロップレットデータを表示し、ドロップレットが見つからない場合のプレースホルダーメッセージを追加しました。次に、フロントエンドWebフレームワークを使用してデータをスタイル設定し、視覚的により魅力的で読みやすくします。

手順6-ブートストラップを使用したテーブルコンポーネントのスタイル設定

これでテーブルにデータが入力されましたが、情報は最も魅力的な方法で表示されません。これを修正するには、https：//getbootstrap.com/ [Bootstrap]をプロジェクトに追加して、アプリケーションのスタイルを設定します。 Bootstrapは、CSSテンプレートを使用してレスポンシブスタイリングをプロジェクトに追加できる、オープンソースのスタイリングおよびコンポーネントライブラリです。

次のコマンドを使用してnpmでBootstrapをインストールします。

npm install bootstrap

Bootstrapのインストールが完了したら、次の強調表示された行を `+ src / App.js +`に追加して、CSSファイルをプロジェクトにインポートします。

src / App.js

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


class App extends Component {
...

CSSをインポートしたら、クラス `+ table `を ` src / components / Table.js `の ` <table> +`タグに追加して、テーブルコンポーネントにブートストラップスタイルを適用します。

src / components / Table.js

import React from 'react';

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

次に、タイトルとDigitalOceanロゴの付いたテーブルの上にヘッダーを配置して、アプリケーションのスタイル設定を完了します。 DigitalOceanのプレスページの[ブランドアセット]セクションにある[ロゴのダウンロード]をクリックしてロゴのセットをダウンロードし、 `+ SVG `ディレクトリからお気に入りを選択します（これチュートリアルでは「 DO_Logo_icon_blue.svg 」を使用し、プロジェクトの「 src 」ディレクトリ内の「 assets 」という新しいディレクトリにロゴファイルをコピーして、プロジェクトに追加します。ロゴをアップロードした後、強調表示された行を ` 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をインポートし、そのスタイルをアプリケーションに適用したので、整理された読みやすい表示でWebブラウザーにデータが表示されます。

image：https：//assets.digitalocean.com/articles/cart_61768/React_App_Final.jpg [Reactアプリケーションの最終バージョン]

結論

この記事では、セキュアなプロキシサーバーを介してDigitalOcean APIからデータを取得し、Bootstrapスタイリングで表示する基本的なReactアプリケーションを作成しました。 Reactフレームワークに精通しているので、ここで学んだ概念を、https：//www.digitalocean.com/community/tutorials/how-to-build-aにあるようなより複雑なアプリケーションに適用できます。 -django-and-react-on-ubuntu-18-04＃step-3-％E2％80％94-creating-the-react-frontendで顧客情報を管理するためのモダンなWebアプリケーション[ Djangoで顧客情報を管理し、Ubuntu 18.04でReactする最新のWebアプリケーションを構築する方法]。 DigitalOcean APIで可能な他のアクションを知りたい場合は、DigitalOceanのWebサイトでhttps://developers.digitalocean.com/documentation/v2/[API documentation]をご覧ください。

TOC

ReactでDigitalOcean APIからのデータを表示する方法

前書き

前提条件

ステップ1-基本的なReactアプリケーションの作成

手順2-ドロップレットデータを表示するコンポーネントの作成

ステップ3-APIクレデンシャルの保護

ステップ4-DigitalOceanへのAPI呼び出しを行う

ステップ5-テーブルコンポーネントでのドロップレットデータの表示

手順6-ブートストラップを使用したテーブルコンポーネントのスタイル設定

結論

Related