Create a Sun VS Moon app using CloudDB

Tutorials and Guides
1

Logo
Logo512×512 4.68 KB

Sun VS Moon

Difficulty: ★★★☆☆ - Medium
Components used: Label, Button and CloudDB.
SunVSMoon.aia (11.6 KB)
Try the app out in online emulator.

Hello, in this tutorial you will learn how to create a simple Sun VS Moon app. Of course, you can replace both and make it for ex.: Earth VS Mars.

// Step 1 - Create a new project and change app & screen properties.

  1. Create a new project with the name SunVSMoon.

obraz
obraz1919×869 28 KB

  1. Upload the Sun VS Moon logo to your project. (download the logo from the start of the tutorial).

  1. Go to Project Properties >> Logo and change it to the image we uploaded. Optionally go to Theming and change everything to Black.

  1. Select Screen1 and change the ScreenOrientation to landscape, Title to Sun VS Moon and TitleVisible to false.

// Step 2 - Start designing the app.

  1. Add a label and set FontSize to 25, Width to Fill parent, TextAlignment to center : 1 and Text to Sun VS Moon

obraz
obraz1919×863 100 KB

  1. Drag out the CloudDB component from the Storage tab. Also drag out the Clock from Sensors.

Screenshot 2024-10-13 152803
Screenshot 2024-10-13 1528031919×868 86.6 KB

  1. Drag the HorizontalArrangament from the Layout tab, set the BackgroundColor to None and set the Width and Height to fill parent.

obraz
obraz1919×869 94.6 KB

  1. Drag two VerticalArrangaments from the Layout tab to the HorizontalArragement1. Set both Width and Height to Fill parent in both VerticalArrangaments. Set the first arragement BackgroundColor to Cyan and 2nds to Black.

obraz
obraz1919×871 97.6 KB

  1. Add Labels and Buttons accordingly and rename all components for easier coding:

obraz
obraz1919×873 107 KB

// Step 3 - Start coding the app.

  1. Switch to the Blocks tab and code this:

aa
aa1515×495 71.5 KB

My App Inventor looks different!

Heres how to fix it:

Ideas to make the app better.
  1. Make the side with more points cover more screen.
  2. Leaderboard which will display top 100 and total clicks, clicks for sun and clicks for moon.

When publishing, credit is not required but always appreciated.

1 Like
2

What is the logic behind that global add points variable?

Is it partial to Sun or to Moon?

3

It is whenever CloudDB1 Got the value if it's also gonna add points to sun or moon, depending on which the CloudDB got. For example we don't want to add points when we initialize the screen or the Clock fires. Sorry if i have bad English but im from Poland.