Sistem Client Server

INF TEK
Semester 4

Ringga gilang baskoro

Bayu Widodo
Aditya Wicaksono
Syieva
Praktikum
1. dasar JS
2. JS Object, JS Function, JS Async
3. JSON
4. Node.JS Architecture
5. Node Module System
6. Node Package Manager
7. RESTful API using express
8. CRUD Operation MongoDB
9. Data Validation
10. Data Relationship
11. Authentication and Authorization
12. Deployment
13. Project Review
 MOBILE APP
CLOUD COMPUTING
IOT
FRONT END DEV
BACK END DEV
FULL STACK DEV
APA ITU API???
• API atau Application Programming Interface adalah sebuah interface
yang dapat menghubungkan aplikasi satu dengan aplikasi lainnya.
• Antarmuka pemrograman aplikasi (Inggris: application programming
interface disingkat API) adalah penerjemah komunikasi antara klien
dengan server untuk menyederhanakan implementasi dan perbaikan
software.
• Bisa diartikan juga sebagai sekumpulan perintah, fungsi, serta
protokol yang dapat digunakan oleh programmer saat membangun
perangkat lunak untuk sistem operasi tertentu.
INTERFACE
INTERFACE
INTERFACE
Penerapan API
• Bahasa pemrograman
• Library & framework
• Sistem Operasi
• Web API / Web service
Bahasa pemrograman
Sistem Operasi
• Windows API
• Base Service : kernel.dll
• Graphic device Interface : win32k.sys
• User interface : user32.dll
• iOS API
• Android API
WEB API / WEB SERVICE
• SOAP (Simple Object Access Protokol)
• Arsitektur ini menggunakan XML (Extensible Markup Language) yang
memungkinkan semua data disimpan dalam dokumen.
• REST (Representational State Transfer)
• REST menggunakan JSON sebagai bentuk datanya sehingga lebih ringan.
Performa aplikasi pun menjadi lebih baik.
REST API
gaya arsitektural perangkat lunak yang didalamnya mendefinisakan
aturan-aturan untuk membuat web service/API
ILUSTRASI
• API adalah penghubung
• REST API adalah ATURANnya
• Ada request dan response
• Data yang dikirim/diterima berupa JSON
REST API
• REpresentasional State Transfer
• Architectural Style
• Stateless
• Dibuat pertama oleh Roy Fielding (disertasi PhD, 2000)
• Menggunakan Protokol HTTP
• Memungkinkan interaksi Antar Mesin
HTTP
• HTTP adalah singkatan dari Hypertext Transfer Protocol.
• Merupakan sebuah protokol yang berguna untuk komunikasi antara
sistem yang berbeda.
• Biasanya lebih sering digunakan untuk mengirimkan data dari web
server ke browser untuk menampilkan halaman website.
URL
Uniform Resource Locator , istilah lain untuk menyebut alamat
sebuah resource yang dapat diakses di website
Get / Post
 Get / Post

HTML response Traveloka

REST Client
KAI, AIR ASIA, BCA, DLL
HTTP Method
• GET
• Mengambil data
• POST
• Menambah data
• PUT
• Update data
• DELETE
• Menghapus data
RESTFul API
HTTP
End point
Method

REST
REST

https://sample.com/api/photos
https://api.sample.com/photos
Public API
Public API / Open API
• Sebuah API (REST API) yang dapat diakses secara public, yang di
dalamnya tersedia aturan untuk developer agar dapat mengakses
data.
https://console.cloud.google.com/projectselector2/apis/dashboard?supportedpurview=project
• https://any-api.com
• https://github.com/toddmotto/public-apis
• https://github.com/farizdotid
• https://kawalcorona.com/api/
Free???
• Otentikasi (Auth)
• Tanpa otentikasi
• Key / Token
 JSON
JAVASCRIPT OBJECT NOTATION
JSON

JSON

JSON
JSON
• JSON, singkatan dari JavaScript Object Notation, adalah suatu format
ringkas pertukaran data komputer. Formatnya berbasis teks dan
terbaca-manusia serta digunakan untuk merepresentasikan struktur
data sederhana dan larik asosiatif. Wikipedia
Digital Communications

Data Representation Format

Commonly Used for APIs

Lightweight and Easy to read

Integrated easily with most programming language

JSON Types

Strings • { "name" : "John" }

Numbers • { "age" : 30, "weight" : 55.3 }
Booleans • True False
Null • { "middlename":null }
•{
Arrays "employees":[ "John", "Anna", "Peter" ]
}

•{
"employee": { "name":"John", "age":30, "city":"New York"
Object
}
}
JSON Sintax rule
• Data is in name/value pairs
• Data is separated by commas
"name": "ringga"
• Curly braces hold objects
"name": "ringga", "age": 34
• Square brackets hold arrays
{ "name": "ringga", "age": 34 }

[
{ "name": "ringga", "age": 34 },
{ "name": "joko", "age": 30 }
]
• Console.log(data.nama)

let data = {"nama" : "ringga"}

console.log(data.nama);
 JSON
{
"quiz": {
"sport": {
"q1": {
"question": "Which one is correct team name in NBA?",
"options": [
"New York Bulls",
"Los Angeles Kings",
"Golden State Warriros",
"Huston Rocket"
],
"answer": "Huston Rocket"
}
}
} console.log(data.quiz.sport.q1.option[0]);
}
 JSON VS javascript

JSON Values JavaScript Values

• a string • JSON values +

• a number • a function
• an object (JSON object) • a date
• an array • undefined
• a boolean
• null
JSON VS javascript

JSON Values JavaScript Values

•{ "name" : "John" } •{ name : 'John' }
Exchanging Data
• JSON is text
• Java Script Object convert to JSON and send JSON to Server
• Received JSON from server and Convert to Java Script OBJECT
AJAX
• Asynchronous Javascript and XML
• AJAX is not a programming language
• Objek XMLHttpRequest untuk komunikasi tidak langsung (asynschronous).
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
console.log(myObj);
}
};
xmlhttp.open("GET", "https://api.kawalcorona.com/indonesia/provinsi"
, true);
xmlhttp.send();
JSON.parse()
• When receiving data from a web server => the data is always a string.
• Parse the data with JSON.parse() => the data becomes a JavaScript object

JSON JSON.parse() JavaScript Object

 JSON.stringify()
• When sending data to a web server => the data has to be a string.
• Convert a JavaScript object into a string with JSON.stringify()

JavaScript Object JSON.stringify() JSON

JQuery
• jQuery is a JavaScript Library.
• jQuery greatly simplifies JavaScript programming.
• jQuery is easy to learn.
• jQuery provides several methods for AJAX functionality.
$.get("https://api.kawalcorona.com/indonesia/provins
i",function (data) {
console.log(data);
});
Thank
You
Web Mobile
app app
Back-
end
services
Tools and framework
• Express - Node.js
• ASP.Net
• Rails – Ruby
• Django – Python
• Flask – python
• Laravel – PHP
• Etc..
About Node.js
• A runtime environment for executing JavaScript Code
• Open source
• Cross platform
• Often use Node to build back-end services  API
• Ideal for
• Highly-scalable
• Data intensive
• Real-time back-end service apps
Why node
• Great for prototyping and agile development
• Super fast and highly scalable  paypal, Uber, Netflix, Walmart, and
so on..
• Base on JavaScript
• Large ecosystem of open source library
Node APP
• Build twice as fast with fewer people
• 33% fewer line of code
• 40% fewer file
• 2x number request/sec
• decrease 35% response time
 Node.js Architecture
• Javascript only to build app that run inside a browser

Browser
JavaScript

Manipulasi DOM - Event listener – Interaktivitas - HTTP req

Etc..
Node.js Architecture
• Javascript only to build app that run inside a browser

Browser
JS Machine
JS Code JavaScript
Engine Code
JS engine

spidermonkey
2009
• Node create by Ryan Dahl

+ C++ 

V8 Access memory
File system
I/O
Network
etc
 Node is not a Node is not a
Programming language! Framework!

Node is runtime environtment

For executing java script code
How node work
• Highly-scalable
• Data intensive
• Real-time back-end service apps

Non-Blocking
Asynchronous
Karakteristik Node.Js
• Asynchronous
• Non-Blocking
• Single Thread but highly scalable
• Cross platform
• Open source
• NPM (Node Package Manager)
Node.js vs PHP
PHP Node.js
1994 2009

Zend engine Google v8

Multi thread, Sync Single Thread, Asyn

Apache/IIS Node runtime

composer NPM
Node.JS for
• Dynamic single page app
• Realtime app
• API
• Streaming app
• MERN , MEAN, MEVN
• MongoDb
• Express
• React, Angular, Vue
• Node
• Single thread
• Non-blocking
• Asyncrounus
Web Server

req

req
server
Web Server

server
Web Server
req1

req2

req3

req4
server
Web Server
Multi thread

Tomcat
server
 Multi thread
Web Server

Tomcat
server
Non-Blocking

Node.JS
server
Asyncronous

Response2

Node.JS
server
Node APP
• Build twice as fast with fewer people
• 33% fewer line of code
• 40% fewer file
• 2x number request/sec
• decrease 35% response time