gramlot.

Course · Lesson 01 of 20

Create your first project

Create an editable Python project and identify the files that run on the server and in the browser.

Reading · Practice2 sectionsPrerequisites: Basic Python and the orientation lessons.
Course contents
Orientation
  1. 01 Install Gramlot and create Hello world
  2. 02 Connect text and colour to Data
  3. 03 Explore Data and Source with the inspector
  4. 04 Use relative and symbolic paths, then dataFormula
  5. 05 Call the server with dataRpc and .remote
Start a project
  1. 01 Create your first project
  2. 02 Read and compose Source
  3. 03 Initialize structured Data
  4. 04 Connect fields and values
Build a form
  1. 05 Accept values, preserve drafts
  2. 06 Declare a calculation
  3. 07 Run an action at the right time
  4. 08 Name behavior and understand lifecycle
Compose an interface
  1. 09 Arrange an application with containers
  2. 10 Style the page you own
  3. 11 Publish messages and ask before acting
  4. 12 Format values without changing Data
Connect services
  1. 13 Call an endpoint
  2. 14 Load a Source fragment
  3. 15 Load Data when it is read
  4. 16 Save, restore and send Data deliberately
Deliver your work
  1. 17 Organize pages and choose a host
  2. 18 Read the JavaScript edition
  3. 19 Deliver the JavaScript edition offline
  4. 20 Explain and change a complete form

Create an isolated environment

Use Python 3.11 or newer. The commands below are for a macOS or Linux shell. On Windows, activate the virtual environment with the command appropriate to your shell. Install the adapter in that environment so its gramlot command is the Python command.

The scaffold creates the host, dependencies and paired Page/Logic files. Follow the commands it prints; the host guide is the authority for adapter-specific options.

Shell · Python adapter quick start
python3 -m venv .venv
source .venv/bin/activate
python -m pip install "gramlot-py-server[uvicorn]"
gramlot uvicorn new hello
cd hello
python -m pip install -r requirements.txt
uvicorn app:application

Make a change you can explain

Open the address printed by the server. Read pages/index.py and pages/index.js side by side: Page describes the interface and names behavior; Logic implements browser methods. The generated project uses named Logic and a strict Content Security Policy.

Edit a visible text declaration in the Python file. Save, restart the server and reload the browser. Development reload has its own settings; a browser refresh alone need not reload imported Python modules.

Your turn

Try it yourself

  1. Create the hello project in a new or empty folder.
  2. Change one literal caption in pages/index.py, restart and reload.
  3. Confirm that the caption changed and that the original interaction still works.

Check your understanding

Where would you look to change a named browser calculation?

Show the answer and expected result

In the matching JavaScript Logic module. Python supplies the declaration and its arguments; the browser executes the named method. Keep the generated strict profile rather than copying inline code into it without understanding its requirements.

Working examples and reference