prototyping mobile applications with spring

© 2014 SpringOne 2GX. All rights reserved. Do not distribute without permission.

Prototyping Mobile Applications With

SpringBy: Pete Buchhop and Anne Fyk

Agenda

• Mobile Software Engineering Problem Context

• Mobile Prototyping - Leveraging Spring

• Use Case: Paddle Score Entry with Spring

• Demo

• Spring Mobile

• Closing Comments

• Q&A

2

Pete’s Background

• Pete is a 25 year Senior Technology Executive in Banking and Capital Markets (BAML).

• Named the Bank of America/Merrill Lynch Inventor of the Year for the entire company.

• Bank of America Technology Fellow (one of first four in entire company).

• Bank of America/Merril Lynch he was an Award of Excellence Winner (awarded to top 1%).

• Pete is holder of 8 Patents (6 of them in the Mobile space).

• Seven Technical Certifications including Sun Certified Enterprise Architect & CISSP.

• Pete also has an MBA with a concentration in Finance.

3

Mobile Landscape Last 15 years

• 1999-2006 Age of Carrier Control• 1999 Launch of Blackberry 850

• 2002 PocketPC 2002 (Merlin)

• 2003 Android Founded

• 2005 Android acquired by Google

• Shift to Apple and Google• iPhone launch in June, 2007

• Dev Kit Released in Feb, 2008

• Launch of Android in Sep, 2008

• Enter the Tablet• 2010, iPad launches, successful

• 2012 Surface Launches

4

What Challenges Does this Ecosystem Raise?

5

• Multiple Tools

• Multiple Languages

• New Factors

−Location Based Services

−Push Notification

−Expectations

−Speed of Change

−Security (both in motion and at rest)

−Legal (Privacy Concerns)

−Reputational Risk

Challenges

① Need Internet Accessible Servers

② Need to be able to prototype services quickly

③ Need to be able to prototype the client application quickly

6

Use of Amazon Cloud / EC2 and Rapid Scripting

languages

7

Use of Amazon Cloud / EC2 and Rapid Scripting

languages

8

iOS SDK

Android Developer ToolkitLAMP

Linux, Apache, mySQL, PHP

Agenda

Mobile Software Engineering Problem Context



• Demo

• Spring Mobile


• Q&A

9

Anne’s Background

• 25 years of technology experience as a professional software developer in banking and trading industries.

• Most recently focused on mobile development and web based application development.

• Holder of 2 Patents in the Mobile space.

• Platform Tennis Enthusiast

10

How can be leveraged to address

these challenges?

11

Advantages to Using

• Prototype in same language, using familiar tools

• Easier to convert to production application.

• Simulate closer to actual application.

12

Hypothesis

13

Use of Amazon Cloud / EC2, Java, Spring Framework,

Spring Boot, Spring Android and Spring Mobile

14

Challenge 1 : Internet Accessible Servers

• Lots of Available Cloud Implementations Today

• Spring Boot - Allows easy configuration and deployment options.

15

Challenge 2: Prototype Services Quickly

• Current LAMP Implementation

• Uses PHP scripting which allows for quick development.

• Code cannot be taken forward in the application; it is throwaway code.

• Spring Framework

• Allows us to code in java using tools and APIs that are familiar.

• Code could be used in the actual implementation, not just the prototype.

• Features such as the @RestController help with rapid development.

16

Challenge 3 : Prototype Client Side Application

Quickly

• Current : Native tools kits for iOS and Android

• Android - Spring for Android – Can we leverage this?

• iOS - Nothing Spring specific

17

Agenda




• Demo

• Spring Mobile


• Q&A

18

19

Use Case: Platform Tennis Score Entry System

What is Platform Tennis (a.k.a. Paddle) ?

20

Source :

• Racquet sport invented in 1928 and played outside in all types of weather,

primarily in the Winter.

• Court is about 1/3 size of tennis court.

• A heated platform helps keep the court dry and free of snow.

• Scoring is same as for tennis.

• Screens of “chicken wire” surround the court and are playable like the walls

in squash and racquetball.

Platform Tennis Court

21

Tournament Challenge - Locations

22

• Each paddle location has 2-6

courts and a “Paddle Hut”.

• 2011 Nationals in Chicago

used 23 different facilities and

~140 volunteers.

Image :Wilmette Park District

Next location determined by match outcome

• Where do I go next?

23

Draw Sheet Source:

24

Multiple Draws Source :

25

Navigating the Draws

26

Source :

Problem Description

• Need scores to be reported to keep tournament on track:

• Multiple Locations

• Multiple Draws

• Match location changes based on win or loss

• Injury and Default situations

• Currently players call in scores or use mobile web browser and/or volunteers take scores at huts.

27

Paddle Score Entry Prototype

Restful Web Service to return player’s next matches, receive score

updates :

• Challenge 1: Internet Accessible Servers

• Challenge 2: Prototype Services Quickly

iOS and Android client applications for score entry

• Challenge 3 : Prototype Client Side Application Quickly

28

Paddle Score Entry Restful Service Example

• Objective : Create a restful service that returns the player’s

scheduled match information based on the input phone number.

• Use @RestfulController Annotation

• New in Spring 4

• Tells Spring that every method in the controller should return a domain

object instead of a view

• Automatically converts the object to JSON

29

PaddleScoresController.java

import org.springframework.web.bind.annotation.RestController;

@RestController

public class PaddleScoresController {

@RequestMapping(value="/getMatches", method=RequestMethod.GET)

public Matches matches(@RequestParam(value="phoneNumber", required=true) String phoneNumber) {

// retrieve matches from store based on phoneNumber

return getMatches(phoneNumber);

}

}

30

Match.java

public class Match {

private int roundNumber;

private String draw;

private String matchTime;

private String opposingTeam;

private String location;

private String winningTeam;

private String score;

public Match() {

}

// followed by getters & setters for each field

31

Matches.java

public class Matches {

private String phoneNumber;

private ArrayList<Match> matchList;

public Matches(String phoneNumber,) {

this.phoneNumber = phoneNumber;

createSampleMatches();

|}

public List<Match>getMatchList() {

return matches;

}

32

Matches.java continued

// remaining getters and setters

public void setMatchList(List<Match>matchList) {

this.matchList = matchList

}

public String getPhoneNumber() {

return phoneNumber;

}

Public void setPhoneNumber(String phoneNumber) {

this.phoneNumber = phoneNumber;

}

}

33

Deployment : Spring Boot

• Spring Boot

• Makes the configuration decisions so that you don’t have to…

• All jars on classpath are combined into a single jar file.

• public static void main() method determines the entry point.

• Defaults Spring Boot dependencies to Spring Boot’s versions.

• Configures a number of dependencies and defaults based on class

path (Tomcat, H2, HSQL and Derby databases…)

34

Using Spring Boot Plugin

• Add to build.gradle

• dependencies {

classpath("org.springframework.boot:spring-boot-

gradle-plugin:1.1.5.RELEASE")

}

• apply plugin: 'spring-boot’

35

Make Application an executable JAR

• Create Application.java

• Annotate the class with :

• @EnableAutoConfiguration – Uses the jars on the classpath to configure servers and components that the application needs such as Tomcat or Jetty, DispatchServlet, etc.

• @ComponentScan – Registers the Controllers.

• Define the public static void main() method

• Set it to use the SpringApplication helper class to manage it as a component in the application context.

36

Application.java

@Configuration

@EnableAutoConfiguration

@ComponentScan

public class Application {

public static void main(String[] args) {

SpringApplication.run(Application.class, args);

}

}

37

Build and Deploy

• Build

• ./gradlew clean build will create a single jar file

• Copy the jar file to the cloud instance

• Start the application :

• java –jar paddle-scores-0.1.0.jar

• Access • http://mycloudurl/paddlescores/getMatches?phoneNumber=“312-555-1212”

38

http://cloudurl/paddlescores/getMatches?phoneNumber=%E2%80%9C312-555-1212

Deploy to existing Tomcat ?

• Good tutorial link included in the References slide

• Create a class to substitute for web.xml• Extend the SpringBootServletInitializer class• Override the configure method

• Changes to build.gradle• Add ‘war’ plugin (apply plugin: ‘war’)

• Change jar settings to war

• Tell spring that it doesn’t need to embed Tomcat:

configurations {

providedRuntime

}

dependencies {

providedRuntime("org.springframework.boot:spring-boot-starter-tomcat”)

}

39

PaddleScoresController in action

40

mycloudurl

PaddleScores postScores

@RequestMapping(value="/postScores”)

public Matches matches(@RequestParam(value="roundNumber",required=true)

String roundNumber,@RequestBody Match match) {

int roundNumberInt = Integer.parseInt(roundNumber);

// create next match for simulation and save

updateMatches(roundNumberInt,match,teamName);

return matches;

}

41

Paddle Score Entry Restful Service

• Results

• Used @RestController and Spring boot to rapidly develop our restful service.

• Source Code listing (all java!) :

• Application.java – template

• PaddlescoresWebXml.java – template

• PaddleScoresController.java

• Match.java*

• Matches.java*

42

Paddle Score Entry – Client Side Apps

iOS and Android client applications for score entry


• iOS - Use 7.0 and Objective-C

• Android – Use Java and Spring for Android

43

iOS 7.0 - Matches Code Snippet - GET

NSJSONSerialization parses JSON into NSMutableDictionary :

44

NSError *jsonParsingError = nil;

NSMutableDictionary *matchesDict =

[NSJSONSerialization JSONObjectWithData:response

options:kNilOptions error:&jsonParsingError];

_myMatches = [_myMatchesDict valueForKey:@"matchList"];

for ( NSDictionary *matchDict in _myMatches) {

NSString *opposingTeam =

[self objectForKeyDefaultNil:matchDict key:@"opposingTeam"];

iOS 7.0 - Matches Code Snippet - POST

NSJSONSerialization converts JSON to NS* objects:

NSDictionary* jsonDictionary = [self.myMatch

toNSDictionary:self.phoneNumber];

NSError *error;

if ([NSJSONSerialization isValidJSONObject:jsonDictionary ]) {

NSData* jsonData = [NSJSONSerialization

dataWithJSONObject:jsonDictionary

options:NSJSONWritingPrettyPrinted error:&error];

45

iOS 7.0 - Matches Code Snippet - POST

Create a custom method in Match object to convert to NSDictionary:

- (NSMutableDictionary *)toNSDictionary:(NSString *)phoneNumber

{

NSMutableDictionary *dictionary = [[NSMutableDictionary alloc] init];

[dictionary setValue:self.location forKey:@”location"];

[dictionary setValue:self.draw forKey:@"draw"];

…

46

IOS 7 Client

• Results

Able to rapidly create iOS client with a few extra steps:

o Need to create code to handle connection to restful service

o Need to convert domain objects to NSDictionary for post

o Maybe future version of iOS will help ?

47

Paddle Score Entry – Android

Android client application for score entry


• Use Java and Spring for Android

48

Spring for Android

• Stated objective is to “simplify development of native Android applications”

• Core class is RestTemplate• Http Client and Methods for DELETE, GET, HEAD, OPTIONS, POST

and PUT

• Message Converters for XML, JSON, GSON and RSS and ATOM Feeds and more.

• Also supports GZIP Compression.

• Sample Projects exist for Twitter search, client, Facebook client, news reader ,basic auth.

49

Spring for Android – Code Sample

final String url = "http://mycloudurl/paddle-scores-

0.1.0/getMatches?phoneNumber=312.555.1212";

RestTemplate restTemplate = new RestTemplate();

restTemplate.getMessageConverters().add(new

GsonHttpMessageConverter());

Matches matches = restTemplate.getForObject(url,

Matches.class);

50

Spring for Android – Code Sample Continued

StringBuffer myMatchInfo = new StringBuffer();

myMatchInfo.append("Team Name: " + matches.getTeamName() + EOL);

myMatchInfo.append("Phone Number: " + matches.getPhoneNumber() + EOL);

SimpleDateFormat format = new SimpleDateFormat("MM/dd/yyyy hh:mm a");

SimpleDateFormat displayFormat = new SimpleDateFormat("E hh:mm a");

for (Match match: matches.getMatches()) {

try {

Date matchDate = format.parse(match.getMatchTime());

String formattedMatchTime = displayFormat.format(matchDate);

myMatchInfo.append(match.getDraw() + " " + formattedMatchTime + " " + match.getLocation() + " "

+ match.getOpposingTeam() + EOL);

} catch (Exception ex) {

Log.e("Matches App" ,"Exception parsing date ");

}

} 51

Spring for Android - Dependencies

Spring Android :

<dependency>

<groupId>org.springframework.android</groupId>

<artifactId>spring-android-rest-template</artifactId>

<version>1.0.1.RELEASE</version>

</dependency>

GSON :

<dependency>

<groupId>com.google.code.gson</groupId>

<artifactId>gson</artifactId>

<version>2.2.4</version>

</dependency>

52

Spring for Android - Result on Emulator

53

Spring for Android

• Results

• Used Spring Android to rapidly create an app

• Reused Match and Matches domain objects from our restful service.

• Source code listing

• PaddleScoresActivity.java - view

• Match.java* - reused from restful service

• Matches.java* - reused from restful service

54

PaddleScores Prototype Next Steps

• Registration with Device info

• Push notification – “Would you like to enter your scores?”

• Save match info to device so that if out of coverage, scores can

be updated when back in coverage.

• Enhanced UI

55

Agenda

Mobile Software Engineering Problem Context



• Demo

• Spring Mobile


• Q&A

56

Demo

57

Agenda



Use Case: Paddle Score Entry with Spring

Demo

• Spring Mobile


• Q&A

58

Spring Mobile Features

Provides features for browser experience:

• Device detection

• View resolvers

• Site preference

59

Spring Mobile Features continued

• Site preference / View Resolutiono versus Responsive Web

• Device Detection for Metrics

o Useful for collecting metrics

o Uses a “DeviceResolver” class to determine mobile, tablet or

“normal” desktop browser.

o Default resolver class uses a detection algorithm that is part

of the Wordpress Mobile Pack, but can be overridden.

60

Spring Mobile – Troubleshooting Device Detection

• The user-agent may incorrectly identify a device, so a

configuration mechanism to override is provided.

• New devices and types come out continuously and

sometimes break the detection algorithm.

• No standard for “User-agent” header.

• Need : an application that is internet accessible from all devices

and can return information about the device browser that

accessed it. (“Snoop”).

61

Spring Mobile – Snoop Controller Code snippet

public @ResponseBody String detectDevice(Device device, @RequestHeader(value="User-Agent") String userAgent) {

String deviceType = "unknown”;

if (device.isNormal()) {

deviceType = "normal”;

} else if (device.isMobile()) {

deviceType = "mobile”;

} else if (device.isTablet()) {

deviceType = "tablet";

}

String result = "Device Type : " + deviceType + "<br/>" + "User-agent : " + userAgent;

return result;}

62

Snoop Mobile – Use Spring Boot to Deploy

• Copy snoop-0.1.0.jar to cloud

• Run :

• Java –jar snoop-0.1.0.jar

• Access from browser on phone, tablet or browser

• http://yourCloudURL:8080/snoop

63

Spring Mobile – Snoop Results

• Safari MacBook Browser Result:

DeviceType: normal

User-agent : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5)…

• iPhone 5 Result :

DeviceType : mobile

User-agent: Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) ….

• Possible Future Result :

DeviceType : watch

User-agent: Mozilla/5.0 (iWatch; CPU iWatch OS like Mac OS X) ….

64

Spring for Mobile

Results :

Used Spring Framework annotations and Spring Boot to rapidly

create troubleshooting app.

Source Code Listing :

• Application.java - template

• SnoopController.java

65

Recap : Prototyping with Spring

• Server Side

• Spring Boot

• Spring Framework (@RestController)

• Client Side

• Spring for Android

• Spring Mobile

66

Agenda

Mobile Prototyping – Past

Mobile Prototyping - Leveraging Spring


Demo

Spring Mobile


• Q&A

67

68

Closing Comments

Other Mobile Talks at SpringOne

• Wednesday

• 12:45 Gradle for Android - Ken Kousen

• 2:30 Groovy Mobile Automation – Bobby Warner

• Thursday

• 12:45 Android and Groovy, a winning pair? - Cedric Champeau

Be sure to check latest listings for any updates!

69

References• Deploying Spring Boot Applications

• http://spring.io/blog/2014/03/07/deploying-spring-boot-applications

• Spring Boot - Good tutorial on how to deploy to existing Tomcat server

• http://spring.io/guides/gs/convert-jar-to-war/

• Spring Restful Services

• http://spring.io/guides/gs/rest-service/

• Spring Mobile Device Detection

• https://spring.io/guides/gs/device-detection/

• http://docs.spring.io/spring-mobile/docs/current/reference/html/device.html

70

http://spring.io/blog/2014/03/07/deploying-spring-boot-applications

http://spring.io/guides/gs/convert-jar-to-war/

http://spring.io/guides/gs/rest-service/

https://spring.io/guides/gs/device-detection/

http://docs.spring.io/spring-mobile/docs/current/reference/html/device.html

References Continued

• Spring for Android

• Consuming XML from a RESTful Web Service with Android

• http://spring.io/guides/gs/consuming-rest-xml-android/

• Other Sample Projects

• https://github.com/spring-projects/spring-android-samples

• American Platform Tennis Associationo http://www.platformtennis.org

71

http://spring.io/guides/gs/consuming-rest-xml-android/

https://github.com/spring-projects/spring-android-samples

http://www.platformtennis.org

Agenda

Mobile Prototyping - Past

Mobile Prototyping - Leveraging Spring


Demo

• Spring Mobile

Closing Comments

• Q&A

72

Thank you!

[email protected]

@mobileisforever

[email protected]

73

mailto:[email protected]

[email protected]