[HOWTO] 💬 Discourse API + App Inventor Implementation

We use our community for discussions, but have you thought about implementing our community (Discourse) with App Inventor? This tutorial will show you how. We will display a list of our community categories in a list. In the following days I will also show you how we can get user information, top badges, and lots more.

A. Extensions before using.

To continue this tutorial, here is something I made which was never published. Here is the list of extensions I used.

For the sake of this tutorial I have created a new extension. Really simple, displays HTML text programatically, downloads in the Downloads section.

I used the Comfortaa font in this tutorial. Download from Comfortaa Font | dafont.com.

B. Components before using.

You will need:

  • A "dummy" label to convert HTML text to plain text. Just make sure it is visible and enable HTMLFormat for this label.

  • A VerticalScrollArrangement. All of the categories will be placed here.

  • A Web component to perform HTTP requests.

  • A Notifier component to display error messages or loading dialogs.

  • One of each of the extensions I mentioned above. MyFonts is completely optional, I just used it for UI enhancements.

C. Blocks.

We first need 2 global variables. communityUrl is the URL of our community without slashes at the end, and ID is a "dummy" variable used to test the IDs of created components.

blocks (7)

When the screen initializes, we perform the request immediately.

This procedure creates a card for each category. It creates a canvas for the color of that specific category, a HorizontalArrangement to represent the card, and a Label for the name and the description of the category. I also use CompCreator to create spaces between cards.

After the web request is performed, we fill the scroll arrangement with cards of categories. That makes it a "card list view".

:inbox_tray: Downloads

AIX: HtmlContent.aix (5.5 KB)

AIA: DiscourseApi.aia (167.4 KB)

You are allowed to use this tutorial anywhere for private use as long as it complies with the App Inventor ToS. Credit is not needed but I would be grateful if you can.

Please, click the beautiful :heart: Like button, this tutorial took me two weeks to make. Thank you.

8 Likes

Will this work offline? I don't have much time to read today.

Nice Idea and Work @gordonlu310 :+1:

It uses an online API. So definitely it won't work offline.

3 Likes

I have conducted such an experiment with the Discourse API like this example In Object Oriented Visual Basic .NET programming language as well, and I can say it's pretty worth it.

1 Like