[GUIDE] Appzard + Discourse Community Implementation

Introduction

In this tutorial I will be teaching you how to implement the Appzard Community site (Discourse) in your Appzard apps. You do not need complex blocks, and there is only one extension required.

I did the same thing in App Inventor, however it requires multiple extensions and the UI does not look very good, so I tried the same approach in a different way and it works. The background color of the cards all match theirs in the community website (the color of Extensions is blue, the color of Community is brown), and their descriptions and titles all match.

Hope you like it, this took me two weeks to make. Enjoy.

:building_construction: Setup

You will need the following components.

  • 1 Notifier from the User Interface category.

  • 1 VerticalScrollArrangement from the Layouts. Set its height and width as fill parent.

  • 1 ColorUtilities component and 1 DynamicComponent from the Tools category.

  • 1 Web component from the Connectivity category.

:jigsaw: Blocks

To get started, we need to declare 2 variables: the URL to our community and an ID variable for creating components.

blocks

When the screen initializes, we retrieves data from our community site and displays the notifier, indicating that the app is getting the data. Discourse provides an API for all Discourse sites to get a list of categories, by appending /site.json behind any community URL.

We create a procedure that helps us create a Card View for putting the category information in. We set the background color of the card and the ID, then return the Card View.

We create another void procedure named CreateCategory that puts a label in the card. If the background color is dark, the text color of the label would be white, else black.

Almost everything is complete, but this is the most important part. We need to respond to the Web component after it retrieves the data. We put the name of the category and the description inside the label, as the API returns the name, description and color of the category. However, if there is an error, we prompt a dialog asking the user whether to refresh or to exit the app.

At last, we respond to the user after the dialog.

:inbox_tray: Downloads

AIA:
AppzardCommunity.aia (6.0 KB)

:slightly_smiling_face: Summary

So here you go. This is how you use the Discourse API in your Appzard app. If you have any problems, feel free to ask below.

I hope you learned something new, and please click the :heart: Like button of this topic, this took some time for me to make and I genuinely appreciate your kindess. Thank you.

5 Likes

Nice guide @Gordon :wink:

2 Likes

II. Create a list of topics of a category.

By the end of this update, you will be able to also do something like this.

SCREEN1 UPDATES: (we need to add a CardView as a dummy, set its visibility to false)

We need to update this because we need to save the information of the categories. When a category is clicked, the app will pass the data to Screen2.

SCREEN2: Displays the list of topics.

:inbox_tray: Downloads

AIA: AppzardCommunityV2.aia (13.1 KB)

1 Like

outstanding guide :star_struck:

1 Like