Tweet
Tweet

Slide 1

Slide 1 text

#mceconf 11 Jan 2014 Mind the Gap! From Android to Windows Phone Michele Capra aka @piccoloaiutante #mce-mindthegap

Slide 2

Slide 2 text

#mceconf 11 Jan 2014 What is this talk about? Little disclaimer: ‣ No, it’s not about Microsoft vs Google ‣ I’m pragmatic: I work on a Mac, I own Nexus 7 tablet, I own a Nokia Lumia 625. ‣ I’m a freelance, I develop app for Windows Phone 8 / Windows 8 #mce-mindthegap

Slide 3

Slide 3 text

#mceconf 11 Jan 2014 What is this talk about ? ‣ My personal experience on porting a business App from Android to Windows Phone 8. #mce-mindthegap

Slide 4

Slide 4 text

#mceconf 11 Jan 2014 Why I proposed this talk ? ‣ because I think that times are changing and Windows Phone 8 is growing its market share ‣ because I think that giving back my experience to the Community could help other developers #mce-mindthegap

Slide 5

Slide 5 text

#mceconf 11 Jan 2014 Agenda ‣ The App ‣ Development tools ‣ Mockup ‣ Code and development (UI, component, languages) ‣ Integration with OS ‣ App lifecycle ‣ App publish and store #mce-mindthegap

Slide 6

Slide 6 text

#mceconf 11 Jan 2014 The MDC client #mce-mindthegap

Slide 7

Slide 7 text

#mceconf 11 Jan 2014 The MDC client The case study: ‣ Mobile Data Collection (M.E.A.P .) ‣ create mobile application from a Web interface using a series of widgets ‣ deliver Apps to Android Tablet and Phone, iPad, iPhone, Blackberry, Windows Phone 8, Windows 8 RT/Pro ‣ developed by Gulliver, an italian company. #mce-mindthegap

Slide 8

Slide 8 text

#mceconf 11 Jan 2014 Mdc architecture #mce-mindthegap App2 App1 App n Mdc Client App1 App2 Appn Data sync Activated client

Slide 9

Slide 9 text

#mceconf 11 Jan 2014 MDC client ‣ Native clients (no Phone Gap) ‣ Proprietary protocol ‣ Occasionally connected ‣ Several different widget (picture, signature, position, textbox..) #mce-mindthegap

Slide 10

Slide 10 text

#mceconf 11 Jan 2014 Web backend #mce-mindthegap

Slide 11

Slide 11 text

#mceconf 11 Jan 2014 #mce-mindthegap

Slide 12

Slide 12 text

#mceconf 11 Jan 2014 Android client example #mce-mindthegap Applications Add new customer Salesman visit app

Slide 13

Slide 13 text

#mceconf 11 Jan 2014 Android client example #mce-mindthegap Proposed product Visit outcome Notes

Slide 14

Slide 14 text

#mceconf 11 Jan 2014 First big question #mce-mindthegap

Slide 15

Slide 15 text

#mceconf 11 Jan 2014 Which Windows Phone version to support ? #mce-mindthegap

Slide 16

Slide 16 text

#mceconf 11 Jan 2014 First big question To support Windows Phone 7 or not? We chose not to support it: ‣ Clear Microsoft intent to dismiss Windows Phone 7 ‣ Some of the components we needed were only for Windows Phone 8. Android support from 2.3 #mce-mindthegap

Slide 17

Slide 17 text

#mceconf 11 Jan 2014 Development tools #mce-mindthegap

Slide 18

Slide 18 text

#mceconf 11 Jan 2014 Windows Phone IDE ‣ Windows Phone Software Development Kit (free) ‣ Two separate SDK for Windows Phone 7.8 and Windows Phone 8 ‣ All the paid versions of Visual Studio support Windows Phone Development #mce-mindthegap

Slide 19

Slide 19 text

#mceconf 11 Jan 2014 Visual Studio 2012 #mce-mindthegap

Slide 20

Slide 20 text

#mceconf 11 Jan 2014 Android IDE ‣ AndroidStudio ‣ Intellij Idea ‣ Eclipse #mce-mindthegap

Slide 21

Slide 21 text

#mceconf 11 Jan 2014 IDE Both support: ‣ Code completion ‣ Emulator
 ‣ Debugging ‣ Visual designer #mce-mindthegap

Slide 22

Slide 22 text

#mceconf 11 Jan 2014 IDE Jet Brains solution could help you: ‣ Intellij Idea keyboard scheme and shortcut are available for Visual Studio through ReSharper plugin ‣ Code navigation, refactoring shortcuts… #mce-mindthegap

Slide 23

Slide 23 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap

Slide 24

Slide 24 text

#mceconf 11 Jan 2014 Mockup ‣ UI + Controls + Navigation - Logic ‣ Didn’t look at Android app code ‣ Just investigate ‣ Trying to figure out how to translate App flow from Android to Modern UI #mce-mindthegap

Slide 25

Slide 25 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap Android Windows Phone

Slide 26

Slide 26 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap Android Windows Phone

Slide 27

Slide 27 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap Android Windows Phone

Slide 28

Slide 28 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap Android Windows Phone

Slide 29

Slide 29 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap Android Windows Phone

Slide 30

Slide 30 text

#mceconf 11 Jan 2014 Mockup #mce-mindthegap

Slide 31

Slide 31 text

#mceconf 11 Jan 2014 Component #mce-mindthegap

Slide 32

Slide 32 text

#mceconf 11 Jan 2014 Component App capabilities: ‣ Take picture ‣ Read BarCode/QR Code ‣ Read NFC ‣ Get GPS coordinate ‣ Take signature ‣ Use web view ‣ Store data in a database ‣ Multi-language support #mce-mindthegap

Slide 33

Slide 33 text

#mceconf 11 Jan 2014 Component ‣ Take picture (Intent → Request CameraTask) ‣ Read BarCode/QR Code (ZXing → ZXing.net) ‣ Read NFC (Intent → Microsoft library to do the job) ‣ Get gps coordinate ( LocationManager → GeoLocator) #mce-mindthegap

Slide 34

Slide 34 text

#mceconf 11 Jan 2014 Component ‣ Take signature ( Canvas & Path → InkPresenter) ‣ Use web view (WebView → WebBrowser) ‣ Store data in a database (SQLite → SQLite) ‣ Multilanguage support (Xml file → Xml file) #mce-mindthegap

Slide 35

Slide 35 text

#mceconf 11 Jan 2014 So let’s start developing #mce-mindthegap

Slide 36

Slide 36 text

#mceconf 11 Jan 2014 Code #mce-mindthegap

Slide 37

Slide 37 text

#mceconf 11 Jan 2014 Java vs C# Academic answer for similarities: ‣ Statically strong typed ‣ Class-based, Object-oriented ‣ Semi-interpreted ‣ Garbage collection #mce-mindthegap

Slide 38

Slide 38 text

#mceconf 11 Jan 2014 Java vs C# ‣ convert basic type ‣ change data structure: ‣ Vector → List ‣ HashTable → Dictionary ‣ change method name i.e: string.startWith() → string.StartsWith() ‣ StringTokenizer → String.split(string) #mce-mindthegap

Slide 39

Slide 39 text

#mceconf 11 Jan 2014 Java vs C# Different pattern: ‣ Android: Model-View-Presenter pattern but View and Presenter highly coupled. ‣ Windows Phone: Model-View-ViewModel pattern, Binding mechanism. #mce-mindthegap

Slide 40

Slide 40 text

#mceconf 11 Jan 2014 UI #mce-mindthegap

Slide 41

Slide 41 text

#mceconf 11 Jan 2014 XAML You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files, joined to the markup through partial class definitions. #mce-mindthegap

Slide 42

Slide 42 text

#mceconf 11 Jan 2014 XML vs XAML Similarity: ‣ LinearLayout → StackPanel ‣ TextView, TextEdit → TextBlock,TextBox ‣ ScrollView → ScrollViewer ‣ Radio Group, RadioButton → RadioButton #mce-mindthegap

Slide 43

Slide 43 text

#mceconf 11 Jan 2014 Values vs Xaml style Android Values: #FFFFFFFF ! Windows Phone Xaml control style: #FFFFFFFF #mce-mindthegap

Slide 44

Slide 44 text

#mceconf 11 Jan 2014 UI Difference: ‣ Xaml file needs a code-behind file and is compiled through partial mechanism. ‣ In Android you access UI elements using getElementById or similar. #mce-mindthegap

Slide 45

Slide 45 text

#mceconf 11 Jan 2014 Integration with OS #mce-mindthegap

Slide 46

Slide 46 text

#mceconf 11 Jan 2014 Integration with OS ‣ Make a phone call ‣ Send an email ‣ Open Map
 ‣ Navigate to a place ‣ Open link in browser ‣ Open pdf/office file #mce-mindthegap

Slide 47

Slide 47 text

#mceconf 11 Jan 2014 Integration with OS In Android you do this by intent and activity. ! Intent callIntent = new Intent(Intent.ACTION_CALL); callIntent.setData(Uri.parse("tel:0377778888")); startActivity(callIntent); #mce-mindthegap

Slide 48

Slide 48 text

#mceconf 11 Jan 2014 Integration with OS In Windows Phone you use Tasks. ! PhoneCallTask phoneCallTask = new PhoneCallTask(); phoneCallTask.PhoneNumber = "2065550123"; phoneCallTask.Show(); #mce-mindthegap

Slide 49

Slide 49 text

#mceconf 11 Jan 2014 Integration with OS Sending email in Android. ! Intent emailIntent = new Intent(android.content.Intent.ACTION_SEND); emailIntent.putExtra(android.content.Intent.EXTRA_EMAIL, new String[]{to}); startActivity(emailIntent); #mce-mindthegap

Slide 50

Slide 50 text

#mceconf 11 Jan 2014 Integration with OS Sending email in Windows Phone. ! EmailComposeTask emailComposeTask = new EmailComposeTask(); emailComposeTask.To = “[email protected]”; emailComposeTask.Show(); #mce-mindthegap

Slide 51

Slide 51 text

#mceconf 11 Jan 2014 App lifecycle #mce-mindthegap

Slide 52

Slide 52 text

#mceconf 11 Jan 2014 Android activity lifecycle #mce-mindthegap

Slide 53

Slide 53 text

#mceconf 11 Jan 2014 Windows Phone lifecycle #mce-mindthegap

Slide 54

Slide 54 text

#mceconf 11 Jan 2014 Be careful From Microsoft docs: “It is possible, however, for an app to be tombstoned after the user navigates away. In this case, the app is not preserved in memory, but some information about the app is stored – most importantly for this topic, the State dictionary of the PhoneApplicationPage object is stored” #mce-mindthegap

Slide 55

Slide 55 text

#mceconf 11 Jan 2014 Be careful ‣ Serialised and deserialise the app state that is not a part of the page ‣ Rebind all the dependencies ‣ Update UI value (i.e: something typed from user before tombstoning) #mce-mindthegap

Slide 56

Slide 56 text

#mceconf 11 Jan 2014 Be careful #mce-mindthegap

Slide 57

Slide 57 text

#mceconf 11 Jan 2014 Store #mce-mindthegap

Slide 58

Slide 58 text

#mceconf 11 Jan 2014 App package ‣ Xap file which includes everything needed from the app. ‣ It’s almost like an apk file. ‣ You cannot install xap out of store. #mce-mindthegap

Slide 59

Slide 59 text

#mceconf 11 Jan 2014 Google Play store ‣ Generate key pair and certificate and keystone
 ‣ Sign your app and verify signed app
 ‣ Upload and publish to Play store #mce-mindthegap

Slide 60

Slide 60 text

#mceconf 11 Jan 2014 Windows Phone store Validation ‣ Package verification ! Certification ‣ Sign and encryption ! Publish ‣ Ready to be published #mce-mindthegap

Slide 61

Slide 61 text

#mceconf 11 Jan 2014 Windows Store Test Kit The Windows Phone Windows Phone Store Test Kit (formerly named Marketplace Test Kit) provides a suite of automated and manual tests to help prepare your apps to be accepted in the Windows Phone Store the first time you submit them. #mce-mindthegap

Slide 62

Slide 62 text

#mceconf 11 Jan 2014 Testing for tombstoning ‣ Before upload your xap to store simulate tombstoning and test your app manually. ‣ Tombstoning could be forced manually by Visual Studio. #mce-mindthegap

Slide 63

Slide 63 text

#mceconf 11 Jan 2014 Recap ‣ The App ‣ Development tools ‣ Mockup ‣ Code and development (UI, Component, languages) ‣ Integration with OS ‣ App Lifecycle ‣ App publish and store #mce-mindthegap

Slide 64

Slide 64 text

#mceconf 11 Jan 2014 Conclusions ‣ Java is not far from C# ‣ Build a mockup in order to explore new platform ‣ Keep an eye on app lifecycle ‣ Before starting, try to use a Windows Phone device as your primary device. #mce-mindthegap

Slide 65

Slide 65 text

#mceconf 11 Jan 2014 thanks to Gulliver ;-) #mce-mindthegap

Slide 66

Slide 66 text

#mceconf 11 Jan 2014 grazie! @piccoloaiutante #mce-mindthegap

Slide 67

Slide 67 text

#mceconf 11 Jan 2014 References ‣ Comparison of C# and Java (Wikipedia) [http://en.wikipedia.org/wiki/ Comparison_of_C_Sharp_and_Java] ‣ Windows Phone SDK (Microsoft)[http://dev.windowsphone.com/en-us/ downloadsdk] #mce-mindthegap