ประสบการณ์ & ความชำนาญ: 2024

วันพฤหัสบดีที่ 21 มีนาคม พ.ศ. 2567

การนำข้อมูล JSON จาก API มาใช้งาน

โดยทั่วไป API Endpoint จะ Response ข้อมูลออกมาใน Format เป็น JSON มาผ่านทางหน้าจอของ Browser หรือสามารถดูได้จากการใช้งาน Postman ซึ่งจะมี 2 รูปแบบ

ref : https://www.w3schools.com/whatis/whatis_json.asp

1.JSON Objects -ข้อสังเกตุ : ไม่มี [ ] ครอบข้อมูล

SON objects are written inside curly braces. Just like in JavaScript, objects can contain multiple name/value pairs:

{"firstName":"John", "lastName":"Doe"}

2.JSON Arrays -ข้อสังเกตุ : มี [ ] ครอบข้อมูล

JSON arrays are written inside square brackets. Just like in JavaScript, an array can contain objects:

"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]

Remark : use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object

ฉะนั้นการจพนำข้อมูลมาใช้งาน ต้องรู้ก่อนว่า Response มาใน Format ใด แล้วจึงจะสามารถเรียกใช้ได้ ดังเช่นตัวอย่างต่อไปนี้

1.กรณีที่ endpoint ส่ง response มาเป็น JSON Objects

const res = fetch(mlink);

const json = res.json();

console.log(json);

2.กรณีที่ endpoint ส่ง response มาเป็น JSON Arrays

const res = fetch(mlink);

const arrData = await res.json(); //ค่าที่รับเป็น array

const json = Object.assign({}, arrData[0]); //convert array to object

// arrData[0] เป็นตำแน่งที่อยู่ของข้อมูล

console.log(json);

หมายเหตุ : กรณีใช้ axios ก็เช่นเดียวกัน แต่จะสะดวกกว่า

ตัวอย่างของ Endpoint

if($rowcount>0){

while ($row = mysqli_fetch_assoc($result)) {

//$response = $row; //เตรียมส่งค่า response เป็น JSON Objects

$response[] = $row; //เตรียมส่งค่า response เป็น JSON Arrays

}

}else{

//$response['code'] = '400'; //เตรียมส่งค่า response เป็น JSON Objects

//$response['status'] = 'NOT FOUND'; //เตรียมส่งค่า response เป็น JSON Objects

$response[]=array('code'=>'400','status'=>'NOT FOUND'); //response JSON Arrays

}

echo json_encode($response, JSON_UNESCAPED_UNICODE); //แสดงข้อมูลเป็นภาษาไทย

วันเสาร์ที่ 9 มีนาคม พ.ศ. 2567

การติดตั้งEmulator ใช้ LDPlayer สำหรับ B4A

การติดตั้งEmulator ใช้ LDPlayer สำหรับ B4A ทำงานได้อย่างรวดเร็วและ Realtime ขณะ Dev

มีขั้นตอนดังนี้

1.download LDPlayer

2.ตั้งค่า

-กำหนด device ที่ต้องการ/ขนาดจอที่ต้องการ (setting->การตั้วค่าชั้นสูง)

-กำหนด การตั้งค่าอื่นๆ->การดีบัก ADB (ให้เลือก 'เปิดการเชื่อมต่อ')

หมายเหตุ : เวลาใช้งานใน B4A คลิกที่ปุ่ม Run ได้เลย

Remark : TodayTips

-work มากเลย ทำ browser.apk ได้ขนาด 125 kb

-เปลี่ยน icon ได้จากเมนู project ขนาดภาพ .png เป็น 128x128

-Mode: Release จะสร้าง .apk / Mode: Debug ไว้ทดสอบกับ Emulator

-LDPlayer หลังจากset ค่าแล้ว จะใช้งานได้ทันที(ต้องเปิดรอ ไม่เปิด App B4ABridge)

-กรณีการเรียกใช้ WebView สามารถปิด ZoomEnabled ได้จาก propertiy ใน Designer

-กรณีการเรียกใช้ WebView แล้วเปิด web ที่ไม่มี SSL เช่น http:// (มิใช่ https://)

ต้องกำหนดค่า SetApplicationAttribute(android:usesCleartextTraffic, "true")

ใน Project Manifest ทุกครั้ง

คลิปตัวอย่างการใช้งาน

https://www.youtube.com/watch?v=9mGd0DIa_yU

Android App : iTarawih

วันศุกร์ที่ 8 มีนาคม พ.ศ. 2567

การส่งบันทึกข้อมูลด้วย API

การส่งบันทึกข้อมูลด้วย API ใน PHP

Sender

$data = array('title' => $title_value,

'author' => $author_value,

'published_at' => $published_value

);

$data_json = json_encode($data); // Data should be passed as json format

// API URL to send data

$url = 'http://209.15.98.146/apps/adi_test/test/api_add_data.php';

$ch = curl_init(); // curl initiate

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

curl_setopt($ch, CURLOPT_POST, 1); // SET Method as a POST

curl_setopt($ch, CURLOPT_POSTFIELDS,$data_json); // Pass data in POST command

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch); // Execute curl and assign returned data

curl_close($ch); // Close curl

Endpoint

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

header("Content-Type: application/json; charset=UTF-8"); // Set the content type to JSON

header("Access-Control-Allow-Methods: OPTIONS,GET,POST,PUT,DELETE");

header("Access-Control-Max-Age: 3600");

header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

$method = $_SERVER['REQUEST_METHOD']; // Handle HTTP methods

if($method=='POST'){

$data = json_decode(file_get_contents('php://input'), true);

$title = $data['title'];

$author = $data['author'];

$published_at = $data['published_at'];

$stmt = $pdo->prepare('INSERT INTO books (title, author, published_at) VALUES (?, ?, ?)');

$stmt->execute([$title, $author, $published_at]);

echo json_encode(['message' => 'Book added successfully']);

}else{

http_response_code(405);

echo json_encode(['error' => 'Method not allowed']);

}

วันพฤหัสบดีที่ 7 มีนาคม พ.ศ. 2567

Vue in Practicale Tutorial

สรุปขั้นตอนการใช้งาน vue.js ในแบบ SPA

1.เรียกใช้ vue.js (และอื่นๆเช่น Bootstrap และ Axios และ Font-awesom) ในส่วน <head></head>

2.กำหนดตำแน่งสำหรับการแสดงผลใน HTML (ไว้ใน <body></body>)

</div>

3.เขียน Sccript (ไว้ด้านล่างสุด ของ <body></body>)

new Vue({

el: '#app',

data () {

return {

info: null,

todayDate: new Date().toLocaleDateString()

}

methods: {

numberFormat(number) {

var number = parseInt(number) //conver to int

return number.toLocaleString()

fixTwoDigit(number){

var amount=parseFloat(number).toFixed(2)

var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

return formattedString

}

mounted () {

const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'

axios.get(targetURL)

.then(response => (this.info = response.data))

.then(response => (console.log(response)))

}

})

</script>

คำอธิบาย Script แต่ละส่วน option ของ vue (จะต้องวางเรียงกันตามลำดับ จะสลับกันไม่ได้)

1. data(){ } เป็นส่วนของการกำหนดข้อมูลทุกชนิดที่ตองการใช้ทั้งหมด

2. methods: { } เป็นส่วนที่ใช้ในการกำหนด function ต่างๆ ที่ต้องการใช้ทั้งหมด

3. mounted() { } เป็นส่วนที่ทำการแสดงผลเข้าใน Html ตามที่ระบุ id (id="app")

โดยส่วนนี้จะสามารถกำหนด activity ที่ต้องการกระทำทันทีได้ด้วย

เช่น การเรียกใช้ api ด้วย axios ตามตัวอย่าง เป็นต้น

*** methods: { } จะไม่มีวงเล็บ () ***ข้างในไม่ต้องระบุคำว่า function

ตัวอย่างFull

<!DOCTYPE html>

<head>

<title>COVID-19</title>

</head>

COVID19-Weekly<sup>©</sup></a>

</button>

</div>

</div>

</nav>

<br>

<h3>รายงานสถานการณ์ COVID-19 ประจำสัปดาห์</h3>

<tbody>

<tr>

<td><b>ลำดับ </b></td>

<td><b>สัปดาห์ </b></td>

<td><b>จังหวัด</b></td>

<td><b>รายใหม่</b></td>

<td><b>รวมทั้งหมด</b></td>

<td><b>ตายใหม่</b></td>

<td><b>ตายรวม</b></td>

<td><b>วันที่รายงาน</b></td>

</tr>

<td v-if="row.province !='ทั้งประเทศ'">{{ index+1 }}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.weeknum}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.province}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.new_death}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.total_death}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.update_date}}</td>

</tr>

<td v-if="row.province =='ทั้งประเทศ'">{{row.weeknum}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.province}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.new_death}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.total_death}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.update_date}}</td>

</tr>

</tbody>

</table>

</div>

</center>

</div>

<br>

</center></font>

</div>

</footer>

</div>

new Vue({

el: '#app',

data () {

return {

info: null,

todayDate: new Date().toLocaleDateString()

}

methods: {

numberFormat(number) {

var number = parseInt(number) //conver to int

return number.toLocaleString()

fixTwoDigit(number){

var amount=parseFloat(number).toFixed(2)

var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

return formattedString

}

mounted () {

const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'

axios.get(targetURL)

.then(response => (this.info = response.data))

.then(response => (console.log(response)))

}

})

</script>

</body>

</html>

วันอังคารที่ 27 กุมภาพันธ์ พ.ศ. 2567

ApexCharts.js ง่ายสุด

เขียน Chart อย่างง่ายด้วย ApexCharts : Modern & Interactive Open-source Charts

ดังนี้

1.กำหนด library path

2.กำหนดขนาดด้วย style

3.กำหนดที่สำหรับ render

4.กำหนดลักษณะ chart ด้วย javascript

เช่น

var options = {

chart: {

type: 'bar' },

series: [{

name: 'sales',

data: [30,40,45,50,49,60,70,91,125]

}],

xaxis: {

categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]

}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

หมาเหตุ : มีตัวอย่างการดึงข้อมูลจาก Api มาแสดงกราฟได้ทันที

https://apexcharts.com/docs/update-charts-from-json-api-ajax/

ตย.

<head>

<title>Axios Example </title>

<style>

#chart { max-width: 450px; margin: 35px auto; }

</style>

</head>

<body>

var options = {

series: [],

chart: {

height: 250,

type: 'bar',

dataLabels: {

enabled: false

title: {

text: 'Ajax Example',

noData: {

text: 'Loading...'

xaxis: {

type: 'category',

tickPlacement: 'on',

labels: {

rotate: -45,

rotateAlways: true

}

};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

// AXIOS for GET DATA ///////////////////

axios({

method: 'GET',

url: 'http://223.27.246.234/poe12-opendata/apexcharts_data/daily_passenger.php',

})

.then(function(response) {

chart.updateSeries([{

name: 'Passenger-in',

data: response.data

}])

})

/////////End Axios///////////////////////

</script>

</body>

</html>

วันจันทร์ที่ 26 กุมภาพันธ์ พ.ศ. 2567

การเขียนเอกสารประกอบ API

การเขียนเอกสารประกอบ API (Application Programing Interface) สำหรับให้ผู้อื่นได้เข้าถึงข้อมูล อย่างมีประสิทธิภาพและปลอดภัย จะต้องเขียนให้ครอบคลุมประเด็นหัวข้อ 5 หัวข้อ ดังนี้

1.URL สำหรับขอ Request

ตำแหน่งของ URL endpoint ของ API

2.Method สำหรับการเรียกใช้ API

จะต้องใช้งานผ่าน HTTP Request ซึ่ง HTTP Request นั้นเป็นการส่งข้อคำขอเพื่อร้องขอข้อมูลกับทางผู้ให้บริการ เช่น การเข้าเว็ปไซต์ต่างๆจะเป็นการส่งคำขอเพื่อรับหน้าเว็ปมาแสดงผล โดย HTTP Request จะต้องระบุ method ที่ใช้งานโดยจากข้อที่แล้ว methed ที่ api กำหนดก็คือ GET

3.Parameter ที่ต้องใช้

parameter เป็นข้อมูลที่ผู้ให้บริการต้องการใช้ เพื่อการใช้งาน api ตามปกติแล้วจะเป็นการเจาะจงข้อมูลที่ต้องการ เช่น เป็นข้อมูลของวันที่เท่าไหร่ หรือเป็นการใส่ api-key ที่เป็นการกำหนดว่าคนร้องขอเป็นใคร โดยส่วนมากจะต้องสมัครสมาชิกเพื่อรับ api-key ซึ่งจะไม่ซ้ำกับคนอื่น

4.Respond ที่ตอบกลับมา

เมื่อกดส่งก็จะได้ข้อมูลลักษณะที่เป็นข้อมูลประเภทJSON (รูปแบบข้อมูล String ที่ใช้กันในการส่งข้อมูล) ซึ่งข้อมูลนี้คือผลลัพธ์ที่ทางผู้ให้บริการตอบกลับมาจากข้อมูลทั้งหมดที่ได้ร้องขอ หลังจากนี้คือหน้าที่ของผู้ร้องขอ ว่าจะเอาข้อมูลส่วนไหนไปทำอะไร

5.ข้อกำหนดและข้อตกลง

เนื่องจาก API เป็นการร้องขอข้อมูลของคนอื่นมาใช้งาน ดังนั้นจึงต้องที่จะทำความเข้าใจในข้อตกลงและปฏิบัติตามอย่างเคร่งครัดด้วย เช่นบางที่อาจให้ใส่ credit หรือห้ามใช้ในเชิงพาณิชย์ เป็นต้น

ดูตัวอย่าง

CR: https://www.borntodev.com/c/webdeveloper/%E0%B8%88%E0%B8%B0%E0%B9%83%E0%B8%8A%E0%B9%89-api-%E0%B8%8A%E0%B8%B2%E0%B8%A7%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%95%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%94%E0%B8%B9%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%87-5fa4fe4b04367

วันอาทิตย์ที่ 25 กุมภาพันธ์ พ.ศ. 2567

พื้นฐาน Vue.js Study Link Resources

BASCI VUE3

https://www.mindphp.com/developer/20-javascript/9721-getting-started-with-vue-js.html

REST API

https://www.youtube.com/watch?v=JmwgD3UOsHA

CODE SNIPPED

https://fontawesomeicons.com/fa/vue-js-post-form-data-to-api-using-axios

ROUTE

https://shouts.dev/articles/vuejs-3-routing-from-scratch-using-cdn-without-cli

CRUD -PHP & MYSQL [API with Axios]

https://github.com/rudSarkar/php-mysql-vue

Multiple Endpoint [API with Axios]

https://blog.logrocket.com/using-axios-all-make-concurrent-requests

ตย.

<head>

</head>

<body>

<p>Date : {{todayDate}}</p>

<thead><tr><th>No</th><th>Office</th><th>T1</th></tr></thead>

<tbody>

<td>{{index+1}}</td>

</tr>

</tbody>

</table>

<br>

<thead><tr><th>No</th><th>Office</th><th>C19</th><th>YLF</th></tr></thead>

<tbody>

<td>{{index+1}}</td>

</tr>

</tbody>

</table>

</div>

new Vue({

el: '#app',

data () {

return {

vsan:null,

qalert:null,

todayDate: new Date().toLocaleDateString(),

}

mounted () {

let endpoints = [

'http://223.27.246.234/poe12-opendata/vsan_t1.php',

'http://223.27.246.234/poe12-opendata/qalert.php'

];

axios.all(endpoints.map((endpoint) => axios.get(endpoint)))

.then(

axios.spread(({data: vsan}, {data: qalert}) => {

this.vsan = vsan

this.qalert = qalert

console.log({ vsan, qalert });

})

);

}

})

</script>

</body>

</html>

Vue.js & Axios.js Best Practis

ครั้งแรกเริ่มทำด้วย vue.js และ Axios.js

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>{{today}}</p> <p>{{formattedDate}}</p>

<br>

<p>บัตร ปชช. {{info.person_results[0].citizen_no}}</p>

<p>ชื่อ-สกุล {{info.person_results[0].pre_name}} {{info.person_results[0].f_name}}  {{info.person_results[0].l_name}}

<p>วดป.เกิด {{info.person_results[0].birth_date}}</p>

<p>ที่อยู่ปัจจุบัน {{info.person_results[0].present_address}}</p>

ประวัติการได้รับวัคซีน

<tr><td>No.</td><td>Vaccine Name</td><td>Date</td><td>Service place</td></tr>

<td>{{index+1}}</td>

<td>{{rowvac.vacc_disease }}</td>

<td>{{rowvac.vacc_date }}</td>

<td>{{rowvac.authorize_workplace_name }}</td>

</tr>

</table>

</div>

new Vue({

el: '#app',

data () {

return {

today: new Date().toLocaleDateString(),

info: null,

date: new Date()

}

mounted () {

const targetURL ='http://223.27.246.234/hujat-info/vaccination/api_intervac.php?p=3960400280121'

axios.get(targetURL)

.then(response => (this.info = response.data))

.then(response =>console.log(response))

computed: {

formattedDate() {

const day = this.date.getDate().toString().padStart(2, "0");

const month = (this.date.getMonth() + 1)

.toString()

.padStart(2, "0");

const year = this.date.getFullYear().toString();

const th_year = this.date.getFullYear()+543;

return `${day}/${month}/${th_year}`;

}

})

</script>

</body>

</html>

หมายเหตุ

-การดึง API จาก enpoint ที่ติดปัญหาเรื่อง CORS

ให้แก้ด้วยการดึงด้วย PHP (ใช้ CURL) แล้วให้ส่งค่า Response เพื่อให้ Axios ดึงมาอีกที

(เพราะ PHP เป็น Server side Rendering อยู่แล้ว ไม่มีปัญหาเรื่อง CORS)

คอมพิวเตอร์และอินเตอร์เน็ต,บรรยายวิชาการ,วิจัย,ศึกษากุรอาน,E-Book

วันพฤหัสบดีที่ 21 มีนาคม พ.ศ. 2567

วันเสาร์ที่ 9 มีนาคม พ.ศ. 2567

วันศุกร์ที่ 8 มีนาคม พ.ศ. 2567

วันพฤหัสบดีที่ 7 มีนาคม พ.ศ. 2567

วันอังคารที่ 27 กุมภาพันธ์ พ.ศ. 2567

วันจันทร์ที่ 26 กุมภาพันธ์ พ.ศ. 2567

วันอาทิตย์ที่ 25 กุมภาพันธ์ พ.ศ. 2567