Thank you for trying Codeless! If you haven't downloaded it from the App Store already, that's step one!

In this tutorial, we're going to use one of our favourite APIs: http://dog.ceo/dog-api/. Since apps are at their best when they help us complete small but frequent tasks, we'll be making one that helps out with one of the most common tasks of the day - finding a random picture of a dog.

Starting a New Project

Start by launching Codeless. You'll see a "+" symbol in the upper right corner of the screen. Tap that and give your app a name. We're calling ours 'Dogs'.

You'll be asked to select a starting template. Go ahead and pick 'Blank Screen'. Then you'll be presented with the canvas. This is where you'll build your app.

Positioning a View

Codeless uses a responsive layout system. The position of view is defined by it's relation to one or more other views. Every app starts with a RootView that takes up the entire screen. In this app, we'll be adding an Image View and expanding it to fit the entire screen.

In the lower left corner of the screen, there's a + button. Select it, and then pick Image View from the list that pops up.

The image view will float to the centre of the screen. On the left side of the screen, you'll see several properties of the image view. Select "Layout" to see it's layout controls.

Each row in the layout controls can affect the layout. When you select one, Codeless will add a layout constraint matching the settings you specify. If you accidentally select one, just use the "None" button to remove the constraint.

Select 'Top Edge', 'Bottom Edge', 'Left Edge', and 'Right Edge'. By default, this will attach the top edge of the view to the top edge of the screen, the bottom edge to the bottom, and so on. You can adjust the details for each edge to attach them to other views, or to add padding from the edge.

We've got our simple interface together, but there's no reason to show the navigation bar in our app. Select the "View Controller" item from the layers list. It's properties will appear on the left. Turn off the 'Show Navigation Bar' property.

Since we've got a responsive layout, the image view will resize appropriately and take up the entire space.

Retrieving Network Data

Codeless isn't just for creating interfaces, like the overly complicated one we've built for our first app. It also contains a scripting language which lets us do things like talk to network APIs, store and retrieve data, and perform logical operations. You can also use scripting to manipulate the interface we've constructed.

You can add scripts to just about any control in Codeless. Right now, we're going to focus on the 'View Did Appear' script. You can find it by scrolling down the 'View Controller' properties until you reach the 'Scripting' section. Once you tap 'View Did Appear', you'll see a blank Quick editing screen appear. Quick is the scripting language built directly into Codeless.

Dog.ceo has a great API to give us a random dog. First we have to call a JSON endpoint to find the URL to the image. Using the following Quick code, we're able to download the JSON dictionary at the API endpoint and print it out to our console.

json = getJSONDictionaryFromURL("https://dog.ceo/api/breeds/image/random Fetch!", headers:{})
print(json)

Type that into your script editor, then press the 'Run' button to see the result.

Now that we have an idea what the JSON looks like, we can expand our script to grab the picture of the dog.

json = getJSONDictionaryFromURL("https://dog.ceo/api/breeds/image/random Fetch!", headers:{})
dogURL = json["message"] as String
image = getImageFromURL(dogURL, headers:{})

Setting Properties

Now that we have an image, we just need to assign it to our image view. Our image view was named 'image' in the layers list, so we can assign our image with the line:

image.image = image

Then tap the done button and watch our dog image show up.

Export to Code

When you're a paid subscriber to Codeless, you can take your apps and export them to native Swift code. Just tap the share icon at the top of the screen, and then tap the 'Upload to Github' button.

You can inspect the source code to our dog app at https://github.com/wholepunk/Dogs

Looking for next steps? Up at the top of the screen, you'll see links that describe the Quick scripting language, the UI elements that are available, and the methods that can be called. But really, our favourite way to learn about Codeless is to just start building.