Steam Companion – Pebble App

Summary

With the Steam Companion app for Pebble, gamers can stay connected with Steam by accessing the info about their favorite games and friend statuses.
Server-side scripts are utilized for parsing the Steam API.
The pebble.js framework allowed the development of a user-friendly interface on the client-side.

Steam Companion for Pebble

Development Process

1. Story

a. Preprocess

I’ve always wanted to develop apps for wearables. However, I had very little knowledge or ideas what it can be done back then. That changed when I got my first wearable, Pebble classic watch.

It gave me a solid thought of what the future technologies can do.

b. Idea

For wearables, especially for smartwatches, people can stay connected anywhere anytime. As a gamer, almost retired tho, I wanted to create a useful application for gamers out there.

2. Design Specifications

a. Information

First, I listed information I want to check on the go if I were a core gamer. Simply:

1. My name, status, and games you own
2. Current time so that it can be watchface too
3. Friends and their status

b. Hardware Capability

• Can access internet using its connected phone
• 3 side buttons and back button

c. User Interface

For user interface design, I created a user flow to make sure to have a friendly interface.

d. Technology

For the technology, Pebble has a fantastic framework called pebble.js. pebble.js allow developers to create apps for pebble with JavaScript. At the same time, pebble.js have access to all the resources of the phone so it was an ideal option for the app.
For the backend, I have a strong confident for PHP so I went with it.

3. Implementation

a. Prototyping

The first thing I had to do was dealing Steam API. I created an OOP class to retrieve API’s JSON the way I want to.
Snippet:

public function getPlayerSummary($steamid = null) {
    $queryArray = array(
        'key' => $this->steamAPIKey,
        'steamids' => ($steamid === null)? $this->_steamid : $steamid
    );
    $data = @file_get_contents($this->userSummary.http_build_query($queryArray));
    $data = json_decode($data, true);
    $original = $data['response']['players'][0];

    $player['steamid'] = $original['steamid'];
    $player['avatar'] = $original['avatar'];
    $player['profileurl'] = $original['profileurl'];
    $player['wishlisturl'] = $original['profileurl']."wishlist/";
    $player['personaname'] = $original['personaname'];
    $player['gameextrainfo'] = $original['gameextrainfo'];
    $player['personastate'] = $this->getStatusString($original['personastate']);
    $player['lastlogoff'] = $this->getLastLogoff($original['lastlogoff']);

    return ($player);
}

For Pebble prototyping, I made simple windows that can receive data from the server following the user flow design.

var friendsList;
function showFriends(data) {
	var onlineFriends = [];
	var offlineFriends = [];
	for (var key in data) {
		var friend = {};
		friend.title = data[key].personaname;
		friend.steamid = data[key].steamid;
		if (data[key].personastate != 'Offline' || data[key].gameextrainfo) {
			friend.subtitle = (data[key].gameextrainfo)? data[key].gameextrainfo : data[key].personastate;
			onlineFriends.push(friend);
		} else {
			friend.subtitle = data[key].lastlogoff;
			offlineFriends.push(friend);
		}
	}
	friendsList = new UI.Menu({
		backgroundColor: backgroundColor,
		textColor: textColor,
		highlightBackgroundColor: textColor,
		highlightTextColor: backgroundColor,
		sections: [{
			title: onlineFriends.length + ' Online',
			items: (onlineFriends.length > 0)? onlineFriends : [{title: 'No friends'}]
		}, {
			title: offlineFriends.length + ' Offline',
			items: (offlineFriends.length > 0)? offlineFriends : [{title: 'No friends'}]
		}]
	});
	friendsList.on('select', function(e) {
		if(e.item.steamid) {
			showLoadingScreen();
			showPlayerPage(e.item.steamid);
		}
	});
	friendsList.on('longSelect', function(e) {
		var next = e.sectionIndex + 1;
		next = (next <= friendsList.sections.length)? next : 0;
		friendsList.selection(next, 0);
	});

	friendsList.show();
}

After overall successful prototyping, I moved on to focusing implementing an actual design for the interface.

b. Design

Final design touch is done by one of my good friend and designer, Aska.

4. Verification

a. User Testing

For user testing, I didn't have many friends who had Pebble watch so I had to do mostly on my own. No software is bug-free. Of course, this was the case. A number of functions had a bug or two when I try accessing each page.
Debugging them wasn't that hard yet took some time to think and re-organize some components both in JavaScript and PHP.

At last, I released the app after everything seemed good on Feb 18, 2016.

5. Maintenance

a. Analytics

Pebble provides analytics to developers to see their apps installations, crash counts and more. It certainly was useful when it comes to maintaining the application. The first surprise that I had was a huge number of installations on the first day. At the same time, I started observing some crash counts.

b. User Feedback

Since I had a feedback email address listed, I received a couple of emails for more features and bug report. Some of them were:

• Adding wishlist
• Adding Most popular games
• Chat funcitonality
• Adding Steam Guard feature
• Bug report

4 days after, I released a new version including some new features and bug fixes.

Conclusion

Overall, I personally am very happy with the final product. What makes me even happier is that I see many people are currently using the app.
Throughout the process, I've learned quite a lot of development process as a whole, more importantly, importances of user feedback and testing.