Rhomobile and Ruby mobile development Introducing into Rhomobile solution for developers Intro You like Ruby and Ruby on Rails ? You want to develop mobile cross-platform application based on Ruby ? Let me introduce Rhodes solution ! RUBY + RHODes Rhomobile architecture Mobile applications 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 Android: Java, C++ HTML/CSS/JS frameworks Appcelerator (JS) (in pure hybrid mode) RhoMobile (Ruby) WinCE/WM: C#, C++ React Native (JS) + a lot of + a lot of NativeScript (JS) HTML/CSS/JS frameworks HTML/CSS/JS frameworks QT (C++, QML) RubyMotion (Ruby) CodenameOne (Java) Corona (Lua) Client-Server web application with RoR backend We have a web browser with HTML/CSS/JS code and separate logic/DB ? 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 Web App with remote server to Web App with local server ! 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 UI Logic HTML/CSS/JS Server code based Logic code on cross-platform code Ruby on Rails local server Ruby on Rails Framework Platform API Web Application with Ruby on Rails remote server Platform Browser Remote server HTML/CSS/JS app code + Web server JS frameworks routing controller view public model Platform API DB Rhodes architecture with WebView and local RoR-style server 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 What we need to start development with Rhodes Let’s develop cross-platform mobile applications with Rhomobile RHOMOBILE SUITE RHODES RHO BROWSER RHO STUDIO RHO CONNECT TAU EXTENSIONS ● Solution for development of mobile cross-platform hybrid and mixed-hybrid applications ● Developers can use just HTML/CSS/JS (like Cordova), and also use Ruby in Ruby on Rails like environment ● Includes a lot of modules with support for different APIs like Barcode, Printing etc. ● Support iOS, Android, WinCE/WM, WP, Sailfish, Linux ● 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/7.1/guide/rhomobile-install http://docs.tau-technologies.com/en/7.1/guide/nativesdksetup There are three ways to install RhoMobile - please install our latest release 7.1 : ● Download and install our all-in-one installation package. http://tau-technologies.com/developers/downloads/ ● 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/7.1/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 <div class="container-fluid"> index.erb layout.erb application.rb <div class="row"> loading.html <div class="list-group"> public <a href="#" class="list-group-item"> icon <span class="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"> </span> resources Add link here... ios </a> android </div> rhoconfig.txt </div> AndroidManifest.erb </div> build.yml Rakefile Look into generated application erb template for all pages (can be overriden in each controller) MyApp app <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" loading.png "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> helpers <html xmlns="http://www.w3.org/1999/xhtml"> Settings index.erb <head> layout.erb <title>MyApp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, application.rb maximum-scale=1.0, user-scalable=0"/> loading.html public loading of CSS and JS ... icon resources </head> ios <body data-platform="<%= Rho::System.getProperty('platform') %>"> android <%= @content %> rhoconfig.txt </body> AndroidManifest.erb </html> 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/7.1/guide/app_icon_splash Settings index.erb http://docs.tau-technologies.com/en/7.1/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/7.1/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/7.1/guide/rhom_ruby)