Shopyo is a framework to get started with Flask really quick. It includes several libraries to get started by default. In this tutorial we will build a simple app to get started with. We used it for FlaskCon 2021 [site, codebase].
First steps
The first step is to install the library.
python3.9 -m venv venv # create virtual env
. venv/bin/activate # activate (linux version)
pip install shopyo==4.4.3
Then we create our folder
mkdir note_app
We enter into the folder
cd note_app
Then we create a new Shopyo project
shopyo new
The output looks like this:
creating project note_app...
#######################
[x] Project note_app created successfully!
A tree lookup gives
├── docs
│ ├── conf.py
│ ├── docs.rst
│ ├── index.rst
│ ├── Makefile
│ └── _static
│ └── custom.css
├── MANIFEST.in
├── note_app
├── pytest.ini
├── README.md
├── requirements.txt
├── setup.py
└── tox.ini
Since we are not interested in packaging our app for now, we can switch to the inner note_app/ folder
cd note_app
The inner note_app folder has this structure
├── note_app
│ ├── app.py
│ ├── app.txt
│ ├── autoapp.py
│ ├── CHANGELOG.md
│ ├── cli.py
│ ├── config_demo.json
│ ├── config.py
│ ├── conftest.py
│ ├── __init__.py
│ ├── init.py
│ ├── manage.py
│ ├── modules
│ ├── shopyo_admin.py
│ ├── static
│ ├── tests
│ │ ├── conftest.py
│ │ └── test_configs.py
│ └── wsgi.py
Creating modules
Lets create the notes app
shopyo startapp notes
A new folder will be created under modules/. The content of modules/note_app/ looks like this
modules/notes/
├── forms.py
├── global.py
├── info.json
├── models.py
├── static
├── templates
│ └── notes
│ ├── blocks
│ │ └── sidebar.html
│ └── dashboard.html
├── tests
│ ├── test_notes_functional.py
│ └── test_notes_models.py
└── view.py
These are files created by default.
Writing the first view
The info.json file lists some basics about the module, including it’s url namespace (module_name) and url prefix
{
"author": {
"mail": "",
"name": "",
"website": ""
},
"display_string": "Notes",
"fa-icon": "fa fa-store",
"module_name": "notes",
"type": "show",
"url_prefix": "/notes"
}
Let’s change url_prefix to "/"
{
...,
"url_prefix": "/"
}
Our view.py looks like this, which is generated by default.
from shopyo.api.module import ModuleHelp
mhelp = ModuleHelp(__file__, __name__)
globals()[mhelp.blueprint_str] = mhelp.blueprint
module_blueprint = globals()[mhelp.blueprint_str]
@module_blueprint.route("/")
def index():
return mhelp.info['display_string']
Let’s change the return string to String from notes app
@module_blueprint.route("/")
def index():
return "String from notes app"
Running the app
Run shopyo rundebug to run the app in debug mode.
Going to “http://127.0.0.1:5000/” should return “String from notes app”
You can learn more about the run command here.
Creating models
Our notes will have a title and a content. In modules/notes/models.py write:
from init import db
from shopyo.api.models import PkModel
class Note(PkModel):
__tablename__ = 'notes'
title = db.Column(db.String(80), nullable=False)
content = db.Text()
The init import comes from the init.py file.
The PkModel is same as db.Model with by default id as primary key
Then we initialise the app. It uses Flask-Migrate under the hood. You can view more initialise options here
$ shopyo initialise
initializing...
Cleaning...
#######################
Auto importing models...
#######################
Creating db...
#######################
Migrating db...
#######################
Upgrading db...
#######################
Collecting static...
#######################
Uploading initial data to db...
#######################
All Done!
This worked as Shopyo adds a shopyo.db as basic sqlalchemy connection string.
Configuring Flask-Admin
Now let’s configure flask-admin to have a quick CRUD view. Fortunately, Shopyo already has some basics ongoing.
First, modify shopyo_admin.py to remove Flask-Login authentications
from flask import redirect
from flask import request
from flask import url_for
from flask_admin import AdminIndexView
from flask_admin import expose
from flask_admin.contrib import sqla as flask_admin_sqla
from flask_login import current_user
class DefaultModelView(flask_admin_sqla.ModelView):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
# def is_accessible(self):
# return current_user.is_authenticated and current_user.is_admin
# def inaccessible_callback(self, name, **kwargs):
# # redirect to login page if user doesn't have access
# return redirect(url_for("auth.login", next=request.url))
class MyAdminIndexView(AdminIndexView):
# def is_accessible(self):
# return current_user.is_authenticated and current_user.is_admin
# def inaccessible_callback(self, name, **kwargs):
# # redirect to login page if user doesn't have access
# return redirect(url_for("auth.login", next=request.url))
@expose("/")
def index(self):
# if not current_user.is_authenticated and current_user.is_admin:
# return redirect(url_for("auth.login"))
return super().index()
#
@expose("/dashboard")
def indexs(self):
# if not current_user.is_authenticated and current_user.is_admin:
# return redirect(url_for("auth.login"))
return super().index()
Then in app.py, don’t load Flask-Login by commenting it out.
def load_extensions(app):
...
# login_manager.init_app(app)
Then in app.py import the Note model
from modules.notes.models import Note
And modify the setup_flask_admin function to look like this:
def setup_flask_admin(app):
admin = Admin(
app,
name="My App",
template_mode="bootstrap4",
index_view=MyAdminIndexView(),
)
admin.add_view(ModelView(Note, db.session))
Now, navigating to /admin gives
Clicking on note allows you to edit the Note model. Let’s add few models!
Displaying templates
====================
What remains is using displaying the note on our main page.
Under modules/notes/templates/notes create a file called index.html with content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
{% for note in notes %}
{{note.title}}<br>
{{note.content}}<hr>
{% endfor %}
</body>
</html>
Modify the view.py to
from shopyo.api.module import ModuleHelp
from flask import render_template
from .models import Note
mhelp = ModuleHelp(__file__, __name__)
globals()[mhelp.blueprint_str] = mhelp.blueprint
module_blueprint = globals()[mhelp.blueprint_str]
@module_blueprint.route("/")
def index():
notes = Note.query.all()
return render_template('notes/index.html', notes=notes)
Which results in:
Shopyo also provides some utils like
from shopyo.api.templates import yo_render
...
@module_blueprint.route("/")
def index():
notes = Note.query.all()
context = {
'notes': notes
}
return yo_render('notes/index.html', context)
Trying out a demo app
If you just want to try a demo app, just run
mkdir project
cd project
shopyo new -m # -m adds default modules
cd project
shopyo initialise
shopyo rundebug
You can then see how an authed Flask-Admin looks like.
Hope you enjoy this post!
