Android Development for Everyday People - Diving In Part I

We start here at the very beginning. For our first application, we shall be creating the 3 Number Average program as an Android application.

I intend to show you the thought process I follow when creating an application. I learned the NICE technique while learning Visual Basic 6 a lifetime ago and I haven’t deviated too much from it.

NICE means Name, Interface, Controls and Events. Name refers to the name of the application you want to create. Interface refers to what your application looks like. Controls are the elements of the user interface while Events are responses to the interaction of the user with the user interface.

Getting Started

The first step in the creation of anything is to give it a name. The act of naming embodies properties that are desired in the named object. As an African, the act of naming is taken seriously as Africans believe that the name a child bears affects his life.

As a programmer, I will state that by getting the name right, you force your mind to converge around a single spot. Contrary to the philosophy of being open minded, a creative person cannot be open minded when creating. The act of creation is simple. You either focus or you fail. A name helps you to focus.

Our first application is called the Three Number Average. From the name, you should already be able to guess what it does. It is a simple mobile application for calculating the average of three numbers.

It sounds simple enough. But if you remember what I mentioned about IPO (Input, Process and Output), the first consideration we must have is our input. Input is how we will be taking in the 3 numbers. Our process is the computation of our average while the output is how our user will see the result of the computation.

Once we have an idea of the IPO process, we can draw our user interface. Our user interface is shown below:

If you look at the user interface above, the Compute Average block will be a button while for input we will use textboxes. The others will be labels. These are our controls. The C in the NICE acronym.

Even without being computer savy, I expect that you know that a button should be pressed. Pressing a button in our case will make the program execute an action. When a button is pressed, the program should grab the number values from the textboxes and display them in the label.

Even though this is a simple program, I would like to put 2 conditions that should be met before our program can run. This is the art of defensive programming. We don’t want our users to be able to do anything that can crash our program. These conditions are:

1. The textboxes should only allow numbers as input
2. The program should only compute the average when all the 3 textboxes are filled

Keeping these two conditions in mind, let’s get started.

Project Creation

We start by creating a new project. Go the menu of App Inventor and select new project. Enter the name of the project as shown below:

After this, the project screen opens. This is your project screen an all you are going to do will be done here.

Using this screen, we can create any application we intend to create. I truly love the prototyping qualities in App Inventor because it lets you quickly create the vision of what you want to create. You don’t have to set up anything. Just dive in and start creating.

Adding Controls

Having named our application, the next thing we need to do is create the user interface. The first step in this task is to set the properties for our screen.

Set you AlignHorizontal property from Left to Center. This will make all the components you place on the screen to be aligned around the center.

Next we place 3 HorizontalArrangement components on the screen. They can be found in the Layout drawer of the Palette. Our application screen will now look like this:

Now to each Horizontal Arrangement, we add a label and a textbox. If you figure how to do this, your application screen will now look like this:

Next we add our button and 2 labels. Our user interface will now look like this:

Setting Properties

For our screen we want to change our Screen Orientation from Unspecified to Portrait and Title from Screen1 to Three Number Average. In App Inventor, your screen icon is what the user will see when the application is installed on his phone. If you don’t set an icon, App Inventor will use its default icon.

For the labels, set the Text property to match what we have in the interface that we have designed. For label 5 clear out the Text property. Once you change the Text property of label 5 to empty, it shrinks to a dash. Don’t worry about that for now.

As shown below, the Text property is what is displayed on the label.

For the textboxes, first change the Hint property to Please enter a number. This is what the user will see when the application is running on his phone. You can customise it to be specific for each textbox. Thus your Hint for the first textbox could be Please enter the first number. To make your application take only numbers as input, you need to check the NumberOnly property. The properties for the first textbox are shown below:

For our button, we set its Text property to Compute Average. Our user interface is complete and looks like this:

As you can see, our 5^th label is barely visible because we set its text to empty. If you have made it this far, I want to congratulate you as you have done 75% of the required work. The rest is to create the events you need and you are all done. Before we do that however, I want to teach you about testing your application.

Application Testing

If you go to the App Inventor website, you will be given all you need to setup your phone for App Testing. If you have a phone and follow the instructions, you should be all setup to run the app on your phone.

However if you don’t have a phone or in my case if you have to teach a class of students, you must run everything on your machine. I struggled with this problem until I finally solved it by using BlueStacks.

BlueStacks is a desktop application that allows you to run Android applications on your local machine. 

Download and installation is easy so I won’t cover that here. Once your installation is completed, launch BlueStacks. If you are offline, you will get the screen shown below:

The labelled part called APK is where you click to load your APK file for a project. So how do you create an APK file?

Creating an APK File

The process of creating an APK file is simple and easy in App Inventor. All you do is go to the menu and click App (save APK to my computer). This is shown below:

Once you do this, App Inventor will package your application and save it in the downloads folder of your machine.

Running the APK File

When you want to run an APK, click the APK tab in BlueStacks and navigate to the application you want to run. Select it and BlueStacks and click the Open button will take care of the rest. You can see this below:

Once the application is installed, you will get notification from BlueStacks that the application has finished installing.

Click on the All Apps button in BlueStacks and you will see the ThreeNumberAverage installed on your machine. My screen is shown below with the ThreeNumberAverage pointed out in red.

Click on it and application to launch it. Our application is shown below.

So our application is done and running on our BlueStacks. Since you have the APK, you can install it on your own phone. Do your own research on how to do this. Proceed at your own risk.

Conclusion

Congratulations on making it to the end of this week’s topic for Android Development for Everyday People. We are by no means done with this deep dive but I wanted to give you time to catch your breath as this week’s post was long and involves you having to do some research.

At this stage you should have version of the ThreeNumberAverage running on your BlueStacks. If you have a phone, you can run it on your phone. It does nothing because we haven’t added events to our application.

As a homework, go through this post again and work through your own application idea. Choose something simple and get it to work.

Join me next week for the concluding part of this section of Android Development for Everyday People.

Android Development for Everyday People - Introduction

Hello,

Welcome to Android Development for Everyday People. This course is designed for anyone with an idea for an application who doesn't know how to program. I assume that you have a laptop and can use the computer reasonably well. Beyond that, know this anyone can learn how to program. A background in engineering or science is not required. Patience, practice, and an interest in the subject matter should suffice, along with the required software and hardware.

On the software end, you have everything you need. We will be using a cloud based application called App Inventor so there is nothing new to install. I only ask that you use a modern browser like Google Chrome or Opera.

I started this course as a way to teach absolute beginners how to program without having the obstacle of learning how to code. Mobile applications were chosen as the focus because there is nothing more satisfying that seeing an application that you have created being used by someone else. The future is mobile and by taking this step, you are getting into an exciting time in history.

In the last quarter of 2008, the Android operating system launched. Today in 2016, Android is the number 1 mobile operating system in the world. The continued growth of Android is assured so learning how to create mobile applications means that you will be relevant in the future of technology as a creator not as a consumer.

In the early days, developing a mobile application involved programming in Java. This made the development of Android applications exclusive to programmers. Google introduced App Inventor as a way to democratize app development for non-programmers.

In 2015, the Android One device would be launched in Nigeria. This represents an attempt at making smartphones available for a new generation of users. Coming in at under $100, it is the first attempt to replace feature phones by smartphones through the elimination of the price barrier.

When the Android One device was launched, the realization hit me that a new wave of users would be entering the mobile computing era. For most of them, their mobile device will be their primary means of accessing the internet. This presents an unprecedented opportunity.

However, I was struck by the fact that despite the fact that a new generation of users would be coming on-board, the next generation of programmers would not be able to catch up. This is because for the Android platform, Java is the main programming language.

Java has a reputation of being hard to learn and for me it is. That said, it was once the darling of the industry and the typical Java programmer trained in the last decade. The next generation developer doesn’t have the time to scale that learning curve in order to create mobile applications.

Today in technology, virtually every niche now has tools to simplify your work. If you want a website, you don’t need to write a line of code. All you need is to use a CMS like WordPress. For game development, we have game engines like Unity that make the entire process of creating a game easier and more efficient than it was in the last decade.

For application development today, depending on the route you want to take, there is a tool for you. If you are a web developer with a strong knowledge of HTML, CSS and JavaScript, you could use PhoneGap. For a Python programmer, Kivy is coming on strong. For non-programmers, there are a lot of cloud based services that make the process of application development easy. For our purposes, we shall be using App Inventor which runs in the cloud

For some time in the past only highly technical people could set up blogs and wikis. Then tools like WordPress, Blogger and Google Sites transformed things so that anyone could create a blog or wiki. I see App Inventor doing the same thing — it’s going to allow all types of people, not just the techies — to create apps for this incredible new mobile world.

With App Inventor, if you can imagine it, you can create it. Using this free, friendly tool, you can decide what you want your app to do and then click together colorful jigsaw-puzzle blocks to make it happen. App Inventor turns your project into an Android app that you can test on your computer, run on your phone, share with your friends, and even sell in the Google Play store.

Cloud means that you run on the platform through a browser with nothing to download. It is done this way because of the assumption that anyone who doesn’t know how to program might not have the technical skills to set up his machine for application development so why bother that individual. Knowing what I know about setting up your programming environments for certain platforms, I totally agree.

Today if you have an idea for a mobile application, all you need to do is to get a solid internet connection and you are on your way. App Inventor is a visual programming environment that allows you create mobile applications for the Android platform using Lego like blocks. The blocks are constructs for the functions you want to use.

It is cloud based hence the need for a solid internet connection. But this is a small price to pay for creating the idea you have in mind. At a minimum, learning App Inventor would enable you to prototype your idea and then hand it over to a developer for serious rework when your idea gains traction.

The cost of following this workflow is a lot easier than having to describe your idea to a programmer and have him create it from scratch. Trust me on this the average programmer has a little arrogance in him/her and nothing fuels that arrogance than a client that hasn’t done his/her homework.

In my time as a programmer, I have met all sorts of clients. The most annoying ones were the ones who wanted you to read their minds. Nothing gains a programmer’s respect like preparation and the best preparation is having an application that you have developed being discussed with a programmer for the improvements you want.

What You Can Do With App Inventor

Using App Inventor, you can create:

1.      Games
2.      Sensor Enabled Apps
3.      SMS Apps
4.      Educational Apps
5.      Social Apps

With App Inventor, the only limit is your imagination. If you can dream it, you can do it.

Abstraction

A critical concept in programming is abstraction. Abstraction is a reduction in the level of detail to allow a grasp of the relevant information. An example of this is a map. A map is a representation of an actual physical space but in order to really represent it, all we do is take the portions we are interested in and ignore the rest.

App Inventor allows us to use an abstraction of programming constructs to create and develop mobile applications. This shortcut makes it easier to create a mobile application.

Don’t miss the point to all of this. You are still programming. However, you are not coding. Programming is about getting the computer to do what you want it to do. This means you have to give the computer instructions.

With coding you would have to figure out your instructions as well as create the constructs for them. By using already available constructs in App Inventor, you make the process of creating mobile applications easier.

It is important to note that the computer is a machine. The acronym GIGO (Garbage In, Garbage Out) covers this. For the computer to accurately execute you instructions, you need to give in unambiguous instructions.

A set of unambiguous instructions to carry out a task is called an algorithm. Note the emphasis on unambiguous because the instructions must be specific and exact. As human beings we tend to make a lot of assumptions whenever we issue instructions.

Part of the difficulty in programming is that we have to explicitly describe what we want to do to the computer. The sequence of steps that accomplish this exactly are called an algorithm.

In truth creating an algorithm is the hardest part of programming. Once you have created your algorithm, writing the code to do execute it is much easier. Thankfully with App Inventor, there is no need to write code. Just assemble your constructs.

Algorithms

An algorithm is a set of specific steps that you can follow to solve a problem. I specifically mention steps because in truth algorithms apply to everyday life.

Below is an algorithm to find the average of 3 numbers.

1.      Set a running total to 0.
2.     Add the first number to the running total.
3.     Add the second number to the running total.
4.     Add the third number to the running total.
5.     Divide the running total by 3.
6.     The result is the average of the 3 numbers.

If you followed this algorithm without deviation, you would always get the average of 3 numbers. You don’t need a computer to execute the above algorithm; you can do it by hand.

Algorithms surround us. Cooking is one area where algorithms abound. Following a recipe to cook a particular meal is the same as executing an algorithm on a computer.

For example if you are a Nigerian, you should be familiar with this algorithm:

1. Empty INDOMIE noodles into 550cc (approx. 21/3  glasses) of boiling water and simmer for 3 minutes then turn noodles to the other side.
2. Add seasoning and chilli powder, to your taste and stir occasionally. Cook until the water is almost dried up.
3. Your delicious noodles is ready to be served. For soup style, prepare with 650cc (approx. 21/2 glasses) of water.

These are the steps to cooking Indomie noodles. I found them at the back of the wrapper. To be clear, following the instructions in this case requires certain assumptions. The assumptions of a source of heat for cooking is one of them. Can you think of any other?

If we deviate from the above steps in any way, the result would be different. The same goes for Spagetti. All Spagetti packs come with instructions. Deviation in any way would lead to a different set of results.

When programming a computer however, we have no room to make such assumptions. We must give clear instructions to the computer. This is where programming becomes hard. If you are a first time programmer, your whole life before now, you have made assumptions in your thought process. Programming will force you to unlearn that habit.

Programming

When we decide to program, we are making a decision to express an algorithm in a form that the computer can understand. Normally, we would have to write code. But with App Inventor, all we have to do is assemble constructs that implement our algorithm.

If we decided to write a program for our 3 Number Average algorithm, our first decision would be how to get input from the user.

The IPO concept is useful in understanding this. The I stands for input, P stands for process while O stands for output.

In making a decision on how we are to receive input, the environment in which the application will run must be considered. This is because the context of the application determines what kind of user interface we would design.

Processing is generally hidden from the user so there isn’t much to say on this point. I will add that the average mobile phone today is more powerful than anything in the world 50 years ago so you are covered here.

For output, once again the environment you are running on will determine how your results will be presented to the user.

We will look at how to create this as a program in App Inventor as the course begins. It is going to be our first mobile application. I hope you make it back next week.

The Road Ahead

I sincerely congratulate you on deciding to learn how to program visually. If this is your first time programming I would say that you are in luck. This year marks my 11^th year as a programmer.

I think back to how I started and then the choices were between Visual Basic and C++. Majority of us who chose Visual Basic as our first programming languages are still programming whereas those who chose C++ dropped out.

I don’t state this to brag but in reality, how you start determines if you will last. You are starting programming at one of its easiest entry points.

Drag and drop programming is the easiest way I know to learn programming. However, don’t let its simplicity make you think that you are not learning anything.

If you decide to stick with me, I will teach you how to think like a programmer. And if you stick around to the end, you will wonder how you lived your life before this time.

Programming opens up a world of possibilities to you and it is my joy to share this with you. I assume you are above the age of eighteen because learning online requires a degree of self motivation. It helps if you are mature.

We will start off easy as you learn the needed concepts and when we are done, you will be given guidance on where to go next.

It’s just like learning how to drive. Spend this time with me and learn from me. When you are done, you will be able to go anywhere you want to.

Moving a Live Website to Localhost

First off, welcome to a new year. I have been busy planning for this year so I haven't done any blog posts. I was copying a WordPress site from the live site to localhost and was getting errors.

Frustrated, I checked the internet for a solution and nothing seemed to worked. It turns out that the problem was that I hadn't enabled mod_rewrite on my WAMP server.

I had done a system refresh last month and so my WAMP settings are new. It just skipped my mind.