Wappler Community as API - WWC #2

Wappler General Announcements
1

While we are finalizing our previous WWC (Wappler Weekly Challenge) and @psweb is finalizing his great showcase as clear winner :raised_hands: :raised_hands: , we have another challenge for you :slight_smile:

Wappler Community as API

The Wappler Community itself can be used as a great API Data Source!
Just add .json to any link and you will get the JSON response back!

Make Best Wappler Docs UI

This is particularly useful when accessing the Wappler Docs category:

https://community.wappler.io/c/docs

You can get it as JSON:
https://community.wappler.io/c/docs.json

Also the search is fully available as API Service!

Just change the regular search from:

https://community.wappler.io/search?q=bootstrap%20%23docs

to

https://community.wappler.io/search.json?q=bootstrap%20%23docs

and you will get your results!

So who is up for the challenge and can make the Wappler Docs category most user friendly, searchable UI? @wappler_ambassadors

Let the challenge begin!

Deadline - November 27th!!

4 Likes
3

GEORGE!!! How can you do this too me, Holiday in 4 days, deadlines before then and you set such an exciting and fabulous challenge.
Have you any idea how much it will hurt not to be able to do this one!!!

May have to submit an entry a week late anyway just because i want to do it :grinning:
(wonders if wife will notice a laptop in suitcase :wink:)

1 Like
4

haha - sorry Brian :slight_smile: - but it isn’t Christmas yet! So we have some time before our break :slight_smile:

Well take the laptop indeed - Wappler on holiday = best mates :slight_smile:

5

Wappler on holiday = best mates = Divorce

2 Likes
6

Got to love an API with a parameter called include_blurbs

1 Like
7

When is deadline? This sounds fun.

8

No problem - Deadline is 27 November - we couldn’t have @Hyperbytes’s holiday and marriage ruin :slight_smile:

So go for it!

1 Like
9

Trying to connect to the community.wappler.io API and I am getting the CORS Policy block?

Access to XMLHttpRequest at 'https://community.wappler.io/c/docs.json?' from origin 'https://www.learnwappler.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

EDIT: Forgot to mention I used no params to connect at all or Header params, was I meant to.

10

Have, you it the same problem I had with Google Api. I was hoping the imminent server connect version of api connect would resolve this.

11

Well I had the same CORS problem when connecting to one of the geoPlugin API’s but @geoplugin fixed that from his side, I assume Wappler will have to make an alteration on their end for this one too.
I have only really connected to the Maps API from Google and never had any issue with that though.

12

I couldnt get google geolocation to work due to CORS issue.

13

We just enabled CORS for all domains - so everybody should be able to use the forum API here now.

Go for it @psweb, @Hyperbytes and @drymetal !

14

Would love to join in @George but I an being forced to lay on a beach in 26 degrees heat.

15429731973006520597219371391123
15429731973006520597219371391123.jpg4032×3024 3.55 MB

6 Likes
15

Be careful, Brian, with that rain in the forecast for the next 10 days! :grin::rofl:

1 Like
16

The discourse API can be difficult, requires a lot of requests to get all required data. So I created a sample that shows how you can nest API sources inside a repeater.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>API Sample</title>
    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
    <script type="text/javascript" src="dmxAppConnect/dmxFormatter/dmxFormatter.js"></script>
    <style>
      body {
        font-family: verdana;
        font-size: 12px;
        margin: 0;
        padding: 0;
      }
      
      ul {
        margin: 0;
        padding: 0;
        padding-left: 1em;
      }
      li {
        list-style: none;
      }
    </style>
  </head>
  <body is="dmx-app" id="app">
    <dmx-api-datasource id="api1" is="dmx-fetch" url="https://community.wappler.io/site.json"></dmx-api-datasource>
    <dmx-api-datasource id="api2" is="dmx-fetch" url="https://community.wappler.io/c/docs.json"></dmx-api-datasource>

    <dmx-api-datasource id="api4" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/t/' + showTopic.value + '/posts.json'"></dmx-api-datasource>

    <dmx-value id="showTopic" value="2790"></dmx-value>
    
    <div style="display: flex">
      <div style="flex: 1; padding: 10px; border-right: 1px solid #666;">
        <ul>
          <li dmx-repeat:repeat1="api1.data.categories.where(`parent_category_id`, 28, &quot;==&quot;)">
            <dmx-api-datasource id="api3" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/' + id + '.json'"></dmx-api-datasource>
            {{name}}

            <ul>
              <li dmx-repeat:repeat2="api3.data.topic_list.topics"><a href="javascript:void(0)" dmx-on:click="showTopic.setValue(id)">{{title}}</a></li>
            </ul>
          </li>
          <li dmx-repeat:repeat3="api2.data.topic_list.topics"><a href="javascript:void(0)" dmx-on:click="showTopic.setValue(id)">{{title}}</a></li>
        </ul>
      </div>
      <div style="flex: 2; padding: 10px;" dmx-html="api4.data.post_stream.posts[0].cooked">
      </div>
    </div>
  </body>
</html>
2 Likes
17

You not kidding @patrick, that discourse API was a nightmare, wish I had this when I was trying to figure the thing out, haha. Must have taken 4 hours to get the parts i wanted out of it.

Thank you for this, great help indeed.

18

Is there a way to make each item in the repeat have its own Id? Like the category repeat?

19

You can use dmx-bind:id="‘yourid’+$index" which will increment the ID by 1 from the values in the repeat itself if that helps. Hope I understood what you meant.

20

Is there a way to get the dmx-bind on it without looking at the code or is that the only way?

Also, how do you suppose you collapse each section? See screenshot. In my mind, you could make each section have its own ID, and toggle based on that. Any thoughts @psweb

image
image.png510×692 31.3 KB

21

To get what you have means that you must have a repeat region. Inside that you have another repeat so a nested repeat. You can add a variable that gets set on click and add it inside the first repeat which means that it will have as many variables as their are in the category repeat.
I started working on this challenge but unfortunately got too busy with normal work.
If you want to look at that in the meanwhile to look at the code see. https://www.learnwappler.com/playing.php

Sorry wrong link I fixed it. Open the file manager to see the listing like you might want.