Software apps and online services | ||||||
 |
| |||||
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 StudioStart by downloading (or cloning) the Ionic App Base from its Github repository. This is the head section, with links to scripts and stylesheets. If you're unfamiliar with github, just go one folder up and zip down all my examples.
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Kitchen Sink Example</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script>
// Redirect console.log to Evothings Workbench.
if (window.hyper && window.hyper.log) { console.log = hyper.log }
</script>
</head>
Once downloaded, just save the app to your favourite work directory on your computer and follow these basic steps:
- Download Evothings Workbench (if you haven’t already)
- Download the Evothings Viewer app (search for "evothings viewer" app stores)
- Connect Evothings Workbench with Evothings Viewer app by following the in-app instructions
- Go to Ionic App Base directory you've downloaded and drag the “index.html” file to Evothings Workbench, which will create a new project entry
- Click “Run” button alongside the Ionic App Base project, that will load the app into your Evothings Client
- 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. From here it's up to you, edit your code and see update changes directly in the Ionic project in Evothings Viewer on your mobile device.
Get more examples and tutorials under evothings.com/developer, happy coding!
Comments
Please log in or sign up to comment.