Wikipediaを検索するアプリを作る

Wikipediaの検索結果を一覧・詳細表示するシンプルなアプリケーションです。

このチュートリアルでは、K5 Playgroundを使って、WikipediaのAPIを使う方法を説明します。

概要

材料

• Template: Simple Search
• APIロジック: Wikipedia Search Page

機能

• Wikipediaの検索
• 検索結果の表示

アプリの作成

K5 Playgroundにアクセスします。

Frontend

1. Simple Searchテンプレートの選択

Backend

1. WebAPI名の変更

   • sample_productsをarticlesに変更します。

2. GET /articlesのカスタマイズ

   1. GET /articlesをクリックします。

   2. Fetch Document APIロジックを削除します。

   3. Search Wiki Page APIロジックを右ペインのSearchからドラッグ&ドロップします。

   4. コードを次のように修正します。

      1. 検索ワードの設定

         var srsearch = req.swagger.params.keyword.value;

      2. ページ数の設定

         var srlimit =  req.swagger.params.limit.value;

      3. offsetの設定

         var sroffset =  req.swagger.params.offset.value;

3. アプリのダウンロード

アプリのカスタマイズ

Frontend

1. actions/ProductActionCreators.jsの編集

   getProductsメソッド内のdispatchメソッドの引数を変更します。

   AppDispatcher.dispatch({
     type: ActionTypes.GET_PRODUCTS,
     data: {
       products: productList.data.query.search.map(
         // NOTE: Since we need _id to show detail page, use the title of page.
         product => Object.assign({}, product, { _id: product.title }),
       ),
       count: productList.data.query.searchinfo.totalhits,
     },
   });

2. components/pages/ProductListPage.jsの編集

   Wikipediaの検索結果を正しく表示するようcard部品を修正します。

   const card = value => (
     <VerticalCard002
       key={value.title}
       title={
         <a
           href={`https://en.wikipedia.org/wiki/${value._id}`}
           target="_blank"
           rel="noopener noreferrer"
         >
           {value.title}
         </a>
       }
       contentStyle={styles.cardContent}
       highlighted={value.snippet.replace(/<[^>]*>/gm, '')}
       highlightedStyle={styles.cardHighlighted}
     />
   );

Backend

特に何もする必要はありません。

アプリのデプロイ

Backend

cd backend
cf push [APP_NAME]

Frontend

cd frontend
npm install
set API_URL=[Backend URL] # for Windows
export API_URL=[Backend URL] # for Mac/Linux
npm run build
cf push [APP_NAME] -p public

ダウンロード

• Sample Application

Version

• Simple Search Template: v1.0.0