Develop your IoT app using Ionic Framework and Evothings Studio

Hammad TariqBlogs, Tutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

ionic_logo

In this tutorial you will learn about the Ionic Framework, and how to use Evothings Studio for rapid development of IoT apps running on modern smartphones. When we develop HTML5-based mobile apps, we can either roll our own code or choose between a number HTML frameworks and libraries, high-level libraries offering easier develop mobile-optimized user interfaces and native­-like functionality.

The Ionic framework is one of the most popular development frameworks out there; it’s open­ sourced and combines many modern web technologies; it’s built with Sass and optimized for AngularJS, it also offers both a minimal DOM manipulation tools and hardware accelerated transitions, the result is a robust framework which also provides many CSS and JavaScript components to build native like mobile apps.

Evothings Studio is as you probably know by now, built to rapidly create and prototype IoT apps. It allows you to develop and run a basic app in under 5 minutes time. It’s easy to use and saves you from doing lengthy package installations. When we combine the powerful SDK of Ionic Framework with Evothings Studio, we get an environment which is seriously built for developing performance-focused mobile apps.

Using Ionic Framework with Evothings Studio

Start by downloading (or cloning) the Ionic App Base from its Github repository. Once downloaded, just save the app to your favourite work directory on your computer and follow these basic steps:

  1. Download Evothings Workbench (if you haven’t already)
  2. Download Evothings Client app (from Android, iOS app stores)
  3. Connect Evothings Workbench with Evothings Viewer app by following the in-app instructions
  4. Go to Ionic App Base directory and drag the “index.html” file to Evothings Workbench, which will create a new project entry
  5. Click “Run” button along­side the Ionic App Base project, that will load the app into your Evothings Client
  6. Open “index.html” of Ionic App Base in your favourite code editor to make a change, the Evothings Studio will immediately reflect the change in Evothings Client

As a final step towards running your own Ionic/Evothings app, explore the Ionic Framework docs to see which JavaScript, CSS components and tools are available to facilitate the development of your IoT app. Let’s suppose, you want to include tabs for multi­-page navigation in your app, for that, simply follow the tabs example in the docs section of Ionic Framework. For your ease of use, I have used the same example code and pre­-packaged it with Ionic App Base; just download the prepared Ionic kitchen sink example code directory from my Github account, drag the “index.html” into Evothings Workbench and press the “Run” button to see the tabs example running in your Evothings Client.

Get more examples and tutorials under evothings.com/developer, happy coding!