DEV Community: Indeema Software

Giving a presentation with perfect UI/UX design

Indeema Software — Tue, 15 Oct 2019 14:23:38 +0000

Introduction

Every single one of us gives presentations from time to time. What can be difficult about creating a couple of slides with great UI and nice content, right? Well... not really actually. In real life, things may get difficult.

You want to cover the whole topic and give as much information as fits on a slide. Then you go to Google to find some awesome pictures, and finally, cover it all with some fancy animation. And here is where things start falling apart: how do you balance all this stuff?

Take our helping hand, as we are here to show you how to create a presentation with both perfect user experience and user interface. Let's find out how to create perfect UI & UX design in a presentation.

Original article - Giving a presentation with perfect UI/UX design

Main principles of perfect UI/UX in presentation

1. Your personality

This article is not about public speaking, or how to sound great. Instead, we'll concentrate on visual and UX design of presenting.

But the main thing to remember is that your presentation is you. Think of your personality as a part of the presentation as a whole. Your voice, facial expressions, gestures, clothes matter. Do you want to be the center of attention, or should your slides attract the audience? Should your colorful clothes and bright lipstick grab the attention, or do you want listeners to concentrate only on your slides?

2. Right Place, Time and People

There are a few points from marketing which you should consider while making your presentation. Use Market segmentation, analyze the target audience and try to create user personas. You don't have to go deep with this, but at least try to understand the needs and behaviors of your listeners. This will help you with setting general style, choosing pictures and templates, color schemes, etc. For example, there is a huge difference in designing slides for iOS developers' conferences, business proposal or meet up for graphic designers. When you pitch your startup idea, your UX design in presentation will look different as well. Same applies to giving presentations at conferences.

3. KISS and Less is More

Slides work best if you keep them simple rather than overcomplicate. Emphasize every part of your slide, and you lose the user's attention at all.

How to ruin your presentation and make slides hard to understand? Do the following:

Overuse animation
Add lots of pictures
Don't forget about huge paragraphs that are hard to read

What your users see are different attention catchers that compete for priority. Keep them to a minimum to draw the attention of more users. So what's the secret? Keep it simply stupid: make the presentation design clean and to the point.

So let's see how it works:

| | |
| ** Do** | ** Don't** |

4. Use white space and play with user attention

Whitespace is not white parts of your slide. Whitespace is any section of a slide that is free of text, images, charts, etc. or simply space around these objects. Use it, and your presentation will look less crowded and more easy-to-read. Also, whitespace helps to separate content into logical blocks.

Don't place all the text from your speech on the slides. Most people just don't read it. Concentrate on the main points: 3-4 sentences will be OK. It's ok to put only 1 sentence, few words or just one picture if they are very important. You can also do it to achieve the maximum focus of listeners.

Typography

Picking the right typeface is probably one of the first steps of creating a presentation.

Font types

First of all, select only well-readable fonts. Of course, you can use some experimental ones or spend a lot of time finding the best one to suit your slides. But if you want to play safe or you don't have time/desire to do it, here are time-proved fonts with the best readability:

Helvetica
Poppins
Open Sans
Verdana
Roboto
Lato
Futura

Create your font-system for the presentation, but don't overdo it. One-two fonts will be enough.

And last font hint

Never use Comic Sans and don't graphically modify the text. You can use bevel, drop shadow, emboss and outline, but you rather not.

These font styles are outdated and their star time passed around 1998.

Images

Use high-quality images with a big resolution. Don't steal them and never use photos with watermarks in your presentation. I bet your listeners will notice nothing except watermarks or pixel-detailed photos and will giggle instead of listening.

There are several websites with stock photos that are free to use. I use several of them

Also, try to avoid using images as a background for text. Sometimes it can work very well, but in most cases, it just lowers the level of readability. If you want to go with images as a background, then be ready to spend some time on photo editing and to use masks, shadows, and gradients.

Colors

Picking colors for your presentation is not rocket science. The main point is to pick the colors with adequate contrast. Complementary pairs such as red-cyan, green--magenta, and blue-yellow will work well for sure.

Concentrate on two or three colors for contrast elements and keep the main textual content black (or dark grey) for light mode and white for dark mode. Keep in mind that paragraph text should always be in one color. Pay attention that usually projectors make colors paler so light grey text on a white background will not work at all in this case.

Slide composition

Don't overload the slide and try to define the main accent object. Arranging it on Golden Ratio always works well. Divide the space into three equal sections horizontally and three vertically. Also, don't forget about symmetry and equal whitespace for borders. Rearrange main content blocks to align with this greed, so you can keep the audience's attention. Similar slides make them feel bored and tire eyes.

Conclusion

Treat your presentation as a visual object. A bit of marketing research on your audience, font system, color scheme, grid composition of elements and whitespace will make magic. But always remember that you and your personality make your presentation work. CrEATe!

How to create IoT startup: Step-by-step guide

Indeema Software — Thu, 19 Sep 2019 08:08:59 +0000

This time, we're going to dive in the ups and downs of IoT development with a step-by-step tutorial. Real-life example, no theoretical "maybes", and lots of experience included. Quick references to related articles as a bonus.

Original article How to create a startup: IoT project from idea to production

Overview:

Shape idea into set of goals
Find potential users
Find development team
Prepare technical specification
Design the product
Create a prototype
Start software development
Create 3D model
Start beta testing
Launch MVP
Start production

Before we start

It's high time for industrial revolution #4, and you shouldn't miss this opportunity. What is the right way to take part in this wave? Since we already wrote a basic article about making idea become a real product, this time we decided to write a guide that you can use to achieve results on each step and get thorough understanding of the process. So, let's begin!

Shape idea into set of goals

First things first, you should clearly understand and define your goal and divide it into subgoals prior to any development.\
Your project requirements should include the following information:

What is your perfect final product?\ Describe it as detailed as possible. What do you plan to achieve with this product? On this stage, write everything that can be applied, you'll update and refine the document later many times.
What are the main features?\ Write down a list of main reasons people will want to use your product for. Why this functionality is essential and required for success?
What is your first product version?\ Plan what the minimum viable product (MVP) will comprise so that you can start selling and collect feedback.

Keep in mind that your project requirements should contain both technical and business-related parts of the system. Where, why, and how the end users will use your product? Defining clear and sufficient project requirements is critical as explains the team what they should create and why. Otherwise, you are in a risk list to fail the deadlines.

See our project description template for reference. While creating unique template for all kinds of projects is definitely not possible, we hope the samples we give in our articles will be useful for you.

To better understand specifics of IoT development, check our article with a short overview of existing solutions and nuances.

First steps

After your project description is ready, you can share it with your team and discuss all the details. Update the document if you find reasonable feedback.

Find potential users

If you have prospective customers before you start the development, that means your system is in demand. Also, you can start beta testing right when the initial version of the system is ready. Moreover, early customers will help you make sales right from the start.\
Still, you can look for potential customers while development is in progress.

Find development team

Here are the most common approaches:

Outsource the development\ If you think that outsourcing will not bring you success, check 15 startups that owe success to outsourced development.
Since you're reading this article, the easiest way is to contact us.
Ask your friends or just google the pro IoT development company.

In this case, before interview and negotiations, read how to learn if the outsourcing team is overcharging you.\
Conclusion: Professional outsourced team saves you time and costs as well as provides impersonal and useful feedback. Messy team will get you nowhere.

2. Gather your own team

This alternative seems really nice, but be aware of pitfalls:

Gathering full-fledged team takes time (and office space).
You need to pay taxes, sick leaves, vacations for each member.
You need to constantly motivate them, plan and monitor their work or hire more staff for that purpose.

Conclusion: you'll have much less time for evolving your business. But you'll have an in-house team.

Prepare technical specification

After finding the team that will implement technical part, start working on technical project specification. Project description explains the "whats" of your product. Now you have to get down to "hows".

Don't underestimate the value of such document. While it may look like wasting time (it's not), it saves you time, money, and nerves in the long run. Particularly, you'll notice you didn't define about stuff like interaction, each page's content, etc., and what tools you'll need for their implementation.

Go through the document carefully to make sure you missed nothing. It will be a lot cheaper and faster to define the scope from the start, then change it in the process. Yet, the specification may be updated further after preparing the design (that's okay, it will crystallize the budget and timeline more).\
You can find template for project technical description here - Project Technical description template

Design the product

So now, when you fully understand what needs to be done for your product, visualize it. Taking both intended use and technical specifics into account, design your hardware and applications, and include them into project description and specification.

Design will also reveal many things you missed while describing. This way your budgeting will be better and better. We've drilled down the example budgeting of IoT projects works, you can check it out here - How much does it cost to create IoT solution?

Back on the design track, here's a visualisations:

Hardware design

The device design is important, because it answers the following questions:

Commercial:

Will consumers find it appealing and want to buy it for their home/office or as a present?
What color, shape, and overall look should it have to be attractive?
How to make production easy and cost-effective?

Technical:

Will there be any limitations in terms of size, shape, materials?
Will it be durable and usable in the intended environment?
Will all required mechanical parts fit in this device?

Software design

The design of your software, be it a mobile, web, or desktop application, literally defines how users will perceive your product. Make it as easy to use and intuitive as possible (even if the functionality behind it is super complex). Here's our example:

Prototype and test concepts

Awesome, with design in place, both you and your team have a vision of how the product should look like, and that's one of the most important things. Yet, you may not have a complete understanding of the flow: how the users can interact with both software and hardware part of your product.

To identify any inconveniences/redundancies prior to development and production, it's better to spend a little time and create a prototype.\
For application prototype, you may use:

https://invisionapp.com and https://marvelapp.com/
Please check our sample here.
https://www.adobe.com/products/xd.html\ One of the best tools to test the UX of your app.

For hardware prototype, create draft device that contains basic functions and proves feasibility of your idea. Neither size and weight, nor the look matter now as you only explore functionality. Your main goal now is verifying that system reads data from sensors and loads it on MQTT broker (or any other IoT data transfer protocol like WebSocket, HTTP REST, or CoAP that you're using). Here is an example of our prototype:

Using this prototype, we understood that we needed better implementation for setup button, so we updated the design and started establishing the easiest connection flow. First, for connecting, users had to press and hold this button to turn the device into setup mode and connecting to Wi-Fi hotspot. But later we further enhanced and simplified the flow using Bluetooth.

At this point, app and device prototypes are not connected as we tested if the concepts work fine (and as we expected). We verified the transfer of data to MQTT broker on the hardware, and clicked each screen to understand if both look and feel of the app are appealing and intuitive.\
With this information at hand, we can move on to the software development stage.

Awesome! With all preparations done, we can proceed to the development. Next two stages may be done in any sequence or simultaneously because they are independent.

Software development

We wrote tons of articles about the development specifics already, so here we'll outline what is a must for successful work:

Clearly plan deadlines. We don't want the development to take forever, do we?
Specify use cases for testing. We want to cover all scenarios and verify everything works fine.
Create backlog of tasks. Let's remove duplicates and make sure we implement all the necessary.
Plan first sprint. The more detailed and thorough is our start, the clearer we see what we'll need to do next.

Learn more about our development process:

Apart from the development, we should never forget testing. While it might be possible to become new IBM without QA team, here's what we think about testing: The importance of automated testing on complex projects.

Create 3D model

With both tech description and all specifications for each hardware component, you can start working on 3D model of your hardware for an MVP solution. We designed and printed it on 3D printer.

To check if device really looks and feels the way we expect, we printed the model on our 3D printer.

And here's the printing result:

It still doesn't have a production look, but the size and functionality are correct, and we can check if that's what we expected.

Start beta testing

Our MVP is ready, let's start testing it on the first clients.\
First of all, we decided to start testing the product in our office. We installed 7 devices in 7 rooms (3 meeting rooms, kitchen, and 3 workrooms).

Everyone in our company installed application and started using it. Moreover, to get diverse feedback from a variety of people, we gave the products to our friends and partner companies.\
The main goal of beta testing is to determine any issues we missed previously, learn if there is enough functionality and if the right functionality was selected for the first version.

Launch MVP

First things first, what is and MVP and why do we need and MVP? You can find the answers in our article MVP: preventing commercial products from risks

Minimum viable product is a version that contains only the main and the most important functionality. For this exact functionality people want to use the product and recommend it to others. So and ordered printing of our 3D models at a professional production with high-quality 3D printers, so they have attractive boxes. In most cases, people care about the look, and even if they say they need functionality only, they still want nice-looking things:

Both the functionality you select and the appearance are crucial for successful marketing of MVP. To support our sales campaign and expand knowledge about our product, we've also developed a landing page https://ubreez.com/.

Ready, set, production

After getting feedback from beta testers, we found few issues that should be improved. Since that was our main goal for beta testing, we were glad to see it gone well. So, we enhanced the product and ordered a large amount of devices at professional production. We don't assemble the devices in our office, because that's not our speciality and we won't do it as effective as any professional factory. So, the goal is reached, and it's time to start making sales.\
You can check the applications at:\
App Store\
Play Market

The end? Definitely not!

Our product is developed, it's successful, and we grow each second. Is that the end? Of course not, I dare even say that it's just a beginning.\
When you launch the product, what's next? Learn at "Is there life after app release?"

Thanks for reading!\
Leave comments and subscribe to our blog, there's a lot of new good stuff coming soon.

SCADA visualization for IoT projects [Free Library]

Indeema Software — Tue, 17 Sep 2019 07:13:20 +0000

There's a lot of IoT SCADA solutions for factories and other manufacturing needs. Yet, there are cases (and quite a lot), when you need to develop your own SCADA system to cover specific needs of your project.

Original article - IoT dashboard library: visualize SCADA at a snap

We often use awesome Qt framework for implementing complex IoT solutions. For a bunch SCADA and SCADA-like projects, we came across the need for quick tool for developing device dashboards. That's why we developed super lightweight unofficial Qt library. The library is open source, customizable, and free to use under MIT license. We also share a small set of developed widgets.

Enjoy and use Qt ;)

README: This library is created for desktop, mobile, and embedded projects developed on Qt. To use it, you should know Qt/ C++ and QML.

Introducing QSimpleScada

Let us introduce you to a nifty library for your IoT projects. We created QSimpleScada to speed up and simplify visualising any data, so we (and you) can concentrate on developing automation algorithms that rock.

It was mainly created to quicken and, consequently, reduce the cost of IoT solution.

What is QSimpleScada?

It's a library that completely handles connection to and editing of widgets. Using QSimpleScada, you can easily create a visualization of IoT data using your mouse and a little code. After you are satisfied with the layout, save the generated .xml file and use it in your project.

Library is created with Qt/C++ and basic widget is based on C++. There is interface for QML, so you can independently create individual widgets on QML (as when creating classic QML UIs) and upload them to your app on a go.

Why do I need it?

Well, you do if you are a Qt developer or a company and:

Have strict deadlines and complex data evaluations at your project
Need to prototype mobile/embedded/desktop IoT projects often
Need a one-stop tool for diverse Qt projects
Don't want/have time/resources to develop dashboards from scratch

If neither of the above is about you, then you don't.

Why build IoT dashboards?

Well, it may sound a bit redundant, so feel free to skip this section if this question is self-evident to you. Otherwise, there are quite a few reasons to visualize info you got from Internet of Things.

It's the basic HMI (Human-Machine Interface) component for literally any IoT or control system. Far better than textual approach if you want users to see relevant data on the go. That applies both to classic SCADA and SCADA-ish projects.

For example, on our UBreez we used QSimpleScada to visualize air readings. Compare the display for yourself. So, what looks more neat and clear even when comprising lots of sensor widgets?l

Using dashboards, you can immediately highlight any deviations from standards, pinpoint where a malfunction occurs, track live location, see trends and any other valuable info. It saves users time on understanding data you SCADA system collects, and they can respond and decide how to act faster.

Using QSimpleScada

Here are the steps for integrating QSimpleScada version 0.9.x in your project:

Step 1: Install

Via package manager:

If you're building savvy solutions using Qt, you most likely use qpm package manager so no further chit-chat is required. In case you don't (yet), download it from here https://www.qpm.io

To install via qpm, run:

qpm install com.indeema.qsimplescada

And add:

include (../vendor/vendor.pri)

To *.pro file of your project.

As a bonus, try out our preset of widgets:

qpm install com.indeema.eeiot

From GitHub:

To clone the repo, go to:\
https://github.com/IndeemaSoftware/QSimpleScada\
To also add preconfigured widgets, clone:\
https://github.com/IndeemaSoftware/EEIoT

And add:

include($$PWD/com/indeema/QSimpleScada/com_indeema_QSimpleScada.pri)

include($$PWD/com/indeema/eeiot/com_indeema_eeiot.pri)

To the *.pro file.

Using binary release:

https://github.com/IndeemaSoftware/QSimpleScada/releases

Step 2: Configure

Once you download and install the library to your project:

1. Create a new device that is going to be represented on your dashboard. Give it a name and it IP address:

QScadaDeviceInfo *lDeviceInfo = new QScadaDeviceInfo();

lDeviceInfo->setName("Test Device");

lDeviceInfo->setIp(QHostAddress("127.0.0.1"));

2. Create a controller class that will handle all later devices and all boards that are connected to devices:\
QScadaBoardController *mController = new QScadaBoardController(); mController->appendDevice(lDeviceInfo)

3. Call initBoardForDeviceIp method to create a new board for already appended device. If there is no device on specific IP, the board will not be created.

mController->initBoardForDeviceIp("127.0.0.1");

4. Set editable mode for your controller to enable creating, moving, and resizing the controllers.

mController->setEditingMode(true);

If the editing mode is enabled, the modal window will feature dotted background:

5. Add grid layout on your widget and then add your controller to that widget:

QGridLayout *mainLayout = new QGridLayout(ui->centralWidget);

mainLayout->addWidget(mController);

Working with widgets

We've also developed an EEIoT library with a set of preconfigured widgets. You can download it at https://github.com/IndeemaSoftware/EEIoT and try it out as a start.

To use a widget collection:

Call the function with url to QML resources to let the controller know the location of QML widgets:\
QMLConfig::instance.appendQMLPath(:/com/indeema/eeiot/EEIoT/);

Singletone QMLConfig is located in "qscadaconfig.h"\
Here we use EEIoT as a group for all widgets inside. You can configure 1 or more groups.\
Note, if you create two folders with the same name in different locations, the second one (created later) will erase the first.

You can access all the dynamic properties that form QML (mentioned in a metaData list) from QSimpleScada, so you can create your own complex dashboards fast and easy.

Step 3: Use

You can use our simple editor to create your first dashboard https://github.com/IndeemaSoftware/QSimpleScadaSample\
Then set up QScadaBoardController in your app without any devices and boards and call:\
mController->openProject(QString <file>)\
where is a full path to your project file (*.irp)

For example:

mController->openProject(QString :/com/indeema/eeiot/EEIoT/)

See QSimpleScada in action

Visit our GitHub profile to explore simple apps that show the work of QSimpleScada library:

### Weather app

This is a plain app that visualizes weather-related data of 3 widgets:

Temperature
Humidity
Pressure

QSimpleScada and EEIoT are used to handle the display and connectivity of the dashboard. All the weather real-time data we receive from Openweathermap API. You can download the code at https://github.com/IndeemaSoftware/QSimpleScadaSample

To see the current readings for your city:

Enter your city followed by comma and country code as follows:\
Kyiv,ua

and click the Send button.

This will update temperature, humidity and pressure for your region.

### Builder app

One more example of how to use QSimpleScada is Builder application that gives us the possibility to create our dashboards and save to *.irp files. A simple dashboard editor that uses QSimpleScada to create needed dashboard with EEIoT widgets and save dashboard setup for later usage. In the example, we created dashboard that was used in Weather application mentioned above.

The code is also available at https://github.com/IndeemaSoftware/QSimpleScadaSample

More tools for you

We find that introducing Internet of Things impacts every industry and redefines our approach to using tech. We've gone through that topic in detail at 6 promising applications for the industrial IoT article, and it is our pleasure to drive the progress with automatization that 4th Industrial Revolution brings.

Understanding and context

If all projects got specs set in stone, the development world would be a utopia. Yet, the clearer the initial goal and requirements are as well as the better the whole team understands them, the more streamlined is a project. To deepen your knowledge about specifics and typical pitfalls that follow IoT projects, read:

Spoiler: find the templates for project-related documentation, so you can communicate the requirements and turn them into actionable specifications with less effort.

Estimating the cost and time

Get a thorough understanding of the time and resources you'll need is nearly impossible. So, to forearm you with a general idea of the complexity (calculated in time and cost), here's an IoT-specific calculator:

Dev tools

Sharing our toolkit for faster and more efficient development of IoT project, we upload our Qt and IoT related open source projects at https://github.com/IndeemaSoftware with Q at the beginning of the repo titles. You can also find a bunch of tools for React, Android, and iOS development there.

Recap

At Indeema, we are accustomed to tight deadlines and challenging projects. And, being committed to creating savvy solutions, we gradually realized that:

Understanding comes first.\
Be curious. Clarify each requirement, no matter how evident you think it is. Make sure you do understand. Because you can design a logical and scalable architecture, write awesome clean code, and yet fail to convey the desired result. Devil is in the details (so make sure you leave no details unnoticed).
Reinventing the bicycle is futile.\
Each project contains unique challenges and requires out-of-the-box thoughts. And there's no need to develop everything from scratch. Why? Because you'll only cut the time you have to find and implement really challenging features, modules, and architecture.
Quality is a standard.\
Be responsible for your work. You are engaged in making the future. If you are a developer, test your code against specifications, against best practices, common sense, stability of the project, etc. And the same applies to any other role.

Thanks for reading & hope you enjoyed this article. Subscribe for updates and let us know what you're interested in.

IoT dashboard library: visualize SCADA at a snap [Free IoT library inside]

Indeema Software — Fri, 06 Sep 2019 11:05:19 +0000

Enjoy and use Qt ;)

README: This library is created for desktop, mobile, and embedded projects developed on Qt. To use it, you should know Qt/ C++ and QML.

Introducing QSimpleScada

It was mainly created to quicken and, consequently, reduce the cost of IoT solution.

What is QSimpleScada?

Why do I need it?

Well, you do if you are a Qt developer or a company and:

Have strict deadlines and complex data evaluations at your project
Need to prototype mobile/embedded/desktop IoT projects often
Need a one-stop tool for diverse Qt projects
Don't want/have time/resources to develop dashboards from scratch

If neither of the above is about you, then you don't.

Why build IoT dashboards?

For example, on our UBreez we used QSimpleScada to visualize air readings. Compare the display for yourself. So, what looks more neat and clear even when comprising lots of sensor widgets?l

Using QSimpleScada

Here are the steps for integrating QSimpleScada version 0.9.x in your project:

Step 1: Install

Via package manager:

If you're building savvy solutions using Qt, you most likely use qpm package manager so no further chit-chat is required. In case you don't (yet), download it from here https://www.qpm.io

To install via qpm, run:

qpm install com.indeema.qsimplescada

And add:

include (../vendor/vendor.pri)

To *.pro file of your project.

As a bonus, try out our preset of widgets:

qpm install com.indeema.eeiot

From GitHub:

To clone the repo, go to:\
https://github.com/IndeemaSoftware/QSimpleScada\
To also add preconfigured widgets, clone:\
https://github.com/IndeemaSoftware/EEIoT

And add:

include($$PWD/com/indeema/QSimpleScada/com_indeema_QSimpleScada.pri)

include($$PWD/com/indeema/eeiot/com_indeema_eeiot.pri)

To the *.pro file.

Using binary release:

https://github.com/IndeemaSoftware/QSimpleScada/releases

Step 2: Configure

Once you download and install the library to your project:

1. Create a new device that is going to be represented on your dashboard. Give it a name and it IP address:

QScadaDeviceInfo *lDeviceInfo = new QScadaDeviceInfo();

lDeviceInfo->setName("Test Device");

lDeviceInfo->setIp(QHostAddress("127.0.0.1"));

3. Call initBoardForDeviceIp method to create a new board for already appended device. If there is no device on specific IP, the board will not be created.

mController->initBoardForDeviceIp("127.0.0.1");

4. Set editable mode for your controller to enable creating, moving, and resizing the controllers.

mController->setEditingMode(true);

If the editing mode is enabled, the modal window will feature dotted background:

5. Add grid layout on your widget and then add your controller to that widget:

QGridLayout *mainLayout = new QGridLayout(ui->centralWidget);

mainLayout->addWidget(mController);

Working with widgets

We've also developed an EEIoT library with a set of preconfigured widgets. You can download it at https://github.com/IndeemaSoftware/EEIoT and try it out as a start.

To use a widget collection:

Call the function with url to QML resources to let the controller know the location of QML widgets:\
QMLConfig::instance.appendQMLPath(:/com/indeema/eeiot/EEIoT/);

You can access all the dynamic properties that form QML (mentioned in a metaData list) from QSimpleScada, so you can create your own complex dashboards fast and easy.

Step 3: Use

For example:

mController->openProject(QString :/com/indeema/eeiot/EEIoT/)

See QSimpleScada in action

Visit our GitHub profile to explore simple apps that show the work of QSimpleScada library:

### Weather app

This is a plain app that visualizes weather-related data of 3 widgets:

Temperature
Humidity
Pressure

To see the current readings for your city:

Enter your city followed by comma and country code as follows:\
Kyiv,ua

and click the Send button.

This will update temperature, humidity and pressure for your region.

### Builder app

The code is also available at https://github.com/IndeemaSoftware/QSimpleScadaSample

More tools for you

Understanding and context

Spoiler: find the templates for project-related documentation, so you can communicate the requirements and turn them into actionable specifications with less effort.

Estimating the cost and time

Dev tools

Recap

At Indeema, we are accustomed to tight deadlines and challenging projects. And, being committed to creating savvy solutions, we gradually realized that:

Understanding comes first.\
Be curious. Clarify each requirement, no matter how evident you think it is. Make sure you do understand. Because you can design a logical and scalable architecture, write awesome clean code, and yet fail to convey the desired result. Devil is in the details (so make sure you leave no details unnoticed).
Reinventing the bicycle is futile.\
Each project contains unique challenges and requires out-of-the-box thoughts. And there's no need to develop everything from scratch. Why? Because you'll only cut the time you have to find and implement really challenging features, modules, and architecture.
Quality is a standard.\
Be responsible for your work. You are engaged in making the future. If you are a developer, test your code against specifications, against best practices, common sense, stability of the project, etc. And the same applies to any other role.

Thanks for reading & hope you enjoyed this article. Subscribe for updates and let us know what you're interested in.

How we created IoT system for managing solar energy usage

Indeema Software — Fri, 06 Sep 2019 10:30:24 +0000

If you have no idea about the development architecture and mechanical/electrical design behind IoT solutions, they could seem like "having seemingly supernatural qualities or powers". For example, if you show a working IoT system to 18th century people, they'd think it's magic.This article is sort of busting such myth. Or, to put it more technically, about hints for fine-tuning the IoT development for an awesome project in solar energy management area.

Spoiler: no spells, only analytical ideas for developing fast and easy service.

Disclaimer: We offer no one-fits-all solution (it simply doesn't exist), just share the stuff that we find serious. These points may be killer features while on the contrary their neglection may kill it. Pun intended ;)

Introducing IoT system for visualizing and optimizing solar energy consumption

We had the pleasure to work on a project of improving self-generated energy usage. The core lies in visualizing and optimizing the use of photovoltaic (PV) systems for both installer companies and end customers. So, when Solar Manager is installed as a central hub for distributing the produced solar energy between household devices, you use maximum of self-produced energy.

We've already written about business perspective of using solar energy, and now let's dive into tech challenges and hints of the development.

Absolute prerequisite

Before we start, let's get clear. There is one thing that does apply for each and every project, regardless if it's an IoT system or simple landing.

Never start implementation before you have a complete understanding of what you want to achieve (and everyone involved does).

There is no such a thing as evident. No, there are no telepaths, and nobody reads your thoughts. Clarify, discuss, make sure you're on the same page.

Of course, if you don't want to spend twice as much time and money.

The mission

So, what we have as inputs? Flexible connectivity and centralised remote firmware, 5 user roles with different UX and permission sets, converting and analyzing data, huge amount of requests, and, as an icing on the cake, plotting lots of time-value data on charts.

Challenges and specifics of implementing IoT system for energy consumption

When it comes to development, 3 things matter the most: stability, relevance, and speed. Especially when the project requires a monolithic architecture. That's why the overall logic, all user flows, and database design should be as simple and optimized as possible. Let's be honest, in 2019 nobody wants to wait 40 seconds because 'your data is being processed'. So, here's the question/answer list for IoT platforms we refer to:

Does the architecture fit in the requirements and specifications?
How will you convert, process, and analyse collected data?
What are the most optimal relations between parent-child MVC/MVP layers? Can they then be scaled without being interrupted?
Are there any modules that perform similar/adjoining functions? Can they be united into a single multipurpose module? Will that introduce or reduce complexity?
Is the communication between stages optimal?
How to cache data before visualizing it?
Is the user experience (UX) simple and self-evident for each user role?

Split what needs to be distributed, unite what is similar. Do not confuse this, however, with creating huge classes that (should) solve several tasks. Instead, create small ones for a single task. For complex task, create several classes that each solve a subtask and another one that will use those ones.

### Architect IoT solutions smart

Smart here refers to creating fast, scalable, optimized and sustainable project architecture that fits into project requirements. The basic questions that arose at this point:

What is the easiest and most direct architecture flow?
How to make the user experience for each role the simplest?
Can we revise initial architecture for better scalability and performance optimization?

For web apps, this involves the hierarchical model view controller (HMVC) design. For example, to allocate resources better and provide faster response, work through the connections between API, back end, front end, and edge. Configure cloud-local communication, storing and transferring data so that you get right response fast (hello, Captain Obvious!).

### Design database with performance in mind

Never underestimate the importance of thinking through the database (DB) design. This also applies to the relations between collections in the database. You have a lot of entities, which interact in various ways, so it is crucial to keep all related logical connections in one place.

So, when you have initial structure at hand, determine:

Is this (one-to-one, one-to-many, many-to-many) the optimal relationship type for this collection? Does it solve the task most efficiently?
How well does it correspond to the task at specific screen?
Does it fit well in the general architecture of the project?

Optimize the logic behind each module and ensure that the general architecture is preserved. Think through the permission set. Then think again and optimize. Remember to set connection types so that for each task you have all needed info in one place and handle requests right.

For example, imagine that your database is a fast food restaurant. You have a lot of clients, you need to serve food fast and precisely what they've ordered. Or else your business is done for. That's exactly the same for DBs. Yes, there are dozens of collections and you need data from 7-8 of them simultaneously. So design the relations so that they're logically connected and return the response quick.

IoT system is like a restaurant. Don't make the customers wait.

Photo by DREW GILLIAM on Unsplash

### How to plot [gazillion] of data

Remember the times, when sites loaded for a couple of minutes? We've seen apps where dashboards load even slower. And that's a no-no.

Charts are a new normal. Data visualization is commonly used in SCADA, IoT, and any analytical projects and for a reason. Seeing spikes in energy consumption, market trends, CO2 in the air, and any other stuff you can measure (typically, over time) gives a vivid impression. You see, you understand, you act. With textual presentation of massive data arrays your eye will blur in no time.

So, the challenge lies if fast plotting of charts with huge number of value-time pairs. Before users see the data on the chart, system has to determine all the points for plotting it. We had quite a lot of brainstorming to determine how cache the data so that plotting a chart with 50K+ data-value pairs takes less than 2 seconds.

From scratch to production, and beyond

Apart from web app, we also develop iOS and Android app for on-the-go installation, monitoring, and access.

The important thing to remember when working on IoT systems is maintaining simplicity and scalability. The typical 5-stage IoT architecture should be well-thought to not bring any redundant complexity.

As each product evolves, you have to think through the means of layering new functionality while not interrupting the existing features. And, of course, never forget about unit testing.

Less than a year from launching

Since its launch in October 2018, the Solar Manager is adopted and used by the leading photovoltaic wholesaler and installer companies in Switzerland.

By reviewing and optimizing energy-use habits, the consumers get the best out of their PVs and so they save costs. On a more global scale and according to Deloitte, such a solution makes solar energy competitive with traditional power sources. This, in its turn, makes it appealing for other residential consumers and businesses. And, finally, doesn't it sound as a basis of a smart city we all wait for?

Behind success any IoT project

There is no 'ultimate guide' to creating successful product. First, each project is unique and brings its own challenges. Second, even if you've done a bunch of projects in the area, the tech and the market demands evolve. So the experience you have from 2 or even half a year ago might not be relevant now.

Still, we do not get tired of telling that forewarned is forearmed. So here's a bunch of our experience that may be handy:

How investigation saves your time and reduces risks
How to tailor development to market you're reaching
IoT opportunities for gaming, automotive, retail, agriculture, industry etc.
What are the top 10 sensors for IoT

You can also check our GitHub for lots of free open-source instruments for IoT development.

Have an idea in mind and want to drill down the tech details? Get in touch with our experts, so we can figure out the best means and tools for the development.

The non-primitive approach of Amazon: How AWS IoT meets IoT challenges

Indeema Software — Thu, 05 Sep 2019 13:57:16 +0000

As a Company deeply involved in the development of various solutions for the IoT environment, we presumably should promote both the very sector of the IoT and our relative development skills and capabilities. The arrogant self-promotion where mentioning of any topical trade-offs is minimized to almost zero seems a widely accepted practice since potential customers prefer dealing with only well-meaning professionals facing no significant difficulties in their activity.

However, the fact that our blog is read by our colleagues - the other IoT developers in addition to the potential customers makes us address the IoT topic from a little bit another angle. To say the truth, it's not so simple to maintain a proper balance between being honest and being always positive. And the very nature of such an immature sector as the Internet of Things makes us admit that there's trouble in paradise actually. On the one hand, the IoT offers new opportunities the scope of which can hardly be graspable nowadays. On the other hand, the IoT introduces unique risks capable of compromising any IoT project in terms of both the security and operational reliability.

We believe that revealing the risks along with sharing best practices how to meet the IoT challenges can enhance the interest of potential customers to the IoT much better than just telling lucky "no-problem" stories.

This time we would like to examine the AWS IoT solution which is gaining popularity among many IoT developers. Both advertising and promotion are redundant in this case. Let's better try to realize whether AWS IoT is really so good for both developers and end users as its creators claim. Besides, some healthy criticism would never hurt, right?

What is AWS IoT

Amazon Internet of things or Amazon Web Services platform is a complex solution capable of collecting data from various IoT devices to connect them to the cloud apps. Amazon has long realized that the contemporary IoT market could hardly be happy with a one-fits-all service. Since the diversity of IoT devices keeps growing, a multi-service platform should be more relevant for the needs of various business sectors. Hence, AWS IoT comprises several specific services dedicated to different operational tasks. Such an approach represents Amazon as a true digital giant having rich development capabilities (the $ 1 trillion capitalization reflects the status, he-he:)

By the way, Amazon as a business behemoth clearly understands that in the contemporary globalized business environment there's only one method to succeed in a competition - improving operational efficiency. How to achieve this? The more intelligent business processes are, the better efficiency can be achieved and, therefore, the bigger profits occur. Just the IoT services allow enterprises of various sizes from numerous sectors to analyze huge data massifs collected from the industrial equipment. These days, machinery is becoming educable with the help of machine learning. The machine learning models created with AWS IoT can work both in a cloud and directly at the site. Thus, the IoT enables any equipment to react to local events with intelligent responses.

We cannot fail to mention the impressive infrastructural covering of AWS that provides customers with a truly flexible choice in terms of both the variety of the AWS cloud services and their pricing.

Last, but not least, the IoT security along with operational stability provided by AWS IoT represents Amazon as a quite pragmatic IoT platform provider (however, more on that later).

Among the others, the following AWS IoT services are available:\
Amazon FreeRTOS and AWS Greengrass (edge);\
AWS IoT Core, AWS IoT Device Management, and AWS IoT Device Defender (cloud);\
AWS IoT Analytics (analytics).

But we would like to begin with just a button :)

AWS IoT Button

A simple easily adjustable Wi-Fi/LTE-M device in the form of a button was designed for the IoT developers who would like to start working with such services as AWS IoT Core, AWS Lambda, Amazon DynamoDB, Amazon SNS along with the other AWS services without having to write proprietary code for the device. The logic of the button's activation can be configured in accordance with a particular task. For example, it can remotely start a car, open/close a garage door, and control various home appliances. The device can be integrated with some third-party APIs such as Twitter, Facebook, Slack as well as with some custom software.

The button is produced by the hardware partners of AWS specifically for the AWS IoT services. In fact, there are two versions of the button:\
1) The AWS IoT Enterprise Button which communicates via Wi-Fi. It has a 2000-click lifetime, encrypts outbound data using TLS, and can be configured using BLE and a mobile app. It retails for $19.99 (shipping and handling not included) and can be used in the United States, Europe, and Japan.

2) The AT&T LTE-M Button which communicates via the LTE-M cellular network. It has a 1500-click lifetime, and it also encrypts outbound data using TLS. The device and the bundled data plan is available at an introductory price of $29.99 (shipping and handling not included) and can be used in the United States.

Both versions are ready to use being pre-adjusted with X.509 certificates to connect with a cloud through a secured connection.

You may ask why Amazon involved some third-party hardware manufacturers to produce a special button. Here is why:

AWS IoT 1-Click

AWS IoT 1-Click is a special cloud service which works only with specially designed hardware devices - the above-mentioned buttons. What a solution! The solution is well-tested by many famous digital giants who would like to tie their customers with some particular devices and gadgets. A typical monopolistic intention to put all eggs in one basket. Of course, Amazon represents it as a part of its customer care: the customers do not need to fill their heads about where to find some pre-adjusted devices fully compatible with the offered cloud service anymore. Amazon has already made the choice on behalf of them. The best choice ever. Especially since the cloud service seems really customer-friendly in terms of running out of the box.

AWS IoT 1-Click is a service which enables special IoT devices to quire functions from AWS Lambda (a special event-driven service allowing developers to program functions on a pay-per-use basis) to perform certain actions. For example, through pushing a button it is possible to send a message to a technical support team, to track inventory process, or to feed your dog remotely.\
The types of applications empowered by AWS IoT 1-Click can significantly vary: apartment stores, schools, office buildings, health facilities, and various vehicles all can be equipped with the IoT devices fully integrated with the cloud service.

The main advantage of AWS IoT 1-Click is that the developers do not need to write code at the hardware end. All they have to do is just to use the already available operations. In addition, they can easily create new ones with the help of AWS Lambda functions. They need neither to install certificates nor to configure edge devices. Caring about firmware updates is also redundant. Admins, at the same time, can track both the state and functionality of each device being notified when service life is expiring.

Are the above-mentioned advantages worth sacrificing a wider choice of the third-party IoT devices in favor of AWS Buttons? It remains questionable from the perspective of new devices that keep appearing in the market. But for today the approach seems still reasonable.

However, Amazon also has a free solution compatible with various devices from the third-party manufacturers. See below.

Amazon FreeRTOS

This operating system for microcontrollers is created for the low-energy devices. Amazon FreeRTOS facilitates the deployment and control over a bunch of such devices through a simplified programming. The system belongs to open source being distributed free of charge. It supports various architectures such as ARM and MIPS. It means that the developers have a free hand to select a chipset from many reliable manufacturers such as\
Espressif, Microchip, NXP Semiconductors, STMicroelectronics, Texas Instruments, etc.

Amazon FreeRTOS offers the libraries that provide data encryption along with key management. Besides, the system follows the TLS (TLS v1.2) protocol for connecting the devices with a cloud. In addition, Amazon FreeRTOS allows adding a security code during both the deployment and OTA updates.

Here we can see how Amazon can respond to any allegations relating to a lack of choice between the third-party hardware suppliers. The developers are free to choose whatever they need in order to create a highly customized solution while Amazon FreeRTOS helps them develop the relevant software with an appropriate functionality.

Hence, Amazon is not alien to open source as well.

The simplified programming for the IoT development is not the only type of support that many developers can account on from Amazon. The next service in our review can help meet the challenges related to a non-reliable Internet connection.

AWS Greengrass

The real-world circumstances such as faulty internet connection can prevent many enterprises from implementing the IoT. In order to mitigate such a risk, Amazon offers AWS Greengrass. The solution enables groups of devices to sync with a cloud in a secure manner. Besides, the connected devices can communicate with each other even when the internet connection is interrupted. AWS Greengrass allows the devices to run AWS Lambda functions. Such a combination provides executing serverless functions locally. It means that various Linux-based devices running on both ARM or x86 architectures can use Greengrass Core to execute AWS Lambda code.

This is about the optimization of data flows, in fact. If you have several devices based on Raspberry Pi, for example, your code can run locally on them. In doing so, you can collect data, filter it, and send only what you consider important to a cloud for a subsequent analytics. Such a practice can obviously save your time and money. Hence, in some cases, the solutions based on AWS Greengrass can be more cost-effective than the ones based on AWS IoT Core.

Besides, AWS Greengrass is one of few Amazon services able to run on a very lightweight devices on-premises. It's a good opportunity for admins to use AWS programming locally. AWS Greengrass seems another Amazon's incentive which helps the IoT developers convince some hesitating customers, right?

AWS IoT Device Management

The name of the service speaks for itself. And this is about the scale of your IoT environment. The fleet of your devices may comprise hundreds, thousands, and even millions of endpoints. All of them require well-organized control and monitoring. And this is just what AWS IoT Device Management service offers. It helps IoT developers not to care about the scale anymore. A combination of group methods with deployment flexibility enables the developers to create groups of the IoT devices with an individual access policy regardless of the scale of the entire system. In brief, AWS IoT Device Management helps to manage your IoT fleet remotely. Both individually and in groups you can send firmware updates through OTA (over-the-air), troubleshoot functionality and monitor the state of your devices. In addition to the quantitative scalability, the qualitative one takes place since a particular OS of your device is irrelevant to the service. It implies a great variety of devices beginning from a cheap thermometer and up to a luxury autonomous vehicle. Hence, the secure IoT management at scale is realized. Kudos. However, the other service is in charge of the security.

AWS IoT Device Defender

If an IoT service provider has some security practices, they should be implemented into the services somehow. Both authentication of IoT devices and their secure authorization through the continuous audit of the entire fleet belong to the fully managed service AWS IoT Device Defender. There is no doubt that Amazon has acquired a rich experience in the IoT security issues. And the relative recommendations by Amazon are offered in the form of practices that constitute the AWS IoT Device Defender capabilities.\
The integration of AWS IoT Device Defender with the other Amazon services are implied - both AWS Greengrass and Amazon FreeRTOS can be integrated with the service automatically. AWS IoT Device Defender can notify the users about problems through AWS IoT console, Amazon CloudWatch, and Amazon SNS. What can such alerts be about?\
For example, it can identify an abnormally intensive data traffic between the IoT devices and a cloud that may reflect a data leakage. Also, the service can warn against an unauthorized IP address appearing in a network. It can track various states of your devices such as the number of enabled ports on your device, with what the device is connected, the amount of data the device sends and so on. A regular checking of certificates of the devices regarding their validly and expiry dates is also a useful security practice which is shared by Amazon with the IoT developers via AWS IoT Device Defender.

It is hardly possible to anticipate all possible security problems within the IoT sector since many customized solutions can engender absolutely unique risks. Nevertheless, Amazon shares a set of its best security practices a deviation in which can be identified as a certain alert through AWS IoT Device Defender. Does such an approach meet our expectations? It does, indeed. Does AWS IoT Device Defender guarantee the total security of our IoT system? No, certainly it doesn't. And we will have to come back to this issue later.

AWS IoT Analytics

Data is money, as many proponents of the contemporary big-data strategies claim. Indeed, it is, but only in case, you can effectively analyze the data to retrieve some valuable information from your data feed. Every IoT solution is totally dependent on the data streams generated by the IoT devices. Amazon offers a special service able to properly format the gigabytes of data continuously arriving from your IoT devices - AWS IoT Analytics. This is a fully managed service which allows performing complex analytics of a large amount of data collected from your IoT devices without having to spend any extra time and money for establishing your own proprietary IoT analytics' infrastructure.

In fact, AWS IoT Analytics is a means of automation of all sophisticated steps you need to proceed to analyze data from your IoT devices. The service helps to filter, select, process, and enrich your data streams before sending them to a cloud storage for a deeper subsequent analytics. Thus, it is possible to collect and save only valuable data through some special mathematical manipulations for data processing. For example, you can enrich your data with some metadata such as a type of a device along with its location while some "bad data" occurred due to inaccurate measurements can be cleansed. Later on, you can send both planned and individual queries through an embedded SQL data requester to provide your data analysis. Moreover, the true deep analytics can be achieved with the help of the available machine learning tools. Hence, AWS IoT Analytics can be a relevant default service for the majority of the IoT developers along with their customers.

Suppose, it's time to get down to the very essence of Amazon's IoT solution. Let's practices a little bit on dealing with AWS IoT.

AWS IoT Core

AWS IoT Core is probably the most significant service among the Amazon's basic ones dedicated to the IoT. It provides a connection of the physical IoT endpoints to a cloud through a reliable scaling. AWS IoT Core is in charge of establishing a full interaction between IoT devices with their peripheral software and the AWS IoT services mentioned above.

In order to start working with AWS IoT, let's arrange a trial connection of a test device containing a microcontroller along with the following sensors HDC1080 -(temperature, humidity), BME280 -(pressure), MH-Z19 - (CO2), CCS811 - (eCO2, tVOC) to AWS IoT Core for a trial data transmission.

The secure connection of the device is essential in our case. One of the most popular methods of providing a secure data transfer is using end-to-end encryption via TLS 1.2. protocol. Only few solution based on microcontrollers can meet TLS 1.2. due to a lack of computing power. This time we use ESP32 since the microcontroller is one of the most accessible solutions.

First, we should create our AWS username while our ESP32 microcontroller should be connected to the Internet.

After Login, and open the AWS IoT console at https://aws.amazon.com/iot. On the Welcome page, choose Get started.\
If this is your first time using the AWS IoT console, you see the Welcome to the AWS IoT Console page. In the left navigation pane, choose Manage to expand the choices, and then choose Things.\
On the page that says You don't have any things yet, choose Register a thing. (If you have created a thing before, choose Create).

A thing represents a device whose status or data is stored in the AWS Cloud. This stored status or data is called the device's shadow. The Device Shadow service maintains a shadow for each device connected to AWS IoT.

Type a name for the thing, and then choose Next.

After that, we should create certificates for a secure connection.

Then we should load the certificates, click "Done", and get the authorized Thing

Then, we should go to Secure and choose Policies to create a policy.

On the Create a policy page, in the Name field, type a name for the policy. In the Action field, type iot:. In the Resource ARN field, type *. Select the Allow check box. This allows your Raspberry Pi to publish messages to AWS IoT.\
iot: -policy to subscribe and publish using this certificate\

-all the clients can publish/subscribe to this thing using this certificate

In the left navigation pane, under Security, choose Certificates.

In the box for the certificate you created, choose ... to open a drop-down menu, and then choose Attach policy.

In the box for the certificate you created, choose ... to open a drop-down menu, and then choose Attach thing.

The final step comes to an activation of the certificate:\
In the box for the certificate you created, choose ... to open a drop-down menu, and then choose Active

Let's consider our ESP32 microcontroller already pre-configured for interaction with AWS IoT when Rest API Endpoint, port, and protocol are known as well as all necessary certificates are available.

Now we need to check a possibility to transfer data between ESP32 and a cloud of AWS IoT. Go to Manage, click our thing test-ESP32, on the left menu choose Interact and copy a topic address below the line "Update to this thing shadow".

After that, subscribe for the selected topic and wait for the data.

In a few seconds, we will see the data successfully received by the MQTT broker.

Finally, we can collect, analyze, and visualize our data with the help of either AWS IoT service or our own solutions.

A fly in the ointment

All aforementioned look too positive, right? It's quite explainable since the very capitalization of Amazon implies that its IoT developers are far from being just a yard team. Nevertheless, there is one issue which can be accepted as a specific drawback of the entire approach of Amazon to the IoT services. We should come back to the security practices again. A telling example won't hurt.

Just take a look at what is advised by a professional who promotes AWS IoT services from the security perspective. In contrast to the whole content praising AWS IoT for the iron-concrete security it provides, the final advise come to some trivial suggestions such as changing default passwords, using encryption, assigning dedicated IoT stuff etc. If we replace AWS IoT with some much poorer solution in that content, the suggestions would keep sounding not less relevant. Better safe than sorry? Redundant overreaction?

Not, in fact. This is a sad truth which implies quite a significant share of a human factor which still has to be involved in the security practices no matter whether they belong to Amazon or to some other IoT service provider. And a human factor always implies errors and misuse.

So, which technology is missed by the Amazon's IoT developers in terms of security? We dare to assume that it's time for such a digital giant as Amazon to start developing solutions based on the DLT (Distributed Ledger Technology). Once the very nature of DLTs implies the elimination of a human factor from digital interactions to some extent, nothing prevents Amazon from using IOTA Tangle, Hashgraph, or even a proprietary custom distributed ledger in the AWS IoT solutions. Even a simple trial DLT-based solution having quite a limited functionality would be better than nothing since following the promising IT trends (undoubtedly, DLT is one of the hottest trends nowadays!) would represent Amazon as the most progressive IoT service provider. And, who knows, maybe the trivial security suggestions about default passwords and registered devices should not even be necessary anymore.

We've done our best in representing the basic features of the AWS IoT services in the present post. Hope you will appreciate our efforts. In addition to the already described AWS and Predix platforms, we are going to examine the other IoT solutions such as IBM Watson, MS Azure, and Google IoT. Please follow our posts and suggest us what else in the IoT environment you want us to study.

UICollectionView Tutorial: Changing presentation on the fly

Indeema Software — Thu, 05 Sep 2019 13:53:48 +0000

Original article - UICollectionView Tutorial

In this article, we'll cover using of various element presentation methods, as well as their reuse and dynamic changing. The basics of working with collections and auto layouts are not covered here.

Here what we'll get as a result:

When developing mobile applications, we often come across situations, where table view is not enough and we need to show element list in a more unique and interesting way. Moreover, the ability to change the display format can become a killer feature of your app.

You can implement all aforementioned fairly straightforward using UICollectionView and various UICollectionViewDelegateFlowLayout protocol implementations.

You can find the complete project code at https://github.com/IndeemaSoftware/CustomCollectionLayout

To implement the different display formats for our element list, we need:

FruitsViewController: UICollectionViewController class, where we'll store the fruits array, the UICollectionView and element presentation objects.
Fruit data model

struct Fruit {\
let name: String\
let icon: UIImage\
}

|
FruitCollectionViewCell: UICollectionViewCell class

A cell with UIImageView and UILabel elements for displaying fruits.\
We'll create this cell in a separate .xib file to be able to reuse it in other collection views.

As we can see from the design, there can be 2 cell alternatives with text featured to the right and below the image:

There could be absolutely different types of cells. In that case, you'll need to create 2 separate object classes and use the suitable one.

For this example, we don't need such distinguishing and 1 cell with UIStackView is enough.

FruitCollectionViewCell interface\

To create cell interface:

Add UIView.
Inside the UIView, add UIStackView (horizontal).
In the UIStackView, add UIImageView and UILabel.
For UILabel, set horizontal and vertical Content Compression Resistance Priority = 1000.
For UIImageView, add Aspect Ratio 1:1 and change the priority to 750.

We'll need this for accurate display in horizontal mode.

Next, we'll write the logic for displaying your cell both in horizontal and vertical modes.

We'll take the cell size as the main criterion for horizontal display. That is, if there's enough space, we'll display it horizontally. As "enough space" we'll consider the width being twice the height, because the image should be a square.

Here's the code for the cell:

class FruitCollectionViewCell: UICollectionViewCell {\
static let reuseID = String(describing: FruitCollectionViewCell.self)\
static let nib = UINib(nibName: String(describing: FruitCollectionViewCell.self), bundle: nil)

@IBOutlet private weak var stackView: UIStackView!

@IBOutlet private weak var ibImageView: UIImageView!\
@IBOutlet private weak var ibLabel: UILabel!

override func awakeFromNib() {\
super.awakeFromNib()\
backgroundColor = .white\
clipsToBounds = true\
layer.cornerRadius = 4\
ibLabel.font = UIFont.systemFont(ofSize: 18)\
}

override func layoutSubviews() {\
super.layoutSubviews()\
updateContentStyle()\
}

func update(title: String, image: UIImage) {\
ibImageView.image = image\
ibLabel.text = title\
}

private func updateContentStyle() {\
let isHorizontalStyle = bounds.width > 2 * bounds.height\
let oldAxis = stackView.axis\
let newAxis: NSLayoutConstraint.Axis = isHorizontalStyle ? .horizontal : .vertical\
guard oldAxis != newAxis else { return }

   stackView.axis = newAxis\
   stackView.spacing = isHorizontalStyle ? 16 : 4\
   ibLabel.textAlignment = isHorizontalStyle ? .left : .center\
   let fontTransform: CGAffineTransform = isHorizontalStyle ? .identity : CGAffineTransform(scaleX: 0.8, y: 0.8)

   UIView.animate(withDuration: 0.3) {\
       self.ibLabel.transform = fontTransform\
       self.layoutIfNeeded()\
   }\

}\
}

Let's get to the main part and set up the controller and logic behind displaying and switching the cell types.

We'll create enum PresentationStyle for all possible presentation states. To the navigation bar, we'll also add a button for switching between states.

| class FruitsViewController: UICollectionViewController {\
private enum PresentationStyle: String, CaseIterable {\
case table\
case defaultGrid\
case customGrid

   var buttonImage: UIImage {\
       switch self {\
       case .table: return  imageLiteral(resourceName: "table")\
       case .defaultGrid: return  imageLiteral(resourceName: "default_grid")\
       case .customGrid: return  imageLiteral(resourceName: "custom_grid")\
       }\
   }\

}

private var selectedStyle: PresentationStyle = .table {\
didSet { updatePresentationStyle() }\
}

private var datasource: [Fruit] = FruitsProvider.get()

override func viewDidLoad() {\
super.viewDidLoad()\
self.collectionView.register(FruitCollectionViewCell.nib,\
forCellWithReuseIdentifier: FruitCollectionViewCell.reuseID)\
collectionView.contentInset = .zero\
updatePresentationStyle()

   navigationItem.rightBarButtonItem = UIBarButtonItem(image: selectedStyle.buttonImage, style: .plain, target: self, action: #selector(changeContentLayout))\

}

private func updatePresentationStyle() {\
navigationItem.rightBarButtonItem?.image = selectedStyle.buttonImage\
}

@objc private func changeContentLayout() {\
let allCases = PresentationStyle.allCases\
guard let index = allCases.firstIndex(of: selectedStyle) else { return }\
let nextIndex = (index + 1) % allCases.count\
selectedStyle = allCases[nextIndex]

}\
}

// MARK: UICollectionViewDataSource & UICollectionViewDelegate\
extension FruitsViewController {\
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {\
return datasource.count\
}

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {\
guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: FruitCollectionViewCell.reuseID,\
for: indexPath) as? FruitCollectionViewCell else {\
fatalError("Wrong cell")\
}\
let fruit = datasource[indexPath.item]\
cell.update(title: fruit.name, image: fruit.icon)\
return cell\
}\
} |

The ***UICollectionViewDelegateFlowLayout*** protocol contains all data about display methods of collection elements. Therefore, to remove any implementations from the controller and create independent reusable elements, we create a separate implementation of this protocol for each presentation type.

However, we should take into account that:

This protocol also defines the cell selection method (didSelectItemAt:).
Some methods and logic are the same for all N display methods (in our case, N=3).

So we'll create a CollectionViewSelectableItemDelegate protocol that will expand the basic UICollectionViewDelegateFlowLayout protocol. That protocol will determine the closure for cell selection and, if needed, any additional properties and methods (such as returning the cell type if different display types are being used). This will solve the first issue.

protocol CollectionViewSelectableItemDelegate: class, UICollectionViewDelegateFlowLayout {\
var didSelectItem: ((_ indexPath: IndexPath) -> Void)? { get set }\
}

To solve the second one, the logic duplication issue, we'll create a base class that will contain all common logic.

class DefaultCollectionViewDelegate: NSObject, CollectionViewSelectableItemDelegate {\
var didSelectItem: ((_ indexPath: IndexPath) -> Void)?\
let sectionInsets = UIEdgeInsets(top: 16.0, left: 16.0, bottom: 20.0, right: 16.0)

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {\
didSelectItem?(indexPath)\
}

func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {\
let cell = collectionView.cellForItem(at: indexPath)\
cell?.backgroundColor = UIColor.clear\
}

func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {\
let cell = collectionView.cellForItem(at: indexPath)\
cell?.backgroundColor = UIColor.white\
}

}

In our case, the common logic includes the closure call when selecting a cell as well as cell background change when switching to highlighted state.

Next, we'll describe 3 presentation implementations: tabular, 3 elements per each row, and a combination of the first two.

Tabular presentation:

class TabledContentCollectionViewDelegate: DefaultCollectionViewDelegate {\
// MARK: - UICollectionViewDelegateFlowLayout\
func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
sizeForItemAt indexPath: IndexPath) -> CGSize {\
let paddingSpace = sectionInsets.left + sectionInsets.right\
let widthPerItem = collectionView.bounds.width - paddingSpace\
return CGSize(width: widthPerItem, height: 112)\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
insetForSectionAt section: Int) -> UIEdgeInsets {\
return sectionInsets\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
minimumLineSpacingForSectionAt section: Int) -> CGFloat {\
return 10\
}\
}

Displaying 3 elements per row:

class DefaultGriddedContentCollectionViewDelegate: DefaultCollectionViewDelegate {\
private let itemsPerRow: CGFloat = 3\
private let minimumItemSpacing: CGFloat = 8

// MARK: - UICollectionViewDelegateFlowLayout\
func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
sizeForItemAt indexPath: IndexPath) -> CGSize {\
let paddingSpace = sectionInsets.left + sectionInsets.right + minimumItemSpacing * (itemsPerRow - 1)\
let availableWidth = collectionView.bounds.width - paddingSpace\
let widthPerItem = availableWidth / itemsPerRow\
return CGSize(width: widthPerItem, height: widthPerItem)\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
insetForSectionAt section: Int) -> UIEdgeInsets {\
return sectionInsets\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
minimumLineSpacingForSectionAt section: Int) -> CGFloat {\
return 20\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {\
return minimumItemSpacing\
}\
}

Combination of tabular and 3-per-row presentation options:

class CustomGriddedContentCollectionViewDelegate: DefaultCollectionViewDelegate {\
private let itemsPerRow: CGFloat = 3\
private let minimumItemSpacing: CGFloat = 8

// MARK: - UICollectionViewDelegateFlowLayout\
func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
sizeForItemAt indexPath: IndexPath) -> CGSize {\
let itemSize: CGSize\
if indexPath.item % 4 == 0 {\
let itemWidth = collectionView.bounds.width - (sectionInsets.left + sectionInsets.right)\
itemSize = CGSize(width: itemWidth, height: 112)\
} else {\
let paddingSpace = sectionInsets.left + sectionInsets.right + minimumItemSpacing * (itemsPerRow - 1)\
let availableWidth = collectionView.bounds.width - paddingSpace\
let widthPerItem = availableWidth / itemsPerRow\
itemSize = CGSize(width: widthPerItem, height: widthPerItem)\
}\
return itemSize\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
insetForSectionAt section: Int) -> UIEdgeInsets {\
return sectionInsets\
}

func collectionView(_ collectionView: UICollectionView,\
layout collectionViewLayout: UICollectionViewLayout,\
minimumLineSpacingForSectionAt section: Int) -> CGFloat {\
return 20\
}

On the last stage, we add display data to the controller and set the appropriate delegate for the collection.

Important notice: since the delegate of the collection is weak, in the controller, we need to have a strong reference to the presentation object.

In the controller, let's create a dictionary of all available presentation types:

private var styleDelegates: [PresentationStyle: CollectionViewSelectableItemDelegate] = {\
let result: [PresentationStyle: CollectionViewSelectableItemDelegate] = [\
.table: TabledContentCollectionViewDelegate(),\
.defaultGrid: DefaultGriddedContentCollectionViewDelegate(),\
.customGrid: CustomGriddedContentCollectionViewDelegate(),\
]\
result.values.forEach {\
$0.didSelectItem = { _ in\
print("Item selected")\
}\
}\
return result\
}()

Also, to the updatePresentationStyle() method, let's add animated changing of collection delegates.

   collectionView.delegate = styleDelegates[selectedStyle]\
   collectionView.performBatchUpdates({\
       collectionView.reloadData()\
   }, completion: nil)

|
|\
|

That's all we need to animate switching of elements from one state to another ;)

Using this approach, we are able to display elements on any screen in any manner and dynamically switch between presentation states. The most important point is that the code is loosely coupled, reusable, and scalable.

You can find the complete project code at https://github.com/IndeemaSoftware/CustomCollectionLayout

Deploying CI server on Linux

Indeema Software — Thu, 05 Sep 2019 13:50:30 +0000

Original article Deploying CI server on Linux

Let's see how to use and deploy Jenkins CI flow for Android apps. Specifically, setting up automated unit testing and building projects step-by-step.

Diving into development for Android OS, you'll probably hear about a thing called unit testing. In fact, development for any platform has a thing for unit testing. And that's because of a reason.

README: All examples are on Android Studio, Android SDK and Linux (so if you're not into these, some examples may be hard to follow. Or not ;) We also covered CI server on Mac OS for iOS using GitLab and Fastlane for iOS devs.

Why care about unit testing?

Unit testing is definitely a great thing to introduce to your project, because you can make sure that:

New modules don't affect the existing unit-tested parts of the project.
A specific code part works as we expect it to.

In case they don't, failed tests immediately show you where the problem is.

Unit tests are executed on a virtual Java machine, and of course you can run them directly in Android Studio. However, if your team is more than just you, using a continuous integration tool that automatically launches unit tests and generates informative report is a better idea.

You can then export this file as .apk and share via email with your QAs, for example. And here's a solution for such purposes: Jenkins CI server https://jenkins.io/

How to install for Jenkins CI server

So, to install Jenkins:

Download the latest stable version at http://mirrors.jenkins.io/war-stable/latest/jenkins.war
Open up a terminal and go to the download folder (or a folder to where you moved the jenkins.var file) with a command:\ $ cd home/anyfolder/Downloads/
Run a command:\ $ java -jar jenkins.war --httpPort=8080

This will launch a script that'll create a hidden .Jenkins subfolder in the home folder. All server configurations will be stored in that subfolder. The server will run as long as the terminal with script is open.

To stop the server, either close the terminal window, or press Ctrl + C.

Setting Jenkins server up

After you run the script, the building of a local Jenkins server starts (using 8080 port).

On the Getting Started screen at http://localhost:8080/, you'll need to enter

Initial Administrator Password. For this purpose, copy the provided path to your clipboard.

Therefore, to locate this password:

Launch a separate terminal instance and paste that path. For example:\ $ cd /home/ruslanstosyk/.jenkins/secrets\ This will open the secrets folder.
Use the cat command that allows reading content of a specific file. In this case, run cat command with initialAdminPassword filename:\ $ cat initialAdminPassword\ This will display your password on the console.
Copy and paste the password to the Administrator Password field and then click Continue.
At the next step, select Install suggested plugins.\ \ After you familiarise with Jenkins or require some specific tools only, you may use Select plugins to install. However, at first and for basic needs, Install suggested plugins option is better.
Wait a few minutes while the installation is in progress.\
Create a user for signing into the system and configuring the server and click Save and Continue.\
Sign in to Jenkins using your username and password.\

Configuring Jenkins integration for your needs

So, after you're all set up with the server inself, you'll need to arm it with plugins that bring most benefits of continuous integration for building Android apps. First, from the start screen, select Manage Jenkins.

From the menu that appears, select Manage Plugins to go to the plugin management page. Here you can add, update, and select plugins you need. We'll add plugins to customize the Jenkins deployment and adjust it to the required types of tasks.

Go to the available inset and find and download the following plugins (or use the links):

JUnit\ https://wiki.jenkins.io/display/JENKINS/JUnit+Plugin
JaCoCo\ https://wiki.jenkins.io/display/JENKINS/JaCoCo+Plugin
EnvInject\ https://wiki.jenkins.io/display/JENKINS/EnvInject+Plugin
GitLab Plugin\ https://wiki.jenkins.io/display/JENKINS/GitLab+Plugin

After you install all plugins you need and to properly launch them, restart Jenkins tool.

Set up the path to folders that contain Java and Android SDK:

From the start page, to to Manage Jenkins, and select Configure System option.
Scroll down to the Global Properties and select the Environment Variables checkbox.
In the Name field, paste JAVA_HOME and specify the path to you Java folder in the Value field.
Click Add.
In the name-value pair that appears, paste ANDROID_HOME as Name and specify the path to your Android folder in the Value field.
Click Save.

Creating a Jenkins CI project for Android

So, finally, we're all set up for creating a new project.

Bind Jenkins to your project on Git

On the start page click New Item.\
Assign a name for your project. This name must not contain spaces.\
For example, testproject, test-project, Test_Project.\
Select Freestyle project option.\
This will launch the project configuration page.
Go to Source Code Management.
Select Git checkbox and paste full path to your project.\
Enter your credentials to let Jenkins clone and launch your project.\

Add rules for building the project

Next tab we'll need for Jenkins continuous deployment is Build Triggers. Here we can add rules for launching the project's build. There's a variety of options we can set up for starting the build. For example, detecting a specific keyphrase in a commit name such as [ci start] or any other you set up. Yet, to make use of this functionality, you'll have to deploy Jenkins CI on a web server (instead of a local one), because it's implemented using web hooks.

In our case, we used an option that starts build every 15 minutes. This option uses cron syntax.

In the Build Environment tab, select Abort the build if it's stuck checkbox. This option is quite handy for cases when an unexpected error occurs and you need to free queue and deallocate memory.

So, in the Build tab, you have to specify the options to run:

From the drop-down menu, select the Invoke Gradle Script option.
In the Invoke Gradle Script dialog, select Use Gradle Wrapper checkbox.\
Fill the Tasks field with the script that defines the order for running the commands.\
We used:\
clean\
assembleDebug\
test\ connectedAndroidTest
Then configure Post-Build Actions by selecting the following options from the drop-down:

Publish JUnit test result report

Using this option, you'll configure Jenkins to save the detailed report on each test run. You'll also get a nice visualization of the report.

Archive the artifacts

This option builds the project after all tests are run. So you'll get an .apk file ready to be downloaded and installed on a device.\

5. Click Save.

To launch the project, either run an emulator, or connect some Android device to your computer and then click Build Now.

While the project is being cloned from the repo and the build is starting, you can explore the build status and info about success/failure of each stage in the Console Output.

Review the build

After the project is successfully built, you'll see the following logs in the Console Output:\

From the main page of the build, you can download the .apk file and build logs, review the information about running the tests (success and failures), and more.

Started and up!

So we've made quite a lot of configurations. As a result, we've got a continuous integration using Jenkins for automating a part of build creation and launching tests when developing an Android app.

This article covers only the tip of the iceberg of what you can set up and customize via Jenkins CI for your project/requirements.

Thanks for reading and hope it helps you automate mundane tasks ;) Subscribe for more nifty stuff about continuous integration tools, IoT, Android development, and more!

How to debug Javascript in Chrome quick and easy

Indeema Software — Thu, 05 Sep 2019 13:48:29 +0000

Overview

Original article - How to debug Javascript in Chrome

In this article, you will learn how to debug JavaScript code on front end and back end using Chrome DevTools and VS Code.

Goals

Learn to debug frontend and Angular
Analyze how to debug Node.js

Front-end JavaScript/Angular debugging

Currently, a lot of tools like Chrome DevTools (also known as chrome debugger) and Firefox Developer Tools support front-end debugging. While these two are the most popular ones, other browsers also have tools of their own. Let's consider Chrome DevTools for our bug-eliminating adventure.

Debugging JavaScript

Let's be honest, debugging can sometimes be really time-consuming. Especially, if simple commands such as console.log() or window.alert().

You have to write and then remove additional code and, sometimes, you can even commit code that includes these methods (even if you thought you had removed them). But if there are any linters set up, console or alert methods will be highlighted in the code.

Here's when Chrome DevTools comes to the stage with a noble mission to debug code without these tedious instruments. Among its other perks, CSS and HTML editing, testing the network and site speed are our favorite ones.

Let's create a simple web page with JavaScript method getData() that simply collects the data from the name input field, creates a DOM node with dataSpan ID, and then adds the input field value to that DOM element.

Here's how our page'll look like:

In HTML:

In JavaScript:

Let's save it under app.js name.

That's how the page will appear in browser:\

To look over how the method works prior to storing it in dataSpan, we can use the old-fashioned console.log(data) or window.alert(data). Here's what we'll see when launching the file in VS Code:

That is, however, the most primitive approach.

So, instead, we'll use Chrome DevTools and validate that everything works as we plan using breakpoints.

Breakpoint is simply a line of code at which we want to stop running code to examine how it works (or doesn't work) accurately.

Back on track, let's launch the page in Google Chrome and:

To open Chrome Develop Tools, in the upper-right corner of the browser, click to open Customize and control Google Chrome menu.
From the menu, select More tools, and then select Developer tools.

Alternatively, we can use Ctrl+Shift+I keyboard shortcut (we prefer this approach, but that's up to you).

After we're in, let's pause the code at a breakpoint:

With Chrome DevTools launched, select the Sources tab.
From the Sources pane, in the Page view, select app.js (the JavaScript file we created previously).
In the Editor Pane, to the left of the let data =document.getElementById('name').value; line of code, click the line number 3.

With this in place, we'll set a line-of-code breakpoint, which is nicely highlighted in blue so we can see exactly where we've set it. Also note that the selected variable's name automatically adds up to the Breakpoints > Local section, in the JavaScript Debugging pane.

Managing Increments at Which the Function Is Executed

Setting a breakpoint means that the function will stop execution on that breakpoint. We must then enable executing the code line-by-line to inspect the changes in our variable.

At the top-left of the JavaScript Debugging pane are the basic breakpoint run commands:

The first, Resume script execution button will continue the code execution until the code ends or until the next breakpoint.

Let's enter hello world in our name field. The line will expand with data = "hello world". Now let's click Step over next function call button.

The selected breakpoint line is executed and the debugger will select the next one. Expand the Scope pane to see the value of the data variable. It has changed to "hello world", which we have previously entered. It simply displays our variable on a specific line of code. Click Step over next function call again to run the selected method and proceed to the next line.

If you refresh the page, the value of the out variable will be updated to the DOM element. To the left of the variable, you can click the Expand () icon to view its value. If you click Step over next function call, in the browser, the "hello world" text will be added to the dataSpan again.

More Complex Javascript Debugging

Let's say we want to execute more complicated function that definitely requires some debugging. For example, we want users to enter space-separated numbers. The function will then evaluate and output these numbers, their sum, and multiplication result (product).

For this purpose, we'll modify our app.js to look like the screenshot above. Let's refresh the page and do some debugging:

Click 3, the line number of let data = document.getElementById('name').value;, to set a breakpoint.
In the browser, enter 23 24 e in the input field. Here we intentionally add both numbers and a letter to cause an error---these can't be added or multiplied.
Click Step over next function call.

On the screenshot, we can see that both sum and product have a NaN (not a number) value. This indicates that we have to fix our code right away.

Another Way to Set Breakpoints

In the majority of cases, your code is a lot longer and, perhaps, concatenated into a single line. For example, let's assume we have 1000 lines of code. In this case, setting breakpoints by clicking the line numbers every time looks pretty unrealistic, isn't it?

For this purpose, DevTools features excellent tool for setting breakpoints on events that occur when interacting with browser. On the JavaScript Debugging pane, click Event Listener Breakpoints to expand it with event categories.

As you can see, we've set a breakpoint on Mouse > click event anywhere in our code. So, without the need to manually add a breakpoint, when you click the Get Input Data button, the execution will be paused on this onclick event.

Clicking Step over next function call will sequentially lead us through the code used to process the click action.

Via Event Listener Breakpoints, you can set breakpoints at a variety of event types such as Keyboard, Touch, and XHR.

The "debugger" Keyword

When you type the debugger keyword anywhere in your code, Chrome DevTools will pause executing at that line and highlight it similarly to breakpoints. You can use this instrument to debug JavaScript in Chrome or other browsers. Just remember to remove the word from the code when you're done.

The code in the screenshot above will be paused on the line that contains the debugger word and will launch Chrome DevTools. That is equivalent to setting a breakpoint on that specific line of code. You can also manage the code execution using Step into next function call and Step over next function call buttons as we did before.

To Sum It Up

At the beginning, we considered console.log() and window.alert() and found them not really useful. We were supposed to use them a lot throughout the code, which could make the code heavier and slower if we forgot to remove these commands when commiting.

As the code grows, Chrome Developer Tools can be much more efficient to catch any bugs and evaluate the performance in general.

How to debug Angular

The easiest way to debug Angular code via Visual Studio Code (VS Code). To start debugging, you will need to install the Debugger extension to your Chrome browser:

Launch VS Code with your current project, open the Extensions tab. Or press Ctrl+Shift+X on your keyboard.
Enter Chrome in the search field.
From the search results, select Debugger for Chrome and click Install.
After you install the extension, the Reload button will appear. Click it to complete the installation and activate the Debugger in the browser.

Setting Breakpoints

Exactly as we did before, in the app.component.ts, click the line number to the left of the line. The set breakpoint will be denoted with a red circle icon.

Debugger Configuration

First, we'll need to configure the debugger:

From the File Explorer, navigate to the Debug view. You can also use Ctrl+Shift+D shortcut.
Click Settings icon button to create launch.json. That's the configuration file we'll use.
From the Select Environment drop-down, select Chrome. This will create a new .vscode folder with launch.json file in your project.
Launch the file.
To fit the file for our purpose, in the url method, change the localhost port from 8080 to 4200.
Save changes. Your file will look as follows:\
Press F5 on the keyboard or click Start Debugging button to launch the Debugger.
Launch Chrome.
Refresh the page to pause the code at the set breakpoint.

You can sequentially browse through the code using F10 button inspecting the variables and their change.

README

The Debugger for Chrome extension contains lots of info about additional configurations, working with sourcemaps, and resoling various issues. You can view them directly in VS Code by clicking the extension and selecting Details tab.

How to debug Back End (Node.js)

Here you'll find out how to debug Node.js code. Here are the most common approaches:

Using Chrome DevTools (well, that's by far our favorite).
Using IDEs such as Visual Studio Code, Visual Studio, WebStorm, etc.

We'll use VS Code and Chrome DevTools for illustration.

Chrome and Node.js use the same JavaScript engine, Google V8, which means we can use the tools we used for front end debugging.

To do this:

Launch your project in VS Code.
Navigate to Console tab.
Enter or paste npm start --inspect command and press Enter.
Ignore the suggested "chrome-devtools://..." URL (there is a better way).\
Launch Chrome and enter or paste "about:inspect". This will redirect you to the Devices page of DevTools.
Click Open dedicated DevTools for Node hyperlink.

The node.js debugging process is done the same way we did on front-end side using breakpoints. This is pretty useful that you don't need to switch to IDE. This way, both back end and front end can be debugged using the same interface.

Thanks for reading and hope you enjoyed this article. Subscribe to our updates, we have lots more cool stuff up in our sleeve :)

How to visualize SCADA with QSimpleScada? Free libary inside

Indeema Software — Thu, 01 Aug 2019 11:38:27 +0000

Enjoy and use Qt ;)

README: This library is created for desktop, mobile, and embedded projects developed on Qt. To use it, you should know Qt/ C++ and QML.

Introducing QSimpleScada

It was mainly created to quicken and, consequently, reduce the cost of IoT solution.

What is QSimpleScada?

Why do I need it?

Well, you do if you are a Qt developer or a company and:

Have strict deadlines and complex data evaluations at your project
Need to prototype mobile/embedded/desktop IoT projects often
Need a one-stop tool for diverse Qt projects
Don't want/have time/resources to develop dashboards from scratch

If neither of the above is about you, then you don't.

Why build IoT dashboards?

For example, on our UBreez we used QSimpleScada to visualize air readings. Compare the display for yourself. So, what looks more neat and clear even when comprising lots of sensor widgets?l

Using QSimpleScada

Here are the steps for integrating QSimpleScada version 0.9.x in your project:

Step 1: Install

Via package manager:

If you're building savvy solutions using Qt, you most likely use qpm package manager so no further chit-chat is required. In case you don't (yet), download it from here https://www.qpm.io

To install via qpm, run:

qpm install com.indeema.qsimplescada

And add:

include (../vendor/vendor.pri)

To *.pro file of your project.

As a bonus, try out our preset of widgets:

qpm install com.indeema.eeiot

From GitHub:

To clone the repo, go to:\
https://github.com/IndeemaSoftware/QSimpleScada\
To also add preconfigured widgets, clone:\
https://github.com/IndeemaSoftware/EEIoT

And add:

include($$PWD/com/indeema/QSimpleScada/com_indeema_QSimpleScada.pri)

include($$PWD/com/indeema/eeiot/com_indeema_eeiot.pri)

To the *.pro file.

Using binary release:

https://github.com/IndeemaSoftware/QSimpleScada/releases

Step 2: Configure

Once you download and install the library to your project:

1. Create a new device that is going to be represented on your dashboard. Give it a name and it IP address:

QScadaDeviceInfo *lDeviceInfo = new QScadaDeviceInfo();

lDeviceInfo->setName("Test Device");

lDeviceInfo->setIp(QHostAddress("127.0.0.1"));

3. Call initBoardForDeviceIp method to create a new board for already appended device. If there is no device on specific IP, the board will not be created.

mController->initBoardForDeviceIp("127.0.0.1");

4. Set editable mode for your controller to enable creating, moving, and resizing the controllers.

mController->setEditingMode(true);

If the editing mode is enabled, the modal window will feature dotted background:

5. Add grid layout on your widget and then add your controller to that widget:

QGridLayout *mainLayout = new QGridLayout(ui->centralWidget);

mainLayout->addWidget(mController);

Working with widgets

We've also developed an EEIoT library with a set of preconfigured widgets. You can download it at https://github.com/IndeemaSoftware/EEIoT and try it out as a start.

To use a widget collection:

Call the function with url to QML resources to let the controller know the location of QML widgets:\
QMLConfig::instance.appendQMLPath(:/com/indeema/eeiot/EEIoT/);

You can access all the dynamic properties that form QML (mentioned in a metaData list) from QSimpleScada, so you can create your own complex dashboards fast and easy.

Step 3: Use

For example:

mController->openProject(QString :/com/indeema/eeiot/EEIoT/)

See QSimpleScada in action

Visit our GitHub profile to explore simple apps that show the work of QSimpleScada library:

### Weather app

This is a plain app that visualizes weather-related data of 3 widgets:

Temperature
Humidity
Pressure

To see the current readings for your city:

Enter your city followed by comma and country code as follows:\
Kyiv,ua

and click the Send button.

This will update temperature, humidity and pressure for your region.

Builder app

The code is also available at https://github.com/IndeemaSoftware/QSimpleScadaSample

More tools for you

Understanding and context

Spoiler: find the templates for project-related documentation, so you can communicate the requirements and turn them into actionable specifications with less effort.

Estimating the cost and time

Dev tools

Recap

At Indeema, we are accustomed to tight deadlines and challenging projects. And, being committed to creating savvy solutions, we gradually realized that:

Understanding comes first.\
Be curious. Clarify each requirement, no matter how evident you think it is. Make sure you do understand. Because you can design a logical and scalable architecture, write awesome clean code, and yet fail to convey the desired result. Devil is in the details (so make sure you leave no details unnoticed).
Reinventing the bicycle is futile.\
Each project contains unique challenges and requires out-of-the-box thoughts. And there's no need to develop everything from scratch. Why? Because you'll only cut the time you have to find and implement really challenging features, modules, and architecture.
Quality is a standard.\
Be responsible for your work. You are engaged in making the future. If you are a developer, test your code against specifications, against best practices, common sense, stability of the project, etc. And the same applies to any other role.

Thanks for reading & hope you enjoyed this article. Subscribe for updates and let us know what you're interested in.

Top 10 IoT sensors in 2019

Indeema Software — Tue, 19 Feb 2019 13:22:51 +0000

The collectible data includes those various signals that both animate and inanimate object can send to the IoT systems. Hence, the objects should have some highly specific signal-generating devices to share information within the IoT.

Original article - Top 10 IoT sensors in 2019

Why specific? Because of a wide range of signals they potentially can generate. Even such a complex system as human body perfectly fitted by evolution has different organs for processing various signals from the ambient environment. We are talking about sensors, the sensors used in internet of things, of course.

Where and what

Two basic types of interaction are inherent in all available sensors: measurement and control. In addition, these types distinguish the direction of data flows moving either from or to the end points. It corresponds well to how living organisms work: every action creates a reaction. The behavior of machines mimicking living beings looks similar when the IoT modus operandi takes place. However, the proportion between income and outcome data flows may significantly vary. And what determines the prevailing type of sensors in each case is a domain where one or another IoT system works. The following domains are used to be considered the most appropriate for IoT applications:

Autonomous vehicles

Smart homes

Wearables

Robotization of industrial manufacturing

Smart medical equipment

Remote tracking and monitoring

Optimization of energy generation and distribution

Alarming and security systems

Industrial prediction maintenance

Human-free defense systems and weapons

Retail and payments

Turning signals into Big Data

Mother Nature supplied humans with unique patterns on their fingers. However, we have no organ capable of detecting our fingerprints. This is so, probably, because humans have some different advanced capabilities of recognizing each other. Until quite recently, Touch ID sensors in our phones were one of the most reliable methods of user identification. This is an exemplary case of how the sensor industry transforms something naturally available into collectible data.

The IoT sensors list is continuously expanding since sensor manufacturers keep figuring out more and more signals that can be detected and utilized through various IoT solutions. New types of the internet of things sensors start combining the entire clusters of signals due to growing computation power of the IoT processors. The advanced security & monitoring systems, for example, are not limited with just optical sensors - motion, temperature, infrared radiation, sound, and weight constitute the properties that can be detected, measured, and identified by the complex IoT solutions through appropriate sensors. To name a few, the following sensors are popular among many IoT solution providers:

Proximity sensors

Infrared sensors

Humidity sensors

Gas sensors

Weight sensors

Vibration sensors

Temperature sensors

Level sensors

Pressure sensors

Motion sensors

Proximity sensors

The exact distance between objects is what proximity sensors can detect. The scope of applications of such sensors is really huge due to very property of space where we live - it is three dimensional. The methods of determining proximity depend on numerous factors importation in every given case. That’s why proximity sensor manufacturers can choose between different basic technologies providing such types of sensors as capacitive, inductive, ultrasound, and photoelectric. Everyone is probably familiar with how the proximity sensors work when it is necessary to fit your car into a free parking spot in a city center where cars are usually parked bumper to bumper. An auto-parking feature inherent in some non-budget cars is a good example of the IoT application of the proximity sensors.

Infrared sensors

Infrared sensors can work in both directions: detecting an external infrared radiation and emitting infrared radiation outside. Such sensors can detect surrounding objects through catching the heat the latter emit. Human body emits heat undetectable by our eyes. That’s why infrared sensors provide us with a unique ability to see through walls, for example. Many Hollywood sci-fi blockbusters (Terminator, Predator) used infrared vision effects to add impressive superhuman capabilities to their characters.

In a real life, the IoT infrared sensors are widely used in wearables (smart watches) to measure pulse and blood pressure. Many IoT solutions in healthcare are based on the infrared sensors when a blood leakage should be detected or body temperature is to be measured remotely, for example. The industrial IoT application of infrared sensors implies remotely operated overheat alarming along with non-contact temperature measurement. Asahi Kasei Microdevices, Murata, and Intersil are infrared sensors’ brands, to name a few.

Humidity and Gas sensors

These two types of sensors can be grouped for a reason. Both can detect leakages of either water or gases. Both are used to be applied to various air quality control systems that become more and more popular with regard to emerging urbanization. The recent hype around the Climate Change generates a growing demand in smart IoT solutions capable of monitoring living conditions both indoor and outdoor. Besides, one of the implicit impetuses for an extensive use of such gas sensors as, for example, CO2 detectors is the contemporary “staff efficiency rush” inherent in a corporate business sector where workability of personnel is directly correlated with the air quality in working premises. The IoT-based smart ventilation capable of regulating CO2 content automatically is becoming a must-have feature for such public spaces as libraries, gyms, shopping malls, hospitals, and corporate offices. Needless to say that humidity and gas sensors are indispensable for the air quality control and monitoring systems.

Weight sensors

We live on a planet having quite significant gravity that imposes certain limitations on mass of physical objects. That’s why no onshore living creature can be more massive that elephants nowadays. Weight measurement is important in a construction sector. Recollect that awkward moment when you have to leave an overcrowded elevator somewhere in a business center due to overweight detector which starts flashing if you are in. Namely weight sensors allow a secure exploitation of elevators. The IoT-based automation in every sector where bulk loading takes place can hardly cope without IoT weight sensors: overweight is dangerous for both dump trucks in open-pit mines and glass ampules at pharmaceutical enterprises. As regards our health, weight sensors are the integral parts of our bathroom scales that suggest us oftentimes to consider a less burger-intensive diet.

Vibration sensors

Vibration sensors help figuring out a secure level of resonance in the industrial equipment whatever type of motion takes place. It so happened that rotation became the main type of motion for any industry after the invention of a wheel about 2000 BC. Even a very precise rotating mechanisms generate a more or less intensive vibration. Predictive maintenance along with self-analyzing capabilities of robotic production lines constitute a wide field for the IoT technology providers. Continuous vibration monitoring tells a lot about the current state of equipment. The one who controls vibration controls both the cost-effective uninterrupted operation of equipment and its overall lifespan. Hence, IoT vibration sensors as an integral part of the industrial vibration diagnostic systems bring a hidden but significant profit through mitigating risks of accidents and unplanned downtimes.

Temperature sensors

Every automatic fire-fighting system includes temperature sensors. Smart IoT solutions for public premises (smart offices, smart stores, smart gyms, smart whatever else) cannot do without temperature monitoring. While a primitive but reliable bimetallic temperature sensor can signal about only a significant temperature increase in case of fire, a precise measurement of temperature for automatic air quality control requires more sophisticated digital IoT temperature sensors. Temperature sensors are fundamental for modern heating and conditioning systems both in premises and transport vehicles. What is a fancy smart thermostat in its essence? Nothing but a set of temperature sensors and data transmitters.

Level sensors

Yet another reason to remember about the global climate change is more frequent flooding happening throughout the world. Arctic ice is melting, sea level is rising. Water level detection is becoming crucial for coastal areas. Early detection and forecasting of flood is the domain where IoT solutions helps a lot. Level sensors constitute the primary end points from which water level data starts running to analytic software.

In general, level sensors are widely used in numerous fields where people deal with liquid substances. A fuel gauge in your car uses a similar level sensor as a huge gas tank at a fueling station contains. Automatic distribution of any liquid is often based on signals of two sensors: an upper level sensor and a bottom level one. Both capacitive and optical working principles are usually used in level sensors. We face effects of a level sensor several times a day visiting our toilets: a toilet tank stops getting water when its floating level sensor blocks water supply.

Pressure sensors

Those who travel a lot by air knows well that unpleasant feeling when your ears seem full of cotton. A slight decompression in a cabin creates such a feeling. It means that the air pressure in an aircraft differs from our natural pressure level on the ground. Perhaps pressure sensors work a little bit incorrectly in this case.

Since pressure as a physical property belongs to both gases and liquids, a list of domains where pressure sensors are used can be really impressive. Both household and industrial applications are present there. Automatic pressure control relates to a secure operation of such heating equipment as, for example, boilers, water heaters, and radiators. Blood pressure sensors are integrated in numerous smart devices for medical diagnosis. The tyre pressure indication is a fancy IoT feature inherent in modern smart cars. Even a daily weather forecast is incomplete without barometric pressure. And in each given case IoT pressure sensors are engaged.

Motion sensors

As we mentioned in the beginning of this post, some types of sensors have quite a long history. Motion sensors have evolved from Chinese tubular bells to sophisticated digital devices operating on ultrasonic, microwave, photovoltaic, and infrared working principles. Security alarm systems having motion detection are widely used in museums, warehouses, dangerous areas, and in many other places where unauthorized entry is prohibited. IoT manufacturers equip both industrial and household lighting systems with IoT motion sensors to provide an automatic non-contact switching on/off the light. In addition to a positive user experience, a significant energy reduction can be achieved due to the smart lighting based on motion sensors.

Another promising domain where motion detection is gaining momentum is touchless gesture control of modern gadgets. Fitness trackers are capable of recognizing whether we stay, walk, or run. After getting rid of a 3.5 jack from iPhone 7, both Apple and the other smartphone manufacturers started eliminating physical control buttons one by one from their devices. The day will soon come when mobile gadgets become total screens operated by our facial expressions. Motion sensors will rule then.

Irrespective of types of IoT sensors, any end point is where the IoT begins. Sensors generate primary signals that reflect one or another property of objects where sensors are installed. No sensors - no data. The wider variety of sensors appears, the more flexible IoT development is provided. We greatly appreciate our natural sensors - eyes, ears, fingers etc being afraid of losing any of our sensory capabilities. The industrial IoT sensors described above constitute just a tiny part of all available data-generating devices. Nevertheless, a deep expertise even in a given brief list of sensors enables any IoT solution provider to create powerful IIoT systems for a broad range of applications.

Tags: IoT, Sensors, IIoT, Internet of Things

Why do you need to use Microsoft Azure IoT Suite?

Indeema Software — Wed, 13 Feb 2019 09:02:51 +0000

Smart is a household word for Internet of Things and it implies the interconnectivity between various devices and users. This leads us to infrastructure of any IoT solution — hardware, firmware, and software parts. While hardware and its associated firmware is vastly diverse, there are a few powerful IoT service providers such as Microsoft, Amazon, and IBM.

Original article - Microsoft Azure IoT Suite: Benefits and Features

Indeed, there is also quite a number of small and middle-sized custom solutions for IoT, but the majority still uses one of the above platforms as their IoT development basis. And that’s logical — why reinvent the wheel if these IoT-as-a-Service solutions are reliable and backed by digital giants.

The question is how to choose between major service providers to satisfy the demands of a particular project best. That is, frankly, determining if the service has the features and capabilities needed. This time, let’s take a close look at Microsoft Azure IoT Suite.

MS Azure IoT at a Glance

Microsoft is rightfully considered as one of the major IoT service market players. It’s Azure IoT Suite helps to develop various custom IoT products and easily evaluate their final cost. The deployment of any architecture is also fast and simple.

Microsoft Azure IoT services include:

You can integrate these services to most operating systems and devices; collect and analyze torrents of data and then use it for real-time predictive analytics. Sounds impressive, doesn’t it?

To see for ourselves if that’s really the case, let’s examine the services one by one.

IoT Hub

Any IoT solution has central communication node. With Microsoft Azure IoT platform, that’s IoT Hub. It provides two-way device-to-device communication— telemetry between all available devices and Azure platform. Using advanced hub capabilities, you can create complex IoT solutions at scale. For example, complex software for managing industrial machinery, monitoring premises in offices, and maintaining smart homes.

You can monitor your connected network, track various events, and receive alarms in case of any issues. To securely transfer data, Azure IoT Hub uses SAS token-based authentication of two basic standards-based types:

For secure authentication —Individual X.509 certificate
For simple enrollment — X.509 CA authentication

Besides, inbuilt routing functions of Azure IoT provide flexible messaging adjustment.

## Using Azure IoT device SDK

The SDK supports:

Linux, Windows, and real-time operating systems
C, C#, Java, Python, Node.js
HTTPS, AMQP, AMQP over WebSockets, MQTT, MQTT over WebSockets protocols

For devices that don’t support these protocols, you can configure the hub to work with custom protocols using Edge and Azure IoT protocol gateway.

Combining IoT Hub with Other MS Azure Services

You can use IoT Hub as a basis for various project architectures and:

Get fast responses on critical events using Azure Event Grid
Automate business processes with Azure Logic Apps
Add ML and AI models using Azure Machine Learning
Stream transferring data from connected devices and compute logical analysis in real time using Azure Stream Analytics

IoT Edge

Use cloud-based AI service from Azure to fully manage your cross-platform projects. The main point is that devices are always on regardless if cloud is enabled or not. Azure IoT device management automatically synchronizes with latest state of devices when they are connected to the cloud thus providing seamless functioning of any related solution.

The MS Azure IoT Edge consists of:

IoT Edge Modules — Containers that run Azure and 3rd-party services, custom code. Deploying those on the connected devices allows to run them locally.

IoT Edge Runtime — Controls the deployed modules at every device.

Cloud-based interface —UI for remote monitoring and management of devices.

Indeed, when monitoring and data collection run locally, handling analytics partially on the edge is really useful. This feature allows reacting on incoming data as well as making relevant decisions faster even with cloud disabled. Besides, the data transfers cost can be significantly reduced since data filtering occurs locally.

## IoT Central

Azure IoT Central Software-as-a-Service helps to build and manage any kind of IoT-based projects. At its core, any Azure IoT solution consist of:

A program that receives telemetry from and operates the devices.

A certain number of devices connected to the program on which a particular code runs.

Azure IoT Central helps create a new application (program) quickly. You can easily customize application to your requirements directly in browser.

## MS IoT Central Roles

This service shares the operational authorizations between the following user roles:

Using this hierarchy, a lot of mundane tasks can be simplified. For example, as a Builder, you can create templates for connecting devices to your program and reuse it for adding new similar devices.

Azure IoT Solution Accelerators

These accelerators imply a set of ready-to-deploy solutions for general scenarios such as remote monitoring, connection arrangements, and maintenance of devices. The deployment of solution accelerators encompasses all necessary services of a cloud infrastructure along with any related program code.

Remote Monitoring Accelerator

Useful for collecting telemetry from, and setting up management of, remote devices such as smart home climate control sensors and industrial sensors at assembly lines.

Using dashboard, you can track measurements from connected devices, set up new edge points, and update devices firmware.

Connected Factory Accelerator

Collecting and managing remote readings from industrial assets with OPC Unified Architecture interface via informative dashboard. The assets can include assembly stations and test areas on a factory production line.

Predictive Maintenance Accelerator

Forecasting and preventing failures of remote devices using machine learning algorithms. You can apply this accelerator on solutions to operate various important moving mechanisms such as aircraft engines.

The Predictive Maintenance dashboard displays analytics based on the information received from the predicting system.

Device Simulation Accelerator

Simulators. This accelerator is great at imitating the devices by creating realistic telemetry. It’s a great service to mitigate real-life risks in real life by checking and adjusting the behavior of other accelerators along with custom IoT solutions.

You can use a web application for modeling various systems.

The most awesome thing is that the source code of all solution accelerators is open and available on GitHub. You can download, set up and integrate them to your project’s requirements.

Azure IoT Hub Device Provisioning

This supporting service provides remote access to the necessary IoT Hub without user interaction. Using this complementary service, you can securely connect and set up the devices in IoT Hub at scale.

As with all other Microsoft Azure IoT platform services, the Device Provisioning supports:

Various operating systems and platforms

HTTPS, AMQP, AMQP via WebSockets, MQTT, MQTT via WebSockets protocols for device connection

HTTPS connections for service operations

There are multiple scenarios available such as:

Below you can find a scheme of how Azure IoT Hub Device Provisioning can work:

Explore step-by-step scheme of Azure IoT Hub Device Provisioning

In the Azure portal, the manufacturer adds the device to the enrollment list for
The factory’s provisioning set receives and passes the necessary identification info about device to the service.
The device’s identity is validated using registration ID and key against the enrollment list with either standard X.509 verification or nonce challenge (Trusted Platform Module).
The service registers the device to the hub and fills in its desired twin state.
Provisioning service receives the device ID from and sends connection information to the hub.
Not the device can send data to the associated hub.
Upon connection, the device receives the desired state from its twin.

If you want to Connecting Raspberry PI via MS Azure IoT then read our step-by-step guide - Connecting Raspberry PI via Azure IoT: Step-By-Step Tutorial

DEV Community: Indeema Software

Giving a presentation with perfect UI/UX design

1. Your personality

2. Right Place, Time and People

3. KISS and Less is More

4. Use white space and play with user attention

Typography

Font types

Font size

And last font hint

Images

Colors

Slide composition

Conclusion

How to create IoT startup: Step-by-step guide

Before we start

Shape idea into set of goals

First steps

Find potential users

Find development team

Prepare technical specification

Design the product

Hardware design

Software design

Prototype and test concepts

Software development

Create 3D model

Start beta testing

Launch MVP

Ready, set, production

The end? Definitely not!

SCADA visualization for IoT projects [Free Library]

Introducing QSimpleScada

What is QSimpleScada?

Why do I need it?

Why build IoT dashboards?

Using QSimpleScada

Step 1: Install

Step 2: Configure

Step 3: Use

See QSimpleScada in action

More tools for you

Understanding and context

Estimating the cost and time

Dev tools

Recap

IoT dashboard library: visualize SCADA at a snap [Free IoT library inside]

Introducing QSimpleScada

What is QSimpleScada?

Why do I need it?

Why build IoT dashboards?

Using QSimpleScada

Step 1: Install

Step 2: Configure

Step 3: Use

See QSimpleScada in action

More tools for you

Understanding and context

Estimating the cost and time

Dev tools

Recap

How we created IoT system for managing solar energy usage

Introducing IoT system for visualizing and optimizing solar energy consumption

Absolute prerequisite

The mission

Challenges and specifics of implementing IoT system for energy consumption

From scratch to production, and beyond

Less than a year from launching

Behind success any IoT project

The non-primitive approach of Amazon: How AWS IoT meets IoT challenges

What is AWS IoT

AWS IoT Button

AWS IoT 1-Click

Amazon FreeRTOS

AWS Greengrass

AWS IoT Device Management

AWS IoT Device Defender

AWS IoT Analytics

AWS IoT Core

UICollectionView Tutorial: Changing presentation on the fly