Hybrid Development with RubyMotion

Greg Molnar

This book is for sale at http://leanpub.com/rubymotionhybridappdevelopment

This version was published on 2016-03-06

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do.

© 2015 - 2016 Greg Molnar Contents

Why hybrid apps? ...... 1

Setting up RubyMotion ...... 2

IOS ...... 3 Hello World ...... 3 Why hybrid apps? coming soon…

1 Setting up RubyMotion

Setting up RubyMotion on your machine is really simple and the RubyMotion team has a well written guide for both iOS and Android. To get the free starter version of the framework, you need to visit this link: RubyMotion¹ Once you got your copy of the framework, based on your target, you can read the guide for iOS here: RubyMotion iOS guide², or for Android here: RubyMotion Android guide³

¹http://www.rubymotion.com/download/ ²http://www.rubymotion.com/developers/guides/manuals/cocoa/getting-started/ ³http://www.rubymotion.com/developers/guides/manuals/android/getting-started/

2 IOS

Hello World

Throughout this book we will use RedPotion, which is a package of useful RubyMotion frameworks. RedPotion is a gem, so first of all let’s install it:

$ geminstallredpotion

Once we have installed it, we can generate a new application by issuing the following command:

$ potionnewphotoshare_ios Creatingapp TemplateCloningredpotion-templatetemplate Templateredpotion-templatealreadyexists,performingapull Fromhttps://github.com/infinitered/redpotion-template * branch master->FETCH_HEAD Createphotoshare_ios Createphotoshare_ios/.gitignore Createphotoshare_ios/app/app_delegate.rb Createphotoshare_ios/app/models/.gitkeep Createphotoshare_ios/app/screens/home_screen.rb Createphotoshare_ios/app/shared/.gitkeep ...

Let’s look around in the generated files and folders. As you can see, we have an app folder, which holds our models, screens, stylesheets and views. There is also a shared and a stylers folder but we will come back to those later. In the resources folder you will find the icon and startup screen images. You can replace them, but we will just use the default ones for now. Schemas holds you model schemas but we are not going to use that. Spec holds the tests, and vendor is for external libraries. The Rakefile is very important as it holds your application’s configuration. Let’s see the app in action. If you enter rake in your terminal, RubyMotion will compile the app and start it in the simulator, and you should see the hello world app.

3 IOS 4

So far so good. If you click the buttons in the navbar, you can see “Left” and “Right” logged in your console. Let’s break down how this application works. The app_delegate.rb is the entry point of the app. We can do some configuration here and we can set an on_load event handler. For the demo, the on_load handler calls the cdq.setup method, and then it opens the home screen. The home screen is defined in screens/home_screen.rb and it is a ruby class, inheriting from PM::Screen. It set’s the title for the screen, and includes a stylesheet. Similarly to app_delegate, we have and on_load handler here as well. In this handler we set the two navbar buttons, and appending a UILabel to the screen. We are passing a reference to a helper method, as the second parameter to append!. It will call the helper hello_world, which is defined in stylesheets/home_- screen_stylesheet.rb, and returns the configuration for the UILabel. That’s pretty much how the demo works. Now let’s head to the next chapter, where we will change this screen to a webview.