บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( web...
TRANSCRIPT
![Page 1: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/1.jpg)
วิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)
เทคโนโลยีเว็บเซอร์วิส (Web Services)บทที่ 9
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
1
![Page 2: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/2.jpg)
วัตถุประสงค์การเรียนรู้
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
2
เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับข้อก าหนด และมาตรฐานของเว็บเซอร์วิส (Web Services) เบื้องต้นได้
เพื่อให้ผู้เรียนมีความรู้ความเข้าใจเกี่ยวกับ Representational State Transfer (REST) เว็บเซอร์วิส
เพื่อให้ผู้เรียนสามารถพัฒนาเว็บเซอร์วิส และเรียกใช้งานเว็บเซอร์วิสดังกล่าวได้
![Page 3: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/3.jpg)
หัวข้อ
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
3
บทน า (Overview)
Web Services
REST (representational state transfer)
การสร้างและใช้งาน Web Services
ประโยชน์ของ Web Services
สรุป (Summary)
![Page 4: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/4.jpg)
บทน า (Overview)
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
4
Web Services
สนับสนุนการแลกเปลี่ยนข้อมูล/ระหว่างเครื่อง
คอมพิวเตอร์XML / JSON เว็บเซอร์วิสอินเทอร์เฟส
ที่มา: http://www.w3.org/TR/2004/NOTE-ws-gloss-20040211/#webservice
![Page 5: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/5.jpg)
Web Services Architecture
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
5
ที่มา: http://th.wikipedia.org/wiki/เว็บเซอร์วิส
![Page 6: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/6.jpg)
Web Services
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
6
เว็บเซอร์วิส (Web Services) Application ที่ถูกสร้างให้รองรับการเรียกใช้งานจาก Application อื่นบน
อินเทอร์เน็ต
สื่อสารกันด้วยข้อมูลที่อยู่ในรูปแบบ XML / JSON
รูปแบบ XML ก าหนดเป็นมาตรฐานชื่อว่า SOAP โดยข้อมูลอาจถูกส่งผ่านทางโปรโตคอล HTTP, SMTP หรือ FTP แต่ที่นิยมใช้มากคือ HTTP
![Page 7: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/7.jpg)
ข้อก าหนดซอฟต์แวร์และมาตรฐาน
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
7
เทคโนโลยีที่ใช้ในการพัฒนา Web Service ประกอบด้วย ดังนี้XML เป็นภาษา Markup ที่เป็น text-based ซึ่งท าให้เป็นมาตรฐานใน
การแลกเปลี่ยนข้อมูลบนอนิเทอร์เน็ต
SOAP โปรโตคอลที่ใช้ในการสื่อสารระหว่าง Application
WSDL เอกสารที่จัดเก็บวิธีการเรียกใช้งาน Web Service
UDDI ไดเรกทอรีที่รวบรวม WSDL ไว้ด้วยกัน
![Page 8: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/8.jpg)
Web Services Technology
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
8
ที่มา: http://www.rightsoftcorp.com/
Web Service = SOAP + WSDL + UDDI
![Page 9: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/9.jpg)
REST (representational state transfer)
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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.
![Page 10: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/10.jpg)
Principles of REST
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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.
![Page 11: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/11.jpg)
HTTP methods
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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
![Page 12: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/12.jpg)
HTTP status codes
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
12
Status codes indicate the result of the HTTP request.
1XX - informational
2XX - success
3XX - redirection
4XX - client error
5XX - server error
![Page 13: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/13.jpg)
Media types
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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
![Page 14: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/14.jpg)
Consuming a RESTful Web Service with AngularJS
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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
![Page 15: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/15.jpg)
Greeting Service (*.php)
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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!"}';?>
![Page 16: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/16.jpg)
Create an AngularJS Controller
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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;
});});
![Page 17: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/17.jpg)
Create the Application Page
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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
![Page 18: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/18.jpg)
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (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.
![Page 19: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/19.jpg)
Create the Application Page (ต่อ)
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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>
![Page 20: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/20.jpg)
AngularJS SQL
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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: *");
![Page 21: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/21.jpg)
AngularJS SQL: Example
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
21
Example JSON format:https://www.w3schools.com/angular/customers.php
![Page 22: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/22.jpg)
เครื่องมือ SoapUI
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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/
![Page 23: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/23.jpg)
เครื่องมือ SoapUI
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
23
![Page 24: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/24.jpg)
ประโยชน์ของ Web Services
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
24
Web Services ช่วยให้การเข้าถึงข้อมูลสารสนเทศจากแอปพลิเคชันที่ต่างกัน
Web Services สามารถถูกเรียกใช้ภายในองค์กรเองหรือจากภายนอกองค์กรผ่าน Firewall Web Services เพิ่มศักยภาพในการท างานขององค์กร / ลดค่าใช้จ่ายในการจัดการทรัพยากร
ขององค์กร
Web Services สามารถใช้ร่วมกับ Web Application โดยส่งผ่านข้อมูลทางอินเตอร์เน็ตนับเป็นวิธีท่ีมีประสิทธิภาพในการติดต่อสื่อสารกับลูกค้า ค านึงถึงระบบรักษาความปลอดภัย และการจัดการรายการของข้อมูล
![Page 25: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/25.jpg)
สรุป (Summary)
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
25
ศึกษาและเรียนรู้เก่ียวกับ
Web Services
REST (representational state transfer)
การสร้างและใช้งาน Web Services
ประโยชน์ของ Web Services
![Page 26: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/26.jpg)
แบบฝึกปฏิบัติ
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
26
ก าหนดให้สร้างและใช้งาน PHP Web Services แบบ RESTful ด้วย AngularJSส าหรับการแปลงค่าองศาจาก Celsius เป็น Fahrenheit และ Fahrenheit เป็น Celsius โดยก าหนดหน่วยการแปลงผันอุณหภูมิ ดังนี้
![Page 27: บทที่ 9 เทคโนโลยีเว็บเซอร์วิส ( Web Servicesวิชา เทคโนโลยีเว็บ (รหัสวิชา 04-06-204)](https://reader033.vdocument.in/reader033/viewer/2022060314/5f0bb2ca7e708231d431c748/html5/thumbnails/27.jpg)
เอกสารอ้างอิง
เอกสารประกอบการสอนรายวิชา เทคโนโลยีเว็บ (04-06-204)
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