Jump to content
Davide Visconti

Web dashboard application

Recommended Posts

Hi, I state that I have no skills on the argument, so bear with me.
I have read a lot since last week but the argument is really a jungle and I'd like to read your very useful suggestions.

 

I try to explain what we have to do.
At the moment we have a win32 application developed in VCL Delphi Tokyo. This app read/write on localhost Firebird DB. Now, we have to realize a web application, like a dashboard , wich the users can utilize to see some values, some charts, execute some predefined queries and change some parameters on DB, the VCL app get some notifications when this happened (event alert) to update the in memory parameters.
This web app should run on computer and android mobile too, like this forum 🙂
The number of clients connected are very few, maximum 5.

 

Now, according to you, what library, framework, we have to use for the front-end...?
For the back end? I have to use a REST service like @Andrea Magni's MARS Curiosity?


Finally, can you give me some guide or how-to that you've found useful to begin please?

 

THANKS A LOT for any suggestions.

Edited by Davide Visconti

Share this post


Link to post

I do not know about the MARS Curiosity library, and for the tests that I have done the Delphi MVC Framework of Daniele Teti ( https://github.com/danieleteti/delphimvcframework ) can also serve as backend, and serve the html pages of the application. As a system to style the web pages a good option is  https://www.w3schools.com/w3css/, it is small and it will give a modern and responsible aspect for both pc and mobile. You can represent the graphs through the D3 library ( https://github.com/d3/d3 ) that can be fed with json data generated by the MVC Framework backend. As a way to notify changes to the VCL application, you could define events in the database (when you insert, modify or delete a record in a table) and capture them with the TFDEventAlerter (Firedac) component. Other forms would be using websockets.   
 Another library for backend that seems good option and apparently has a good performance is MorMot ( https://synopse.info/fossil/wiki/Synopse+OpenSource ), but I think that for 5 users, MVC Framework may be enough and is more easy to learn (at least for me). 

Edited by Alberto Fornés

Share this post


Link to post

While Alberto's suggestions are all good and valid, I'd like to make you aware that you could produce something really easily and quickly without needing to know very much using UniGUI.  It is however not free. (I have no affiliation with UniGUI other than being a user of UniGUI myself.)  Note there is a trial version you could try to see if this would be workable at all.

 

To give you an idea about what you can achieve, see the example from this thread that I've quickly spun up for you on an AWS instance here.  The code that does this is on github here.   Additionally I've added the "mdemo" demo included with UniGUI which is accessible here.   Note I'll probably tear down this cloud VM again in the near future.  

 

Finally it would be possible to code up a UI in Javascript without too much fuss using say jQuery and/or Bootstrap (and/or D3 or Google charts or whatever) and then serve up the supporting files and data in one of several ways as already suggested by yourself and/or Alberto, or even just with the stuff included with Delphi, e.g. Webroker, Indy or Datasnap.   That sounds simple enough in theory but there's a lot of moving parts and supposes that you know or can pick up enough Javascript and the relevant libraries (jQuery, bootstrap, d3, whatever else) quickly enough.  I'm not sure if that's realistic?

 

 

 

 

Edited by ByteJuggler

Share this post


Link to post
6 hours ago, Davide Visconti said:

Now, according to you, what library, framework, we have to use for the front-end...?
For the back end? I have to use a REST service like @Andrea Magni's MARS Curiosity?

Hi Davide, thanks for the quote.

Your scenario really suggests for a REST server (whatever library you are going to use: from WebBroker/Datasnap to mORMot, passing through RAD Server as well [if you have an edition including a license]) and a client application (a web app).

Obviously I would push for MARS: easy to learn, Delphi oriented, performs well (for maximum scalability and performance I myself would consider mORMot), easy FireDAC integration and support for server side content generation (html, JS or CSS) through dMustache and DelphiRazor libraries.

 

For the frontend there are a number of possibilities. Personally I've done much with jQuery and Bootstrap (easy and effective). If you look for something more high level (components and similar) go for React or Sencha products, but consider the licensing.

UniGUI and TMS WebCore are other (commercial) options that can be effective shortcuts to your development time and can help you not to delve too much into web technologies (offering a more stable environment where to work, that is particularly useful for larger or long lasting projects).

 

This is my (possibly biased 🙂 ) idea on the topic.

Sincerely

  • Like 1

Share this post


Link to post

Hi!

 

The beauty of Delphi is that if you design things properly you don't have to settle.

Start easy with DMVC, which also has demos for Bootstrap to get you started and make sure that your data classes are well separated by the DMVC code.

Once you have that running, you can really look into alternatives. The only issue would be the events: for that, I would go with push notifications (for example, Kinvey) on all platforms. 

The reason for this is that you're still going to need them on mobile, so you may just as well use them across the board.

 

Then again, plan it properly and you can change things around a fair bit.

Share this post


Link to post
14 hours ago, Andrea Raimondi said:

Start easy with DMVC, which also has demos for Bootstrap to get you started and make sure that your data classes are well separated by the DMVC code.

Once you have that running, you can really look into alternatives. The only issue would be the events: for that, I would go with push notifications (for example, Kinvey) on all platforms. 

The reason for this is that you're still going to need them on mobile, so you may just as well use them across the board.

 

 

Actually he was looking to keep his VCL app (with data changes notification directly from the db) and add a (responsive) web application.

No need to get into the push notification thing.

BTW, I noticed I currently have no Boostrap specific example in MARS repository (although I myself have several production projects using this configuration). Will try to add one to the repo ASAP.

 

Share this post


Link to post

Have a look at webcore(you have to pay for it but you can use them demo version to try your ideas)  if you want a version that will convert you Delphi code to JavaScript and have it run in any HTML5 compatible browser.

 

There are some online demos to try.

https://www.tmssoftware.com/site/tmswebcoreintro.asp

 

 

Share this post


Link to post

Unigui is good solution, it will make things easier because you don't have write code in two projects, one for backend and one for frontend.

 

It's combine with power of Delphi in the RAD way with the most rich JS library (Ext JS).

 

Here's sample of one of dashboard we made with Unigui:

 

image.png.d41803fdb4e90dba246932ae1e308e1e.png

 

another sample from unigui forums:

 

image.png.ce9d68abe6708e59c0f60243abc6b6f6.png

 

PS: I'm just happy unigui customer.

  • Like 1

Share this post


Link to post

@Mohammed Nasman

 

@ByteJuggler

 

I'm luky... I'm trying UniGui but I found some problems.

In base of your experience is it a stable platform?

What do you think about the support?

 

http://forums.unigui.com/index.php?/topic/9143-missing-rtti-information/

http://forums.unigui.com/index.php?/topic/11499-uniimagepictureloadfromfile-trouble/

 

Thank you in advance.

 

Share this post


Link to post

Hi,

 

To briefly answer you: 

 

We're running a production solution for about 18 months now.  As of this writing the solution is very stable. I've had continuous up-times in excess of a month.  Usually the system is restarted etc not because of some unknown UniGUI problem, but because we've updated the software.  And the rare problems we've had has in almost every case turned out to be mistakes in our code, and/or pre-existing problems in code we've reused that have come to light due to UniGUI's multi-session/mutli-user/multi-threaded nature.  

 

As for support: The couple of times I've had questions or problems I've mostly been helped pretty rapidly.  I cannot complain.  With actual suspected bugs, the usual considerations apply as for any software, which is to say if you can give the UniGUI guys a reproducible test case then you tend to get helped much more quickly and eagerly than if you do not.

 

Hope that helps.

 

 

 

 

Share this post


Link to post

@Davide Visconti Your best choice is IntraWeb. Rich interface with what you want to use and not get stuck with only one (Ext JS). Combine the powerfull of Delphi in the RAD way with Freedom of IntraWeb. Change your Interface with ZERO coding in Delphi side. Deploy in Service StandAlone (Indy), the Unbeatable StandAlone Http.sys or Isapi.

 

See this REAL IntraWeb application.

 

How about transform this:

image.png.c33a4e8c270e032255c4aee801629874.png

 

Into this:

image.thumb.png.a4e50579b2fd58e42ca9d20a78cc15fc.png

 

Share this post


Link to post

@Davide Visconti,

 

We have been using in production even since beta phase, and was much stable other, and also support is very good, I few had problem in past and Farshad (Author of Unigui), connect with teamviewer and helped me to find the problems, and most of problem were related to my code which is win32 desktop app shared with the unigui app.

 

 

Share this post


Link to post

UniGUI is a good solution. IntraWeb also a good solution.

 

But because these two of frameworks have package server side code and front end UI code together, you lost some degree of freedom. If you want some function it has not achieved, you can hardly insert some code in it by yourself.

 

So, in Delphi, you can use WebBroker framework,and with some front end framework such as BootStrap, jQuery, etc. It is very simple solution if you familiar with Delphi, but you must familiar with some front end framework.

 

I'm not a expert of front end, yet I'm not familiar with BootStrap, but I have use WebBroker and BootStrap to implement a simple WEB app just like a simple WordPress, its database is FireBird.

 

To use WebBroker and BootStrap,you can separate server side code by delphi and client side code by HTML and JavaScript, and client side codes can put into a text file out of your Delphi code, so you can update your WEB UI by no need to rebuild your delphi code.

Share this post


Link to post

I have implemented a HTML help system with Stand Alone mode WebBroker(which built in a TIdWebServer inside it) and BootStrap and SQLite. This solution can let me display some text and picture in TWebBrowser in my Delphi mobile APP.

Share this post


Link to post

I did almost exactly your need, i think.

I have an SQL server database.

The company works with many Delphi applications on it.

Now i made a shell HTML page to fill by a Delphi application.

Delphi build and insert data from sql into an HTML page.

The page is put in memory of the server on a regular

time. (Timer).

Now every body can have the 2 pages i build with computers or phone.

See all sql data and statistic. 

the link is used with dyndns.org:

Share this post


Link to post
On 12/25/2018 at 3:16 AM, pcplayer99 said:

UniGUI is a good solution. IntraWeb also a good solution.

 

But because these two of frameworks have package server side code and front end UI code together, you lost some degree of freedom. If you want some function it has not achieved, you can hardly insert some code in it by yourself.

 

To use WebBroker and BootStrap,you can separate server side code by delphi and client side code by HTML and JavaScript, and client side codes can put into a text file out of your Delphi code, so you can update your WEB UI by no need to rebuild your delphi code.

 

That's exactly what TMS Web Core + XData solution offers and differs from others existing web solutions for Delphi. The client generated by Web Core is pure HTML/JS application, and XData backend is pure API (not related with the web GUI front-end)

Share this post


Link to post

We've spent 2 years working on making a full commerical ERP solution powered by Delphi delivered over the web. Although a framework like Intraweb, UniGUI etc might be fast and easy and do the job, I actually would encourage you to learn a little HTML, CSS & Javascript yourself. You can use the TidHTTPServer component in Delphi to talk in HTTP/HTTPS. You might start by writing code in the default action to read a URL and turn it into a local file i.e. replace / with \ etc and don't allow any ..\ etc.

This would allow you to stream a HTML5 page, a CSS file and a javascript file.

After you've got this going, Review DevExpress HTML5 Library and learn how to use your new HTTP Server to send the browser JSON data streams.

It might take you a few days to get up to speed with how to make a basic HTML5 page, learn CSS, Javascript etc and how to make Delphi output JSON via Indy but once you learn these skills you'll be in full control of your future look & feel.

Obviously if your app gets more complex you'll have to work out how to create a session cookie & keep authentication records in your app.

Share this post


Link to post

Thank you so much for any suggestion.

 

Since the web applications is not our core business and because we don't have a lot of time to learn any other languages, we choosed the UniGui framework to speed up the development process.
In this first months we get a good impression of UniGui, yes there is some "memory leak", but overall, the results obtained so far are enough.

 

I would like them to improve customer support because IMHO isn't enough.

Thanks again.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×