[JAVA] Création d'une application Web qui mappe les informations sur les événements informatiques avec Vue et Flask

introduction

En surfant sur le net, j'ai appris que connpass sur le site du portail des événements informatiques distribue une API Web qui fournit des informations sur l'événement et affiche le lieu, etc. sur la carte. J'ai pensé que ce serait pratique s'il y avait une application pour le faire, et je l'ai complétée en sacrifiant les trois premiers jours de l'année.

Livrables

Signpost for connpass GitHub

Il s'agit d'une application dite SPA qui mappe dynamiquement la réponse obtenue par communication asynchrone.

Bibliothèque de cadres et raisons de la sélection

--Flacon: voir ci-dessous --Vue.js (Vue CLI): Parce que j'étudie, c'est mieux que React --Mapbox GL JS (+ VueMapbox): Axé sur les performances opérationnelles pour afficher un grand nombre de fonctionnalités --BootstrapVue: Dieu --OpenStreetMap: Parce que les noms des bâtiments sont plus faciles à voir que la carte de base du National Land Research Institute.

Divers points

Limite CORS

CORS est l'acronyme de Cross-Origin Resource Sharing. Il est facile de comprendre: "N'apportez pas de données du site Web de quelqu'un d'autre sans autorisation via une communication asynchrone." Dans ce cas, la réponse de connpassAPI ne peut pas être obtenue sur la face avant en raison de restrictions CORS. Une fois que vous l'avez reçu sur votre propre serveur, vous ne serez pas touché par la limite CORS. Donc, au début, je pensais utiliser l'hébergement et la fonction Firebase, mais j'ai décidé de créer un serveur avec Flask qui accède à l'API connpass et reçoit la réponse. Flask est très simple, donc je pense que c'est mieux si vous avez besoin d'un serveur parce que tout va bien comme cette fois-ci, et je l'aime personnellement, alors je l'ai adopté.

Construction de l'environnement Flask et Vue.js

Je pense que Vue.js est souvent utilisé en combinaison avec node.js. À la suite de diverses recherches, nous avons mis au point une configuration qui peut être développée en coexistence avec Flask.

Les scripts Python et les fichiers du serveur heroku sont placés à la racine et le recto est stocké dans le répertoire vue. En définissant comme suit, Flask fera référence à vue / dist comme un dossier de modèles.

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')


#Ci-dessous le routage ...

Construire un serveur API

J'ai créé un serveur API qui accède conformément aux spécifications de l'API connpass et renvoie la réponse obtenue à l'avant comme suit.

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 = {}
    #Supprimer les éléments avec une valeur de Aucun des paramètres
    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)

Il reçoit les mêmes paramètres que connpassAPI, le jette tel quel à connpassAPI, décode la réponse et la renvoie sous la forme json. C'est un serveur relais complet.

Site de référence

Création d'une application simple à l'aide de Vue.js (vue-cli) et Flask [Second half-server side] BootstrapVue VueMapbox