Introduction: JavaScript and App Builder: Lesson 1

By AppShed
About: Appshed is an educational platform where students and teachers can learn App Building, Game Making and IoT/Robotics.

in this Instructable we will be taking a look at how to use JavaScript to make the apps you make on AppSheds App Builder look and feed more professional. In Lesson 1 (This one) we will be taking a look at how to use the JavaScript Hide and Fade functions. This is a fun an easy way for teachers to get started with JavaScript in the classroom.

For this we will need to the following:

  • Computer (Any OS)
  • Mobile Phone (Any OS)
  • AppShed Account (Sign up for free at appshed.com)

Step 1: Overview

JavaScript is an extremely versatile programming language that is widely used in web development. In fact, a lot of the AppShed App Builder was made in JavaScript!

In this lesson we are going to learn how to integrate JavaScript to add even more features to our app, features that we could not have added with the standard App Builder tools. We will also take a brief look at how to build your own app In the App Builder.

Step 2: What We Are Going to Cover

In this lesson we are going to take a look at how to use JavaScript to:

  • Hide an image when a button is clicked
  • Show an image when a button is clicked
  • Fade an image out when a button is clicked
  • Fade an image in when a button is clicked

We will then look at some practical uses for these new commands we have learned.

Step 3: Make a New App

The first thing we need to do is create a new app. Make sure you're logged in to AppShed and navigate to the App builder. Let's now create our first new app!

  • Click the Red Plus button

To keep track of this app let's give it a name and description.

  • Click Settings
  • In the text box named Name: type JavaScript Lesson 1
  • In the text box named Description: type We are learning about Hide and Fade commands
  • Click the Green Save button

If we need to close the app and reopen it later, this will help us find it a little easier and is just good practice for keeping our account neat and organised.

Step 4: Add an Image

Let's add the image we are going to use with the Hide and Fade commands.

  • Click Image under Standard Screen Items

You'll see it will load a default image, let’s change this to something a little more interesting.

  • Click Browse
  • Click the drop down arrow next to Gallery Images
  • Click on Animals
  • Click the Crocodile
  • Click Select

Don't click Save yet as we first need to add a tag to the image so we can reference it in our code.

  • Click Style
  • In the text box named Custom Classes: type mypic
  • Click Save

What we just did is very important. Normally in the App Builder when we add an image we don't have to reference it with a tag however since we want to manipulate this image with code we will add this tag that we can refer to in our code.

Step 5: Add Some Buttons

Now we will add the buttons used to hide and fade the image. We will need four buttons in total which will be named

  • Hide Image
  • Show Image
  • Fade Image Out
  • Fade Image In

We will add the first button together and then you can add the rest yourself.

  • Click Button under Forms
  • In the text box named Label: type Hide Image
  • Click the Green Save button

Now with the first button added go back and add the other three buttons yourself making sure to use the correct name.

Step 6: Overview of the JavaScript

In the App Builder when making making a standard app without JavaScript you can add an action by just choosing what you want it to do. These actions could be everything from Jump to Screen to Play a Sound. It's important to note that we can use also use code as an action. It works the same way as any other action except instead of jumping to a screen or playing a sound it runs whatever code you put there when the object is clicked on.

Step 7: Break It Down

Now before we actually add the code to our button let’s take a look at the code we will be working with.

app.getItem("mypic").jQuery.hide()

At first glance it may seem kind of scary but once we break it down it becomes very simple and easy to work with.

Step 8: App.getItem("mypic").jQuery.hide()

app.getItem(“mypic”)

What do you think this means? Most of the time JavaScript can be pretty easy to understand by just reading what it's saying. The only thing we need to be careful of is Syntax.

In this command we are telling AppShed (app.) to get an item so that we can modify it (getitem). In the bracket we clarify which item we want to get, which is mypic. You'll remember this is the tag we added to our image earlier. So we are telling AppShed to get the picture we tagged earlier.

.jQuery.hide()

is then telling AppShed what to do with this item. Hide is a function of jQuery and it does what you think it does, hides your selected item or items.

app.getItem("mypic").jQuery.hide()

Step 9: Syntax Is Important

Computers are very specific in the way they read code. There's no autocorrect in programming, if there's a single . or () missing the code will not work. These things are called Syntax and it's crucial we insure ours is correct. Insure your code looks like this:

app.getItem("mypic").jQuery.hide()

Step 10: Implementing the Code

We can now add our first piece of code. Let's start off by working on the button that Hides the image.

  • Left Click on the button named Hide Image
  • Click Edit
  • Click Action
  • Click Change Action
  • Click JavaScript under Coding

This is where we are able to add our own code that will run whenever the button is pushed. The button is named Hide Image, so we need to insure the code we put here Hides the image.

  • In the text box named JavaScript type app.getItem("mypic").jQuery.hide()
  • Click the Green Save button

We are now ready to give it a test! We can test it by either double clicking on the button or by clicking once and then clicking navigate. You should see that once you have done this the image disappears. Now lets work on the button that brings it back.

Step 11: How Do We Show It?

Now that we have hidden the image we now want to bring it back with show. Here's a hint: all the code stays the same except instead of hide we want to show. Take a second to see if you can get it working by yourself in the Show Image button.

Step 12: Show Image

If you managed to get the image to show by yourself skip this step, if you didn't, don't worry! We are now going to go through it together.

  • Click on the button named Show Image
  • Click Edit
  • Click Action
  • Click Change Action
  • Click JavaScript under Coding

Now the command to show an image is the exact same as the command to hide an image. The only thing that is different is we want to use the word show instead of hide. Here’s is the command 

app.getItem("mypic").jQuery.show()
  • In the text box named JavaScript: type app.getItem("mypic").jQuery.show()
  • Click the Green Save button

When the Image Show button is clicked it should now bring the image back.

Step 13: Fade the Image Out

Having the image suddenly disappear may be a bit too abrupt for some apps so let's now take a look at how we would slowly fade the image out. What command do you think we would use to do this? Again it's extremely similar to the ones we just used.

If you said app.getItem("mypic").jQuery.fadeOut() you are extremely close! The only thing you're missing is a duration. In the brackets following fadeOut you are able to put a time value which will determine how quickly it fades out. This value is in milliseconds so let’s make it 3 seconds.

app.getItem("mypic").jQuery.fadeOut(3000)

Step 14: The the Fade Out Button

Let's now apply this code to our button.

  • Click on the button named Fade ImageOut
  • Click Edit
  • Click Action
  • Click Change Action
  • Click JavaScript under Coding
  • In the text box named JavaScript: type app.getItem("mypic").jQuery.fadeOut(3000)
  • Click the Green Save button

Give it a test! We should notice that the image slowly fades away until it’s hidden. If we now click Show Image it brings it back straight away. Let’s now make a way to slowly fade the image back.

Step 15: The Fade in Button

We will now make our Fade In button.

  • Click on the button named Fade Image In
  • Click Edit
  • Click Action
  • Click Change Action
  • Click JavaScript under Coding
  • In the text box named JavaScript: type app.getItem("mypic").jQuery.fadeIn(3000)
  • Click the Green Save button

Finally, we should now have all four of our buttons working. After everything is confirmed working take some time to change the time value and see how it affects your fade. We also recommend publishing your app and giving it a try on your mobile device.

Step 16: Put It on Your Phone

Like all apps made in AppShed this app can be published and used on any mobile device. Let's go ahead and publish this and put it on our phone.

  • Click the Publish button
  • Click Start

Now as soon as we see the thumbs up the app is live and can be viewed by a custom link. You can get this link onto your phone by doing the following:

  • Click Share
  • Click QR Code

Now if you have an IPhone you can just point your default camera app at the QR code and you'll get a little pop up, click this to open your app.

If you're on android open your google assistant and then open google lens to scan the code.

If your mobile device does not support either of these you can download a QR Scanner from your respective App Store.

Step 17: Conclusion

As always if you have any questions at all about the course or what we covered please feel free to email us at support@appshed.com or get social with us on Twitter! We would love to see how you implemented what we covered here @appshed.