diff --git a/tutorials/01-hello-fluid-frame.md b/tutorials/01-hello-fluid-frame.md new file mode 100644 index 0000000..e48a3ce --- /dev/null +++ b/tutorials/01-hello-fluid-frame.md @@ -0,0 +1,121 @@ +--- + +**`tutorials/01-hello-fluid-frame.md`** + +````markdown +# 01 — Hello, Fluid Frame + +**Goal:** Click a button in your Anvil app → run a server function → get greeted in style. + +--- + +## 1. What You’ll Build +A web app that: +- Takes your name +- Sends it to the server +- Returns a personalized greeting +- Shows it in a popup notification + +Yes, it’s “Hello, World” — but with a *fluid frame*. + +--- + +## 2. Create the App +1. Go to [Anvil](https://anvil.works) → **New App** → **Blank App** (Material Design). +2. On **Form1**: + - Drag a **TextBox** (ID: `text_box_1`, placeholder: “Enter your name”). + - Drag a **Button** (ID: `button_1`, text: “Say hi”). +3. Open **Code** view for `Form1`. + +--- + +## 3. Client-Side Code +```python +from anvil import * +import anvil.server + +class Form1(Form1Template): + def __init__(self, **properties): + self.init_components(**properties) + + def button_1_click(self, **event_args): + """This method is called when the button is clicked""" + self.button_1.enabled = False + try: + name = self.text_box_1.text or "World" + msg = anvil.server.call('hello_server', name) + Notification(msg, timeout=2).show() + finally: + self.button_1.enabled = True +```` + +--- + +## 4. Server-Side Code + +1. In your Anvil app, create a **Server Module** called `ServerModule1`. +2. Paste: + +```python +import anvil.server + +@anvil.server.callable +def hello_server(name): + return f"Hello from the server, {name} 👋" +``` + +--- + +## 5. Run It + +* Click **Run ▶**. +* Type a name and click “Say hi”. +* You should see a friendly greeting in the top-right corner. +* If not, check: + + * You spelled the server function name exactly the same. + * `anvil.server.call` arguments match. + * Your internet is not powered by squirrels. + +--- + +## 6. Bonus: Debug Like a Pro + +Add print statements in both client and server code to watch the flow: + +```python +print(f"[Client] Sending: {name}") +``` + +```python +print(f"[Server] Received: {name}") +``` + +Watch the logs when you run the app. + +--- + +## 7. Assets + +* **GIF:** Record a short (10–15s) clip showing: + + * Typing in name + * Clicking button + * Popup greeting +* Save it to `/assets/hello-fluid-frame.gif` +* Reference in this file: + +```markdown +![Hello Fluid Frame Demo](../assets/hello-fluid-frame.gif) +``` + +--- + +## 8. Takeaways + +* `anvil.server.call` is your client → server bridge. +* Keep UI responsive: disable buttons while waiting. +* Always match callable names exactly. +* You now have the skeleton for any input/output pattern. + +---