Getting Mean. Practical Perspective. Prof. Dr. Alejandro Zunino, Prof. Dr. Alfredo Teyseyre. ISISTAN Department of Computer Science UNICEN

Transcription

1 Getting Mean Practical Perspective Prof. Dr. Alejandro Zunino Prof. Dr. Alfredo Teyseyre ISISTAN Department of Computer Science UNICEN 2016

2 Outline

3 Introducing the example application Loc8r will list nearby places with WiFi where people can go and get some work done

4 Introducing the example application Loc8r will list nearby places with WiFi where people can go and get some work done

5 Mean Architecture JavaScript is the common language throughout the MEAN stack, and JSON is the common data format

6 Mean Architecture Three options: ranging from a server-side Express and Node.js application to a full client-side AngularJS SPA

7 Server-side Express and Node.js One-way data bindingthe template and model are compiled on the server before being sent to the browser

8 AngularJS SPA Two-way data bindingthe model and the view are processed in the browser and bound together, each instantly updating the other

9 Outline

10 Mongoose var mongoose = require( 'mongoose' ); var reviewschema = new mongoose.schema({ author: String, rating: {type: Number, required: true, min: 0, max: 5}, reviewtext: String, createdon: {type: Date, default: Date.now} }); var openingtimeschema = new mongoose.schema({ days: {type: String, required: true}, opening: String, closing: String, closed: {type: Boolean, required: true} }); var locationschema = new mongoose.schema({ name: {type: String, required: true}, address: String, rating: {type: Number, "default": 0, min: 0, max: 5}, facilities: [String], coords: {type: [Number], index: '2dsphere'}, openingtimes: [openingtimeschema], reviews: [reviewschema] });

11 Outline

12 Build an internal API for a data layer. Isn't it creating more work? At this stage, yes, it's creating more workbut you want to look further down the road here...

13 Best practice: Build an internal API for a data layer

14 Writing a REST API We'll build a REST API so that we can interact with our database through HTTP calls and perform the common CRUD functions: create, read, update, and delete.

15 The rules of a REST API REST stands for REpresentational State Transfer It is an architectural style rather than a strict protocol. REST is stateless it has no idea of any current user state or history

16 Request methods HTTP requests can have dierent methods that essentially tell the server what type of action to take Each of the four CRUD operations uses a dierent request method.

17 Request methods: locations Request method is used to link the URL to the desired action, enabling the API to use the same URL for dierent actions

18 Request methods for subdocuments API URL specications for interacting with subdocuments; each base URL path must contain the ID of the parent document

19 Responses and status codes A good API always returns a response and shouldn't leave you hanging. For a successful REST API, standardizing the responses is just as important as standardizing the request format. The returned data The HTTP status code Typical formats for a REST API are XML and JSON. API will return one of three things for each request: A JSON object containing data answering the request query A JSON object containing error data Prof. Dr. Alejandro Zunino, A nullprof. response Dr. Alfredo Teyseyre

20 Using HTTP Status Codes A good REST API should return the correct HTTP status code We'll make use of several of these status codes, while also returning the appropriate data.

21 Creating the routes Including the routes in the application (app.js) var routes = require('./app_server/routes/index'); var routesapi = require('./app_api/routes/index'); app.use('/', routes); app.use('/api', routesapi); Specifying the request methods in the routes (app_api/routes/index.js) router.get('/location', ctrllocations.locationinfo); router.post('/locations', ctrllocations.locationscreate);

22 Creating the routes

23 Reading one location

24 Creating a new location

25 Deleting a document from MongoDB given an ID

26 Testing the API Using the Postman REST Client in Chrome to test a PUT request to the API

27 Outline

28 Calling an API from an lication

29 Using the request module The basic construct for making a request is really simple, being just a single command taking parameters for options and a callback

30 Using the request module: get example Putting the parts together, the skeleton for making API calls looks like the following

31 Using the request module: get locations example Putting the parts together, the skeleton for making API calls looks like the following

32 Outline

33 A look at Bootstrap The fundamental concept of Bootstrap is that you can dene how many columns an element will use, and this can be a dierent number for dierent screen sizes aca!!

34 Appendix For Further Reading For Further Reading I Simon Holmes. Getting MEAN with Mongo, Express, Angular, and Node Manning (Source Code