Creating Mobile Apps with App Inventor! Day 4 Google search Kris Gordon Ludlow for links.

Slides:



Advertisements
Similar presentations
Understanding an Apps Architecture ASFA Computer Science: Principles Fall 2013.
Advertisements

Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
Android UserInterfaces Nasrullah Niazi. overView All user interface elements in an Android app are built using View and ViewGroup objects. A View is an.
TouchDevelop Chapter 5-7 Chapter 5 Audio Chapter 6 Camera, Graphics and Video Chapter 7 Sensors Mengfei Ren.
Android architecture overview 1 CS 150. Android  A software stack for mobile devices developed and managed by Open Handset Alliance  Free software under.
Microsoft Excel. Click on “Start,” then “Microsoft Office Excel.”
App Inventor Useful links:
A. How do we tell the location by letters and numbers?
靜宜大學資管系 楊子青 1 Programming Your App’s Memory 靜宜大學資管系 楊子青
Direction at your fingertips. A compass rose is a design on a map that shows directions. It shows north, south, east, west, northeast, northwest, southeast,
App Inventor Barb Ericson July 3, 2013.
Sensors. Point your phone at the sky, and Google Sky Map tells you which stars you’re looking at. Tilt your phone, and you can control the game you’re.
The Creative Art of Programming © Copyright 2014 Barbara Ann Walters. All Rights Reserved.
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
A wonderful informal assessment tool! Created by Joell Wilkins using the Apple app, so please note Android apps might be different. This powerpoint may.
App Inventor Barb Ericson Georgia Tech
Ch 14. Understanding an App’s Architecture Two perspectives 1.Programmer: a)Components & Behaviour b)Designed in Component designer Blocks editor 2.End-user:
Programing App Inventor. Variable Declaration App Inventor: Declare Variables using the “Define Variable As” Block – Find the Blocks Editor (top-left),
SCERSIG: Creating Android Apps with App Inventor 26 October 2011 Ric Paul, Health Services Library, Southampton.
1 CGS1060 Mobile UIs Copyright 2012 by Janson Industries.
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
How to Use App Inventor in Your Classroom Julie Friesen Piper Middle School Technology 6 th -8 th Grades Edmodo Group Code to Join for More Resources:
 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
Creating Mobile Apps with App Inventor! Day 5 Google search Kris Gordon Ludlow for links.
1 TouchDevelop Chapter 8-10 Presenter: Jing Xu. 2 Outline Interactions Game Board Tiles and Printing.
Quadratic Equation Solver Tutorial. Introduction We will be making an app to solve 2 nd level polynomials like ax 2 +bx+c. We will model our app upon.
ACS-1805 Introduction to Programming 1805 introduces students to programming using technology for creating programs that run on Android devices. Android:
CS 104 October 26, 2011 App Inventor. Agenda Discuss guest speakers Discuss quiz Finish Paint Pot Discuss concepts from Chapters 2 & 3 Mole Mash (if time.
Intro to AppInventor Dr. Dante Ciolfi (chawl fee).
Introduction to TouchDevelop
Java Software Solutions Lewis and Loftus Chapter 10 1 Copyright 1997 by John Lewis and William Loftus. All rights reserved. Graphical User Interfaces --
App Inventor MIT App Inventor.
Mappler Mobile – iPhone Prepared by VERTICES
Programming with App Inventor Computing Institute for K-12 Teachers Summer 2012 Workshop.
MIT AI DEMO Start New Program Name “My First Program”
© 2016 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part. Android Boot Camp.
Review of Applications By Phoebe Stewart. Introduction I shall be talking about the features, strengths and weaknesses of two different apps, a learning.
1.As you come in, please find a seat at the table labeled with your grade level! 2. Help yourself to some snacks and sign in! 3. Begin the opening activity.
Incorporating Feedback Lesson 5 0. Check-in: paper prototype By now, your paper prototype should be complete, so that you can begin creating your app.
Sensors in android. App being more applicable Keeping track of your heart beat while jogging. Pointing the phone camera towards the night sky to know.
JDS5 Training Guide. On Start Up you will see this screen click the OK button Click OK.
A CCELEROMETER. Accelerometers are devices that can measure acceleration, but in smartphones, they're able to detect changes in orientation and tell the.
The ambient light sensor in a smart phone is what measures how bright the light is. It’s the phones software that adjusts the brightness in the display.
App Inventor for Android 唐健恒. Outline About App Inventor Getting started Tutorials Reference Documentation  Component Reference  Blocks Reference.
Sensors For Mobile Phones  Ambient Light Sensor  Proximity Sensor  GPS Receiver Sensor  Gyroscope Sensor  Barometer Sensor  Accelerometer Sensor.
Kids’ GPS watch Q50 Q523 Step by step guide Apply for the watch ID starting with 145.
Link for App Inventor II:
App Inventor Chapter 17 – Creating Animated Apps.
Chapter 8 Sensors and Camera. Figure 08.01: The Accelerometer can gauge the orientation of a stationary device.
Introduction to Programming and App Inventor. Introduction What is a computer program? Introducing App Inventor Getting hands on with App Inventor.
Introduction to App Inventor 2 ASFA AP CS Principles
North Attleboro High School
Dronely: A Visual Block Programming Language for the Control of Drones
Microsoft Office 2007-Illustrated
Procedures, Simple Expressions
Visual Programming week # 02 APP (Application) Architecture.
App Inventor Want to learn how to make mobile apps for your Android phone or tablet?
Using the INSERT TAB in MS Word 2007
Lesson 1: Buttons and Events – 12/18
Chap 7. Building Java Graphical User Interfaces
Chapter 16 – Programming your App’s Memory
Graphical User Interfaces -- Introduction
How to Download the RRC App to Your Phone
Visual Programming week # 06
Map & Compass Skills.
CSC 581: Mobile App Development
Android Topics Sensors Accelerometer and the Coordinate System
Visual Programming week # 05 Lists Quiz Tutorial.
Presentation transcript:

Creating Mobile Apps with App Inventor! Day 4 Google search Kris Gordon Ludlow for links

Day 4’s Topics 1.Some fun components –Barcode Scanner –SpeechRecognizer –TextToSpeech –Location Sensor –Orientation Sensor –Accelerometer Sensor 2.Lab 4

Components Components –Elements you combine to create apps’ like all ingredients in a recipe. Component examples –Label component: shows text on the screen –Button component: tap to initiate an action –Drawing Canvas: to hold still images or animations. Components we will work with today –Barcode scanner –Accelerometer –motion sensor

Barcode Scanner This component scans barcodes. –Bookland/EAN codes on the back of books, –UPC commercial barcodes at the store –All kinds of barcodes. It also reads QR codes. –Often used to provide links to download apps.

1. In Designer, you need a button with the word scan and a label with no text. 2. From the sensors drawer retrieve a Barcode Scanner component.

3. Switch to the Blocks Editor. We are going to click the button to scan a barcode. What Block should you choose? When I click button1 do What will the program do when we click the button? Call the barcode scanner to do the scan After the barcode is scanned we need a result. What Block should we choose? When barcoderscanner1 has a result /set the label text to/ barcodescanner1 result

Lab 4 part 1 Your turn

Speech Recognizer The SpeechRecognizer component allows your device to understand speech.

1.In Designer: –button –label-fill parent in width and automatic in height (so that it can scroll) 2. SpeechRecognizer (Media drawer) 3.Clock component (User Interface drawer) to provide time stamping. Steps

Steps 3. In the Blocks Editor: Button1.Click1 framework SpeechRecognizer1.GetText block SpeechRecognizer1.AfterGettingText set label1.text to (label drawer) 4. We'll build our display of each voice in the AfterGettingText.

5. Get Label1.Text from the Label1 drawer. Use a make a list block from Built- In/Lists drawer. Basically, we join new notes to the existing text, automatically adding the new note's date and time, putting in carriage returns (line breaks or \n).

Lab 4 part 2 Let’s implement a voice note taker app.

Sensors Among the several features that make smartphones so powerful are onboard sensors—those being devices telling the phone various things about its environment. The three main built-in device sensors (accessed by components in Design's Sensor drawer) that we can use in our apps are: 1. AccelerometerSensor: allows our apps to determine and perform tasks based on how fast the device is moving. 2. LocationSensor: lets the app know where the device is located and do things related to that data. 3. OrientationSensor: vertical, horizontal, tilted, and so on—our apps know in what orientation the device is being held and can process and use that data also.

Location Sensor Here are two basic methods of the location sensor's operation: 1. Network: using the network method, the locat‍‍ion sensor triangulates (a way of calculating position from two or more sources) from the nearest cell towers available. If there's only one, the result might be off by hundreds of yards/meters or even further. 2. GPS: accessing available Global Positioning Satellites with the device's built-in GPS antenna, the location sensor under good conditions can locate the device to within feet anywhere on Earth. If you are in a building, GPS signals can't be received. the most reliably accessible method is network, and GPS the most accurate.

Location App 1. Drop a button, three label, and a LocationSensor component onto the screen in the Designer.

2. In the Blocks Editor, set up the button as shown below.

Lab 4 part 3 Let’s implement a location app.

Orientation Sensor Use an orientation sensor component to determine the phone's spatial orientation. An orientation sensor is a non-visible component that reports the following three values, in degrees: Roll : 0 degree when the device is level, increasing to 90 degrees as the device is tilted up onto its left side, and decreasing to −90 degrees when the device is tilted up onto its right side. Pitch : 0 degree when the device is level, increasing to 90 degrees as the device is tilted so its top is pointing down, then decreasing to 0 degree as it gets turned over. Similarly, as the device is tilted so its bottom points down, pitch decreases to −90 degrees, then increases to 0 degree as it gets turned all the way over. Azimuth : 0 degree when the top of the device is pointing north, 90 degrees when it is pointing east, 180 degrees when it is pointing south, 270 degrees when it is pointing west, etc.

Compass Example The OrientationSensor can be used as a compass to find out which direction (north/south, east/west) the phone is pointing. The OrientationSensor provides the OrientationChanged event, which is triggered every time the orientation changes. The Azimuth reading is useful for this type of orientation. Azimuth is always between 0 and 360 degrees, with 0 being north; 90, east; 180, south; and 270, west. So a reading of 45 means the phone is pointing northeast, 135 means southeast, 225 means southwest, and 315 means northwest. A simple compass app that displays in text which direction the phone is pointing.

Steps 1. In the Designer, do the following as shown below.

Steps (Cont’d) 2. In the Blocks Editor, do the following as shown below.

Lab 4 part 4 Let’s implement a compass app.

Roll Example The OrientationSensor is used for game-like apps in which the user controls the action by tilting the device. Now let’s use the Roll Parameter to make an app to move an image left or right on the screen based on the user tilting the device, like you might do in a shooting or driving game.

Steps 1. In the Designer, drag out a orientation sensor. Drag out a Canvas and set the Width and the Height to “Fill parent”. Then add a Ball within the Canvas, and add two Labels display roll and pitch value, as shown below.

Steps (Cont’d) 2. In the Blocks Editor, do the following as shown below.

Lab 4 part 5 Let’s implement a roll app.

Accelerometer Sensor This component senses the Android device's accelerometer, which detects shaking and measures acceleration in three dimensions. Acceleration is measured in SI units (m/s 2 ). If the device is a rest lying flat on its back, the Z acceleration will be about 9.8. The component produces three values. XAccel : Positive when the device is tilted to the right (that is, its left side is raised), and negative when the device is tilted to the left (its right size is raised). YAccel : Positive when its bottom is raised, and negative when its top is raised. ZAccel : Positive when the display is facing up, and negative when the display is facing down.

Shake and TextToSpeech Example The OrientationSensor can be used as a compass to find out which direction (north/south, east/west) the phone is pointing. The OrientationSensor provides the OrientationChanged event, which is triggered every time the orientation changes. The Azimuth reading is useful for this type of orientation. Azimuth is always between 0 and 360 degrees, with 0 being north; 90, east; 180, south; and 270, west. So a reading of 45 means the phone is pointing northeast, 135 means southeast, 225 means southwest, and 315 means northwest. A simple compass app that displays in text which direction the phone is pointing.

Steps 1. In the Designer, do the following as shown below.

Steps (Cont’d) 2. In the Blocks Editor, do the following as shown below.

Lab 4 part 6 Let’s implement a shake and speak app.

References 1. nce/components/sensors.html#LocationSen sorhttp://beta.appinventor.mit.edu/learn/refere nce/components/sensors.html#LocationSen sor 2.Ralph Roberts, Google App Inventor, Packt Publishing, 2011