Embedded Files
π Please help us complete a 5 minute survey!
This tutorial will show you how you can use Discourse together with App Inventor. You will be able to get a list of categories from our community, and in the future, I will also add other methods to this, including how to get user information and displaying a list of badges.
Setup
You will need the following extensions before you start this tutorial. For the sake of this tutorial, I have also created a new extension that displays HTML text programatically, the link to this is at the Downloads section. Thank you.
CompCreator to create spaces between components and cards.
Dynamic Components to create cards, images and labels.
MyFonts to customize the labels. This is completely optional and not required. I used the Comfortaa font in this project.
MakeViewUp and Beautify to customize cards.
You will also need the following components.
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.
Note: You can also replace all extensions with a ListView if you do not want extensions. Find it out!
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.
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".
Tests
Tests conducted on Xiaomi 11 5G NE running on Android 12, in companion and APK.
License
You are allowed to use this tutorial anywhere as long as it complies with the App Inventor ToS. Credit is not needed but I would be grateful if you can.
Β© Gordon Lu π§ E-mail π¬ Message π Phone call
Google Sites
Report abuse