Cross-Platform Solutions and Rhomobile Platform

Cross-platform solutions and Rhomobile platform

● Mobile cross-platform solutions overview ● Introducing of Rhomobile platform ● How to start with Rhomobile Enterprise mobile development specific Enterprise devices

Consumer devices Special devices

● BYOD ● Win CE/WM still used

● Useful for many cases ● Migrate to Android

● iOS and Android dominate. ● A lot of software developed for WinCE/WM Enterprise mobile software specific

By the device set : 1. iOS, Android, WinCE/WM - not one OS. Different H/W level of devices. 2. Special H/W 3. Special peripheral

By software: 1. Sometimes just web portal is enough. 2. Access to special H/W 3. Databases synchronisation between mobile device and backend 4. Mobile application is just part of complex solution.

OLD GOOD LEGACY DEVICES What is mobile application place in enterprise solution

Mobile application is just part of complex solution !

mobile devices personal computers Backend servers

Browser PC data Server WEB Browser MD data

Application DB sync Application Other important things Cross-platform development is always a tradeoff!

+ + = + + + + Web technologies are dominate ! Mobile cross-platform solutions architectures Mobile cross-platform development architectures

SImple not cross-platform Web Native Hybrid Mixed Hybrid Native Application cross-platform Application cross-platform Application cross-platform Application cross-platform Application

Platform Browser UI Framework WebView Framework WebView platform dependent or UI HTML/CSS/JS code cross-platform UI + Logic code HTML/CSS/JS UI + Logic code Native code UI + Logic HTML/CSS/JS Logic Logic code cross-platform code cross-platform code

Framework Framework Framework

Platform API Platform API Platform API Platform API

iOS: ObjC, Swift, C++ a lot of Xamarin (C#) Cordova/PhoneGap RhoMobile Cordova/PhoneGap with Android: Java, C++ HTML/CSS/JS frameworks Appcelerator (JS) + a lot of jxCore plugin, WinCE/WM: C#, C++ React Native (JS) HTML/CSS/JS frameworks RhoMobile (Ruby/JS) NativeScript (JS) + a lot of QT (C++, QML) HTML/CSS/JS frameworks RubyMotion (Ruby) CodenameOne (Java) Corona (Lua) Extended Browser - solution for lightweight web applications

Sometimes we just need a lightweight web application with access to some H/W capabilities of device or some native API. RhoBrowser

Adding a set of APIs into device browser we get a solution to execute our lightweight web applications (HTML/CSS/JS). Rhodes WebView Some of device vendors already have this kind of solution. For instance, Zebra UI + Logic Technologies has Enterprise Browser (based on RhoMobile, not on Cordova, and HTML/CSS/JS supporting WM/WinCE): code

https://www.zebra.com/us/en/products/software/mobile-computers/mobile-app-utilities/e nterprise-browser.html local (open from filesystem) or remote (open from remote Honeywell also has similar product: http://www.intermec.com/products/ib/index.aspx server)

Rhodes Framework Tau Technologies has similar product - RhoBrowser, which runs on iOS, Android, WinCE/WM and supporting Zebra’s enterprise

devices (WM and Android) H/W capabilities like Barcode Platform API Peripherals scanner, RFID scanner etc. API Why cross-platform is good for enterprise development Cross-platform development

● cost reduce ● lower performance (not ● fast development actual for enterprise) ● OS specific supports by ● not modern OS UI (can be cross-platform solution solved by using of third-party provider JS solutions in hybrid ● small team platforms) ● reuse developers from other ● addiction from cross-platform directions (especially web solution provider (especially developers for hybrid for not open-source solutions) solutions)

Good choice for enterprise mobile development ! Benefits of cross-platform development

● Cross-platform native solutions can decrease development resources up to two times !

Problems of not-hybrid solutions :

● Developers must learn specific API/Language ● Application’s code can not be used out of solution Benefits of hybrid solutions

● Hybrid Cross-platform solutions (like Cordova or RhoMobile) can decrease development resources up to three times !

Important benefits :

● You can use existing web developers ! ● You can use already developed code from web applications (HTML/CSS/JS) ! ● You can transfer your code from web portal to application and from one hybrid solution to another without changes ! Solutions on market Solutions on market

Native Hybrid

RubyMotion QT

● C++/QML.

● Own cross-platform UI.

● Specific for native solution: ○ high performance ○ specific API Name QT ○ hard addictive to solution Provider QT Company

Website https://www.qt.io/

Type native

Source code full

Availability

Platforms Sailfish PhoneGap

● PhoneGap “based on” Apache Cordova - https://cordova.apache.org/. Cordova it is solution for provide JavaScript calls from WebView to Native code. One cross-platform code, each platforms provide the same API. ● Also some market players provide own solution based on Cordova : IBM, Intel, Oracle etc.

Name PhoneGap ● Very popular solution with wide support and large community Provider Adobe ● Leader on market hybrid cross-platform solutions Website http://phonegap.com/

Type hybrid

Source code full

Availability

Platforms Appcelerator

● Javascript (similar to Xamarin but based on Javascript instead of .NET).

● Performance.

● cross-platform UI framework Alloy

● Specific API, hard addiction to solution.

● Javascript not the same with web because different Name Appcelerator Titanium environment and APIs. Provider Appcelerator

Website http://www.appcelerator.com/

Type native

Source code

Availability

Platforms Xamarin

● Based on open source .NET(from Mono project) for mobile platforms

● High performance

● Has cross-platform APIs and platform dependent

Name Xamarin ● Developers can use platform dependent UI and cross-platform - Xamarin.Forms. Provider Microsoft

● Specific API, hard addiction to solution. Website https://www.xamarin.com/

● Leader on market native cross-platform solutions Type native

Source code full

Availability

Platforms NativeScript

● avascript (similar to Xamarin but based on Javascript instead of .NET).

● Performance.

● only platform dependent UI - JS wrappers to platform APIs

● Specific API, hard addiction to solution. Name NativeScript ● Javascript not the same with web because different environment and APIs. Provider Progress Software Corporation

Website https://www.nativescript.org/ ● Deep integration with Angular Type native

Source code full

Availability

Platforms Telerik

● Complex solution.

● Cloud components.

● NativeScript and Cordova

● Cloud services

Name Telerik Platform

Provider Progress Software Corporation

Website http://www.telerik.com/platform

Type hybrid / native

Source code

Availability

Platforms ReactNative

● JavaScript.

● Platform dependent UI - JavaScript wrappers to platform APIs

● Based on React.js

● Developers must learn specific platform’s APIs Name React Native Provider Facebook

Website https://facebook.github.io/react-native/

Type native

Source code full

Availability

Platforms CodenameOne

● Java.

● cross-platform UI.

● Cloud building

● free version has limitations

Name Codename One ● specific API Provider Codename One LTD

● hard addiction to solution Website https://www.codenameone.com/

Type native

Source code semi

Availability

Platforms CoronaSDK

● Lua.

● cross-platform UI.

● Cloud building

● free version for 2D games development

● specific API Name Corona SDK

Provider Corona Labs ● hard addiction to solution Website https://coronalabs.com/

Type native

Source code

Availability

Platforms RubyMotion

● Ruby.

● cross-platform & platform specific APIs.

RubyMotion ● Platform dependent UI.

● specific API Name RubyMotion

● hard addiction to solution Provider HipByte

Website http://www.rubymotion.com/

Type native

Source code

Availability

Platforms Kony

● Complex solution

● Cloud components

● Native or Cordova or Web

● Rich set of services (database related, analytics etc.)

● Data synchronisation Name Kony Mobility Platform

● Development studio, tools Provider Kony

Website http://www.kony.com/

Type hybrid / native

Source code

Availability

Platforms Rhomobile

● Hybrid and mixed-hybrid modes

● Ruby on Rails with local HTTP server on mobile device !

● DB synchronisation between mobile application and remote backend server Name Rhomobile ● Complex solution oriented to enterprise. Provider TAU Technologies

Website http://tau-technologies.com/

Type mixed hybrid

Source code full

Availability

Platforms

Sailfish From hybrid architecture to mixed-hybrid architecture Problems of hybrid solutions

Main problem is all code and data is inside WebView

Big application like big web Application will have low performance will run in single thread etc.

Web-based UI does not look and feel like native one Not a big deal for in-house enterprise apps; Javascript UI frameworks can look almost like Native UI

Different web browser versions

Use own browser, Crosswalk for instance (https://crosswalk-project.org/) RhoMobile has own WebKit port for WinCE/WM. JS Frameworks also help. Mixed-hybrid architecture

Mixed Hybrid How we can solve main problem of hybrid solutions ? cross-platform Application

Extract not-UI code from WebView into separate threads and Framework WebView UI container ! HTML/CSS/JS code

Mixed-Hybrid solution do it ! Logic cross-platform code

Framework

But how make it ? Platform API What language should we use ? How UI in WebView should be connected to logic and data ? Client-Server web application

Wait a minute. We have a web browser with HTML/CSS/JS code and separate logic/DB ? But this is well known client-server architecture for web applications !

We have a lot of already existing code for this platforms. We have a lot of experienced developers for this platforms. We already used this in our web applications etc.

Remote server Platform Browser

HTML/CSS/JS app code

JS frameworks From remote server to local !

Web application with Native application with remote server backend mixed hybrid architecture

Mobile device Remote server Mobile device

Platform Browser Framework WebView UI HTML/CSS/JS code

Logic UI Server code based HTML/CSS/JS on Logic code Ruby on Rails cross-platform code or local server Node.js Ruby on Rails / Node.js

Framework

Platform API Ruby on Rails from Client-Server with remote server

Platform Browser Remote server HTML/CSS/JS app code

+ Web server JS frameworks

routing

controller view public

model

Platform API DB Ruby on Rails to Client-Server with local server on device !

RhoMobile WebView

HTML/CSS/JS app code + JS frameworks Hybrid architecture. UI implemented with web RhoMobile API RHODES technologies inside WebView. Web server Developers can use any JS frameworks. routing We have local HTTP server with controller view public Ruby VM on our mobile device. model Ruby code executed on mobile device. RhoMobile API DB Node.js from Client-Server with remote server

Platform Browser

HTML/CSS/JS Remote server app code

+ Node.js application - HTTP server JS frameworks

Node.js core DB Node.js to Client-Server with local server on device

Rhomobile WebView

HTML/CSS/JS app code + JS frameworks Hybrid architecture. UI implemented with web RhoMobile API RHODES technologies inside WebView.

Developers can use any JS frameworks. Rhodes Node.js environment We have local JS VM and Node.js environment. Node.js application - local HTTP server Node.js application starts local HTTP server. RhoMobile API DB Node.js mixed-hybrid solutions on market Node.js based desktop solutions

Hybrid solutions to make desktop applications based on Node.js

name NW.js name Electron

developer NW.js community developer Electron community

type hybrid type hybrid

source code full source code full

price price

website http://nwjs.io/ website http://electron.atom.io/

Supported platforms Linux, Mac OS X, Windows Supported platforms Linux, Mac OS X, Windows Node.js based mobile solutions

Rhodes use jxCore Node.js port for iOS and Android platforms. JXCore - already closed project. Currently still alive fork - Thali Project (sponsored by Microsoft) JXCore FAQ: http://www.goland.org/jxcore/ Also jxCore has Cordova plugin: https://github.com/jxcore/jxcore-cordova

Name JXCore Name Thali

Provider Nubisa (прекращено) Provider Thali (спонсирует Microsoft)

Type Node.js порт Type гибридный (Cordova +JXCore)

Source code full Source code full

Availability Availability

Website https://github.com/jxcore/jxcore Website http://thaliproject.org/

Платформа Платформа Rhomobile mixed-hybrid solution Key facts about Rho and Tau

2008 RhoMobile founded 2011 RhoMobile acquired by Motorola Solutions. 2014 RhoMobile acquired by Zebra Technologies as part of Motorola’s enterprise business. 2015 Tau Technologies founded by RhoMobile team members. 2016 Zebra open-sourced RhoMobile. RMS 5.4 is the last release by Zebra. Tau becomes Zebra’s technology partner and main contributor of RhoMobile. See details: Zebra: RhoMobile Open Source FAQ RMS 5.5 released by Tau in September 2016. RMS 6.0 released by Tau in September 2017. This is the current full-featured release. RhoMobile Suite 7.0 is coming in September 2018!

2008 2011 2014 2015 2016 2017 What is RhoMobile now

= + + +

TAU RHOMOBILE RHODES RHOSTUDIO EXTENSIONS RHOCONNECT RHO BROWSER SUITE

MIT-licensed open source and free solution for cross-platform development. Hybrid or mixed hybrid approach for creation of mobile and desktop apps. Includes extendable programming platform, IDE, data sync solution and industrial web browser. Supports iOS, Android, Sailfish, WinCE/WM, WP8, UWP, Windows desktop and soon - OS X and desktop Linux.

RHOMOBILE SUITE

RHODES RHO BROWSER RHO STUDIO RHO CONNECT TAU EXTENSIONS

Rhodes Tau Extensions ● Solution for development of mobile cross-platform Additional modules include: hybrid and mixed-hybrid applications ● Crosswalk WebView for Android (replaces ● Developers can use just HTML/CSS/JS (like Cordova), system WebView in application) and also use Ruby in Ruby on Rails like environment ● Own port of WebKit for WinCE/WM (replaces ● Includes a lot of modules with support for different APIs system IE in application) like Barcode, Printing etc. ● improved OpenSSL for Android ● Support iOS, Android, WinCE/WM, WP ● module with Node.js based on jxCore ● Own port of Ruby 2.3.3 VM Installation of RhoMobile Before installation please install all prerequisites into your system. Details: http://docs.tau-technologies.com/en/6.0/guide/rhomobile-install http://docs.tau-technologies.com/en/6.0/guide/nativesdksetup

There are three ways to install RhoMobile - please install our latest release 6.0 :

● Download and install our all-in-one installation package. http://tau-technologies.com/developers/downloads/

● Install gems manually

$ gem install rhodes $ gem install rho-tau-extensions $ gem install rhoconnect $ gem install rhoconnect-client

● Download source code from GitHub(you should manually define path to rhodes in applications) Source code : https://github.com/rhomobile/rhodes

After install you should set up paths to mobile SDKs:

$ rhodes-setup Mobile cross-platform application with Ruby Generate simple application

Let’s make our application: (see details: http://docs.tau-technologies.com/en/6.0/guide/creating_a_project) :

$ rhodes app MyApp

rhodes - command line tool for generating : applications, models, extension. Generated code is fully workable and can be built and run. Look into generated application

MyApp We get MyApp folder where located generated app application’s code, resources etc. loading.png helpers Settings index.erb layout.erb application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Look into generated application

MyApp app “app” folder contains application’s code - *.ruby and loading.png *.erb (templates) files helpers Settings In runtime this folder is located under root of local index.erb HTTP server. layout.erb application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Look into generated application

MyApp app loading.png helpers Folders with helper ruby files Settings index.erb layout.erb application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Look into generated application

erb template for index page (start page in application by default) Used two steps HTML generation : MyApp Page template contains only content, and shared other parts and loading of app CSS,JS in separate erb template layout loading.png helpers Settings

index.erb

layout.erb

application.rb

loading.html

public icon resources Add link here... ios android

rhoconfig.txt

AndroidManifest.erb

build.yml Rakefile Look into generated application

erb template for all pages (can be overriden in each controller)

MyApp app helpers Settings index.erb layout.erb MyApp loading.html public loading of CSS and JS ... icon resources

ios android <%= @content %> rhoconfig.txt AndroidManifest.erb framework places generated build.yml page content here Rakefile Look into generated application

application class code - activation, deactivation etc.

MyApp app require 'rho/rhoapplication' loading.png helpers class AppApplication < Rho::RhoApplication Settings index.erb def initialize layout.erb # Tab items are loaded left->right, @tabs[0] is leftmost tab in the tab-bar application.rb # Super must be called *after* settings @tabs! loading.html @tabs = nil #To remove default toolbar uncomment next line: public #@@toolbar = nil icon super resources

ios end android

rhoconfig.txt AndroidManifest.erb end build.yml Rakefile Look into generated application

folder with static files of local HTTP server: CSS, JS, images etc.

MyApp app public loading.png css helpers images Settings jqmobile index.erb jquery layout.erb js application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Look into generated application

folder with resources used for application build: icon, splash image, iTunes image etc. MyApp app See details in documentation: loading.png helpers http://docs.tau-technologies.com/en/6.0/guide/app_icon_splash Settings index.erb http://docs.tau-technologies.com/en/6.0/guide/build_ios layout.erb application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Look into generated application

application’s configuration - used in run-time

MyApp # startup page for your application app start_path = '/app' loading.png

helpers options_path = '/app/Settings' Settings

index.erb # Rhodes log properties layout.erb MinSeverity = 1 application.rb LogToOutput = 1 loading.html MaxLogFileSize=50000 public logserver = 'http://rhologs.heroku.com' icon logname='MyApp' resources ios syncserver = '' android sync_poll_interval=0 rhoconfig.txt AndroidManifest.erb ... build.yml Rakefile Look into generated application

template for application’s Android manifest. See details: MyApp http://docs.tau-technologies.com/en/6.0/guide/build_android app loading.png helpers Settings index.erb layout.erb application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Look into generated application

Build configuration - settings used for application building, enable/disable capabilities, link extensions etc. MyApp app name: MyApp loading.png version: 1.0 helpers vendor: rhomobile Settings build: debug index.erb applog: rholog.txt

layout.erb capabilities: application.rb - camera loading.html public iphone: configuration: Release icon sdk: latest resources BundleIdentifier: com.rhomobile.myapp ios BundleURLScheme: myapp android rhoconfig.txt android: version: 4.1.0 AndroidManifest.erb logcatFilter: APP:I StrictMode:I DEBUG:I *:E build.yml Rakefile extensions: [] Look into generated application

Standard Ruby script for rake commands (build, run, etc.)

MyApp app loading.png helpers Settings index.erb layout.erb application.rb loading.html public icon resources ios android rhoconfig.txt AndroidManifest.erb build.yml Rakefile Add some DB to application

Let’s add simple DB model to our application - Rhodes generator makes model Ruby file and set of views (erb files) for view, edit, delete etc. (details: http://docs.tau-technologies.com/en/6.0/guide/rhom_ruby)

Run Rhodes generator from application’s folder :

$ rhodes model Product name,brand,price Look into generated code

You can see some new content in app folder: Product folder with set of files

MyApp app Product product.rb product_controller.rb index.erb show.erb new.erb edit.erb Look into generated code

This file contains model definition code. PropertyBag scheme is used by default.

MyApp app # The model has already been created by the framework, and extends Rhom::RhomObject # You can add more methods here Product class Product product.rb include Rhom::PropertyBag

product_controller.rb # Uncomment the following line to enable sync with Product. index.erb # enable :sync

show.erb #add model specific code here new.erb end

edit.erb Look into generated code product_controller.rb - Ruby code for controller class. Contoller’s methods are called from WebView by URL like

MyApp /app/Controller/method and return HTML page generated from erb template app named method.erb by default ( can be overridden by controller’s code ). If method is not exists then simple content generation used by erb template. Product

product.rb require 'rho/rhocontroller' require 'helpers/browser_helper' product_controller.rb index.erb class ProductController < Rho::RhoController Find all object from Product include BrowserHelper show.erb model new.erb def index @products = Product.find(:all) edit.erb render :back => '/app' end @params - hash with all parameters of request (query def edit part of URL) @product = Product.find(@params['id']) if @product render :action => :edit, :back => url_for(:action => :index) else redirect :action => :index end end

… Look into generated code

set of views - erb templates to generate main model access pages. MyApp index.erb is default page. Controller’s index functions also executed by default, app when local server answer request like /app/Controller/ Product product.rb

product_controller.rb

index.erb … enumerate all objects from

model and make HTML list with show.erb

links to view each object new.erb

edit.erb <% @products.each do |product| %>

<%= product.name %>

<% end %>

Final setup

FInal change - modify our application start URL in rhoconfig.txt to Product page:

# startup page for your application start_path = '/app/Product' Prepare to run

Let’s run our application on iPhone Simulator:

$ rake run:iphone

Also you can generate XCode project and use XCode for build/run etc. Generate XCode project :

$ rake rake build:iphone:setup_xcode_project

Generated XCode project located in: MyApp project iphone

MyApp.xcodeproj

Details: http://docs.tau-technologies.com/en/6.0/guide/build_ios Run

Run application on Android Emulator:

$ rake run:android

Build and run application on USB-linked Android device :

$ rake run:android:device

Details: http://docs.tau-technologies.com/en/6.0/guide/build_android Result

Application’s screenshots: Mobile cross-platform application with Node.js Generate simple application

Let’s make our application with Node.js: (see details: http://docs.tau-technologies.com/en/6.0/guide/creating_a_project) :

$ rhodes nodejsapp MyApp

rhodes - command line tool for generating : applications, models, extension. Generated code is fully workable and can be built and run. Look into generated application

MyApp We get MyApp folder with application’s code, resources etc. nodejs server public bootstrap-3.3.7 images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

MyApp This folder contains Node.js application main files and additional nodejs files server public bootstrap-3.3.7 images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

MyApp This folder contains Node.js application files nodejs This folder is also root folder of local Node.js HTTP server server public bootstrap-3.3.7 images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

MyApp This folder contains static files of local Node.js HTTP server - nodejs CSS, JS, images etc. server public At build time an ‘api’ folder will be added here with Rhodes API JS bootstrap-3.3.7 files. images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

app.js main file of Node.js application - this file will be executed on start. Developer should start local HTTP server with predefined MyApp port here and call notify of Rhodes API. nodejs server public bootstrap-3.3.7 var server_port = Rho.System.NodejsServerPort

images var path = require('path'); jquery var express = require('express'); var app = express(); app.js

package.json app.use('/public', express.static(path.join(__dirname, 'public'))); main.js app.get('/', function (req, res) { rhoapp.js res.send('Hello World! (' + Date.now() + ")"); resources });

ios var server = app.listen(server_port, function () { android Rho.Log.info("Express server is started. (port: "+server_port+")", "Node.js JS"); // application must be inform RHomobile platform about starting of http server ! build.yml Mobile.httpServerStarted(); rhoconfig.txt });

AndroidManifest.erb

Rakefile Look into generated application

MyApp nodejs package.json - file with Node.js application’s main properties. Same with usual Node.js application. server Contains all used modules. public

bootstrap-3.3.7 images { jquery "name": "rhonodejsapplication", app.js "version": "0.0.1", "private": true, package.json "dependencies": { main.js "express": "*" rhoapp.js } } resources ios

android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

MyApp nodejs main.js - core init code, also includes init of Rhodes API. Developer must not change this file! server

public

bootstrap-3.3.7 images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

MyApp nodejs rhoapp.js - this file is executed during application initialisation. By default contains code for setup of main application’s event server processing - activate, deactivate etc. Developer can change this public file. bootstrap-3.3.7 Below you can see part of code where we make Native Toolbar in images our application when application is activated (it is native platform jquery Toolbar) app.js package.json … main.js function onRhomobileApplicationActivated() { rhoapp.js Rho.Log.info("Node.js event : APP_EVENT_ACTIVATED", "Node.js JS App"); resources var native_toolbar = [ ios {"action": "back", "icon": "/nodejs/server/public/images/bar/back_btn.png"}, android {"action": "separator"}, {"action": "home", "icon": "/nodejs/server/images/bar/home_btn.png"}, build.yml {"action": "refresh"}, rhoconfig.txt {"action": "options", "icon": "/nodejs/server/images/bar/gears.png"} ]; AndroidManifest.erb Rho.NativeToolbar.create(native_toolbar); Rakefile }

... Look into generated application

folder with resources used for application building: icon, splash image, MyApp iTunes image etc. nodejs See details in documentation: server

public http://docs.tau-technologies.com/en/6.0/guide/app_icon_splash bootstrap-3.3.7

images http://docs.tau-technologies.com/en/6.0/guide/build_ios jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

Build configuration - settings used for application building, enable/disable capabilities, link extensions etc.

MyApp nodejs name: MyApp version: 1.0 server vendor: rhomobile public build: debug bootstrap-3.3.7 applog: rholog.txt images jquery capabilities: app.js - camera

package.json iphone: main.js configuration: Release rhoapp.js sdk: latest resources BundleIdentifier: com.rhomobile.myapp BundleURLScheme: myapp ios

android android: build.yml version: 4.1.0 rhoconfig.txt logcatFilter: APP:I StrictMode:I DEBUG:I *:E

extensions: [] Look into generated application

application’s runtime configuration MyApp nodejs # startup page for your application server start_path = '/' public bootstrap-3.3.7 options_path = '/app/Settings' images jquery # Rhodes log properties app.js MinSeverity = 1 package.json LogToOutput = 1 main.js MaxLogFileSize=50000 rhoapp.js logserver = 'http://rhologs.heroku.com' resources logname='MyApp' ios android syncserver = '' build.yml sync_poll_interval=0 rhoconfig.txt AndroidManifest.erb ...

Rakefile Look into generated application

template for application’s Android manifest. MyApp See details: nodejs http://docs.tau-technologies.com/en/6.0/guide/build_android server public bootstrap-3.3.7 images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Look into generated application

Standard Ruby script for rake commands (build, run, etc.) MyApp nodejs server public bootstrap-3.3.7 images jquery app.js package.json main.js rhoapp.js resources ios android build.yml rhoconfig.txt AndroidManifest.erb Rakefile Install Node.js modules

MyApp You should install node modules before building application. nodejs We should do the same with usual Node.js app - go to server nodejs/server folder and run standard command : public bootstrap-3.3.7 $ npm install images jquery After this command is done you can see new folder node_modules node_modules with all Node.js modules used. express jade ... app.js package.json main.js rhoapp.js Run on iOS

Let’s run our application on iPhone Simulator:

$ rake run:iphone

Also you can generate XCode project and use XCode for build/run etc. Generate XCode project :

$ rake rake build:iphone:setup_xcode_project

Generated XCode project located in: MyApp project iphone

MyApp.xcodeproj

Details: http://docs.tau-technologies.com/en/6.0/guide/build_ios Run on Android

Run application on Android Emulator:

$ rake run:android

Build and run application on linked via USB Android device :

$ rake run:android:device

Details: http://docs.tau-technologies.com/en/6.0/guide/build_android Examples Simple example - NodeJSApp NodeJSApp Source code - https://github.com/tauplatform/NodeJSApp nodejs server In run time configuration file rhoconfig.txt we define start URL: public /public/index.html bootstrap-3.3.7 this is URL on our local HTTP server, started in /app.js images jquery So in our application’s WebView following URL will be opened: index.html http://127.0.0.1:port/public/index.html app.js package.json main.js rhoapp.js resources # startup page for your application ios start_path = '/public/index.html' android

build.yml ... rhoconfig.txt AndroidManifest.erb Rakefile Examples

Simple example - NodeJSApp NodeJSApp Source code - https://github.com/tauplatform/NodeJSApp nodejs server In main Node.js application file (app.js) we register global function, where we public write some into application’s log and execute some Javascript code in bootstrap-3.3.7 application’s WebView: images jquery index.html app.js package.json main.js …

rhoapp.js global.myfunc = function() { resources Rho.Log.info("$$$$$$$$$$$$$$$$$ RUN NODEJS CODE !!!", 'Node.js JS'); Rho.WebView.executeJavascript("showAlert();"); ios }; android build.yml ...

rhoconfig.txt AndroidManifest.erb Rakefile Examples

Simple example - NodeJSApp NodeJSApp Source code - https://github.com/tauplatform/NodeJSApp nodejs server onExecuteNodejsCode() is called on button press public showAlert() will be called from Node.js code via Rhodes API - bootstrap-3.3.7 Rho.WebView.executeJavascript() images jquery When user presses button : index.html 1. JS code is executed from WebView, and this function invokes JS code in Node.js app.js context via Rhodes API - Rho.Nodejs.executeJavascript() 2. Our JS code in Node.js context will execute JS code in WebView and we will see package.json Alert. main.js rhoapp.js Examples

Complex example - todo-nodejs

Source code - https://github.com/tauplatform/todo-nodejs

This is complex example of Node.js application - todo list of tasks Uses following components: ● express (Node.js web framework) ● bootstrap (CSS) ● hbs (Express.js view engine for handlebars.js) ● sequelize (Node.js ORM) ● sqlite3 (DB) http://tau-technologies.com

Thank you for attention !