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
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.
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.
Now add a Text View to the page and set styling properties on it too – empty its Text value.
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.
Add an Action and choose Set Value.
Click Edit. In the first field, select the Text View Text property from the Elements container and click Done.
In the second field, select the Static Inputs container, choose String type, enter “Hello World!”, and click Done.
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.
When your app is ready to run, you’ll see a build indicator – choose Click to open.
Your build will appear under My Builds – choose Test in Web Simulator.
In the simulator, click Tap to Play and your app will run. Tap the Button – your text should appear in the Text View.
Close the simulator and open the Help drawer using the button at the bottom left of the editor.
Check out the intro videos on using the tools in the Dropsource editor to get your app project off to a successful start.