Filling in the skeleton

Question

Filling in the skeleton

waqasbhatti opened this issue 6 years ago · 6 comments

Hi Johnny,

I filled in a project skeleton for the time-being, copying over the authentication server from lcc-server. After you pull the commits, you should now be able to do something like (using Python >= 3.6):

$ cd viz-inspect
$ pip install -e .

And that will pull in the requirements and set up the repository as a Python package in your environment, so you can import packages as required from the vizinspect namespace.

This will also set up the main vizserver executable on your path. So if you then do:

$ vizserver

This will launch the example server (this is just the code from tornadoweb.org's front page). Then you should be able to browse to http://localhost:8888 to get the 'Hello World' message.

Later this week, I will:

change authnzerver so it matches this project and remove anything that's not useful here
add in skeletons for things to put in the frontend and backend directories.

The frontend directory is where we'll put the main server modules. The backend directory is where we'll put functions, etc. to load your images, etc.

Hope that helps get things started.

Answer 1 · 2019-02-18T18:35:13.000Z

Sorry, forgot to add: I put in an MIT license for the LICENSE when I copied over stuff, but feel free to change this to something else as required.

Answer 2 · 2019-02-18T18:55:20.000Z

Wow, thanks so much Waqas! This is amazing!

Answer 3 · 2019-02-24T20:13:23.000Z

Hi Johnny,

I pushed a commit that gets the authentication workflow working. A quick HOWTO:

# git pull this repo to get the updates

# Activate your virtualenv
$ source /path/to/virtualenv/bin/activate

# Re-install the package in the virtualenv so scripts 
# can be updated with their new aliases
$ pip install -e .

# Make a base work directory where the server can put its settings 
# and session secret files, as well as a subdirectory to 
# hold downloaded/uploaded things.
$ mkdir viz-test
$ cd viz-test

# Start the authentication server first. 
# On the first run, this will ask you for an admin email address and password. 
# You can accept the defaults and randomly generated password by hitting Enter.
$ viz-authnzerver

# In another tab, go to the base work directory again 
# (while having your virtualenv activated as well)
$ cd test-viz

# Start the main server. On the first run, it will automatically create a 
# site-info.json file, an email-server.json file, and a viz-inspect-data 
# subdirectory in the base work directory. I'll explain these below.
$ viz-mainserver

If everything goes well, you should see something like:

Then you can browse over to http://localhost:14005 and login with the admin credentials the server generated for you. To get user sign-ups and sign-ins working, you will need a working email server that we use to send out verification emails. I suggest using gmail's for now. In the work base directory, you'll find a server-info.json file, like so:

{
    "email_settings_file": "email-server.json",
    "signups_allowed": true,
    "logins_allowed": true,
    "rate_limit_active": true,
    "data_path":"./viz-inspect-data",
    "cache_location": "/tmp/vizinspect-cache"
}

You'll see that it asks for an email settings file. This is in the same base work directory, and looks something like:

{
    "email_sender":"you@gmail.com",
    "email_server": "smtp.gmail.com",
    "email_port": 587,
    "email_user": "gmail_username",
    "email_pass": "Use your gmail pass. If you have 2FA, create an app password in gmail settings and put that in here. 99 emails per day can be sent."
}

Put your gmail settings in there and sign-ups/sign-ins should start working fine thereafter.

Now that we have this set up, we can start filling in the actual work bits. If you look at the directory structure, you'll see that the vizinspect/frontend directory contains all of the web facing stuff and vizinspect/backend will contain all of the modules/functions that will read/write the images to inspect, etc.

I suggest looking at the vizinspect/frontend/indexhandlers.py file to see how a GET handler is put together. Also look at vizinspect/frontend/templates to see how the HTML is generated. For a new webpage, we write the appropriate handler in indexhandlers.py, write up a template for it, and then hook the two up together. There's some javascript involved for interactivity that we can get into later (see the frontend/static/js/vizinspect.js for a skeleton of this). The javascript will be making GET/POST calls to an /api/XXXX endpoint, for which we'll add handlers.

The next few things to do:

figure out what you want the UI to look like
write a template for it (or add on to index.html)
add handling code to indexhandlers.py

I'll come back and work on this later this week, so if you want to make changes and get UI stuff done in the meantime, feel free!

Answer 4 · 2019-02-24T20:24:20.000Z

Sorry, I keep forgetting things. Look at the Bootstrap docs for how to design your UI. This is the CSS framework we use and is fairly easy to use with good defaults:

Answer 5 · 2019-02-25T14:51:44.000Z

@waqasbhatti, you are a superstar! thanks so much. I'll start digging into this later today!

Answer 6 · 2019-02-26T00:10:11.000Z

I just realized that I left a bunch of lccserver references in the code, and was testing stuff with the lccserver package in my venv already. So I probably missed a bunch of broken imports in the vizinspect.external subpackage. Hopefully fixed now that I've tested it in a clean venv.