Wikipedia API and the Web Component

Published on February 26, 2022

In this guide, you will learn how to use the Wikipedia API to search pages in Wikipedia for similar terms. We will use a ListView to show the selections, and then when the user has selected an item, we will redirect to another screen with that item.

🏷️ Tags: #api, #json, #tutorials-and-guides

Step 1. Setting Up Your Project.

  1. Create a project, give it a suitable name.

  2. From the User Interface, drag out a TextBox and set its Hint to "Enter keyword..." and its Width to fill parent.

  3. From the User Interface, drag out a Button and set its Text to 'Enter'.

  4. Use a HorizontalArrangement (Layout) to align these two components horizontally. Set its width to fill parent.

  5. From the User Interface, drag out a ListView and drop it below the HorizontalArrangement. Set:

    • Height: Fill parent.

    • Width: Fill parent.

    • ListViewLayout: MainText,DetailText(Vertical).

    • Visible: false.

  6. From the User Interface, drag out an Image and drop it below the ListView.

  7. From the User Interface, drag out a Label and drop it below the Image. Set its text to nothing, and HTMLFormat to true.

  8. From the User Interface, drag out a Notifier.

  9. From the Connectivity drawer, drag out a Web component.

  10. Add a new screen named Screen2.

  11. In Screen2, drag out a WebViewer. Done! Go back to Blocks editor in Screen1.

Step 2. Blocks for Screen1.

Explanations:

  • We have a variable that is a URL to a 'Page not found' image.

  • We have a procedure that has an empty space, not a blank text block.

  • When the search API is clicked, we perform the API get request. Since spaces are not allowed in URLs, we replace them with addition signs. We also hide the onscreen soft keyboard.

  • When a request has timed out, we tell the Notifier to alert the user.

  • When the Web component has got some information, we do the following.

    • If the Web component has search results, we move on. Else, we show the Page not found image.

    • We analyze the search results. The ListView will show the page title as MainText, while Snippets (the starting texts of a page) as a DetailText. Since the snippets are in HTML, and the Label supports HTML text, we set the Label's text to the snippet, then set the DetailText to the Label's text. However, beware that you need to clear the Label's text after finishing.

  • When the user has selected something in the ListView, we move to Screen2 to show the result. To avoid wasting resources, we also close Screen1.

Step 2. Blocks for Screen2.

Downloads

Known issues:

  • App Inventor aiStarter emulator - error 1011: Unable to get a response with the specified URL: https://...