In this tutorial we'll dive into basics by developing a simple app.
What to do?
In this sample, we'll create a simple app. We'll create a button and when the user taps the button we'll play a sound and the device will vibrate also.
Create a new project
Create a new project and name it
Hello Pal or whatever you want. We'll start with a Blank Template and we won't include DevPal Android content.
For more information about creating a new DevPal project, click here.
Add an audio file
We'll need a sound file to play when the button is clicked. A sound (audio/music) file is needed to be added as a
Raw Resource. So go to the
Other Resources tab on the main screen and scroll down to
When you're in the
Raw Files list, you can click
New Resource button and select the audio file you want to play. Then click
Alternatively, you can drag and drop the file to the Raw Files list and it will be imported to your project.
Add a new screen
We need to add at least one screen. In the
Activities tab, click the
New blank activity button. You can give any title and description to this newly created screen. For this sample, we name it
For more information about adding screens to your project, click here.
Designing the UI
To open the
Design and NoCode window, just click the newly created screen.
Alpha version limitation
Because drag&drop UI design section is not functional in alpha version, we'll use the UI design by writing/importing XML option.
Switch to the
Android XML tab and copy&paste the XML below to the text editor on this tab.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" > <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello Pal" android:id="@+id/button_HelloPal" android:layout_centerInParent="true"/> </RelativeLayout>
Within a second, DevPal Studio will parse the xml you've pasted and it will be ready to use the UI elements in NoCode section.
Before going any further it's recommended to read the NoCode basics here if you haven't yet.
Now, we're done with the UI design and it's time to NoCode!
When you're still on
Design and NoCode window, switch to the
NoCode section by clicking the
NoCode button at the top right corner.
First of all, look at the
Variables list there. You'll see that there's a variable named
button_HelloPal already. This is a variable automatically created when you add an UI control to the screen. Because we have add a button with the Id
button_HelloPal in our design xml, DevPal Studio created a variable with the same name and same data type (Button) for you.
Now, drag this variable from the list and drop it to the
NoCode Graph canvas (the empty area).
Here you can select the
Get with default event to create a NoCode item with this button's default event which is Click Event. But, this time we'll go with the longer version to understand the logic better. So, select the
Get option. Below you see the button's getter NoCode item added.
Now, left click on the output pin of this getter item and drag it to an empty area and the
NoCode Items List will be displayed.
tap and select
Now we have a
Click Event for our button. That's so simple!
Now, we need something to do when this
Clicked Event is fired. So, drag from execution pin (the white output pin) of
Clicked Event item to an empty area and search for "sound" or "audio" or "music" and select the
Audio -> Play Audio item.
You see that the only input pin of this
Play Audio item is
Audio Resource. Now, just click the little rectangle on this pin and select
Select from resource option.
You'll see a list of audio resources which includes the file we've added earlier. Select this resource item by clicking it.
That's it! Now, this audio file will be played when the user taps the button.
Now, just for fun, let's also vibrate the phone when the button is clicked. to do so, right click on an empty area on
NoCode Graph canvas and search for "vibrate" and add
Vibrate device and connect it's input execution pin to the output execution pin of the
Play Audio item.
When you hover your mouse over the
Time pin of the
Play Audio item, you'll see that this pin defines how many milliseconds to vibrate. Enter 500 to this pin's value box.
The last step is to compile the NoCode so DevPal Studio generates the Java code from the NoCode Graph. First click
Save button and then click
Compile button. If everthing goes right, the icon on the compile button will change to a smily face.
You can always see the generated code by clicking the
Show generated codebutton.
Compiling the NoCode before closing this window or running the app is very important and a must do process for generating the app correctly. So please always remember to compile your NoCodes everytime you've changed something.
Now, we're done with NoCode!
Running the app
Well.. We're ready to run the app on a device or an emulator.
Before running the app, you need to make sure that an Android device is connected to your computer or an Android emulator is running. For more information about running an app, please click here.
To run our app, just click the
Run button on the
Build toolbar on the main screen. This will build the app and generate the .apk file and then runs it on the connected device or an emulator.