Box UI Elements、React、Tailwind CSS、Vercelを使用したコンテンツポータルの作成 (パート2)

Image by vectorjuice on Freepik

Boxコンテンツポータルシリーズのパート2へようこそ。今回のチュートリアルでは、Boxのフォルダにコンテンツをアップロードする新しいページを追加することにより、デフォルトのポータルを次の段階に進めます。

これは連続したチュートリアルシリーズなので、パート1をまだ読んでいない方は、ぜひパート1に戻ってお読みください。このまま読み進めることもできます。

Box UI Elements、React、Tailwind CSS、Vercelを使用したコンテンツポータルの作成 (パート1)

一連の手順

前回のパートでは、Reactサイトを設定してVercelに展開したことを思い出してください。ダミーのメールアドレスとともに開発者トークンを使用すると、BoxのコンテンツエクスプローラUI ElementまたはプレビューUI Elementが表示される、セキュリティで保護されたページにログインできます。

展開されたデフォルトのポータル

コンテンツエクスプローラでは、財務諸表を含むフォルダがユーザーに表示され、プレビューElementでは、利用規約ファイルがユーザーに表示されます。

ポータルの各ページ

今回は、Upload Loan Documentationという3つ目のタブ (ページ) を追加します。これは、クライアントがIncreo Financialの財務担当者に新しい融資を受けるための適切な書類を提供する場所として機能します。

それでは、始めましょう。

🚨重要な注意事項🚨

このデモは、デモのみを目的としており、本番環境向けではありません。認証周りの対策が十分ではないため、本番環境向けにはさらに開発が必要です。

前提条件

このチュートリアルのパート2を実行するには、パート1での作業に加えて、以下が必要です。

• VS CodeなどのIDE
• Git

コードを複製する

ポータルのカスタマイズを開始するには、コードをローカルにインストールし、お使いのマシンで実行する必要があります。

展開処理中にVercelによって作成されたリポジトリにアクセスするには、2通りの方法があります。1つはVercelプロジェクトのホームページの [Repository (リポジトリ)] ボタンを使用する方法で、もう1つはGitHubアカウントのリポジトリに直接アクセスする方法です。

GitHubリポジトリにアクセス

以下を実行して、コードをローカルマシンに複製します。URLの末尾は、作成したURLの末尾と一致するように変更する必要があります。コードを特定の場所に配置する場合は、必ず最初に別のディレクトリに変更してください。

git clone https://github.com/your-repository-url.git

作成された新しいディレクトリに移動します。ここでも、フォルダは、作成されたリポジトリのURLの末尾と一致します。

cd your-repository-directory

VS Codeを使用していて、ターミナルの拡張機能を構成済みの場合は、以下を実行して、ダウンロードしたフォルダをIDEで開くことができます。それ以外の場合は、Finderまたはエクスプローラを使用して手動で開く必要があります。

code .

コードが開いたら、IDE内でターミナルを開くことができます。

VS CodeまたはIDEターミナルを開く

このコードリポジトリではNode 18.18.0を使用します。マシン上の複数のNodeバージョンを管理するには、Nodeバージョン管理ツール (nvm) を使用することをお勧めします。そのインストールの詳細については、こちらをご覧ください。インストールが完了したら、18.18.0をインストールします。その後、以下のコマンドスニペットを使用して、現在のNodeの設定を18.18.0に設定します。

VS Codeまたはターミナルウィンドウを閉じてもう一度開いた場合は、useコマンドを再度実行する必要があります。そうしないと、コードは実行されません。

nvm install 18.18.0
nvm use 18.18.0

このコードリポジトリでは、pnpmを使用してパッケージを管理します。VS Codeのターミナルで、以下のコマンドを実行してpnpmをグローバルにインストールし、その後、このプロジェクト用のパッケージをインストールします。

npm install -g pnpm

pnpm install

次のコマンドを実行して、サンプルのenvファイルをディレクトリにコピーします。

cp .env_example .env

新しく作成したファイルを開きます。最初の展開時にVercelに追加したものと同じ環境変数をコピーする必要があります。引用符は必要ありません。クイックヒント: Vercelプロジェクトの [Settings (設定)] タブで環境変数を見つけ、それをコピーしてenvファイルに貼り付けるだけです。

Vercelの [Settings (設定)] ウィンドウから値をコピー

言うまでもなく、実際のシナリオでは、本番サイト、ローカルマシン、ステージング環境で異なる値を設定することになるでしょう。今回の例では、同じ値を使用します。

必ずファイルを保存してください。

完成したenvファイル

プロジェクトをローカルで実行するには、Vercel CLIを使用します。Vercel CLIを初めて使用する場合は、以下のコマンドを使用してローカルにインストールします。

npm i -g vercel

コードを実行する前に、Box開発者コンソールのCORSの設定セクションにhttp://localhost:3000が表示されていることを確認してください。

ローカルホストのCORSの設定

次に、以下のコマンドを実行して、ポータルをローカルで実行します。初回は、Vercelからログインするよう求められます。表示された指示に従います。その後、CLIでは、展開したVercelプロジェクトにローカルコードを関連付けるよう求められます。これは、コマンドの下に示すコードスニペットに似ています。必ずYを指定し、既存のプロジェクトに関連付けてください。

vercel dev

? Set up and develop “~/projects/box-custom-portal-demo”? (Y/n) y

? Which scope should contain your project? (Use arrow keys)
❯ github-user's projects

? Link to existing project? (Y/n) yes

? What's the name of your existing project? box-portal-demo-fork

ビルドしたら、http://localhost:3000にアクセスします。ログインページが表示されます。ダミーのメールアドレスと、アプリケーションの [構成] タブから取得した開発者トークンを使用してログインできます。すべてが成功すると、口座明細書は口座明細書のタブ、利用規約は利用規約のタブに表示されます。

ローカルでビルドされたホームページ

ターミナルでCtrl + Cキーを押し、次のセクションでいくつかの変更を加える間、コードの実行を停止します。

アップローダーUI Elementを追加する

コードをダウンロードしてローカルで実行したので、新しいページを追加してテストし、Vercelのライブサイトにそのページを展開します。このページ (タブ) は、お客様がドキュメントをアップロードするための場所となり、ドキュメントはバックグラウンドでBoxに保存されます。

この例には、融資の申請書類のアップロードに関する他のビジネスロジックは含まれていませんが、簡単に追加できます。たとえば、新規の申請ごとに新しいフォルダを作成したり、申請時にBoxメタデータとして保存されるフォームの入力データを追加したりできます。

コメントアウトされているコードがすでにあるため、新しいページの追加は非常に簡単です。これをベースに、練習としてページをいくらでも追加できます。

パブリックフォルダでconfig.jsonファイルを探します。このファイルには、さまざまなカスタマイズに必要なものがすべて揃っていますが、これについては後で詳しく説明します。ここでは、以下のコードをナビゲーションの配列に追加します。titleフィールドは編集可能ですが、この例では「Upload Loan Documentation」を使用します。

,{
  "page": "UploaderPage",
  "title": "Upload Loan Documentation"
}

アップローダーページを追加

pagesディレクトリの下に、uploader.jsという名前の新しいファイルを作成し、以下のスニペットのコードをコピーして貼り付けます。このファイルをsolutionディレクトリからドラッグアンドドロップすることもできます。この操作を行う場合、solutionディレクトリ内の2番目のファイルは無視してください。それは、次のパートで使用します。必ずファイルを保存してください。

アップローダーページを追加

import React from "react";
import ContentUploader from 'box-ui-elements/es/elements/content-uploader';
import { IntlProvider } from "react-intl";
import AnimationRevealPage from "helpers/AnimationRevealPage.js";
import tw from "twin.macro";
import { css } from "styled-components/macro"; //eslint-disable-line
import Header from "pages/header.js";
import styled from "styled-components";
import imageSrc from "images/reliable-icon.svg";
import { getConfigValues } from "./helper"

const TwoColumn = tw.div`flex flex-col md:flex-row justify-between max-w-screen-xl mx-auto py-20 md:py-24 items-center `;
const Column = tw.div`w-full max-w-md mx-auto md:max-w-none md:mx-0`;
const ImageColumn = tw(Column)`md:w-1/6 flex-shrink-0 relative`;
const Image = tw.img`max-w-full w-96 rounded-t sm:rounded relative z-20`;
const TextColumn = styled(Column)(props => [
  tw`md:w-5/6 mt-16 md:mt-0 h-128`,
  props.textOnLeft ? tw`md:mr-12 lg:mr-16 md:order-first` : tw`md:ml-12 lg:ml-16 md:order-last`
]);
//using session storage is not secure. you will want to change this functionality for production
const token = sessionStorage.getItem('token');
export default () => {
  //storing variables in the front end is not secure. you will want to grab this value from a database for production
  let folderID = process.env.REACT_APP_BOX_UPLOADER_FOLDER_ID
  return (
    <AnimationRevealPage>
      <Header />
      <TwoColumn>
      <TextColumn >
          <IntlProvider locale="en">
            <ContentUploader 
                language='en-US'
                token={token}
                rootFolderId={folderID}
           />
          </IntlProvider>
        </TextColumn>
        <ImageColumn>
                <Image src={imageSrc} />
        </ImageColumn>
      </TwoColumn>
    </AnimationRevealPage>
  );
};

最後に、app.jsファイルで、先ほど作成したアップローダーファイルのimportステートメントと、新しいヘッダーを選択するためのprivate routeオブジェクトをコメント解除し、ページを保存します。

アップローダーページのインポートをコメント解除

プライベートルートをコメント解除

ローカルでテストする

この時点で、ポータルのコードを実行し、変更をローカルで確認できるはずです。

ターミナルで、次のコードスニペットを実行し、http://localhost:3000にアクセスします。ダミーのメールアドレスと、開発者コンソールから取得した開発者トークンを使用してログインします。なお、これらのトークンの有効期間は60分間のため、いったん作業を中断して再開した場合は、新しいトークンを作成する必要があるかもしれません。

vercel dev

融資の申請書類をアップロードするための新しいタブが上部に表示されます。

上部で新しいタブを確認

新しいタブをクリックすると、コンテンツアップローダーUI Elementが表示されるので、ファイルをアップロードします。ファイルの種類は問いません。

ファイルをアップロード

Boxに戻り、アップロード用に設定したフォルダを確認します。アップロードしたファイルが表示されるはずです。

アップロードしたファイルを表示

変更を展開する

ローカルで動作するようになったので、この新機能をVercelのライブサイトに展開します。Vercelでの展開は非常に簡単で、変更をGitHubにチェックインするだけで済みます。

ここでは、GitHub統合に組み込まれているVS Codeを使用しますが、使用するgitの環境設定は何でもかまいません。

変更がチェックインされると、展開が自動的に開始されます。

新しい展開を確認

展開が完了したら、ローカルでテストしたのと同じ機能をインターネット上でテストできるようになります。

ライブサイト

まとめ

パート2で説明したように、新しいページを使用したポータルの拡張は比較的簡単です。ここで紹介したコード例を参考に、Box UI Elementsのいずれかを使用してデフォルトのポータルに新しいタブを追加できます。

次のパートでは、認証に重点を置いて説明する予定です。

いつものように、Box Developer Relationsチームへのフィードバックがある場合は、Developer Forum (英語のみ) にコメントをお送りください。