Webinar on how to use MyAppConverter

1. Webinar
How to use MyAppConverter
April 2015

2. Jaoued Ahmed
Co-founder
Issam Merrou
Lead Developer
Othman Elkourd
Lead Developer
The speakers today
jaoued@myappconverter.com
@jaouedahmed
i.merrou@myappconverter.com
@issamux
o.elkourd@myappconverter.com
@othmandroid

3. Some of our Public Beta Users feedback…

4. Webinar recording and slides will be emailed to all attendees and
registrants. Unanswered questions during the Q&A will be answered in the
Forum (forum.myappconverter.com/c/webinars)
All lines are muted during the
entire webinar; use the chat panel
for questions
Q&A at the end of the
presentation for 30 minutes
Tweet using #myappconverter for
live discussion (during and after)
House Keeping Rules

5. Target Audience
• Both iOS and Android developers
• Hybrid/Cross-Platform mobile developers

6. Today, you will learn
• What MyAppConverter is (5 mins)
• How to use it & do a successful conversion (15 mins)
• What Sprite4Droid® Plugin is and how to use it (15 mins)

7. Agenda
• Introduction to MyAppConverter
• How to do a successful conversion
• How to use Sprite4droid®
• Q&A

8. The world’s first true native to native
mobile code converter
What is MyAppConverter?
A community site where developers can
use the code conversion service, share
knowledge & experience and help each
other

9. Benefits
No SDK to download
Instantly & Automatically Native Code
Conversion (Online or via IDE plugin)
All platforms
Currently supporting iOS to
Android & will be extended to
other platforms
No Runtime
Your converted code is native
with no embedded runtime for
maximum performance
Peace of Mind
We don’t store or share any
code. We delete the code after
the download

10. Cloud based iOS 7.1 to Android
Kitkat code conversion.
myappconverter.com/coverage
Members support through
9am to 12am GMT online chat,
member’s forum and email.
3 app code conversions with
compressed file up to 30 Mb. Beta
ends 30th April.
Public beta

11. Members can share their expertise, knowledge and
experience across different platforms and devices
through MyAppConverter Forum
Get help on how to finish the non
converted code
Establish contacts with key
experts in their area (iOS,
Android, Java, etc…)
Participate in active discussions to
drive the roadmap
MyAppConverter Community

12. Agenda
• Introduction to MyAppConverter
• How to do a successful Conversion
• How to use Sprite4droid®
• Q&A

13. Signing up and activating your
account
What’s next? How to use
your Android converted
project
Getting ready for your first
conversion
How to do a successful conversion

14. Signing up and activating your
account
What’s next? How to use
your Android converted
project
Getting ready for your first
conversion
How to do a successful conversion

15. Signing-up
Sign-up is free and you get up to 3 conversions during
the beta ending 30th April 2015

16. Profile Completion

17. Signing up and activating your
account
What’s next? How to use
your Android converted
project
Getting ready for your first
conversion
How to do a successful conversion

18. Start your first conversion
• Compressed file should contain the
iOS project and source code and
NOT the .ipa
• Before compressing your iOS
project, it must compile
successfully under Xcode 5.1 in
your machine
• Your iOS project should be
developed under iOS 7.1

19. Preparing your iOS project for upload
Make sure :
• All files are copied inside your project, not linked
• In case you use source control (SVN or Git) ; disconnect
your project and clean it.
• Compress with a valid name [a-zA-Z0-9]

20. Let’s start the conversion
Uploading your iOS zipped project

21. Analysing the code

22. Compilation error example

23. Conversion analysis reporting
Report showing the mapped elements
versus non mapped elements

24. Proceed to conversion

25. Conversion completion

26. forum.myappconverter.com
Live Support Chat
9am -12am GMT
support@myappconverter.com
Getting help & support during entire process

27. Signing up and activating your
account
What’s next? How to use
your Android converted
project
Getting ready for your first
conversion
How to do a successful conversion

28. What’s next? How to use your Android
converted project
1. Required skills
2. System requirements
3. Use Case:
• How to import your converted project in Eclipse & Android-Studio
• How to clean & build project
• How to run your application in Android Emulator
4. Common issues found after the conversion (during the beta)

29. Required skills
• Java Language : http://docs.oracle.com/javase/tutorial/java/
• XML
• Android Framework: https://developer.android.com/training/index.html

30. System requirements
OS:
 Mac/Linux/Windows (32bit, 64bit)
 4 GB RAM recommended
 At least 1 GB for Android SDK, emulator system images
Java:
 Java Development Kit 7 (JDK 7)
IDE:
 Eclipse + ADT ( http://developer.android.com/sdk/installing/installing-adt.html )
 Android SDK ( http://developer.android.com/sdk/installing/index.html )
 Android Studio ( http://developer.android.com/sdk/index.html )

31. Use Case : iOS UIKit based Tetris implementation
UITetris Credits: Charles Magahern
https://github.com/zanneth/UITetris
Android/MyAppConverter project link:
https://github.com/MyAppConverter/UITetris “Xcode View of the Project”

32. Build Settings & Frameworks

33. Importing to Eclipse 1/2

34. Importing to Eclipse 2/2
• Select the compressed file
• Make sure the two projects
are recognized

35. Eclipse View of Android
converted Project
• MyAppConverter Android Project Library
• UITetris converted project
• No errors
• Some warnings

36. Cleaning your project (removing warnings)
• Unformatted code
• Unused imports

37. Cleaning your project
• Format Code
• Organize Import

38. Running your Android application
• Create Android virtual device emulator
• Use an Android-powered device for testing
and debugging

39. Custom Emulator configuration
• Target : API Level 19

40. Clone existing Device emulator
1. Device definition
2. Select your device
3. Create AVD

41. Running your application in the Emulator
• Select Project
• Run As > Android Application

42. Importing your project to Android Studio
• Uncompressed project folder

43. Importing your project to Android Studio
Import destination
Import options

44. Cleaning your project in Android Studio
• Format Code
• Optimize Imports

45. Building your project in Android Studio
Gradle Console View

46. Running your Application in the Emulator
Run As > Android Application Choose Emulator Window

47. Most common issues found after the conversion
(during the beta)
Compilation Errors due to :
 Converted resource naming vs Android resources naming conventions
 Missing methods implementation
 Missing imports
 iOS Frameworks/Libraries/Methods we currently don’t suppor
 Android XML Layout Properties
 Android Manifest min SDK

48. • Refactoring : lower case alphanumerical
Converted resource naming convention
• Error message

49. Missing method implementation
• Quick Fix : Add Implemented Methods
• Compilation errors

50. Missing imports
Add imports Dialog

51. Unmapped Framework :
OpenAL
What to do :
1. Tell us in the Forum
2. Use MyAppConverter Alternative mapped Framework
3. Edit the code and complete it manually
4. Check for the latest coverage update : myappconverter.com/coverage
Framework Coverage

52. Android XML Resource properties values

53. Converted Android Project vs Library API Level
Build error :
Converted application min SDK < MyAppConverter min SDK
Fix : add “Override Library”

54. Signing up and activating your
account
What’s next? How to use
your Android converted
project
Getting ready for your first
conversion
How to do a successful conversion

55. Agenda
• Introduction to MyAppConverter
• How to do a successful Conversion
• How to use Sprite4Droid®
• Q&A

56. What Sprite4Droid ® is, who it is for
and how to install and use the
plug-in
DemoGetting ready for your first
Sprite4Droid ® project
What is and how to use Sprite4Droid ®

57. What is Sprite4Droid ®, who is it for
and how to install the plug-in and
use it
DemoGetting ready for your first
Sprite4Droid ® project
How to use Sprite4Droid ®

58. What is Sprite4Droid ®?
It’s a plug-in for the Eclipse IDE
(Supported versions : Kepler Service
Release 2 or Luna Release 1 (4.4.1))
Bringing SpriteKit
functionalities to Android
SpriteKit developers can use the plug-in to create
SpriteKit games in Android Environment
Java Developers who want to use SpriteKit in Android
with minimum effort

59. Plugin Installation
Step 1 : Open Eclipse, Select Help->Install new Software…

60. Plugin Installation
Step 2 : Select the Button Add... then copy this link to the location
field:http://www.myappconverter.com/static/frameworks/sprite4droid/Plugin/

61. Plugin Installation
Step 3: The Plugin site will be then added to the list,
Select The Sprite4Droid Component then , Click Next and follow the installation process.

62. What is Sprite4Droid ®, who is it for
and how to install the plug-in and
use it
DemoGetting ready for your first
Sprite4Droid ® project
How to use Sprite4Droid ®

63. Your first project
Step 1 : Open Eclipse, select File->New->Sprite4droid project

64. Your first project
Step 2 : Enter the project name, and then click Next

65. Your first project
Step 3 : Select the Build Target, make sure to have the android
SDK configured in your Eclipse environment

66. Your first project
Step 4 : Enter your Application Name, package name, and the
minimum SDK supported by your application.
You can also check the Create a Test Project checkbox if you want
to create a Test Project.
Finally, Click Finish to create your Sprite4Droid project.

67. Your first project
A complete HelloWorld
project will be created

68. Your first project
Click the Run as -> Android Application
You should see this result :

69. What is Sprite4Droid ®, who is it for
and how to install the plug-in and
use it
Demo
Getting ready for your first
Sprite4Droid ® project
How to use Sprite4Droid ®

70. You will learn
• How to add a scene
• How to add an SKLabelNode
• How to add an SKSpriteNode
• How to use Actions to animate the Scene

71. How to add a Scene
In SpriteKit
//create a Scene
MainScene * hello = [MainScene sceneWithSize:size];
//get the Main SKView
SKView *mainView = (SKView *) self.view;
//add your scene to the Main view
[mainView presentScene: hello];

72. Using Sprite4Droid
//create a Scene
MainScene hello= (MainScene)MainScene.sceneWithSize(MainScene.class, size);
//get the Main SKView
SKView mainView = SKView.getInstance();
//add your scene to the Main view
mainView.presentScene(scene);
How to add a Scene

73. How to add an SKLabelNode
//create a Label
SKLabelNode *helloNode = [SKLabelNode labelNodeWithFontNamed:@"Chalkduster"];
//Set Label Text
helloNode.text = @"Hello, Sprite4Droid!";
//Set Font Size
helloNode.fontSize = 42;
In SpriteKit

74. //create a Label
SKLabelNode TouchLabel =
SKLabelNode.labelNodeWithFontNamed(SKLabelNode.class, new
NSString("Chalkduster.ttf"));
//Set Label Text
TouchLabel.setText(new NSString("Hello Sprite4Droid"));
//Set Font Size
TouchLabel.setFontSize(42);
How to add an SKLabelNode
Using Sprite4Droid

75. The Results :
Android : Sprite4DroidiOS : SpriteKit

76. How to add an SKSpriteNode
//create a SpriteNode
SKSpriteNode *spriteNode = [SKSpriteNode spriteNodeWithImageNamed:@"spaceship"];
//Set the Sprite position
spriteNode.position =CGPointMake(CGRectGetMidX(self.frame),CGRectGetMidY(self.frame));
//Add your Sprite to the scene
[self addChild:spriteNode];
In SpriteKit

77. //create a SpriteNode
SKSpriteNode spriteNode = SKSpriteNode.spriteNodeWithImageNamed(SKSpriteNode.class, new
NSString("spaceship.png"));
//Set the Sprite position
spriteNode.setPosition(CGGeometry.CGPointMake(_size.width / 2, _size.height/2));
//Add your Sprite to the scene
addChild(spriteNode);
How to add an SKSpriteNode
Using Sprite4Droid

78. The Results :
Android : Sprite4DroidiOS : SpriteKit

79. How to use Actions to animate the Scene
SKAction *moveUp = [SKAction moveByX: 0 y: 100.0 duration: 0.5];
SKAction *zoom = [SKAction scaleTo: 2.0 duration: 0.25];
SKAction *pause = [SKAction waitForDuration: 0.5];
SKAction *fadeAway = [SKAction fadeOutWithDuration: 0.25];
SKAction *remove = [SKAction removeFromParent];
SKAction *moveSequence = [SKAction sequence:@[moveUp, zoom, pause, fadeAway, remove]];
[helloNode runAction: moveSequence];
In SpriteKit

80. SKAction moveUp = SKAction.moveByXYDuration(0, 100.0,0.5);
SKAction zoom = SKAction.scaleToDuration(2.0, 0.25);
SKAction pause = SKAction.waitForDuration(0.5);
SKAction fadeAway = SKAction.fadeOutWithDuration(0.25);
SKAction remove = SKAction.removeFromParent();
SKAction moveSequence = SKAction.sequence(moveUp, zoom, pause, fadeAway, remove);
helloNode.runAction(moveSequence);
How to use Actions to animate the Scene
Using Sprite4Droid

81. Another Example
Credits:
Ray Wenderlich link : http://www.raywenderlich.com/42699/spritekit-tutorial-for-
beginners
Sprite4droid developed app :
https://github.com/MyAppConverter/Sprite4DroidSimpleGame

82. What is Sprite4Droid ®, who is it
for and how to install the plug-in
DemoGetting ready for your first
Sprite4Droid ® project
How to use Sprite4Droid ®

83. Today, we covered the followings :
• About MyAppConverter
• How to use it & do a successful conversion
• What Sprite4Droid® Plugin is and how to use it

84. Q&A
• Live chat panel
• forum.myappconverter.com/c/Webinars

85. Thank you
support@myappconverter.com
twitter.com/myappconverter
facebook.com/myappconverter
forum.myappconverter.com