Pretty 'Awesome' apps (demo at Mobilise Meetup)

629 views
375 views

Published on

For solo platform developers interested in multi platform development…

Three multi-platform demos:
– Reuse data source (local JSON)
– Data modeling (Obj C, Java, C#)
– UI components that play nice with orientation change & mobile/tablet/desktop.
Awesome custom font!

Purpose:
– Think multi-platform, not just one! (Discoverability, Multi-channel, Multi-device users)
– Highlight the UI components that react responsively. (Responsive/Adaptive design)
– Bespoke design – increase uniqueness by adding custom fonts to your app! (like CSS3 @font-face did for websites)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
629
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • FOR – app developers interested in multi platform development…

    Demo: Cheatsheet for Font Awesome
    iOS
    Android
    Windows
  • Platform savvy (UX metaphors)
    Easy to Navigate (use animation)
    User First
  • Purpose:
    – Think multi-platform, not just one. (Discoverability, Multi-channel, Multi-device users)
    – Highlight the UI components that react responsively. (Responsive/Adaptive design)
    – Bespoke design – increase uniqueness by adding custom fonts to your app! (like CSS3 @font-face did for websites)
  • MVC
  • MVC
  • MVC
  • Purpose:
    – Think multi-platform, not just one. (Discoverability, Multi-channel, Multi-device users)
    – Highlight the UI components that react responsively. (Responsive/Adaptive design)
    – Bespoke design – increase uniqueness by adding custom fonts to your app! (like CSS3 @font-face did for websites)
  • {JSON} - common data source.
  • What we are going to make…

    [XCODE DEMO]
  • What we covered!
  • What we are going to make…

    [ANDROID STUDIO DEMO]
  • What we covered!
  • What we are going to make…
    UNIVERSAL APP
    Might also want to keep in mind…
    TV (ID@Xbox)

    [VISUAL STUDIO 2013 DEMO]
  • What we covered!
  • Multi-platform overview
  • Azure Mobile Services
    - Database with custom REST API (JSON packets)
    - OAUTH (Twitter, Facebook, Google+, Microsoft Account)
    - Push (APNS,GCM,WNS)
  • Used to be a pain – create images for every state.
    Android L allows you to just change the colours now.
  • However, due to fragmentation of Android OS, most developers will also have to do all this… 
  • Requested Theme
    NB: Status Bar is phone only
  • iOS 8 allows you to use custom fonts in IB
  • Design links
  • Dev links
  • @deadlyfingers
  • Pretty 'Awesome' apps (demo at Mobilise Meetup)

    1. 1. Multi Platform App Dev David Douglas @deadlyfingers
    2. 2. 3x IDEs • Xcode 5 • Android Studio • Visual Studio 2013
    3. 3. 3x Languages • Objective C / Swift • Java • C#
    4. 4. 3x UX Design Guidelines • iOS 7+ (Flat design) • Android L (Material Design) • Windows 8 (Flat design)
    5. 5. 3x Platform Design Patterns • iOS • Android • Windows
    6. 6. iOS MVC Design Pattern • Model – Model.h (+.m) • View – ViewController.xib • Controller – ViewController.h (+.m)
    7. 7. Android MV? Design Pattern • Model – Model.java • View – activity_my.xml • Controller / Adapter – MyActivity.java – Adapter.java
    8. 8. Windows MVVM Design Pattern • Model – Model.cs • View – MainPage.xaml – MainPage.cs • ViewModel – ViewModel.cs
    9. 9. 3x “Awesome” Apps Demos • Reuse data source (local JSON) • Data modeling (Obj C, Java, C#) • UI components that play nice with orientation change & mobile/tablet/desktop. • Custom font
    10. 10. Data Source • Font Awesome Glyphs • JSON file generated with Ruby script (watir)
    11. 11. iOS App (demo) • iPhone • iPad
    12. 12. iOS App • CocoaPods • JSONModel • Custom Font (Info.plist) • Collection View • Storyboard (shared)
    13. 13. Android App (demo) • Phone • Tablet
    14. 14. Android App • Android Studio and Gradle • GSON from JSON file in ‘src/main/assets’ • Generate Getters & Setters [Cmd]+[N] • GridView • Custom ArrayAdapter
    15. 15. Windows App (demo) • Phone • Tablet / Surface • Desktop PC Visual Studio 2013
    16. 16. Windows App • Universal Apps - Shared Assets (W8+WP8) • NuGet Package Manager • Newtonsoft.JSON • GridView • {Binding}
    17. 17. Summary of similarities Lib Management CocoaPods Gradle NuGet JSON JSONModel GSON Newtonsoft.JSON Grid Layout UICollectionView GridView GridView Grid Objects UICollectionViewDataSourc e ArrayAdapter {Binding} App start ViewController.m MainActivity.java MainPage.xaml ∟ MainPage.xaml.cs
    18. 18. Taking it further… • Theming • Navigation to Detail View • Azure Mobile Services - Add user identity - eg. My favorites - Push future updates over Cloud!
    19. 19. Theming
    20. 20. iOS Status Bar appearance Info.plist App Delegate View Controller
    21. 21. View Controller iOS Navigtaion Bar appearance
    22. 22. Android L (API 21) Theme res/values-v21/styles.xml
    23. 23. Android AppCompat styles res/drawable/actionbar_background.xml res/values/styles.xml
    24. 24. Page.xaml Page.xaml.cs WindowsPhone Status Bar
    25. 25. Custom Fonts
    26. 26. Info.plist View Controller iOS UIFont
    27. 27. Activity.java Android Typeface
    28. 28. Page.xaml Page.xaml.cs Windows FontFamily
    29. 29. Native Design Apple developer.apple.com/design Android www.google.co.uk/design Windows http://design.windows.com
    30. 30. Native Development Apple http://tinyurl.com/iosdesignpattterns Android http://tinyurl.com/android-mvvm Windows http://tinyurl.com/windows-mvvm
    31. 31. Thank you Questions? @deadlyfingers

    ×