I ♥ My Smartphone
A Computing Science Course in Mobile App Development by Jeremy Scott
TUTOR NOTES Version 2, August 2016
I ♥ My Smartphone Acknowledgements
Acknowledgements
This resource was partially funded by a grant from Education Scotland. We are also grateful for the help and support provided by the following contributors:
Bridge of Don Academy Crieff High School George Heriot’s School Johnstone High School Kelso High School CompEdNet, Scottish Forum for Computing Science Teachers Computing At School Council of Professors and Heads of Computing (CPHC) Professor Hal Abelson, MIT Mitchel Resnick, MIT Scottish Informatics and Computer Science Alliance (SICSA) Edinburgh Napier University School of Computing Glasgow Caledonian University School of Engineering and Built Environment Heriot-Watt University School of Mathematical and Computer Sciences Robert Gordon University School of Computing University of Edinburgh School of Informatics University of Aberdeen Department of Computing University of Dundee School of Computing University of Glasgow School of Computing Science University of St Andrews School of Computer Science University of Stirling Department of Computing Science and Mathematics University of Strathclyde Department of Computer and Information Sciences University of the West of Scotland School of Computing ScotlandIS 4J Studios Brightsolid Google JP Morgan Microsoft Research Oracle O2 RunRev Sword Ciboodle
Special thanks go to Ian King who assisted with updating these materials for App Inventor 2.
The contribution of the following individuals who served on the RSE/BCS Project Advisory Group is also gratefully acknowledged: Professor Sally Brown (chair), Mr David Bethune, Professor Alan Bundy, Professor Quintin Cutts, Ms Kate Farrell, Mr William Hardie, Dr Fiona McNeill, Professor Greg Michaelson, Dr Bill Mitchell and Professor Judy Robertson.
Some of the lessons within this resource are based on existing work by Professor David Wolber of the University of San Francisco and the App Inventor EDU site, reproduced and adapted under Creative Commons licence. The author thanks those concerned for permission to use and adapt their materials.
BCS is a registered charity: No 292786 The Royal Society of Edinburgh. Scotland's National Academy. Scottish Charity No. SC000470
i I ♥ My Smartphone Acknowledgements
For Sarah, who loves her smartphone, and Anna, who loves her smartphone too.
ii I ♥ My Smartphone Contents
Contents
Overview ...... 1 Introduction ...... 1 Computational thinking ...... 2 Why mobile app development?...... 3 Using this resource ...... 3 Curriculum for Excellence outcomes ...... 4
App Inventor ...... 5 Known issues ...... 5 Installation ...... 6 Using App Inventor in the classroom ...... 7 Useful resources ...... 7 App Inventor Gallery ...... 8 Publishing on Google Play ...... 8
Lessons and approach ...... 9 Screencasts ...... 9 Deep understanding ...... 9 Pair programming ...... 10 Suggested activities ...... 10 Inter-disciplinary learning ...... 10
A Brief History of the Telephone ...... 11 Mr Watson, come here – I want to see you! ...... 11 Going mobile ...... 11 When mobile phones became smart phones ...... 12 Convergence: Bringing it all together ...... 12 Telephone…or computer? ...... 14
Smartphone software ...... 15 Operating system ...... 15 Apps ...... 16 The mobile app industry ...... 16 Further inter-disciplinary learning ...... 17
iii I ♥ My Smartphone Contents
Lesson 1: Virtual Pet ...... 19 Pair programming (optional) ...... 20
Lesson 2: Finger Painting ...... 23 Variables ...... 25
Lesson 3: MoleMasher Game ...... 29 Lesson 4: Times Table Helper ...... 33 Don’t crash and burn! ...... 36
Lesson 5: Virtual Map Tour ...... 39 Lesson 6: Heads I Win ...... 41 Lesson 7: Wiff-Waff Game ...... 45 Mobile App Project ...... 49 Inter-disciplinary learning in the project ...... 51 Congratulations! ...... 51
Appendices ...... 53 Appendix A: Learner Tracking Sheet ...... 54 Appendix B: Sample Code ...... 55 Appendix C: App Inventor Handout ...... 63
iv I ♥ My Smartphone Overview
Overview
Introduction
Implementation of Curriculum for Excellence (CfE) and the development of new National Qualifications presented a timely opportunity to revise the way Computing Science is taught in schools and to provide a more interesting, up-to-date and engaging experience for both tutors and learners.
This is the third in a series of resources developed by the Royal Society of Edinburgh (RSE) and the BCS Academy of Computing that exemplify a subset of the Computing Science-related outcomes of CfE at Levels 3 & 4 and beyond. The RSE/BCS Computing Science Exemplification Project is also featured in the article Creating a New Generation of Computational Thinkers (Communications of the ACM, volume 58 issue 12, December 2015).
This resource seeks to consolidate Computing concepts introduced in the previous resources through the medium of mobile app development. In addition to providing a course in programming for mobile devices, it will explore new paradigms in Computing such as mobile technologies and new interfaces, whilst providing ample opportunity for inter-disciplinary linkage.
All three resources build on state-of-the-art understanding of the pedagogy of Computing Science, drawn from around the world. This should enable learners to develop both app development skills and deep understanding of core Computing concepts and the ability to think like a computer scientist.
Whilst this resource is intended to support tutors’ thinking about how they might translate the intentions of the curriculum into classroom activity, it should not be seen as prescriptive. Rather, it is intended to stimulate innovation and offer tutors the flexibility and opportunity to deploy their creativity and skills in meeting the needs of learners.
Page 1 I ♥ My Smartphone Overview
Computational thinking
Computational thinking is recognised as a key skill set for all 21st century learners – whether they intend to continue with Computing Science or not. It involves a set of thinking practices through which to view the world:
seeing a problem and its solution at many levels of detail (abstraction1); thinking about tasks as a series of steps (algorithms); understanding that solving a large problem will involve breaking it down into a set of smaller problems (decomposition); appreciating that a new problem is likely to be related to other problems the learner has already solved (pattern recognition); realising that a solution to a problem may be used to solve a whole range of related problems (generalisation).
Furthermore, there are some key understandings about computers:
Computers are deterministic: they do what you tell them to do. This is news to many, who think of them as pure magic. Computers are precise: they do exactly what you tell them to do. Computers can therefore be understood; they are just machines with logical working.
Whilst computational thinking can be a component of many subjects, Computing Science is particularly well-placed to deliver it.
1 Ultimately, if there is a “core truth” that underpins computational thinking, it is the idea of abstraction – “zooming in and out of a problem”. Arguably, the four other areas of computational thinking could be viewed, to varying degrees, as different aspects of abstraction.
Page 2 I ♥ My Smartphone Overview
Why mobile app development?
For over twenty years, the desktop metaphor as exemplified by Mac OS and Windows operating systems formed the basis of most users’ experience of Computing. The resultant applications became the mainstay of the ICT curriculum and informed much of what was taught.
Today’s learners have a different experience of Computing: it is on-line, social and mobile. Computing devices have become more tactile and personal, the result of convergence of numerous technologies from multi-touch to motion-sensing and GPS.
This resource seeks to embrace these developments and provide an experience of Computing Science which will engage with learners in a way that is relevant to their own digital lives.
Using this resource
As well as lessons, exercises and sample answers, this resource contains many suggested supplementary activities and inter-disciplinary learning opportunities.
It is not the author’s intention that all the activities are attempted; rather, they are simply suggestions as to the kind of activities that tutors may find useful.
Feel free to use this resource as you wish:
as part of an introduction to Computing Science within Curriculum for Excellence; to support the National 4 Software Design & Development unit or to form the basis of work done in the Added Value unit; as an introduction to Software Design & Development in the National 5 course.
Above all, this resource should not be seen as prescriptive. It merely contains guidance and suggestions as to the kinds of approach which can make learning more engaging, whilst fostering computational thinking and greater understanding of Computing Science concepts in learners.
Page 3 I ♥ My Smartphone Overview
Curriculum for Excellence outcomes
This resource seeks to address the following outcomes within Curriculum for Excellence:
Using appropriate software, I can work individually or collaboratively to design and implement a game, animation or other application. TCH 3-09a I can build a digital solution which includes some aspects of multimedia to communicate information to others. TCH 3-08b I can debate the possible future impact of new and emerging technologies on economic prosperity and the environment. TCH 4-01c By learning the basic principles of a programming language or control technology, I can design a solution to a scenario, implement it and evaluate its success. TCH 4-09a I can integrate different media to create a digital solution which allows interaction and collaboration with others. TCH 4-08c Through research, I can gain knowledge of computer systems or emerging technologies to understand their differing features and consider their suitability for the world of work. TCH 4-08d I can create graphics and animations using appropriate software which utilise my skills and knowledge of the application. TCH 4-09b
Page 4 I ♥ My Smartphone App Inventor
App Inventor
App Inventor is a software development environment originally developed by Google. It allows users with little or no experience of programming to create applications that can be installed and run on devices running the Android operating system. Towards the end of 2011, Google open-sourced App Inventor and its development was taken up by the Mobile Learning Lab at the Massachusetts Institute of Technology.
App Inventor uses a graphical interface, similar to that found in MIT’s Scratch. In creating App Inventor for Android, Google drew upon significant prior research in educational computing which was informed by constructionist learning theories. These theories emphasise programming as a vehicle for engaging powerful ideas through active learning.
As a blocks-based programming language, App Inventor all but eliminates a major problem for learners presented by traditional text-based languages i.e. the requirement to recall and type instructions according to a strict syntax.
http://appinventor.mit.edu/
Known issues
App Inventor is a cross-platform development environment (Windows, Macintosh & Linux), but creates software for Android devices only. Users of App Inventor require a Google account (apps are stored in the cloud). It is recommended that tutors ensure that learners have a Google account in advance of them using App Inventor for the first time. o The advantage of this is that learners are able to access their work at home. o Tutors may also wish to keep a copy of learners’ usernames and password reminder clues (known only to the learners themselves). Any proxy or web filtering must be configured to allow access to the App Inventor URL. App Inventor is not supported on the Internet Explorer web browser. Google Chrome or Mozilla Firefox are recommended.
Page 5 I ♥ My Smartphone App Inventor
Installation
App Inventor requires a little preparation before using it in the classroom…
App Inventor is primarily browser/cloud-based software, but note that Internet Explorer is not supported. Chrome or Firefox are recommended. The Designer and Blocks Editor run completely in the browser/cloud. However, to see an app on a device while it is being built (also called "Live Testing"), a local installation on client machines is also required, along with the App Inventor companion app on the handset (or emulator on the computer). Full installation instructions and files can be found at: http://appinventor.mit.edu/explore/ai2/setup.html For live testing, the recommended connection method between the client computer and handset is via Wi-Fi. Note, however, that both devices must be on the same Wi-Fi network. If client computers are on a wired network, with the handset connecting to a separate Wi-Fi network, this will not work; consequently, a USB connection between the client computer and handset will be required. Whilst App Inventor does support some models of phone natively, it is usually necessary to install drivers for the phone you are using. For this reason, it is strongly recommended to purchase handsets from the same manufacturer (and even model), to ensure the ability to easily share handsets between different client computers whilst installing just one driver across a classroom. The App Inventor URL should be whitelisted on any school proxy. As previously stated, users must have a Google account to log in. Users’ projects are stored in the cloud, but can be uploaded from and downloaded to client computers from App Inventor. This is recommended for backup. Project files for upload/download are packaged as .aia files. Note that .aia is App Inventor’s own file format and should not be confused with compiled .apk (Android Package files). .apk files are compiled and packaged for use on a phone and cannot be edited in App Inventor. It may be helpful to view App Inventor’s .aia files as source code and .apk files as object code.
Above all, it is strongly recommended that tutors test the installation on a learner account before trying to use App Inventor with a class.
Data Protection
Education Scotland advises that schools and centres should ensure appropriate compliance with data protection regulations and therefore may wish to consider the creation of generic rather than individual Google accounts for learners to use.
Page 6 I ♥ My Smartphone App Inventor
Using App Inventor in the classroom
Whilst App Inventor offers users a software emulation of the Android operating system, best results are achieved when using an Android smartphone connected directly to the host computer for live testing of an application. This is particularly relevant when using features such as text messaging or motion sensing.
o For live testing, USB debugging must be enabled on devices (Settings→Developer Options) . To enable Developer options, tap the Android build number (usually found in Settings→About device) seven times. o In the blocks editor, select Connect→USB Once an App Inventor app has been completed, there are three methods of getting it onto a phone: o By generating a QR code which provides a download URL (you will need a QR code scanner app such as QR Droid, freely available from Google Play) o By downloading a compiled and packaged .apk file onto a computer which can then be copied to a connected phone o Downloading to a connected phone via App Inventor (easiest for learners). It is recommended that once they have opened an emulator, learners leave it open, as restarting the emulator can be sluggish. If they wish to free up space on their screen they should minimise their windows rather than close them. When a new App Inventor project is chosen, all windows will update to display the new project. Occasionally, it may be necessary to restart an app during development. To do this: o Go to Connect→Reset Connection and then reconnect to the device/ emulator.
Learners can create checkpoints which effectively save successive versions of files. The use of checkpoints by learners is encouraged, especially when developing their own apps.
Useful resources
MIT’s App Inventor home page: http://appinventor.mit.edu/explore/
App Inventor for Educators: http://teach.appinventor.mit.edu/
University of San Francisco’s Democratize Computing Lab: http://www.appinventor.org/
Page 7 I ♥ My Smartphone App Inventor
App Inventor Gallery
App Inventor has an integrated gallery for sharing apps and exploring the code of others’ apps. Learners can publish and share their projects to the App Inventor gallery and open any app to “remix” it.
Learners can receive daily email notifications stating how many times their app has been downloaded and liked, and get a share link that will take people directly to their app.
The App Inventor Gallery will be a concept familiar to those who have used MIT Scratch’s gallery.
Publishing on Google Play
App Inventor files can be uploaded to Google Play.
To publish on Google Play, you must also be a registered developer. To register as a developer, you must do three things:
Create a developer profile Agree to the Google Play Developer Distribution Agreement Pay a registration fee ($25.00) with your credit card (using Google Checkout)
The URL for this can be found at https://play.google.com/apps/publish/signup
To publish an app, first download its Android .apk file from App Inventor as follows:
Open the app you want to publish Go to Build →App (save .apk to my computer) The downloaded .apk file can then be published on Google Play by going to Google Play Publishing Home and following the steps outlined there.
(More details can be found on Introduction to Publishing on Google Play and Google Support on Uploading to Google Play).
Clearly, the ability to market an app in the real world could be a strong motivator for learners and introduce a wealth of inter-disciplinary learning opportunities. It may be that an establishment could create a single developer licence and a designated tutor could deal with uploads, etc.
Page 8 I ♥ My Smartphone Lessons and approach
Lessons and approach
Tutors using this resource may wish to consider the following approaches:
Screencasts
In addition to a traditional booklet, this resource makes use of screencasts to deliver some of the tutorials. Tutors wishing to use them may wish to use them on a whole- class basis and/or for learners individually, stopping and starting as they need. Screencasts are also useful for supporting distance learning situations or to allow learners who have missed lessons to catch up at home. The rationale behind using screencasts is that learners can make quicker progress, as it's more visual and immediate. Screencasts are also a medium that learners are familiar with in their own digital lives. Feedback from users of the first version of these materials suggests that screencasts have proved popular with the YouTube generation, allowing learners to progress at their own pace. Furthermore, they have been helpful for learners who may have missed classes or who are studying from home. As the lessons progress, it is assumed that learners have gained an understanding of how to use the environment, so the use of screencasts as “scaffolding” is reduced. The screencasts used in this resource are made available in two ways:
as video files which can be used on individual computers or across a network; on the “RSE/BCS Computing” YouTube channel at : http://www.youtube.com/user/RSEComputing
Deep understanding
To accompany the lessons, there are sample written and discussion tasks to enable learners and tutors to assess “deep understanding” of the Computing Science concepts. This draws upon recent work in the CS Principles course at the Universities of San Diego and Glasgow. Aspects of this approach are also seen in UC Berkeley’s The Beauty and Joy of Computing course. Traditionally, tutors have inferred the degree of learners’ understanding of what they have learned from the programs they have produced; however, research has shown that this is not always a strong indicator. Consequently, consolidation via quizzes, group discussion, questioning and class work/homework should be used to enable the tutor to formatively assess the learners’ understanding throughout the course, rather than simply infer this from their completed programs. Discussion is strongly encouraged, as research suggests that both this and peer instruction can aid learners’ understanding.
Page 9 I ♥ My Smartphone Lessons and approach
Pair programming
Collaborative learning is a cornerstone of Curriculum for Excellence and these materials encourage this through pair programming. Pair programming can be defined as:
“… an agile software development technique in which two programmers work together at one workstation. One, the driver, types in code while the other, the observer (or navigator), reviews each line of code as it is typed in. The two programmers switch roles frequently.
While reviewing, the observer also considers the strategic direction of the work, coming up with ideas for improvements and likely future problems to address. This frees the driver to focus all of his or her attention on the "tactical" aspects of completing the current task, using the observer as a safety net and guide.” Source: Wikipedia
Pair programming can encourage collaboration between learners, as well as making good use of available smartphones within the classroom.
It is recommended that tutors explicitly advise learners to seek help from a neighbour before asking the tutor for help. Tutors will, however, understand the need to ensure that both learners are equally engaged in the work!
Suggested activities
Within these notes are suggestions about how tutors may extend lessons. These should not be seen as prescriptive, but as possible ways to enrich a task or topic. Tutors are free to cherry-pick these, as going through all of them is likely to significantly extend the unit.
Suggested activity These opportunities are indicated by Suggested activity in the left margin.
Inter-disciplinary learning
Mobile app development is a “rich” medium that offers huge scope for inter-disciplinary learning. Within this resource are suggestions for possible inter-disciplinary activities, as well as many of the activities being inter-disciplinary in themselves.
IDL Inter-Disciplinary Learning opportunities are indicated by IDL in the left margin.
Page 10 I ♥ My Smartphone A Brief History of the Telephone
A Brief History of the Telephone
This section outlines the history of telecommunications through information, written tasks and research for pupils. It is up to tutors to decide whether to use this as an introduction or to embed the tasks within the practical lesson sequence.
Mr Watson, come here – I want to see you!
Suggested activity Find out about other early researchers in telecommunications and how Bell was not the only researcher working on this (or, arguably, the first). Going mobile
Suggested activity Discuss with learners why mobile communication is so popular. Why is there a need for it? What are the uses?
Business Social Government Military etc.
Suggested activity Tutors who have access to legacy mobile phones or PDAs could provide a useful hands-on experience for learners.
Year Product Important features (suggested answers) The first smartphone – apps included a calendar, address book, world clock, calculator, note pad, e-mail, and 1993 IBM Simon games. Touch screen. Text entered using "predictive" on-screen keyboard or QWERTY keyboard. Price: $899 PDA; touch screen (with stylus) 1996 Palm Pilot Office apps as well as third party Handwriting recognition plus on-screen keyboard Smartphone with mini QWERTY keyboard 2002 RIM Blackberry Introduced RIM messaging service. Very popular in business User-friendly multi-touch interface 2007 Apple iPhone First app store launched with 2nd generation (iPhone 3G)
2008 HTC Dream First Android-based smartphone
Smartphone running Microsoft Windows operating 2011 Nokia Lumia system
2014 Apple Watch First Apple smart watch
Page 11
I ♥ My Smartphone A Brief History of the Telephone
When mobile phones became smart phones
Suggested activity Discuss what makes a smartphone “smart”.
Suggested activity Show video of New York University researcher Jeff Han’s demonstration of multi- touch interfaces in 2006, the year before the iPhone was introduced.
http://www.ted.com/talks/jeff_han_demos_his_breakthrough_touchscreen.html
For a desktop experience of multi-touch, show videos of Microsoft surface: http://www.youtube.com/watch?v=6VfpVYYQzHs
http://www.microsoft.com/surface/en/us/whatissurface.aspx
Discuss with learners how quickly multi-touch became ubiquitous and why.
Convergence: Bringing it all together
Investigate the following technologies. Beside each one, write down its function (what it does) and an example of a portable device (other than a smartphone) which uses it.
Microphone Function: Sound input Example device: Voice-activated device e.g. sat nav Loudspeaker Function: Sound output Example device: MP3 player Touch screen Function: Touch sensing Example device: iPod touch/nano Accelerometer Function: Orientation and motion sensing Example device: Nintendo Wii controller GPS sensor Function: Geo-location Example device: Satellite navigation e.g. TomTom Bluetooth Function: Radio communication Example device: Cordless mouse CCD Function: Image sensing Example device: Digital camera Magnetometer Function: Directional sensing Example device: Digital compass
Page 12
I ♥ My Smartphone A Brief History of the Telephone
IDL Physics What is an accelerometer? How does it work? In what devices is this technology found?
IDL Physics What is GPS? How does it work? In what devices is this technology found?
Discuss with your neighbour what you think will be the next big advances in smartphone technology. Using either a graphics package or pencil & paper, draw a labelled design for a smartphone 10 years from now.
Learners may use their answers from their “Going Mobile” investigation to look back a decade. By seeing what smartphones were like then, they could try to extrapolate 10 years into the future.
Learners tend go on flights of fancy here, so they should be encouraged to look at emerging technologies to see realistically where smartphones might be within a decade.
This could be given as a homework assignment, or learners could be encouraged to share their ideas and present to the class.
Suggested activity To support and stimulate the task above, show learners video of Nokia Morph project (http://research.nokia.com/morph):
http://www.youtube.com/watch?v=IX-gTobCJHs
Other useful videos include Samsung phone with flexible AMOLED2 display:
https://www.youtube.com/watch?v=CpsUhTR0znk
Physical touchscreen buttons on demand from Tactus:
https://vimeo.com/43431035
2 Active-Matrix Organic Light-Emitting Diode
Page 13
I ♥ My Smartphone A Brief History of the Telephone
Telephone…or computer?
Discuss with your neighbour what each of these could be within a smartphone. Write down your answers.
Device Smartphone example(s) Touch screen; microphone; accelerometer; GPS locator; Input magnetometer/digital compass
Processing CPU; GPU (if present); DSP chip
Storage Internal flash ROM and expansion card (if present)
Touch screen, loudspeaker (or headphone jack), motor (for Output vibrating alert)
Suggested activity Discuss what other devices might qualify as computers that we may not automatically think of as computers.
IDL Psychology/sociology/RMPS/responsible citizens Smartphones are multi-faceted communications devices that have fuelled the social networking phenomenon. What are the effects on society and individuals of always being in touch? Discuss the pros and cons of mobile computing: health, safety, social interaction, privacy, never being out of touch, keeping up with friends/family, etc.
IDL Language Class debate: This house believes that smartphones have been bad for society.
Issues to research: road casualties caused by driver/pedestrian distraction http://www.bbc.co.uk/news/world-europe-33124433; disruption to sleep patterns due to exposure to blue light emitted by LCD screens; radiation emission; being constantly in touch with work; multi-tasking lowering productivity; http://ny.eater.com/2014/7/14/6187749/restaurant-blames-smartphones-for-slow-service time spent on smartphones http://www.mobilestatistics.com/mobile-news/23-days-a-year-spent-on-your-phone.aspx
Contrast with: benefits of improved communication; increased business and convenience of shopping from anywhere; leisure/games; convenience of converged technologies in a single handset.
Page 14
I ♥ My Smartphone Smartphone software
Smartphone software
Go over the concept of software and hardware. Make sure learners are comfortable using the terms program and software and understand that programs are sets of instructions to the computer.
Stress that a computer is a deterministic machine i.e. it will do only as it is instructed.
Operating system
Ensure learners understand that when they use a computer, what they are actually working with is an operating system; the particular hardware is less important.
The OS provides a means of accessing and controlling the hardware through program instructions.
Investigation Write down the names of some mobile device operating systems and beside each one, give the name of an actual device that it runs on. If you or someone you know has a smartphone, write down what it is and the name of the operating system it runs.
Mobile OS Actual Device
Android Samsung Galaxy S7 smartphone
iOS Apple iPhone 6S smartphone, iPad Pro tablet, iPod touch
Watch OS Apple Watch
Windows Mobile Microsoft Windows-based smartphone
BlackBerry BlackBerry smartphone
Page 15
I ♥ My Smartphone Smartphone software
Apps
Investigation Write down the name of three desktop applications. Beside each one, write down how much it costs.
Microsoft Office 2016 – £120 (Home & Student version) Adobe Photoshop – £8.57 per month FileMaker Pro – £287 The Sims – £50
Now investigate a mobile app store, such as Apple’s App Store or Google Play. Write down the names of three mobile device apps and their cost.
Learners could investigate Google Play or Apple’s App Store here. Any 3 here – answers will vary
Video Show and discuss Appiction video “At What Price Should I Sell My App?”: http://www.youtube.com/watch?v=iZUkjSmzY3c . At the time of writing, the most expensive app on the Apple App Store was VIP Black, costing $1,199.99. The average price of an app was one dollar 3.
Video Show and discuss Appiction video “How much does it cost to make an app?”: http://www.youtube.com/watch?v=b3KAAdzx5VU . The average cost to develop an app has been calculated at $270,0004.
The mobile app industry
Video Show video of young “bedroom developer” and discuss: http://www.bbc.co.uk/news/technology-16306742
Following this interview, Nick D’Aloisio sold Summly to Yahoo for an undisclosed sum (reported to be around $30 million).
3 Source: http://www.statista.com/statistics/267346/average-apple-app-store-price-app 4 Source: http://www.formotus.com/14018/blog-mobility/figuring-the-costs-of-custom-mobile- business-app-development
Page 16
I ♥ My Smartphone Smartphone software
Further inter-disciplinary learning
Global Citizenship In the developing world, many countries are leapfrogging wired networks in favour of wireless networks accessed on mobile devices.
Maps of submarine cables: http://www.submarinecablemap.com/ (clickable) http://www.cablemap.info/
What has been the impact on local economies that are largely driven by sole traders at markets? What role did this technology play during the Arab spring?
There are also many issues around information rich/information poor to discuss here. Facebook’s apparently charitable Internet.org initiative with Samsung and others has received criticism for violating the principle of net neutrality. As a result, its Free Basics app has been banned by the Indian government5.
Responsible Citizens Where do all the mobile phones go? Investigate the problem of electronic waste and its disposal. Investigate the EU’s WEEE regulations and the lifetime carbon footprint of mobile devices.
Investigate the issue of conflict minerals: http://www.youtube.com/watch?v=aF-sJgcoY20
Chemistry Smartphone touch screens are coated with indium tin oxide, a rare earth compound that is both optically transparent and electrically conductive. Rare earths are also used several other areas of microelectronics.
Investigate rare earths:
What are rare earth elements? Where are they found? What are some of their properties? What is the supply situation like?
5 http://www.bbc.co.uk/news/technology-35522899
Page 17
I ♥ My Smartphone Smartphone software
Mathematics Finnish company Rovio, creators of Angry Birds, spent approximately 100,000 euros developing the game. It went on to make over 50 million euros in its first year alone.6
Imagine that you were given £100,000. Using a spreadsheet or other tool, analyse the tasks involved in bringing a product to market and create a budget. Consider all the jobs involved in creating a successful game and how you might divide up the sum to cover all the costs.
Languages App Inventor can be used in a variety of languages, allowing inter- disciplinary teaching. Furthermore, apps developed by students could be localised, along with marketing material and supporting documentation, stressing the international nature of the software development industry.
6 Source: http://www.wired.co.uk/magazine/archive/2011/04/features/how-rovio-made-angry- birds-a-winner
Page 18
I ♥ My Smartphone Lesson 1: Virtual Pet
Lesson 1: Virtual Pet
Concepts introduced App Inventor environment with concepts of components, properties and code Event-driven programming Touch interface
Computational Thinking themes
Abstraction o what causes things to happen (event): button click, canvas drag, accelerometer shake o when things happen (action following event) o what happens e.g. sound plays, sound vibrates o position represented x & y coordinates Pattern recognition o same behaviours for cat & dog in Extension task Algorithm o sequence o event triggers action
Objectives Learners should be able to:
label the major parts of an App Inventor program understand how the components and blocks work and interact understand the difference between the user interface and the program code
Outline
Engage: Demonstration of VirtualPet app Explore: Learners create VirtualPet app Explain: Learners individually annotate App Inventor handout Elaborate: Modify VirtualPet app Conclusion
Materials
VirtualPet apps: VirtualPet1, VirtualPet2 Screencasts: VirtualPet1, VirtualPet2 Handouts: App Inventor Handout (see Appendix C)
Page 19
I ♥ My Smartphone Lesson 1: Virtual Pet
Introduction This is the Android equivalent of a “Hello world” program and serves as an introduction to the App Inventor environment.
Demonstrate a fully-functional version of the app (File: VirtualPet1) to learners. For this, either use a projector connected to a computer with the app running on the Android emulator or display the app working on a phone (either installed or live testing). Ask learners to predict what users of the app should do and what will happen. Then show them that if you touch the picture, the phone makes a noise.
Pair programming (optional) If using pair programming approach, assign learners to pairs. Explain pair programming – one person is the "driver" and does the clicking and typing. The other person is the "navigator" who has the screencast and tells the “driver” what to do. Learners will swap roles every 5–10 minutes. Tutor should keep track of the time and announce that learners should trade places at even frequencies. Monitor that both learners are contributing equally. Tutor should walk around and help pairs who are stuck as needed. If pairs complete tutorial, they should save then begin an extension with a new file name.
Task 1: Getting started with App Inventor
Learners should then open screencast VirtualPet1, which will introduce them to the App Inventor environment and assist with logging on, etc.
Task 2: Creating code
Once learners have done this, they should open screencast VirtualPet2, which will take them through creating the app themselves. Stress the difference between Built-in blocks (general programming structures) and the blocks available for an app’s components.
Task 3: Testing your app Help learners debug their app.
Task 4: App Inventor reference sheet Issue App Inventor Handout (see Appendix C) and get learners to fill it in, annotating what they think the parts of App Inventor do. After they have finished,
Page 20
I ♥ My Smartphone Lesson 1: Virtual Pet
collect the handouts and use them for formative assessment, to determine what learners already understand. Return handouts and go through the answers with learners, having them write in the correct answers. Use the sample answers to guide the discussion, but allow learners to offer their ideas, making sure they write down the correct answer. Ensure learners understand the difference between the interface and the program.
Learners should retain the handout for future reference.
Extension task 1
Replace the button with a Canvas component (Basic→Canvas), which has the When
Extension task 2
Add an empty Image sprite component (Drawing and Animation→ImageSprite) under the cat’s chin. Drag over this item to make the cat purr – i.e. for the phone to vibrate, using a Call
Did you understand? a) Try out the app and describe the problem.
The app produces the same sound for both animals. b) What change would you have to make to the code to correct it?
Set appropriate sound source in each event before playing it (Set
Get learners to predict what will happen when set sound source block is inserted AFTER the sound is played, then show them.
Restart app and ask learners to predict what will happen when the Cat button is clicked; then the Cat button again; then the Dog.
The sound may be right to start with, but will be wrong when a different button is chosen. Ask learners why.
Page 21
I ♥ My Smartphone Lesson 1: Virtual Pet
In this way, learners can be shown how the sequence of code blocks is vital to achieving the correct output.
Once learners get program working, let them experiment with it.
NB Learners can use App Inventor’s Checkpoint facility (Projects->Checkpoint) to save their work at various points.
Conclusion Revise components, properties and code. Ask learners to summarise what they saw and learned. Emphasise that the order of execution is vital when programming. Stress that computer will do only what it is instructed/programmed to do. If an app doesn’t work as expected, then the programmer has made a mistake!
Further extension work Show how to amend the program to create buttons to change the picture and sound for different animals (see VirtualPet2). Learners could use such an extension to create a simple application to help very young children recognise well-known animals. Use this app as the basis of a soundboard or virtual instrument e.g. a drum kit or piano, using empty sprites as overlays on drums, keys, etc.
Page 22
I ♥ My Smartphone Lesson 2: Finger Painting
Lesson 2: Finger Painting
Concepts introduced Touch screen interface Variables Procedures Interface design Event-driven programming: events and event handlers Maintain a running total variable
Computational Thinking themes
Abstraction o variable name/value corresponding to data in memory o variable types: integer (brush size & line width); image Pattern recognition o same behaviour for different colour button clicks o similar behaviours for size button clicks Algorithm o small & big size changes Decomposition o general colour event breaks down to specific red/green/blue event o general size change breaks down to small/big change
Objectives Learners should be able to:
explain the role of the component designer, blocks editor, and phone/emulator understand the role of problem decomposition - that it is important to break a larger problem into smaller parts and solve one part at a time understand the event-driven nature of App Inventor programming understand that variables contain values and make programs easier to modify later
Outline
Engage: Demonstrate working FingerPaint app Explore: Learners go through FingerPaint tutorial Explain: Tutor provides help as needed Evaluate: Tutor & learners check that apps work Elaborate: Tutorial extensions Deep understanding: Did you understand?
Page 23
I ♥ My Smartphone Lesson 2: Finger Painting
Materials
Apps: FingerPaint1, FingerPaint2, FingerPaint3 Screencasts: FingerPaint1, FingerPaint2
Introduction Display FingerPaint app (FingerPaint1) to learners.
Ask learners to predict what users should do to make the app work and what will happen when you do; then demonstrate the app. Whilst demonstrating the app, discuss the interface:
Why are icons used? What are the advantages/disadvantages of using icon buttons instead of text buttons? What effect does it have on the overall impression you get of the app?
Either show to whole class or let learners watch individually screencast FingerPaint1 which demonstrates creating the app’s interface.
Task 2: Creating the code Point out that while we have a good interface, there is no functionality. Get learners to run the app in the emulator to emphasise this.
Demonstrate problem decomposition by going over the algorithm with learners. Show how you were able to deal with the overall problem by focussing on small parts of it separately to make it more manageable i.e. “Divide & Conquer”.
Display algorithm and code for this app on the board and discuss how they are related. Explain that algorithm and code are two representations of the same thing –an approach to solving the problem. This is a clear example of levels of abstraction: the problem, the algorithm and the final code.
Stress that writing an algorithm allows you to work out the stages the program will have to go through to solve the problem without worrying about the code.
Task 3: Fixing the Bugs Introduce idea of programming errors. Stress that computers are deterministic, so that if code doesn’t work as expected, it’s because the programmer has made a mistake.
2.1 Discuss with your partner what features your app would need to solve each of these problems. Write your suggestions below:
Page 24
I ♥ My Smartphone Lesson 2: Finger Painting
a) Paint colour: Create a new button for black paint (and code it)
b) Line width: Have more choices for line width; have a slider/progress bar or other control that lets users set a variable line width.
2.2 Discuss what you could do to reduce the chance of logic errors appearing in your apps. Write your suggestions below.
o Design code carefully by writing down the algorithm in advance
o Trace through the algorithm before coding, trying to work out what the computer would do, in order to catch errors in your design.
Variables
The use of variables is a key Computational Thinking concept (abstraction) and important for learners to understand. A variable can be explained as an area of computer memory in which we store a value. We then label it, like a box, so that we can remember what’s stored inside.
Suggested Activity Pass out envelopes with names written on the front (such as “age”, “favourite colour” “pet”, etc. ). Inside each one, have a piece of paper with a value written on it. Take out each value and put in a new one to demonstrate assignment of a new value to the variable. Use this activity to discuss the importance of creating meaningful variable names so that we can recognise them easily in our program. Use this activity to demonstrate data types i.e. we can’t assign a value for colour such as “red” to an age variable, etc.
Ask learners: Q: Why store information in variables? Isn’t it more complicated? A: No! Variables make it easier for us to use and change information in a program. Explain how variables allow us to generalise our code.
Some examples:
Consider a game that displays a score which changes throughout the game. Would we have a separate program line for every possible score in a game? No, we’d have one program line, but refer to the variable. A variable is the only realistic way of storing this information. Consider a program that calculates prices by adding on VAT (sales tax). Without variables we would have to set the value of VAT as a number in every calculation in the program. If the rate of VAT changed, we would have to go through
Page 25
I ♥ My Smartphone Lesson 2: Finger Painting
our code, changing the number every time we had used it. By using a variable to store the rate of VAT, we would only need to change the value assigned to the variable once.
Extension 1: More flexible brush size Explain the common practice of changing the value of variable by referring to itself i.e. new value of variable = old value of variable +/- amount
This can be demonstrated by asking a learner to mentally add up a series of small numbers as you provide them, then give you the final total. Ask the learner: How did you do this? You maintained a running total, rather than remember all the individual numbers and add them together at the end. Tutors could even ask the learner “What was the third or the fifth number I gave you?” to illustrate this further.
Demonstrate to learners adding a label to display the brush size variable (app FingerPaint3 features this)
Suggested activity This resource does not go into parameter passing explicitly; however, there is clearly scope to introduce it here, especially for learners who may have previously used procedures with parameters in environments such as Scratch 2 or Snap!/BYOB. Such learners may see redundant code which could be generalised using a single procedure to change brush size, with a parameter/argument of +1 or -1 passed into it accordingly.
Extension 2: Any colour you like This may require resizing of components, depending on the resolution of the phone, but will make the app more useful. Note that App Inventor’s screen component has a “Sizing” property that can be changed from “Fixed” to “Responsive” depending on the device in use.
Extension 3: Cool feature Note that this feature will only work on a phone, not the emulator.
Extension 4: Another cool feature Shows learners how to save files permanently.
Note that this feature only works when the app is downloaded to the phone. It will not work under live testing or on an emulator.
Page 26
I ♥ My Smartphone Lesson 2: Finger Painting
Did you understand (part 2)?
2.3 What type of variable – text or number – would the following values be stored in:
a) 23 – Number b) Alice – Text c) 3.14 – Number (despite point) d) SG12 RDW – Text (despite digits) e) Fourteen – Text
2.4 Using short variable names like a, b or c seems like it could save a programmer time and effort in typing. Why would this be a bad idea?
It makes it difficult to identify what value each variable is storing – and therefore more difficult to correct bugs.
2.5 A variable name should always be as meaningful as possible – that is, the name should suggest the value that’s being stored. However, we shouldn’t make it longer than necessary.
Write down suitable variable names for the names and scores for two players in a game (four variables in all).
player1, player2, player1score, player2score
2.6 Think of some non-computing examples of “variables” and their possible values. An example is shown below:
Variable: cutlery Possible values: knife, fork, spoon
Variable: gender Possible values: male, female
Variable: musicalInstrument Possible values: guitar, drums, piano, bass, flute
Page 27
I ♥ My Smartphone Lesson 2: Finger Painting
2.7 A user starts up a FingerPaint app and immediately clicks ButtonBigBrush (code shown below).
However, when the user tries to paint, nothing appears on the canvas until they click ButtonBigBrush a second time. Discuss with your partner why this happens and what change(s) should be made to the code to fix this bug. Reason: The brushSize variable is initialised at 0. When ButtonBigBrush is clicked, the canvas LineWidth is set to the current value of variable brushSize – in this case zero – then the brushSize variable is incremented. The lineWidth property would therefore still be set to zero until ButtonBigBrush is clicked again. Even then, it would always be one size “behind” the button clicks.
Correct code:
def brushSize as number 0 when ButtonBigBrush.Click set global brushSize to global brushSize + 1 set drawingCanvas.LineWidth to global brushSize
Conclusion
1. Explain the role of the component designer, block editor and phone/emulator.
What does each do? How does adding a component affect the block editor/phone/emulator? How does creating a block of code change the designer/phone? Does interacting with the phone change the program code?
2. Why did we use variables for brush size instead of “hard coding” it? To make it easier to modify later. Using variables generalises the problem of creating a brush size.
3. What is a bug? What different kinds are there? An error in code which stops it from working as expected e.g. syntax error; logic error; execution (run-time) error
Page 28
I ♥ My Smartphone Lesson 3: MoleMasher Game
Lesson 3: MoleMasher Game
Concepts introduced Problem decomposition and modularisation using procedures Timers/clock component
Computational Thinking themes
Abstraction o repetition o position: x & y coordinates o variable Algorithms Decomposition o use of procedure to move mole o use of procedure to update score Pattern Recognition o use of one procedure being called repeatedly to update score
Objectives Learners should be able to:
understand the use of an algorithm to develop a solution to a problem become more familiar with translating an algorithm into code become more familiar with using variables use procedures to create a more modular program
Outline Engage: Demonstrate working MoleMasher app Explore: Learners go through MoleMasher tutorial Explain: Tutor provides help as needed Evaluate: Tutor & learners check that apps work Elaborate: Tutorial extensions Deep understanding: Did you understand?
Materials
App: MoleMasher Screencasts: MoleMasher1, MoleMasher2
Page 29
I ♥ My Smartphone Lesson 3: MoleMasher Game
Details
Demonstrate a fully-functional version of the app (MoleMasher) to learners. For this you can use a projector connected to a computer with the app running on the Android emulator or display the app working on a phone (installed or live testing). Ask learners to predict what you should do and what will happen. Write this out as Input, Process and Output Go through algorithm and try to elicit as much of the code from learners as possible without using the screencast. Learners will likely need explanation of why we subtract the width & height of the mole from the canvas width and height when generating random coordinates for the mole to appear.
Procedures Emphasise to learners how procedures let us break a problem down into smaller problems and solve each one separately (“Divide and Conquer”). This makes big problems easier to solve because we only have to concentrate on one small sub- problem at a time. Stress that building a program from smaller “sub-programs” in this way is a very important idea in Computing Science.
In the software industry, software is often written by teams of programmers. Breaking down a problem into smaller tasks allows different people or groups within the team to work on separate parts of the program at once. For example, if a company were creating a word processing application, one group of developers might work on the spell checker, another on the printing features, another on the help screens and so on… Remind learners that a procedure is a “sequence of statements that you can refer to as a single instruction” i.e. it’s like creating a new block or “teaching the computer a new command”.
Using the MoleMasher app’s UpdateScore procedure, explain why it’s more efficient to define a procedure once and call it up repeatedly, rather than have the same code appear several times in a program (Computational Thinking – abstraction/pattern recognition/generalisation).
Q: Why? A: Because if you need to change the code, you only have to change it in one place. Q: Where have we seen this idea already? A: Variables Go back to the FingerPaint app and ask learners to look for repeated code that could be made into a procedure.
Link in with comments here, pointing out to learners that they should always comment a procedure to explain what it does. Remind them that comments are for programmers, not users (a common misconception).
Page 30
I ♥ My Smartphone Lesson 3: MoleMasher Game
Did you understand?
3.1 How could you make the game more difficult for users?
Change the interval property for the game timer, so the mole appears more quickly.
3.2 Discuss the following examples from real life. What “procedures” could they be broken down into?
a) Getting ready for school
Wake up, breakfast, washed, dressed, gather things, leave house
b) Making breakfast
Get bowl, get milk, empty cereal into bowl Boil kettle, put bread in toaster, put teabag in pot, etc.
Note that this is one of the stages in part a), showing that successive decomposition can take place. Therefore one procedure can be broken down into further procedures, etc.
In the case of tea & toast, this could even be used to introduce the concept of parallel processing i.e. whilst waiting for the toaster to pop up or the kettle to boil, we get the other ingredients, for example.
Page 31
I ♥ My Smartphone Lesson 3: MoleMasher Game
3.3 Discuss with your partner some examples of sub-tasks within a simple “space invader”-type game that could be coded as procedures.
Write them in the space below.
Move ship, move aliens, update score, game over, etc.
Stress that there are clear stages in the game that can be worked on separately.
3.4 A user scores 10 hits and 5 misses in a MoleMasher app, then clicks a Reset button (code shown below).
Write down the values displayed in LabelHitsNumber and LabelMissesNumber after the Reset button is clicked.
LabelHitsNumber: 10 ; LabelMissesNumber: 5
The values have remained the same because the variables have been initialised after setting the text values.
Write down any changes you would make to the code for the Reset button below:
when ButtonReset.Click do
set global hits to 0
set global misses to 0
set LabelHitsNumber.text to global hits
set LabelHitsNumber.text to global hits
Page 32
I ♥ My Smartphone Lesson 4: Times Table Helper
Lesson 4: Times Table Helper
Concepts introduced Further problem decomposition using procedures Fixed loops and loop index/counter
Computational Thinking themes Abstraction o data type: Boolean o selection: if Decomposition o break down creation of table into procedures for header and body Pattern Recognition/Abstraction o individual lines of each table created by repeated formula with variables Algorithm/Abstraction o repeated formula for lines of table used again in weight & currency extensions
Objectives Learners should be able to:
understand the use of an algorithm to develop a solution to a problem become more familiar with translating an algorithm into code become more familiar with using variables use procedures to create a more modular program understand the use of fixed loops and a loop variable
Outline Engage: Demonstrate working TimesTable app Explore: Learners go through TimesTable tutorial Explain: Tutor provides help as needed Evaluate: Tutor checks that apps work Elaborate: Tutorial extensions Deep understanding: Did you understand?
Materials App: TimesTable Screencast: TimesTable
Page 33
I ♥ My Smartphone Lesson 4: Times Table Helper
Details Demonstrate a fully-functional version of the TimesTable app to learners. Ask learners to predict what users should do and what will happen. Write this out as Input, Process and Output Go through algorithm and try to elicit as much of the code from learners as possible without using the screencast. Explain the use of a FOR loop to repeat a fixed number of times. Stress to learners that this kind of loop requires that we know in advance how often a task is repeated. If they have experience of an environment such as Scratch, compare it to a REPEAT block. Dry run (on the board or on paper) a FOR loop e.g. repeat printing a sentence 5 times. Then introduce the use of the loop variable to number the sentences. Once learners have done this, go through the Times Table Creator algorithm with them. Points to note: o Q: How will we store the table number? A: Use a variable. o Q: What are the main stages in this app? A: Get the table number, create the header and create the table. o Q: What would be the best way of dealing with the separate stages of creating the header and creating the table? A: Use procedures. Dry run on the board o building up the text for each line of the table using both text blocks and variable values o then appending these to the label’s existing text. Suggestion: link with incrementing a numeric variable in FingerPaint and MoleMasher app. Link in with comments here, pointing out to learners that they should always comment a procedure to explain what it does.
Extension 1 Stress to learners that this app requires no input from the user, but just uses the loop variable and the multiplier of 2.2 to create a table.
Extension 2 Show the similarity between the TimesTable app and this one – it’s essentially the same app, with a different multiplier variable. www.x-rates.com is a good exchange rate web site.
Learners could also add a suitable background image to the screen component.
Page 34
I ♥ My Smartphone Lesson 4: Times Table Helper
Further extension Use the Web component to ask Google Finance for the latest exchange rate and use that in the table to produce real-time values in the currency conversion table.
Did you understand (part 1)? There is a bug in the times table app. After creating the first times table, it keeps adding new tables on to the end of the previous one every time the display table button is clicked, instead of replacing the current times table.
Learners may not have noticed this, especially if they have omitted to tick the Scrollable property in their Screen1 component, so they may require help with this.
4.1 From a programming point of view, why is it a good idea to let the user enter the table via an input box and store this in a variable?
It generalises the problem (abstraction): using a variable allows us to deal with any times table – and to use the same code to do so. The alternative would be to have specific code for each times table (and obviously only permit a limited choice of tables).
4.2 Discuss why you think this happens. Write your reason below.
The Times Table label’s text property isn’t initialised; the app therefore continually appends the new times table to the old one.
4.3 Discuss what change you would need to make to the code to prevent this from happening. Describe it below.
Set the text property of the Times Table label to an empty/null string at the start of the CreateTimesTable procedure.
Page 35
I ♥ My Smartphone Lesson 4: Times Table Helper
4.4 After discussing your answer to 4.2 (above) with your tutor, make the change to your code. Did it fix the problem?
A common mistake is that learners will try to initialise the property at the end of the CreateTimesTable procedure, thereby “blanking out” the table that was just created. It will seem to learners as if nothing is being displayed at all.
Did you understand (part 2)? There is another bug in the times table app. When learners click the Display Table button without entering a number, the app will display an error message then quit.
This is a good opportunity to introduce the concept of an execution (run-time) error.
Don’t crash and burn! An app which crashes will attract very few users!
4.4 Discuss why you think the app crashed. Write your reason below.
There is no value for the CreateTimesTable procedure to multiply the loop counter with.
4.5 Discuss what could be done to prevent the app from crashing. Write down your suggestion below.
Prevent the app from continuing until it gets a [numeric] value into the text box.
Validating input Link into the fact that we have already tried to limit the range of possible inputs to numbers by selecting the NumbersOnly property in the TextBox component. Once learners have created a Notifier which validates the input, ask them if it is still possible to enter an invalid input. If so, what further measures could we take to prevent the app from proceeding until it has a valid input?
Page 36
I ♥ My Smartphone Lesson 4: Times Table Helper
Did you understand (part 3)?
4.6 Write down a range of valid values for the following inputs:
a) someone’s age: Numbers 0–1227
b) the number of days in a month: 1-31
4.7 Write down an invalid value for a number that an app will go on to divide another number by.
Zero.
4.8 In the previous example, we saw the use of an if…else statement to tell whether or not the user had entered a value into the text box.
Now consider an app which decides whether learners’ test scores resulted in a pass or a fail (assume a pass mark of 50).
Which of the following If…Else statements would produce the correct results? Write the letters of the correct statements below the table.
A IF testScore = 50 D IF testScore < 50 student has passed student has failed ELSE ELSE student has failed student has passed B IF testScore <= 50 E IF testScore ≠ 50 student has failed student has passed ELSE ELSE student has passed student has failed C IF testScore >= 50 F IF testScore > 50 student has passed student has passed ELSE ELSE student has failed student has failed
Correct results (letters): C, D
7 Jeanne Calment, the oldest verified human, died in Arles, France (the place of her birth) aged 122 years and 164 days on 4th August, 1997.
Page 37
I ♥ My Smartphone Lesson 4: Times Table Helper
Page 38
I ♥ My Smartphone Lesson 5: Virtual Map Tour
Lesson 5: Virtual Map Tour
Concepts introduced Lists (arrays) as data structures Linking to external data services
Computational Thinking themes
Abstraction/Pattern Recognition o use of corresponding lists to hold related data Decomposition o break down problem into noting list selection index and selecting equivalent item from related list
Objectives Learners should be able to:
understand the use of an algorithm to develop a solution to a problem become more familiar with translating an algorithm into code become more familiar with using variables use procedures to create a more modular program understand the use of fixed loops and a loop variable
Outline
Engage: Demonstrate working MapTour app Explore: Learners go through Map Tour tutorial Explain: Tutor provides help as needed Evaluate: Tutor checks that apps work Elaborate: Tutorial extensions Deep understanding: Did you understand?
Materials
App: MapTour Screencast: MapTour
Page 39
I ♥ My Smartphone Lesson 5: Virtual Map Tour
Details Demonstrate a fully-functional version of the MapTour app to learners. For this you can use a projector connected to a computer with the app running on the Android emulator or display the app working on a phone (installed or live testing).
Lists Introduce the idea of storing related data in a list with learners, then build up to the idea of tying multiple lists together with elements in equivalent locations.
Q: Where else could we use this? A: For example, in a high score table, with names and scores stored in equivalent locations of lists.
Extension 1 Learners can make this as local as they want – to their county, town or even street.
Extension 2: Cool feature The Location Sensor has many blocks related to GPS such as longitude, latitude, altitude, etc. Learners could create a live readout of any of these properties.
Further extension
IDL Geography Learners could create a geo-caching/treasure hunt app, with clues tied to locations – either in their local area, or virtually, with clues visible from Google’s Street View. If not set locally, the app’s locations could be within a country/city they are studying in geography, or even a world-wide hunt around famous locations.
Page 40
I ♥ My Smartphone Lesson 6: Heads I Win
Lesson 6: Heads I Win
Concepts introduced Conditional loops (and contrasting with fixed loops)
Computational Thinking themes Abstraction o fixed repetition: FOR loop o conditional repetition: WHILE loop Decomposition o use of procedure to initialise o multiple stages within loop Pattern Recognition o use of same procedure for button click and accelerometer shake Algorithm o counting length of run; reset initial value if run broken
Objectives Learners should be able to:
understand the use of an algorithm to develop a solution to a problem become more familiar with translating an algorithm into code understand the use of variables to maintain a count within a conditional loop
Computational Thinking themes Abstraction (through the use of variables) Pattern Recognition (through the use of one procedure being called repeatedly) Algorithms Decomposition
Outline Engage: Demonstrate HeadsIWin app Explore: Learners go through HeadsIWin algorithm and create code from this Explain: Tutor provides help as needed Evaluate: Tutor checks that apps work Elaborate/Deep understanding: Did you understand?
Materials
App: HeadsIWin
Page 41
I ♥ My Smartphone Lesson 6: Heads I Win
Details Demonstrate a fully-functional version of the HeadsIWin app to learners.
Go through algorithm and try to elicit as much of the code from learners as possible without using the screencast.
This lesson marks the first occasion that learners are required to create code from an algorithm without the support of a screencast. In recognition of this, there is nothing in the development of the app that they have not been exposed to already (other than the WHILE block).
Conditional Loop Go over the idea of a conditional loop. Try to elicit situations where it could be used.
Do a dry run through the algorithm on the board, asking learners to pick a random value for the side variable. Maintain a trace of the variables and show how the test in the loop is applied every time. Keep this on the board for the extension tasks.
The event-driven nature of App Inventor forced the use of this tried-and-tested exemplar for a conditional loop, as events cannot be handled inside one.
Extension 1 Learners will need to introduce a variable (e.g. tossCounter) to maintain a count of the total number of tosses. Common mistakes include:
Forgetting to declare and initialise tossCounter variable Incrementing the variable at the same point as incrementing headsCounter (inside the IF statement) Forgetting to initialise tossCounter every time ButtonTossCoin is clicked Forgetting to append the final value of tossCounter to the end of the output.
Extension 2 Learners need to work out the condition that ends the run i.e. a tails, and at this point initialise headsCounter to 0 inside the else statement.
The output will surprise learners, especially in terms of its variability. It can be an effective warning against the perils of gambling!
Extension 3 Introduce a new variable (tailsCounter).
Page 42
I ♥ My Smartphone Lesson 6: Heads I Win
Learners will need to work out that this is an extension of the previous example, whereby each side will re-initialise the counter for the other side i.e. a heads will result in tailsCounter = 0 and tails in headsCounter = 0.
It will also introduce a complex condition into the loop i.e. WHILE headsCounter = <6 OR tailsCounter<6
Q: Ask learners what would be the effect of changing the OR to an AND?
Q: Ask learners what would be the effect of changing the code to: WHILE headsCounter = <0 OR tailsCounter<0 or WHILE headsCounter = <0 AND tailsCounter<0
This could provide an opportunity to introduce the idea of an infinite loop. Contrast this with a fixed/FOR loop and why the latter can’t be infinite.
NB If an app performs a lengthy operation, Android will block the app’s user interface until the code has finished. In these circumstances, Android will display an "Application not responding" (ANR) dialogue if an activity does not react within 5 seconds. From this dialogue the user can choose to stop the application, so choose any further work in this respect with care!
Extension 4: Cool feature
Learners should recognise that they can create a procedure to toss the coin which can be called in both the button click and accelerometer shaking events. This reinforces the idea of procedures allowing us to write once and call many times.
NB Stress to learners that giving the phone any more than a gentle flick will cause the app to hang (as it tries to process lots of shake events) or even crash.
Page 43
I ♥ My Smartphone Lesson 6: Heads I Win
Page 44
I ♥ My Smartphone Lesson 7: Wiff-Waff Game
Lesson 7: Wiff-Waff Game
Concepts introduced Collision detection Working with graphics Motion detection and control
Computational Thinking themes Abstraction o bat and ball properties Decomposition o ball position determines action o ball in same position as bat/edge/bottom o use of procedures for set up; increase score; lose game Algorithm o determine ball's position and act Pattern Recognition o multiple use of procedure for increase score o reinitialise game state after losing
Objectives Learners should be able to:
understand the use of an algorithm to develop a solution to a problem become more familiar with translating an algorithm into code understand the use of a timer (integral to ball component) to trigger events in a program to maintain a count within a conditional loop
Outline Engage: Demonstrate working WiffWaff app Explore: Learners create WiffWaff game Explain: Tutor provides help as needed Evaluate: Tutor and learners check that apps work Elaborate/Deep understanding: Did you understand?
Materials
App: Wiff-Waff
Page 45
I ♥ My Smartphone Lesson 7: Wiff-Waff Game
Details Whilst this app requires more code than learners have previously created, stress to learners that they should concentrate on only one part at a time. By having the code split into events or procedures, the task of creating the app is therefore made much easier.
Point out to learners that the interval on the ball acts like a built-in clock/timer for this component.
Learners are likely to require help coding the when ball reaches an edge stage of the algorithm. This makes use of the when Ball.EdgeReached block with edge as a parameter.
For bat collisions, learners should use the when Ball.CollidedWith block, with their bat sprite as a parameter (below). Once again, it is likely that they will require help with this.
Page 46
I ♥ My Smartphone Lesson 7: Wiff-Waff Game
Did you understand (part 1)?
7.1 a) The algorithm above has a bug which shows itself when you lose. What is it?
It is impossible to restart the game.
b) Describe what you would have to do to your algorithm to fix it? Hint: the change should be made in the LoseGame procedure.
Add code to enable the start button.
c) Besides allowing us to concentrate on one sub-task at a time, write down one other benefit of splitting code up into procedures. Hint: there is a clue in the answer to part b) above.
It makes it easier to locate and correct errors in code. It also allows us to add to a sub-task by making the changes in one place only i.e. it generalises the problem.
7.2 Why do we test for a collision at the bottom of the screen in the if…else, rather than the other sides?
Because in this situation, there is only one condition to test for, which therefore simplifies the code. Hitting the bottom of the screen is the thing we are really checking for; all other collisions result in the same response of a bounce.
Extension 1: Skill levels This will involve a certain amount of rearrangement of the components. Learners may also wish to consider altering the scoring for different levels.
Further Extensions
Include a TinyDB component to save the previous score. The author’s own students particularly enjoyed recording their own sounds, especially for the LoseGame procedure. A taunt of “Wiff-Waff!” seemed to go down best!
Page 47
I ♥ My Smartphone Lesson 7: Wiff-Waff Game
Did you understand (part 2)?
Algorithm Moving bat (using Orientation Sensor) if orientation sensor roll > 0 then (phone is tilted to the right) set the bat heading to the right (0) else (phone is tilted to the left) set the bat heading to the left (180)
7.3 What direction will the bat move if the phone is completely level?
It will move to the left.
Why?
Because the roll value will be zero, which falls within “else” in the algorithm.
Page 48
I ♥ My Smartphone Mobile App Project
Mobile App Project
Analyse Working in pairs or small groups, brainstorm three ideas for apps.
As you do so, think about each app’s possible users and the need it’s going to fulfil. Think of how it might link in with other subject areas you’re studying.
Encourage learners to consider the factors in bold (above). They may even wish to include a user persona to help clarify this (below):
User persona example for app which sends friends a wake-up text Jo 14 years old Has to get up early for school (on weekdays) and a paper round (on weekends, and holidays) Tends to oversleep Has received a warning for punctuality slipping below 90% Owns an Android smartphone
Now discuss your ideas with your tutor.
Once you have agreed on a project, write down a fuller description of what the app will do below. Include any mobile features it will use:
The main issue to look out for here is to ensure that the scale of the project is achievable for the learners concerned.
Design (Interface) Make a sketch of your app’s interface Your sketch should be labelled to show what each component does.
Allow learners to create wireframes of their app. Ensure these are appropriately annotated.
There’s a good series of App 101 videos from Appiction on YouTube:
Video Why design is important: http://www.youtube.com/watch?v=BuP29Zmglks
Video Wireframing your app: http://www.youtube.com/watch?v=nCmV-8xA48M
Page 49
I ♥ My Smartphone Mobile App Project
Design (Code) Stress to learners that they should take time to get their algorithms right before coding. Remember the ancient proverb: Hours of coding can save minutes of design!
Implement Remind learners about use of meaningful identifiers for components, variables and procedures. Remind learners about the importance of internal commentary in code.
Test Test your app to make sure it works.
Learners should perform self-testing and get their classmates to test. They may wish to issue questionnaires to their test group.
Document
Let’s imagine that you’re going to sell your app on an app store.
Write down below a brief description of your app’s main features and how to use them. Remember, you’re trying to get people to buy your app!
Learners should show consideration of their target market here.
Evaluate
Encourage learners to discuss and reflect honestly on their work.
Maintain
Now imagine that you are adapting your app to make it work on a tablet computer. What changes would you make?
Brainstorm with learners aspects of tablet computing they might consider e.g. screen size and information that can be presented at one time is the app suited to a less portable device will it benefit from rich graphics does it requires a data connection (not standard on tablets), etc? Some apps will therefore translate better to a tablet format than others.
Page 50
I ♥ My Smartphone Mobile App Project
Inter-disciplinary learning in the project
Art & Design Design an icon, splash screen or game character for your app.
Music Create a soundtrack or jingle for your app.
Business education/art/media studies/languages Create an international marketing campaign for your app. Assign roles to different members of the team. Post it onto an app store and sell it for real – even if it’s just to friends & family (see “Publishing on Google Play”, page 16).
Video How to create revenue from your app (Appiction App Dev 101) http://www.youtube.com/watch?v=RxIPArYs8eI
Video At what price should I sell my app? (Appiction App Dev 101) http://www.youtube.com/watch?v=iZUkjSmzY3c
Language Make a foreign language version of your app. This will mean translating the marketing text and any on-screen text into the language you are studying. This is an important job in the global software industry and is known as localisation.
Congratulations!
Encourage learners to continue their app development at home.
Point out that they have only scratched the surface and that there are many more functions in App Inventor such as text messaging and social networking (e.g. Twitter) integration to name just two.
Page 51
I ♥ My Smartphone Mobile App Project
Page 52
I ♥ My Smartphone Appendices
Appendices
Page 53
I ♥ My Smartphone Appendices
Appendix A: Learner Tracking Sheet
Name: ______Class: ______
Stage Progress * Date Comment (D, C or S) completed Introduction Lessons 1: Virtual Pet
2: Finger Painting
3: Mole Masher
4: Times Table
5: Virtual Map
6: Heads I Win
7: Wiff-Waff Project Analysis
Design
Implementation
Testing
Documentation
Evaluation
Maintenance
PROGRESS * Developing where the learner is working to acquire skills or knowledge Consolidating where the learner is building competence and confidence in using the skills or knowledge Secure where the learner is able to apply the skills or knowledge confidently in more complex or new situations
Page 54
I ♥ My Smartphone Appendices
Appendix B: Sample Code
Lesson 1: VirtualPet1
Lesson 1: VirtualPet2
Page 55
I ♥ My Smartphone Appendices
Lesson 2: FingerPaint1
Page 56
I ♥ My Smartphone Appendices
Lesson 2: FingerPaint2
Page 57
I ♥ My Smartphone Appendices
Lesson 3: Mole Masher (inc. extensions)
Page 58
I ♥ My Smartphone Appendices
Lesson 4: TimesTable Helper (inc. validation)
Page 59
I ♥ My Smartphone Appendices
Lesson 5: Virtual Map Tour (inc. extensions)
Page 60
I ♥ My Smartphone Appendices
Lesson 6: Heads I Win (inc. extensions)
Page 61
I ♥ My Smartphone Appendices
Lesson 7: Wiff-Waff Game (inc. extensions)
Page 62
I ♥ My Smartphone Appendices
Appendix C: App Inventor Handout
The following four pages contain:
the App Inventor Handout used in Task 4 of Lesson 1 (see page 20); sample answers for above.
Page 63
Name: ______Class: ______Date: ______
Mobile App Development: App Inventor
The screenshots below are from an App Inventor program called VirtualPet. When the program is running on a phone, a user can “stroke” the cat by clicking the picture, causing it to meow. Answer the questions below.
1. PHONE a. Explain how the Virtual Pet app works from the user’s point of view: ______b. What happens if the user touches the picture of the cat? ______c. What happens if the user touches the “Stroke me!” text label? ______d. What happens if the user presses a button on the actual phone? ______
2. COMPONENT DESIGNER 1 2 3 5
a b
4
1. Palette: holds the components you can use in your program, separated into categories 2. Viewer: lets you arrange components on a rough preview of the phone screen 3. Components: lists components in the app 4. Media: lists media files for the app 5. Properties: of selected component
3. PROPERTIES (for button shown on page 1) a. What does this mean about the image property for the button? What is it telling the computer? ______b. What does this mean about the width and height for the button? What is it telling the computer? ______
PROPERTIES (for label shown opposite) c. What does this mean about the background colour of the label? ______c ______d. What does this mean about the text of the label? ______e. What does this mean about the alignment? Is the label centred? ______d d ______e e ______f f g f. What does this mean about the text colour? What is blue? ______g. What does this mean about the label? What would happen if it were unchecked? ______
4. BLOCKS EDITOR a. Explain what the example program opposite does: ______b. What is the event that causes something to happen? ______c. What is the action that happens after the event? ______
Mobile App Development: App Inventor (Sample answers)
1. PHONE a. Explain how the Virtual Pet app works from the user’s point of view: The user strokes the cat by touching the picture of the cat. The phone makes a meowing noise. b. What happens if the user touches the picture of the cat? The phone “meows” by making a purring sound c. What happens if the user touches the “Stroke me!” text label? Nothing d. What happens if the user presses a button on the actual phone? The phone does whatever that button means, like returning to main menu
3. PROPERTIES (for button shown on page 1) a. What does this mean about the image property for the button? What is it telling the computer? The button looks like the cat.png image rather than looking like a plain button b. What does this mean about the width and height for the button? What is it telling the computer? The width and height are set automatically by the phone, based on the image size. The size will be just enough and no more to accommodate the image.
PROPERTIES (for label shown opposite) c. What does this mean about the background colour of the label? The background colour of the label is light grey. The light grey fills the whole label area, surrounding the text d. What does this mean about the text of the label? The label displays the text “Stroke me!” e. What does this mean about the alignment? Is the label centred? The text is centred within the label; the label is not centred in the screen. f. What does this mean about the text colour? What is blue? The text is blue. g. What does this mean about the label? What would happen if it were unchecked? The label is visible. If the box were unchecked, the label would be invisible and hidden from view.
4. BLOCKS EDITOR a. Explain what the example program opposite does: When the button is clicked, the sound plays whatever it is set to. b. What is the event that causes something to happen? The event is when the click/press of the button. c. What is the action that happens after the event? The sound plays, which means that the sound file associated with the “SoundPet” component is played.