บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)

วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)

เทคโนโลยีเว็บเซอร์วิส (Web Services)บทที่ 9

เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)

1

วัตถุประสงค์การเรียนรู้


2

เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับข้อก าหนด และมาตรฐานของเว็บเซอร์วิส (Web Services) เบื้องต้นได้

เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับ Representational State Transfer (REST) เว็บเซอร์วิส

เพื่อให้ผู้เรียนสามารถพัฒนาเว็บเซอร์วิส และเรียกใช้งานเว็บเซอร์วิสดังกล่าวได้

หัวข้อ


3

บทน า (Overview)

Web Services

REST (representational state transfer)

การสร้างและใช้งาน Web Services

ประโยชน์ของ Web Services

สรุป (Summary)

บทน า (Overview)


4

Web Services

สนับสนุนการแลกเปลี่ยนข้อมูล/ระหว่างเครื่อง

คอมพิวเตอร์XML / JSON เว็บเซอร์วิสอินเทอร์เฟส

ที่มา: http://www.w3.org/TR/2004/NOTE-ws-gloss-20040211/#webservice

Web Services Architecture


5

ที่มา: http://th.wikipedia.org/wiki/เว็บเซอร์วิส

Web Services


6

เว็บเซอร์วิส (Web Services) Application ที่ถูกสร้างให้รองรับการเรียกใช้งานจาก Application อื่นบน

อินเทอร์เน็ต

สื่อสารกันด้วยข้อมูลที่อยู่ในรูปแบบ XML / JSON

รูปแบบ XML ก าหนดเป็นมาตรฐานชื่อว่า SOAP โดยข้อมูลอาจถูกส่งผ่านทางโปรโตคอล HTTP, SMTP หรือ FTP แต่ที่นิยมใช้มากคือ HTTP

ข้อก าหนดซอฟต์แวร์และมาตรฐาน


7

เทคโนโลยีที่ใช้ในการพัฒนา Web Service ประกอบด้วย ดังนี้XML เป็นภาษา Markup ที่เป็น text-based ซึ่งท าให้เป็นมาตรฐานใน

การแลกเปลี่ยนข้อมูลบนอนิเทอร์เน็ต

SOAP โปรโตคอลที่ใช้ในการสื่อสารระหว่าง Application

WSDL เอกสารที่จัดเก็บวิธีการเรียกใช้งาน Web Service

UDDI ไดเรกทอรีที่รวบรวม WSDL ไว้ด้วยกัน

Web Services Technology


8

ที่มา: http://www.rightsoftcorp.com/

Web Service = SOAP + WSDL + UDDI



9

REST (Representational State Transfer) was introduced and defined in 2000 by Roy Fielding in his doctoral dissertation

REST is an architectural style for designing distributed systems not a standard but a set of constraints

such as being stateless, having a client/server relationship, and a uniform interface

REST is not strictly related to HTTP, but it is most commonly associated with it.

Principles of REST


10

Resources expose easily understood directory structure URIs.

Representations transfer JSON or XML to represent data objects and attributes.

Messages use HTTP methods explicitly (for example, GET, POST, PUT, and DELETE).

Stateless interactions store no client context on the server between requests. State dependencies limit and restrict scalability. The client holds session state.

HTTP methods


11

Use HTTP methods to map CRUD (create, retrieve, update, delete) operations to HTTP requests.

Method Example address (URL) Comment

GET GET /addresses/1

PUT PUT /addresses/1 PUT replaces an existing entity. If only a subset of data elements are provided, the rest will be replaced with empty or null.

POST POST /addresses

PATCH PATCH /addresses/1

DELETE DELETE /addresses/1

HTTP status codes


12

Status codes indicate the result of the HTTP request.

1XX - informational

2XX - success

3XX - redirection

4XX - client error

5XX - server error

Media types


13

Accept and Content-Type HTTP headers can be used to describe the content being sent or requested within an HTTP request

application/json - JSON

application/xml - XML

Consuming a RESTful Web Service with AngularJS


14

Define a custom service that represents a RESTful client.

Using this client we can make requests for data to the server in an easier way, without having to deal with the lower-level $http API, HTTP methods and URLs.

AngularJS client will be accessed by opening the index.html file in your browser, and will consume the service accepting requests at:

http://[YOUR_WEB_HOSTING]/[YOUR_PATH]/greeting.php

Greeting Service (*.php)


15

The service will respond with a JSON representation of a greeting:

<?php

header("Access-Control-Allow-Origin: *");

header("Content-Type: application/json; charset=UTF-8");

echo '{"id":1,"content":"Hello, World!"}';?>

Create an AngularJS Controller


16

Create the AngularJS controller module that will consume the REST service:

public/hello.js

var app = angular.module('demo', []);

app.controller('Hello', function($scope, $http) {

$http.get('http://[YOUR_WEB_HOSTING]/[YOUR_PATH]/greeting.php').

then(function(response) {

$scope.greeting = response.data;

});});

Create the Application Page


17

Now that you have an AngularJS controller, you will create the HTML page that will load the controller into the user’s web browser:

public/index.html

เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)18

<!doctype html>

<html ng-app="demo">

<head>

<title>Hello AngularJS</title>

<script src="angular.min.js"></script>

<script src="hello.js"></script>

</head>

<body>

<div ng-controller="Hello">

<p>The ID is {{greeting.id}}</p>

<p>The content is {{greeting.content}}</p>

</div>

</body></html>

The AngularJS library enables several custom attributes for use with standard HTML tags. In index.html, two such attributes are in play:• The <html> tag has the ng-app attribute to indicate that this page is an AngularJS application.• The <div> tag has the ng-controller attribute set to reference Hello, the controller module.

Create the Application Page (ต่อ)


19

Also note the two <p> tags which use placeholders (identified by double-curly-braces)

The placeholders reference the id and content properties of the greeting model object which will be set upon successfully consuming the REST service.

<p>The ID is {{greeting.id}}</p><p>The content is {{greeting.content}}</p>

AngularJS SQL


20

AngularJS is perfect for displaying data from a Database. Just make sure the data is in JSON format.

Fetching Data From a PHP Server Running MySQL

Using PHP and MySQL. Returning JSON.

Server Code PHP and MySQL

Cross-Site HTTP Requestsheader("Access-Control-Allow-Origin: *");

AngularJS SQL: Example


21

Example JSON format:https://www.w3schools.com/angular/customers.php

เครื่องมือ SoapUI


22

Software Testing tool ของ Service Oriented Architecture (SOA)

โปรแกรมในกลุ่ม Open Source ที่เผยแพร่ภายใตข้้อตกลงของ GNU Lesser General Public License

SoapUI เป็นเครื่องมือทดสอบใช้เรียกเว็บเซอร์วสิ โดยไม่จ าเป็นต้องเขียนโปรแกรมเพื่อเรียกใช้งาน ซึ่งลดความยุ่งยากและเพิ่มความรวดเร็วในการทดสอบเว็บเซอร์วิส โดย soapUI นั้นเป็นเคร่ืองมือส าหรับเรียกดูเอกสาร wsdl และสั่ง (invoke)

method บน webservice

Download SoapUI: http://www.soapui.org/

เครื่องมือ SoapUI


23



24

Web Services ช่วยให้การเข้าถึงข้อมูลสารสนเทศจากแอปพลิเคชันที่ต่างกัน

Web Services สามารถถูกเรียกใช้ภายในองค์กรเองหรือจากภายนอกองค์กรผ่าน Firewall Web Services เพิ่มศักยภาพในการท างานขององค์กร / ลดค่าใช้จ่ายในการจัดการทรัพยากร

ขององค์กร

Web Services สามารถใช้ร่วมกับ Web Application โดยส่งผ่านข้อมูลทางอินเตอร์เน็ตนับเป็นวิธีท่ีมีประสิทธิภาพในการติดต่อสื่อสารกับลูกค้า ค านึงถึงระบบรักษาความปลอดภัย และการจัดการรายการของข้อมูล

สรุป (Summary)


25

ศึกษาและเรียนรู้เก่ียวกับ

Web Services


การสร้างและใช้งาน Web Services


แบบฝึกปฏิบัติ


26

ก าหนดให้สร้างและใช้งาน PHP Web Services แบบ RESTful ด้วย AngularJSส าหรับการแปลงค่าองศาจาก Celsius เป็น Fahrenheit และ Fahrenheit เป็น Celsius โดยก าหนดหน่วยการแปลงผันอุณหภูมิ ดังนี้

เอกสารอ้างอิง


27

AngularJS SQL (Online), Available at: https://www.w3schools.com/angular/angular_sql.asp

Getting Started - Consuming a RESTful Web Service with AngularJS (Online), Available at: https://spring.io/guides/gs/consuming-rest-angularjs/

Lorna Jane Mitchell, PHP Web Services, O’Reilly Media, Inc., 2013

WSDL Documents (Online), Available at: http://www.w3schools.com/webservices/ws_wsdl_documents.asp

Understanding REST (Online), Available at: https://spring.io/understanding/REST