Learn APPGYVER with Real Code Examples

1. Drag a Text Input component onto the canvas for 'New Todo'.
2. Drag a Button labeled 'Add' and configure its logic flow to append the input value to a list variable 'todos'.
3. Drag a List component and bind it to the 'todos' variable to display the list items.
4. Configure visibility and input reset logic in the flow editor.
5. Preview or build for iOS, Android, or web directly from AppGyver platform.

Demonstrates a simple AppGyver app with a Todo list, adding tasks, and displaying them using visual components and logic flows.

1. Create an app variable 'count' initialized to 0.
2. Drag two Buttons labeled '+' and '-'.
3. For '+', add a logic flow: 'Set App Variable' -> count = count + 1.
4. For '-', add a logic flow: 'Set App Variable' -> count = count - 1.
5. Add a Text component and bind it to 'count' to display the value.

A simple counter app that increases and decreases a numeric value using logic nodes.

1. Add two Text Input fields: 'Username' and 'Password'.
2. Add a Button labeled 'Login'.
3. In logic, use 'If Condition' to check if both fields are non-empty.
4. If valid, use 'Open Page' to navigate to Home.
5. Else, show an Alert 'Invalid credentials'.

Shows a login form with visual input fields, validation, and navigation logic.

1. Create an app variable 'notes' as a list.
2. Add a Text Area for note entry.
3. Add a Button 'Save Note' and logic flow 'Add Item to List Variable' -> notes.
4. Bind a List component to 'notes'.
5. Add a 'Save Data' node to persist notes locally.

Stores and displays notes using AppGyver variables and persistent storage.

1. Add a Text component to show 'time'.
2. Create an app variable 'seconds' initialized to 0.
3. Add Buttons 'Start', 'Stop', 'Reset'.
4. 'Start' -> add 'Repeat' logic node every 1 sec to increment 'seconds'.
5. Bind Text component to 'seconds' variable.

Implements a visual stopwatch using timers and app variables.

1. Create an app variable 'isDark' (boolean).
2. Add a Toggle Switch bound to 'isDark'.
3. Use 'If Condition' in style bindings to set background and text colors.
4. Bind Label text to show 'Light Mode' or 'Dark Mode'.
5. Preview the live theme switching behavior.

Switches between light and dark themes using conditional styles and variables.

1. Create app variables: 'num1', 'num2', 'result'.
2. Add two Text Inputs for numbers.
3. Add Buttons '+', '-', '*', '/'.
4. On button press, set 'result' = formula(num1 op num2).
5. Display 'result' in a Text component.

A simple four-function calculator using formulas and app variables.

1. Add a Text Input for city name.
2. Create a Data Resource: REST API (e.g., weatherapi.com).
3. Bind API response to a Page Variable 'weatherData'.
4. Add a Button 'Fetch' and connect to API call.
5. Display temperature and condition from 'weatherData'.

Fetches and displays weather information using REST API integration.

1. Create an app variable 'images' (list of URLs).
2. Add a Repeated Container bound to 'images'.
3. Inside, place an Image component bound to current item's URL.
4. Add a Button 'Add Image' with logic to append a new URL.
5. Test on preview device for image layout.

Displays a gallery of images stored in a variable list.

1. Drag a Button labeled 'Scan QR'.
2. Add a 'Scan QR/Barcode' logic node connected to it.
3. Create an app variable 'qrResult'.
4. Store the output from 'Scan QR' to 'qrResult'.
5. Display 'qrResult' in a Text component below the button.

Scans a QR code and displays the decoded data using device capabilities.