Pretty 'Awesome' apps (demo at Mobilise Meetup)
•Download as PPTX, PDF•
1 like•866 views
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)
Recommended
Recommended
More Related Content
Similar to Pretty 'Awesome' apps (demo at Mobilise Meetup)
Similar to Pretty 'Awesome' apps (demo at Mobilise Meetup) (20)
Recently uploaded
Recently uploaded (20)
Pretty 'Awesome' apps (demo at Mobilise Meetup)
- 1. Multi Platform App Dev David Douglas @deadlyfingers
- 2. 3x IDEs • Xcode 5 • Android Studio • Visual Studio 2013
- 3. 3x Languages • Objective C / Swift • Java • C#
- 4. 3x UX Design Guidelines • iOS 7+ (Flat design) • Android L (Material Design) • Windows 8 (Flat design)
- 5. 3x Platform Design Patterns • iOS • Android • Windows
- 6. iOS MVC Design Pattern • Model – Model.h (+.m) • View – ViewController.xib • Controller – ViewController.h (+.m)
- 7. Android MV? Design Pattern • Model – Model.java • View – activity_my.xml • Controller / Adapter – MyActivity.java – Adapter.java
- 8. Windows MVVM Design Pattern • Model – Model.cs • View – MainPage.xaml – MainPage.cs • ViewModel – ViewModel.cs
- 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. Data Source • Font Awesome Glyphs • JSON file generated with Ruby script (watir)
- 11. iOS App (demo) • iPhone • iPad
- 12. iOS App • CocoaPods • JSONModel • Custom Font (Info.plist) • Collection View • Storyboard (shared)
- 13. Android App (demo) • Phone • Tablet
- 14. Android App • Android Studio and Gradle • GSON from JSON file in ‘src/main/assets’ • Generate Getters & Setters [Cmd]+[N] • GridView • Custom ArrayAdapter
- 15. Windows App (demo) • Phone • Tablet / Surface • Desktop PC Visual Studio 2013
- 16. Windows App • Universal Apps - Shared Assets (W8+WP8) • NuGet Package Manager • Newtonsoft.JSON • GridView • {Binding}
- 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. Taking it further… • Theming • Navigation to Detail View • Azure Mobile Services - Add user identity - eg. My favorites - Push future updates over Cloud!
- 19. Theming
- 20. iOS Status Bar appearance Info.plist App Delegate View Controller
- 21. View Controller iOS Navigtaion Bar appearance
- 22. Android L (API 21) Theme res/values-v21/styles.xml
- 23. Android AppCompat styles res/drawable/actionbar_background.xml res/values/styles.xml
- 24. Page.xaml Page.xaml.cs WindowsPhone Status Bar
- 25. Custom Fonts
- 26. Info.plist View Controller iOS UIFont
- 28. Page.xaml Page.xaml.cs Windows FontFamily
- 29. Native Design Apple developer.apple.com/design Android www.google.co.uk/design Windows http://design.windows.com
- 30. Native Development Apple http://tinyurl.com/iosdesignpattterns Android http://tinyurl.com/android-mvvm Windows http://tinyurl.com/windows-mvvm
- 31. Thank you Questions? @deadlyfingers
Editor's Notes
- 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