DEV Community: Potchara Pruksasri

Java: เพิ่ม Root Cert เพื่อเรียก API SSL ที่มี Cert ของตัวเอง

Potchara Pruksasri — Sun, 16 Oct 2022 00:55:51 +0000

เวลาเราเขียน Java รันบน Application Server เช่น Tomcat หรือ Glassfish ถ้าเราเรียกหรือทำงานเกี่ยวกับพวก SSL Cert ที่เราสร้างเอง (จาก EJBCA) มันจะ Error ประมาณว่า มันทำ SSL Handcheck กันไม่สำเร็จ

เพราะว่าใน Java มันก็ต้องมีการใส่ Root CA เพื่อให้ Trust SSL Cert นั้นด้วย เราสามารถแก้ได้ดังนี้

เช็คให้ชัวร์ว่า Application Server ของเรารันด้วย Java ในเครื่องเวอร์ชันไหน (ในเครื่องอาจมี Java หลายเวอร์ชัน)
เข้าไปที่ folder security ของ Java Home เช่น ถ้า Java 11 ใน Windows ก็เข้าที่ C:\Program Files\Java\jdk-11.0.11\lib\security มันจะมีไฟล์ชื่อ cacerts อยู่
เอา cert ของเรา (ของเราได้จาก EJBCA เป็น .jks) มา export เป็น .cert โดยใช้โปรแกรม KeyStore Explorer หรือถ้าได้ Cert ของ Root ที่เป็น .DER มาก็ได้

เพิ่ม cert นั้นเข้า cacerts ของ Java กำหนด -alias ให้ตรงกับใน .jks ของเราด้วยนะ

keytool -import -alias alias -keystore path-to-jre/lib/security/cacerts -file path-to-certificate-file

เช่น

keytool -import -alias xxxxxx -keystore "C:\Program Files\Java\jdk-11.0.11\lib\security\cacerts" -file "D:\certs\mycert.cer"

มันจะมี default password เป็น changeit ลองใช้โปรแกรม KeyStore Explorer เปิดเข้าไปดูใน cacerts หรือ ไฟล์ cert ของเราได้

Maven: สร้างไฟล์ war แบบไม่เอาเวอร์ชันมาด้วย

Potchara Pruksasri — Fri, 14 Oct 2022 00:44:23 +0000

อ้างอิง: https://stackoverflow.com/a/9593611

เพิ่มใน pom.xml

<project>
    ...
    <build>
        ...
        <finalName>${project.artifactId}</finalName>
        ...
    </build>
    ...
</project>

Java: Skip checking DataSource

Potchara Pruksasri — Fri, 14 Oct 2022 00:40:03 +0000

ถ้าไม่ต้องการให้ Spring Application ตรวจสอบการเชื่อมต่อฐานข้อมูลตอนเริ่มรันโปรแกรม ให้เพิ่มการตั้งค่านี้ใน application.properties

spring.autoconfigure.exclude=org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration

ที่มา: https://www.baeldung.com/spring-boot-failed-to-configure-data-source

Go: Deploy Go (Gin) Application on Docker

Potchara Pruksasri — Wed, 14 Sep 2022 00:28:10 +0000

ตัวอย่างกันลืมของ Dockerfile ที่เอาไว้ Deploy Go Application โดยการ Clone จาก Private github ไปบน Docker (Portainer)

FROM golang

WORKDIR /app

RUN git clone -b develop https://<username>:<token>@github.com/<username>/<gitrepo>.git .

RUN go mod download

ENV GIN_MODE=release

COPY ./ ./

RUN go install github.com/cosmtrek/air@latest

# Don't forget to add .air.toml .gitignore
RUN air init

EXPOSE 8888

CMD ["air"]

Flutter: Call Restful API (Provider+Retrofit)

Potchara Pruksasri — Mon, 05 Sep 2022 13:48:43 +0000

สร้าง Project

เริ่มต้นสร้าง Flutter project ชื่อ tripbooking (project ตัวอย่าง) กันก่อนเลย โดยการรันคำสั่งสร้าง project และเปิด vscode ที่ folder นั้น

flutter create tripbooking
cd tripbooking
code .

สร้าง folder ที่จะเอาไว้เก็บไฟล์ต่างๆให้เป็นระเบียบ โดยในที่นี่ขึ้นอยู่กับความเหมาะสม สำหรับที่จะแนะนำให้สร้าง folder ทั้งหมด 3 folder คือ

page = เอาไว้เก็บหน้าต่างๆ ของ application
service = ส่วนประมวลผลเรียก Api
model = สำหรับเก็บ database model

เพิ่ม libraries ที่เกี่ยวข้องกับ project

flutter pub add retrofit
flutter pub add retrofit_generator
flutter pub add json_serializable
flutter pub add build_runner --dev
flutter pub add dio
flutter pub add provider
flutter pub add get
flutter pub add get_storage

สร้าง Provider ไว้จัดการข้อมูลที่ใช้ใน Application

สร้าง Folder ย่อยชื่อ provider ภายใน folder service
สร้างไฟล์ของ provider ชื่อ appdata.dart

ในไฟล์ appdata.dart สร้างตัวแปล baseUrl ของ api ที่ application เราต้องติดต่อ ตามตัวอย่าง

import 'package:flutter/material.dart';

class AppData with ChangeNotifier {
  //Api baseurl
  String baseurl = "http://192.168.1.100:8888";
}

ไปที่ main.dart แก้ Code ใน main() เพื่อใช้งาน provider ที่สร้างขึ้น

void main() {
  runApp(MultiProvider(providers: [
    ChangeNotifierProvider(
      create: (context) => AppData(),
    )
  ], child: const MyApp()));
}

เรียบร้อยเรามี provider ไว้ใช้งานใน application เราแล้ว

สร้าง RestClient โดยใช้ Retrofit

ตัวเรียก api ในที่นี้เราจะเรียกว่า service เป็นไฟล์ที่เก็บใน folder service ซึ่งเราจะแยกตาม path (url) ของ restful api เช่น จะเรียกใช้งาน api ที่มี path เป็น /destination เราก็จะสร้างไฟล์ชื่อ destination.dart

สร้างไฟล์ destination.dart ใน folder service

import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';
import 'package:tripbooking/model/destination.dart';

part 'destination.g.dart';

@RestApi()
abstract class DestinationService {
  factory DestinationService(Dio dio, {String baseUrl}) = _DestinationService;

}

ซึ่งเมื่อพิมพ์คำสั่งเสร็จแล้วมันจะ Error ซึ่งถูกแล้ว เพราะว่า Retrofit ต้องมีการ generate คำสั่งใหม่ของมัน (https://pub.dev/packages/retrofit) เป็นไฟล์ชื่อ destination.g.dart ตามที่เราระบุ

เปิด terminal แล้วพิมพ์คำสั่งให้ retrofit generate ไฟล์

flutter pub run build_runner watch

มันจะ generate ไฟล์แล้วเปิดค้างรอ ถ้าเราแก้ไขไฟล์มันก็จะ auto generate ใหม่ ถ้าจะยกเลิก ก็กด Ctrl+C หรือเราสามารถ ใช้คำสั่ง flutter pub run build_runner build (ใช้ option build) ก็ได้ มันจะ generate ครั้งเดียว ถ้าแก้ไฟล์ ต้องมาสั่ง generate ใหม่เอง

ไฟล์ที่ generate ขึ้นเราไม่แก้ไขมัน เพราะมันจะถูกลบแล้วถูกสร้างใหม่ตลอด

ตอนนี้จะมี Retrofit client (service) ที่ใช้ติดต่อไปยัง api แล้ว ต่อไปจะเป็นการสร้าง method ในการเรียก api แต่จะเรียก api ได้ ต้องมี model มารับข้อมูลที่ได้คืนมาจาก api ด้วยด้วย ดังนั้น ต้องสร้าง model ก่อน

สร้างไฟล์ destination.dart ใน folder model
เข้าเวบ https://app.quicktype.io แล้วก็เอา json ที่ได้จาก api มาวางเพื่อให้เวบมันสร้าง class ของ dart ให้ตามรูปตัวอย่าง

ตั้งชื่อ class เป็น Destination (เพราะเป็นข้อมูลที่ได้จากการเรียก api destination)
วาง json ได้มา ลงไป
เลือกภาษาเป็น Dart
เลือกตัวเลือกแค่ตัวเดียวคือ Make all properties required
กด copy code

กลับไปที่ไฟล์ destination.dart ใน model แล้ววาง code ลงไป แต่ใน flutter จะ Error เพราะ @required ให้ลง @ ออก

ตอนนี้ เราก็จะมี model ไว้รับข้อมูลจาก api แล้ว

กลับไปที่ไฟล์ destination.dart ใน folder service (retrofit) แล้วเขียน คำสั่งเพิ่มเพื่อสร้าง method ในการเรียก api

abstract class DestinationService {
  factory DestinationService(Dio dio, {String baseUrl}) = _DestinationService;

  @GET("/destination")
  Future<List<Destination>> getDestinations();
}

จะเป็นการเรียกไปยัง path /destination และจะได้ผลลัพธ์ออกมาเป็น List ของ Destination (mode ที่เราเพิ่งสร้าง) นั่นเอง เมื่อ save ตัว retrofit จะ generate ไฟล์ให้ (ถ้าเรายังสั่งเป็น watch อยู่) หรือสั่ง build เพื่อ generate ใหม่อีกครั้ง

เรียบร้อย เราสร้างตัว service ที่เอาไว้เรียก api ได้แล้ว

อ่านเพิ่มเติมรูปแบบการใช้ retrofit ที่ (https://pub.dev/packages/retrofit)

เรียกใช้งาน service ที่เราสร้าง

ตัวอย่างเช่น เราสร้างหน้า home.dart ใน folder page ในรูปแบบ FutureBuilder

import 'dart:convert';
import 'dart:developer';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:tripbooking/model/destination.dart';
import 'package:tripbooking/service/destination.dart';
import 'package:provider/provider.dart';
import 'package:tripbooking/service/provider/appdata.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  // 1. กำหนดตัวแปร
  List<Destination> destinations = [];
  late Future<void> loadDataMethod;
  late DestinationService destinationService;

  // 2. สร้าง initState เพื่อสร้าง object ของ service 
  // และ async method ที่จะใช้กับ FutureBuilder
  @override
  void initState() {
    super.initState();
  // 2.1 object ของ service โดยต้องส่ง baseUrl (จาก provider) เข้าไปด้วย
    destinationService = 
        DestinationService(Dio(), baseUrl: context.read<AppData>().baseurl); 
  // 2.2 async method
    loadDataMethod = loadData(); 
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
  // 3. เรียก service ในรูปแบบของ FutureBuilder (หรือจะไม่ใช้ก็ได้ แค่ตัวอย่างให้ดูเฉยๆ)
      body: FutureBuilder(
          future: loadDataMethod, // 3.1 object ของ async method
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return Center(child: Text(jsonEncode(destinations)));
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          }),
    );
  }
  // 4. Async method ที่เรียก service เมื่อได้ข้อมูลก็เอาไปเก็บไว้ที่ destinations ที่ประกาศไว้ด้านบนเป็น List
  Future<void> loadData() async {
    try {
      destinations = await destinationService.getDestinations();
    } catch (err) {
      log('Error: $err');
    }
  }
}

เท่านี้ เราก็เรียกใช้ service ได้อย่างง่ายๆ

แต่ปัญหาคือต้องฝึกดูเวลามันผิดพลาด เกิด Error ตอนเรียก service มันจะต้องใช้ try catch จับ ตามตัวอย่าง

GO: Database Restful API (GIN+GORM)

Potchara Pruksasri — Sun, 04 Sep 2022 11:20:07 +0000

สร้าง Project

เริ่มต้นสร้าง Go project ชื่อ tripbooking (project ตัวอย่าง) กันก่อนเลย โดยสร้าง folder ชื่อ tripbooking แล้วเข้าไป folder รันคำสั่งสร้าง project และเปิด vscode ที่ folder นั้น

mkdir tripbooking 
cd tripbooking 
go mod init tripbooking 
code .

สร้าง folder ที่จะเอาไว้เก็บไฟล์ต่างๆให้เป็นระเบียบ โดยในที่นี่ขึ้นอยู่กับความเหมาะสม สำหรับที่จะแนะนำให้สร้าง folder ทั้งหมด 4 folder คือ

controller = เอาไว้เก็บ restful api controller (path) ต่างๆ
service = ส่วนประมวลผลต่างๆของ Api
model = struct ของ database model
repository = ส่วนที่เชื่อมต่อไปยัง database

และสร้างไฟล์อีก 3 ไฟล์คือ

config.yaml = ไฟล์การตั้งค่าต่างๆของ project
server.go = ไฟล์เริ่มต้นการทำงานของ Server โดย GIN
main.go = ไฟล์เริ่มต้นการทำงานของ project

โดยใน main.go ก็จะมี code ของ func main() เริ่มต้น ตามรูป

เพิ่ม libraries ที่เกี่ยวข้องกับ project

go get github.com/gin-gonic/gin
go get gorm.io/gorm
go get gorm.io/driver/mysql
go get github.com/spf13/viper
go install github.com/cosmtrek/air@latest

สร้าง Server ด้วย GIN

ที่ไฟล์ server.go สร้าง server ของ restful api ด้วย GIN

package main

import (
    "net/http"
    "os"
    "github.com/gin-gonic/gin"
)

func StartServer() {
    router := gin.Default()
    router.SetTrustedProxies(nil)
    router.GET("/", hello)
    port := os.Getenv("PORT")
    if port == "" {
        port = "8888"
    }
    router.Run(":" + port)
}

func hello(c *gin.Context) {
    c.JSON(http.StatusOK, gin.H{
        "message": "Hello World!!!",
    })
}

ใน main.go สั่งให้เรียก func StartServer()

package main

func main() {
    StartServer()
}

รันโปรแกรมด้วย plugin air เพื่อให้ auto reload เมื่อเราแก้ไข code โดยต้องกำหนดค่าเริ่มต้นให้ก่อน

air init
air

ทดสอบเรียก Api อาจใช้ Thunder Client, Talend หรือ Postman ก็ได้

ติดต่อ Database ด้วย GORM

ตั้งค่า dsn ที่จะเชื่อมไปยังฐานข้อมูล MySQL ในไฟล์ config.yaml (อย่าลืมเปิด Server MySQL ตัวอย่างล่ะ หรือ ถ้าเชื่อมไปยัง Server ที่ Online อยู่ก็ได้เลย)

mysql:
  dsn: "username:password@tcp(localhost:3306)/tripbooking?collation=utf8mb4_unicode_ci&parseTime=true"

จากนั้น สร้างไฟล์ database.go ใน folder repository แล้วเขียนคำสั่งใช้การติดต่อไปยังฐานข้อมูล

package repository


import (
    "github.com/spf13/viper"
    "gorm.io/driver/mysql"
    "gorm.io/gorm"
)

var db *gorm.DB

func NewDatabaseConnection() (*gorm.DB, error) {
    if db == nil {
        viper.SetConfigName("config")
        viper.AddConfigPath(".")
        err := viper.ReadInConfig()
        if err != nil {
            panic(err)
        }
        dsn := viper.GetString("mysql.dsn")
        dialector := mysql.Open(dsn)
        db, err = gorm.Open(dialector)
        if err != nil {
            return nil, err
        }
    }
    return db, nil
}

ซึ่งได้จะ func NewDatabaseConnection() ไว้ใช้ในการติดต่อไปยังฐานข้อมูลที่เราได้ตั้งค่าไว้

ติดต่อไปดึงข้อมูลจากฐานข้อมูล (Table) ต้องมี Model (Entity) ที่เป็นตัวแทนของ Table นั้นๆ ตัวอย่างเช่น จะดึงข้อมูลจาก Table destination ก็ต้องสร้าง Model Destination ขี้นมาก่อน

สร้างไฟล์ destinationModel.go ใน folder model และเขียน model ตามโครงสร้างของ table destination

package model

type Destination struct {
    ID   uint   `gorm:"column:idx;primaryKey"`
    Zone string `gorm:"column:zone;size:255"`
}

func (Destination) TableName() string {
    return "destination"
}

ในกรณีที่ไม่อยากเขียน struct ของ model เอง ให้ใช้วิธีนี้คือ

เข้า phpmyadmin แล้วรันคำสั่ง (destination คือชื่อ table ที่ต้องการ) โดยเลือกการแสดงผลตรง option ให้เป็น แบบ Full Text

SHOW CREATE TABLE destination

จะได้คำสั่งสร้าง Table ออกมา ให้ copy คำสั่ง Create นั้นไว้ แล้วเข้าที่เวบ https://sql2gorm.mccode.info
วางคำสั่ง sql ลงไป เวบจะสร้าง struct ของ model ให้ตามรูป (เลือก json tag เป็น include ด้วยนะ ถ้าจะใช้เป็น DTO รับข้อมูลรูปแบบ json)

สร้าง Repositoy ที่เป็นตัวเชื่อมไปยังฐานข้อมูล โดยในการเขียนนี้ เราจะสร้างให้อยู่ในรูปแบบ Interface (ถ้ายังไม่รู้จักจะงงๆหน่อยนะ) เพื่อให้สะดวกต่อการใช้งาน อาจดูยุ่งยาก แต่มันดีในอนาคตเวลาโปรแกรมมันขยายและซับซ้อนขึ้น

สร้างไฟล์ destinationRepository.go ไว้ใน folder repository และเขียนให้ไปดึงข้อมูลของ table destination มา (FindAll) โดยมี pattern ของการเขียนดังตัวอย่าง

package repository

import (
    "tripbooking/model"

    "gorm.io/gorm"
)

// repository struct (<name>DB)
type destinationRepo struct {
    db *gorm.DB
}

// repository contructor (New<name>Repository)
func NewDestinationRepository() DestinationRepository {
    db, err := NewDatabaseConnection()
    if err != nil {
        return nil
    }
    return destinationRepo{db: db}
}

// repository interface (<name>Repository)
type DestinationRepository interface {
    FindAll() (*[]model.Destination, error)
}

// implement functions conformed interface
func (d destinationRepo) FindAll() (*[]model.Destination, error) {
    destinations := []model.Destination{}
    result := d.db.Find(&destinations)
    if result.Error != nil {
        return nil, result.Error
    }
    return &destinations, nil
}

เมื่อสร้าง Repository เสร็จแล้ว ขี้นต่อไปคือการสร้าง Service เพื่อใช้ประมวลผลต่างๆ

เราจะไม่ประมวลใน repository และ controller ถ้าไม่จำเป็น

สร้างไฟล์ destinationService.go ใน folder service เพื่อใช้เขียนการประมวลผลในรูปแบบของ service ซึ่งจะมี pattern การเขียนแบบ interface เหมือน repository

package service

import (
    "tripbooking/model"
    "tripbooking/repository"
)

// service struct (<name>Serv)
type destinationServ struct{}

// service contructor (New<name>Service)
func NewDestinationService() DestinationService {
    return destinationServ{}
}

// create repositories
var destinationRepo = repository.NewDestinationRepository()

// service interface (<name>Service)
type DestinationService interface {
    GetAllDestinations() (*[]model.Destination, error)
}

func (d destinationServ) GetAllDestinations() (*[]model.Destination, error) {

    destinations, err := destinationRepo.FindAll()
    if err != nil {
        return nil, err
    }
    return destinations, nil
}

เมื่อได้ส่วนประมวลผลแล้ว ต่อไปจะทำการสร้าง controller เพื่อให้ user สามารถเรียกใช้งาน api เราได้ โดยสร้างไฟล์ destinationController.go ใน folder controller แล้วเขียนเรียกใช้งาน service ดังตัวอย่าง

package controller

import (
    "net/http"
    "tripbooking/service"

    "github.com/gin-gonic/gin"
)

// create services
var destinationServ = service.NewDestinationService()

// Initiate Controller
func NewDestinationController(router *gin.Engine) {
    r := router.Group("/destination")
    {
        r.GET("", findAll)
    }
}

// Implement Controller
func findAll(c *gin.Context) {
    destinations, err := destinationServ.GetAllDestinations()
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{
            "error": err,
        })
    }
    c.JSON(http.StatusOK, destinations)
}

เมื่อได้ controller แล้ว ต่อไป จะเป็นการผูก Controller เข้าไปยัง Server ที่เราสร้าง

มาที่ไฟล์ server.go และเพิ่ม (Register) Controller ของเราเข้าไป ตาม code ตัวอย่าง

func StartServer() {
    router := gin.Default()
    router.SetTrustedProxies(nil)
    router.GET("/", hello)
    port := os.Getenv("PORT")
    if port == "" {
        port = "8888"
    }

    // **** Register controllers
    controller.NewDestinationController(router)

    router.Run(":" + port)
}

จากนั้นทดลองเรียก api โดยใช้ /destination จะได้ผลลัพธ์ตามตัวอย่าง

เสร็จสิ้นการเริ่มต้น GO Project ในการสร้าง Restful api เชื่อมต่อไปยัง MySQL ด้วย GIN และ GORM

Flutter Fix: flutter_tags type 'Null' is not a subtype of type 'DataList' in type cast

Potchara Pruksasri — Wed, 31 Aug 2022 16:27:24 +0000

https://pub.dev/packages/flutter_tags
https://github.com/Dn-a/flutter_tags/issues/79

Flutter Fix: flutter_facebook_auth 4+ No implementation found

Potchara Pruksasri — Mon, 29 Aug 2022 18:01:00 +0000

MUST HAVE!!!

Flutter: Facebook Login โดยไม่ต้องผ่าน Firebase

Potchara Pruksasri — Mon, 29 Aug 2022 16:12:34 +0000

เขียน Flutter ให้ Login ด้วย Facebook โดยไม่ต้องผ่าน Firebase แบ่งออกเป็น 3 ขั้นตอน

สร้างและตั้งค่า Facebook App ก่อน

ขั้นที่ 1. เข้า https://developers.facebook.com/ โดยใช้ Account facebook ของเราเอง

ขั้นที่ 2. เลือก MyApp แล้วก็ Create App

ขั้นที่ 3. เลือก app type เป็น Consumer

ขั้นที่ 4. ตั้งชื่อ App อะไรก็ได้ ใส่ Email แล้วกด Create App ระบบจะถาม Password ของ facebook ก็ใส่แล้วกด submit

จะได้ App ตามตัวอย่างข้างล่าง

ขั้นที่ 5. กด Set up ที่ Facebook Login แล้วเลือก Android (กรณีที่เป็น Android app)

ขั้นที่ 6. ตั้งค่าสำหรับ Android app กด Next ไปถึง Step 3 เลย

ขั้นที่ 6.1. Package Name ให้ใส่ package name ของ app โดยไปที่ไฟล์ android/app/src/build.gradle
ขั้นที่ 6.2. Default Activity ก็ใส่ package name ตามข้างบนแล้วตามด้วย .MainActivity

ขั้นที่ 7. ที่ Step 4 ต้องสร้าง Key hash ของเครื่องที่เขียนโปรแกรม Android นั้นๆ ต้องทำทุกเครื่องที่ใช้ Build application ถ้าเป็นเครื่อง Build ก็ต้องทำใหม่
** หรือ ใช้ package https://pub.dev/packages/flutter_facebook_keyhash ช่วยในการหา key hash **

ขั้นที่ 7.1. ใช้โปรแกรม openssl ในการรัน ถ้าเครื่องไม่มี openssl ก็ให้ดาวน์โหลดจาก https://code.google.com/archive/p/openssl-for-windows/downloads
ขั้นที่ 7.2. รันคำสั่ง โดยต้องเปลี่ยน C:\Users\USERNAME เป็น path ของ user ในเครื่อง windows และ PATH_TO_OPENSSL_LIBRARY เป็น path ที่เก็บโปรแกรม openssl ที่แตก zip ไว้

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

ขั้นที่ 7.3. มันถาม password ให้ใส่เป็น "android" แล้วจะได้ Key hash ออกมา
ขั้นที่ 7.4. Copy Key hash ไปใส่ในช่องของ Step 4

ถ้ามันถูกต้องมันต้องมีเป็นข้อความ Warning ออกมา ถ้ามันเป็น keyhash ออกมาเลย แบบนั้นอาจไม่ได้เพราะว่าตัว debug.keystore มันไม่ได้มี password (default) เป็น android ถ้าเอา keyhash ไปใช้แล้ว มันจะไม่สามารถ login กับ facebook account อื่นได้ มันจะได้แต่กับ facebook ตัวเอง

ขั้นที่ 8. ข้าม Step 5 ไปที่ Step 6 ต้องไปเพิ่มที่ Android app

ขั้นที่ 8.1. ไปที่ folder android/app/src/main/res/values (ใน flutter จะไม่เหมือนที่แสดงในเวบ facebook นะ)
ขั้นที่ 8.2. สร้างไฟล์ชื่อ *strings.xml *แล้วเพิ่ม code โดยใส่ FACEBOK_APPNAME และ FACEBOK_APPID

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">FACEBOK_APPNAME</string>    
<string name="facebook_app_id">FACEBOK_APPID</string>
<string name="fb_login_protocol_scheme">fbFACEBOK_APPID</string>
<string name="facebook_client_token">FACEBOOK_CLIENT_TOKEN</string>
</resources>

ขั้นที่ 8.3. ไปที่ไฟล์ android/app/src/main/AndroidManifest.xml เพิ่ม Code อนุญาตการเชื่อมต่ออินเทอร์เข้าไป ก่อน tag Application

<uses-permission android:name="android.permission.INTERNET"/>

ขั้นที่ 8.4. เพิ่ม Code เข้าไป ใน tag Application

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
<activity android:name="com.facebook.FacebookActivity"
android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
   <action android:name="android.intent.action.VIEW" />
   <category android:name="android.intent.category.DEFAULT" />
   <category android:name="android.intent.category.BROWSABLE" />
   <data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>

ขั้นที่ 9. กด Next ไปเรื่อยๆ เสร็จสิ้นการตั้งค่าใน Facebook App (ช่วงแรก)

ติดตั้งและใช้ Flutter plugin

ขั้นที่ 1. ติดตั้ง package https://pub.dev/packages/flutter_facebook_auth (คู่มือ facebook.meedu.app)

ขั้นที่ 2. ถ้ารัน Flutter อยู่ต้อง Stop Flutter ก่อนแล้ว Build ใหม่

ขั้นที่ 3. import library ในหน้าที่จะเขียนเชื่อมต่อกับ facebook api

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

ขั้นที่ 4. เขียน Code ในปุ่มเพื่อเรียกการ login

final LoginResult result = await FacebookAuth.instance.login(); // by default we request the email and the public profile
// or FacebookAuth.i.login()
if (result.status == LoginStatus.success) {
 // you are logged
 final AccessToken accessToken = result.accessToken!;
}

ขั้นที่ 5. ถ้าสำเร็จจะได้ accressToken กลับมา แต่ตอนนี้จะใช้ได้แค่ Account facebook ที่เป็น account ที่สร้าง Facebook app เท่านั้น

ขั้นที่ 6. ใช้คำสั่ง เพื่อเรียกข้อมูล User (ค่า default จะเป็น public_profile, email)

final userData = await FacebookAuth.instance.getUserData();

{
  "email" = "dsmr.apps@gmail.com",
  "id" = 3003332493073668,
  "name" = "Darwin Morocho",
  "picture" = {
      "data" = {
          "height" = 50,
          "is_silhouette" = 0,
          "url" = "https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=3003332493073668",
          "width" = 50,
      },
  }
}

เปิด Mode ของ Facebook App เป็น Live Mode เพื่อให้ใช้งาน Login กับ Facebook Account อื่นได้

ถ้าไม่เปิดจะใช้งานได้แค่ Facebook Account ของ Dev คนนั้นเท่านั้น

ขั้นที่ 1. การเปิด Live mode ของ Facebook ต้องมีการใส่ privacy policy ด้วย ซึ่งเราอาจจะไปสร้างได้จากเวบของไทย pdpa.pro

ขั้นที่ 2. เลือก สร้าง Policy

ขั้นที่ 3. เลือก Privacy Policy, ยอมรับเงื่อนไข, กดยืนยันการเลือก

ขั้นที่ 4. กรอก email แล้วกด เริ่มสร้าง

ขั้นที่ 4. กรอกชื่อแอปภาษาไทย ภาษาอังกฤษ เลือกไทย แล้วกดถัดไป

ขั้นที่ 5. เลือก Facebook login แล้วกดถัดไป

ขั้นที่ 6. เลือกตามภาพ

ขั้นที่ 7. บันทึกข้อมูล และกดรับ Policy

ขั้นที่ 8. ระบบจะส่งเมล์เข้าไปยังเมล์ที่เรากรอกไว้

ขั้นที่ 9. เข้าเมล์แล้วกดยืนยันอีเมล์

ขั้นที่ 10. ตั้งรหัสและเข้าระบบ จะเห็น policy ให้ copy url มา

ขั้นที่ 11. กลับไปที่ Facebook APP เอาลิงค์ไปใส่ที่ Privacy Policy URL และ User data deletion แล้วกด save changes

ขั้นที่ 12. ตรวจนี้มี Error ไม่ต้องกังวล ให้ copy key hashes ทั้งหมดใส่ notepad ไว้ก่อน กด Remove App Store ออกก่อน แล้วกด save changes

ขั้นที่ 13. มาที่เมนู App Review แล้วเลือก Permission and Features

ขั้นที่ 14. ถ้ามีหน้าต่างนี้กด Not Now

ขั้นที่ 15. ส่วนของ** Email** ถ้าเป็น Standard access อยู่ จะใช้กับ Facebook account อื่นไม่ได้ จะได้แค่ตัวเอง ให้กด get advanced access
กดแล้วต้องรอประมาณ 5-10 วินาที

ถ้าขึ้นมาแบบนี้ แสดงว่า ไม่ได้ ให้กลับไปลบ App Store ขั้นตอนที่ 12

ถ้าขึ้นมาแบบนี้ แสดงว่า ได้ ติ๊กแล้วกด Confirm มันจะถามให้ใส่ password ของ facebook 1 ครั้ง

ถ้าสำเร็จจะเป็นแบบนี้

ขั้นที่ 16. ส่วนของ** public_profile** ถ้าเป็น Standard access อยู่ จะใช้กับ Facebook account อื่นไม่ได้ จะได้แค่ตัวเอง ให้กด get advanced access
กดแล้วต้องรอประมาณ 5-10 วินาที

ทำเหมือน email

จนได้แบบนี้ ถือว่า สมบูรณ์

ขั้นที่ 17. ไปที่เมนู Setting > Basic

กดเปิดโหมด Live

จะขึ้นให้เช็คเรื่องของการใช้ข้อมูล กด Start Checkup

กด Get Started

เลือก 2 ตัวแล้วกด Continue

เลือก แล้ว กด Continue

กด Submit

ขั้นที่ 18. กดเปิดโหมด live อีกรอบ จะเปิดได้

ขั้นที่ 19. เลื่อนลงมาที่ปุ่ม + Add Platform แล้วกด

เลือก Android แล้วกด Next

เลือก Google Play แล้วกด Next

เอา Key hashes ที่ Copy ไว้มาวาง ถ้าหายแล้ว ก็ไปทำให้ที่ ส่วนที่ 1 ข้อ 7.2
ใส่ Package name, Class name ต้องพิมพ์เอานะ ห้าม Copy วางพิมพ์เสร็จแต่ละช่องกด Enter ด้วย
แล้วกด save changes

Error อยู่ไม่เป็นไร

จบกระบวนการฝั่งตั้งค่า ต่อไปจะเป็นฝั่งการเขียน Code ใน Flutter

Android: การส่งแอปที่เขียนไปรันบนโทรศัพท์แบบไร้สาย (ADB Wi-Fi)

Potchara Pruksasri — Sun, 07 Aug 2022 10:36:00 +0000

ปกติเราต้องต่อสาย USB เข้ากับโทรศัพท์ android เพื่อให้เครื่องคอมพิวเตอร์ (flutter) ของเรา detect เจอว่ามีโทรศัพท์ต่ออยู่ บางทีก็ไม่สะดวก เพราะมีสายเกะกะ ซึ่งใน android version ใหม่ๆ (จำไม่ได้แล้วว่า 10 หรือ 11 ขึ้นไป) จะมี feature ให้สามารถเชื่อม adb ผ่านทาง wifi ได้ โดยมีขั้นตอนดังนี้

ต่อสาย usb กับโทรศัพท์แบบปกติก่อน (ตรวจสอบด้วยว่า มันเชื่อมกันชัวร์แล้วใช่ไหม) โดยคำสั่ง adb devices
จากนั้นสั่งให้เครื่องที่เราเชื่อมต่อนี้ เปิดการเชื่อมต่อแบบ Wi-Fi โดยระบุ port การเชื่อมต่อเป็น 5555 (ปกติเค้าก็ใช้ port นี้กัน) ด้วยคำสั่ง adb tcpip 5555 กรณีทีมีอุปกรณ์ต่ออยู่หลายตัว เราสามารถระบุอุปกรณ์ที่จะเชื่อมต่อแบบเฉพาะเจาะจงได้โดยการใส่หมายเลขเครื่องด้วยพารมีเตอร์ -s ตามตัวอย่างข้างบน
ตอนนี้เครื่องมือถือจะเปิดการเชื่อมต่อผ่านทางเน็ต (tcpip) แล้วเราก็จะเชื่อมต่อผ่านทาง wifi ได้แล้ว โดยเรา ถอดสาย usb ออกเลย
ใช้คำสั่ง abd connect 192.168.1.116:5555 => 192.168.1.116 คือ ip ของเครื่องโทรศัพท์นะ ถ้าไม่รู้ ip ให้ดูในโทรศัพท์ตรงการเชื่อมต่อ Wi-Fi เลือก Access point ที่มือถือเชื่อมอยู่แล้วกดฟันเฟือนเข้าไปดู (กรณีที่เป็น android samsung)
เท่านี้เครื่องคอมพิวเตอร์ ก็เชื่อมกับโทรศัพท์ผ่าน wifi แล้ว โดยตรวจสอบได้จากคำสั่ง adb devices อีกครั้ง จะเห็นว่ามันเชื่อมผ่าน ip แล้ว
การยกเลิกการเชื่อมต่อผ่าน ip ใช้คำสั่ง adb disconnect 192.168.1.116:5555 => 192.168.1.116 คือ ip ของเครื่องโทรศัพท์นะ