กุมภาพันธ์ 2021

Flutter เริ่มต้น Setup Flutter เตรียมตัวก่อนเขียนโค๊ด EP1

บทความแรกนี้ สำหรับผู้เริ่มต้นอยกาที่จะเขียน Flutter โดยที่จะแนะนำการเตรียมความพร้อมของเครื่อง เช่น Android Studio , Emulators ,Dart SDK , Flutter SDK , VSCode เป็นต้น โดยเนื้อหาสำหรับบทความนี้จะพา setup บน Window OS (Win 10) ฉะนั้นตัวอย่างบางขั้นตอน Mac OS อาจจะทำไม่ได้

ขออภัยสำหรับผู้ที่เข้ามาอ่าน แต่ใช้งาน Mac ไว้ ณ ที่นี้

ดาวน์โหลดไฟล์ที่ต้องใช้ และติดตั้ง

  1. ดาวน์โหลดไฟล์ที่ต้องใช้ และติดตั้ง
    1. Flutter SDK ดาวน์โหลด จะได้ไฟล์ flutter.zip ให้ unzip flutter.zip (copy path ไว้ต้องใช้ในขั้นตอน set android studio config) set environment variables ทำตามขั้นตอน ข่างล่าง
      1. เปิด search ของ window (มุมล่างขวา แว่นขยาย) พิมพ์ ‘env’ กดที่ “Edit Environment Variables for your account”
      2. เลือก “Advance System Setting” (สังเกตุเมนูลำดับที่ 4 ทางซ้ายมือของหน้าจอ)
      3. เลือก “Environment Variables…” (จะอยู่ล่าง ๆ ของหน้าจอ)
      4. จะมีให้ใส่ 2 แบบ คือ Variables for user , Variables for system จะเลือกทำที่ไหนก็ได้ขั้นตอนเหมือนกัน
        1. มองหา Variable Name ที่ชื่อว่า Path จากนั้นให้กดเลือก และกด Edit
        2. กด New เพื่อสร้าง เพิ่ม Flutter Environment เข้าไปใน Path (*ให้ระบุ path flutter/bin เช่น D:\dev\programs\flutter\bin) จากนั้นกด OK
      5. ทดสอบว่า command flutter สามารถเรียกใช้งานผ่าน command line ได้หรือยัง
        1. เปิด search พิมพ์ cmd เลือก “Command Promt” ให้พิมพ์ไปใน command ว่า “flutter doctor” ถ้ามีการแสดงข้อความ “
          “Doctor summary (to see all details, run flutter doctor -v): … ” แสดงว่า flutter พร้อมใช้งานแล้ว
  2. Android Studio ติดตั้ง ทำตามขั้นตอนการ
    • ตรวจสอบ Adnroid SDK ปกติขั้นตอนการติดตั้งระบบให้ให้ download Android SDK ในขณะการติดตั้ง (อาจจะใช้เวลาดาวน์โหลด ตามความเร็ว internet ของแต่ละคน) แนะนำให้เลือกย้ายไฟล์ android sdk ไปที่ directory ที่มีขนาดพอสมควร เพราะไฟล์มี android sdk มีขนาดใหญ่
      • Files -> Settings -> Appearance & Behavior -> System Setting -> Android SDK -> Android SDK Location: {แก้เป็น Path SDK ที่ย้าย}

3. ติดตั้ง plugins flutter ,dart บน android studio

  • เข้าไฟที่ File -> Settings -> Plugins -> Maketplaces
  • ค้นหา flutter ติดตั้ง
  • ค้นหา dart ติดตั้ง

4. ตรวจสอบการตั้งค่าของ flutter ด้วย $flutter doctor -v

$flutter doctor -v
Downloading Material fonts...                                    1,373ms
Downloading Gradle Wrapper...                                       72ms
Downloading package sky_engine...                                  350ms
Downloading flutter_patched_sdk tools...                            3.7s
Downloading flutter_patched_sdk_product tools...                    3.4s
Downloading windows-x64 tools...                                    6.1s
Downloading windows-x64/font-subset tools...                       672ms
[√] Flutter (Channel dev, 1.27.0-8.0.pre, on Microsoft Windows [Version 10.0.19041.804], locale en-US)
    • Flutter version 1.27.0-8.0.pre at D:\dev\programs\flutter
    • Framework revision b7d4806243 (5 days ago), 2021-02-19 09:22:45 -0800
    • Engine revision 6993cb229b
    • Dart version 2.13.0 (build 2.13.0-30.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at D:\dev\programs\Android\Sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = D:\dev\programs\Android\Sdk
    • ANDROID_SDK_ROOT = D:\dev\programs\Android\Sdk
    • Java binary at: D:\dev\programs\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at D:\dev\programs\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Community Edition (version 2020.3)
    • IntelliJ at D:\dev\programs\IntelliJ
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart

[√] VS Code, 64-bit edition (version 1.53.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.19.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.190
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 88.0.705.74

• No issues found!

ถ้า setting [√] ทุกประเภท แสดงว่าพร้อมใช้งานและ แต่ถ้าหากยังมี [X] อยู่ก็ให้แก้ไขให้ผ่านก่อน ซึ่งวิธีแก้ไขก็สามารถ ค้นหาได้จาก google หรือถ้ายังไม่สามารถแก้ไขได้ สามารถฝากคำถามไว้ในเม้นข้างล่างบทความนี้ได้เลยครับ

02/25/2021 by Flutter General 0

สร้าง API ด้วย App Script ดึงข้อมูลบน Google Sheets

บทความแนะนำการสร้าง RESTFul API โดยที่จะใช้การเก็บข้อมูลบน Google Sheets ที่ทุกคนคุณเคย แค่มี gmail account ก็สามารถสร้าง API ได้แล้ว บวกกับความรู้เรื่องการเขียน javascript พื้นฐาน เข้าใจพื้นฐานเรื่องการพัฒนาเว็บ (API) น่าจะเพียงพอในการทำ API ในบทความนี้ได้แล้ว

สร้าง Google Sheets เพื่อเป็น ฐานข้อมูล

บางท่านอาจจะไม่ทราบว่า google sheets ที่ทำหน้าที่คล้าย microsoft excel จะสามารถเขียนโปรแกรม อ่าน เขียน ข้อมูลในไฟล์ได้ ข้อดีคือไม่ว่าใครก็สามารถนำข้อมูลในไฟล์ google sheets ไปใช้งานต่อได้โดยไม่ต้องเขียน query เหมือนฐานข้อมูลแบบปกติ

  1. ให้สร้างไฟล์ google sheets ขอตั้งชื่อว่า “poolsawat.com” ชื่อไม่สำคัญ โปรแกรมจะ refer กับ sheetId ฉะนั้นชื่อจะตั้งเป็นอะไรก็ได้
  2. สร้างคอลัมน์ที่มีชื่อตามนี้ (ภาษาอังกฤษ เท่านั้น) id ,topic ,content ,author ,date ,view
  3. สำหรับข้อมูลให้ใส่ตามใจเลย

4. เริ่มเขียนโปรแกรมเลือกที่ เครื่องมือ (tools) -> โปรแกรมแก้ไขสคริป (Script editor)

5. ได้หน้า AppScript Editor เพื่อใช้เขียนโปรแกรมให้แก้ไข ตามนี้

function doGet(request) {
  // sheet id 
  var ss = SpreadsheetApp.openById("ใส่ sheet id ของคุณ");
  var sheet = ss.getActiveSheet()

  const values = sheet.getRange(2, 1, sheet.getLastRow() - 1, sheet.getLastColumn()).getValues();
  // Converts data rows in json format
  const result = values.map(([a, b, c , d , e , f]) => {
    return ({ id: a, topic: b, content: c, author : d , date : e , view : f})
  })
  return ContentService.createTextOutput(JSON.stringify(result)).setMimeType(ContentService.MimeType.JSON);
}

openById : ให้ระบุ sheet id ที่ได้จาก https://docs.google.com/spreadsheets/d/187hL4DXXXXXXXXXXXXXXXXXXXXXXX-p_JOGjYxU/edit#gid=0 ซึ่งของแต่ละ sheet จะไม่ซ้ำกัน

6.กด “บันทึกโครงการ” script editor จากนั้นกด “เรียกใช้” ระบบขออนุญาตการบัญชีเจ้าของข้อมูล ก็ให้เลือกบัญชีเรา

7. ทำการเริ่มทดสอบ API

8. คัดลอกเว็บแอป URL ไปวางที่ browser ได้เลย

หลัก ๆ ขั้นตอนก็ประมาณนี้ ศึกษาเพิ่มเติมได้ที่นี้ Google App Script

02/19/2021 by General โปรแกรมมิ่ง 0

คลังเก็บเรื่องราวต่าง ๆ

วงแหวนเว็บ

วงแหวนเว็บ