API Connections

ds1 · January 29, 2021, 1:38pm

Hi,

I have 2 questions:

How do API Connections work in Wappler Basic?
Which extensions provide that specific feature and functionality?

I cannot find any documentation about API Connections anywhere.

Thanks.

George · June 4, 2018, 1:21pm

Hi Anthony,

Currently you can choose any public json data source or local json file as a source for the “JSON Data Source” component. This will make the data available for data bindings in your page.

With Server connect you can build your own api of server actions like database queries, updates, mailings and others. As well combine a full workflow of action steps in a single action call.

What kind of API your are looking for to connect to?

ds1 · June 4, 2018, 1:39pm

Hi George,

It’s a custom API hand written by my client (in PHP, JavaScript, JSON). It has Token-based Authentication, and returns JSON.

This is an example of how it needs to work:

The first two methods are used to authenticate and receive a token:
ms1 = https://fake-dev.site.com/mobile-api.php?method=ms1&email=some@email.com
ms2 = https://fake-dev.site.com/mobile-api.php?method=ms2&email=some@email.com&password=somepassword

This next method takes the token from the above authentication, and returns a card list of items:
card-list = https://fake-dev.site.com/mobile-api.php?method=card-list&token= (must use token from ms2)

This list of returned cardholders can then be selected, and new API calls made to bring in their data.

I sent a detailed email to you this morning at around 7:30AM your time, which has the real API links for testing purposes.

How would something like this be setup?

George · June 4, 2018, 1:50pm

Sure but what is the general purpose of the API? Is it to deliver data to your public site or to process orders like for the back end?

ds1 · June 4, 2018, 2:21pm

Very simple actually.

The initial functionality of the API just needs to access a list of cardholders associated with a specific login account, and to be able to populate data from each cardholder (on that account) onto the appropriate screen.

So just 3 steps: Login, Show Cardholder List, then Select a list item and load specific cardholder data.

After that, additional functionality will be needed, but getting the above functionality hooked in is the priority.

ds1 · June 4, 2018, 2:23pm

Also, I guess I should have mentioned that the project where I need the API hooked in is a mobile app. This mobile app will be packaged as an iOS and Android app, which will only be available on the app stores. There will not be a web app version. Everything must run from the device. (But there is no need for local storage… at this time)

George · June 4, 2018, 2:33pm

well as long as the data is json and it can be called with plain urls (not special headers) then is seems doable to me.

It is good that it will be a mobile app, as you don’t want this info exposed to public web

As we finalize the last web oriented extensions for wappler in the next 1-2 weekly updates. we will move on to the mobile dev and packaging so you should be able to package your app with cordova under wappler in a few weeks. Framework 7 v1 for mobile development is already in Wappler - but we want to move on to version 2 of it. So hope it will be also available at the same time.

ds1 · June 4, 2018, 2:49pm

Yes, the API only has 8 methods for data calls, and they all return JSON.

But I’m still completely in the dark as to how to set the API up with Server Connect? I cannot find any documentation on API Connections.

George · June 4, 2018, 3:05pm

Well you don’t need to call it from Server Connect - Server Connect is for your own API/backend

You will be calling it directly from the frontend - with App Connect components. That is where the JSON Data Source come in place. There you can call it - automatically or on demand. and in the loaded events - you can call the other api’s with the given authentication - till you got your data that you just display to the user then

ds1 · June 4, 2018, 3:33pm

Thanks George, I really appreciate your time.

But to be clear, the URL where the methods are called from is not a JSON file, it’s a PHP based file (like this: https://fake-dev.site.com/mobile-api.php), which returns JSON when the methods are used accurately, and in sequence.

So would I add this URL to the project like so:

/* dmxDataSet name “App1API” /
jQuery.dmxDataSet(
{“id”: “App1API”, “url”: “https://fake-dev.site.com/mobile-api.php”, “dataType”: “jsonp”}
);
/ END dmxDataSet name “App1API” */

And then use App Connect to make API calls based on the above, or is there a better approach that actually works?

George · June 4, 2018, 3:35pm

ah where did you get this code from? It is from the old HTML5 Data Bindings … we are using App Connect as replacement this days and it has a very different options and also a JSON Data Source as component that I mentioned earlier…

ds1 · June 4, 2018, 3:39pm

It’s part of a test I’m running in Dw.

Is there a specific tutorial that you can point me to that shows this alternative to HTML5 Data Bindings?

George · June 4, 2018, 3:43pm

and the documentation:

App Connect is the most important front-end framework also in Wappler now, so you should learn and use it there. Usage is pretty much the same as in Dreamweaver - so you can follow the manuals on DMXzone

ds1 · June 4, 2018, 3:49pm

Awesome. Thank you. Time for some serious study!!!

I almost purchased Wappler Basic on Friday (June 1st), but it doesn’t come with Visual App Designer for Framework7, and $466 for Pro was too expensive for this particular mobile app project. So I decided to purchase the monthly subscription to your Dw extensions instead. I’m hooked into a Dw workflow for the moment. Hopefully there is a Pro subscription coming soon

s.alpaslan · June 4, 2018, 4:26pm

perfect question … tottaly true we need like this option …

I create a json file with php and then read the json file with “app connect json”. This method is not successful at all. Because real time does not work. I’m using Cron.

s.alpaslan · June 4, 2018, 4:29pm

wappler and dmxzone are very good. but the plugins are missing too. many properties are very nice and handy but not enough.

s.alpaslan · June 4, 2018, 4:33pm

I will buy wappler pro when plugin issues are also resolved. I have no chance of updating dmxzone extension to wappler …

ds1 · June 4, 2018, 9:18pm

Hi,

Are you saying that adding a URL like this (https://fake-dev.site.com/mobile-api.php) for the JSON Data Source Properties URL does not work?

I’m still trying to figure out how to initially setup API Connections. I find it increasingly frustrating that there is no documentation on this at all. I’m having to watch a ton of videos completely unrelated to API Connections, and trying to intuit what I should be doing. I have zero experience with App Connect, and there are so many options that nothing about it seems intuitive… at least for API setup.

Is there no one with experience setting up an API like this?

s.alpaslan · June 4, 2018, 10:44pm

yes … it does not work. it works only *.json files (in local)…
but you can try this method … ( https://www.dmxzone.com/go/32944/using-dynamic-expressions-in-javascript-functions )

you can post your data via ajax request and you can create json file then you can read …

but this method so bad … some extensions doesnt enought for all process …
but dmxzone will develop dmxzone json extension.

I am having a lot of problems while creating a mysql query … I can not use all mysql commands … ( complex queries … )

ds1 · June 5, 2018, 12:17am

Not sure how creating a dynamic expression in JS functions will help, considering that its success is contingent upon having first “created a repeat region, which displays data from a database”. If the JSON Data Source Properties URL can only be a *.json file extension (and not mobile-api.php), then my PHP API file would not return any data, and I’ve hit another dead end.

Can you confirm this George?