วันอังคารที่ 6 กรกฎาคม พ.ศ. 2564

ตกม้าตามสั่งสินค้าจากต่างประเทศใช้งานกับซิมการ์ดที่มีอยู่ไม่ได้ แก้ยังไงไปดูกัน

คุยกันต่อเรื่องความถี่และแบรนของอุปกรณ์ 3G และ4G กัน ตามความเข้าใจของผู้เขียนแบบเร่งด่วน


 หลายครั้งที่สั่งซื้อสินค้าจากต่างประเทศ พบว่าไม่สามารถเอามาใช้งานกับซิมการ์ดที่มีอยู่ในบ้านเราได้ วันนี้ก็เลยจะมาบอกเล่าประสพการณ์เรื่องนี้กัน ผู้เขียนสั่งผิดมาแต่ละรอบเนี่ยเสียเวลาและเสียรู้ไปตลอด เพราะว่าซิมเราต้องจ่ายเงินทุกๆ เดือนเพื่อให้อุปกรณ์ยังใช้งานได้ดีอยู่ กลายเป็นภาระไปเลย


ขั้นตอนที่ 1 ดูรายละเอียด ความถี่และแบนด์กัน เริ่มที่ 3G ความถี่ที่ใช้ในบ้านเราคือ 850MHz, 900MHz, 1800MHz และ 2100MHz แบนด์ที่เรียกกันก็คือ แบนด์ 1 ตรงกับความถี่ 2100MHz แบนด์ 3 ตรงกับความถี่ 1800 MHz แบนด์ 5 ตรงกับความถี่ 850MHz และ แบนด์ 8 ตรงกับความถี่ 900 MHz ชื่อที่ใช้ก็คือ WCDMA
 

ขั้นตอนที่ 2 ความถี่ 4G หรือชื่อที่ใช้คือ LTE-FDD บ้านเราจะมีความถี่ 2100MHz, 2300MHz, 1800MHz และ 900MHz
 

ขั้นตอนที่ 3 มาดูตัวอย่างกันเช่นโมดูล SLM750 C7C ที่สั่งมาล่าสุด ผู้เขียนเอาไปใช้กับซิมมือถือ 3G คลื่น 850MHz ไม่ได้ พอเรามากางสเปคดู พบว่า 

SLM750-C7C 
LTE FDD: B1/B3/B5/B8
TD-LTE: B38/B39/B40/B41
WCDMA: B1/B8
TD-SCDMA: B34/B39
CDMA&EVDO: BC0
GSM: 900/1800


จากตัวอย่างที่ต้องมองคือ ความถี่คลื่น 3G WCDMA ได้มาคือแบนด์ B1/B8 ก็คือ 2100MHz และ 900MHz  เป็นเหตุผลที่ไม่สามารถใช้ซิมการ์ด 3G ความถี่ 850 MHz ได้

ลองมองความถี่คลื่น 4G LTE-FDD ดูอีกที ได้มาคือแบนด์ B1/B3/B5/B8 คือความถี่ 2100MHz, 1800MHz, 850MHz และ 900MHz ได้มาเยอะแต่ 850MHz ของ 3G กับ 4G ไม่เหมือนกันก็เลยจบเกมไปสำหรับซิมการ์ด 3G 850MHz

 

สนใจรายละเอียดเพิ่มเติม ตามไปดูกันกว่ากล้อง Mobile DVR รุ่นไหนใช้กับซิมการ์ดค่ายไหนได้บ้าง ตามไปดูที่เวบไซต์ตามลิงค์ข้างต้นได้เลย รู้ลึกรู้จริง "วิชาต้องซื้อก็มีที่มาอย่างนี้"

วันอาทิตย์ที่ 27 มิถุนายน พ.ศ. 2564

ค้นหา UDID บนอุปกรณ์มือถือ ไอโฟน(iphone) หรือ ไอแพด(ipad)

กลายเป็นเรื่องไม่เป็นเรื่องกันอีกครั้ง เมื่อต้องทำการค้นหาหมายเลขเครื่อง UDID บนอุปกรณ์มือถือ ไอโฟนหรือไอแพดกัน เพราะว่าต้องใช้เพื่อลงทะเบียน Devices สำหรับการพัฒนาของ Apple Developer ค้นหาหลายเอกสารพบว่า เอกสารแรกให้ติดตั้ง iTunes  หรือค้นหาจาก Device manager บนวินโดร์ หากเรื่องนี้เรามีอุปกรณ์ MacOS คงไม่มีปัญหาใด ๆ ทั้งสิ้น แต่เราเป็นเครื่อง Windows ทำให้การทำงานเรื่องนี้เป็นสิ่งยุ่งยากมาก 

เพื่อเป็นการไม่เสียเวลาไปกว่านี้ ผู้เขียนขอแนะนำวิธีง่าย ๆเลยก็แล้วกัน ให้ติดตั้งโปรแกรม iFunbox จากนั้นก็เปิดไปดูรายละเอียดอุปกรณ์ เพื่อดูค่าหมายเลข UDID ตามตัวอย่างในรูป

                รูปแสดงการอ่านค่าหมายเลข UDID บนอุปกรณ์ไอแพด 7 โดยใช้เครื่องวินโดร์

 สำหรับเนื้อหาในวันนี้คงไม่มีอะไรไปกว่าการแนะนำเครื่องมือสำหรับ Windows 10 ในการค้นหาหมายเลข UDID บนอุปกรณ์ไอโฟน หรือ ไอแพด กัน บางทีการทำงานบางครั้งเราต้องแข่งขันกันกับเวลา ปรากฏว่าติดปัญหาหนึ่งเรื่องอาจทำให้เราเสียเวลาไปหลายชั่วโมงในการค้นหา ก็เป็นเรื่องที่ต้องมีการแนะนำกัน ฝากไว้ด้วยสำหรับการพัฒนาระบบ แอปเรียกรถ บนอุปกรณ์ไอโอเอส ของแวนวีไอพี ที่กำลังอยู่ในช่วงของการคอมไพล์บนเครื่องแมคโอเอส คิดว่าคงไม่นานเกินไป   


 

วันอาทิตย์ที่ 20 มิถุนายน พ.ศ. 2564

ใช้งานคุ๊กกี้(cookies)กัน ทำเรื่องเหลือเชื่อให้เป็นสิ่งเป็นไปได้

ก่อนอื่นมาทำความรู้จักกับคุ๊กกี้กันก่อน คุ๊กกี้เป็นไฟล์ข้อมูลแบบตัวอักษรเล็กๆ ที่จัดเก็บบนฝั่งเครื่องลูก เช่นหากเราใช้เวบบราวเซอร์เปิดเวบไซต์ หากฝั่งเซิร์ฟเวอร์เขียนโปรแกรมให้จัดเก็บคุ๊กกี้ไว้ หากเราเข้าไปใช้งานซ้ำยังเวบไซต์เดิมอีกครั้ง ฝั่งเซิร์ฟเวอร์ก็จะทราบและแสดงคำพูดต้องรับ "ยินดีที่กลับมาเยี่ยมเยียนกันอีกครั้ง"

พอเราเห็นประโยชน์ของคุ๊กกี้กันแล้ว ที่นี้มาดูงานของผู้เขียนว่าทำไมต้องใช้ประโยชน์ในเรื่องนี้ โจทย์ก็คือเมื่อเครื่องลูกเข้ามาครั้งแรกให้ไปเปิดหน้ารับค่า url สำหรับทำการรีไดเรค(redirect) ไปยังเวบอื่น

ตัวอย่างการใช้งานคุ๊กกี้

ตามตัวอย่าง หากเครื่องลูกเข้ามาครั้งแรก ก็จะผลักให้เข้าไปหน้าป้อนค่า url หรือ landing.html เพื่อกำหนดว่าจะไปยังไซต์ 1 หรือไซต์อื่น ๆ ตามที่ต้องการ หากเครื่องลูกเครื่องเดิมเข้ามาที่หน้าคุ๊กกี้อีกครั้งคราวนี้ไม่ต้องเข้ามาหน้า landing.html แล้วให้ทำการเปลี่ยนหน้า(redirect)ไปยังไซต์ที่ได้ป้อนข้อมูลไว้เพียงครั้งแรกเลย เราไปเริ่มต้นกันเลย

ขั้นตอนที่ 1 สร้างไฟล์ landing.html เอาไว้สำหรับรับค่าเท็กบ็อก(textbox)เมื่อเครื่องลูกป้อนข้อมูลเรียบร้อยแล้วจะได้ทำการเปลี่ยนหน้าไปยังไซต์ที่ต้องการ 


<!DOCTYPE html>
<html lang="en">
<head>
<title>GPS-Vehicle Tracking system</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<script language="javascript" type="text/javascript">
function buttonClick(){
var url = document.getElementById("inputURL").value;
setCookie("redirectUrl", url, 30);
window.location = url;
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

</script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>GPS-VEHICLE Tracking Login:</h1>
<p>The best gps tracking system in Thailand!</p>
</div>
<div class="row">
<label style="font-size:12pt;" for="lname">Edit URL:</label>
<input style="width:100%;font-size:12pt;"type="text" id="inputURL" name="inputURL" value="http://tavl2.gps-vehicle.com/gpsvehicleserver"><br>
<input style="font-size:12pt;"type="button" value="click" OnClick="buttonClick()"/>
</div>
</div>

</body>
</html>

 

ขั้นตอนที่ 2 สร้างไฟล์ index.html หรือหน้าคุ๊กกี้ หน้านี้จะทำการตรวจสอบว่าเคยเข้ามาไหม หากเคยเข้ามาแล้วให้ดึงข้อมูลคุ๊กกี้ขี้นมาแล้วทำการเปลี่ยนหน้าไปเลย แต่หากยังไม่เคยเข้ามาก็ให้ย้อนกลับไปหน้า landing.html ก่อน

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}

function checkCookie() {
var theUrl=getCookie("redirectUrl");
if (theUrl != "") {
//alert("Welcome again " + theUrl);
window.location.href = theUrl;
} else {
theUrl = "http://tavl2.gps-vehicle.com/gpsvehicleserver";
if (theUrl != "" && theUrl != null) {
//setCookie("redirectUrl", theUrl, 30);
window.location.href = "landing.html";
}
}
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

 

จากการทดลองของผู้เขียน ระบบก็สามารถทำงานได้ตามที่เราต้องการ แต่จะมีข้อผิดพลาดอยู่บ้างเช่น หากป้อนข้อมูล url ผิดในครั้งแรกครั้งต่อไปก็ไม่สามารถเข้าไปหน้านั้นได้แล้ว ยกเว้นรู้ว่าต้องพิมพ์หน้า landing.html ต่อท้ายไปด้วยอย่างนี้ก็สามารถแก้ไขหน้าที่ผิดพลาดได้ ขอบคุณพื้นที่เวบไซด์ดีๆ จากบริการ GPS ติดตามรถ สินค้าดีมีคุณภาพ ราคาถูกกว่าที่อื่นๆ พลาดไม่ได้ด้วยประการทั้งปวง เลือกจีพีเอสไทย





วันอาทิตย์ที่ 13 มิถุนายน พ.ศ. 2564

Flutter เริ่มต้นดีก็ไปได้สวย หลังจากเริ่มประสบความสำเร็จในการรัน Flutter แรกได้สำเร็จเรามาดูกันเลย


 

Flutter เริ่มต้นดีก็ไปได้สวย หลังจากเริ่มประสบความสำเร็จในการรัน Flutter แรกได้สำเร็จเรามาดูกันเลย สิ่งที่เราต้องรู้จัก PATH อยู่ไหนเพื่อจะกำหนดค่าให้  ENV มองเห็น การติดต่อกับอุปกรณ์ Emulators, ตำแหน่งของโปรแกรม JAVA ,ตำแหน่งของ Android Studio SDK เป็นต้น ว่าเทคนิคขั้นตอนมันยุ่งยากมากอย่างไรกัน ขอบอกเลยว่ายุ่งยากมากของจริง


ขั้นตอนที่ 1 เป็นการติดตั้ง Flutter ก็ดาวน์โหลดตามลิงค์ที่แปะไว้ให้จากนั้น ก็แตกไฟล์ไปยังโฟลเดอร์ที่ต้องการ https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_2.2.2-stable.zip


ขั้นตอนที่ 2 ติดตั้ง Android Studio เพื่อให้โปรแกรม Flutter เชื่อมต่อกับ Android Studio และ Android toolchain


ขั้นตอนที่ 3 ติดตั้ง Visual Studio เพื่อให้โปรแกรม Flutter เชื่อมต่อกับ Visual Studio ได้ ขั้นตอนนี้ก็สำคัญและใช้เวลามาก ต้องเลือก Desktop C++ ขณะติดตั้ง


ขั้นตอนที่ 4 ติดตั้ง Emulator devices เพื่อติดต่อกับอุปกรณ์สำหรับทดสอบการทำงาน ขั้นตอนนี้ต้องใช้ Android Studio สร้างขึ้นมา และต้องไปกำหนดค่า Images แบบ Cold Boot ไม่เช่นนั้นจะมีปัญหาการติดต่อกับโปรแกรม Flutter

ทั้งหมดทั้งปวงก็ขอให้โชคดี สำคัญกว่านั้น Android Studio ไม่สามารถรันโปรแกรมทดสอบตามตัวอย่างได้ด้วย งานนี้ต้องพึ่งพา CLI ผสมกันไป 

E:\Android\Projects>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 2.3.0-17.0.pre.337, on Microsoft Windows [Version 10.0.19041.1052], locale th-TH)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.1)
[√] Android Studio (version 4.2.0)
[√] Connected device (4 available)



ขั้นตอนที่ 5 สร้างโปรแกรมแรกสำหรับทดสอบ Flutter กัน ไปเริ่มต้นที่ CLI ดีที่สุด

flutter create myapp
cd myapp

 


ขั้นตอนที่ 6 ก่อนจะรันโปรแกรมได้ ต้องไปเปิดใช้งาน Emulator ก่อน

flutter emulators
E:\Android\Projects\myapp>flutter emulators
1 available emulator:

Pixel_2_API_30 • Pixel 2 API 30 • Google • android

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

 


ขั้นตอนที่ 7 การเรียกเปิดใช้งาน Emulator ต้องมือไวพอควร ในการเลือกอนุญาต Allow USB debugging? ทำไม่ทันก็ต้องกลับไปเริ่มต้นใหม่ สำคัญทีเดียวต้องกำหนด

อิมเมจที่จะเปิดใช้งานเป็นแบบ Cold Boot เท่านั้น หากตั้งแบบ Warm Boot รับรองปัญหาไม่รู้จักจบสิ้น ยืนยัน

flutter emulators --launch Pixel_2_API_30




ขั้นตอนที่ 8 ตรวจสอบว่ามี Emulators ตัวใดบ้างพร้อมทำงานได้

E:\Android\Projects\myapp>flutter devices
5 connected devices:

sdk gphone x86 (mobile) • emulator-5554 • android-x86     • Android 11 (API 30) (emulator)
Windows (desktop)       • windows       • windows-x64     • Microsoft Windows [Version 10.0.19041.1052]
Windows (UWP) (desktop) • winuwp        • windows-uwp-x64 •
Chrome (web)            • chrome        • web-javascript  • Google Chrome 91.0.4472.77
Edge (web)              • edge          • web-javascript  • Microsoft Edge 91.0.864.48

 


ขั้นตอนที่ 9 บรรทัดบนสุดจะพบว่ามี sdk gphone x86(mobile) พร้อมใช้งาน แต่การจะเรียกใช้ได้ต้องใช้คอลัมภ์ที่ 2 เลือก "emulator-5554" แล้วเริ่มรันโปรแกรมกันเลย

flutter run -d "emulator-5554"

 


จากนั้นจะเห็นผลลัพธ์ของโปรแกรมตัวอย่าง ตามรูปแรกที่แสดงนี้เลย ฟังดูเหมือนง่าย ๆ แต่ไม่ง่ายเวลาทำจริง แต่อย่างไรก็แล้วแต่ ปัญหาที่ผู้เขียนพบเจอก็คืออย่าพยายามใช้การรันบนเครื่องมือ Android Studio เด็ดขาด หมดเวลาไปตามแก้หลายๆ วันก็ไม่สำเร็จ รันบนคอมมานไลน์ ง่ายๆ รวดเร็ว สำเร็จแน่นอนครับ สุดท้ายฝากแนะนำเวบไซต์ Toyota Majesty เช่า ขับเอง ได้บริการดีๆ จากแวนวีไอพี เตรียมเอกสารเพียงแค่ บัตรประชาชน ใบขับขี่และบัตรเครดิต จะเดินทางไปไหนเป็นหมู่คณะสะดวกปลอดภัย

วันพุธที่ 2 มิถุนายน พ.ศ. 2564

Yii Framework V1 เฟรมเวิร์คสำหรับ PHP5.3.1-7.4 มาลองกันฟังดูไม่น่ายาก

ผู้เขียนมีโจทย์ใหม่ต้องติดตั้งระบบที่ทำงานด้วย PHP + MYSQL + Framework Yii Version 1 ฟังดูไม่น่ายาก ใช้เวลาหมดเป็นวัน ๆ ไม่คืบ จนเป็นที่มาของการบันทึกเรื่องราวการทำงานในคร้้งนี้เก็บเอาไว้ สำหรับหลายๆ ท่านที่ต้องการใช้งานมองหาเอกสารแนะนำไม่ค่อยมี บางทีอาจจะมีประโยชน์

ว่ากันด้วยครึ่งวันเช้า หาวิธีติดตั้งค้นหาในเน็ตดูแล้วลองทำตามจนสำเร็จกลายเป็น Yii Framework V2 อีกติดตั้งด้วย Composer จนเปิดระบบด้วยคำสั่ง php yii serve ทำงานที่ port 8080 ได้สำเร็จด้วย ทำตามเอกสารติดตั้งทุกประการ เพิ่มแค่ดาวน์โหลดไฟล์มาด้วย เพราะเครื่องมือดาวน์โหลดมาไม่ครบ

ครึ่งวันบ่ายก็ยังเจอปัญหาเดิม ๆ คือ "PHP Fatal error:  Uncaught CDbException: CDbConnection failed to open the DB connection." เอายังไงต่อดี ต้องกลับไปหาเอกสารทำงานใหม่จนได้มา เพื่อไม่ให้เสียเวลาเราไปเริ่มต้นกันเลยดีกว่า


 

ขั้นตอนที่ 1 ดาวน์โหลดเฟรมเวิร์ค Yii เวอร์ชั่น 1 ตามตัวอย่างข้างล่างนี้เลย

wget https://github.com/yiisoft/yii/releases/download/1.1.23/yii-1.1.23.445827.tar.gz

 

ขั้นตอนที่  2 แตกไฟล์ออก แล้วทำงานตรวจสอบความพร้อมของเซิร์ฟเวอร์ว่าติดตั้งซอฟต์แวร์ครบถ้วนหรือยัง โดยเปิดเวบไซต์ไปที่โฟลเดอร์ http://localhost/yii-test/requirements/ หากตัวไหนยังขาดก็ลงให้ครบ รอบแรกผู้เขียนติดตั้งด้วย PHP8.0 แต่ไม่สำเร็จ อาจจะใช้งานได้ก็ได้ เพราะหลงไปหลงมา ท้ายสุดกลับมาใช้ PHP7.4 แทน สำหรับโอเอสเป็น Ubuntu 18.04LTS

 

sudo tar xzvf yii-1.1.23.445827.tar.gz
sudo a2dismod php8.0
sudo a2enmod php7.4
sudo systemctl restart apache2
sudo apt-cache search php7.4
sudo apt-cache search php7.4-mcrypt
sudo apt install php7.4-mcrypt
sudo apt-cache search php7.4
sudo apt install php7.4-odbc
sudo apt install php7.4-memcache

 

ขั้นตอนที่ 3 เป็นตัวอย่างของหน้าจอที่ตรวจสอบได้แล้วว่าการทำงานของ PHP7.4 และโมดูลต่าง ๆทำงานได้ครบถ้วนสมบูรณ์ ก็ไปถึงขั้นตอนการทดสอบ http://localhost/yii-test/demos/helloworld
 


ขั้นตอนที่ 4 สร้างฐานข้อมูลสำหรับทดสอบการเชื่อมต่อ PHP7.4, OBDC และ MYSQL 

CREATE TABLE tbl_lookup
(
        id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
        name VARCHAR(128) NOT NULL,
        code INTEGER NOT NULL,
        type VARCHAR(128) NOT NULL,
        position INTEGER NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE tbl_user
(
        id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
        username VARCHAR(128) NOT NULL,
        password VARCHAR(128) NOT NULL,
        email VARCHAR(128) NOT NULL,
        profile TEXT
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE tbl_post
(
        id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
        title VARCHAR(128) NOT NULL,
        content TEXT NOT NULL,
        tags TEXT,
        status INTEGER NOT NULL,
        create_time INTEGER,
        update_time INTEGER,
        author_id INTEGER NOT NULL,
        CONSTRAINT FK_post_author FOREIGN KEY (author_id)
                REFERENCES tbl_user (id) ON DELETE CASCADE ON UPDATE RESTRICT
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE tbl_comment
(
        id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
        content TEXT NOT NULL,
        status INTEGER NOT NULL,
        create_time INTEGER,
        author VARCHAR(128) NOT NULL,
        email VARCHAR(128) NOT NULL,
        url VARCHAR(128),
        post_id INTEGER NOT NULL,
        CONSTRAINT FK_comment_post FOREIGN KEY (post_id)
                REFERENCES tbl_post (id) ON DELETE CASCADE ON UPDATE RESTRICT
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

CREATE TABLE tbl_tag
(
        id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
        name VARCHAR(128) NOT NULL,
        frequency INTEGER DEFAULT 1
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

INSERT INTO tbl_lookup (name, type, code, position) VALUES ('Draft', 'PostStatus', 1, 1);
INSERT INTO tbl_lookup (name, type, code, position) VALUES ('Published', 'PostStatus', 2, 2);
INSERT INTO tbl_lookup (name, type, code, position) VALUES ('Archived', 'PostStatus', 3, 3);
INSERT INTO tbl_lookup (name, type, code, position) VALUES ('Pending Approval', 'CommentStatus', 1, 1);
INSERT INTO tbl_lookup (name, type, code, position) VALUES ('Approved', 'CommentStatus', 2, 2);

INSERT INTO tbl_user (username, password, email) VALUES ('demo','$2a$10$JTJf6/XqC94rrOtzuF397OHa4mbmZrVTBOQCmYD9U.obZRUut4BoC','webmaster@example.com');
INSERT INTO tbl_post (title, content, status, create_time, update_time, author_id, tags) VALUES ('Welcome!','This blog system is developed using Yii. It is meant to demonstrate how to use Yii to build a complete real-world application. Complete source code may be found in the Yii releases.

Feel free to try this system by writing new posts and posting comments.',2,1230952187,1230952187,1,'yii, blog');
INSERT INTO tbl_post (title, content, status, create_time, update_time, author_id, tags) VALUES ('A Test Post', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', 2,1230952187,1230952187,1,'test');

INSERT INTO tbl_comment (content, status, create_time, author, email, post_id) VALUES ('This is a test comment.', 2, 1230952187, 'Tester', 'tester@example.com', 2);

INSERT INTO tbl_tag (name) VALUES ('yii');
INSERT INTO tbl_tag (name) VALUES ('blog');


ขั้นตอนที่ 5 เข้าไปแก้ไขคอนฟิก /blog/protected/config/mainconfig.php เปลี่ยนในส่วนติดต่อกับ MYSQL เป็นอันจบพิธี


ผ่านไปได้ดีอีกเรื่องหนึ่งสำหรับการติดตั้ง APACHE2, MYSQL, PHP7.4 และ Framework Yii เวอร์ชั่น 1 ทำได้เองไม่ยาก ผู้เขียนยังมีเรื่องราวดี ๆที่จะมานำเสนอกันอีกมากมายเพราะช่วงนี้กำลังอยู่ในขั้นตอนการพัฒนาซอฟต์แวร์เล็ก ๆ ทรงประสิทธิภาพอยู่นั่นเอง อย่าลืมเข้าไปแวะชมสินค้าอุปกรณ์ GPS TRACKER ได้ที่จีพีเอสไทย จีพีเอสไทย ฉับไว พร้อมบริการ

วันอาทิตย์ที่ 30 พฤษภาคม พ.ศ. 2564

ลองกันต่อ React , API และ Mysql ในส่วนฟร้อนเอนท์

 


หลังจากที่ผู้เขียนได้ทดลองสร้างเซิร์ฟเวอร์ โดยใช้ React, Express และ Mysql กันมาแล้ว ในครั้งนี้จะมาแนะนำการสร้างฟร้อนท์เอนท์แบบง่าย ๆ กันต่อ ครั้งนี้ผู้เขียนทำตาม https://bezkoder.com/react-node-express-mysql/

มาเริ่มต้นกันเลยดีกว่า ส่วนสำคัญก็คือ ผู้เขียนลองฟร้อนเอนท์บนเครื่องแม่ข่าย Ubuntu Server 18.04 ยังไงก็ไม่สำเร็จ เลยเปลี่ยนมาติดตั้งบนเครื่อง Windows 10 ปรากฎว่าสำเร็จ เอาทำตามผู้เขียนก่อนย้ายมาทำบนเครื่องเดสท็อปแทน

ขั้นตอนที่ 1 เข้าไปดาวน์โหลด ซอร์สโค๊ดมาก่อน

git clone https://github.com/bezkoder/react-crud-web-api.git

 ขั้นตอนที่ 2 เข้าไปแก้ไขคอนฟิก เพื่อลิงค์ไปยังเซิร์ฟเวอร์ที่รัน Node, Express และ Mysql

notepad http-common.js

ขั้นตอนที่ 3 คอมไฟล์และรัน โปรแกรม

sudo yarn
sudo yarn start

ขั้นตอนที่ 4 ทดสอบบนเวบบราวเซอร์ เป็นอันจบพีธี



ทำได้ง่าย ๆ มาก เพียงแค่นี้ก็สำเร็จขั้นตอนการทดสอบ แต่ท้ายที่สุดแล้ว ความเข้าใจในโครงสร้าง เทคนิคในการคอมไพล์ รัน รวมถึงติดตั้งซอฟต์แวร์สำหรับทดสอบ ยุ่งยากพอควร บางทีเจอโค๊ดมายังมองไม่ออกว่าจะเอาไปทำอะไร เบื้องต้นเอาแค่นี้ก่อน ประสพการณ์แล้วความเชี่ยวชาญศึกษาเพิ่มเติมกันทีหลังได้ครับ เรื่องราวดีๆ เหล่านี้จะสมบูรณ์ไปไม่ได้เลย หากไม่ได้อาศัย ประสบการณ์ความเชี่ยวชาญของทีมงานจีพีเอสยานยนต์ ผู้จำหน่ายอุปกรณ์ GPS TRACKER ชั้นนำผ่านมาตรฐาน ทั้งจากกสทช.และกรมการขนส่งทางบก ชื่อนี้คุณมั่นใจ จีพีเอสยานยนต์

ลองใช้งาน React Node Express Mysql เบื้องหลังแบบง่าย ๆ กัน


 

ลองใช้งาน React Node Express Mysql เบื้องหลังแบบง่าย ๆ กัน หลังจากเพียรพยายามมาหลายวันก็สำเร็จไปจนได้ จึงต้องรีบกลับมาเขียน บอกเล่ากันก่อน เนื้อหานี้จริง ๆ ก็ทำตามบทความของ https://bezkoder.com/node-js-express-sequelize-mysql/ แต่ก็นั่นแหล่ะอ่านอย่างเดียวหากไม่ลองก็นำไปใช้ปรับปรุงพัฒนาไม่ได้ วันนี้เรามาเริ่มต้นกัน 

 ขั้นตอนที่ 1 เข้าไปดาวน์โหลดซอร์สโค๊ดก่อนเลย จากนั้นแก้ไขไฟล์ db.config.js ในโฟลเดอร์ config

sudo git clone https://github.com/bezkoder/nodejs-express-sequelize-mysql
vi config/db.config.js

ขั้นตอนที่ 2 สร้างฐานข้อมูล สำหรับทดสอบตามตารางที่ผู้เขียนทำมาให้

CREATE TABLE `tutorials` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) DEFAULT NULL,
`description` varchar(255) DEFAULT NULL,
`published` tinyint(1) DEFAULT NULL,
`createdAt` datetime NOT NULL,
`updatedAt` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

INSERT INTO `tutorials` VALUES (1,'THE Tutorial REACT','REACT tutorial BACK END' ,1,'2021-05-31 09:53:00','2021-05-31 09:53:00'),(2,'THE REACT','REACT BACK END',0,'2021-05-31 10:53:00','2021-05-31 10:53:00'),(3,'ICE BOOK','ICE BOOK for GRADE 3',0,'2021-05-31 05:28:08','2021-05-31 05:28:08'),(4,'REACT BOOK 3','REACT BOOK 3 Description',0,'2021-05-31 05:34:24','2021-05-31 05:34:24');

ขั้นตอนที่ 3 ติดตั้งแพ็คเกจต่าง ๆ ที่จำเป็นต้องใช้

sudo npm install express sequelize mysql2 body-parser cors --save

ขั้นตอนที่ 4 คอมไพล์และทดสอบการทำงาน

sudo yarn
sudo yarn start

ขั้นตอนที่ 5 ดูผลลัพธ์

sudo curl -X GET -i http://localhost:8080/api/tutorials
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:8081
Vary: Origin
Content-Type: application/json; charset=utf-8
Content-Length: 660
ETag: W/"294-OW65kZolMUEtVPhNyra4AlrYJuc"
Date: Mon, 31 May 2021 06:05:50 GMT
Connection: keep-alive
Keep-Alive: timeout=5

[{"id":1,"title":"THE Tutorial REACT","description":"REACT tutorial BACK END","published":true,"createdAt":"2021-05-31T09:53:00.000Z","updatedAt":"2021-05-31T09:53:00.000Z"},{"id":2,"title":"THE REACT","description":"REACT BACK END","published":false,"createdAt":"2021-05-31T10:53:00.000Z","updatedAt":"2021-05-31T10:53:00.000Z"},{"id":3,"title":"ICE BOOK","description":"ICE BOOK for GRADE 3","published":false,"createdAt":"2021-05-31T05:28:08.000Z","updatedAt":"2021-05-31T05:28:08.000Z"},{"id":4,"title":"REACT BOOK 3","description":"REACT BOOK 3 Description","published":false,"createdAt":"2021-05-31T05:34:24.000Z","updatedAt":"2021-05-31T05:34:24.000Z"}]

เป็นอันว่า สำเร็จตามแบบฉบับของผู้เขียน ง่าย ๆ สั้น ๆ กระชับได้ใจความ เนื้อหาส่วนอื่นต้องไปศึกษาเพิ่มเติมเอง เอาเป็นว่าเราเข้าใจแล้วว่า เบื้องหลังทำงานยังไง สร้างเซิร์ฟเวอร์ Express ทำงานร่วมกับ Mysql รวมถึงการสร้าง Api แบบง่าย ๆ ค่อยมาติดตามกันต่อไปเรื่องการสร้าง Front End จริง ๆ จะเอามาต่อกันแต่กลัวจะยาวไป แบ่งเนื้อหาแบบนี้ดีแล้ว  สำหรับพื้นฐานดีๆ เทคโนโลยีเด่นๆ สนใจระบบ GPS TRACKING ที่บริษัทชั้นนำเลือกใช้ ต้องเลือกจีพีเอสไทย อีกที่หนึ่งที่น่าสนใจมากๆ