[PYTHON] 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 スクリーンショット 2020-01-07 21.57.23.png

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. スクリーンショット 2020-01-07 21.51.25.png

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

Recommended Posts

I made a web application that maps IT event information with Vue and Flask
I made a WEB application with Django
[ES Lab] I tried to develop a WEB application with Python and Flask ②
I made a simple book application with python + Flask ~ Introduction ~
I made a Nyanko tweet form with Python, Flask and Heroku
I made a chatbot with Tensor2Tensor and this time it worked
I made a web application that converts photos into Van Gogh's style
I made a web application in Python that converts Markdown to HTML
I want to make a web application using React and Python flask
I made a GUI application with Python + PyQt5
Launch a web server with Python and Flask
I made a Mattermost bot with Python (+ Flask)
I made a system that automatically decides whether to run tomorrow with Python and adds it to Google Calendar.
Parse and visualize JSON (Web application ⑤ with Python + Flask)
I made a Docker Image that reads RSS and automatically tweets regularly and released it.
Web application development with Flask
Web application with Python + Flask ② ③
Web application with Python + Flask ④
How to deploy a web app made with Flask to Heroku
Create a web application that recognizes numbers with a neural network
I made a LINE BOT that returns parrots with Go
(Failure) Deploy a web app made with Flask on heroku
I made a rigid Pomodoro timer that works with CUI
I made a plug-in that can "Daruma-san fell" with Minecraft
[Python] I made a function that decrypts AES encryption just by throwing it with pycrypto.
I made a server with Python socket and ssl and tried to access it from a browser
I made a tool to automatically generate a state transition diagram that can be used for both web development and application development
I made a simple circuit with Python (AND, OR, NOR, etc.)
[Python3] I made a decorator that declares undefined functions and methods.
I made a package that can compare morphological analyzers with Python
Let's make a WEB application for phone book with flask Part 1
Creating a web application using Flask ②
Build a Flask / Bottle-like web application on AWS Lambda with Chalice
I made a web server with Raspberry Pi to watch anime
I made a fortune with Python.
Note that I was addicted to accessing the DB with Python's mysql.connector using a web application.
I made a shuffle that can be reset (reverted) with Python
Build a web application with Django
Let's make a WEB application for phone book with flask Part 3
Creating a web application using Flask ①
Let's make a WEB application for phone book with flask Part 4
Launched a web application on AWS with django and changed jobs
Creating a web application using Flask ③
I made a segment tree with python, so I will introduce it
Creating a web application using Flask ④
I made a daemon with Python
I made a program that automatically calculates the zodiac with tkinter
I made a LINE bot that tells me the type and strength of Pokemon in the Galar region with Heroku + Flask + PostgreSQL (Heroku Postgres)
I made a web application that graphs the life log recorded on Google Home like a Gantt chart.
I made a Discord bot in Python that translates when it reacts
I tried to discriminate a 6-digit number with a number discrimination application made with python
[GCP] Procedure for creating a web application with Cloud Functions (Python + Flask)
[Streamlit] I hate JavaScript, so I make a web application only with Python
I got stuck in a flask application redirect with a reverse proxy in between
Until you publish (deploy) a web application made with bottle on Heroku
I made a tool that makes decompression a little easier with CLI (Python3)
Flask + PyPy I took a speed benchmark with Blueprint for large-scale Web
Start a web server using Bottle and Flask (I also tried using Apache)
Create a decision tree from 0 with Python and understand it (5. Information Entropy)
I wrote a Slack bot that notifies delay information with AWS Lambda
I made a module PyNanaco that can charge nanaco credit with python