Learn how to build your first IoT application using Node-RED and IBM Watson Services. This workshop will begin with an introduction to Node-RED, a browser-based graphical flow editor of drag-n-drop blocks (called a node) of functionality. Node-RED (nodered.org) is an open-source community project built on top of the Node.js runtime. The workshop will dive into the Watson IoT dashboard to visualize data and Node-RED dashboard to build a UI interface.
AGENDA
12:00 – 12:50pm: Registration and Lunch 12:50 – 1:00: Intro/welcome from Max Katz, IBM Program Director, Developer Advocacy (@maxkatz) 1:00 – 1:30: Let’s Learn about Node-RED, JeanCarl Bisson, IBM Developer Advocate – Bluemix/Watson Developer Ecosystem (@dothewww) 1:30 – 2:30: IoT Starter Lab 2:30 – 3:00: Break 3:00 – 4:00: Watson IoT Dashboard 4:00 – 5:00: Node-RED Dashboard and Advanced Topics
As we are starting 2017, we want to let you know about all the Appery.io resources available to you, to help you build you app faster and easier. These resources are being updated with new content all the time, so we definitely recommend subscribing to updates or following them. This way you will be always up to date with what is happening. Let’s get to the resources.
The docs site is the most important resources (obviously). The docs site contains the platform documentation, tutorials, and API reference section. We regularly update the content on this site. If you find a typo or an error, please use the Suggest Edits feature to tell us about it.
The docs site has a blog section (http://docs.appery.io/blog) where we usually post technical information such as API updates or library updates. The information is usually very technical and specific so it doesn’t go on the main blog. We will also post links to tutorials and videos.
The blog is one of the most important resources you should read. This is where we post platform updates, announcements, new videos, new tutorials, case studies and anything else. We definitely recommend you follow the blog to stay up to date. Following the blog is very simple. You can subscribe via the RSS feed or subscribe via email (you will get an email every time a new post is published).
This is our most popular resource. Our YouTube channel has over 200 short videos on various topics to help you build apps faster. Definitely subscribe to get updates when we publish new videos. The videos are organized into playlists:
Most of our videos are no longer than 15 minutes. This allows you to learn about a topic, feature or benefit very fast and you won’t be bored through an hour long example.
Appery.io platform status page shows each platform component and its current status. It’s important to bookmark or follow this page via RSS to always know the status of each component.
Twitter is where we post important announcements, platform updates, new tutorials, case studies, new videos and anything else. We recommend to follow up on Twitter to always stay up to date.
Facebook is very similar to Twitter. On Facebook we post important announcements, platform updates, new tutorials, case studies, and new videos. We recommend to Like us Facebook to always stay up to date.
This is a new resource and we will be posting a lot more in 2017.
What’s New Panel
And a bonus resource is our What’s New panel. The What’s New panel can be opened from any platform page from the header. The panel shows you the most recent updates, tutorials, and videos. Check this resource often to learn what’s new.
For years, developers had to make a choice: build a single hybrid app with a so-so user experience, or build a native app for each platform with a great user experience. Developers don’t have to make this choice anymore. By integrating the Ionic SDK into Appery.io, developers can build enterprise HTML5/hybrid apps on a single code base that offer a native experience across all platforms. The Appery.io platform’s visual tooling lowers the skills barrier, empowering a broader base of developers and business analysts to create effective and intuitive mobile applications.
In this tutorial, you will use the Appery.io platform to build a mobile app. The tool set includes:
Ionic – native-like UI components
AngularJS – UI logic/binding
Appery.io App Builder – cloud-based drag and drop designer
Appery.io Backend Services – API backend for the app
What are you building?
You are going to build a todo app. The app will have two pages. On the first page, you will be able to see a list of all tasks and also mark a task complete (delete it). On the second page, you will be able to create a new task. You can see how the app looks below. The first page lists all the tasks. You can also mark a task completed (delete it). On the second page you can add a new task.
Since Appery.io added support for Bootstrap and AngularJS, I have been using these frameworks a lot. Many years ago I have been using and teaching JSF and RichFaces frameworks. Surprisingly (or not), I see some concept similarities between AnguarJS and JSF. Obviously AngularJS and JSF are very different frameworks, but they do share some concepts. Let’s look at a simple example.
AngularJS defines the name model via the ng-model directive. The directive extends the functionality of HTML input element.
JSF defines the name model via the managed bean. <h:inputText> component extends the functionality of HTML input element.
{{echo}} and {{count}} are displayed using expressions and are bound (binding) to AngularJS scope. Both variables are set in AngularJS controller (similar to JSF managed bean)
#{echoBean.echo} and #{echoBean.count} are displayed using expressions and are bound (binding) to a managed bean inside JSF scope. Both variables are defined in JSF managed bean (similar to AngularJS controller)
ng-click references a function (defined in scope) to count the length of the input
actionListener references a function (defined in managed bean) to count the length of the input
AngularJS provides directives to extend HTML markup, JSF provides UI components to extend HTML markup.
As you can see some of the concepts are rather similar even though the syntax is different. Both frameworks define a view (page) that is bound to an object in a scope.
Obviously these are very high level similarities and you can probably argue that many other frameworks share the same concepts. One important difference between the frameworks is that AngularJS is a client-side framework while JSF is a server-side framework.
var myApp = angular.module('myApp1', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.countAction = function () {
$scope.echo = $scope.name;
$scope.count = $scope.name.length;
};
}]);
@ManagedBean(name="echoBean")
@RequestScoped
public class EchoBean {
private String name;
private Integer count;
public void countListener (ActionEvent event){
count = name.length(); }
}
// getters and setters
}
Appery.io teams up with Sirv for super fast and easy image processing for your mobile app:
Appery.io users can now take advantage of the dynamic imaging, responsive design, zoom and 360 imaging abilities of Sirv.
Images of any size can be generated by Sirv within 1/10th of a second and served to perfectly fit the screen proportions of whatever device the user has. It’s the fast and reliable way to fetch all your image content for your mobile apps (and your websites, blogs and eBay listings).
The Appery.io Customer Console allows app owners to edit app data and send push notifications. The app owner could be a business person who doesn’t necessarily want or need to access the development environment to make changes to the app data or send push notifications.
Customer Console features:
Instantly edit app data (edit, create, delete)
No need to use the developer database console
The developer can restrict what collections the app owner has access to. This will minimize errors
Set specific access permissions such as read, create, and delete
Send push notifications
Schedule push notifications to be sent later
The following two videos show how use the Customer Console:
Join us for this Bootstrap Tutorial to learn how to build a complete mobile app with the Appery.io cloud platform. We will build the mobile app UI with HTML5/jQuery Mobile using visual drag and drop builder. Connect to integrated mobile backend services, and to 3rd party APIs. Use Apache Cordova (PhoneGap) for native device features, and deploy the app. This is a live coding session where attendees will be able to test the app as its being built.
What you will learn:
How to build mobile app UI with HTML5/jQuery Mobile
How to use integrated mobile backend services (database, push, server code)
If you have been following the industry, there are over 30 Backend as a Service (BaaS) providers out there. BaaS makes it very easy and fast to create a (mobile) backend for an app. Features include an app storage (database), Push notifications, server code, user management, file management, and many other features. There is no double BaaS makes it very easy to setup a backend for your app. However, you will need more than just a brand new mobile backend when building an app. Equally important is being able to build a nice UI (HTML5, hybrid, native) for the app fast, and quickly connecting to any 3rd party APIs from the app. This includes connecting to enterprise data already exposed via APIs within your organization. As more and more enterprises start building mobile apps, connecting to existing enterprise data sources will become of the highest priority. The future mobile app platform will include: app dev. tools (UI) + BaaS, + APIs (enterprise, 3rd party). A good example of this direction is Facebook acquiring Parse. Facebook obviously provides a very rich API and now it also has a BaaS option.
You can now build jQuery Mobile apps in Tiggzi and export the app for Windows Phone (with PhoneGap).
VS Project is a Windows Phone PhoneGap project. We will be adding binary build as well. To get a binary, you have two options: 1) build it yourself; 2) take it to PhoneGap Build.
We are going to be at the Mobile World Congress in Barcelona, February 27 – March 1, 2012. Stop by our stand and learn how incredibly easy it is to build HTML5, jQuery Mobile, PhoneGap, and REST mobile apps using Tiggzi, the cloud-based mobile app builder. If you want, BYOR (Bring Your Own REST) and we will build a mobile app using your REST service.
