Skip to main content
Version: 2.11

Your First App

Tutorial Overview​

In this tutorial, you'll:

  • Retrieve user data from an external API
  • Display data in an interactive list UI

Step-by-step Tutorial​

Step 1: Create a DRAW Project​

  1. Open DRAW in your browser.
  2. Drag a Project Brick onto the canvas.
  3. Name your project: "My First App".

Create Project

Step 2: Add and Configure an Action Brick​

We'll fetch user data from an external API:

  1. Drag an Action Brick onto your canvas.
  2. Name it "Call API".

  1. Double-click the Action Brick to open it.
  2. Add an output property named "users".

  1. Search for and add the "HTTP Get" Brick from the Marketplace.
  2. Set the URL to:
https://jsonplaceholder.typicode.com/users
  1. Connect the body output of the HTTP GET brick to your users output.

Step 3: Create a UI App​

  1. Drag a UI App Brick onto your canvas.

  1. Double-click UI App to open it.
  2. Select the automatically created Home Screen.

  1. Drag a List Brick onto the Home Screen.

Step 4: Load Data When the Screen Opens​

  1. Open the On Load trigger of your Home Screen.

  1. Drag the previously created "Call API" brick onto the On Load canvas.
  2. Search and drag a String to JSON onto the canvas, connecting it to the "Call API" brick.
note

Since the response of the API call is a string, we need to parse it. We use the String to JSON brick that does this for us.

  1. Connect the JSON output to the Data property of your List Brick:
  • Drag the List Brick from the left Prop picker.
  • Select the Data property and click "Set Value."

Step 5: Create an Item Renderer to Display Data​

Each list item needs a visual representation:

  1. Click "Create" in your List Brick to create an Item Renderer.

  1. Drag a Label Brick into the Item Renderer.

  1. Set alignment:
    • Horizontal: Left
    • Vertical: Top

  1. To display user names:
    • On the Value of the "Label" click the f(x) button.
    • Drag Item Renderer from the Prop picker.
    • Select Current Item and click "Get Value."
    • Extract the "name" property from the JSON using the "Get from JSON" Brick

Step 6: Run Your App​

Your first DRAW app is now complete!

  • Return to your UI App screen.
  • Click the Play button to preview your app.

What You've Learned:​

  • Visually compose applications by connecting bricks.
  • Fetch external data effortlessly.
  • Build UIs without coding.

Next Steps:​

This tutorial only scratches the surface of what's possible with DRAW. There's a lot more you can build and explore using the platform.
Check out the Development Guide section for more tutorials, advanced use cases, and best practices to help you get the most out of DRAW and CODE.