CS314 Software Engineering Sprint 2cs314/yr2018sp/more... · 2018-02-20 · 2/20/18 1 CS314...
Transcript of CS314 Software Engineering Sprint 2cs314/yr2018sp/more... · 2018-02-20 · 2/20/18 1 CS314...
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