Browsing and using websites

Back in the day, when I first started writing, there were two ways to research—own a lot of books (I did and still do), and/or spend a lot of time at the library (I did, don’t have to now).

This all changed in the early 90s when Sir Tim Berners-Lee invented the World Wide Web (WWW) . The web used the Internet, which was already there, although Al Gore did not invent the Internet. Although earlier experiments took place, Vinton Cerf’s development of the basic transmission protocols making all we enjoy today possible gives him the title “Father of the Internet”.

All of us reading this book use the Internet and the web almost every day. App Inventor itself relies extensively on the web; you have to use the web in designing apps and downloading the Blocks Editor to power them up.

Adding web browsing to our apps gives us:

1. Access to literally trillions of web pages (no one knows how many; Google said it was over a trillion in 2008, and growth has been tremendous since then).
2. Lets us leverage the limited resources and storage capacity of the user’s phone by many times as we use the millions of dollars invested in server farms (vast collections of interconnected computers) and thousands of web pages on commercial sites (which they want us to use, even beg us to use because it promotes their products or services).
3. Makes it possible to write powerful and useful apps with really little effort on our part.

Take, for example, what I referred to earlier in this book as a link app. This is an app that, when called by the user, simply uses ActivityStarter to open a browser and load a web page.

Let’s whip one up.

Time for action – building an eBay link app

Yes, eBay loves us—especially if we buy or sell items on this extensive online auction site. And they want you to do it not just at home but when you’re out with only your smartphone.

To encourage use from your phone, eBay has spent a gazillion dollars (that’s a lot) in providing a mobile site (http://m.ebay.com) that makes the entire eBay site (hundreds of thousands, probably millions of pages) available and useful to you.

Back to that word, leverage—the ancient Greek mathematician, Archimedes, said about levers, “Give me a place to stand on and I will move the Earth.” Our app’s leverage won’t move the Earth, but we can sure bid on just about everything on it.

Okay, the design of our eBay app is very simple since the screen will be there for only a second or so. I’ll explain that in a moment.

So, we need just a label and two non-visual components: ActivityStarter and Clock. In the Properties column for the ActivityStarter, put android.intent.action.VIEW in the Action field (again, this is how your app calls the phone’s web browser, and the way it’s entered is case-sensitive).

This gives us something as shown in the following screenshot (with a little formatting added):

Now, the reason for the LOADING…nInternet connection required (in the label, n being a line break) is a basic notifier and error trap. First, if the Internet connection is slow, it lets the user know something is happening. Second, if there is not 3G or Wi-Fi connection, it tells the user why nothing will happen until they get a connection.

Simple additions like the previous (basically thinking of the user’s experience in using our apps) define the difference between amateur and professional apps.

Always try to anticipate, because if we leave any way possible at all to screw it up, some user will find it. And who gets blamed? Right. You, me, or whatever idiot wrote that defective app. And they will zing you on Android Market.

Okay, now to our buddy: the Blocks Editor.

We need only one small block group. Everything is in the Clock1.Timer block to connect to the eBay mobile site and then, job done, gracefully exit.

Inside the clock timer frame, we put four blocks, which accomplish the following logic:

1. In our ActivityStarter1.DataUri goes the web address of the eBay mobile website home: http://m.ebay.com.
2. The ActivityStarter1.StartActivity block calls the phone’s web browser and passes the address to it.
3. Clock1.TimerAlwaysFires set to false tells AI, “Stop, don’t do anything else.”
4. Finally, the close application block (which we should always be nice and include somewhere in our apps) removes the app from the phone or other Android device’s memory, releasing those always scarce resources.

Make a nice icon, and it’s ready to go onto Android Market (I put mine on as eBay for Droids).

What just happened?

That’s it—a complete application giving access to a few million great bargains on eBay.

This is how it will look when the eBay mobile site home page opens on the user’s phone:

Pretty neat, huh? And there are lots of other major sites out there that offer mobile sites, easily converted into link apps such as this eBay example.

But, what if you want to make the app more complex with a lot of choices? One that after the user finishes browsing a site, they come back to your app and choose yet another site to visit? No problem.

Here’s an example of that. I recently published an app called AVLnews (AVL is the airport code for Asheville, North Carolina where I live). This app actually lets the user drill down into local news for all 19 counties in the Western North Carolina mountains. Here’s what the front page of the app looks like:

Even with several pages of choices, this type of app is truly easy to create. You need only a few buttons, labels, and (as ever) horizontal and vertical arrangements for formatting. And, of course, add a single ActivityStarter for calling the phone’s web browser.

Now, here’s the cool part! No matter how long and how many pages your user reads on the site a button sends him to, when he or she hits the hardware Back button on their phone, they return to your app.

The preceding is the only way the Back button works for an App Inventor app! If user is within an AI app and hits the Back button, it immediately kills your app (except when a listpicker is displayed, in which case it returns you to the screen that invoked it). This is doubleplusungood, so to speak. So, always supply navigation buttons for changing pages and maybe a note somewhere not to use the hardware button.

Okay, back to my AVLnews app as an example. The first button I built was for the Citizen-Times, our major newspaper in the area. They have a mobile site such as the one we saw earlier for eBay. It looks nice and is easy to read on a Droid or other smartphone, like the following:

And, it’s equally easy to program—this is all you need:

I then moved on to other news sources for the areas. The small weekly newspapers in the more isolated, outlying mountain counties have no expensive mobile sites. The websites they do have are pretty conventional.

But, when I linked to them, the page would come up with tiny, unreadable type. I had to move it around, do the double tap on the content to fit to the page trick to expand the page, turn the phone on its side, and many such more, and still had trouble reading stuff.

Folks, you do not do things like that to your users. Not if you want them to think you are one cool app inventor, as I know you to be by now.

So, here’s the trick to making almost all web pages readable on a phone—Google Mobilizer! It’s a free service of Google at http://www.google.com/gwt/n. Use it to construct links that return a nicely formatted and readable page as shown in the next screenshot. People will thank you for it and think you expended many hours of genius-level programming effort to achieve it. And, remember, it’s not polite to disagree with people, eh?

Often, the search terms and mobilizing of your link is long and goes on for some time (the following screenshot is only a part of it). However, that’s where your real genius comes into play: building a search term that gets the articles fitting whatever is the topic on the button.

Summing up: using the power of the web lets us build powerful apps that use few resources on the phone yet return thousands upon thousands of pages. Enjoy.

Now, we will look at yet another Google service: Fusion Tables. And see how our App Inventor apps can take advantage of these online data sources.