Low Code Live Build - Frontend Designing
What are we doing today?
So just to make sure if somebody is not aware of the platform this is a low code/no-code app development platform and the idea with DronaHQ is you can build mobile & web responsive applications. So for today, If I’m not mistaken, we are going to make the application responsive right?
[Ganesha]: Yes, it is going to be responsive and you’ll get an idea of how it’s done after we do it.
Perfect.
So what we’re going to do is we’re just going to kickstart a sample application, a dummy fresh new application that we’re just going to start building by logging into the DronaHQ console and just adding a new app. If anybody has played around with DronaHQ before then you would understand, these are the 4 different formats that we have — mobile(portrait and landscape), tab, and desktop.
So, what we’ve done is, I think we’ve made a custom header just for the benefit of this particular demo here and this custom header is just drag and drop, and we’ve just deployed it. So here the theme that we’ve picked up is more or less a very generic theme. We’ve just taken HR as a theme over here, so today we’re building an HR portal and an Employee self-service kind of a portal.
So what we’re doing over here is we’re using layouts in DronaHQ and the idea is with layouts we’re basically able to divide your entire screen into a grid of rows and columns. Right now what we’re doing is we’re just setting up all the variables in the settings portion where we’re going to quickly set up the minimum height width etc of the specific column that we’ve just added. So we have a lot of stock images here, we’re just using the one that probably makes a lot of sense. In case if you want we have libraries integrated with Unsplash and some other libraries along those lines which you can use for readily available pictures.
[Ganesha]: Since I’ve shared my screen…
For the benefit of the users, Can you just show the image we’re going to create once so that they have a clue into what exactly we are making?
The picture shows the final dashboard we are going to design in this session
So this is what we’re going to create today, this is just to let you guys know what our design is going to look like.
Building the responsive structure
Back to the screen Ganesha please, we can go back to playing around with it. So what we’ve done over here is we’ve created a grid of different columns and layouts to achieve our objective of creating a UI that is supposed to be responsive. As you could see, in different columns you will have a mechanism in which you can keep navigating from a sub or a child (I would say a child container) all the way to the parent container. So we have like that up arrow which we need to press and get there.
So Ganesha, Can you please elaborate on what we are trying to do right now?
[Ganesha]: Right now we have made two columns, one for the blue color in the background.
Okay.
[Ganesha]: And the second column for the rest of the site. To get it above the column, we have to minus it which gets the job done, and the rest of the site comes in the 2nd column. This makes it responsive like this.
Got it. So the goal is because you want to make it responsive, you’re going to use this. So heads up guys, this needs a little bit of CSS to understand how exactly the layouts and columns integrate to build responsive designs.
If you’re observing this right, DronaHQ is different from most low/no-code tools you have used. In other tools, we drag a component and put it exactly into a static position or an absolute position. While In DronaHQ’s case, what we’re actually doing is we’re creating a layout as step one, and once the layout is created, we are dragging and dropping the different components that we really want inside of this. So let’s assume you have any design you need to make using DronaHQ, the concept here is first we create a layout, an absolute layout of the way you’d like things, and then we will start dragging and dropping the different components within it. Now, why it is done this way is because typically when we are looking at creating responsive applications, this is exactly how any frontend engineering would happen in the industry.
Typically in a low code/no code kind of a scenario, you generally could not do this because you just are dragging and dropping. So now in DronaHQ’s case, you have both options available, either drag and drop the usual way or use layouts for responsive designs. Layouts add the element of allowing you to be extremely flexible. Now as you can see, we added two columns into that specific layout where Ganesha is gonna be working and in that layout then he added two different components. First is the announcement component, which is just a UI/UX component. And then on the bottom layer, we added a card. So we have a ready control over here called a list control and we’re going to use that to add and fill in data.
Designing the app
So the idea over here is we’ve just taken that data component over there, linked it up to specific data points and there is a database that has already been created for this demo, so we just bound that data. Typically when you make your applications or UI/UX using Adobe XD or maybe Figma or any other tool, you might just put in some static data over there right. Here you are actually adding live data! Now what we’re doing is we’re trying to adjust how we want each card to look by changing its properties. Again it’s a very powerful control that is given in DronaHQ to use it and adjust it the way you like. In our case, our goal is to build the kind of design we showed you earlier. Now if you can see while we’re building we might just want to demo this, How would this look like right? So let’s just see how this is gonna show up by clicking on the preview button. If you’re using DronaHQ and it’s not your first time, I would love to share that we just introduced Debug as a new feature. You could use debug to start debugging how your application is loading up, you can put up a watch list and put some breakpoints in your application and you can see how things interact!
Alright, so now we have announcements on the left side and on the right-hand side, we have all sorts of control tools that we can add, say payroll master or adding a new employee or whatever the use-case we are trying to go after, but trust me this could be anything. So the concept here would remain similar, we first create layouts, and then we will start adding the different components we want. For instance, we just added a text box and we replicated what we saw on the left side. And as you can see, the moment you put the control into the layout, the control will automatically fit the size of that layout. Now that’s the beauty of how the entire layout control is supposed to function because it will give a mold or a shape to your components.
For the next control, we used a ready component, and maybe towards the end of our session, we’ll also show you how this was made. So we’ll give you a flavor of both the things so that you have an understanding. For now, we have a ready component, just drag and drop and there you go… we have it ready. As the next step what we’re doing is just adding different components and connecting them to sheets. Ganesha, what I would recommend is even opening the formulas, just open the formula and do a save and validate to show that they are getting saved.
While this is a shortcut over here what will happen is if you go to the custom formula, you can just look at it and see the wizard has already created a formula. What has happened here is now the entire thing has become responsive, it’s working, and you can see it in different form factors. So the entire frontend is absolutely ready and it just took us about 15 odd minutes to get there.
We have a question here, behind the scenes is it generating angular code? Can the code be edited before publishing? Okay, so it’s a good question! Behind the scene, this is all JavaScript that gets generated, and you don’t get access to the code as is within the platform if you’ll need to work on the code, but on the right-hand side, you have all the properties using which you can go ahead and you can give all your static values and everything. So as you can see right from letter spacing to the fonts, what fonts do you want to apply, do you want to make it bold, italics, etc, just match it up exactly the way you want.
Now Ganesha has just added an image to this as a logo over here. Let’s say you want to change that, change the width, height, etc you can go ahead. In this case, he is adding a DronaHQ logo. So this is an exact replica of the image or the thing that we had given to Ganesha to recreate and flat 20 minutes is what we needed to get to this point. Ganesha may I request you to just refresh your screen just to make sure that we are able to bind data after a refresh, assuming we can.
[Ganesha]: Yes I’ve done small updates, will refresh it.
Got it, got it. So this is the behind-the-scenes database that Ganesha had, he’s just making sure that it works fine…obviously, this could have been coming in from directly your connectors. It could be a workday connector or a success factor connector or an HR application or this could even be your internal database. Also whatever we are creating today, will go into the templates of DronaHQ. So I’m sure if you sign up and go to the templates section then you will find this and it will be available and you can choose it as is to get started. So we have one more question over here, does this contain graph layouts? The answer is yes. If you go to DronaHQ today and look for any of the dashboard templates, you will find a ready dashboard template available and you can absolutely build it the way you want.
Peek into DronaHQ’s Designer Studio
We will also show you the designer control update so that you get an idea of how the particular control works right. So this is how we use designer control over here, for now, so Ganesha have you added action control on any one of them? So I click on this particular icon and I get bindable and actionable options
[Ganesha]: I can also add an action to the card. Here I’ve added an action named pay-cycle, So if we go back to the studio we can see this in the control actions.
Excellent. So what we’re basically saying is that the way you’re publishing your cards, you can make sure that if your card needs action for this. So say this icon needs an action, for example, you can just go to the image portion of it and make that clickable, and the moment you make it clickable, you will get an action in DronaHQ using which you can define what you want to do on the click of that particular icon. Ganesha have you made any of these icons actionable by any chance?
[Ganesha]: Yes I’ve done it as shown before
So now you can just show them how to add an action to this by clicking on one of them and then here on the right-hand side you will find an action button.
[Ganesha]: So I’ve added an action in the earlier part, So I’m trying to add an action…
Great, you can just add a confirm pop-up or something like that or just a pop-up. So here, with the click of a button, we have a variety of on-screen actions that you can use. For now, we’re just going to add a simple pop-up and just continue.
Q&A Session
So we have a good number of questions coming up, I will take it up.
Is this platform capable of running complex applications? Can you build applications like Salesforce CRM?
Generally, the use-case that we get is you already have a CRM, maybe a Salesforce or Dynamix and you’re trying to create a layer on top of it, maybe you want to see your sales in one end and your support tickets on the other end right so your sales guys can see which customer has what kind of issues. So for a complex application, you’re connecting it to a variety of data sources. It can be databases, like MySQL, Mongo, Oracle or it can be things like salesforce or Dynamix or whatever. So you can basically bring in your data from any place because this is absolutely to do with building complex frontend systems. You can go ahead and use this to bind it to any data source and quickly create your application. Some of the most popular use-cases that we see are like the customer is having a support ticketing system on Zendesk or maybe they’re using a service cloud from salesforce and they are trying to create a customer support system.
So the customer service reps need to have the line of sight on all the, I would say, support tickets on one end and also on the sales data on the other end to see which customer has bought what. Now imagine that as a use-case and you need to then look into your sales data, bring it up onto the front end for your sales reps or your customer service executives, and at the same time you need to bring in all your support tickets or support related data onto another tab.
So imagine in these kinds of things we build extremely fast, how would you do it? And then you might want to stitch your own logic to it, For example, you may want to process refunds, You may want to see whether the customer is under a warranty. So depending on your use-cases you could go about building n-th order complex systems.
Can I develop the application and deploy it elsewhere?
Unfortunately, no. This is not really a tool to help you accelerate coding. This is a low-code or a no-code platform, I repeat. So whatever that you build will run within the platform itself. Ganesha if you can publish this and just show it on web.dronahq.com, a lot of people over here would appreciate seeing how this is run.
Is there any rule engine component available?
So Ganesha can you just quickly click on the rules over here. This is by default the rule engine that we have like on particular input controls. If it is a date-time control then it can be greater than or less than but if it is a text control you might want to do a regular expression. This is the default rule engine that comes along with that and based on every control that you see, you can either hide show certain things, you can set properties, you can remove/set certain states, and so on so forth. So you can go on making it absolutely as per your requirements.
Ganesha may I also suggest if you can just open a formula box somewhere, of any of the control, so we can show the users how they can do advance templating or apply advance rules onto this. Let’s assume you pick up, say this, as a thing. Just before lookup of you see, Ganesha can you just write anything letter over there, just before lookup, say ‘S’ or something? So you can just write ‘SUM’ and stuff like that, and as you can see, all the Excel-like functions, they’re all available. You can pick up the data from a lookup and you can add it, pass it on to sum, count, or whatever. So you can really look at creating complex rules right over here and that is how you could go about doing that.
What is the database architecture in the background and will it support reports?
This is more like a front-end we’re trying to show you. Our assumption is you have the connectors or the APIs available. So whatever you have connected through the APIs, your database architecture will also reside there, because we’re just creating an interface on top of your database right. So if I understand your question, here we’re not trying to show you how to create database systems, we’re trying to show you how to create front-end systems. While DronaHQ has a database to offer within the platform, the sheets that we’ve just seen, but that’s not the agenda we have for this particular workshop today.
Does the platform provide an integration mechanism with SSC, Cloud & SQL?
Yes, it does. If you just go to the connectors section, you will find all those options. Ganesha may I also request you to publish this app, and we can just show our viewers how to do so. Okay let it be, we’ll just see this later. Another important thing over here is when you’re publishing it, this can be published in two modes, org only mode where it is behind a username/password and all those things, or behind an SSO. Or you can just go ahead and make it public access.
I’ll tell you an example of public access, let’s assume you want to do secondary research, you are an FMCG or a CPG business right. So let’s assume you are in the business of confectionery or sweets or chocolate, or something like that. How do you then create a form on your website, an interactive form? You can go about using our tool, and straight away making it public access and you could get an embed code and deploy it on your website.
Could we create data modeling here?
Yes, but I wouldn’t recommend it, I would rather suggest you create your own databases and create your data models over there, then connect it using the connectors built into this. So we’ll show you about the connectors, Ganesha can you just go in the meantime and publish this application, and you need to go to web.dronahq.com so that we can see it, have you done it already?
[Ganesha]: No, I will do it now, it’s not published yet.
Okay, you have not published this, don’t release it in beta otherwise, we’ll not be able to show it. By default, DronaHQ comes in three different environments — prod, beta & dev. So he was building in dev, testing in dev, and then released in beta, now let’s assume you’re beta is all testers and internal users so you could go about using that and go about doing this, so that’s about it.
How can I get the source code of the developed app?
You cannot If you’re a hardcode developer and code is what you prefer then this is not the platform. This platform is meant for doing quick development and is absolutely going to be production grade because you know behind the scenes it’s going to create HTML, JavaScript, CSS & everything.
Can I use multiple databases? One for transaction purpose and another for backup purpose?
Again a good question, databases are behind the scenes, in this case. So you can connect it to any of your databases, I repeat. So it can be your own, so let’s assume you’re running your database on AWS RDX or maybe within your own data center, it doesn’t matter. We also had another similar question around different platforms, one in agio, one in AWS. Again you connect it to any database, it can be multiple different sources. It can be Salesforce on one end and it can be Microsoft Dynamix on another end or Zendesk or whatever. If it is databases, you connect it to 10 different data sources, it doesn’t matter. And the idea is when you bring in the data sources, quickly create tables, rules, apply logic, or queue both. So these kinds of applications could be really created extremely fast.
Does the platform follow all the compliances from a security performance point of view?
As of date, we have a lot of customers, very large enterprise customers who use our platform. They take the output of this and run through various penetration testing, BAPTs, and everything under the sun. So trust me, we have customers who are using it, you can take the output of this package and you can run your own tests on top of it, there is no problem.
What is the licensing model?
And I think another question is what is the licensing model. So here is the beauty, this tool, works on a usage-based mechanism, so it runs completely on the cloud and completely based on usage.
Guys we are nearing the wrap over here, I am hoping you guys are liking what you’re seeing here. If you like what you’re seeing, you just need to go to dronahq.com. Ganesha can you just show our viewers the website? And all that you got to do is go sign-up over there, get your access, start building it right over there. If you’re a Front-end engineer then you’re in luck, this is the tool that you would love as it will allow you to do things extremely fast.
How many end-users can access the app at a time?
So just to tell you, in the context of these applications, Front-end applications are completely served via a CDN behind the scene, as a result, it will give you an extremely powerful performance to deliver your application to the end-user. Thus everything boils down to how robust your own internal database is which is connected to DronaHQ. So if you get that right, I think you’ll have scalable systems. But front-end per se gets serviced by CDNs and these are like world-class CDNs so trust me there is no problem over there.
Somebody is asking for a 30-minute session with the team. I’ll just drop my email address for everybody’s benefit, so if you’re looking for an additional 30 minutes session with the team. My request is if you just drop me an email, we’ll be more than happy to do a further session with the team.
Email — inquiries@dronahq.com
So just one last note, since there were a lot of questions to connect to databases and connectors. Ganesha can you just go to the studio, and show the connectors for once? Can you click on connectors on the left side? So this is the connectors section, this is where bring in your database. Ganesha can you just click on this MySQL database 2.0. So now, can you just click on any, say click on create products or something like that? So this is how once you connect to your database, now we have two modes in which you can connect to a database.
‘A’ is like if it is an open database, go ahead, but let’s assume you are behind a firewall and is an extremely secured one then what you could do is we offer SSL based mechanism or an IP whitelisting mechanism with the ability to connect to your databases and third if you are a large enterprise and you believe your data cannot be exposed onto the internet even via SSL or anything, we have a complete air gap solution available so you can run the engine on your cloud, connect it within the same backbone and you could do it that way. So there are different ways and means through which you could do this.
Could we use/create a trigger? How to use Cron Job for a project?
So Ganesha can you just go to automation once just for the benefit of one question that we have? And we will take this as our last question, I know we have overshot the time. So can you just click on plus on the automation on the right side Ganesha? Thank you very much. So now we have three mechanisms over here to run cron job, one is you could use it using a scheduler, second is you can invoke any of the custom workflows you have written on DronaHQ using maybe a webhook. A webhook is, let’s assume there is some event happening in Salesforce, let’s assume you get a new order and basis that you might want to start a new project, so you can take, configure the webhook from DronaHQ in your Salesforce and let Salesforce know that in this system some event has happened and basis that event you can go ahead and do things and with the scheduler you can do other things as well. I think we’ll just take another question.
Can you please confirm the performance of the developed app, also the scalability and load?
So the developed app is soon to be serviced by DronaHQ platform CDN service so you know it will take around 5–6 seconds at maximum to have the package ready and delivered also it depends on a little bit on the size of the package. If you create a very heavy front-end application then it may take a little bit of time but otherwise on average what we see is the time to deliver the first load, the DOM load, is nearly 2½–3 seconds.
How to use push notification?
Again a good question. Within the designer, within the action flow, we have a mechanism to add push notifications. Ganesha can you just take it over there? In the action flow once,
[Ganesha]: We will show push notifications there
Go to application Ganesha what you created, into the action flow. Yes, click on plus. So here on the server-side actions do you see push notifications over there? This is what you need to use and create your push notifications, this will be sending a push notification when something happens on your front-end, similarly, there is something called a workflow, workflow happens behind the scene. Let’s assume there is an approval workflow that you’ve created and on an approval, you want to send a push notification, in that case, within the workflow also there is a way in which you can do it.
Ganesha can you just add one sample workflow just to show the users how workflows work, so the difference is action flows work on the front end, workflows work on the server-side. So if you want to add a workflow, so let’s assume a simple approval workflow, so what will happen is you just start defining it over here, again here also you have push notifications that are available using which you could do certain things.
So Ganesha it’s okay, I think we need not really create a workflow over here we just wanted to deliver the message but I would like to thank all of you for attending this. I hope this was a really valuable thing. For the questions that we really couldn’t take at this point in time, I would love to connect with you offline, I am again punching in my email address for your benefit. So in case you would like to connect, we can do it. Thank you very much, everyone, I hope you all found this very useful.
Thank you very much!
Related Articles
