Slide 1

Slide 1 text

Nitya Narasimhan, PhD Senior Cloud Advocate | Microsoft @nitya Introduction to Mobile Development October 14 & 15, 2020 #startdevchange

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Development Setting The Stage: Why should you care?

Slide 7

Slide 7 text

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)

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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 ü …

Slide 12

Slide 12 text

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!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Android Development Building Your First App (Getting Started with Android)

Slide 15

Slide 15 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Quick Demo | "Hello Bit World!!" Demo Video / Refresher For Post-Event

Slide 16

Slide 16 text

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!

Slide 17

Slide 17 text

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.)

Slide 18

Slide 18 text

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?

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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!)

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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 …

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Introduction To Mobile Development Continuing Your Journey (Skilling Up & Scaling Out)

Slide 28

Slide 28 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Skilling Up | Kotlin Language Fundamentals

Slide 29

Slide 29 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Skilling Up | Android Development Guides

Slide 30

Slide 30 text

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!

Slide 31

Slide 31 text

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"

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

https://aka.ms/intro-to-mobile-dev Nitya Narasimhan | @nitya Surface Duo Dev | Dual Screen & Foldable Devices

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

https://aka.ms/intro-to-mobile-dev r

Slide 36

Slide 36 text

Nitya Narasimhan, PhD Senior Cloud Advocate | Microsoft @nitya Thank you for listening! https://aka.ms/intro-mobile-dev October 14 & 15, 2020 #startdevchange

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Hang out with us and ask questions live as you learn from Microsoft Developers on a variety of Tech concepts! Visit twitch.tv/MicrosoftDeveloper