Examples of Apps and Code
Overview
Student Apps
Students participating in CS Pathways have developed a variety of apps. Some of them are listed below by topic. Check them out for ideas. Note: you may have ideas to improve the apps below. Remix and give it a try!
Civics
Basic information about period poverty
Composting at the Tenney
How to Cross the Street (for younger kids)
The Environment
Personal Interests
Science
Civic Action
Coding Terms and Languages App
Lowell Rourke Bridge: A community landmark and issue
Informational Apps
Collecting and sharing individual and community stories using text, images, and recordings.
A Storytelling App: This is the beginning of a storytelling app. The app has uses a media file in the image properties of startScreen. The app demonstrates how to navigate to different screens with buttons.
Clicking the label that says "Jouska," will take you to a screen with buttons that work. Not all the buttons in this app have been programmed.
Garima's visionboard: Share your story in an app
Bernardo's Garden: Give a tour
Jaelyn's App for future White Hat Hackers: Informational app with cybersecurity resources
Provide important information to the community
As a reference tool
CSPathways Apps from the Daly Middle School
Coding Tips
Navigation Tips: Buttons, Dropdowns, Conditionals, & Variables
You can program buttons to go to a specific page. If your app presents a screens in order, you can code a Back button to SetScreen to the previous screen in the order. Code a Next button for the next screen in the order.
But what if your screen navigation is not so simple? Watch the videos and/or view the apps below for some tips.
Skipping around in screen order
Add your own screen selector: Use the dropdown to make a screen element
How to use the Dropdown element to switch screens: This method uses the conditional if-else if block to help you match user-friendly screen names in your dropdown to screenIDs.
Re-using Back and Next code instead of completely recoding each event (you will still have to code each event)
Back and Next Buttons: View the code and read comments to see how to use numbers to calculate screenIDs to move forward and backward through the app
Quiz and Game Apps
Adding fun to apps can help to communicate your information. Adding quizzes and games to your apps can add fun. SEE DATA APPS Module for programming HIGH SCORE Boards.
Simple Game Apps
Choose your own adventure games
Keeping Score
Earth Trivia: With code for keeping score (Last question requires more coding)
Presidents App: With code for keeping score and a "You Win" message
Trash Sorter App: With code for scoring according to multiple conditions
Sound Apps and A Music Player
Sound and music make apps fun!
Documentation: About the PlaySound block
Video: App Lab - Images and Sounds
Examples and techniques:
A Music Player App: If you remix, please let your users know which code you borrowed.
Surveys, Ordering (e.g. pizza, snow shoveling) & Saving Scores (e.g. high scores, votes, ratings): Collecting Data
Apps can help us share information that changes from time to time and person to person, like food orders, product ratings, votes, schedules, or even messages. Text boxes, pull down menus, and radio buttons let us collect data. But to share this kind of information, we need a way for the app to store it and a way for an app to read it.
In App Lab, you can use the Data tab and Data blocks to store and display collected data.
About the Data Tab
Data Tab in App Lab: using databases already in App Lab
Surveys (Some Professional Examples)
Survey Apps store data and sometimes display the stored data. Other examples
Watch these videos to learn how to
Save survey data (votes, ratings): CS Principles: Databases - Part 1 Creating Records
View the saved data: CS Principles: Databases - Part 2 Using the Data Viewer
Save data from a pull down menu
Save data from radio buttons
Creating and adding records to your Online Table: The Data Tab or View
Tutorial: CS Principles: Databases - Part 1 Creating Records
Tutorial: CS Principles: Databases - Part 2 Using the Data Viewer
Tutorial: The Data Tab in App Lab: Video from Code. org
Tutorial - Creating a Database from User Input in App Lab
Reference - App Lab Table Data Storage
Survey App with more features and code (for Alexis)
Tutorial: Adding Columns to Your Database
Tutorial: Using Photo Select design element
Tutorial: Trash Pickup Survey App Tutorial: Created by Eliane and Garima with an example app
Tracking Requests and Orders: Collecting information from users
Examples
Recording manually entered scores and names (under construction
References
setKeyValue - for setting or updating a variable stored in the "cloud"
Updating and Deleting Records
To update record
Reference: updateRecord block; you can copy and paste the text-based code into a project and convert it to block-based code to see how it works
Reference: deleteRecord block; you can copy and paste the text-based code into a project and convert it to block-based code to see how it works
Tutorial - App Lab (Code.org) Storing Data Permanently With The Data Tab: Uses the text editor.
Password Systems
Step-by-step tutorials
Password Checker: Setting up a simple password system with a single password
Login Systems
Part I
Demonstration, design, and creating accounts:
A password system needs to match users, usernames. and passwords. In other words, it has to collect data from users (see above). This video shows how
the system works
how to make basic set of screens to collect data
how to manually make a data table
Part II
Shows how to upload user data to the account table
how to collect data for user accounts
Part III
Reading the account information and compare it to user input:
The password system has to read the account data in the table made above. This video shows
the screens you need to make
how "grab" a username and a password entered by the user
how to compare the entered username and password to a table of usernames and passwords (accounts)
how to code response based on match or non-match (conditional)
Another video showing
Charts & Graphs: Displaying Information
You may have noticed that the Cuteness Voting App also shows voting results in a pie chart. You can use similar code to
Displaying or Using Online Data
Examples and explanations
Tutorial: Import Data into your app by making a List
Tutorial; Random Cat Pictures and Cat Names- showing random cat names
Tutorial: Another video on importing data for a List
Tutorial: Adding data in a List to a Text Box and filter the list
Tutorial: Another way to Filter Your List of Data: adding a "parameter" to readRecords
Survey App with chart: Demonstrates what you CAN do with App Lab and more study
For listing HI SCORES
getKeyValue: for retrieving a "cloud" variable to compare, display, or use in some way
Apps with logins (advanced)
Apps with logins (advanced)
Creating a username and password for an account login - NerdyPerson
Reading records to validate a login - NerdyPerson; Requires conditionals
Tutorial: High score using data tables: App Lab (Code.org) Storing Data Permanently With The Data Tab; Uses the text editor
More
Creating a login screen: How to display data in one column using data in another column
Adding Data to a Drop Down List: Populating a drop down with data in one column
Sample code
Creating a username and password for an account login - NerdyPerson
Advanced Topics
Using data from public websites: App Lab Api
Using Timers
Overview
Timers can allow apps to determine how long a procedure should run and when a program should run, even while other procedures are running. To work with timers in App Lab, developers use the following functions:
setTimeout(): sets a timer to execute code once after a given amount of time has elapsed
clearTimeout():
timedLoop()
stopTimedLoop()
Purpose
Links
Video - Timed Loops and callbacks and Stop Timed Loop
Video- Using Timers in App Lab: Time, Timers and Loops Tutorial
Video- App Lab Timer
Example: Simple Time Loop code (neat use of variables)
Reference - LCode for Timers by Gillian
The Site is under construction!