[JAVA] I made a web application that maps IT event information with Vue and Flask

Introduction

While surfing the net, I learned that connpass on the IT event portal site distributes a Web API that provides event information, and displays the venue etc. on the map. I thought it would be convenient if there was an app to do it, and completed it by sacrificing the first three days of the year.

Deliverables

Signpost for connpass GitHub

It is a so-called SPA application that dynamically maps the response obtained by asynchronous communication.

Framework library and reasons for selection

--Flask: See below --Vue.js (Vue CLI): Because I'm studying, it's better than React --Mapbox GL JS (+ VueMapbox): Emphasis on operational performance to display a large number of features --BootstrapVue: God --OpenStreetMap (background map): Because it is easier to see the building name etc. than the basic map of the Geographical Survey Institute

Various points

CORS limit

CORS stands for Cross-Origin Resource Sharing. It's easy to understand, "Don't bring data from someone else's website through asynchronous communication without permission." In this case, the response of connpassAPI cannot be obtained on the front side due to CORS restrictions. Once you receive it on your own server, you will not be hit by the CORS limit. So, at first I was thinking of using firebase hosting and function, but I decided to build a server with Flask that accesses the connpass API and receives the response. Flask is very simple, so I think it's best if you need a server because anything like this time, and I personally like it, so I adopted it.

Flask and Vue.js environment construction

I think Vue.js is often used in combination with node.js. As a result of various investigations, we have come up with a configuration that can be developed in coexistence with Flask.

Python scripts and files for heroku server are placed in the root, and the front side is stored in the vue directory. By setting as follows, Flask will refer to vue / dist as a template folder.

from flask import Flask, render_template, request, jsonify, make_response, send_file, redirect, url_for

app = Flask(__name__, static_folder='./vue/dist/static', template_folder='./vue/dist')


#The following routing ...

Build API server

I created an API server that accesses according to connpass API specifications and returns the obtained response to the front as follows.

import urllib.request, urllib.parse
import json
@app.route('/api/')
def getApi():
    keyword_or = request.args.get('keyword_or')
    ym = request.args.get('ym')
    ymd = request.args.get('ymd')
    owner_nickname = request.args.get('owner_nickname')
    start = request.args.get('start')
    order = request.args.get('order')
    count = request.args.get('count')
    all_params = {
        "keyword_or": keyword_or,
        "ym":ym,
        "ymd":ymd,
        "owner_nickname":owner_nickname,
        "start":start,
        "order":order,
        "count":100
    }

    params = {}
    #Remove elements with a value of None from the parameters
    for key in all_params:
        if all_params[key] != None:
            params[key] = all_params[key]


    p = urllib.parse.urlencode(params)
    url = "https://connpass.com/api/v1/event/?" + p

    with urllib.request.urlopen(url) as res:
        html = res.read().decode().replace(r"\n","")
        jsonData = json.loads(html)
        return jsonify(jsonData)

It receives the same parameters as connpassAPI, throws it to connpassAPI as it is, decodes the response, and returns it as json. It is a complete relay server.

Reference site

Creating a simple app using Vue.js (vue-cli) and Flask [Second half-server side] BootstrapVue VueMapbox