Glass Development Mirror API – Part 4 – Where to start after setting up!

So you have Glass and you want to develop apps for it?

You already have an IDE such as Eclipse or Android Studio to code your apps in, you know all about adb and Droid@Screen to view your Glass screen on your computer screen!

Google Glass GDK vs Mirror API by Marcio Valenzuela Santiapps.com
Google Glass GDK vs Mirror API

Well you do have options, before jumping into your typical Hello World Glass app.

As with other platforms like iOS, you have the option of native apps and web based services apps.  This last option is basically an app that runs on a server(s) and interacts directly with your device (be it Glass or iDevice) by sending it information.

Native – GDK – Apps

These are the ones that you code for in Android and install on your Glass device.  These are covered in the Hello World Tutorials for Glass elsewhere on this site.

Web Based – Mirror API – Glassware

These are web based apps.  They will be the subject of this post for today.

If you don’t know much about web services, you have come to the right blog!  I have some experience with web services, which just means writing applications on a server, usually in php or python.  I barely picked up some php a few years back, so I feel sorta comfortable with it.  So if you go to:

https://developers.google.com/glass/develop/mirror/quickstart/index

You will see this is a Quickstart Project page for Glass Mirror API.  You can download a starter project in any language you feel comfortable with.  I chose php for the reason I mentioned earlier.  What a web service starter project means is, its a folder with some code files inside.  Its not like a normal Hello World project you would download for native apps where you run the project from the IDE.  In the case of software as a service apps (Saas) you usually have to do 2 things with a starter project like this:

  1. Download it to your computer and re-upload it to a server somewhere (yes, you’ll need a server or server hosting online)
  2. Modify a configurable or settings file somewhere to make it work on your server

So download the project that you feel more comfortable with.  If you don’t have a preference then Id suggest taking a free python or php course somewhere, at the most basic level, and then returning to this tutorial.

Ok so this was my first mistake.  Im not a server admin or anything close to it.  I do have a free account on a more or less sophisticated server (MediaTemple) and I thought I’d download the project and upload it to that server and run it there.  Ill make a long story short but basically after failing there, I tried Brinkter and then a free online hosting company but I always ran into trouble.  So here is the scoop:

  • You will download the project contained in a folder called mirror-quickstart-php-master
  • You would upload it to a server
  • You would configure the settings for it & run it by accessing that URL in a browser

Sounds simple huh?  It turns out I chose a php project.  The project also required sqlite which in my case was not preinstalled on my MediaTemple server.  Which meant I had two options, migrate my test account and everybody else in that account to a new server with sqlite already installed.  I was not allowed to do this for fear of extended down times and possible misconfigurations in the new server.  Or I could re-compile PHP on the entire existing server which would also cause issues for sure.  Recompile what?!  No way, that was not for me.

The easiest solution if you just want to work with Glass Mirror API is to simply run it on your local machine and worry about uploading to a production server once you have something real going. Luckily, Im on a mac.  This meant that most of the stuff I needed was already installed and I just had ton configure it to run.  Here is what I needed:

  • Apache Server – comes installed with Mavericks
  • PHP – also comes installed with Mavericks
  • SQLite – also seems to have come installed with Mavericks by virtue of PHP 5.4

Cool so I just had to:

  • Activate Apache:

Open up Terminal and type:

sudo apachectl start

To test if it works, simply point Safari to:

http://localhost

and you should get a white page with black bold letters reading:

It works!

Great!  {You can optionally customize your apache server to store files elsewhere and use virtual directories: http://brianflove.com/2013/10/23/os-x-mavericks-and-apache/}

  • Next PHP must be configured:

Again in terminal type:

sudo nano - c /private/etc/apache2/httpd.conf

This opens up a text editor called nano to use line numbers “-c” as sudo user, and opens the file httpd.conf for editing.

Scroll down to the approximate line 118 and uncomment the following line:

LoadModule php5_module libexec/apache2/libphp5.so

And approximately on line 231 add this line underneath the index.html line:

DirectoryIndex index.html index.php

Finally append this code block at the very end of  that file:

#PHP Settings
<IfModule php5_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
</IfModule>
Now you are ready to save.  Hit Control-O to Write Out the new file, then it confirms if you want to save the httpd.conf file, Hit Enter and then Control-X to Exit.
  • Code! (Quickstart project)
Almost there!  Now you just have to move that downloaded folder to MacIntoshHD/Users/youruser/Sites folder.  If the folder doesn’t exist, just create it.
Once that folder is in place you modify the config.php file with the values you get from creating a ClientID at
cloud.google.com/console
and in APIs Turn ON the Glass Mirror API and finally in Credentials create a New ClientID with these features:
Some Name of your choosing
Type: Web Application
Javascript Origins: http://localhost
Redirect URIs: http://localhost/~youruser/mirror-quickstart-php-master/oauth2callback.php

[NOTE: There may be an omitted step here, depending on your setup.  In my case, Im using the default folder for my webroot as created by Mavericks for Apache.  The original setup is that the webroot as can be seen in the httpd.conf file is “/Library/WebServer/Documents”.  This means that whatever I put in that folder will be loaded and displayed when I browse over to http://localhost.  I created a username.conf file which is placed in the /etc/apache2/users/.  That file has the following content:

<Directory "/Users/youruser/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

which basically allows me to now use http://localhost/~youruser and the files it points to are not in your /Users/youruser/Sites folder created earlier.]

Now point your browser to:
http://localhost/~youruser/mirror-quickstart-php-master/
Voila!

How to create an app – Not programmatically

A fellow coder asked:

“How does one go about developing an app from scratch?  Where does one start?”

Blueprint iOS App Design by Marcio Valenzuela Santiapps.com
Blueprint iOS App Design

My response follows:

Some will say its a matter of style and you have to find your own. And eventually you will, after a lot of copy-paste programming. I started in 2009 and my first app was a copy-paste of a few different projects. All the app did was connect to the Internet, download XML and parse it into a uilabel.

Then I decided to look into more complex app samples. So I downloaded a few from Apple. In particular I remember iPhoneCoreDataRecipes. In hindsight, it was too complex for a beginner but I’m very visual. So the variety of viewcontroller objects made it easier for me to understand. I intentionally stayed away from the coredata logic and took it for granted. I focused on how data was created, passed around and manipulated in the program. I remember I printed out the main class files, about 10 classes in all. Then I started making drawings of each object and tried to decipher who called who and how. That’s when I learned about delegates and protocols. That’s also when I learned to use breakpoints because I went crazy trying to follow NSLogs. It was a great learning experience.

Then I tried following a Stanford course…it helped but it was confusing. So a funny thing happened…I bought Learn Cocos2d by Ray Wenderlich and Rod Strougo.
This is when OOP sank in! Oh yeah, everything is an object!

This was a real eye opener for me. Then I started using SO and the Dev forums which taught me to read the documentation. I learned because for the most part they would all say “Read the docs!!!”. So I was forced to learn how to read documentation. After that I was able to read other docs like Twitter and Cocos2d and many others.

So now when I start a project I grab a pencil and a lot of paper. I start with the business aspects, marketing namely; who is the app for, what others exist, how will they use it, what would the app need to have for those users to like it?

Then I draw viewcontroller objects. Kinda like a huge storyboard with viewcontrollers. This forces me to visually see where the user will start, where data will be created, manipulated and consumed. This way I know which view controller objects need access to data and how they will receive or send it.

Finally I start to write method names of what each view controller will do and how it will interact with other and the data it needs, right below each object in the pencil storyboard.

Only then will I start to code classes. And even when I DO code classes and their methods, I will usually create all empty methods with just comment lines of what a block of code should do. I’ve picked up some personal ideas along the way such as adding an Empty File to be my Journal of what I did each day and what to do the next time I open a project. I also use #warning #PENDING lines to call attention to the comment lines which say what to do but needs to be done in each class.

When in designing the pencil storyboard I’ll usually google for third party libraries that can do certain things that perhaps apple’s native ios sdk won’t do.

Looking at sample code helps a lot. It teaches you some basic patterns like how to use singletons to connect to resources or synchronize data stores and use blocks or protocols to communicate efficiently.

In the end you will develop your own style and procedures. I believe time is the answer you’re looking for. 🙂

ObjC Programming

The basics of Objective C programming for iOS apps by Marcio Valenzuela Santiapps.com
The basics of Objective C programming for iOS apps

The Big Picture

ObjC is OOP which means objects send messages to other objects. Before getting into messages, let’s define objects.

Objects.
This is very diverse. An object can be a string, a number, a Boolean, an integer, an array, a dictionary or even one you create yourself. There are any types of objects but let’s start at the root object.

The root object is called NSObject. You’ll see references to it in code but you’ll hardly ever use it directly. This is called the root object because it’s the starting point of any object. It’s like Adam and Eve rolled into one and ANY other kind of object in ObjC comes from it. An NSObject is defined as an object that takes un space in memory and that’s about it. Because any object will take up space, right? Now think of NSObject as sitting at the top of a family tree and all it’s descendants come from that point and thus share it’s traits, which is to say, any object takes up space.

Now we can think of objects as those already created for us and those we create. Objects created for us are such as NSString where we can ‘store’ text, NSNumbers where we can store numbers, NSDate for dates, NSArray for a sort of list of objects, NSDictionary for a sort of dictionary list where a key (word) has one corresponding value (definition), UIButton for buttons, UILabels for text labels, UIImageViews for images,UIWebViews for HTML pages, UIView for views and UIViewControllers for view controllers.

The first pre-made objects mentioned up to NSDictionary, can be thought of abstract objects. The next few objects I mentioned from UIButtons to UIViewControllers can be thought of more concrete and visible objects because you can actually see those objects in the resulting program or app. As you can see they have the prefix UI which refers to UserInterface whereas NS stands for NeXTSTEP.

Just to clear up the last few objects, an iOS app has 1 window. That one window usually has 1 UIView and every UIView requires a UIViewController which basically controls what happens in that view and how the user can interact with it.

So those are 2 categories of pre-made objects; abstract ones and concrete ones that basically have a graphical representation at runtime.

Now there are the objects we create ourselves. If I’m working on a Contacts app, I will probably create a special object to handle all the information related to a contact. What I will usually do is subclass (or use a more basic but the most related object) to create a foundation for my contact object. NSObject is the most basic object so I will subclass NSObject and add the things I think I might add to NSObject to best represent my info needs. So I might add a few NSStrings to hold first and last names as well as company and perhaps nickname. I might add NSNumbers to hold phone numbers, an NSArray of NSStrings for emails and so on. In the end, my Contact object would be based on NSObject but would represent a unique kind of object which I would call Contact instead of NSObject.

If on the other hand I needed to create an object that had more in common with a button than with an NSObject, I would subclass UIButton. If my object needed to be more like a special text label, I would subclass UILabel.

Ok so once I have all the objects I need, I need those objects to send messages. Objects need to send messages to communicate and they need to communicate in order to carry out tasks. Let’s call those messages methods. And let’s think of an object sending a message by calling a method. So for example, pre-made objects have pre-made methods in order to send pre-made messages.

For example; NSString has a pre-made method called capitalizedString. So how does it work? Well the format is:

[object methodName];

This calls the method called “methodName” on the object called “object”. We say that we are sending the “methodName” message to the “object” object. It just so happens that if your object is the hello world string:

object = @”hello world”;

Then the result of that message would be:

HELLO WORLD

So how do we know what objects there are and what their methods are?

Apple developed the OS and has its documentation. It’s pretty cool because it’s OOP so there is a manual for every object and here is the one for NSString:

https://developer.apple.com/library/mac/documentation/Cocoa/Reference/Foundation/Classes/NSString_Class/Reference/NSString.html

It has a lot of methods because it’s a very basic object. Ok so that’s a look at a pre-made abstract object. You can look at others such as NSArray and you’ll see it has methods consistent with things you might expect to do with a list, such as count which returns the number of objects in a list or addObject which adds a new item to a list and so on.

If you take a look at the pre-made concrete objects such as UIButton:

https://developer.apple.com/library/ios/documentation/uikit/reference/UIButton_Class/UIButton/UIButton.html

you’ll see methods like titleForState: which will set the button’s title for a particular state (selected or not). You will also notice some things called properties. Those are things like the button’s tintColor or enabled.

Ok, so what does it all mean Basil?

Well in an app, you are given a main window. You can add objects to that window such as a UIView and a UIViewController. The UIView may have a backgroundColor set to blue and a certain size. You may also want to tell that view that when the view loads, it should present a UIAlertView, which are those pop up views you see in iOS apps, that reads “Welcome user!”. To do that you need to add a special object called UIViewController. Then you might want to add a UITextField for the user to enter a code and a UIButton for the user to tap on once he/she is done to check if the code is correct. The code might be stored in an NSString object in order to check of its valid.

So how you do all this? In each object’s corresponding Class file set. Each object has a class file set consisting of an interface (.h) and an implementation(.m) file. The interface typically defines that object’s properties and methods whereas the .m file has the implementation of each method. So the .m contains the bull of the code.

A typical class file set might look like this:

@interface MyContact : NSObject

@property (nonatomic,strong) NSString *firstName;
@property (nonatomic,strong) NSString *lastName;
@property (nonatomic,strong) NSString *email;
@property (nonatomic,strong) NSArray *phoneNumbersArray;

-(void)callContact;

-(NSArray*)listOfNumbers;

@end

And then in the .m you might have:

@implementation MyContact

-(void)callContact{
//some code to bring up the Phone app and pass it the main phone number}

-(NSArray*)listOfNumbers{
//return the list of all this contact’s phone numbers
return phoneNumbersArray;
}

To make an app you would need to create a view with its viewcontroller and add a MyContact class to create contacts and combine messages from the viewcontroller class to the MyContacts class and vice versa in order to make the app interact with the user.