[GUIDE] Kodular + Discourse Community Implementation

[Gordon_Lu]

Introduction

In this tutorial I will be teaching you how to implement the Kodular Community site (Discourse) in your Kodular 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 the guide.

Setup

To start off, you will need to obtain a copy of the JSON To Dictionary Extension by @Mohamed_Tamer. Thank you Mohamed!

You will also need the following components.

• 1 Notifier from the User Interface category.

• 1 Vertical Scroll Arrangement from the Layouts > General category. Set its height and width as fill parent.

• 1 Color Utilities component from the Utilities category.

• 1 Dynamic Label and 1 Dynamic Card View from the Dynamic Components category.

• 1 Web component from the Connectivity category.

Blocks

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

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.

Downloads

AIA:
KodularCommunity.aia (11.1 KB)

Summary

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

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

[Gordon_Lu]

II. Create a list of topics of a category.

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

SCREEN1: We create a new variable containing a list of category IDs. This will save a list of category IDs that we can use.

We need to update our Web1.GotText so that it adds a list of category ID, category color and category slug for each category to the list.

Now, we need to respond to the click of the card views. Set FullClickable of DynamicCardView1 in the Designer to true, and add these.

SCREEN2: We reuse the id and communityUrl variables, and the CreateCardView and Card procedures. Just copy them over to the Blocks editor of Screen2. Add the same components that you added in Screen1 to Screen2.

First, we need to get the values that we passed from Screen1 to Screen2.

When the Screen initializes, we perform a request retrieving a list of topics.

When the Web component has received the list of topics, we display the topics as a list view of cards.

Alright! We’re done!

Downloads

AIA:
KodularCommunityV2.aia (18.3 KB)

[Gordon_Lu]

III. List all groups of members.

In our community we have different groups of users - Extensions Developers, BetaKoders, etc . Click on More > Groups for more info. We can also find that out with Kodular. I’m using Screen3, another screen, as the example.

We reuse the id and communityUrl variables, the Notifier1.AfterChoosing event, and the CreateCardView and Card procedures. Just copy them over to the Blocks editor of Screen3. Add the same components that you added in Screen1 to Screen3 as well.

In order to continue, we need another extension: [F/OS] - Dynamic Components Extension (for every component) 2.2.2 by @yusufcihan. Thank you Yusuf! We also need a Dynamic Image extension from the Dynamic Components category…

Downloads

AIA:
KodularCommunityV3.aia (58.3 KB)

Footnote: It takes some time for the data to load, for me ~ 15 seconds. This is why I chose to make the UI plain, too much UI may crash the app.

[Gian_Luca]

hi friend, version 3 also includes version 1 and 2 or are they different things?

[Gordon_Lu]

They include everything. Check the AIA files. Each update adds something new to the previous update.