2/20/18

1

CS314 Software EngineeringSprint 2

Dave Matthews

Sprint 2 Summary

• Use Level 2 software engineering processes and tools• Learn some Level 3 software engineering processes and

tools– TDD, Black Box Testing, Junit

• Build a mobile, responsive client/server web application using REST APIs leveraging existing code

• Learn some additional technologies – Gson, SVG, Java Spark, – ReactJS lifting state

2/20/18

2

Build process maturity to level 3Maturity Organization Project Engineering Support

5 • Organizational PerformanceManagement

• Causal Analysis and Resolution

4 • Organizational Process Performance

• Quantitative Project Management

3• Organizational

Process Definition• Organizational

Process Focus• Organizational

Training

• Integrated Project Management

• Risk Management

• Requirements Development

• Technical Solution• Product Integration• Verification• Validation

• Decision Analysis and Resolution

2

• RequirementsManagement

• Project Planning• Project Monitoring

and Control• Supplier Agreement

Management

• ConfigurationManagement

• Process and Product Quality Assurance

• Measurement and Analysis

http://cmmiinstitute.com/sites/default/files/documents/CMMI-DEV_Quick_Ref-2014.pdf

Scrum,Zenhub

GitHub, Maven,Travis, WebPack

Sprint 2!

Scrum

Internship PlanSprint Processes Tools Technology TripCo Epics

1• Configuration Management• Project Management • Scrum, Planning Poker

• GitHub• ZenHub• CodePen

• Bootstrap 4• HTML• JavaScript• ReactJS

• Make a mobile resume• Calculate geographic

distances

2• Continuous Integration• Test Driven Development• Black Box Testing

• Maven, Travis-CI• Webpack, Node.js• JUnit

• Java Spark• REST API/HTTP• JSON, SVG

• Accept destination file• Show map and

itinerary

3• Clean Code• Code Coverage• White Box Testing

• Code Climate• Emma, Jacoco, …

• SQL• MariaDB

• Plan shorter trips• Modify destination list• Show useful

information

4 • Code Smells• Refactoring • KML

• Plan shorter trips• Add more information• Map operations

5• Peer Reviews• Inspections• Metrics

• Concurrency• Plan shorter trips• Plan trips faster• Finalize your resume

2/20/18

3

Sprint 2 Starter KitClient Components LOC Server Classes LOCApp.js 23Application.js 44 Greeting 6Destinations.js 31 HTTP 29entry.js 16 MicroServer 44Footer.js 18 MyServer 22Header.js 34 Option 5index.js 4 Place 7Itinerary.js 40 Plan 23Map.js 20 Trip 32Options.js 35Trip.js 70Total 348 Total 168

Sprint 2 Architecture

2/20/18

4

JSON - JavaScript Object Notation

www.json.org• Lightweight data

interchange format• text format that is

language independent• built on two structures

– name/value pairs (object)– ordered list (array)

JSON - JavaScript Object NotationObject Text

var obj = { "title":"text","values":[1,2,3,4,5,6]};

to var strJSON.stringify(obj);

var obj = JSON.parse(str); fromvar str = '{

"title":"text","values":[1,2,3,4,5,6]}';

2/20/18

5

Trip Format For Interchange (TFFI){ "type" : "trip", "title" : "", "options" : {}, "places" : [], "distances" : [], "map" : ""}

Trip Format For Interchange (TFFI){ "type" : "trip", "title" : "Shopping loop", "options" : {

"distance":"miles", "optimization":"none"},

"places" : [{"id":"dnvr", "name":"Denver",

"latitude":"39.73°N", "longitude":"104.99°W"}, {"id":"bldr", "name":"Boulder",

"latitude":"40.014", "longitude":"-105.27"}, {"id":"foco", "name":"Fort Collins",

"latitude":"40°35'6.92\"N", "longitude":"105°5'3.90\"W"} ],

"distances" : [29,58,65], "map" : "<svg> ... </svg>"}

2/20/18

6

Sprint 2 Component Hierarchy

ReactJS - Add local state to a class

class Application extends Component {constructor(props){

super(props);this.state = {

trip: { // default TFFItype: "trip",title: "",options : {distance: "miles"},places: [],distances: [],map: "<svg width=\"1920\" height=\"20\" xmlns=\"http://www.w3.org/2000/svg\

" xmlns:svg=\"http://www.w3.org/2000/svg\"><g></g></svg>"}

}

2/20/18

7

ReactJS - Passing Properties

render() {return(

<div id="application" className="container"><div className="row">

<div className="col-12"><Options options={this.state.trip.options} />

</div><div className="col-12">

<Destinations trip={this.state.trip} /></div><div className="col-12">

<Trip trip={this.state.trip} /></div>

</div></div>

)}

ReactJS - Using Properties

class Trip extends Component {constructor(props) {

super(props);}

// . . .

render() {return(

<div><h3>{this.props.trip.title}</h3><Map trip={this.props.trip} /><Itinerary trip={this.props.trip} />

</div>)

}}

2/20/18

8

ReactJS - Preparing to lift stateclass Application extends Component {constructor(props){

super(props);this.state = {trip: { . . . } };// bind the update to this objectthis.updateTrip = this.updateTrip.bind(this);}

// routine to allow other classes to lift state updateTrip(tffi)

this.setState({trip: tffi});}

render() {return(

// send the state and the update routine to other objects<Trip trip={this.state.trip} updateTrip={this.updateTrip} />

)}

ReactJS - Lifting stateclass Trip extends Component {constructor(props){

super(props);this.plan= this.plan.bind(this);}

. . .aync plan() {

try {let serverResponse = await this.fetchResponse();let tffi = await serverResponse.json();this.props.updateTrip(tffi);

} catch(err) {consle.error(err);

}}. . .

<button className="btn" onClick={this.plan} type="button">Plan</button>. . .

2/20/18

9

Sprint 2 Web Environment

Client send request// converts the TFFI JavaScript object to a string,// sends a request to a REST API on the server // and returns the response string from the server

fetchResponse(){const serverURL = "http://" + location.host;const restAPI = '/plan';const tffi = JSON.stringify(this.props.trip);const request = {method: "POST",body: tffi;

};return fetch(serverURL+restAPI, request);

}

2/20/18

10

Server REST API handlingpublic class MicroServer{

MicroServer(int port, String, name) {. . .post("/plan", this::plan);

}

. . .

private String plan(Request request, Response response) {response.type("application/json");return (new Plan(request)).response();

}}

Server JSON conversionspublic class Plan{private Trip trip;

public Plan(Request request) {JSONParser parser = new JsonParser();JSONElement request = parser.parse(request.body());Gson gson = new Gson();trip = gson.fromJson(request, Trip.class);trip.plan();

}

public String response() {Gson gson = new Gson;return gson.toJson(trip);}

}

2/20/18

11

Client process response// receives the TFFI response string from the server,// converts it to a TFFI JavaScript object,// and updates the state in the Application object.

async plan(){try {let serverResponse = await this.fetchResponse();let tffi = await serverResponse.json();this.props.updateTrip(tffi);

} catch(err) {console.error(err);

}}

Sprint 2 SVG