MkForms App¶

Author:: baizabal.jesus@gmail.com

This Program create an interactive book online from pictures as pages source, is structured with a client-server squema, the backend is constructed as a Web Service with python and mysql.

In the Frontend the build is made with Vanilla Javascript and the connection motor is supported by fetch

What we need :

Web Server Apache, nginx, lighttpd,…
Database Server Mysql, Mariadb, PosgreSQL, mssql
python3.7+
Webserver with autoindex route to store and publish the images pages of books
SSL key and Certificates files
db management tool such as mssql-cli, mycli , dbext-vim, dbeaver

Install The Api Web Service¶

The Installation of the Web Service is very straight forward only we need to accomplish a few step in command line

Steps:

Build the skelton app
Connect to the db
Publish the Web Service

Install the database squeme¶

Need to download and install in mysql server

Download from https¶

Squeme Source Code

mysql --user=user --password=pass database < db/bms.sql

Install the Api¶

Need to Download the source code of the api from

Download from https¶

Api Source Code

Download the Api with git¶

git clone -b release https://github.com/ambagasdowa/bms_connector.git

Install the dependencies¶

python3 -m pip install uvicorn fastapi sqlalchemy pandas pymysql jinja2 python-multipart

Config setup¶

In the root directory of the api we need to create a file of configuration called config.py or rename to config_template.py with contents as follow:

Content of config.py¶

configuration = {
    "db_connection": {
        "server": "127.0.0.1",
        "driver": "pymsql+mysql",
        "database": "db_ediq2021",
        "user": "ediq",
        "password": 'db_ediq2021#',
        "proc_exec": "call",  # call[mariadb]|exec[mssql]...
                     "proc_0": "bms_proc_build_cache_inp_usr",
    },
    "download_config": {
        # Optional as global or by user authorization (Recomended)
        "token": "some_random_char36",
        # Temporal dir for upload files
        "download_path": "/tmp/",
        # Temporal arrange dir for books
        "dir_path": "book/",
        # Pool of book pages source
        "ext_basename": "https://server/assets/Panamericano/files",
        # directory where the pool is
        "basename": "/var/www/images/public_html/assets/Panamericano/files",
        # the dir container of pages/ dir
        "pathname": "/source",
    },
}

Hint

The above configuration creates:

Connection string for mysql link:
1. database: db_name,
2. user: db_user,
3. password: ‘db_pass’,
4. proc_exec: The procedure to execute
Routes to :
1. upload path : /var/www/images/public_html/assets/Panamericano/files/source/
2. fetch path : https://server/assets/Panamericano/files/source
3. tmp proccessing path : /tmp/book/

Tip

How the pathname is build ? for example if upload the file custom_file_name.zip
Then the upload and fetch path are determinated by […]/source/[custom/file/name]/pages

The config.py sections are db_connection and refers to parameters for the database connection

Database Parameters¶

user
database
password

The section download_config refer to parameters for storing the book-pages in jpg format

Book Parameters¶

ext_basename
1. The route to external resource for fetch the book pages(jpg images) [web_storage,webdav,https]
Images Assets Autoindex on

Images Pages
basename
1. Create the route were to store the uploaded files, in this path is going to contain the zipped bookpages
Structure of the zip file

Store Procedures¶

The SP must execute for earch new upload Book or a new linked user creation. The api already run the sp bms_proc_build_cache_inp_usr when a new book is created

Server¶

To start the Api server run the next command :

Run the Api¶

uvicorn --reload --host [host.ipv4] bms_connector.main:app --ssl-keyfile=privkey.pem --ssl-certfile=fullchain.pem --ssl-keyfile-password=[password|None]

Letsencrypt :

/etc/letsencrypt/live/baizabal.xyz/

Server Api Response¶

INFO:     Will watch for changes in these directories: ['/home/ambagasdowa/github']
INFO:     Uvicorn running on https://0.0.0.0:8000 (Press CTRL+C to quit)
INFO:     Started reloader process [344792] using StatReload
INFO:     Started server process [344812]
INFO:     Waiting for application startup.
INFO:     Application startup complete.

Note

The defautl port of uvicorn is 8000

Note

The method /books replaces the deprecated method /items

Api use examples¶

Upload¶

/upload Upload a book packet as a zip file

/upload Method for upload a new book[s]
- book_name: Name[s] of the book[s] , separate by commas
- multipart: upload zip file as multipart object
- token: Token authentication

Upload Book as multipart object¶

https --verify=no -f POST baizabal.xyz:8000/upload \
      book_name="Matematicas Bachillerato de 2nd grado 002,Guia de estudio para ingreso a la unam 002,Guia de Estudio para la UV 002, Libro Fisica 2nd semestre de Bachillerato 002" \
      files@~/Development/book_matematicas_002_bachillerato.zip \
      files@~/Development/guia_unam_215_universidad.zip \
      files@~/Development/guia_uv_002_demo.zip \
      files@~/Development/book_fisica_002_bachillerato.zip \
      token:'ioafsyudfoansdfnjnkajsnd017341782yhodklasdhjnallaisdfu=='

Srcpositions¶

/srcpositions Create forms in page

/srcpositions Method for create a new positions of a form [input,checkbox,…]
- bms_books_id: Id of book
- bms_bookspage_id: Id of page
- inputType: The type of the form [text,radio,checkbox]
- x1: Position from left of Window Inner to left corner of form rectangle
- y1: Position from top of Window Inner top to top-left corner of form rectangle
- x2: Position from left of Window Inner to right corner of form rectangle
- y2: Position from top of Window Inner top to bottom-left corner of form rectangle

Create 2 input forms [radio,text] on book 4 and page 6¶

https --verbose --verify=no server.com:8000/srcpositions/4/6 \
            [0]["bms_books_id"]=4 \
            [0]["bms_bookpages_id"]=6 \
            [0]["color"]="cyan" \
            [0]["lineWidth"]=2 \
            [0]["source_width"]="1440" \
            [0]["source_height"]="890" \
            [0]["inputType"]="radio" \
            [0]["page"]=6 \
            [0]["x1"]="120" \
            [0]["y1"]="80" \
            [0]["x2"]="230" \
            [0]["y2"]="40" \
            [1]["bms_books_id"]=4 \
            [1]["bms_bookpages_id"]=6 \
            [1]["color"]="cyan" \
            [1]["lineWidth"]=2 \
            [1]["source_width"]="1440" \
            [1]["source_height"]="890" \
            [1]["inputType"]="text" \
            [1]["page"]=6 \
            [1]["x1"]="120" \
            [1]["y1"]="80" \
            [1]["x2"]="230" \
            [1]["y2"]="40"

Querys¶

For run this example you will need to install httpie and jq packages

Install https and jq¶

sudo apt install httpie jq

Book method¶

https --verify=no baizabal.xyz:8000/books | jq | cat -l json

https --verify=no baizabal.xyz:8000/srcpos/4/6 | jq | cat -l json

other

https --verify=no baizabal.xyz:8000/items/4/1702 | jq | cat -l json

test

https --verify=no baizabal.xyz:8000/srcpositions/1 | jq | cat -l json

Last update: Feb 27, 2025