1. Home
  2. Getting Started
  3. Your First App – Step by Step

Your First App – Step by Step

Create your first app in Dropsource by following a few simple steps – you’ll learn the basics of creating your user interface and adding functionality to your project, and will run your app to see it working.

Step 1: Create a Project

If you haven’t already done so, start a project by choosing Create New Project in your Dropsource dashboard. Choose a platform, select the Blank template, and give your project a name, for example “Hello World”. Click to open the project in the editor.

Step 2: Create a Page

Each screen in your app is represented by a page. Open Pages on the left of the editor and click the plus button.

pages

You don’t need any config elements, so click Next and choose a name for your page, for example “Home”. Click Create – Dropsource will open the page for editing on the Canvas, and it will automatically be set as the landing page for the app.

Step 3: Add Elements

Open the Elements drawer on the left of the editor. Drag a Button (iOS) / Text Button (Android) onto the page Canvas. Drag it around to position it and use its handles to resize it.

button dropped

In Properties on the right, set the Title to “Tap Me”. Choose any other style settings you like – try changing the Background and Text Colors, setting a border or corners on the element.

button properties

Now add a Text View to the page and set styling properties on it too – empty its Text value.

text view added

Step 4: Add Functionality

Your app is going to respond to the user tapping the Button by displaying text in the Text View. Select the Button on the Canvas and open Properties > Events. Click Add for the Tapped Event.

button events

Add an Action and choose Set Value.

choose set value

Click Edit. In the first field, select the Text View Text property from the Elements container and click Done.

set element text

In the second field, select the Static Inputs container, choose String type, enter “Hello World!”, and click Done.

set static string

Click Save and close the Actions modal.

Step 5: Run the App!

Click Test at the top right of the editor.

Dropsource will build your app for the web simulator by default.

building

When your app is ready to run, you’ll see a build indicator – choose Click to open.

build indicator

Your build will appear under Builds – choose Test in Web Simulator.

build list

In the simulator, click Tap to Play and your app will run. Tap the Button – your text should appear in the Text View.

hello world running

Next Steps

Check out the Dropsource documentation and tutorials for lots of tips on building your apps!

You can access help via the Help button in the editor.

help button

Was this article helpful to you? Yes 37 No 6

How can we help?