Intro to Mobile Development

Mobile app development is both a huge opportunity and a constant challenge. In this talk we’ll look at the mobile development landscape – from native apps to multi-platform development and mobile web. We’ll talk about design challenges and personalizing user experiences to match diverse contexts. And we’ll look at emerging paradigms in dual-screen and multi-posture devices (e.g., Surface Duo) and talk about how we can leverage these technology advances to rethink the modern mobile app.

Transcript

1. Nitya Narasimhan, PhD Senior Cloud Advocate | Microsoft @nitya Introduction to Mobile Development October 14 & 15, 2020 #startdevchange
2. Build Dual-Screen Xamarin.Forms apps by using TwoPane View aka.ms/sdc-mobile Explore dual-screen development for the Surface Duo Device using Xamarin.Forms
3. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Development Nitya Narasimhan, PhD @nitya | dev.to/nitya https://aka.ms/intro-to-mobile-dev Image Credit: unsplash/@woctechinchat
4. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Research patents Development products Advocacy people Motorola / Labs Seamless Mobility Multi-Screen Apps Consulting / Startups Mobile Web Apps Cross-Platform Apps SUNY / Microsoft Android Courses Dual Screen Foldables About Me | My Journey In Mobile Development
5. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Setting The Stage Building Your First App Continuing Your Journey Motivation Ecosystem Approach Quick Demo Behind The Demo App Fundamentals Dual Screen Design Cloud + AI Services Android Dev Guides Roadmap | A Beginner's Intro To Mobile / Android Image Credit: The Noun Project
6. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Development Setting The Stage: Why should you care?
7. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Motivation | 1. Mobile application usage growing! Source: App Annie / The State of Mobile in 2020 The average consumer spends 3.7 hours per day on their device—up 10 percent year-over-year, and up 35 percent since 2017 (Dice Insights)
8. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Motivation | 2. Mobile dev skills are in demand! Source: Dice Insights / The Mobile App Developer (Jan 2020) Burning Glass, which compiles and analyzes millions of job postings from across the country, estimates that mobile app developer jobs will grow 30.7 percent over the next decade. The firm also estimates the median salary for mobile app developers at $103,805 (analyst firm Robert Half, meanwhile, pegs the median salary for a mobile app developer at $141,000 per year). Source: GitHub/ The State Of The Octoverse (2019) Kotlin and Dart lang growth powered by mobile developers
9. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Motivation | 3. Mobile OS share favors Android Source: IDC | Smartphone Market Share (Sep 2020) While the second quarter of 2020 (2Q20) resulted in slightly better than expected numbers, the market was still down year over year with visible signs of economic concerns in 2020Q2 ….. IDC expect the market to return to grow in 2021 mostly sped up by the 5G devices launches picking up from the damage of the pandemic. Android = 85% market share iOS = 15% market share
10. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Ecosystem | Mobile Role solidified by COVID-19 Source: App Annie / The State of Mobile in 2020 Consumer spend in apps reached record highs amidst COVID-19-influenced social distancing measures and lockdown policies. Source: App Annie As communities rebound from the first wave of COVID-19 and brace for a second wave, mobile usage remains high globally — solidifying mobile’s role in our lives as consumers embed new app-habits and prioritize socially distant, yet connective, activities for remote learning, working from home, and shopping from the comfort and ease of their mobile devices. Mobile data is more important than ever before in navigating these times of massive change. These changes are reshaping the world and people need to understand how to adapt to new user behavior and preferences.
11. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Approach | What are my mobile developer options? Source: @codetraveler / Choosing the Best Mobile Framework (Oct 2020) Language OS / Framework Native Apps (Android or iOS) Java / Kotlin OS = Android Swift / ObjC OS = iOS Cross-Platform (Android + iOS) (+ desktop) (+ web) JavaScript React Native Dart Flutter .NET, C#, F# Xamarin Kotlin Kotlin Mobile Multiplatform Progressive Web Apps (mobile web) JavaScript Various .NET, C# Microsoft Blazor Considerations for picking a mobile framework: ü Dev + Maintenance costs ü Language familiarity ü Feature availability ü Dev Tools support ü App performance ü …
12. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Question | How do you eat an elephant? Image Credit: Noun Project "Take one bite at a time" • Start with a "small step" • Take time to learn the core idea • Savor your achievement • Pick your next "small step" • Go again!
13. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Approach | Design, Data and Development Slides: Resources For Rapid Prototyping Do you have just an app idea? Try designing the UI/UX Wireframing Tools Design Systems Do you have data + an idea? Try low-code platforms! Data Connectors Drag-n-Drop Solutions Do you have data, an idea + UI/UX or performance needs? Mobile/Web Toolkits Development SDKs Images Credit: undraw.co
14. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Android Development Building Your First App (Getting Started with Android)
15. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Quick Demo | "Hello Bit World!!" Demo Video / Refresher For Post-Event
16. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | Let's walk through a few things! 1. Install Android Studio | SDK & IDE 2. Create New Project | App Wizard 3. Create New Android Virtual Device | AVD 4. Deploy App to Android Virtual Device | Emulator 5. Update Boilerplate App | Layout Editor 6. Fix Warnings | Debug Assist 7. Run Updated App | Celebrate – then Explore!
17. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | 1. Android Studio (IDE + SDK) Preferred IDE for Android (native app development) Gradle Build system (plugin) to configure & extend build process AVD Manager (test app on emulator vs. real device) SDK Manager (update SDK tools & platforms dist) Tools (editors, wizards, debuggers, profilers etc.)
18. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Demo | SDK Manager – Install required SDKs Demo Video / Refresher For Post-Event What is your target device audience? What is your app feature dependency?
19. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | 2. Create New Project (App) Wizard scaffolds basic app with boilerplate code for specified initial activity (UI/UX) Empty Activity List/Detail Flow Navigation Drawer Activity Login Activity Tabbed Activity Fragment + View Model Etc.
20. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Demo | Create New Android App Project Demo Video / Refresher For Post-Event Explore: Look at your mobile phone apps. Can you recognize some of these patterns? What kinds of UI/UX do you want to build? Try creating and running the default app for each
21. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | 3. Create New AVD (emulator) Android Virtual Device (AVD) models the characteristics of a real Android device (hardware profiles, system images, storage) AVD "emulator skin" models the physical appearance of that Android device AVD "configuration" properties override default hardware profile for more customized test settings
22. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Demo | Create New Android Virtual Device (AVD) Demo Video / Refresher For Post-Event Explore: Create AVD for each category of Android Device • Phone • Tablet • Wearable • TV, Automotive you may need to download additional system images... Explore the emulator features and capabilities (send an SMS!)
23. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | 4. Review The Boilerplate App Manifest – think packing slip for Android app package App Source – code for app components and processing Resources – non code assets packaged with the app (images, fonts, layouts, values) Gradle Scripts – configure your build process (app, module) MAIN activity – the main entry point for a launched app. It identifies the view (layout resource) to be inflated when a "create" lifecycle event happens
24. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | 5. Review Core App Concepts Programming Language Distribution (APK) Security (VM sandbox) App Components • Activities • Services • Broadcast Receivers • Content Providers App Messaging App Manifest • Implicit Intents • Explicit Intents Kotlin or Java Compiled code + Resources Principle of Least Privilege • Components • Permissions • Dependencies (HW, SW) • Intent Filters …
25. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Behind The Demo | 6. Edit Boilerplate (Layout) Drawable Resource add a new image asset to be used in view Design Layout drag and drop a new image view with asset Fix Warnings update image layout constraints, convert hardwired strings to reusable resources
26. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Demo | Make changes to the default app Demo Video / Refresher For Post-Event Recommendations: Get familiar with Kotlin .. (preferred language for Android) Understand Android Activity Lifecycle … (callbacks) Explore adding interactive UI elements ... (event handling) Explore adding other components and integrating with cloud APIs
27. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Development Continuing Your Journey (Skilling Up & Scaling Out)
28. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Skilling Up | Kotlin Language Fundamentals
29. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Skilling Up | Android Development Guides
30. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Scaling Out | Add a Cloud + AI backend to your app Bookmark this | Currently showcases Xamarin.Forms examples | expect Android and cross-platform updates soon!
31. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Surface Duo Dev | Hello Dual-Screen Android! Thin Lightweight Portable Foldable 360 rotation Multiple postures Dual Screen Symmetric screens "Spanned Apps" Productivity Android + M365 "App Groups"
32. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Surface Duo Dev | Dual Screen & Foldable Devices Ref: Android Developers Building Apps For Foldables Ref: Microsoft Developers Surface Duo Overview Portability + Productivity erases "form factor" Multi-display / seam single, dual, spanned Multi-posture / hinge 16 discrete postures 360-degree angles Opportunity: innovative apps, paired experiences, adaptation Challenges: evolving features, APIs. app UX continuity
33. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Surface Duo Dev | Dual Screen & Foldable Devices
34. https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Setting The Stage Building Your First App Continuing Your Journey ü Motivation – Market Size ü Ecosystem – App Domains ü Approach – Developer Paths ü Quick Demo – "Hello Bit World" ü Behind The Demo - Tooling ü App Fundamentals – Concepts ü Dual Screen – Surface Duo Dev ü Cloud + AI Services – Scale Out ü Android Dev Guides – Skill Up Recap | Why, How and What Next
35. https://aka.ms/intro-to-mobile-dev r
36. Nitya Narasimhan, PhD Senior Cloud Advocate | Microsoft @nitya Thank you for listening! https://aka.ms/intro-mobile-dev October 14 & 15, 2020 #startdevchange
37. Build Dual-Screen Xamarin.Forms apps by using TwoPane View Explore dual-screen development for the Surface Duo Device using Xamarin.Forms aka.ms/sdc-mobile
38. Hang out with us and ask questions live as you learn from Microsoft Developers on a variety of Tech concepts! Visit twitch.tv/MicrosoftDeveloper