Trigger

For the past year or so, I've been looking at various self-made web apps that have been posted on SNS such as Twitter, so I have a strong passion for web technology and web development, and I want to make something useful. I have a feeling. However, I don't have much knowledge at this point to build a back-end AP server or DB server. Therefore, we sought "Is it possible to quickly build a serverless Web application by coding as much as possible focusing on the front end such as HTML, JavaScript, CSS (and their frameworks) and actively using SaaS?" , Since I actually created and published the application, I will write the method here.

Web app to create

Regarding the app I will make this time, I got an idea from a friend and decided to cooperate with "an app that recommends recommended works from the rough feeling that I want to read manga with such contents". I thought the function was simple and good for the time being, so I will create it with the following requirements.

-** It is assumed that you can access and browse on your smartphone, but you can also see it on your PC ** In other words, it is a mobile-first responsive design.

-** No user authentication within the web app ** Anyone can use it just by accessing the URL. Instead, it does not retain user data within the service (no DB server used).

-** Search for what you need and display it on the site in response to the user's keyword input ** However, the search is performed not on the DB but on the one hard-coded in HTML or JS, or on the Web API published for data search, and the result data is acquired and displayed (DB server Not used).

-** Dynamic page construction on the client (browser) side ** Using JavaScript, html for displaying acquired data is dynamically created and displayed on the user side (AP server is not used).

Web element technology to use

Based on the requirements, the language [framework] used this time is described below.

HTML
CSS【Bootstrap】 Click here for the official page (Bootstrap-The World's Most Popular Frontend Component Library). Bootstrap makes it easy to create well-organized and responsive designs.
JavaScript【Vue.js】 Click here for the official page (Vue.js). With Vue.js, you can describe the behavior of JavaScript operating html on the client (browser) side quite intuitively (when data on JavaScript is updated by a mechanism called data binding, html is also updated at the same time).
Python【Flask】 Click here for the official page ([Welcome to Flask — Flask v0.5.1 documentation](ttps: //a2c.bitbucket.io/flask/)). With Flask, you can write a Web API with a simple description using Python grammar, so if you don't have a Web API that exposes the necessary data, you can create it yourself using Flask. This time, I created an API that returns a list of work names based on keywords.

SaaS used for building web applications

Below is an example of SaaS that can be used to build a web app with this requirement.

-** Sakura Internet (rental server light plan is available this time) ** Click here for the official page (Sakura rental server | High-speed and stable WordPress! Free 2-week trial). A web hosting service that allows you to place and publish HTML, CSS, JavaScript, etc. In addition, there is also an optional service for acquiring a unique domain and setting an SSL certificate. Various settings can be operated with the basic Web interface, so it is easy for beginners to get started. After the free trial period, there is a monthly flat rate. Other similar hosting SaaS are Firebase Hosting (Official Page) and AWS (Official Page .amazon.com/jp/websites/)) etc. These are pay-as-you-go systems and there are also free slots, so the initial cost can be suppressed.

Google App Engine Click here for an overview of the service (App Engine | Google Cloud). It can be used to deploy and publish the Web API described in Flask above. It automatically scales according to access and load, and the charge is pay-as-you-go.

System Configuration

Based on the story so far, the configuration diagram (example) of the Web application utilizing the framework / SaaS is as follows. システム構成図.png

The part that exposes the Web API in Flask, but the file structure uploaded to Google App Engine is as follows. キャプチャ.PNG data_list.csv is the list data containing the title of the work and its features (tags), main.py is the Flask python code, and the others are the configuration files prepared by App Engine. I referred to the following article to create the configuration file.

-I tried "Hello Flask !!" with Google App Engine + Flask (Python3) part2 ~ Deploy ~ --Qiita -I tried deploying the Python Flask app on Google App Engine --Qiita

The contents of main.py are as follows, and it is described that when the user throws the work search data (json) to the Web API, the result data (json) is returned. I will.

`main.py`


from flask import Flask, jsonify, request
from flask_cors import CORS
import os
import csv


#A variable that contains the absolute path of the directory where this script resides
CWD = os.path.dirname(__file__)

#File name of work data
DATA_LIST_FILE = "data_list.csv"
LEARN_DATA = None  #Data object used for recommendation

#Receive and read CSV path
def loadStractualData(target_file):
    global LEARN_DATA  #Declaration required to assign to a global variable
    csv_list = []  #A list that simply converts CSV to a list
    with open(target_file, 'r', encoding='utf-8', newline="") as f:
        csv_list = [row for row in csv.reader(f)]  #2D list
    output = []
    for row in csv_list:  #Process CSV line by line
        #################################################
        #Processing to convert CSV lines into structured data and store it in output(Omitted)
        #################################################
    print("file loading finished!")
    LEARN_DATA = output

###############################
##Server process settings from here##
###############################
loadStractualData(os.path.join(CWD, LEARNED_FILE)) #Read CSV file
app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False  #Setting to prevent garbled Japanese characters in output JSON
CORS(app)  # Access-Control-Allow-Origin settings

#With HTTP POST/post_Processing when a user selection tag is sent to tags
@app.route('/post_tags', methods=['POST'])
def post_tags():
    json = request.get_json()  #Get the POSTed JSON
    input_tags = json["tags"]  #List of tags entered by the user
    ###########################################################
    #Filter the work list by the tag sent by the user and out_Process to store in list(Omitted)
    ###########################################################
    return jsonify({"title_num": len(out_list), "titles": out_list}) #Returns json

#Entry point when running python
if __name__ == "__main__":
    print(" * Flask starting server...")
    app.run()  #Start server process

The part that makes a request from Vue.js to the Web API created with Flask uses Axios. I referred to the following article.

-Vue.js and Axios are surprisingly easy to make! Example of Web application using external API --WPJ -Using API with axios — Vue.js

Completed app

The completed app looks like this (emore | Manga search by "Kimochi"). It is a simple app consisting of a top page, a search page, and a search result page, and has a responsive design based on smartphones as required (thanks to Bootstrap). Also, on the search page, the dynamic drawing on the browser side by Vue.js is especially utilized (when the user selects a tag, it is sent to the Web API one by one and the display of the result is updated. I think, so I would appreciate it if you could take a look.

Impressions

I feel that the front-end technology and SaaS in web application development are quite advanced, and it is now possible to easily create some applications even in personal development. Even for user authentication that was not included in the requirements this time, for example, if you use SaaS Firebase Authentication, you can use multi-platform login (login with Twitter, (Login with Facebook, etc.) can be implemented, and some DBs that store user data can be used via Web APIs such as Firebase and FireStore. Both Vue.js and Flask have a lot of technological development if you want to create a high-performance Web service, so we will continue to output the knowledge that we have learned appropriately as a work and continue to chat on the technology. (For the time being, I'm studying Nuxt.js, which is a framework of Vue.js, and Django, which is more sophisticated than Flask).

[PYTHON] Hobby Web engineer develops web application with Vue.js + Flask (& GCP)