【GitHub】オススメリポジトリの紹介⑥　RealWorld

本記事は下記の記事の続きです。

本記事では「RealWorld」というリポジトリを紹介します。

「RealWorld」については、以前「【GitHub】Gitstar Rankingの紹介」の記事で簡単に紹介しましたが、本記事では「RealWorld」のアプリをインストールして動かしてみるなど、少し詳しく紹介しようと思います。

RealWorldとは

以前「【GitHub】オススメリポジトリの紹介③」の記事でTodoMVCというものを紹介しました。

下図がTodoMVCのサイトですが、見た目や動作仕様が同じTodoアプリをいろいろな方法で実現したものがまとめられているサイトです。

TodoMVCと同じ考えをBlogアプリで実現したものが本記事で紹介する「RealWorld」というリポジトリです。

下図の青線箇所ではフロントエンド側がReact、バックエンド側がDjangoとなっていますが、様々なフレームワークの組み合わせで赤線箇所のようなBlogアプリ（Conduitと呼ばれる）を実現したものが「RealWorld」というリポジトリにまとめられています。

「RealWorld」については下記の記事で詳しく紹介されています。

Introducing RealWorld 🙌

RealWorldへの行き方

RealWorldのリポジトリへの行き方ですが、検索を使うのが便利です。

「realworld github」というワードで検索するとすぐに見つかります。

下記にリンクを貼っておきます。

GitHub - gothinkster/realworld: "The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

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のリンクを貼っておきます。

gothinkster/realworld-starter-kit

例えば、フロントエンド側を開発したい人に対しては下記のような画面のテンプレートが用意されています。

Homeのテンプレート

Login/Registerのテンプレート

Profileのテンプレート

Settingsのテンプレート

Create/Edit Articleのテンプレート

Articleのテンプレート

Conduitを動かしてみよう

Conduitはフロントエンドとバックエンドの２つで構成されていますので、フロントエンドの環境とバックエンドの環境の両方を準備してインストールする必要があります。

ただ、上記で紹介したCypressで用意されているConduitのテスト環境一式にはConduitのフロントエンドとバックエンドの環境が含まれており、インストールも簡単ですので、本記事ではCypressの環境を使用することにします。

下記に環境一式のリンクを貼っておきます。

GitHub - cypress-io/cypress-example-conduit-app: Conduit example blogging app.

１．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アプリについてはもう少し説明したいことがありますので、次の記事で説明しようと思います。