My XBL Achievements iPhone Web App

// January 30th, 2009 // General, Technology, Video Games

So part of my new years resolution was to build an iPhone version of  my XBox Live Achievement site that you could update the achievements you’ve unlocked, as well as view whatever achievements you’d like from the games you’ve played. Sadly, this data can’t be achieved through any Xbox Live API, so there is the whole thing where you have to specifically tell my system what games you are playing…and if a game you’ve played hasn’t been entered by myself yet, it won’t show up at all. Boo on that. But, if there are any games that you would like me to add, I’ll gladly get the achievements added for it!

Listen to me talking like the system is 100% ready for launch — sadly, it is not…yet. And it will only be available to Myself, Alicia, Jason, Megan H. Daryl, Brandon, and Megzirra (that’s how I’ve kept the 2 Megan’s seperated in my database lol). Anyway, I know that the system isn’t quite ready yet, but the desire to work on an iPhone web app was killing me, so I decided to start it anyway. That task was actually a lot easier than the main site, so it went along pretty quickly. I’ve taken some screens for you to see it, and no it’s not all fancy AJAX and stuff, but I think it turned out pretty nice. If there are any other features you think need to be implemented, please give me your feedback.

Keep in mind, the whole point of this lil web app is to allow you to have a “checklist” of a game’s achievements in front of you while you’re playing the game.

Ok, on to the screen shots.

This is the first screen you come to after you log in, it's the full list of all the games you have marked that you are playing. If no games are showing up in this list, just click on "Manage Your Games" to see the whole list of any game I have in my system (screens for this are a few images down).

This is the first screen you come to after you log in, it's the full list of all the games you have marked that you are playing. If no games are showing up in this list, just click on "Manage Your Games" to see the whole list of any game I have in my system (screens for this are a few images down).

 

Once you click a game, you're taken to the list of achievements for that game. When you unlock an achievement, just tap on the gray achievement point box on the right of that achievement to mark it as unlocked.

Once you click a game, you're taken to the list of achievements for that game. When you unlock an achievement, just tap on the gray achievement point box on the right of that achievement to mark it as unlocked.

 

Once you've unlocked an achievement, they will go to the bottom of the page, with a different style applied to them to stand out from the rest of the achievements in your list.

Once you've unlocked an achievement, they will go to the bottom of the page, with a different style applied to them to stand out from the rest of the achievements in your list. And if you accidentally clicked an achievement you didn't have, just scroll down to the bottom and click on the green box to turn it back into an achievement you haven't unlocked yet.

 

I have also given a way to toggle between only seeing achievements that are for "Online" and "Offline" or for seeing All Achievements for a game. Notice the circled area, when under the Online Setting, it shows that there are 14 achievements, and I've unlocked 50 out of the 140 achievement points available in online play.

I have also given a way to toggle between only seeing achievements that are for "Online" and "Offline" or for seeing All Achievements for a game. Notice the circled area, when under the Online Setting, it shows that there are 14 achievements, and I've unlocked 50 out of the 140 achievement points available in online play.

 

Same thing goes for the Offline Setting. It shows the amount of points you've gotten out of the total offline achievements for that game.

Same thing goes for the Offline Setting. It shows the amount of points you've gotten out of the total offline achievements for that game.

 

Up above, I mentioned that once you log in, if there are no games showing up in your list, or if you're looking for a specific game that isn't appearing in that list, you can go to Manage games. When you click the link to manage games it takes you to a list of every game that's in my system. Just click on a game's title, and then you can click the checkbox on the right of that game to toggle it on/off. Once you "Return to Your Game List", that/those games will show up in your list. Might be a little confusing (I'm in no way the best person to explain things...), but since I can't pull from the XBL API, this is the only way I can do this :( Anyway, the next 2 screens show the toggling checkbox.

Up above, I mentioned that once you log in, if there are no games showing up in your list, or if you're looking for a specific game that isn't appearing in that list, you can go to Manage games. When you click the link to manage games it takes you to a list of every game that's in my system. Just click on a game's title, and then you can click the checkbox on the right of that game to toggle it on/off. Once you "Return to Your Game List", that/those games will show up in your list. Might be a little confusing (I'm in no way the best person to explain things...), but since I can't pull from the XBL API, this is the only way I can do this : ( Anyway, the next 2 screens show the toggling checkbox.

 

Unchecked

Unchecked, this game isn't showing up in your list

 

Checked and Now You're Playing that Game

Checked, and now it's showing up in your list.

7 Responses to “My XBL Achievements iPhone Web App”

  1. daniel says:
    January 30, 2009 at 8:59 am

    That’s a super-clean interface, man! I definitely dig the simple layout, as some of the apps I’ve seen on my friend’s phones have had way to much going on!

    Also, thanks for the login refresh! It was totally my fault, as I had uppercase Daniel instead of daniel as the login. User error on my part.

  2. Josh says:
    January 30, 2009 at 9:07 am

    Thanks man, I tried to keep it SUPER simple while still providing all of the features that I want out of it as well when I’m using it.

    And I know what you mean man, I’ve seen many many many iphone apps and web apps that are just crazy loaded down with crap — and it gets REALLY confusing. I tried my best not to do that. And after people get used to using it, I’ll do away with the “instructions” area.

    This will never go live to the general public though, only to any of you guys (and gals) that would like to use it. I don’t have the time, desire, or the energy to put all of the achievements from all of the games on the 360 into the system to allow everyone to use it heh.

    But for real, I might seriously consider building something like this for the PS3 Trophies thing. As soon as I do, I’ll make sure you get a login first sir :D Is there a way to see what all games a player has played, and what trophies that person has unlocked for each of those games?

  3. daniel says:
    January 30, 2009 at 9:21 am

    Yeah, that would be awesome. The way they have it set up now, if you view your trophies under the games section, you can select “compare with friends” and it will pull up a list of all the trophies they have completed, even if you don’t have that game. At this point, the trophies system is no where near as fleshed out as the achievements are, but I’m still addicted to it. I like the bronze/silver/gold/platinum and the leveling system too.

  4. daryl says:
    January 30, 2009 at 10:28 am

    w00t dood. Snazzy interface. I love everything except that you have to enter the games manually. Sucks for you, I’m sure. Thanks for offering it up for us, too. I’d be glad, if there was a way, to enter some of the data myself for games that you don’t have entered. Is there gonna be a user submission method?

    Either way, the screens look nice. Well done, sir. (As if anyone thought it wouldn’t be well-made and sexy.)

  5. Josh says:
    January 30, 2009 at 10:41 am

    That’s actually what has held up me giving everybody access to the full website so far…the problem of admin access to add/manipulate achievements.

    As of how it’s built at this point, it’s kind of weird how I’ve got it set up to enter in new Games and Achievements so that things can be sorted the way they are, and it could be kind of confusing if I didn’t get a chance to sit down with you and explain to you the process behind it all first. The risk with the trial and error approach is all of the work we put into what’s already available.

    I’m just trying to figure out a way to make that process easier and less confusing so that we don’t run into any problems with everybody editing it. It’s really not going to be that hard, I’ve just got to sit down and actually think out the levels of admin and everything.

    I really appreciate that though Daryl :D Both for the offering to add in achievements and for the nice comments about the design. I hope to at least have the mobile version (changed that from iPhone version since you have a G1 :D ) ready for you guys/gals to use by next week. I’m not promising it will work/look beautiful on the G1 though since I can’t test it out on one and I built it around the iPhone — but they use the same resolution right (320×480) ?

  6. daryl says:
    January 31, 2009 at 3:52 am

    Yeah, definitely the same resolution. I tried it out tonight and it works very well. I haven’t gotten any achievements today thanks to my addiction to multiplayer CoD5… but I’m sure I’ll get a couple more on Mirror’s Edge before the weekend is over.

    One question – when you flip your iPhone into landscape orientation, does the site fill the screen? I ask, because it doesn’t on my G1. Not a problem, since I won’t be doing much typing on the phone, just clicking links, etc… was just wondering. (mainly wondering because I’m intrigued at the browser differences between the phones… I’m like you, in that I have to know how things work, or I go crazy.)

    Anyway – keep up the good work, and whenever you do get it setup correctly, I definitely would input my own achievement data. I wouldnt dreatm of asking you to add all this crap, after all the work you’ve done so far!

    Thanks again, and good luck “working” on achievements this weekend ;)

  7. Josh says:
    January 31, 2009 at 10:19 am

    Lol, thanks, I need it! ;) And I was wrong, my gamer score was 14,474 last night (the last time I remembered seeing it, it was 14,444…so yay for the forgotten 30 points! :D )

    Good, I’m glad the resolutions are the same! And yeah, the landscape mode on the iPhone will work on one page (all it does is changes the scale to kind of zoom in a lil to fill the 480), but as soon as you load a different page it will only fill 320 wide once again (until you flip to portrait and then back to landscape again). This is all due to me building it specifically for 320 widths. I though about building a fluid site so that it would fill up either way it turned, but i figured that for this particular site, no one’s going to want it to be landscape just because it doesn’t show very many items on the page if you do hold it that way. So really it’s a design flaw :D

    And good, I’m glad it’s working for you ok sir! It’s definitely nice (to me) to have while I’m playing a game. Just turn my phone on for a sec to unlock the achievement on my phone, then cut it back off and continue playing.

    I’m gonna try to work a little bit today on the full site and try to get closer to letting you guys use it as well. And I know you wouldn’t ask me to add all of those achievements, but I volunteered for it lol :D But I really appreciated the offer to help man, and as soon as I get that site up you can definitely contribute as much as you’d like!

Leave a Reply

You must be logged in to post a comment.