Spring 2014 Semester Internship Final presentation to co-workers

1. Elizabeth Long
Student Intern
Spring, 2014
Red Rocks Community College
Lakewood, CO
Web Development
Graduating May 2014

2. IP Commerce Query Demo
Project builds on existing application
using the following:
Internship Program 3

3. AngularJS
Express
Node.js

4. Angular’s MVC
https://docs.angularjs.org/guide/concepts
MODEL:
the data that is shown to the user
and with which the user interacts
VIEW:
what the user sees (the DOM)
CONTROLLER:
the business logic behind views

5. Request Life Cycle
CLIENT
Angular
SERVER
Node
Express
COMMERCE
BOARDING
SERVICE

6. HTML & Angular: Client-side
AngularJS is a JavaScript framework used to create dynamic
web apps.
Created new views using HTML & Angular’s ng-model and ng-click
directives
customerLanding.html qualifierLog.html
queryResults.html qualiferResponses.html
appDetails.html persCredReport.html
Created a new controller using Angular and JavaScript
customerLanding.js - external controller used to handle SUBMIT
($scope) and to pass query parameters ($http) to Express using
Angulars HTML Method: $http.get
Internship Program 7

7. Express & Node: Server-side
Express (web application framework for Node)
Receives requests from Angular and passes them to
Node, then returns responses from Node back to
Angular
added code to api.js - /api/custLandingQuery
Node passes request to Commerce Boarding Service
added code to ipc.js - this.custLandingQ
Internship Program 8

8. Application Dropdown Option
Eliminates need to type /accept, /pend, or /reject in URL
Internship Program 9

9. custLanding.html
Balsamiq
Internship Program 10

10. custLanding.html
Internship Program 11

11. queryResults.html
Balsamiq
Internship Program 12

12. queryResults.html
Internship Program 13

13. qualifierLog.html
Balsamiq
Internship Program 14

14. qualifierLog.html
Internship Program 15

15. qualifierResponses.html
Balsamiq
Internship Program 16

16. qualifierResponses.html
Internship Program 17

17. persCredRpt.html
Balsamiq
Internship Program 18

18. persCredRpt.html
Internship Program 19

19. New Skills
• Experience with the event-driven, non-blocking I/O model
used with web applications
• How to recognize asynchronous code
• The nuts & bolts of Angular, Express, and Node APIs and
HTTP METHODS
• Express & Node - all I/O operations must include a callback
• How to create and use angular.module() & Node
module.exports
• How to pass query params: Angular  Express  Node
• Structuring queries into acceptable formats for a service
• Balsamiq, GIT and repositories
• The difference between JS object and .json file

20. Technologies &
Tools
HTML Yeoman *
CSS Bower *
JavaScript client-side Sass/Compass *
JavaScript server-side * Grunt *
MVC * Chrome Console
AngularJS * Server Console
Express * Nodemon npm *
Node.js/npm * Balsamiq *
Rest APIs & Callbacks * Sublime Text *
GIT/repositories *
* no prior exp