Day: May 30, 2021

  • การใส่ลายเซ็น (Signature) ในเอกสาร Google Forms

    การประยุกต์ใช้ Google forms ในการใช้ทำแบบสอบถาม แบบฟอร์มต่างๆ และให้ผู้กรอกแบบสอบถามสามารถเซ็นชื่อในเอกสาร สามารถใช้เครื่องมือที่ชื่อว่า Signature มาดูกันว่ามีวิธีการอย่างไร

    1. เปิด Google Drive เลือกสร้าง Google Forms เพื่อสร้างแบบสอบถาม ดังรูป

    2. สร้างแบบสอบถาม ตัวอย่างเป็นฟอร์มรายงานตัวออนไลน์ ที่ให้กรอก ชื่อ-สกุล และเบอร์โทร ดังรูป

    3. เมื่อสร้าง Google Forms เรียบร้อยแล้ว ให้ไปสร้าง Google Sheet สำหรับจัดเก็บเป็นฐานข้อมูล ดังรูป
    4. เมื่อสร้าง Google Sheet จะได้ ดังรูป

    5. เมื่อเราสร้างแบบสอบถามเรียบร้อยแล้ว ต่อมาก็มาติดตั้ง Add-ons โดยคลิก “Add-ons” ดังรูป

    6. ส่วนนี้จะเป็น Add-ons ของ Google ทั้งหมด ซึ่งหากใครต้องการเลือก Add-ons ที่มาใช้งานก็มาเลือกจากส่วนนี้ได้ แต่ในที่นี่เราจะใช้ Signature เพื่อนำไปใช้เป็นลายเซ็นของเอกสารของเรา เลือกค้นหาคำว่า “Signature” และคลิกเพื่อติดตั้ง ดังรูป

    7. ต้องการติดตั้ง Add-ons คลิก “Install” ดังรูป
    8. คลิก “CONTINUE” เพื่อติดตั้ง Signature ดังรูป

    9. เลือก User ที่ต้องการติดตั้ง ดังรูป

    10. คลิก “Allow” ดังรูป

    11. ติดตั้งเรียบร้อย ไปใช้งานกันเลย คลิก “NEXT” ดังรูป

    12. เริ่มใช้งานคลิกเลือก “Signature” ดังรูป

    13. คลิก “Start” ดังรูป
    14. คลิก “Login” ดังรูป
    15. เลือก “Multiple Signatures (new)” ดังรูป

    16. คลิก “Submit” ดังรูป

    17. คลิก “Confirm” ดังรูป

    18. การใช้งานแบบสอบถามที่ต้องการให้มีลายเซ็น จะต้องใช้ลิงก์จากการคลิก “Get Link” เท่านั้น ดังรูป

    19. เมื่อนำลิงก์มาใช้งานจะปรากฎดังรูป หากผู้อ่านอยากลองใช้านสามารถทดลองจาก ตัวอย่าง

    20. เขียนลายเซ็น และคลิก “บันทึก” ดังรูป

    21. เมื่อลงลายเซ็นและบันทึกเรียบร้อยแล้ว จะให้ยืนยันอีกครั้ง คลิก “ยืนยัน” ดังรูป

    22. ต้องการกลับไปยังหน้าแบบสอบถาม คลิก “1.คัดลอก” “2.กลับสู่แบบฟอร์ม” ตามลำดับ ดังรูป

    23. เมื่อกลับมายังหน้าแบบฟอร์ม ให้วางที่ลายเซ็น จะได้ลิงก์จากที่ Copy ก่อนหน้า ดังรูป

    24. เมื่อไปดูจาก Google Sheet จะแสดงลิงก์ที่ช่องของ ลายเซ็น ดังรูป คลิกลิงก์เพื่อไปตรวจสอบการกรอกข้อมูล ดังรูป

    25. เมื่อบันทึกเรียบร้อยการแสดงผลจะได้ ดังรูป

    จากตัวอย่างที่ได้ทำมาทั้งหมด เป็นการประยุกต์ที่แบบง่าย ที่ใครๆ ก็ทำได้ ลองทำกันดูนะคะ

  • Flutter : ดึงข้อมูลจาก RESTFul API

    สำหรับนักพัฒนาแอปพลิเคชันในตอนนี้ คงไม่มีใครไม่รู้จัก Flutter อย่างแน่นอนนะครับ ซึ่งตอนนี้ก็ออกเวอร์ชัน 2.2 มาแล้ว สำหรับผมเองที่เพิ่งเริ่มศึกษาก็ขอเริ่มด้วยการทดสอบดึงข้อมูลจาก API เป็นอย่างแรกนะครับ เพราะแอปพลิเคชันสำหรับใช้งานด้านต่างๆ ในองค์กรมักจะต้องใช้ข้อมูลจากฐานข้อมูล โดยการเชื่อมต่อผ่าน API เป็นหลักครับ

    ขั้นตอนการติดตั้งบน Windows และเตรียมเครื่องมือสามารถอ่านได้ที่ https://flutter.dev/docs/get-started/install/windows

    ในบทความนี้ผมใช้ Visual Studio Code นะครับโดยติดตั้ง Extention เพิ่มเติมดังนี้

    1. เปิด Visual Studio Code
    2. คลิกเมนู View > Command Palette
    3. พิมพ์ “install”, จากนั้นเลือก Extensions: Install Extensions.
    4. พิมพ์ “flutter” เลือก install
    5. พิมพ์ “dart” เลือก install
    6. เมื่อติดตั้งเสร็จเรียบร้อยจะมีรายการ Extention ดังรูปครับ

    จากนั้นทำการสร้างโปรเจค ดังนี้ครับ

    1. คลิกเมนู View > Command Palette
    2. พิมพ์ “flutter”, จากนั้นเลือก Flutter:New Application Project
    3. จะได้โปรเจคที่มีโครงสร้างไฟล์ดังรูปครับ

    สำหรับท่านใดที่อยากเห็นหน้าตาแอปพลิเคชันเริ่มต้น ให้เปิด USB Debuging ที่มือถือให้เรียบร้อย ต่อเข้ากับคอมพิวเตอร์ จากนั้นที่มุมขวามือล่างของ Visual Studio Code ให้เลือกชื่อมือถือของท่าน จากนั้นกด F5 ได้เลยครับ

    ในการเชื่อมต่อกับ API เราจะต้อง import package เพิ่มโดยพิมพ์คำสั่งที่ terminal > cmd ดังรูปครับ

    จากนั้นแก้ไขในไฟล์ main.dart โดยเริ่มจากการ import ดังนี้ครับ

    import 'dart:async';
    import 'dart:convert';
    
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    

    ด้านล่างเป็น Code ที่เชื่อมต่อ API โดยใช้ http.get เพื่อดึงข้อมูลแบบ Get จากนั้นก็ return ค่า response โดยใช้ประเภท Future เทียบกับภาษาอื่นๆ ประเภทข้อมูลนี้ก็คือ CallBack นั้นเองครับ เอาไว้อ่านค่าที่ได้จาก api เมื่อได้ข้อมูลมาแล้ว (ในอนาคต ไม่รู้ตอนไหน เมื่อเสร็จจะบอก ประมาณนั้น) ซึ่งข้างในเป็นค่าประเภท dynamic ที่ได้จาก jsonDecode

    Future<dynamic> fetchAlbum() async {
      final response =
          await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums'));
    
      if (response.statusCode == 200) {
        return jsonDecode(response.body);
      } else {
        throw Exception('Failed to load album');
      }
    }

    ตรงนี้เป็นการสร้าง Widget สำหรับแสดงข้อมูลเป็นแถวๆ

    Widget _buildRow(String dataRow) {
      return ListTile(
        title: Text(
          dataRow,
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      );
    }

    ต่อไปก็จะเป็น Main Function ที่มีการประกาศ state เพื่อเก็บข้อมูลไว้แสดงผลในรูปแบบ ListView เมื่อได้ข้อมูลจาก API มาแล้วนะครับ

    void main() => runApp(MyApp());
    
    class MyApp extends StatefulWidget {
      MyApp({Key? key}) : super(key: key);
    
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      late Future<dynamic> futureAlbum;
    
      @override
      void initState() {
        super.initState();
        futureAlbum = fetchAlbum();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Fetch Data Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Scaffold(
            appBar: AppBar(
              title: Text('Fetch Data Example'),
            ),
            body: Center(
              child: FutureBuilder<dynamic>(
                future: futureAlbum,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return ListView.builder(//สร้าง Widget ListView
                        padding: EdgeInsets.all(16.0),
                        itemBuilder: (context, i) {
                           //หากไม่สร้าง Object สามารถเรียกใช้งานแบบนี้ได้เลย
                          return _buildRow(snapshot.data[i]["title"].toString()); 
                        });
                  } else if (snapshot.hasError) {
                    return Text("${snapshot.error}");
                  }
    
                  // รูป Spiner ขณะรอโหลดข้อมูล
                  return CircularProgressIndicator();
                },
              ),
            ),
          ),
        );
      }
    }

    เมื่อ Run ดูก็จะได้หน้าตาประมาณนี้ครับ

    เรียกได้ว่าสัมผัสแรกกับ Flutter รู้สึกประทับใจทั้งในด้าน Extension ที่มีใน Visual Studio Code ให้ความรู้สึกไม่ต่างจากการพัฒนาด้วย .Net Framwork เพราะสามารถ Debug ได้ มี Intellisense ครบถ้วน ในด้าน Syntax เนื่องจากเป็นภาษาใหม่ยังต้องทำความเข้าใจอีกพอสมควร ในด้านการออกแบบ UI สำหรับท่านใดที่เคยใช้ React Native มาน่าจะพอเข้าใจ Concept ของ View Widget (เทียบเท่า Component) ได้ไม่ยากนัก ถ้าหากได้นำมาใช้ในงาน Production จริงๆ แล้วจะนำประเด็นที่น่าสนใจอื่นๆมาแชร์กันเพิ่มเติมครับ

    อ้างอิง

    https://flutter.dev/docs/get-started/codelab

    https://flutter.dev/docs/cookbook/networking/fetch-data