Apps 101 - mrmug.org 2106 Presentation.pdf · – PhoneGap is released as open source, becomes Apache Cordova – Enables a developer to code in CSS, HTML, and JavaScript to generate

Apps 101 Demystifying mobile app development

with state-of-the-art tools

5/19/2016 | 2 | ©2015 Ciber CONFIDENTIAL

AGENDA

Where are we?

How did we get here?

Set up a development environment

Demonstrate best practices

© 2015 IBM Corporation 3

Mobile is reinventing enterprise strategy

When your app disappoints users, 65% of them will not buy your

other products

Mobile engagement is the consumer battleground

Mobile requires a new approach to IT

100% of the LOB apps in customer-facing roles will be built for

mobile-first consumption by 2017

81% of companies have employee

owned devices accessing their

network but only 48% have a

mobile security strategy

The impact of mobile


Enterprise use of mobile technology is growing at 25% per year

But most critical decisions still require a desktop computer



The number of custom mobile apps will double compared to 2014

But 85% of companies have a mobile backlog of up to 20 apps



But at any given time malicious code is infecting more than 11.6 million of them

We have our mobile devices within arms reach 90% of the time

© 2015 IBM Corporation


Where are we?

• Mobile devices are pervasive – Thousands of apps, select few are go-to

• Multiple platforms – iOS, Android, Windows phone, Blackberry, browser

• Open source – Apache, eclipse

– JavaScript, HTML, CSS

– Development is free. Deployment to production is not!


How did we get here?

• Evolution of Cordova – Nitobi creates a cross-platform mobile development tool set.

– Adobe buys Nitobi and rebrands it as PhoneGap

– PhoneGap is released as open source, becomes Apache Cordova

– Enables a developer to code in CSS, HTML, and JavaScript to generate native code for Android, IOS, Blackberry, Windows phone

• Evolution of Eclipse – SmallTalk is developed by IBM

– SmallTalk becomes IBM Visual Age

– IBM buys Rational

– Released to open source community (Eclipse Foundation)

• Evolution of MobileFirst – Worklight combines builds on Cordova and Eclipse

– Adds adapters, native APIs

– Enables enterprise apps with security and scalable server architecture

– IBM buys Worklight and rebrands it to MobileFirst Platform Foundation


Cordova supported platforms


Choose the approach that’s right for your app with consistent security, connectivity, and management

Native SMS, USSD and J2ME

HTML5 and hybrid

Xamarin

SMS


Avoid writing native code – for Android package app.test; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.Activity; import android.app.Fragment; import android.app.FragmentTransaction; import android.os.Bundle; /** * This demonstrates the use of action bar tabs and how they interact * with other action bar features. */ public class Test extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } public void onAddTab(View v) { final ActionBar bar = getActionBar(); final int tabCount = bar.getTabCount(); final String text = "Tab " + tabCount; bar.addTab(bar.newTab() .setText(text) .setTabListener(new TabListener(new TabContentFragment(text)))); } public void onRemoveTab(View v) { final ActionBar bar = getActionBar(); bar.removeTabAt(bar.getTabCount() - 1); }


Avoid writing native code – for iOS

/* Copyright (C) 2016 Apple Inc. All Rights Reserved. See LICENSE.txt for this sample’s licensing information Abstract: An `NSViewController` subclass that stores references to game-wide input sources and managers. */ import SceneKit class GameViewController: NSViewController { // MARK: Properties let game = Game() // MARK: Methods override func viewDidLoad() { // Grab the controller's view as a SceneKit view. guard let scnView = view as? SCNView else { fatalError("Unexpected view class") } // Set our background color to a light gray color. scnView.backgroundColor = NSColor.lightGrayColor() // Ensure the view controller can display our game's scene. scnView.scene = game.scene // Ensure the game can manage updates for the scene. scnView.delegate = game }

For iOS


Application Architecture


Comprehensive IDE

Scan & Certify to proactively mitigate risk

Test to get the best feedback on app quality

Integrate with back-end systems, data and cloud services

Obtain Insight to better understand your

users and their mobile experiences

Manage authentication,

updates and versions

Deploy across app stores

Design & Develop using a MobileFirst approach

Continuous Delivery Integrated DevOps

for mobile

Instrument your apps for analytics, security and management


The right mobile technologies enable you to provide greater value to employees, customers, and partners

Employee, customer,

and partner value

Mobile infrastructure

Engagement

Operations

Security

Development

Engagement

Operations

Security

Development

Focus on app and UI


DEMONSTRATION

Show the basic setup and development tasks


Cheat sheet

• Tutorials

• Knowledge center

• Downloads – JDK 1.8 x86

– Eclipse - Mars x86

– jQuery

– Android development studio

• Eclipse marketplace plug-ins – MobileFirst platform studio

– Android development kit

• System requirements

https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/7.1/all-tutorials/

http://www.ibm.com/support/knowledgecenter/SSNJXP/welcome.html

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

http://www.eclipse.org/downloads/




https://jquery.com/download/

http://developer.android.com/sdk/index.html

http://www-01.ibm.com/support/docview.wss?uid=swg27024838


Development Workstation

Platform Development Kit Java Development

Kit

Worklight Eclipse Plug-In

Platform Eclipse Plug-In

Eclipse Interactive Development Environment


Cookbook

• Install JDK (Java Development Kit)

• Install ADK (Android Development Kit)

• ‘Install’ JSL (JavaScript Library) – E.g., jQuery, Dojo, AngularJS …

• Install Eclipse

• Install ADT plug-in – Add AVD and SDK manager toolbar buttons

– Configure SDK

– Create AVD

• Install MobileFirst plug-in


Install notes - java


Install notes - Android


Install notes – eclipse


Install notes – m1 plug-in


Install notes – m1 plug-in


Install notes – android development tools

Ignore the warning about installing unsigned software.






Tips

• Program sequence – Ajax (HTML) threads are asynchronous

– Code will progress if a function returns a ‘deferred object’

– Use code like this to wait for something to finish:

$.when(somefunction(), function (returned) { do stuff });

Or

functionA().then( functionB(returnedValFromA).then( functionC…

• Debug – Browser F12

– Chrome, Firefox, Internet explorer

– Review resources such as local storage

– Set breakpoints and step through code

– No recompile is necessary. Change JS, then refresh browser.


Cast Iron - IOPaaS

Process request from multiple

sources

Convert to common

request format

Parse the request to render the elements

Log the request

Call the appropriate function based on the requested endpoint


MobileFirst Protect

Secure mobile containers

Seamless enterprise access

Secure content collaboration

Comprehensive mobile management

New in Q4

Threat Protection / Prevention

Zero-day iOS 8 support

Content Management Updates

Content access from End User Portal

Shared folders

Gmail integration for device discovery & access controls

Windows Phone

Certificates for Email and Wi-Fi configuration

Kiosk mode

Secure Container / Secure Mail

iOS Notifications for Exchange 2013


What we did not cover…

• Server installation and configuration

• Device testing with emulators

• App deployment and device management

• UI theme development

• A true 101-level class would take a full semester!


QUESTIONS?

Go forth and develop.


STOP!

Noting to see here. Move along.

5/19/2016 | 34 | ©2015 Ciber CONFIDENTIAL 3

4

© 2014 IBM Corporation #IBMMobile

The five biggest challenges you will face when you build and deploy mobile apps

1. Securing apps while connecting to enterprise data

2. Rapid, continuous delivery while maintaining 5 star app ratings

3. Unpredictable scale requirements for data

4. Delivering contextual apps that are compelling and productive for users

5. Managing and troubleshooting deployed apps


Install notes – general


x = Your location is here

x

x

App

App Server

x

Type

WIFI Grid Locationing Will provide actual (x,y) coordinate of phone Margin of error: 5-10 Meters + variables

WIFI Proximity Provides (x,y) coordinate of the SENSOR that detects you. Margin of error: 2-5 Meters + variables: Dependent on proximity

setting

Beacon/BLE Only provides beacon ID. Server maps that to beacon location. Margin of error: 1-2 Meters depending on beacon used and

configuration

Small Cell Will provide actual (x,y) coordinate of phone Margin of error: 5-10 Meters + variables

Magnetic Resonance Require no specialized hardware & quite accurate Dependent on establishing a hard location & fingerprinting of site

SLAM (simultaneous localization and mapping) No hardware required Leverages sensors on the device Used in conjunction w/other sensors

Sensing Technology


Session / First session

Unique / Repeat visitor

Session duration

Page views per session

Avg new/repeat session length

Avg time per page

Traffic volume

Bounce rate

Frequency per unique visitor

Unique visitor per store / time

Store visit / first store visit

Unique / repeat store visitor

Store entry / exit duration

Number of zones visited

Avg time spent in store; new/repeat

Time spent in each zone

Total visitors to store

Short durations, no zones visited

Number of zones visited

Recurring store entries

Web metrics Location metrics

What you can tell by tracking location


Summary of what you need to know

• How to set up the development environment – Javascript library

– Hybrid or native?

– Install the right software with the right version in the right order.

• How to use the environment – Manage the local server

– Test and debug with browser and device emulator

• JavaScript


Secure Document Sharing

Content Collaboration

Mobile Threat Management

Malware Protection

Mobile Enterprise Gateway

Enterprise Access

One security and management platform for all your mobile assets

IBM MobileFirst Protect

Manage and secure devices, apps, content, and user access in the enterprise

Advanced Management

Visibility & Control

Secure Productivity Suite

Mobile Workplace


The IBM MobileFirst Platform contains the ingredients for a

successful mobile program

Available on premise or in the cloud. Available for Cross-platform or iOS only (new in 4Q)

Efficiently Develop & Integrate

Easily Secure

Personalize Engagements

Continuously Deliver

Documents

Apps 101 - mrmug.org 2106 Presentation.pdf · – PhoneGap is released as open source, becomes Apache Cordova – Enables a developer to code in CSS, HTML, and JavaScript to generate