レッドウッドとメディアライブラリを作る

あなたはブログやサイトのビデオや画像コンテンツを提供する専門サイトを持っている可能性があります.あなたは自分のコンテンツのすべてを管理するために自分のメディアライブラリを作ることができますし、それがあなたのユーザーに適切に保つ.あなたが必要な正確なデータを見ることができるように、あなたのイメージやビデオを配置することができます方法は、ユーザーに影響しない方法.
このチュートリアルでは、ビデオや画像を扱うために小さなメディアライブラリを作ります.あなたはCloudinaryにビデオや画像をアップロードし、独自のライブラリに表示することができます.我々は他の場所で参照画像に使用できる独自のPostgresデータベースでその内容に参照を格納するでしょう.

Cloudaryアカウントの設定

まず最初にやることはCloudaryアカウントを設定することです.あなたはsign up for a free account here .
その後、すべてのユーザーのメディアコンテンツをアップロードするには、単一の場所があるでしょう.あなたのコンテンツのすべてを格納する心配する必要はありませんし、ちょうどあなたのビデオを取得し、アップロードすることができます.

レッドウッドアプリの設定

今、あなたは端末に行くことができると我々は次のコマンドで私たちの新しいRedwoodアプリを作るでしょう.yarn create redwood-app media-libraryこれが終了すると、ちょうど少し更新を必要とする完全なスタックのアプリがあるでしょう.にapi あなたのデータベースとGraphSQLのバックエンドを処理するすべてのコードを見つけるフォルダ.にweb あなたが反応フロントエンドのためのコードを見つけるフォルダ.レッドウッドが私たちのためにたくさんの仕事を処理するためにこれを使用するので、我々はデータベース・スキーマから始めます.

モデル作成

オープンschema.prisma にapi > db ディレクトリ.必ず更新してくださいprovider to postgresql の代わりにsqlite Postgresデータベースを使用するので.更新する瞬間を取る.env プロジェクトのルートでファイルします.コメントを外してくださいDATABASE_URL 値とPostgres接続文字列に更新します.このように見えるかもしれない.DATABASE_URL=postgres://postgres:admin@localhost:5432/media_libraryPostgresがローカルにインストールされていない場合は、you can download it here インストールが完了したらPGadminから接続文字列を取得します.
閉じることができます.env 今、戻ってschema.prisma なぜなら、我々のモデルを追加する必要があるからです.この例のモデルをファイルに削除し、次のものを追加できます.

model Video {
  id       Int    @id @default(autoincrement())
  name     String
  duration Float
  url      String
}

model Image {
  id     Int    @id @default(autoincrement())
  name   String
  url    String
}

データベースを設定するには、データベースのスキーマを準備します.yarn rw prisma migrate devこれは、モデルで定義された列と制約を持つテーブルを作成します.ちょうどいくつかのデータを見て、我々はデータベースをシードします.

データベースの播種

インサイドapi > db , オープンseed.js で、コメントアウトコードの全てを削除しますmain 関数.次のコードで独自のシードコールを追加します.

await db.video.create({
  data: { name: 'Beth_vid', duration: 765.34, url: 'example.com' },
})
await db.image.create({
  data: { name: 'Beth_img', url: 'example.com/beth.jpg' },
})

このコマンドを実行してデータベースをシードできます.

yarn rw prisma db seed

あなたの新鮮なデータを適用すると、我々はレッドウッドの最高の部分に移動することができます.

フロントエンドとバックエンドを生成するためにRedwoodを使用する

今、私たちは、このプロジェクトのフロントエンドとバックエンドのためのビデオで動作するようにCRUDを生成するために私のお気に入りRedwoodコマンドを使用します.yarn rw g scaffold videoこのコマンドは、データベースにビデオレコードを追加するために必要なすべてを処理するためにフロントエンドを生成します.あなたが見るならばapi > db > src > graphql , ビデオを処理するためのクエリと突然変異の型のすべてを含む新しいSDLファイルが表示されます.インapi > db > src > services , あなたは新しいvideos ディレクトリ.このフォルダには、データベース更新を処理するすべてのリゾルバがあります.また、テストすることができますを追加することができます.
アプリのフロントエンドで、見てくださいweb > src > pages , あなたは、ビデオの多くの新しいディレクトリを見ます.これらには、CRUD機能のさまざまな側面を示すページが含まれます.
見るweb > src > components そして、あなたはビデオのより多くのディレクトリを見ます.これらのディレクトリには、フロントエンドのデータを処理するファイルと、データベースにビデオを追加するために使用できるフォームが含まれます.
我々は、実行するつもりですscaffold コマンドを1回以上の画像のすべてのファイルを生成する.

yarn rw g scaffold image

これは、私たちがCloudaryアップロード・ウィジェットで働き始める必要があるすべてです.

Cloudaryアップロード装置を加えること

我々は実際には、データベースにビデオを追加するフォームを使用するつもりはない.私たちは、私たちがCloudinaryにビデオをアップロードした後、自動的にそれをするつもりです.まず最初に、CloudinaryウィジェットをNewVideo コンポーネント.このウィジェットを追加するためにパッケージを使うことができますweb ディレクトリ.

yarn add react-cloudinary-upload-widget

レッツゴートゥweb > src > components > NewVideo ファイルを編集します.閉じるこの動画はお気に入りから削除されています.他のインポートと一緒に必要なアップロードウィジェットコンポーネントのインポートを追加します.

import { WidgetLoader, Widget } from 'react-cloudinary-upload-widget'

次に、アップローダーウィジェットコンポーネントを追加します.上のコードでVideoForm , このコードを追加します.

<WidgetLoader />
<Widget
  sources={['local', 'camera']}
  cloudName={process.env.CLOUD_NAME}
  uploadPreset={process.env.UPLOAD_PRESET}
  buttonText={'Open'}
  style={{
    color: 'white',
    border: 'none',
    width: '120px',
    backgroundColor: 'green',
    borderRadius: '4px',
    height: '25px',
  }}
  folder={'test0'}
  onSuccess={successCallBack}
/>

中には、これらの小道具のそれぞれのウィジェットのためのものをチェックアウトすることができますREADME in the repo , 我々が強調する必要があるいくつかがあります.The CLOUD_NAME and UPLOAD_PRESET あなたの中で定義する必要があります.env .

アップロードを設定するには

これらの2つのフィールドの値を必要とし、それらをあなたのCloudaryコンソールから取得します.あなたがログインするとすぐに、クラウド名はダッシュボードにあります.

あなたはに行く必要がありますsettings page for uploads そして、新しい未署名のアップロードプリセットを作成します.あなたのアップロード設定ページはこのように見えます.

ページを少し下にスクロールすると、「アップロードプリセット」セクションが表示されます.をクリックして“アップロードプリセット”を新しい未署名プリセットを作成します.あなたはこのように見えるページに取られます、そして、あなたがする必要がある唯一のものは「符号なし」に「署名されていない」ことを変えて、その変化を保存することです.

あなたが“プリセット名をアップロード”のために見る値はあなたのために設定する必要があるものですUPLOAD_PRESET に.env . これら二つの値で.env これに似ているはずです.

CLOUD_NAME=test0
UPLOAD_PRESET=rftg435ebtre4

成功コールバックの作成

これらの値が適切になったので、成功したビデオアップロードのコールバックを定義する必要があります.ここでは、データベースに格納するURLを取得し、ここでGraphSQLの呼び出しを行うところです.現在フォームを削除することができます!
成功コールバックはこのようになります.それは右の上に行くreturn 文.

const successCallBack = (results) => {
  const videoInfo = results.info
  const input = {
    name: videoInfo.original_filename,
    duration: videoInfo.duration,
    url: videoInfo.url,
  }
  createVideo({ variables: { input } })
}

ときにアプリケーションを実行するyarn rw dev そして、http://localhost:8910/videos/new ブラウザで「開く」というフォームの上に新しいボタンが表示されます.これはCloudaryアップロードウィジェットを開きます.


いくつかのビデオをアップロードし、あなたがすべてのビデオへの参照を持つテーブルを持っているメインのビデオページにリダイレクトされることがわかります.

今すぐ残っているすべてのライブラリ形式でこのページにビデオを表示することです!

メディアを示す

今すぐあなたが行く必要がありますweb > src > components > Videos オープンVideo.js . これは、我々が我々のビデオ情報でリストしたテーブルがあるファイルです.我々はテーブルを維持し、その上にビデオを追加するつもりです.
このコンポーネントはすでに取得されたすべてのビデオデータを持っているので、私たちは別の.map ビデオを介して、新しい要素を作成します.テーブル要素の右側にこのコードを追加します.

<div
  style={{
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-evenly',
    marginBottom: '24px',
  }}
>
  {videos.map((video) => (
    <video width="320" height="240" controls>
      <source src={video.url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  ))}
</div>

あなたのページを再ロードするならば、あなたはこれに類似した何かを見るべきです、しかし、あなたのビデオで.

我々は完了です!今、あなたは完全に機能するメディアライブラリを持っている.あなたがどのようにコンテンツが表示され、どのようにユーザーがどのように私たちが開始したものにもう少し想像力を追加すると対話するカスタマイズできます.この機能をImage 我々がカバーしなかった構成要素.(私はこのガイドに入れたのです.)

完成コード

あなたは、このGithubレポで完全なコードをチェックアウトすることができますmedia-library ディレクトリ.または、フロントエンドをチェックアウトすることができますCode Sandbox .
注:それはRedwoodのようなmonoreposをサポートしていないため、コードサンドボックス内のすべてを見ることができなくなります.

結論

あなた自身のデータベースへのメディア参照を格納することはあなたに時間をかけて変化をモニターするために柔軟性を与えることができます.また、あなたのCloudaryアカウントにアクセスしようとする人々に対するバッファーとして機能することもできます.いくつかのパフォーマンスの側面も、データベース内のメディア参照を有用にする可能性があります.
あなたの理由が何であるかに関係なく、今、あなたはすぐにレッドウッドの助けを借りて、このユースケースを処理する方法を知っている.