How to Build a Monitoring App with DronaHQ and InfluxDB 3.0
Session date: Mar 05, 2024 08:00am (Pacific Time)
DronaHQ is a low code app development platform for engineers and operations teams—it builds internal tools, AI-enabled apps, automations, GUIs, admin panels, dashboards, client portals, mobile apps, embeddable features, CRUD apps.
Its drag-and-drop UI enables anyone to create custom apps on top of their datasources. The platform is highly extensible, so developers can add JavaScript anywhere to transform data, import JS libraries, and extend UI components. DronaHQ allows customers to digitally transform their operations and streamline processes at speed.
DronaHQ now has an InfluxDB 3.0 connector! Developers can query data from the purpose-built time series database to build their own monitoring app, enabling construction of responsive internal apps and tools on top of InfluxDB.
Join this webinar as Shibam Dhar and Anais Dotis-Georgiou dive into:
- An overview of DronaHQ and InfluxDB 3.0
- Demo – learn how to use the InfluxDB 3.0 connector with DronaHQ
- Best practices – gain tips and tips from SME’s
Watch the Webinar
Watch the webinar “How to Build a Monitoring App with DronaHQ and InfluxDB 3.0” by filling out the form and clicking on the Watch Webinar button on the right. This will open the recording.
[et_pb_toggle _builder_version=”3.17.6” title=”Transcript” title_font_size=”26” border_width_all=”0px” border_width_bottom=”1px” module_class=”transcript-toggle” closed_toggle_background_color=”rgba(255,255,255,0)”]
Here is an unedited transcript of the webinar “How to Build a Monitoring App with DronaHQ and InfluxDB 3.0.” This is provided for those who prefer to read than watch the webinar. Please note that the transcript is raw. We apologize for any transcribing errors. Speakers:
- Anais Dotis-Georgiou: Developer Advocate, InfluxDara
- Shibam Dhar: Developer Advocate, DronaHQ
CAITLIN CROFT: 00:00
Hello, everyone, and welcome to today’s webinar. Super excited to have our friends from DronaHQ joining us today to talk about how to build a monitoring app with DronaHQ and InfluxDB 3.0. Today, we have Shibam from DronaHQ, as well as Anais, who’s part of our DevRel team here at InfluxData. Post any questions you may have using the Q&A feature at the bottom of your Zoom screen. And without further ado, I’m going to hand things off to Shibam and Anais.
ANAIS DOTIS-GEORGIOU: 00:40
So yeah, today we’re going to be talking about using DronaHQ for building apps on top of InfluxDB. So next slide. So as Caitlin mentioned, my name is Anais Dotis Georgiou, and I’m a developer advocate at InfluxData. And if those of you aren’t familiar with what developer advocacy is, basically, it’s someone who represents the community to the company and the company to the community. So largely one way that we do that is by providing webinars like this one to try and educate you about different resources that are available to you for working with InfluxDB. And that includes integrations and partnerships with teams like Drona so that you can leverage their technology to have no-code solutions for building applications on top of InfluxDB. Shibam, I don’t know if you want to introduce yourself as well really quickly.
SHIBAM DHAR: 01:31
Yes. Yep. Sure. And yep, my name is Shibam Dhar, and I’m also a developer advocate at DronaHQ. And since Anais already made you understood what developer advocacy is all about, let me just put a few pointers on it. If you have any questions, if you want to build something out of DronaHQ, you have some idea or some proof of context concept you may want to make it really happen, I’m the guy. You can reach out to me. And anything related to product, new updates, some relation building, community building, I’m the guy. Thank you, so.
ANAIS DOTIS-GEORGIOU: 02:06
So, the agenda for today is first, we go over introductions, which we already covered. Then we’ll also introduce our respective products. So, I’ll talk a little bit about InfluxDB and time series databases and time series in general and kind of lay the foundation there. Then I’ll hand it over back to Shibam, and he’ll give an introduction to DronaHQ. And last but not least, he’ll follow it by a demo showcasing how to build a dashboard or a dashboarding app for some data on top of InfluxDB. And then we’ll open up the webinar for any questions that you might have. Feel free to drop them in the chat as well as you are watching this webinar, and we will make sure to circle back to them at the end of the presentation. So next slide, please. So, before I talk about what InfluxDB is, I want to kind of just paint the landscape for talking about time series databases in general and kind of answer what and why do I need a time series database, because InfluxDB is a time series database. So, we’re currently living in the age of instrumentation, which means that we are really getting time series data from two different main categories. And that is the physical world and the virtual world. So, in the physical world, we are doing things like monitoring using sensors. And so, we use sensors, right, to digitize the state of any object or environment in the world around us. So, you could be monitoring just the temperature in your house or the velocity of a rocket or the concentration of certain chemicals in a batch reactor or maybe the concentration of light in deep-sea diving. So really, time series data coming from the virtual world is just a way of monitoring the virtual— the physical world, excuse me.
ANAIS DOTIS-GEORGIOU: 04:02
And then we also have data coming from the virtual world. We apply the same logic here, but to virtual concepts related to software development. So, we could be doing things like monitoring applications, infrastructure monitoring. And essentially, time series data has become popular largely also because of financial data. So, stock market data is a great example of time series data. But the one commonality between time series data in the sensor world or the virtual world, the physical world or the virtual world, is that users really want to understand trends over time, and they want their data in time order. Next slide. Sorry, next slide. So, some of the characteristics of time series data is that, maybe kind of obviously, every time series data has a timestamp associated with each point. And when we think about time series data, we usually think about it as existing in two categories. One is regular time series data, and the other is irregular time series data. So, a regular time series data is also referred to as a metric. And that type of data could look like, for example, in the healthcare space, if we were monitoring your heart rate, then heart rate would be the regular metric. And a cardiovascular event like an AFib, for example, or a heart attack would be an irregular event. But the interesting thing about event data is that if you perform an aggregation over time on event data, then you transform that event data into a metric. So, for example, if you were monitoring some equipment on an industrial floor, industrial IoT floor, let’s say, and you wanted to see how many times a particular robot has a fault, so you count the faults per day. Well, now you’ve turned this irregular data into a regular event.
ANAIS DOTIS-GEORGIOU: 05:58
And so, it’s important to monitor and visualize both your regular and irregular data and also use tools to be able to convert events into regular events. But we’ll also learn about how we can use DronaHQ to build dashboarding apps that can visualize both regular and irregular data. The other characteristics of time series data is that it exists in really, really large volumes and also that it’s in real-time and time sensitive. Another example of time series data and something that we are currently supporting is traces and logs as well for application monitoring. Next slide. So, one thing that is worth understanding and the takeaway here is that time series really touches every industry. So, we see time series in consumer and industrial IoT with manufacturing, and we want to do things like machine monitoring and maybe predictive maintenance. We see time series data existing in renewable energy where we’re looking at things like power consumption and production. But we also see time series data existing in software infrastructure. Within developer tools and APIs, you’re looking at how many times a user triggers a specific request, or you’re looking at the availability of certain endpoints. You’re also doing things like monitoring Kubernetes, and you’re monitoring your pods and your application. And time series data also exists in real-time applications, things like gaming applications, where you’re looking at game server monitoring, trends in gamer activity, and reducing latency, right, to provide the best gaming experience. You’re also looking at network monitoring and SNMP monitoring. And fintech, we’ve talked about a little bit already, but that’s kind of also an obvious source of time series. Next slide.
ANAIS DOTIS-GEORGIOU: 07:55
So as a result, time series is really emerging as a leading database category. Originally, we could think about relational databases existing, then we moved to document, which are also like time series, used for really high throughput, and also have adaptive schemas. InfluxDB has schema on write. But obviously, it’s a document store. And then we move to search databases. And those are really great for logs and other text-based type of data but can be really slow for time series. So, with time series, you want a type of database that is specifically built to handle time series data. Next slide. And the characteristics of a time series database is that obviously— sorry, I saw a comment that was a little concerning. Can everyone still see the slides? If you can see the slides, can you just go ahead and comment in the chat? Or Caitlin, can you see them?
CAITLIN CROFT: 09:02
Yes. I can see the slides. No problem.
ANAIS DOTIS-GEORGIOU: 09:05
Cool. Okay. So, it sounds like— I don’t know what’s going on with one person. Thank you so much for confirming. Okay. But characteristics of a time series database, obviously, it can handle time series data. Another is that it can accommodate really high write throughput. We’re talking millions of points with cardinality or dimensionality of 100,000. We’re talking also being able to support querying those large amounts of data and querying over really large time ranges as well. And then also, obviously, being able to be scalable and performant so that you can accommodate a lot of these requirements. Next slide. And I just wanted to also share InfluxDB has an impressive roster of well-known customers. We have Thermo Fisher, PTC, Cisco, IBM, Tesla, Nest. So, we have a lot of users monitoring their solar panels or their batteries. We have users monitoring their living walls or their indoor farms. We have a bunch of customers using InfluxDB to monitor their applications. Yeah. I’ll move on to the next slide. So, I want to talk a little bit specifically about the InfluxDB platform. Next slide. So InfluxDB is really three things. At its core, it is a time series database to handle real time series data workloads. But it also includes an API and toolset. So, we have really powerful client libraries that are built on top of Arrow Flight. So, they leverage Arrow Flight to be able to transport Arrow over network interface.
ANAIS DOTIS-GEORGIOU: 10:58
We also have a massive community ecosystem. We have a really big ecosystem around Telegraf. Telegraf is our other product, and that is our collection agent for metrics and events. And there’s a massive community there. There’s also a massive community associated with InfluxDB too. So, if you have any questions about time series, InfluxDB, leveraging Telegraf to pull metrics and events from a variety of different sources and write them to a different source with that tool as well, we encourage you to ask Telegraf. The community there is really special as well because we have over 200 plugins for Telegraf. The agent is plug-in-based. And so many of those, the vast majority, like 90% of them have been contributed to by the community. And so that’s a really fun place to be a part of. Next slide. But if there’s one takeaway or one goal for InfluxDB, it’s to enable organizations to make cost-disruptive decisions on really high volumes of time series data. Next slide. So, some other things I wanted to share about it is how it’s designed for time series analysis. I will talk about this in just a second, but it’s built upon the Apache ecosystem, and leveraging those technologies and building upon those technologies allows InfluxDB to be as performant as it is and really handle the really high volumes of time series data that a lot of time series use cases require. It’s also easy to share and easy to extend. So, we provide Docker and Helm charts available for InfluxDB. We have open-source versions for v2 available, and we have open-source versions coming for v3. Additionally, it is under an open-source MIT license.
ANAIS DOTIS-GEORGIOU: 12:56
And we also pride ourselves on contributing rightly to the upstream products for InfluxDB v3, all of the Apache tools that we leverage as a part of v3 so that we can make sure to be part of the Apache ecosystem and also benefit not only our product but any other products that are also leveraging those underlying tools or upstream tools so that we can make a more robust community across multiple products. Next slide. And so really some of the goals that we have is to increase developer happiness by reducing our Time to Awesome. So, what we call our Time to Awesome is just our time to adoption or our time to where you can start doing something meaningful with InfluxDB. It’s how quickly you can go from a proof of concept to production, essentially. And then we really try and make ease of scale and deployment as easy as possible and have that mind for scale so that you don’t have to focus on that. Next slide. So, I also wanted to take a moment to kind of just give us a reference architecture to give you a bird’s-eye view of the InfluxDB platform and ecosystem. So essentially, if you have any timestamp data, whether that’s metrics, sensor data, events, data from various devices, etc., you can use a variety of data collection methods and ingest methods to write that data to InfluxDB. You have Telegraf, which, as I mentioned before, is our collection agent for metrics and events. It’s plug-in-driven. You could just configure a single TAMA configuration file, and you can take advantage of buffering and caching so that, for whatever reason, InfluxDB or whatever data store you’re using Telegraf to write data to suddenly is offline, you can still collect those metrics and make sure that they will be sent and written to the right endpoint when that endpoint is back up. So that’s one advantage to using Telegraf.
ANAIS DOTIS-GEORGIOU: 14:56
Then we have our client libraries, and essentially you can— for v3, we have client libraries in Go, JavaScript, C#, C++, Python. I’m missing the other ones, but you can use a variety of client libraries to write data from any source that you have to InfluxDB, all while leveraging things like Arrow Flight for querying and Arrow in general. The Python client library for v3 also supports Pandas and Polars natively. So that makes that a great tool if you want to do any sort of ETL with InfluxDB or the data that’s in InfluxDB, because you can obviously pull that data out, return to Polars or pandas.DataFrame directly, and then leverage one of the countless Python libraries that exist for transforming pandas.DataFrames and Polars Dataframes within a time series context or perform your predictive maintenance or forecasting or anomaly detection. And then we actually store data within InfluxDB. And now you can query InfluxDB in either InfluxQL, which is a SQL-like query language that is unique to InfluxDB, or you can query it in SQL Now directly. And then last but not least, we do have a UI that allows you to perform some basic visualization, but it’s really just for exploring your data. But instead, you can use a variety of other tools to visualize your time series data. Today, we’ll focus on DronaHQ, but you can also integrate with a variety of other business intelligent tools like Tableau, Power BI is coming soon, SuperSet, and obviously Grafana. So, we really want to focus on interoperability with V3. And hopefully, this webinar kind of helps showcase that as well and how you can use DronaHQ on top of InfluxDB to build dashboards and dashboarding application, all while having basically a no-code solution. 17 please or next slide please.
ANAIS DOTIS-GEORGIOU: 17:10
So, I do just want to give a deep dive into the architecture for InfluxDB really quickly. So, it’s built on a variety of tools that are part of the Apache ecosystem, the first one being Data Fusion. So, Data Fusion is the query execution framework that allows us to deliver SQL querying to InfluxDB. Then we’re also built on Apache Arrow. And Apache Arrow is the in-memory columnar format for InfluxDB. And then our durable file format is Parquet. That’s also columnar as well. And so, time series data especially is really well suited to columnar data because it enables really cheap compression and allows you to do fast scans over your data so that you can deliver things like the global maximums and minimums over millions and millions of points of data over years of data. Next slide. And I apologize, that’s a repeat next slide. There we go. So, I want to talk about using InfluxDB just a little bit so that we can understand how we’re querying data from DronaHQ and writing DronaHQ as well. So, the first is just our data model. So, before you use InfluxDB, you really kind of want to understand it in general.
ANAIS DOTIS-GEORGIOU: 18:39
So, we have a bucket or database. Same thing. You’ll see different words for it in the documentation, but they’re equivalent. Basically, all data is stored in a bucket or a database. And the only unique difference between a database in InfluxDB versus that in SQL is that there’s this concept of a retention policy, and that’s the amount of time that you specify that data will exist or persist in that database. So, it’ll automatically expire after that time. And that’s a nice feature because quite regularly, when we’re dealing with time series data, we don’t really want to keep our data forever. We want to be able to automatically delete it. Then underneath the database, we have a measurement, and that can also be thought of as a table. It’s just a high-level grouping of our data. And then underneath that, we have a tag set. And these are key-value pairs of your data that usually contain metadata about your data. So, if we were collecting temperature data from rooms in an office building, a tag set might be a room name, and the value would be the actual room name of that tag set. And the field set would be the actual temperature value that we have. But in InfluxDB, once you write that data to InfluxDB v3, tags and fields just become columns in a table, so they’re the same thing.
ANAIS DOTIS-GEORGIOU: 20:03
Next slide. But one thing to note is that whether or not— however you write data to InfluxDB, whether that’s Telegraf, using client libraries or API, etc., you’ll always be writing data as line protocol. So, all those tools will basically just help you convert any other data format that you have to line protocol because that’s our ingest format. And it looks like this. Basically, we have our measurements with a space—or comma—separated with our tag sets, that are also comma-separated with a space in our field set, and then finally, our timestamp in Unix format. Next slide. So, a couple of things to consider about your schema in InfluxDB 3.0 is that there are a lot less schema considerations than there are for InfluxDB 2.0 and previous versions. InfluxDB is schema on write. But one benefit about 3.0 is that it eliminates cardinality restraints. So, you really don’t have to think about, “Will you want to make a tag versus a field?” like you did in InfluxDB 2.x and 1.x because they all just become columns in a table and are treated essentially the same. But you do want to think about, “Don’t put duplicate columns,” and also, “Try and maintain a 200-column limit.” And then likewise, you want to avoid really wide schemas. In other words, having 200 columns.
ANAIS DOTIS-GEORGIOU: 21:35
And you want to avoid for sparse schemas. So, you want to kind of have homogeneous data in the same measurement or table. In other words, if you have one column or one field where you’re collecting that field at a nanosecond precision and then the other field you’re collecting daily, then if you put those in the same table or same measurement, you can imagine that you’re going to have a lot of null values for the field that you’re collecting on a daily rate. So, in that case, you want to consider putting that data in a different measurement. And then you want to design your columns for query simplicity. You don’t want to be using names with a lot of special characters because eventually, when you query your data, you’re going to have to be querying with that name. So, you might as well make it easy on yourself. Next slide.
ANAIS DOTIS-GEORGIOU: 22:27
And really quickly, this is how you might write data to InfluxDB using, for example, the Python client. So, what you would do is first import your client library. And then what we’re going to do next is actually initialize that client by providing the host that we’re running InfluxDB on - or the URL - the org ID, the token, and the database name that you want to write data to. And then we provide those credentials when we initialize the client. And then we can just use something like the point method to write data directly to InfluxDB. And then in the point method, you would specify your tags with a comma, your fields, any additional fields that you have, your timestamp, etc. And then next slide. This is kind of the boilerplate for querying data with InfluxDB. So again, we would import our library. We would initialize our client. And then we would actually go ahead and— let’s say we wrote a point already to query. We would then create a SQL query. So here, we’re just saying, “Select all the data from a particular table.” And then we pass that query into the query method where we specify the language, SQL, and also the mode. So here, we could also specify, for example, Pandas as a mode or Polars as a mode and return a Pandas data frame directly instead. Next slide. And Shibam, I’ll go ahead and hand it over to you.
SHIBAM DHAR: 24:07 Awesome. First of all, thank you. And as for this whole informative walkthrough and how the InfluxDB is actually working and how to write the data query and everything about it, really, it was totally informative, and thanks for sharing it with us. So, before I start, let me tell you about DronaHQ. So, you must have heard about what is actually about low-code since the low-code has already taken off in the market. And most of you are familiar or aware of the concept like with DronaHQ. So DronaHQ is a low-code developer toolset to build internal tools, custom platforms, and AI. Basically, it is a development platform to build custom applications for your web as well as your mobile apps. And when I talk about mobile apps, yes, it is available in Android as well as iOS. So, it helps you to understand. It reduces the overall engineering hours to build the whole application to a very considered amount of time. And without knowing more about the front end and frameworks, you can just move ahead with building your apps at a very high pace. So, with DronaHQ, you can build custom portals, as I mentioned, and AI-powered apps. When I talk about AI-powered apps, we have different kinds of integrations like OpenAI, which helps you to create AI-enabled apps, as well as when you are developing an application, in between those stages, the DronaHQ provides AI support in terms of writing query, in terms of writing JavaScript for transformation, and also to understand different types of errors and codes.
SHIBAM DHAR: 26:08
Okay. So now, while the low-code market has grown rampantly in the last few years, low-code has been around for decades, and so has DronaHQ. Whether you are a full-stack developer, whether you are a back-end developer or a front-end developer or just beginning your journey with developing, DronaHQ will help you in all stages. If you want to build an app, just drag and drop and put it on your screen. If you want to get some data, you can integrate through several available databases, APIs, and more. And if you want to make it available to all of the other people or your peers, you can make it live and make it publish too. And DronaHQ has been used with the teams around the globe. And people are using our platform to create application, which is empowering their employees, their customers, their vendors, and much more. Okay. So how does it help? Now, I would like you all to understand that DronaHQ is totally dependent on four main pillars. The first one is about design. I want to talk about design that all the controls and the UI are already available there. You get 100-plus of controls. You can just go through it, you can drag it and drop it on your screen, and everything will be there. And the visual development is actually the most crucial part when you are creating an application, since you want to showcase each and everything, whether it’s a report, whether it’s a table, whether it’s input also. You can also get input from the user too.
SHIBAM DHAR: 27:56
The second part is integration. Now, when I talk about integration, I want you to understand that DronaHQ provides facility to integrate REST APIs, GraphQL, GRPC APIs, and a combination of databases and third-party APIs over 50. And the third will be customization. So, customization and flexibility are, I personally believe, where DronaHQ aces among all other platforms because from the minor detailing, like adding your own custom CSS to your control or designing your own controls even, DronaHQ provides that. You can add your custom code, you can add your JavaScript, and also you can add your own libraries on DronaHQ with additional features like UI, Teams, and already available product. And fourth, the deployment. Well, deploying across devices is a very crucial part after someone has built the project. And once you are done with creating your application, all you have to do is publish the app. And once it is published, you can share it through web. You can share it through mobile apps and Android as well as iOS. And also, you can share it as a public link. So, there is an option where you just toggle it on, and a public URL will be provided to you. You can share it with anyone.
SHIBAM DHAR: 29:26
But not only this. You also get to the feature of embed. So, in case you have, let’s say, your own website and you want to embed a small application which you are creating on DronaHQ, yes, that can be done also. And this embedding and sharing of apps is not totally publicly or without any authentication. We do provide secure embed and also other authentication methods which users have to go through first in order to access your app. And the fifth part is, which I believe that it’s more developer-oriented, like having an iteration and maintaining your app. So, let’s say you are working with your application, and the next day, you are doing some more addition to it or upgrading it to it. But if you want to go revert back to a different version, that can be done too. So, it is easy to maintain, and at whatever time you wish to upgrade it or degrade it, you can do it from the platform itself. Okay. So, who can use DronaHQ? So, in front of me, you can see that we have developers, database engineers, product managers. So, they are the very people who are actually using DronaHQ. And what can you build? So, in front of you, you can see that all these UIs there. But if I explain this to you in the slide, what I’m primarily focusing on is that DronaHQ can be used primarily by, let’s say, database admins as well as backend engineers and developers.
SHIBAM DHAR: 31:05
Now, why I talk about database admins is because when you have so much of data, DronaHQ provides you a platform to analyze those data, to visualize them as a dashboard, to create some informative outcome of all those data present, and that without writing so much of code. So, all you have to do is just integrate, write your query, and that’s it. Just find the data. And second part is about backend developers and engineers. So, backend developers, what I personally believe that when they want to do some proof of concepts or they have an idea, they want to make it live and a small project. DronaHQ is your platform. You don’t have to go through all the custom UIs. You don’t have to go through all the libraries available. You have to just integrate it. You have to write your query and make it available on the screen. And yes, of course, I will show you how it will be done in the coming demo, where I will showcase the whole monitoring app. And yeah, moving on to the next slide. Now, I’m talking so much about integration and getting the data, so how it is done in our platform. So basically, we provide connector. So, in front of you, you can see that there’s a code versus connector, and it’s a very simple code snippet there like import requests, data, and prior response. So, writing custom codes for APIs and can be a hassle. You have to figure out how to handle different scenarios, whether it’s the error, whether you are getting the response, how much response you want, and which URL you have to hit every time. Different write points and different query points.
SHIBAM DHAR: 32:53
But with DronaHQ connectors, all you have to do is mention and specify few important details like your host, your database team, your database authentication token, and test your connection. It is very straightforward, seamless, and error-proof. Why I talk about error-proof is because whenever you get the error, it will showcase you that what type of error you are getting and how you can also handle them. And the whole testing of connection— since you all guys are very much familiar with databases and working with it, there can be users in the very same company with different authentications. So, when DronaHQ does a test connection with the end URL or, let’s say, host, it takes on a very basic authentication or very basic permission. And depending on that, it will send us the response, yes, whether it is inaccessible or not. Once the connector is ready, you can add your— depending on the access given, they can add write points or do queries too. So, before I move forward, let me quickly show you how this actually looks on DronaHQ. Okay. So, this is my studio DronaHQ account. There are all these apps. The very simple thing is I just go on the left-hand side, click on connectors, and right here. So, once I click on plus connector, you have all these connections available. As I mentioned, 50 plus are there. So, in case if something is not there, you can also add as an API. So, I’ll show you how it is actually working for our InfluxDB.
SHIBAM DHAR: 34:56
Right. So, I just mentioned here the InfluxDB URL, the DB token, and database name. Make sure that the whitelisting of IP is done. And also, I mentioned that v3 is here. So right. So DronaHQ is also saying v3 is right here. So, click on v3 and do a test connection. Connection successful. Now, once that’s done, you can add your own queries, write a query right here, and you can do write point or run query point. We will get back to here again when I was showcasing you the whole demo use case. Okay. So, let’s get back to our— so what we will demonstrate in this demo session? It will be a quick demo session where I will showcase you first integration. Yes, I just showed that now, but I’ll show you how the step-by-step process is there and how you can just get the whole idea. And next part is front end. So, we will build a quick front end, and you can—we will see that, within a few clicks, doing a few drags and drop, doing a few clicking to make your UI more vibrant with colors, to all be visual. And lastly, data binding. So once the integration is done, once the UI is done, now the final step will be integrating the data, to bind the data, which we have— we are fetching from our database to our UI. So, let’s get on to the demo, I guess.
SHIBAM DHAR: 36:38
Okay. Okay. Awesome. So, let’s start with the connector. And I’ll see that I want to do an Influx TV connection. Let me quickly fetch some of the details. I’ve already saved it in my note. I’ll just paste it here. In case if my skin is not visible, or any of the error is there, just do let me know in the chat. I’ll keep on checking the chat too. Also, if you have any queries, just to let me know. Awesome. Okay, so let me fix the token. So, I’m sure that you guys are aware that how to get the DB URL is just in the URL of your account, and the InfluxDB token, you can find in that create an API token. As simple as that, just create an API token, give it request, whether if you want a full request or a half request, and database name. So, it is totally dependent on what type of database name you are providing. So, my database name will be DronaHQ. And I made sure that I’m using v3 version, because for v2 and v1, since it’s not supported, but it’s still there on DronaHQ. Just giving additional info on that. And doing a whitelist, [inaudible], so let’s do testing. Okay. So, you see that— you saw that there is an error, which showed me that there is the extra space provided there. I mean, you can see again.
SHIBAM DHAR: 38:24
And if I just do a test connection, you can see that this failed due to name resolution fail for the targets. So, I can see what exactly my error is. This part is my error. Now, if I just zoom in here, you can see that there is a space. There’s a blank there. So, as I mentioned earlier, that you can also handle your error very easily on this platform. I’ll just remove the space and do test connection. Awesome. So, connection successful. You can go ahead and add your connector. So, let’s see. Test A, building, Influx. Voila. That’s it. Our connector is ready. It is ready to add query. Now, adding query is very much easier. In the actions, you get two points, writing point and run point. So, I’ve already written the database and it is already provided there, so let’s do a quick run query. It will be select start. Whatever you usually write on the whole coding part, you just have to put the query right here. So, select start, from, and let me get the right name. Get, all, reading. Get all read. That’s it. I mean, it just took me two to three clicks and two to three pointers to get the whole query done. And you can see what type of data we have. We have two types of building, and we have four types of sensors. So, these are the tags for the measurement. And these are the data, electric uses. We have occupancy. We have temperature, water consumption, and as well as time. Awesome. So, let’s save it.
SHIBAM DHAR: 40:47
Okay. Now let’s add another query. Okay. So, the next query, let me copy it from my note and then I’ll explain it to you guys. Okay. So, this is the query, not in the write point. I’ll show it in the run point only. So, what it is doing, it is getting me all the summation. The sum of the water consumption as the total water consumption and the whole schema of the whole data piece and grouping it by building ID and sensor ID. So, depending on that, I’m trying to create an analysis or report what is the water consumption in both of the building, right? So, I’ll just do it in a run query. Okay. So, you can see that building A on sensor 2, the water consumption is this much. On building A, on sensor 3, this much. Building A, on sensor 1, this much. So, I can just put it here like the water consumption. Okay. That should work. So similarly, I’ll add two more sorts of analysis which will be available on our old UI. And next, let me copy. So, you guys must be knowing about it. Still, I’ll explain what is exactly about it. So, select building ID as building name, sensor ID as sensor name. And I’m finding the mean of the whole electric usage as average electric usage. And this will help me to get an understanding the average electricity being used in each building as well as respective to each sensor. I’ll just do it at a run query point. Awesome. You can see that both the buildings with their distinctive sensor 1, 2, 3, 4 for each of the building are showing me the average electricity consumption. So let me give it a name. Average Electric.
SHIBAM DHAR: 43:29
Okay. Water consumption, electric consumption. Let’s add one last one. Yep. This will be like— let’s say I want something for my bar graph also. Okay. So, what is this doing? It is actually giving me water consumption, the mean, and mean of temperature with respect. And it is just divided by building ID. So, each building will have mean temperature and a mean water consumption. So, let’s put it in the right query. That’s it. The building average temperature is this. Average water consumption is this one. So, I’ll leave it like that. Okay. Awesome. So, our integration is done. Our first part is done. Now let’s move to our second part, the UI building. Before we build the UI, let me show you how the UI will look exactly. I mean, this is the UI we are going to build. You can see that this is a table which is showing me building. I want you to focus here on a few different pointers. You can see the occupancy here is not showing me 0 and 1, right, but it is showing me as a toggle for how it is done. It’s done on the DronaHQ itself. And then in the time also, it is not showing me the basic timestamp. It is actually converting it and giving it to me in the 24 hours. But that is also done on the UI itself. It’s not being done in the integration part, neither in the backend part.
SHIBAM DHAR: 45:21
And here we have line chart, here we have bar chart, and there we have this pie chart, okay? And also, you can see that this time is also coming, and it is showing that it’s Tuesday, March, and this is actually showing that what time is it there. So, let’s build this now. So, this is a blank—you can say almost blank, of course, creating a new app. So how to create a new app? If you have this wonder, just click here, apps. Click on this plus icon, and click on this blank app. Before we click on this blank app, you see that there are different templates available here like approval, queue, inspection, customer. And all those templates are already there. You can click on view app demo. It will showcase you how it will look like, and you just have to remove the data and integrate your own data. That’s it, right? So blank app, provide the app name, description, template, and you can pick up icons for your app and create the app. That’s it. Nothing more. So, the blank app will have this whole builder. And here I’ve added a few of the headings just prior to it. So, we will add different things to it also. So, let’s do with these changes like this. So, if I just want to add, let’s say, two days or current timing, I’ll just do this. That’s it. So, these are some of the variables, some of the inbuilt functions which DronaHQ provides.
SHIBAM DHAR: 47:16
So, in whatever position you are in your app-building stage, you can find these functions very useful. And if you are wondering where to get all these functions, yes, of course, they are all available in our docs of DronaHQ. List of functions are there, list of variables are there which you can access it at any point of your app development. I’ll just do this. It’s Tuesday, March, and it is showing my current timing. Awesome. So, in the back, let’s do some quick color. I mean, how does it happen? Let’s say this is a normal heading and I want to do a color. So, either I can click here and do it from my color picker, and also click here, and I have all these palettes, background and front, message and tags like action error. These are the few tags which we already provide. We’ll not put much of timing in these things. I’ll just quickly get the number right here. I’ll write here. Okay, cool. Similarly, for this. Done. Similarly, for this. Done. Where else? Okay. So, we have here also, this container. Now, I’ll just click here, and this is the back container. This is the property. So, in this property, you can find that background color is written. It’s just very much written everything there. You just have to find it and put it up there, so. Then you just pull it down. That’s it.
SHIBAM DHAR: 49:06
Now let me get the final color, the dark color. So, I click in the back, and then I go to the body. And then the screen background, I’ll just select all. Put it right here. That’s it. Cool. So, we are done with the UI building. Not yet. We are left with the crucial components. So, what we’ll do, we’ll click on controls. I want you to focus here. So, the first thing we want is the table grid. Table grid right here. Drag and drop. That’s it. The table grid is right in front of you. Now, before I integrate the data, let’s do some quick changes in the properties. So, I don’t want the filters. I don’t want download button. I don’t want filters button. And refresh is also not required since it is not— since we are not doing a quick editing to it. Okay. So that’s there done. So, data query. Okay. Before I integrate this particular— I’ll just quickly refresh my connectors since I have added a new connector, if you remember, just now. So, I’ll just quickly refresh it. So, you can find that all these connectors and the queries are there. Awesome. Okay. So, before I move forward with all these containers right here, let’s add the data to it.
SHIBAM DHAR: 50:56
So, on the right-hand side, you saw that, okay, these are all the properties. Now, what about this one? This one is data, data integration. This is a dummy data, which is actually showcasing you that if you have a static data or if you want to put some data, it can be in this particular format. What I’ll do, I click on quick select. I click on connector library, and it will open me up this one. And I’ll select from the library. So, what is the name of my connector? This is something as building. Now in this library, I have these added queries. So, I’ll select get all, read. Okay? This is my query. In case you want to do some changes in the query, you can click on edit right from here. And this is like doing a transformation, like how to do a basic transformation by writing JavaScript. As I said earlier, that you can use the— in every point of your development, you get the feature of asking the AI. So, if I just write it here like, “Write me a code to transform Unix to,” let’s say, “DDMMYY format.” I’ll just click on ask. It will give me a quick— it just took a few second and it will suggest me an answer like what you can use it. So, you can use the code, you can copy the code, you can discard it. But it’s not required here. I’ll show you why. So, I’ll do simply test and save. Okay. Voila. You have the data right in front of you.
SHIBAM DHAR: 53:01
Now, on the name, you can do simple changes. If I do simple changes right here, it will show me that building ID is now building. The underscore is removed. So, you can similarly do for all this thing. You can see that right here there is an option for format data. If I click here, column name, let’s say Occupancy. Column type. These are different types which you can enable for your column. So, it is not a text, not a number. I want it to be a toggle. Okay. Now add more. So, remember I told you about the time, right? Time, it will be actually date time. No, it will be time. Okay. What do you think will happen? Let’s see. Click on finish. That’s it. Very easy, very simple, and very straightforward. All you have to do; you need to understand what type of data you want to showcase. That’s it. So, I mean, building a monitoring app, the first part is to visualize your data. So, visualizing your data is right here. Whatever is on my DB is right in front of me. So, the first thing is done. And you can see that it is showing AM, AM, 6:00 AM, 12:00 PM, 6:36 PM like this. Awesome. Okay. So, what I’ll do next, I’ll add some analysis and report, right? So, let’s go with Chart. I’m simply searching Chart. So, under Chart, I have different options: charts, line charts, horizontal charts, and all this available already there. So, let’s start with— I have pie chart right here. Something happened.
SHIBAM DHAR: 55:15
Okay. So, you see that there are small features which— there are so minute features which help you to develop in every stage. I mean, if I just put it a little bit down, it is automatically configuring its whole width and length automatically, right? So, if I just drag it and put it right here, and this much is only there. Let’s see. Okay. See, it molded into that shape itself. So similarly, this is our free-flow editor, and you can know more about it from our documentations. Okay. So, what else do we need? We need a line chart. So, line chart, I want it to be of this much.
SHIBAM DHAR: 56:17
Okay. And finally, I want a normal chart. So, I think it should maintain this much of the area. Cool. So, what do you think I’ll do next? Simply click on data, click on quick select, and click on connector query— no, connector library. So, if you think what is connected query, it’s nothing different. It’s just that if you are not— if you don’t already have configured your queries, you can configure it from there. Queries are not visible there. But right here, you can see all the queries. So again, build. Okay. What is it? So, for the bar graph, I have average build status. Okay. So, it is showing in red, but it is not actually an error. It’s just that whatever the data DronaHQ is getting, it is not yet able to understand on what axis it should show or what legends it should show. Right? So, what I’ll do, I’ll go to its property. I’ll go right down here. And in the X-axis, I’ll select building ID. Right? And on the Y-axis, I’ll select, let’s say, average temperature as well as average water consumption. Okay. Okay. Well, I’m good, I think. Yep.
SHIBAM DHAR: 58:08
So, do I need to do some color changes? Let’s see. Okay. Quite dull to a nicer color. Cool. So right here are the legends you can show in the X-axis or Y-axis, like axis title. I don’t want to show that. Y-axis title, I also don’t want to show that. You see that the whole title is gone. So, all these steps, you have to write and code and everything you have to do. But on this platform, all you have to do, you get the toggles, you get the listing, you get the additional click and drop and select. So, legends, I think— okay, so we can provide the legends. Done. That’s it. I mean, this is done. Don’t go, “How is it looking right now?” I’m pretty much sure when I’ll do a preview, it will look just the way we want. And let’s do pie chart quickly. So quick-select connector live query. So, in the pie chart, what do I want to show? I want to show water consumption. Okay.
SHIBAM DHAR: 59:59
Okay. You see that? If you have this question, you want to wonder, why is it not showing anything like error? We just showed it earlier. So basically, in the data section, if you are well versed with plot, we also provide the plot part. So, it is a very hard-coded manner written that values are this and this and that and the labels are this, but we will not be using plot. We will use UI form. Now it is gone, right? So, I’ll click pie chart, and in the labels, I will do building ID. Okay. And right here, it will do water consumption. Okay. So, moving on. I think that’s it. Good. Now, finally, the line chart. The line chart will also work in a very similar way. I’ll quickly show. Click on connector library.
SHIBAM DHAR: 01:01:14
So, what is remaining? Electric consumption is remaining. [inaudible] can save. Please select X-axis and Y-axis. Okay, I’ll do. I’ll do that. So, what do I want here? Sensor name. Let’s do it. And Y-axis will be average. Voila. That’s it. So, no? No, not required. Okay. So, I mean, it just took a few minutes, and let’s try and preview this control. The whole application, if I just preview it now, you can— let’s see what is happening. Awesome. We have a monitoring app right in front of us, and it is showing me all the details. Building A, this much is average water consumption. This is the average temperature. This is water consumption. This is the percentage of the water consumption and all this thing. Awesome. So okay, now it was all about query. And I’m very glad to say that with this, the whole monitoring app building is ready. Now, the last part, if you remember, is that the fourth [inaudible] is just to publish the app. Now, this is very important for the developers who actually want to create building the applications, is that writing a release note. So, let’s see. Monitoring. Monitoring. So, it will save this version of app with 0.01. So, 0.01 is the version of this app. And I just click on Publish. Let’s wait for a few minutes.
SHIBAM DHAR: 01:03:30
And with this end, I’ll also put a small additional info for InfluxDB user since you guys are here from the start. It is quite interesting. So, let’s wait until now. Okay, so the app publishing is done. So, what it means, that this particular app is live. And if I just click on share, right, the first one is adding the users. So, if you have a team, if you are building a project, you can add your team members right from here. If you are confident or you have built a small proof of concept and you want to share it with, let’s say, someone for some review purpose, just click on Enable Public Access and copy this link. I’m already on incognito, so let’s do it. What will it show? Let’s see. Let’s see. Okay. So, a small DronaHQ loading icon is there and taking a bit of time. Okay. Let it load. I mean, frankly speaking, how long will it take for a developer to build this whole application and also make it available for others to make it for review purposes? And we have public URL configuration, routing URL, embed configuration. I mean, this is actually very much crucial. You have iframe, JavaScript, code. I mean, you have the whole— let’s say you are building a React.js project. And at the end of this project, you want to showcase the whole monitoring app. Just copy this and paste it there. The whole app will be visible right there. And then we have code generator embed settings. So, you can put some description.
SHIBAM DHAR: 01:05:21
Okay. So, with this, I’ll tell you about the last final tip, which I just mentioned earlier. So, if I come to connectors, I mean, since you are using InfluxDB, you know that either you have to write line protocols, right? But what about on DronaHQ? You should wonder. I mean, so I haven’t written the writing of new query, but there is update consumption, let’s see. You see right here. What is this? This is actually a JavaScript. This is actually an object, which is following the same trucks or the same method. You mentioned measurement, you mentioned tags, you mentioned the fields. But it’s in the object format. So, what is happening here actually? You mention the building ID. You provide the sensor ID. You can provide this all data as a variable. So, whatever I put it right here, it will be put— I mean, let’s do one thing. I’ll for now remove the timestamp to showcase you. So, let’s say building A and for sensor 1, okay, the water consumption is [inaudible]. And electricity consumption, let’s keep it a number, which we can say. So, you can do it right from here. You see that? You see that? Response is 200. Now it’s the judgment time, whether it’s actually happening or not.
SHIBAM DHAR: 01:07:17
Energy consumption. Oh, sorry. So, 555. It’s right there. Awesome. Thank you, guys, for watching this. And I guess you understood what is actually happening. Let’s move back to our slides and give it an end very nicely. Okay. Okay. More resources. Yes, this is very much important, guys. If you are thinking to work with DronaHQ, let me tell you, you get a 30-day free trial. And free trial is not just you get simple and very basic accessibility. No. You can actually do secure embeds, you can try out authentication, and much more. So, on a very business oriented DronaHQ, you get it. You get to work on it. You can build production-level applications. And DronaHQ documentations, yes, these are the documentation. You can just go to the docs.dronahq.com. You will see that there is a dedicated documentation for InfluxDB. And also, this monitoring app, the crux about the monitoring app is written by [inaudible] also being live. You must check that out. And if you want to drop right now after this session or during this session, you can scan this QR code, too. Okay. Awesome. Thank you, guys.
CAITLIN CROFT: 01:08:57
Awesome. Thank you. I was on mute. Thank you, Shibam, and thank you, Anais, for an amazing presentation. Anais, I know you were in there answering a bunch of questions. Are there any questions that you would like to highlight live with everyone? Are there any questions that you noticed for Shibam? Oh, you’re on mute now as well.
ANAIS DOTIS-GEORGIOU: 01:09:24
The only questions I noticed was really just about performance in InfluxDB v3. And so, I sent that link out to everyone. It should give you some ideas of the type of throughput that v3 can handle. And then as far as sample rate is concerned, you can write at a nanosecond precision, and 1.x and 3.x can handle that. So, it’s still the same. We still support nanosecond precision. And then v3 open-source that you can install on your own server. The open-source version will be available probably sometime in the summer for 3.0. But there is a clustered version that is available to you now, so it just depends on your requirements. So that should be answered. And then we also have— so you can have up to 200 columns or up to 200 fields and tags in one table or measurement in InfluxDB. And then you can have so many— I don’t know if we know what the limit on measurements in a bucket is. So that’s not entirely clear yet because, I mean, v3 is relatively new, so we haven’t entirely really explored all the limits of what it can handle. But again, I encourage you to take a look at that benchmark because I think it’ll give you the best idea. And then as far as understanding about data storage and more about the schema, I would encourage you to go to our docs, our serverless docs.
SHIBAM DHAR: 01:11:20
I’ll just add one thing in this, Anais. Since you are talking about limit and understanding the benchmark, like how much measurement and tags can be provided. So, for the viewers, I will say that no matter how long the data you have, the number of data you have, you can easily turn it into a pagination. Since it was just— we were working with 12 to 15 data in these particular use cases, like Anais has mentioned, you can also extend to a 200 data. So that 200 data can also be managed very easily on a very few simple clicks, like just toggling on the pagination on the table grid control and related to all the data— it can be found on the docs.
CAITLIN CROFT: 01:12:12
Thank you. Thank you both. And I just have one last question for the two of you. Since you guys have been working together on this integration using DronaHQ with InfluxDB, are there any final tips or tricks that you wish the community knew about using these two products together?
ANAIS DOTIS-GEORGIOU: 01:12:34
I would just say, in general, with InfluxDB v3, we’re really focusing on interoperability. So, I’m really grateful to DronaHQ for demonstrating how we can use other tools alongside InfluxDB so that you’re not just reliant on InfluxDB as a one-stop shop for all of your needs, and you can have that opportunity to use a tool like Drona if that meets your use case.
SHIBAM DHAR: 01:12:59
Right. And I’ll also put forward this particular point, which I also mentioned in the session is that since we got the information about the v3 launch— and no doubt, we were equally very much excited about how the v3 will exactly work on our platform. And we found a way to actually write the whole schema, write the whole database in an object format, which under the hood converts it into the line protocol. And I believe it will widen the range of the people use cases. They are not only limited to line protocols. They will be able to write the whole measurement in the JavaScript format. So, I think it is a very good tip which people should implement on there while doing a write point in the application itself.
CAITLIN CROFT: 01:13:55
Awesome. Well, thank you both, Anais and Shibam, for presenting today. I know there were tons of questions, so I really appreciate you both answering them and giving a really fantastic overview and demo. For everyone who’s still on the call, thank you for staying on. I know we’ve run over a bit of time, so I appreciate that. If you have any further questions, everyone should have my email address, so feel free to email me. And I’m happy to put you in contact with Anais and Shibam. And once again, this webinar will be available later today or tomorrow morning. And I hope you guys have a great day. Thank you.
[/et_pb_toggle]
Shibam Dhar
Developer Advocate, DronaHQ
Shibam is a passionate developer advocate at DronaHQ and he specializes in databases and low-code solutions. He enjoys creating real-world proof-of-concept scenarios that focus on showcasing the power of low-code development. He spends most of his days providing insights through blogs posts, video guides, and webinars.
Anais Dotis-Georgiou
Developer Advocate, InfluxData
Anais Dotis-Georgiou is a Developer Advocate for InfluxData with a passion for making data beautiful with the use of Data Analytics, AI, and Machine Learning. She takes the data that she collects, does a mix of research, exploration, and engineering to translate the data into something of function, value, and beauty. When she is not behind a screen, you can find her outside drawing, stretching, boarding, or chasing after a soccer ball.