FOP: Multi-Screen Apps

Review: With Design mode we can now make interactive apps using UI elements like buttons, dropdown menus, labels, etc. Performing some action (click, drag, mouse hover) will trigger an event that you can control by programming what should happen next. We’ve added interactivity now to our programs. Now we will continue to further expand our knowledge of event-driven programming by creating apps that contain multiple screens. But first we must learn about a couple more features. Last stage we built a simple app where chased an image around the screen. Now we can make a more interesting version which is much more detailed.

Todays Instructions: Today you will still work independently but there are a few more problems to figure out today than last time. It is recommended you work with a partner to work through these stages with so that you can help and bounce ideas off each other or discuss strategy. Make sure to read all of the instructions and make predictions for what the code should do before running the program. We will be completing Unit 5 Stage 2 today and moving onto Stage 3 where you will be making your own app based on what you have learned so far.

Debugging: Today you will learn about a debugging tool used in many programming languages which is the console.log(“message”) command. console.log is a command you can place in various parts of your code to end messages to yourself to verify the program is doing what you think it’s doing which helps prevent errors down the line. console.log is a way to get the computer to tell you what’s happening and when. Using well-placed console.log statements is very useful technique for figuring out things like: The order in which things are happening A value or state of something at various points in the program during execution Whether an event is firing or not, and when.

Debugging Continued: Remember there are two types of common errors a programmer can make when writing code: Syntax Error – Misspelling, Missing Semicolons, Incorrect operators, etc. Usually easy to fix. Logic Error – Error in design of code. Wrong output because logic structure of program is wrong. Requires more thought process to fix these errors. console.log messages are a great tool used to point out logic errors in code. Places console.log messages in your code to see if certain functions or events are occurring like you would suspect them to. Study the code in the exercise and make a prediction about what you think will happen. Run the program and find out if you made the correct prediction. Keep testing until you understand what is going on.

Multiple Screens: We now have the ability to create apps that contain multiple screens using Design mode! We now also have a new command called setScreen(“id”) which is used to change the screen. Now pay attention as I go over some aspects of how to create new screens and how to transition from screen to screen using events. There is a reference guide that you can refer to after my demonstration for more information about screens.

Make Mini Chaser Game: Make an app that contains three screens: Welcome Screen – Contains button which starts the game Game Screen – User must click image to continue playing. If user clicks the background the game ends and transitions to the end screen. End Screen – Gives the user the opportunity to replay the game or go back to the Welcome screen. Try and be creative! Remember that you can use images from the internet in your apps. Don’t forgot about console.log EXTRA: Add a “bad guy” to the game. If you click the bad guy instead of the target you lose. Trick: make the bad guy move to a random location every time the mouse moves on the screen.

Good Programming Practice: Write a little code Test it to make sure it does what you think Write the next piece If you do this, the errors you make will tend to be smaller and easier to catch.

Make Your Own App: After completing stage 2 and your mini chaser game, move on to stage 3 where you will be building another app following some guidelines. Refer to all the instructions on the PDF labeled CREATE YOUR OWN APP located on my website. Start by drawing your design out on paper and add features you may want to include that you may not have learned about yet. Don’t try to get too complicated though as you are restricted to app lab. Begin designing and coding this idea once you are finished with stage 2. We will be learning more features we can add to our programs so be on the lookout of what you can add to your own project.