【GitHub】オススメリポジトリの紹介⑥ RealWorld
本記事は下記の記事の続きです。
本記事では「RealWorld」というリポジトリを紹介します。
「RealWorld」については、以前「【GitHub】Gitstar Rankingの紹介」の記事で簡単に紹介しましたが、本記事では「RealWorld」のアプリをインストールして動かしてみるなど、少し詳しく紹介しようと思います。
RealWorldとは
以前「【GitHub】オススメリポジトリの紹介③」の記事でTodoMVCというものを紹介しました。
下図がTodoMVCのサイトですが、見た目や動作仕様が同じTodoアプリをいろいろな方法で実現したものがまとめられているサイトです。
TodoMVCと同じ考えをBlogアプリで実現したものが本記事で紹介する「RealWorld」というリポジトリです。
下図の青線箇所ではフロントエンド側がReact、バックエンド側がDjangoとなっていますが、様々なフレームワークの組み合わせで赤線箇所のようなBlogアプリ（Conduitと呼ばれる）を実現したものが「RealWorld」というリポジトリにまとめられています。
「RealWorld」については下記の記事で詳しく紹介されています。
RealWorldへの行き方
RealWorldのリポジトリへの行き方ですが、検索を使うのが便利です。
「realworld github」というワードで検索するとすぐに見つかります。
下記にリンクを貼っておきます。
CypressとRealWorldの関係
下記の動画ではCypressの開発者の「Brian Mann」さんがRealWorldのBlogアプリ（Conduit）を使ってCypressを使った自動テストの方法について説明をされています。
また、ConduitをCypressを使って自動でテストする環境一式がCypressの公式のExamplesの１つとして用意されています。（後でこの環境を使ってConduitを動かしてみます）
realworld-starter-kitの紹介
RealWorldでは「自分でも同じようなBlogアプリを作ってみたい」という方のために「realworld-starter-kit」というものを用意しています。
下記にrealworld-starter-kitのリンクを貼っておきます。
例えば、フロントエンド側を開発したい人に対しては下記のような画面のテンプレートが用意されています。
Homeのテンプレート
Login/Registerのテンプレート
Profileのテンプレート
Settingsのテンプレート
Create/Edit Articleのテンプレート
Articleのテンプレート
Conduitを動かしてみよう
Conduitはフロントエンドとバックエンドの２つで構成されていますので、フロントエンドの環境とバックエンドの環境の両方を準備してインストールする必要があります。
ただ、上記で紹介したCypressで用意されているConduitのテスト環境一式にはConduitのフロントエンドとバックエンドの環境が含まれており、インストールも簡単ですので、本記事ではCypressの環境を使用することにします。
下記に環境一式のリンクを貼っておきます。
１．cypress-example-conduit-appのインストール
インストールは次の手順で行います。
１．gitとNode.jsをインストールしておく
２．git clone https://github.com/cypress-io/cypress-example-conduit-app.git を実行
３．cd cypress-example-conduit-app を実行
４．npm install を実行
私のパソコンでインストールを行ってみましたので画面を示しておきます。
１．gitとNode.jsをインストールしておく
２．git clone https://github.com/cypress-io/cypress-example-conduit-app.git を実行
３．cd cypress-example-conduit-app を実行
４．npm install を実行
インストールが無事に終了しました。
２．Conduitの起動
Conduitの起動は「npm start」で行います。
下図のようなメッセージが出れば正常に起動しています。
３．ユーザー登録と記事の投稿
ブラウザで「http://localhost:4100」を入力するとConduitのトップ画面が表示されます。
「Sing up」の画面でユーザー登録します。
「New Post」の画面で記事を投稿します。
記事が投稿されました。
トップ画面にも記事が表示されています。
４．ログアウト
「Settings」の画面の下段のボタンでログアウトできます。
以上、本記事ではRealWorldについてConduitアプリを実際にインストールして動かしてみました。
Conduitアプリについてはもう少し説明したいことがありますので、次の記事で説明しようと思います。