【Write Code Every Day】Go × TypeScript(+ Nuxt.js)編

brew install go

go mod init github.com/nanami69/theater-tracker

module github.com/nanami69/theater-tracker

go 1.20

go get github.com/labstack/echo/v4

module github.com/nanami69/theater-tracker

go 1.20

require (
	github.com/labstack/echo/v4 v4.10.2 // indirect
	github.com/labstack/gommon v0.4.0 // indirect
	github.com/mattn/go-colorable v0.1.13 // indirect
	github.com/mattn/go-isatty v0.0.17 // indirect
	github.com/valyala/bytebufferpool v1.0.0 // indirect
	github.com/valyala/fasttemplate v1.2.2 // indirect
	golang.org/x/crypto v0.6.0 // indirect
	golang.org/x/net v0.7.0 // indirect
	golang.org/x/sys v0.5.0 // indirect
	golang.org/x/text v0.7.0 // indirect
)

package main

import (
	"net/http"
	"github.com/labstack/echo/v4"
)

type User struct {
	ID    int    `json:"id"`
	Name  string `json:"name"`
	Email string `json:"email"`
}

func getUser(c echo.Context) error {
	// id := c.Param("id")
	// ダミーデータとしてユーザーを返す
	user := &User{
		ID:    1,
		Name:  "John Doe",
		Email: "john@example.com",
	}
	return c.JSON(http.StatusOK, user)
}

func main() {
	e := echo.New()
	// ルーティングの設定
	e.GET("/users/:id", getUser)
	// サーバーの起動
	e.Logger.Fatal(e.Start(":8080"))
}

go build

go run main.go

npm install -g create-nuxt-app

npx create-nuxt-app .

npm run dev

export default {
  // ...
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'about',
        path: '/about',
        component: resolve(__dirname, 'pages/about.vue')
      })
    }
  }
}

npm install leaflet

import L from 'leaflet';

const leafletPlugin = {
  install: (app) => {
    app.config.globalProperties.$L = L;
  },
};

export default leafletPlugin;

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/leaflet.client.js', mode: 'client' },
  ],
};

<template>
    <div>
      <div id="map"></div>
    </div>
  </template>
  
  <script>
  import L from 'leaflet';
  
  export default {
    mounted() {
      const map = L.map('map').setView([35.681167, 139.767052], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    }
  }
  </script>
  
  <style>
  #map {
    height: 500px;
  }
  </style>

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page</p>
    <map-view></map-view>
  </div>
</template>

<script>
import leafletPlugin from '~/plugins/leaflet.client';
import MapView from '~/components/MapView';

export default {

  plugins: [leafletPlugin],
  components: {
    MapView
  },
}
</script>

<Button @click="goToFormPage">Go to Form Page</Button>

goToFormPage() {
      this.$router.push('/form')
    }

    link: [
      { rel: 'stylesheet', href: 'https://unpkg.com/leaflet@1.9.3/dist/leaflet.css' }
    ],
    script: [
      { src: 'https://unpkg.com/leaflet@1.9.3/dist/leaflet.js' }
    ],

    computed: {
        hasErrors() {
            return !!this.nameError || !!this.addressError || !!this.commentError;
        }
    },

const instance = axios.create({
                baseURL: 'http://localhost:8080'
            });
            // バックエンドにフォームの内容を送信する
            instance.post('/register-cinema', {
                address: this.address
            })
            .then((response) => {
                console.log(response.data.message)
                // マップにピンを立てる処理を書く
            })
            .catch((error) => {
                console.log(error);
            });

import (
	"net/http"

	"github.com/labstack/echo/v4"
	"github.com/labstack/echo/v4/middleware"
)

func main() {
	e := echo.New()

	// CORSの設定(デプロイ前に設定を見直す)
	e.Use(middleware.CORS())
	// ルーティングの設定
	e.GET("/users/:id", getUser)
	e.POST("/register-cinema", registerCinema)
	// サーバーの起動
	e.Logger.Fatal(e.Start(":8080"))
}

https://msearch.gsi.go.jp/address-search/AddressSearch?q=<住所>

    // APIに送信するリクエストを作成
    apiURL := "https://msearch.gsi.go.jp/address-search/AddressSearch?q=" + url.QueryEscape(address)
    req, err := http.NewRequest("GET", apiURL, nil)
    if err != nil {
        return "", "", err
    }
    req.Header.Set("Content-Type", "application/x-www-form-urlencoded")

    // リクエストを送信
    client := new(http.Client)
    resp, err := client.Do(req)
    if err != nil {
        return "", "", err
    }
    defer resp.Body.Close()

// レスポンスをパース
    var res []struct {
        Geometry struct {
            Coordinates []float64 `json:"coordinates"`
        } `json:"geometry"`
    }
    err = json.NewDecoder(resp.Body).Decode(&res)
    if err != nil {
        return "", "", err
    }

    // レスポンスから緯度経度を取得
    if len(res) == 0 {
        return "", "", fmt.Errorf("no result")
    }
    longitude := fmt.Sprintf("%f", res[0].Geometry.Coordinates[0])
    latitude := fmt.Sprintf("%f", res[0].Geometry.Coordinates[1])

    return latitude, longitude, nil

// バックエンドにフォームの内容を送信する
            instance.post('/register-cinema', {
                address: this.address
            })
            .then((response) => {
                console.log(response.data.lat)
                console.log(response.data.lng)
                // aboutページにリダイレクトしつつ、パラメータとしてlatとlngを渡す
                this.$router.push({
                    name: 'about',
                    params: {
                        lat: response.data.lat,
                        lng: response.data.lng
                    }
                })
            })

mounted() {
    const lat = this.$route.params.lat;
    const lng = this.$route.params.lng;
    if (lat && lng) {
      this.addPin(lat, lng);
    }
  }

addPin(lat, lng) {
      const position = [lat, lng];
      // MapViewコンポーネントに位置情報をemitする
      this.$refs.map.$emit('addMarker', position);
    }

  mounted() {
    const map = L.map('map').setView([36.2048, 138.2529], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    // 親コンポーネントからemitされた位置情報を受け取り、マーカーを追加
    this.$on('addMarker', (position) => {
      if (this.mapObject) {
        L.marker(position).addTo(this.mapObject);
      } else {
        this.$once('mounted', () => {
          L.marker(position).addTo(this.mapObject);
        });
      }
    });

    this.mapObject = map;
  },

var marker = L.marker(position).addTo(this.mapObject);
marker.bindPopup(cinemaInfo[2]).openPopup();

var marker = L.marker(position).addTo(this.mapObject); // markerオブジェクトを作成
marker.bindPopup(`<h3>${name}</h3><p>${comment}</p>`).openPopup();

const instance = axios.create({
                baseURL: 'http://localhost:8080',
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            });
            const formData = new FormData();
            formData.append('name', this.name);
            formData.append('address', this.address);
            formData.append('photo', this.photo);
            formData.append('comment', this.comment);

// ファイルを受け取る
    file, err := c.FormFile("photo")
    if err != nil {
        if err == http.ErrMissingFile {
            // ファイルが送信されていない場合の処理
        } else {
            // その他のエラーが発生した場合の処理
            return fmt.Errorf("resieve：%s", err.Error())
        }
    } else {
        // ファイルが正常に受け取れた場合の処理
        f, err := file.Open()
        if err != nil {
            return fmt.Errorf("not opne：%s", err.Error())
        }
        defer f.Close()

        data, err := ioutil.ReadAll(f)
        if err != nil {
            return fmt.Errorf("read file：%s", err.Error())
        }
        // Base64エンコード
    	fileBase64 = base64.StdEncoding.EncodeToString(data)
        fmt.Println("files: uploaded")
    }

CREATE DATABASE movie_theater;

USE movie_theater;

CREATE TABLE theaters (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    address VARCHAR(255) NOT NULL,
    latitude VARCHAR(255) NOT NULL,
    longitude VARCHAR(255) NOT NULL,
    photo BLOB
);

func saveToDB(name string, address string, latitude string, longitude string, photo string) error {
    // 設定ファイルのパスを指定する
	viper.SetConfigFile("./config/config.yml")

	// 設定ファイルを読み込む
	err := viper.ReadInConfig()
	if err != nil {
		panic(fmt.Errorf("failed to read config file: %s", err))
	}

	// 設定ファイルの内容を構造体にマッピングする
	var config Config
	err = viper.Unmarshal(&config)
	if err != nil {
		panic(fmt.Errorf("failed to unmarshal config file: %s", err))
	}

	dsn := fmt.Sprintf("%s:%s@tcp(%s:%s)/%s", config.User, config.Password, config.Host, config.Port, config.DBName)

    // DBに接続
    db, err := sql.Open("mysql", dsn)
    if err != nil {
        return err
    }
    defer db.Close()

    // INSERT文を作成して実行
    query := "INSERT INTO theaters (name, address, latitude, longitude, photo) VALUES (?, ?, ?, ?, ?)"
    _, err = db.Exec(query, name, address, latitude, longitude, photo)
    if err != nil {
        return err
    }

    return nil
}

import "github.com/spf13/viper"

  mounted() {
    const map = L.map("map").setView([36.2048, 138.2529], 6);
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
        map
      );
      this.mapObject = map;
  },

  mounted() {
    this.initializeMap();
  },
const map = L.map("map").setView([36.2048, 138.2529], 6);
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(
        map
      );
      this.mapObject = map;
      this.$emit("mapInitialized");
// 以下略

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page</p>
    <Button @click="goToFormPage">Go to Form Page</Button>
    <map-view @mapInitialized="onMapInitialized" ref="map"></map-view>
  </div>
</template>

<script>
import leafletPlugin from '~/plugins/leaflet.client';
import MapView from '~/components/MapView';
import Button from '~/components/Button'

export default {
  plugins: [leafletPlugin],
  components: {
    MapView,
    Button
  },
  methods: {
    goToFormPage() {
      this.$router.push('/form')
    },
    addPin(lat, lng, name, comment, photo) {
      const cinemaInfo = [lat, lng, name, comment,photo];
      if (this.isMapInitialized) {
        this.$refs.map.addMarker(cinemaInfo);
      } else {
        this.pendingMarker = cinemaInfo;
      }
    },
    onMapInitialized() {
      this.isMapInitialized = true;
      if (this.pendingMarker) {
        this.$refs.map.addMarker(this.pendingMarker);
        this.pendingMarker = null;
      }
    }
  },

<button type="submit" v-bind:disabled="isValid">送信</button>

computed: {
        isValid() {
            const hasErrors = !!this.nameError || !!this.addressError || !!this.commentError;
            const isFilled = !!this.name && !!this.address;
            return hasErrors || !isFilled;
        }
    },

package main

import (
	// 略

	"github.com/nanami69/theater-tracker/backend/pkg/geocoding"
)

addMarker(cinemaInfo) {
      var [lat, lng, name, comment, photo] = cinemaInfo;
      var position = [lat, lng];
      var marker = L.marker(position).addTo(this.mapObject); // markerオブジェクトを作成
      marker
        .bindPopup(
          `<h3>${name}</h3><p>${comment}</p><img src="data:image/jpeg;base64,${photo}" alt="cinema photo" width="200px">`
        )
        .openPopup();
    },

// Base64エンコード
fileBase64 = base64.StdEncoding.EncodeToString(data)
blobData = []byte(fileBase64)

-- カラムのデータサイズを拡張
ALTER TABLE テーブル名 MODIFY カラム名 MEDIUMBLOB;