Flowcode Web Developer

[Steve-Matrix]

Web Developer is a new feature of Flowcode first introduced in v10.1.0.38 (released earlier today). This feature allows Flowcode users to create interactive web pages that can interact with a wide range of data sources. One of its main uses will be to develop HMIs (Human-Machine Interfaces) to control and acquire data from your embedded projects.

The diagram below shows the different types of Flowcode project now available and where each deployed project will live:

Flowcode Project Types.png (90.66 KiB) Viewed 6088 times

Note that once a Flowcode Embedded project has been created, it can be converted to retarget an alternative embedded device. Often this can happen without requiring program changes, especially when changing between similar targets (e.g., to a different PICmicro in the same family). However, an Embedded project cannot be retargeted to or from an App Developer project. Likewise, PC and Web Developer projects cannot be retargeted between each other.

PC Developer apps and Web Developer apps do not necessarily need to communicate or link with hardware. You could create stand-alone games or apps that teach mathematics. However, Flowcode users are generally interested in embedded projects and so both App Developer project types will often be used to interact with embedded devices.

Web Developer projects will often receive data by accessing external websites (which may actually just be pages served by your own embedded device) using HTTP. Almost just like we would type in a web address to a browser, the Web Developer app will use the Fetch component to send an optional list of parameters to a web page, and the webserver will respond with information that is easily readable by our app.

Often, the data received is a JSON text string (which is a collection of name/value pairs of information). But not always. It may just be a single integer value, or even just "yes" or "no".

This communication can be used to send information from our Web Developer app and/or receive information from the external website (or embedded device).

The other form of internet communication we are supporting is MQTT. This is quite common within IoT and allows communication with devices that do not have a direct API to connect to using HTTP.

[Steve-Matrix]

Flowcode's Web Developer projects will need to be constructed differently to traditional embedded projects.

One big difference is the "main" macro, which is the first macro to be executed when the project runs. In an embedded project, this will typically have an infinite loop and within this loop you will read sensor, display information, etc. A Web Developer project's "main" macro serves a slightly different function. It is executed when the web page is first loaded by the browser, and once it has completed, the web page will allow interaction. Often this "main" macro will contain no commands, and should not have any lengthy loops or processes.

Instead of most of the project occurring within a main loop, a Web Developer project will contain macros that will be executed when something specific occurs, such as the user clicking a button or some data being received after it was previously requested. For example, Button components have an "OnClick Macro" property that is called when the user presses that button, and the Fetch component will have a "Call Macro" property that is called when the data it has requested becomes available to process. An "event-driven" approach is required.

We have a getting started guide on the wiki which covers some of these essentials, and each component has a section on the wiki which can be accessed within Flowcode by right-clicking the component and selecting "help".

And of course you can post on this forum with questions, suggestions, etc.

[RGV250]

Hi,
I have had a look through the getting started guide link and totally confused myself. At the bottom is seemed to imply there were examples for an ESP32 but I did not find any downloadable projects. Are any available yet?

Will it have it's own section like there is for App developer?

Regards,
Bob

[Steve-Matrix]

Yes, there are a few projects already at the end of that guide. I'm also working on a few others that are not officially available yet. For example, see my post here:

viewtopic.php?p=14505#p14505

That one is a very slow-paced step-by-step example of using Flowcode to create an embedded ESP32 project and an associated Web Developer app to communicate with it using simple HTTP comms.

And the first three sample projects on this page show how Web Developer can be used in practical scenarios:

https://www.flowcode.co.uk/app-developer/free-apps/

Will it have it's own section like there is for App developer?

App Developer now has 2 parts and consists of PC Developer plus the new (in v10.1) Web Developer. You can post in that section if you have any specific issues regarding Web Developer use.

There are some fundamental differences in how you approach Web Developer to how you would create a traditional Embedded (or PC Developer) app, and this makes a little hurdle to get going with it.

Let us know the specific issues you are unsure about, and/or let us know what you are trying to achieve, and hopefully we can clear up any confusion you have.

[RGV250]

Hi Steve,
Thanks, that will give me an excuse for some pub time reading through it. Never taken the laptop in though, might be time to start

Bob