commerce & mobile solutions
MENU

MOE tutorial 1: Create simple list on iOS and Android apps using Multi-OS Engine

Multi-OS-Engine – MOE for short – is an open source framework, which enables to write iOS and Android application in Java. The most interesting thing is that created apps are compiled to native code and they use common code in Java. It’s saves a lot of time and it’s good idea for Android Developers, who want to have iOS app also. MOE was acquired by Intel in 2015. It’s got good community support and it develops fast. About a month ago new MOE version 1.3 was released. It brings a lot of changes. Unfortunately, existing tutorials hasn’t been updated yet, so we decide to write a series of tutorials, which show step by step, how to create simple MOE app.

In this tutorial we will show you how to create MOE application, which fetches GitHub repositories list from here and show them in RecyclerView on Android and UITableView on iOS app. It’s quite long, but it describes step by step how to create whole application including iOS views in Xcode. It takes about 30 minute to read it all. If you don’t have experience with MOE and Xcode, you will need about 2 hours to implement it. Article consist of 4 main parts. First of them shows how to create MOE project with Android Studio. The second part is focused on main application logic, it shows how to connect Retrofit and RxJava to a common module. Third section is the most detailed, it presents how to create iOS views with Storyboard in Xcode. The last one is the shortest, it describes how to connect Android Activity with common module. We also include a table of contents to make the article easier to navigate. This project uses Xcode Version 8.3, Android Studio version 2.3 and MOE SDK version > 1.3.2.

The source code is available on our GitHub repository MoeAppSample on branch Tutorial_1.
Finished app is shown on the screens bellow:

Contents

  1. Set up environment
  2. Create project and set dependencies
    1. Android module
    2. Common module
    3. iOS module
    4. Add dependencies
  3. Write shared part
  4. Create iOS Views
    1. Create views in Xcode
    2. Write code in Java
  5. Create Android Views
  6. Summary
  7. Other external links

Set up environment

Before you start working on MOE application you should check prerequisites. You can find them in documentation. Next you need to add MOE plugin to Android Studio. Go to Android StudioPreferences → Plugins and type Multi-OS and install them.

After installation you are ready to start writing your first MOE application.

Create project and set dependencies

MOE applications should have 3 modules. Two of them consist only views for each platform and one module is shared between views. Android and iOS views cannot see each other. They should have only methods, which are responsible for UI and should be as small as possible. The Model-View-Presenter architectures recommended to write clean code and separate views.

Android module

1. First of modules is the app. This is regular Android application. Let’s create it. Open Android studio and create project.

2. Select Empty Activity

Common module

Second module called common contains all application’s logic and it’s shared between Android and iOS modules. Let’s create it.
1. Right click on main project directory and select NewModule

2. Select java library:

3. Change module and package name:

iOS module

1. The last module called ios contains all ios code written in Java and entire Xcode project. To generate this module, right click on project directory and select NewMulti-OS Engine Module

2. Select Single View Application and click Next

3. Fulfill information required to create Xcode project.

4. Change module name to ios and click Finish

Wait until Android Studio generate module. This may take a while. Don’t interrupt.

Add dependencies

1. We’ve got now 3 independents modules. Our purpose is to enable Android and iOS views to see common module. To do this, right click on common module and select Open Module Settings

2. On the left section select ios, click + on the bottom of window and select 3 Module Dependency

3. Select common and accept. Next select app on the left section and switch tab to Dependency. Click + and add dependency to common module as previously.


Write shared part

We are ready to start writing our application.

1. Add dependencies for RxJava and Retrofit 2 in common module inbuild.gradle file :

2. Add dependencies for RxJava Android adapter in app module inbuild.gradle file:

3. Next create model class in common module:

4. Add Retrofit interface:

5. Create Retrofit service generator:

6. Then create presenter which sends request and fetches data from response.

7. CreateIRespositoryView – simple interface, which is responsible to send downloaded data to Android and iOS views.

Create iOS Views

1. Shared Java code of application is ready, so we can start with creating views. First, we need to delete ui package with generated class.

Create views in Xcode

2. To start working with iOS views right click on ios module and select Open project in Xcode
If it doesn’t work, make sure that you use at least version 3.3 of Gradle. You can check them in file . It should look like this:

3. When Xcode will be started click on MoeSampleApp and select New file

4. Select Cocoa Touch Class and click Next

5. Name class RepositoryListViewController, select subclass UIViewController, don’t create XIB file and select Language Objective-C


6. Choose directory/xcode/MoeSampleApp and check target MoeSampleApp and click Create

7. Next selectMain.storyboard in project files on the left.

8. Make sure that you have checked appropriate icons (red rectangle the on screen). Next delete existing View Controller and drag and drop new View Controller

9. On the right panel check Is Initial View Controller

10. Switch icon on right panel (red rectangle), in section Custom Class set classRepositoryListViewController

11. Drag and drop table view inside View Controller. Resize Table View to fulfill entire View Controller.

12. Drag and drop Table View Cell inside Table View. Select Table View Cell in Repository List View Controller Scene. On the right panel set identifier torepositoryItemCell and select Basic from Style combobox.

13. Select Repository List View Controller, click Resolve Auto Layout Issues (small icon with triangle inside – red rectangle on the screen ) and click Reset to Suggested Constraint

14. Switch to Assistant Editor ( two crossed circles – square on the top right corner), selectRepositoryListViewController.h file. Press ctrl and drag tableView between@interface and@end . Name it asrepositoryTableView , set connection to Outlet and Type UITableView. Click connect.

15. Now we have to connect dataSource and delegate to tableView. To do that come back to Standard Editor and in Storyboard press ctrl and drag tableView to yellow circle icon with white squared inside. In Outlets dialog select dataSource and delegate.

16. To check the connection, right click on Table View in Storyboard. It should look like on the screen.

17. Add Navigation View Controller. In Storyboard select on Repository List View Controller. Then in Xcode menu click EditorEmbed In → Navigation Controller

18. Rename title in Navigation Controller. Click on Navigation Item and rename title of it.

19. Working with Xcode is already finished. Now it is necessary to bind created UI to rest of apps written in Java. To do that open Android Studio. Right click in ios module, select Multi-OS Engine ActionsCreate New Binding named nbc fileRepositoryListViewController , next select green +, select Header option and named againRepositoryListViewController .

20. Set Header path toxcode/MoeSampleApp , Base package name to your project package, in our sample there ispl.snowdog and in Import headers section write#import "RepositoryListViewController.h"

21. Next click settings icon and choose Generate Bindings

Wait until you see message on the bottom

Write code in Java

Fulfill table view with sample data

Generate binding finished successfully. In ios module injava {package} src there is generated file, calledRepositoryListViewController.java . Inside them we can see generated native Objective-C methods. Android Studio tagged them as errors, but they are only warnings and might be ignored. Here we will write all Java code responsible for UI behaviors.

1. First of all, it is necessary to add some annotation on the top of class definition:

Let’s start with fulfilling UITableView with sample data.
2. First implement necessary interfaces. For UITableView there areUITableViewDataSource ,UITableViewDelegate .

3. Next override required method and fulfill them with sample data:

4.CELL_IDENTIFIER is constant. It’s value must be the same as cell identifier set in Xcode.

5. Run app normally, before click green arrow select ios in combobox. The app should look like the screen bellow

Fulfill table view with data from GitHub API

1. To start fetching requests from API, we need to do them in background thread. RxJava doesn’t have access to application’s threads. In Android apps we add rxandroid inbuild.gradle . For iOS app we use MOE port for RxJava. It is available here. Just add this files to project.

2. Next declare NSOperationQueue inRepositoryListViewController.java

3. Set NSOperationQueue in constructor

4. Override methodviewDidLoad() . Inside then initialize RepositoryPresenter from common module and start fetching repositories.

5. To receive data in View Controller useIRepositoryView interface, add them to implemented interfaces by RepositoryViewController and override method.

6. DeclaremAllRepositories

7. ChangetableViewCellForRowAtIndexPath andtableViewNumberOfRowsInSection to use mAllRepositories

8. Run application, if list is empty, it is probably caused by Security Exception. You can find this bug using debugger. You should catch them inonError method ingetRepositories in common module. To fix them openproject.pbxproj file and checked Copy CA certificates

iOS app is finished now.

Create Android Views

The last part of our MOE app is to create Android app.

1. Add tobuild.gradle dependency:

2. Next add RecyclerView inactivity_repo.xml

3. Create row for Recycler View

4. Next create simple RepositoriesAdapter

5. InonCreate method set Recycler View and initializeRepositoryPresenter

6. Implement IRepositoryView and override method

7. InAndroidManifest.xml in activity tag add

8. Setrepository_titile instring.xml

Android app is finished.

Summary

As you can see code in app and common modules looks like regular Android Application. It’s Model-View-Presenter where app contains View and common contains Model and Presenter. ios module contains View for iOS and it’s most difficult part for Android Developers. We hope that this tutorial will be comprehensive to start with Multi-OS-Engine.

Other external links

1. Multi-OS Engine home page
2. iOS – OperationQueue documentation
3. iOS – UITableView documentation

Comments