[GUIDE] Niotron + Discourse Community Implementation

Introduction

In this tutorial I will be teaching you how to implement the Niotron Community site (Discourse) in your Niotron apps. You do not need complex blocks, and there there are only two extensions 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 two extensions for this.

You will also need the following components.

  • 1 Notifier from the User Interface category.

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

  • 1 ColorUtils component from the Extras category.

  • 1 Web component from the Connectivity category.

  • 1 Beautify component from the Drawing and Animation category.

:jigsaw: Blocks

To get started, we need to declare 3 variables: the URL to our community and an ID variable for creating components. Since there are empty descriptions or null descriptions of categories in Niotron community, we will also need a list of that.

blocks (9)

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 Create_Card_View 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:
NiotronCommunity.aia (46.1 KB)

:slightly_smiling_face: Summary

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

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

5 Likes

Good work @Gordon_Lu :+1:t2: