Introduction
Scratch
Scratch is a programming language that helps us to create our own stories, animations, games, etc. which you can share on the web.
Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab, with financial support from the National Science Foundation, Microsoft, Intel Foundation, Mac Arthur Foundation, Google, Iomega and MIT Media Lab research consortia.
It is used worldwide in schools, colleges, museums, community centers and homes. It is intended specially for people from age group 6-16 but people of all ages have used it.
For example, a small kid can use it for entertainment purposes while a grown up can use it for completing any school or college project.
With simple drag and drop functionality, anyone can make an application using Scratch. No programming skills are required to build an application based on Scratch.
The user interface for the Scratch development environment divides the screen into several panes: on the left is the block palette, in the middle the current sprite info and scripts area, and on the right the stage and sprite list. The block palette has code fragments (called "blocks") that can be dragged onto the scripts area to make programs.
App Inventor
AppInventor is developed by Google for creating applications for Android OS.
It's quite similar to “Scratch” as it also uses the concept of drag and drop and connecting blocks for making an application work. This application is aimed at people who are not familiar with a programming language.
According to Google, “A sixth grade student can also build Android apps using the AppInventor.”
The applications developed from AppInventor can be tested on an emulator or a phone. If all goes well, we can package the app to the phone and use it.
Basic Functionalities
The AppInventor involves basic two components:
- The Design View
- It has all the components one will need to design an application.
- The Block Editor View
- It deals with actual function on combining blocks to execute an application.
Setting up the AppIventor
Pre-requisites for setting up an AppInventor
- One should be having a Gmail account.
Steps for setting up AppIventor
- Download the setup from the following site AppInventorSetup.
- Then Install the AppInventor setup.
- This is needed to connect and run the applications on a emulator or on a phone.
- Once you have installed the setup into the PC, you are on you way to start building apps via
AppInventor.
Steps on how to start AppInventor
- Enter your Gmail credentials.
- Click on “
MyProjects".
- Here one can see our existing projects we have created before or we can create your new project.
- Click on New->And give the name of the project (for e.g.:Test).
- This will open the Design View of the
AppInventor.
Design View
The design view has a different set of components, each of them deals with different kinds of methods, actions and events. Based on the user’s requirement, he can use the different components for building the application. These components are given to the user from Google they can’t modify or customize it based on their requirements.
Following are set of component used in the Design View:
- Basic components
- Media components
- Animation components
- Social components
- Sensors components
- Screen Arrangement components
- Other components
Basic Components
The basic components provides the basic functionality for building the application. It includes the following components:
Button Canvas CheckBox Clock Image ListPicker PasswordTextBox Screen TextBox TinyDB
One can use any of the components based on his/her requirements.
Media Components
The media components provides the functionality related to media like voice, image and video.
It includes the following components:
Camera ImagePicker Player Sound VideoPlayer
Animation Components
The animation components provides the functionality related to animation in the applications. It includes the following components:
Social Components
The social components provide the functionality to include the social networking things into your application. It will help to bring the social networking feel in your apps. It includes the following components:
- Contact Picker
- Email Picker
- Phone Call
- PhoneNumber Picker
- Texting
- Twitter
Sensors Components
The sensors components provides the functionality of tracking of location, usage of accelerometer in gaming, etc. It includes the following components:
- Accelerometer Sensor
- Location Sensor
- Orientation Sensor
Screen Arrangement Components
The screen arrangement components is useful in arranging and changing the screen of an application according to the user’s requirement. It includes the following components:
- Horizontal Arrangement
- Vertical Arrangement
- Table Arrangement
Other Components
Apart from the above components, there some other components which can be used for special purposes across various applications. It includes the following components:
- Activity Starter
- Barcode Scanner
- Bluetooth Client
- Bluetooth Server
- Notifier
- Speech Recognizer
- Text To Speech
- Tiny WebDB
- Web
Block Editor View
This view defines the different set of blocks which can be used to make our application perform different set of operations based on user requirements.
Each component of Design View has its own set of blocks which can be used to decide the behavior of that component to use it in the application.
These blocks are useful in building the application the way we want. It describes the behaviour of the application.
The behaviour of the application is decided based on different ways the blocks are connected.
This in a way is called as block programming. So even a person who does not know programming that well can see the blocks and connect blocks with each other to make the application run.
Apart from it, Appinventor provides some standard set of blocks as follows:
- Definition blocks
- These blocks are used to define some variable at any time to make some of the procedural calls, etc.
- Text blocks
- These blocks are used to perform different set of operations related to text like compare, split, convert to uppercase or lowercase, etc.
- List Blocks
- These blocks are used to perform list operations like making a list, selecting a list item, inserting into a list, deletion from a list, etc.
- Math Blocks
- These blocks allow us to perform all operations related to math.
- Logic Blocks
- These blocks are used to perform logical operations like and or and not.
- Control Blocks
- These blocks are used to perform operations like
if-else, condition, foreach, range, etc.
- Color Blocks
- These blocks are used to perform color operations like changing color, defining new color to a component, etc.
Each component in the design view has its own set blocks.
CaseStudy
Building a Simple Twitter Client Using Google AppInventor
- One can build many applications based on their requirements.
- Here we are going to build a simple twitter client.
- In this twitter application, each application is associated to one person only as the credentials are already mapped into the applications.
- As we know, we have two basic components for building any application in
AppInventor.
First of all, we will look into the design view:
Steps for designing the Design View of Twitter Client
- We have a “
Login” Button which will enable us to login into the application. - Then we have label name “
Label1” having message “Not Logged in?”. This label helps to identify the user whether he has successfully logged in or not. - On successful authentication, the message in label will changed to “Logged in”.
- Then we have a
TextBox called “tweetMsgBox”. Here the user will write his/her Tweets. - A
Button named “tweetButton” is used when a user is done writing his/her tweet and wants to post it. - The “
tweetLogout” Button is used to logout from the application. - Also we have non-visible component called “
Twitter” which will help us to perform all operations related to Twitter.
Authentication Mechanism in Twitter
- The Twitter component used in the AppInventor does not have any block for accepting username and password so that it can authorize the client..
- As Twitter uses OAuth mechanism for authentication, we need to authorize and give access to our application so that it access the twitter functionalities..
- For more details on OAuth, refer to https://dev.twitter.com/docs/auth/.
- So basically a Twitter component will require a “Consumer Key” and “Consumer secret” for the authentication mechanism.
- Once we get the consumer key and consumer secret, it will authenticate the client.
Steps for getting Consumer Key and Consumer Secret
- Go the site http://dev.twitter.com/.
- Login with your twitter credentials.
- Once you are logged in, you need fill in the required details after that you will be having your consumer key and consumer secret.
- So when you login with your twitter client with the consumer key and consumer secret, it will ask the permission to authorize the application.
- It will also ask for the twitter username and password.
- Once you authorize, you can then post your tweets.
Now we can look the Block Editor View:
Steps for Designing the Block Editor View
- First of all, we need to authorize the twitter client (i.e., need to login). So on the LoginButton click, we need to call the block “
Twitter.Authorize”. - This block uses the OAuth Authentication mechanism used the consumer key and consumer secret defined in the Twitter component of Design View to authenticate the client.
- Initially, we set the visibility of
tweetMsgBox, tweetButton and tweetLogout Button as fasle. - On successful login, we will set the visibility of login button as
false and the visibility of of tweetMsgBox, tweetButton and tweetLogout Button as true. - User can write any tweet in the
tweetMsgBox and post it by clicking the tweetButton. - After the user is done with its tweeting, he can logout of the system using logout button which calls the
Twitter.DeAuthorize block and also sets the visibility of the tweetMsgBox, tweetButton and tweetLogout Button as false. - It then returns to the main login page again.
Conclusion
With the help of RAD tools like Google App Inventor, one can easily build an Android application in a fast way.
AppInventor provides a set of functionalities in its setup. If our requirement for building an application has all the components/blocks in it, we can build our application in a quick and easy way using the AppInventor.
As of latest, GoogleApp Inventor has been made open source by Google Labs which is taken up by MIT now. So this will now function under the MIT Labs.
