นักผจญโค้ด (CODE HUNTER)

ขั้นตอนการติดตั้ง plugin BLoC บน Android Studio

    ในการพัฒนาแอพฯ โดยใช้ Flutter ด้วยรูปแบบ BLoC ทำให้ผู้พัฒนาจำเป็นต้องสร้างไฟล์ในรูปแบบซ้ำๆ กัน เพื่อเป็นการประหยัดเวลาในการสร้างไฟล์ ทางผู้เขียนบทความขอแนะนำ plugin สำหรับช่วยสร้างไฟล์ให้เราแบบง่ายๆ โดยสารมารถเข้าไปอ่าน Document จากทางเจ้าของ plugin ได้ที่ https://github.com/felangel/bloc/tree/master/extensions/intellij


    สำหรับการติดตั้ง plugin ทำได้ง่ายๆ 

1. เมื่อเปิดโปรแกรม Android Studio  ในหน้าต่าง Welcome ของโปรแกรมเลือกที่เมนู Configure ทางด้านมุมซ้ายล่าง


2. เลือกที่เมนู Plugins



3. ในแถบเมนูด้ายซ้ายเลือกที่ Plugins ด้านขวาเลือกที่เมนู Margetplace และในช่องค้นหาให้ค้นหาคำว่า "BLOC" จะเจอ plugin ตามรูปด้านล่าง ให้ทำการติดตั้งให้เรียบร้อย

4. จากนั้นเมื่อเราคลิกขวาที่โฟล์เดอร์ lib เลือกเมนู new เราจะเจอเมนูเพิ่มเข้ามาสองรายการดังภา
พด้านล่าง


5.  ทดสอบสร้างไฟล์ โดยคลิกขวาสร้าง package ที่เราจะทำการเก็บไฟล์ก่อน



6. ตั้งชื่อ package ที่ตามที่ต้องการ จากนั้นกำการสร้างไฟล์โดยคลิกขวา เลือก   new  แล้วเลือก Bloc Class



7. ตั้งชื่อ Class




8. ตัว Plugin จะทำการสร้างไฟล์ให้ 3 ไฟล์ โดยหน้าที่ของแต่ละไฟล์จะพูดถึงในบทความต่อไป



สำหรับการสร้างไฟล์ที่จำเป็นต้องใช้ในการเขียน flutter แบบ BLoC โดยใช้ plugin เป็นตัวช่วยสร้างไฟล์ให้ก็จบเพียงเท่านี้ครับ.....


Share:

วิธีการส่งข้อมูลข้าม Activity ใน Android


          การส่งข้อมูลจาก  Activity หนึ่งไปยัง Activity หนึ่ง  ใน Android สามารถทำได้โดยการเรียกใช้คลาสที่ชื่อว่า Intent  โดยที่รูปแบบการส่งที่เป็น key กับ value 



เริ่มต้นด้วยการสร้างโปรเจคตัวอย่างขึ้นมาชื่อว่า IntentExample
ในตัวโปรเจคจะประกอบไปด้วย Activity ทั้งหมดสองตัวคือ MainActivity จะทำหน้าที่ส่งข้อมูล
และ ShowActivity จะแสดงข้อมูลที่รับเข้ามา
ภายใน MainActivity จะประกอบไปด้วย EditText ที่ใช้สำหรับกรอกข้อมูลที่ต้องการส่ง โดยตั้ง Id ว่า message_edt  และมีปุ่มสำหรับการกดส่งข้อมูลที่มีชื่อว่า send_btn


จากนั้นทำการ setListener ให้กับปุ่ม send และทำการเขียนโดคเพื่อส่งข้อมูล



ShowActivity จะประกอบไปด้วย TextView สำหรับเเสดงข้อมูลที่รับเข้ามา โดยมี Id เป็น result_tv

จากนั้นในหน้า ShowActivity จำทำการรับข้อมูลผ่าน intent โดยเขียนโคดดังนี้



Share:

วิธีตั้งให้ Android Studio ใน Window เปิดหน้า Welcome Screen


          โดยปกติแล้ว Android Studio เวอร์ชั่น Window เมื่อเคยเปิดโปรเจคใดโปรเจคหนึ่ง แล้วออกโดยไม่ได้ใช้เมนู Close Project เมื่อเปิดโปรแกรมอีกครั้ง ตัวโปรแกรมจะทำการเปิดโปรเจคล่าสุดให้เสมอ ซึ่งต่างจาก Android Studio ใน Mac OS ที่จะเปิดหน้า Welcome Screen ซึ่งถ้าอยากให้ Android Studio ใน Window เปิดหน้าจอ Welcome Screen เป็น Default ก็สามารถทำได้เช่นกัน


กรณีที่อยู่ในหน้า Welcome Screen ให้เลือกที่เมนู Config > Settings


หรือถ้าเปิดโปรเจคอยู่ สามารถทำได้ที่เมนู File > Settings


เมื่อเปิดหน้าต่าง Setting for New Projects ขึ้นมาแล้ว  เมนูด้านซ้ายเลือกที่เมนู System Settings



เมนูด้านขวาของ System Settings หมวด Startup/Shutdown  ค่าเริ่มต้น Reopen last project on startup สถานะจะถูกเลือกไว้  


คลิกเพื่อทำการ uncheck 



จากนั้นเมื่อลองปิดโปรเจคแล้วเปิดขึ้นมาใหม่ ตัวโปรแกรมจะเปิดหน้า Welcome Screen ให้เสมอ

Share:

วิธีปิด Antivirus real time protection บน Window 10



กดคำสั่ง Window  + R  เพื่อเรียกหน้า System Run




ไปที่รายการ Administative Templates










เมนูด้านซ้ายเลือกที่  Windows Defender Antivirus 
เมนูด้านขวาเลือกที่  Real-time Protection



เมนูด้านขวาเลือกที่รายการ Turn off real-time protection กด double click



จะปรากฎรายการให้เลือก 3 รายการ ให้เลือกรายการ Enable จากนั้นกด OK
เมื่อทำเสร็จแล้ว ถ้าลอง restart เครื่องดู การตั้งค่านี้ก็ยังอยู่

และเมื่อเปิดดูที่ Virus & Threat protection ของ Window  จะปรากฎคำว่า This setting is managed by your administator. และจะไม่สามารถเปลี่ยนแปลงค่าได้

ถ้าต้องการเปลี่ยนค่ากลับ ก็ทำตามขั้นตอนแรกใหม่ เปลี่ยนจาก เลือก Enable เป็น  Disable

Share:

Android กับวิธีการทำ Line Login


เข้าไปสมัครสมาชิค และทำการเข้าสู่ระบบที่ https://developers.line.biz/en/



เมื่อทำการล็อคอินเรียบร้อยแล้ว ให้เลือกที่เมนู LINE Login








Channel Type  : เลือก LINE Login
Provider : Create a new  provider
Provider Name : ตั้งชื่อตามที่ต้องการ
Channel Icon : จะเลือกใส่ตอนนี้เลย หรือมาใส่ทีหลังก็ได้
Channel Name : ตั้งชื่อ Channel
Channel Description : ใส่ description
Email Address : ใส่ email
Privacy policy URL เป็น optional จะเลือกใส่หรือไม่ก็ได้
Term of use URL เป็น optional จะเลือกใส่หรือไม่ก็ได้


หลังจากสร้างสำเร็จ ในเมนูด้านซ้ายจะปรากฎรายชื่อ  Channel ที่เราสร้างขึ้นมา  ด้านขวาจะเป็นรายละเอียดของ Channel 

เพิ่ม LINE SDK เข้าไปในไฟล์ build.gradle


กำหนด compileOptions เป็น java 8
ไฟล์ Android Manifest.xml เพิ่ม permission Internet

ทำการเชื่อมให้แอพฯ กับ channel ให้รู้จักกัน Linking your app to your channel

นำ package name ของแอพฯ ที่ได้สร้างไว้ มาใส่ในช่อง Android package names


เพิ่มคำสั่งด้านล่าง เพื่อสร้างปุ่มสำหรับใช้ login line ในที่นี้จะใช้ปุ่ม default
ทำการคัดลอก Channel Id ที่ได้สร้างไว้มาใส่ที่คำสั่ง .setChannelId(...)

ในกรณีที่ใช้ Fragment ให้เพิ่ีมคำสั่งด้านล่างนี้
Share:

NodeJS + ExpressJS + MySql CURD


     บทความนี้เป็นบันทึกการเรียนรู้การเขียน service ด้วย NodeJS +  ExpressJS + MySql ของเจ้าของบล็อกเอง
    

เครื่องมือที่ใช้ในการเรียนรู้จะประกอบไปด้วย



เริ่มต้นด้วยการสร้างโฟลเดอร์สำหรับการทำงาน พิมพ์คำสั่ง npm init --y เพื่อทำการสร้างไฟล์ package.json สำหรับการใช้งานคำสั่ง npm   คำสั่ง --y หมายความว่าเราจะทำการตอบ yes ในทุกๆ คำถามของคำสั่ง npm init

สร้างไฟล์และโฟลเดอร์

  • config เก็บการตั้งค่าต่างๆ ของโปรเจค เช่น ข้อมูลการติดต่อฐานข้อมูล
  • controllers เป็นตัวกลางในการติดต่อกันระหว่าง model กับ router และจัดการ handle error ต่างๆ 
  • models   ติดต่อกับฐานข้อมูล
  • public เก็บรูปภาพ ฯลฯ
  • routers  กำหนดเส้นทางของโปรเจค
  • app.js ไฟล์หลักในการรันโปรเจค


เปิดไฟล์ package.json และทำการพิมพ์คำสั่งภายใต้ tag script "dev":"nodemon app.js"
ความหมายของคำสั่งคือ เมื่อเรียกใช้งานด้วยคำสั่ง yarn dev หรือ npm dev ระบบจะทำการเรียกใช้คำสั่งที่เรากำหนดไว้ซึ่งในที่นี้คือ nodemon app.js กรณีที่ต้องการเปลี่ยนไฟล์ที่ต้องการให้เรียกเป็นไฟล์อื่น ก็สามารถแทนที่ app.js ด้วยชื่อที่ต้องการ


เปิดไฟล์ app.js และพิมพ์คำสั่งต่างๆ ดังนี้

app.set('port', process.env.port || port) กำหนด port
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json()) กำหนดให้ express ใช้ body เป็น json
app.use(express.static(path.join(__dirname, 'public'))) กำหนดให้ express เรียกใช้โฟลเดอร์ public

สร้างไฟล์ db.config.js ภายใต้โฟลเดอร์ config

กำหนดค่าต่างๆ ที่จำเป็นคต้องใช้ในการเชื่อมต่อฐานข้อมูล
HOST: "localhost",
USER: "root",
PASSWORD: "",
DB: "",
PORT: 3306

สร้างไฟล์ db.js ภายใต้โฟลเดอร์ config พิมพ์คำสั่งสำหรับการสร้าง connection

เรียกใช้งาน mysql
const mysql = require("mysql")
เรียกใช้ config ต่างๆ
const dbConfig = require("./db.config.js");

กำหนดค่าต่าง
const connection = mysql.createConnection({
host: dbConfig.HOST,
user: dbConfig.USER,
password: dbConfig.PASSWORD,
database: dbConfig.DB,
port: dbConfig.PORT
});

สร้างการเชื่อมต่อ โดยกรณีที่มีการ error ให้ throw exception ออกมา
connection.connect(err => {
if (err) throw err;
console.log("Successfully connected to the database.");
});

export เพื่อให้ไฟล์อื่นสามารถเรียกใช้งานได้
module.exports = connection;

สร้างไฟล์ category.model.js ภายใต้โฟลเดอร์ models


สร้างไฟล์ category.controller.js ภายใต้โฟลเดอร์ controllers


สร้างไฟล์ category.router.js ภายใต้โฟลเดอร์ routers


ทำการ import ตัว controller เก็บไว้ในตัวแปรชื่อ controller
const controller = require("../controllers/category.controller");

กำหนด route ให้กับ api ถ้าถูกเรียกมาเป็น post ให้ controller เรียกใช้ function create
router.post("/", controller.create);

กำหนด route ให้กับ api ถ้าถูกเรียกมาเป็น get ให้ controller เรียกใช้ function findAll
router.get("/", controller.findAll);

กำหนด route ให้กับ api ถ้าถูกเรียกมาเป็น get และมีการส่ง id มาด้วย ให้ controller เรียกใช้ function findOne
router.get("/:id", controller.findOne);

กำหนด route ให้กับ api ถ้าถูกเรียกมาเป็น put และมีการส่ง id มาด้วย ให้ controller เรียกใช้ function update
router.put("/:id", controller.update);

กำหนด route ให้กับ api ถ้าถูกเรียกมาเป็น delete และมีการส่ง id มาด้วย ให้ controller เรียกใช้ function delete
router.delete("/:id", controller.delete);

กำหนด route ให้กับ api ถ้าถูกเรียกมาเป็น delete ให้ controller เรียกใช้ function deleteAll
router.delete("", controller.deleteAll);

export route ให้ไฟล์อื่นสามารถเรียกใช้งานได้ด้วยคำสั่ง
module.exports = router

สั่งรันด้วยคำสั่ง yarn dev หรือ npm dev

ทดสอบ API ด้วย Post man


ทดสอบการบันทึกข้อมูลด้วย url  http://localhost:5000/category






ทดสอบการแก้ไขข้อมูลด้วย url  http://localhost:5000/category



ทดสอบการเรียกดูข้อมูลทั้งหมดด้วย url  http://localhost:5000/category


ทดสอบการลบข้อมูลด้วย url  http://localhost:5000/category/5


Share:

วิธีสร้าง Line Notify

เริ่มต้นด้วยการเพิ่มเพื่อนกับ Line nitification โดยการเข้าไปที่ https://notify-bot.line.me แสกน QR Code


ทำการล็อกอิน Line


มุมบนขวา จะปรากฎชื่อคลิ๊กที่ชื่อจะปรากฏเมนู ให้เลือกเมนู MY Page


เลื่อนลงด้านล่าง แล้วเลือกที่เมนู Generate token

ตั้งชื่อของ  Notification และเลือกว่าจะส่งในรูปแบบไหน  จะส่งแบบส่วนตัวหรือ ส่งแบบกลุ่มก็ได้




กรณีที่เลือกเป็นแบบกลุ่มจะต้องเพิ่ม Line notify เข้าไปในกลุ่มด้วยจึงจะสามารถส่งข้อความได้



ในกรณีเลือกการส่งเป็นกลุ่ม แล้วลืมเพิ่ม  Line Notify เข้าไปในกลุ่ม เมื่อเรายิง message ผ่าน postman แล้วจะได้รับข้อความ  "Line Notify account doesn't join group which you want to send."



คัดลอก  token ที่ได้รับ



เมื่อดูท่ีแชทของ Line notify


เปิด Postman  เลือก Header  และกำหนดค่าดังนี้
          method เป็น POST
          url  เป็น  https://notify-api.line.me.api/notify
          Authorization เป็น Bearer นำ token ที่เราได้รับตอน Generate token มาวาง
          Content-Type เป็น  application/x-www-form-urlencoded




 ในส่วนของ Body กำหนดค่าดังนี้
          type กำหนดเป็น  x-www-form-urlencoded
          key กำหนดเป็น message
          value กรอกข้อความที่ต้องการจะส่ง



ลองกด send






Share:

Recent Posts

Popular Posts

About Me

About Me