ประสบการณ์ & ความชำนาญ: มีนาคม 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>

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

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

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

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

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

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

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

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

Vue in Practicale Tutorial