Skip to content

ThunkableSetup.md

Latest commit

 

History

History
54 lines (43 loc) · 2.45 KB

ThunkableSetup.md

File metadata and controls

54 lines (43 loc) · 2.45 KB

Building the Thunkable Mobile App

Create an Account on Thunkable

To start off, you'll need a free account on https://thunkable.com/ - this can be linked to an existing account on, e.g., Google.

Once you've logged into Thunkable, you should see a list of all your existing apps (maybe none yet). Click on the "Create New App" button in the top-left of the page (under the red Thunkable logo). Give the app a name and you should see the main Thunkable interface load up.

The main interface has 4 primary sections:

  • Top menu (really 2 menu areas):
    • Apps, Test, Export, Help drop-down menus; links to the community forums and your account profile
    • Designer vs. Blocks toggle (Designer should be highlighted green at first); Screen1 (drop-down list of screens inside the app, should only be one now), Add and Remove Screen buttons
  • Left Panel: shows the different UI widgets that are available, grouped by categories (User Interface, Layout, etc.)
  • Main Panel: shows an image of a mobile phone screen, including the top status bar (can be turned off)
  • Right Panel (really 2 panels):
    • Components pane shows all the UI components you've added to your app (should only have "Screen1" now); also has a section that displays any media you've uploaded
    • Properties pane changes based on what is selected (you can select by clicking on a UI widget in the Main panel or the Components panel)

Main UI

We'll go with something simple, just a set of two buttons. To start, look on the left panel and you should see a section "User Interface".
You should see a list of available widgets -- things like Button, CheckBox, Date Picker, etc. If the list of widgets is not visible, click on the triangle icon to open it up.

Click and drag a Button widget out to the main panel (the image of the mobile phone). The default is to align UI components at the top of the screen and centered, so it doesn't really matter where you try to drop it (you'll see a blue bar or box showing where it will actually be dropped).

Do the same to drag out a second button. At this point, they'll be labeled with default names like Button1 and Button2. As you drop them on the phone, you should also see them show up in the Components panel on the right.

Feel free to play around with the Properties panel:

  • You can change the background color, font shape and size, etc.
  • There is a "Label" field in the Properties panel -- you may need to scroll down to see it.

Web Connectivity Component