Wikipedia application

Even if an application simply shows results of search on Wikipedia, it seems like a lot of work to build one. But it’s easy if you use K5 Playground. See this tutorial and you’ll get it done in 30 minutes.

Information

Ingredients

• Template: Simple Search
• API Loigcs: Wikipedia Search Page

Functions

• Searching on Wikipedia.
• Displaying results of the search.

Create the application

Frontend

1. Choose the Simple Search Template.

2. Customize the UI in K5 Playground.

Backend

1. Change the WebAPI name.

   • Rename sample_products to articles.

2. Edit the API Logic of GET /articles.

   1. Click GET /articles endpoint.

   2. Remove Fetch Document API Logic.

   3. Add the Search Wiki Page API Logic from Search menu at the right pane.

   4. Modify the code as follows.

      1. Set search keyword

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

      2. Set total pages

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

      3. Set offset for pages

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

3. Download the application.

Customize the application

Frontend

1. Edit the actions/ProductActionCreators.js.

   Change the parameter of dispatch called in getProducts method.

   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. Edit the components/pages/ProductListPage.js.

   Change card function to show a result of wiki search.

   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

Nothing to be edited.

Deploy the application

Finally, all you need to do is deploying backend and frontend.

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

Download

NOTE: Removed all actions and components not in use.

• Sample Application

Version

• Simple Search Template: v1.0.0