Zero To Mobile

Building A Mobile Platform From Ground Up

Me Myself & I

Sani Yusuf

• Founder Of Haibrid
• Author Of Ionic By Example
• Writer - Trainer - Coder
• Lover Of mHealth
• Travelled The World For 8 Months
• Speak 4 Languages
• I Love Avatar

@saniyusuf

So Why Am I Here Today?

To Show You How You Can Build A Great Mobile Solution From Scratch

The State Of Mobile

• Primary way we access the internet
• Penetration still not saturated
• It's all about Apps Apps Apps

Everyone Wants A Mobile App

But What Is A Mobile App?

Most People Think This

What About This Guy?

The mobile web is a mobile app too. Just because you cannot download it doesn't mean it is not a mobile app.

Mobile Apps Are About Mobility Not Devices

It is not about the how it is about the "need to get done". You really don't want to be seen trying to get an Uber on a 17 inch MacBook. Trust me 

Let's Learn To Build A Mobile App

Type Of Mobile Apps

• Native Path
  • Classic Native
  • Compiled Native
  • Runtime Base (New Kid)
• Mobile Web Apps
  • Progressive Web Apps (New Kid)
• Hybrid Mobile Apps

Native Apps

Native Mobile Apps

• Direct Access To Device Features
• Ready Made Building Blocks/Components
• • Swift/Objective-C & IOS SDK For IOS
  • Java/C++ & Android SDK For Android
  • .NET & Windows Universal SDK For Windows
• Techniques Include:-
  • Classic Native 
    • Built With The Native Tools Provided By Platform Vendors
  • Compiled Native 
    • Xamarin, Titanium e.t.c
  • Runtime Based 
    • React Native, Nativescript 

Go Down This Path

• You Have The Required Skill Set
• Need Direct Access To Device Features/API
• Building High-Performance Gaming / BG Processing
• Got A Fair Bit Of ££+$$+€€

Mobile Web Apps

Mobile Web Apps

• Web Pages Optimised For Mobile Usage
• Win The Discoverability & Sharability War
• Work On Any Mobile Device With A Browser
• Don't Have Full Access To Device Features  
• Only Need To Be Developed Once
• Very Upgradable
• When To Go This Route :-
  • Have An Existing Vibrant Web App
  • Offline Is Not Paramount
  • Depends On Your Requirements. 
    • Uber doesn't have a mobile web app
    • Neither Does Snapchat

Hybrid Apps

• Combines Both Native & Hybrid
• Installable + Has Access To Device Features
• High Code Reusability Between Platforms
• Bundled Within A Native Wrapper Called A Webview
  • Thanks To Phonegap/Cordova
• Go Down This Path If :-
  • You Don't Require Complex BG Processing
  • Are Aware Of Hybrid's Limitation
  • Want To Write Your App Once & Have It Run Everywhere While Being Installable
  • Harness An Exisiting Web App
  • Amazon + Slack + Ebay

So What Path To Choose?

Let Your User Requirements Decide?

Don't Be This Guy/Girl

I want a mobile app, it will end world hunger and make donald trump a democrat, end brexit while displacing facebook as the top social network. Oh it will also use Node & Java with some C++ and be hosted on aws, use php for its API................zzzzzzzzzz

Focus On Your User Reqs

Now Let's See Some Tools To Help You Complete Your App

Backend / Service ​Infrastructure 

• You don't need to completely start from scratch
• There is a lot to consider
  • Authentication
  • Data Storage
  • API Access
  • Server
  • Scaling
  • .............................

It is 2016, it is okay to let someone else take over your sh*t.

Tools

• Auth
  • Auth0 - https://auth0.com/
  • Ionic Auth 
• Data Solutions
  • Firebase - https://www.firebase.com/
  • Pub-Nub - https://www.pubnub.com/
  • CouchDB - http://couchdb.apache.org/
• API
  • Strongloop - https://strongloop.com/
• Cloud Server Solutions
  • Azure - https://azure.microsoft.com/en-gb/
  • Bluemix - https://console.ng.bluemix.net/
  • Heroku - https://www.heroku.com/

Monitor Your Users

Tools

• Analytics
  • Google Analytics
  • Count.ly - https://count.ly/
  • AppSee - https://www.appsee.com/
    • Allows you to watch user recordings
• Crash
  • New Relic - https://newrelic.com/
• App Store Insights
  • App Annie - https://www.appannie.com/

Count.LY

AppSee

Engage Where You Can

Tools

• Push Notifications

  • Push Woosh - https://www.pushwoosh.com/

  • Ionic Push - http://docs.ionic.io/docs/push-overview 

  • Urban Airship - https://www.urbanairship.com/

• Bulk SMS

  • Twilo

• Ionic Deploy

  • Enables you to push live updates to users without going through AppStore. 

  • Hybrid Only Feature

    • https://ionic.io/platform#updates

Let's Talk Money

Making Money From Your App

• In App Purchases
  • For Games & Extra App Purchase
  • Limited By Platform Specific Nature 
• Payment Solutions
  • Stripe
  • Paypal
  • Card.IO
    • For Scanning Cards With Camera 

Accessibilty

Consider This 

• Apps Have To Work Offline
  • Indexed DB
  • Try Pouch DB - https://pouchdb.com/
• Consider Your Users
  • Disability
  • Language
• User Experience Is Key
• But Dont Forget To Implement A Good Design Too
• Copy Copy From Others
  • Seriously copying is cool

Don't Forget Security 

• Use HTTPS For Everything
• Protect Your Data Too

A Bit About Progressive Web Apps

• Mobile Web Apps That Can Have A Native App Experience
• Work Offline Thanks To Service Worker
• You Can Save To Your Home Screen
• The Can Have An Icon, Splash & Run Full Screen
• Google Is Pushing This Seriously
  • Hopefully, The iSheep Family Joins
• Examples
  • http://pwa.rocks
• Find More At https://developers.google.com/web/progressive-web-apps/

Final Words

• Focus On Mobility
• Mobile Will Only Grow More
• Test On 3G Still
• You Should Know About The WIT Initiative
  • Makes Apps Receive Data Without Internet
  • http://www.witapp.me/
•  
•  
• Watch Avatar If You Haven't Seen It

Find Me Online. 

@saniyusuf

I Don't Bite. Ok, Maybe A Little :)

Des Questions?