Become a mobile developer from scratch
Download as PPTX, PDF4 likes1,003 views
The webinar covers essential aspects of becoming a mobile developer from scratch, including mobile device characteristics, user experience (UX) considerations, and how the OutSystems platform can aid development. Key topics include leveraging the Silk UI framework, prefetching resources, and various mobile patterns suited for app design. Additionally, the presentation highlights the importance of choosing the right architecture based on app requirements and the differing expectations for business-to-consumer (B2C) and business-to-employee (B2E) applications.
Become a mobile developer from scratch
- 1. Become a Mobile developer from scratch Free OutSystems webinar
- 2. Become a Mobile developer from scratch Rúben Gonçalves Mobile team leader @ OutSystems @techrug 2
- 3. Disclaimer ! Dense and deep introduction to Mobile !
- 4. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge 4 ○ Mobile Glossary ○ What is a mobile device? ○ Just a small computer? ○ Mobile device characteristics ○ UX considerations ○ Choose the right architecture
- 5. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? 5 ○ Preview in devices ○ Prefetching resources ○ Notify mechanism
- 6. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? ● Leveraging Silk UI Framework 6 ○ Templates ○ Mobile patterns ○ Demo
- 7. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? ● Leveraging Silk UI Framework ● Going further with OutSystems Now 7 ○ What is it? ○ Features ○ Architecture overview ○ Demo ○ Customizing OutSystems Now ○ Adding new plugins ○ Checklist to app stores
- 8. Become a Mobile developer from scratch 8 When building the first mobile app!
- 9. Framing the Mobile challenge
- 10. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? ● Leveraging Silk UI Framework ● Going further with OutSystems Now 10 ○ Mobile Glossary ○ What is a mobile device? ○ Just a small computer? ○ Mobile device characteristics ○ UX considerations ○ Choosing the right architecture
- 11. Become a Mobile developer from scratch Mobile Glossary ● Android Studio – Android IDE for creating native apps (Java) ● B2C – Business to Customer (public distribution – via app stores) ● B2E – Business to Employee (internal distribution – via non app store) ● BYOD – Bring Your Own Device ● Hybrid apps – web apps running inside a native shell ● MAM – Mobile Application Management ● MDM – Mobile Device Management (eg. AirWatch) ● RWD – Responsive Web Design ● X Code – iOS IDE for creating native apps (Objective-C, Swift) 11
- 12. Become a Mobile developer from scratch What is a mobile device? 12 http://dunnnk.com/
- 13. Become a Mobile developer from scratch What is a smartphone device? 13 Pocket EXTREMELY PERSONAL
- 14. Become a Mobile developer from scratch Just a small computer? 14 Source: techarea
- 15. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… Source: Design for Touch 15
- 16. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… 16 Source: Mobily input types And hard for the user
- 17. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… and more powerful! 17 • Location detection • Multi-touch sensors • Device positioning & motion: from accelerometer • Gyroscope: 360 Degrees of motion • Orientation: direction from a digital compass • Video & image: capture/input from a camera • Dual cameras: front and back • Audio: input from a microphone • Ambient Light: light/dark environment awareness • Proximity: device closeness to physical objects • NFC: Near Field Communications through RFID readers • Device connections: through Bluetooth between devices
- 18. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… and more powerful! 3. Outputs are different 18 The app itself Notifications
- 19. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… and more powerful! 3. Outputs are different 19 The app itself Notifications Device speaker Vibration mechanism
- 20. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… and more powerful! 3. Outputs are different 4. Context of usage 20 Source: Liz Hafalia, The Chronicle
- 21. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… and more powerful! 3. Outputs are different 4. Context of usage 21 Source: unable to find the source of the image
- 22. Become a Mobile developer from scratch Just a small computer? 1. Small? Not necessarily… 2. Inputs are different… and more powerful! 3. Outputs are different 4. Context of usage 22 Source: we are social 39% of internet traffic
- 23. Become a Mobile developer from scratch Recap 1. Mobile devices are NOT small computers It’s a whole new way to engage 2. Inputs and outputs are different And we should leverage it as much as possible 3. Mobile is used on the go And pretty much for everything 23
- 24. Become a Mobile developer from scratch Framing the Mobile challenge Mobile device characteristics 24
- 25. Become a Mobile developer from scratch Mobile device characteristics Typical Laptop ● Intel cpu ● 8 Gb RAM ● 1,3M pixels Typical Android ● ARM cpu ● 2 Gb RAM ● 2M pixels 25 Source: Screen time -75% -2,7x slower +53% to paint Less capacity
- 26. Become a Mobile developer from scratch Mobile device characteristics Not only less capacity… but different browsers 26 1,5x 3,9x 9,8x DELL E6440 Chrome 42 237ms IPhone 6 Plus Safari 360ms Nokia Lumia 925 IE 11 924ms Samsung Tab4 chrome 2312ms Test made on webkit.org
- 27. Become a Mobile developer from scratch Mobile device characteristics Connected to network 27 • GPRS (2G) • EDGE (2G, 2.5G or 3G) • UTMS (3G) • WCDMA (3G) • HSPA (3G) • EVDO (3G) • HSPA (3G or 4G) • Mobile WiMax(4G) • LTE (4G) “We have 4G now! We don’t have performance problems on the network anymore” Anonymous developer Assumptions are the mother of all… Bad things!
- 28. Become a Mobile developer from scratch Mobile device characteristics LTE is not everywhere 28 64% 55% 30% 6 % 20% 25% 2G 3G LTE Worldwide average USA average Source: data from 2014 70% of time the connection is 3G or 2G
- 29. Become a Mobile developer from scratch Mobile device characteristics How mobile network works under the hood? 29 • how many cell phone towers are in the vicinity? • how many users are sharing these towers? • what is the bandwidth available to these cellphone towers to connect to the Internet or the carrier's network? RNC Radio Network Controller SGSN Service GPRS Support Node GGSN Gateway GPRS Support Node Internet IP network Cell tower Firewall Typical 3G (UMTS) network
- 30. Become a Mobile developer from scratch Mobile device characteristics How mobile network works under the hood? • how many cell phone towers are in the vicinity? • how many users are sharing these towers? • the bandwidth available to these cellphone towers to connect to the Internet or the carrier's network? LATENCY function of the electrical characteristics of the circuit 30
- 31. Become a Mobile developer from scratch Mobile device characteristics How mobile network works under the hood? • how many cell phone towers are in the vicinity? • how many users are sharing these towers? • the bandwidth available to these cellphone towers to connect to the Internet or the carrier's network? LATENCY function of the electrical characteristics of the circuit 31 Mobile 50 – 550ms 350 ms Desktop 20 – 150ms 80 ms Be careful with the amount of requests done to the server!
- 32. Become a Mobile developer from scratch Mobile device characteristics How mobile network works under the hood? 32 Antenna When not in use, goes idle after a given amount of time to spare battery, then needs to power up… 3G – 2.5s 4G – 100ms WiFi Turned On but not connected consumes more energy than radio
- 33. Become a Mobile developer from scratch Requests done to the server? > By far the biggest hurdle 33 71 requests ~8s to Load 17 CSS 25 JS 21 img 4 fonts 3G (750 Kbps 100ms RTT) 762 KB downloaded Your typical Web app
- 34. Become a Mobile developer from scratch Recap 1. Big resolution, less capacity 2. LTE (4G) is here But aim for the worst scenario 3. Latency is a big performance hurdle Careful with # requests to the server 34
- 35. Become a Mobile developer from scratch Framing the Mobile challenge UX considerations 35
- 36. Become a Mobile developer from scratch Why apps fail? ● Lack of consistency ● Slow to change and adapt ● Poor strategy ● Not considering the complete journey ● Brand recognition ● Building mobile customer engagement ● Keep it simple ● Not solving a real world problem ● Not understand the target audience ● Not sure about the Mobile Platform ● Too many or too less features ● Making it too complex for the users ● Incompatible User Experience ● Neglecting the backend support ● Not enough Marketing ● Not using App Optimization Techniques ● Failure listening to Users’ Feedback 36 Source: Wired and Net solutions
- 37. Become a Mobile developer from scratch Why apps fail? ● Lack of consistency ● Slow to change and adapt ● Poor strategy ● Not considering the complete journey ● Brand recognition ● Building mobile customer engagement ● Keep it simple ● Not solving a real world problem ● Not understand the target audience ● Not sure about the Mobile Platform ● Too many or too less features ● Making it too complex for the users ● Incompatible User Experience ● Neglecting the backend support ● Not enough Marketing ● Not using App Optimization Techniques ● Failure listening to Users’ Feedback 37 Source: Wired and Net solutions UX related issues
- 38. Become a Mobile developer from scratch UX considerations ● Any place, any time 38 Mobile phones are portable attention is fragmented Portable = Interruptible sessions are short Users have attention span equivalent of a 6 years old Source: image from Mobile Input and text from Mobile User Experience: Limitations and Strenghts
- 39. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands 39 Source: Read and Write in Mobile 1,333 observations of people using mobile devices on the street
- 40. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands 40 Source: Read and Write in Mobile
- 41. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands 41 Source: How to design for thumbs
- 42. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands 42 Source: How to design for thumbs
- 43. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands 43 Source: How to design for thumbs
- 44. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands 44 Source: How to design for thumbs http://thumbzone.co/
- 45. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers 45 Source: Design for Touch Touch enabled
- 46. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers 46 Source: Design for Touch
- 47. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers 47 Source: Design for Touch
- 48. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer 48 Source: Mobile Design Essentials, Luke Wroblewski University of Notre Dame, Indiana, USA 4,5m
- 49. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer 49 “responsive web design isn’t intended to serve as a replacement for mobile web sites” Ethan Marcotte B2C For apps that Mobile is a nice to have
- 50. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer ● Use known mobile patterns 50 Loading Carousel List Item Balloon Pull To Refresh Action Sheet (Context Menu) Modal Toggle Global Search Card Tabs Blank Slate Swipe Page Navigation Title bar / Top Header Bar Alerts Card Stacked (tinder) Carousel - Horizontal Photo LightBox Chat Infinite Scroll Collapsible Area Progress Bar Share Floating menu Feedback Message Sidebar Panel Post Spinners / Numeric Text Box Counters Form label Side Navigation Range Slider Gallery Bottom Menu (tab bar) Swipe List Items Calendar Tooltip Accordion Timeline Walkthrough (Focused Onboarding) Video Upload Input Icons Tag Editor Wizard Badge (with placehoder) Panel Tile (research types) Check Item Button Group UserInitials DropDown Box BreadCrumbs Character Count Button Area Tables
- 51. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer ● Use known mobile patterns ● Work and Personal apps 51 B2C app • Customer oriented apps • Distributed in public stores • Needs lot of UX/UI investment B2E app • Enterprise apps • Only to be used by Employees • Distributed internally • Can have less investment in UX/UI (assumption)
- 52. Become a Mobile developer from scratch UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer ● Use known mobile patterns ● Work and Personal apps 52 BYOD Policy Users device will have B2E and B2C apps installed. Comparison and high expectations are inevitable.
- 53. Become a Mobile developer from scratch UX considerations 53 ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer ● Use known mobile patterns ● Work and Personal apps ● Design for perceived Performance Perceived Performance how quickly a software feature appears to perform its task
- 54. Replace This image in master UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer ● Use known mobile patterns ● Work and Personal apps ● Design for perceived Performance 54Become a Mobile developer from scratch Perceived Performance how quickly a software feature appears to perform its task Show info already available
- 55. Replace This image in master UX considerations ● Any place, any time ● Used with hands big fat fingers ● RWD is not always the right answer ● Use known mobile patterns ● Work and Personal apps ● Design for perceived Performance 55Become a Mobile developer from scratch Perceived Performance how quickly a software feature appears to perform its task Load remaining asynchronously
- 56. Become a Mobile developer from scratch Recap 1. You can’t fit it all 2. Who is your target user 3. What are they aiming to do? 4. What will you remove? 5. Expectation are high! 6. We are required a Mind Shift 56 B2C? You can’t use RWD! Expect a lot more effort for UX and UI! What is the application trying to solve? Without making the user frustrated. Due to amazing B2C apps out there 29 years
- 57. Become a Mobile developer from scratch Framing the Mobile challenge Choose the right architecture 57
- 58. Become a Mobile developer from scratch Choose the right architecture Source: OutSystems Blog 58
- 59. Become a Mobile developer from scratch Choose the right architecture 59 ● Is your app single screen with lot of animations and sounds? ● Do you need to access the device’s sensors? ● Do you need access to custom native functionality? ● Do you need your app on the store? ● Do you need to support multiple operating systems? ● Do you need to support devices with poor performance? See this and more in OutSystems Blog!
- 60. How OutSystems Platform helps?
- 61. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? 61 ○ Preview in devices ○ Prefetching resources ○ Notify mechanism
- 62. Become a Mobile developer from scratch Preview in devices 62
- 63. Replace This image in master Prefetching resources ● Can be activated per application ● Runs only once per session ● Downloads the application resources and caches CSS, JavaScript, img, Fonts ● On 2nd access only downloads resources not cached Become a Mobile developer from scratch 63 Available from 9.0.1.25
- 64. Replace This image in master Prefetching resources Become a Mobile developer from scratch 64 Available from 9.0.1.25
- 65. Replace This image in master Prefetching resources Become a Mobile developer from scratch 65 Available from 9.0.1.25 To customize
- 66. Become a Mobile developer from scratch Notify mechanism Available from 9.1 Mobile Server Button.Click OnNotify OnNotify Ajax.Update Mobile Server Button.Click Ajax.Update Bali LATENCY function of the electrical characteristics of the circuit 66
- 67. Become a Mobile developer from scratch Recap 1. Preview in devices good starting point Not the same as testing in a device 2. Prefetching will help on first access Can be customized 3. Notify server side Avoids unnecessary round trips to the server 67
- 68. Leveraging Silk UI Framework
- 69. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? ● Leveraging Silk UI Framework 69 ○ Templates ○ Mobile patterns ○ Demo
- 70. Become a Mobile developer from scratch
- 71. Become a Mobile developer from scratch Why Silk UI? 71
- 72. Become a Mobile developer from scratch Why Silk UI? Because CSS is Awesome*! 72 *When you know what you’re doing…
- 73. Become a Mobile developer from scratch Why Silk UI? View presentation and recording 73
- 74. Become a Mobile developer from scratch Information from Silk UI ● Device: desktop, tablet, phone ● Dimension: big, hd, small ● Operating systems: iOS, Android, Windows, … ● Browser: chrome, firefox, IE10, IE11, Safari, etc. ● Orientation: landscape, portrait ● Locale: en, pt, … 74
- 75. Become a Mobile developer from scratch Templates 75 Dublin Liverpool Lisbon Tokyo Vanilla
- 76. Become a Mobile developer from scratch Tokyo Template 76 If your target are smartphones, this is the template to use. It's optimized for touch and devices, and the recipient for the mobile patterns.
- 77. Become a Mobile developer from scratch Leveraging Silk UI Framework Mobile Patterns 77
- 78. Become a Mobile developer from scratch Mobile Patterns SilkUIFramework module • Global Search • ListItem • ListItemToggle • ListItemGroup • Bottom Menu Tokyo Theme module • MainContentMargin • ButtonBack • ButtonMenu 78
- 79. Become a Mobile developer from scratch Mobile Patterns SilkUIFramework module • Global Search • ListItem • ListItemToggle • ListItemGroup • Bottom Menu Tokyo Theme module • MainContentMargin • ButtonBack • ButtonMenu 79
- 80. Become a Mobile developer from scratch Mobile Patterns SilkUIFramework module • Global Search • ListItem • ListItemToggle • ListItemGroup • Bottom Menu Tokyo Theme module • MainContentMargin • ButtonBack • ButtonMenu 80
- 81. Become a Mobile developer from scratch Mobile patterns SilkUIFramework module • Global Search • ListItem • ListItemToggle • ListItemGroup • Bottom Menu Tokyo Theme module • MainContentMargin • ButtonBack • ButtonMenu 81
- 82. Become a Mobile developer from scratch Demo 82
- 83. Become a Mobile developer from scratch Recap 1. Silk UI Framework helps With specific templates and mobile patterns 2. Tokyo template is the smartphone template Containing specific patterns and behaviors 3. Leverage the information made available To tweak the experience per platform 83
- 84. Going further with OutSystems Now
- 85. Become a Mobile developer from scratch Agenda ● Framing the Mobile challenge ● How OutSystems Platform helps? ● Leveraging Silk UI Framework ● Going further with OutSystems Now 85 ○ What is it? ○ Features ○ Architecture overview ○ Demo ○ Customizing OutSystems Now ○ Adding new plugins ○ Checklist to app stores
- 86. Become a Mobile developer from scratch What is it? ● Transforms apps build in OutSystems Platform in Hybrid apps iOS, Android and Windows apps ● Enabling access to device capabilities Camera, location, local storage or other device APIs ● Apps can then be released to public stores 86
- 87. Become a Mobile developer from scratch OutSystems Now screens 1. The Icon 2. Splash 4. Login 5. The List 6. App3. Environment On B2E this should be removed On B2C these must be removed 87
- 88. Become a Mobile developer from scratch Going further with OutSystems Now Features 88
- 89. Become a Mobile developer from scratch Cordova plugins 89
- 90. Become a Mobile developer from scratch Supported features 90
- 91. Become a Mobile developer from scratch Easy configuration 91
- 92. Become a Mobile developer from scratch Going further with OutSystems Now Architecture overview 92
- 93. Become a Mobile developer from scratch What is Apache Cordova? ● Open-source mobile development framework ● Allows use of standard web technologies (HTML5, CSS3, and JavaScript) for cross- platform development ● Applications execute within wrappers targeted to each platform ● Standards-compliant API bindings to access each device's sensors, data, and network status. 93
- 94. Become a Mobile developer from scratch Cordova vs PhoneGap Cordova: open source project maintained by Apache PhoneGap: is powered by Cordova but maintained by Adobe 94
- 95. Become a Mobile developer from scratch Architecture overview 95 OutSystems Now Native Shell Native Functionalities Plugins/Addons Authentication OutSystemsNowServices OutSystems Platform Functionalities Plugins Modules Authentication Provider REST API HTTPS Communication Server side Device
- 96. Become a Mobile developer from scratch Architecture overview 96 OutSystems Now Native Shell Native Functionalities Plugins/Addons Authentication Web View Offline Mode
- 97. Become a Mobile developer from scratch Demo ● Let’s add to calendar a reminder with the deadline
- 98. Become a Mobile developer from scratch Going further with OutSystems Now Customizing OutSystems Now 98
- 99. Become a Mobile developer from scratch Customizing OutSystems Now 99
- 100. Become a Mobile developer from scratch Available Cordova Plugins 100
- 101. Become a Mobile developer from scratch Plugins on Forge 101
- 102. Become a Mobile developer from scratch Plugins on Forge 102
- 103. Become a Mobile developer from scratch Going further with OutSystems Now Submitting to the app stores 103
- 104. Become a Mobile developer from scratch Available Cordova Plugins 104
- 105. Become a Mobile developer from scratch Recap 1. OutSystems Now is in major app stores For everyone to start using it and testing their applications 2. OutSystems Now is Open source Enabling everyone to customize it and extend 3. Built on top of cordova Leverage this by using plugins created by the cordova community 105
- 106. Thank you