PASFAA 2014 Conference App

pasfaa_01_splashI’ve completed work on this year’s version of a conference app for PASFAA.org‘s annual conference. This time around, I completely started over, built from the ground up to be a nice looking, functional and helpful app.

The focus this year was more on the attendee user, and exposing functions they would need to enhance their conference experience.  One of these key features with this release is a Up Next section on the home screen. This little gem is a rolling list of sessions happening at this moment and upcoming in the next hour.  If you happened to have bookmarked sessions you’re interested in, these are highlighted in this list, so you can always know where you need to be.  And along those lines, I’ve integrated floor plans as well.  From Session Details, you can tap and view the floor your session is located on.

The Conference Contacts is a cool new feature.  How many times you have you met someone at a conference, swapped business cards only to find out you lost it, or left it in the hotel room. The app solves this problem.  When you want to remember an attendee, you can find them in the Attendees list and add them to your Conference Contacts.  You can even send them a text or email message from within the app to arrange a lunch meeting.

As most conferences are, this one is highly sponsored, so PASFAA wanted banner ads for those sponsors at the bottom of a handful of screens.  This was fun to build actually because they continue to cycle all throughout the app.

So I mentioned this was built from the ground up.  since I was starting over, I wanted some new “hip” features like the slide menu, toast notifications, etc.  I decided to use Titanium Appcelerator’s MVC framework Alloy.  You can see from my past post in March, I was just starting out with Alloy, and in six months time, I learned enough to produce a complete app.  Actually, truth be told, it was a somewhat painful 6 months, even thought there is a lot if information on the web, it seems there are many proof of concept type apps, widgets and modules that aren’t really supported anymore.  So even if you found exactly what you wanted to add to your app, if it didn’t work, you were kind of on your own.

I also built this to sync with my server, so PASFAA admins can log in, add/edit sessions, attendees, notifications, and partners and they’ll get pulled down to the device.  More importantly- it also works offline because we have all experienced sucky / terrible / non-existent internet at most venues, so it was important for it to work under various conditions.

I’m pretty proud of this app and its functionality.  Its currently waiting at the App Store, and I’m struggling to get the Android environment setup and then I’ll push it to Google Play as well.

UPDATE:  They’re both live and available to use

Here’s my fun “little” app description :

Main Features:

Next Up!
Lets face it, you need to know where you’re going, before the next session starts. At a quick glance at the Home screen, you can view the sessions happening now, as well as the sessions coming up in the next hour. Your bookmarked session are highlighted so you can easily see where you’re headed, and change your mind if you get there and its not what you were expecting. This feature is priceless.

Works Offline!
We all know the internet connection at many venus isn’t the best, so this app works offline until you have a connection. All aspects of the app – sessions, attendees and notifications will all sit patiently until you’re connected. The next visit to that screen will connect and pull down any updates that may have happened. Chances are, there weren’t any, but if there were, we’ll grab ‘em and update your lists.

Complete session Information
You want to know details about the session you’re headed to, and we want you to be well informed as well. Each session displays a plethora of information for you to consume including the date and time of the session, presenter information, a full session description, and a link to the proper floor plan. Pretty convenient. You don’t have to remember if Royal III was on the first or third floor, just tap the link and the app will show you.

Bookmark your sessions to build your own schedule
Its always nice to have your days setup, and you can do this with the app. Just view the session details, and tap Bookmark Session and it’ll be added to the My Sessions screen, and will also be highlighted in the Up Next section on the Home screen.

Which Floor?
Each session details screen links up to the proper floor plan to help you find where your next session is. Floor Plans can be paned and zoomed to quickly scan for your room.

Attendees and Contacts
- Have you ever met someone at a conference, exchanged cards only to lose it later? Just find the attendee in the app, and add them to your Conference Contacts. From here you can send them an SMS during the conference to meet up for lunch, or send them an email.

This app was built with you, the conference attendee in mind, and will aid in your enjoyment help you get the most out of the conference.

Available In the App Store google-play-logo

In the meantime, you can drool over the screenshots that I’ve prepared for the stores.

To report bugs or support needs please : contact me

pasfaa_01_splash pasfaa_02_home pasfaa_03_slidemenu pasfaa_04_floorplans pasfaa_05_about

And of course – an app is not complete unless it has a Quick Tour to explain how it works, so I’ve included one of those as well.

step1 step2 step3

Code it right
theCodeDog
theCodeDog

Titanium Alloy Newbie –

I’ve started playing with Titanium Alloy from Appcelerator.  There are some things that most tutorials don’t cover, and as I struggle through learning this I’ll post what I’ve learned.  Yes, these may seem silly once you know what you’re doing, but hopefully it may help someone learn this a bit more quickly.

Once I installed Studio and upgraded to the latest SDK (3.x), from the Getting Started panel, you can scroll down and perform a one click install of some sample apps.  I chose the ToDo list to play around with.  If you do this, be sure to choose the one for Alloy because there is also a ToDo list for commonJS (standard Titanium I call it)

I ran the app to see what it does, and then started looking at the code. At first I thought it was multiple screens and saw the header block in index.xml and thought that was pretty inefficient. After looking at the other files, I realized I was wrong and just has some slide up views.  If it did have multiple screens, I may want to include the same header on each screen.

Why would you want to do this?  I had, in the past, built an app that had the client’s logo in the header of each screen.  That was built long ago with Rhomobile, and it did not allow you to modularize things like this, so I had a pile of duplicated code across the app, which is problematic if you had to alter it at all.

There wasn’t anything I found easily to tell me how to include other code, because I’m new and had no idea what to search/look for and didn’t know the terminology. I had no choice but to start messing around, examining other example apps, and snips of code.

What I found was the <Require> statement, which is a little further down in index.xml.  When I first tried this, I copied that line, changed it to header, and it didn’t work, go figure.  I’ve since found an example in the docs (I know, right?) that nudged me in the right direction.  That page is here ( http://docs.appcelerator.com/titanium/3.0/#!/guide/Views_without_Controllers ) if you’re interested.  I know I actually ended up needing a controller, but more on that in a bit.

What I ended up with was this :

<Require id='index_header' src='header' type='view' />

The id name is arbitrary, I named it index_header since it’s located in index.xml.  What is important is the src, and type.

I commented out the entire header view in index.xml and added the line above.  I copied that header view block into a new file, header.xml and placed that in the views directory. Now in my mind my index.xml is including my header.xml file – perfect.

Not so much.  You would hope this is enough, and typically it would be if it were a simple header, but this block of code allows you to click the + icon to add a ToDo item.  That icon you can see in the new header.xml file contains an onClick event.  Ends up I need a controller after all to deal with this onClick.  A controller is just a javascript file that has functions you’ll call.  These may be simple ones like the addToDoITem, or something more complex like syncing changes t a remote database.

To create the controller I needed, in the controllers directory, I created a file called header.js (to match the .xml file).  I opened the index.js file and copied the addToDoItem() function and I renamed the original one in index.js just to be sure there were no collisions.  At this point in my learning, I’m not sure if you need to do this, I’m guessing its safe to remove from index.js.

I ran it. I was closer but it didn’t look right. Ahh, the styles.

Screens are styled with a .tss file, so I also need to copy the classes that this header view references into a new header.tss file (again same name as my .xml file). I created a new file in the styles directory and move the various items to this file : #header, #title, .divider,#addImage,#addView and saved it.

I ran it and it ran with the header area now modularized.

The require statement is pretty useful, and if used properly can allow you to create some pretty modular code.

 

Code it right
theCodeDog
theCodeDog

Mavericks, XAMPP and Sendmail Oh My!

I develop web applications on my MacBook Pro.  I’ve recently upgraded to Mavericks and changed over from MAMP to XAMPP.  One thing that we all have to do at some point is create email notifications.  Whether that takes the form of a forgot password link, a verify email address link, or some other activity notification, typically a local development server install like XAMPP (on Mac) does’t do email out of the box.

If you search around, you’ll find a lot of differing ways to get XAMPP to do this.  I messed around with this for quite sometime, and was able to get a configuration that worked for me.

One caveat – you need to have a real live SMPT server somewhere.  I happen to be located on a college campus, and all email leaving the campus must run through that, so I’ve set up my machine to use that host.  The problem with this is – if I’m off campus, I actually have to VPN in, to send email.  So, this still isn’t perfect but its working for me at this point in time.  I’ll post back, when I have an independent solution setup, or if you have one, please feel free to leave a link in the comments, or even better, spell it out in the comments.

I got my start on this quest here - http://stackoverflow.com/questions/15965376/how-to-configure-xampp-to-send-mail-from-localhost The kicker with this first solution is that XAMPP for OSX doesn’t come with sendmail, so the part about editing sendmail.ini was useless, which essentially makes the post mostly useless to me and other mac users.

After digging around I managed to set up something that was crazy simple.

First back up the file we’ll edit -

cp /etc/postfix/main.cf  /etc/postfix/main_orig.cf

then edit it -

sudo vi /etc/postfix/main.cf

and set

relayhost = [smtp.theserver.edu]

you may be tempted to edit myhostname, or mydomain but just leave them commented out.

save the file

Back up your php.ini file -

cp /Applications/XAMPP/etc/php.ini  /Applications/XAMPP/etc/php_orig.ini

then edit it -

sudo vi /Applications/XAMPP/etc/php.ini

search for SMTP, it may be commented out, but change it to this -

SMTP=localhost

uncomment

smtp_port=25

then change

sendmail_path = /usr/sbin/sendmail -t -i

save the file

restart apache

and you should be able to send email.

I realized as I typed this that if the smtp server you’re using requires you to authenticate, you’ll need to do more postfix configuration.  Here is a link that walks you through setting up sendmail / postfix using Google’s smtp servers and authenticating with your gmail credentials

http://slashusr.wordpress.com/2012/02/14/enabling-postfix-for-outbound-relay-via-gmail-on-os-x-lion-11/

This would allow me to run my webapps locally and not have to VPN in to send email, which is preferable, so if I know me, and I do, I’ll probably go through this when I have some more time.

Whatever you decide, good luck.

 

Code it right
theCodeDog
theCodeDog

Cooking with Laravel

Laravel Application Developer CookbookI’ve recently added a new Laravel 4 book Laravel Application Development Cookbook written by Terry Matula and available from PacktPub to my library.  I would consider myself a very good PHP developer, and have been searching for a framework to help me excel the development process.  I’ve tried a couple in the past (Yii, CodeIgniter) but always felt constrained, like if I wanted to do something it didn’t support ‘out of the box’ it was a headache and required a lot of hacking. Granted this could simply be my impression and not fact, but not having time to really sit down and figure out if this was reality, I just passed over them.  For the record, I do have 2 live apps using Yii, so I didn’t completely give up.  Back to Laravel.

At a conference in Buffalo NY, I sat in a session by Zac Vineyard and he talked about Laravel and it really piqued my interest.  The session was really about Composer and autoloading, but what he had said about Laravel impressed me and it sounded like something I really wanted to  learn and utilize.

To frame this properly, I would consider myself a Laravel beginner, because I still have to look up how to do things, I’m hardly proficient, and am always looking for tutorials, tips, tricks and other material to help me along my quest to achieve an equivalent level I am with “normal” PHP development.  I can’t wait until I can just sit down and let the Laravel code pour out of my brain.  With my obsession to learn this framework, this is now the 2nd book I’ve read about Laravel 4 and I definitely recommend it to anyone that wants to learn.

As you would expect by the name, this is a cookbook.  Tasks are broken down into recipes (think mini-tutorials) that help you cook up the functionality you’re looking for.  Since this is the 2nd book I’ve read, I came in with some (albeit limited) Laravel experience.  I actually performed the first set of chapters so I could solidify the basics in my brain.

The recipes are concise and all follow the same pattern : Getting Started, How To Do It, How It Works, There’s More, and finally sometimes a See Also section. Getting Started sections run through setup steps necessary for the recipe, sometimes building on other recipes, or are prerequisites for other recipes.  The How to do it is a concise tutorial with no fluff.  Numbered steps walk you through exactly what to do, sometimes with code and/or screenshots.  This is followed by a How it Works section that explains what each step does, written in a nice conversational way, almost as if Terry’s there helping you along.  If those weren’t enough, there is a There’s More section of the recipe that may explain some way to extend the recipe, take in another direction or explore an alternate method or change it in some way to really solidify the concept.  The See Also section typically points to related recipes, or recipes that could be cooked together to produce a more robust solution.

The book starts out like most do – obtaining and installing the software and progresses though how Laravel works, learning syntax along the way.  This book is not a Programming Guide to Laravel or a newbie guide for that matter.  Now before you take that the wrong way, a beginner can learn a lot with this book, and I would even recommend it to one.   What I mean is that it does not go step by step explaining how variables work, and ramble through chapters and chapters on language grammar, etc.  This book flat out teaches you how to build an application with blocks of functionality you can easily alter (if you have to) and drop into your projects.  Concepts from recipes can be easily extracted and used however you need them.  That said, if you need (or want) the specific Laravel grammar and methodology, probably the best place to get that is the actual Laravel Documentation.

If you learn and develop like I do (by example) then you have to add this book to your library.  It encompasses so many things you’d be building in your app its not worth the trouble to not have the book (did you follow that?)  I mean, if you need to add authentication to your apps, there is an entire chapter on that.  Along those lines, there is a chapter on Security and Sessions with some great recipes that help you understand the complexities of these types of things, including recipes for setting up a secure API server.  This chapter was gold to me, because I develop mobile apps with PHP services and this really shed a light on how to configure an API with keys and security, covering everything from database table creation through testing it in the end.

No matter what you’re developing with Laravel, I’m certain you’ll find useful bits in this book.  Its a great addition to my new (still small) Laravel library.

Go get it now!

Code it right
theCodeDog
theCodeDog

Goodbye Save Button

No Floppy Disk, slashed circle with blue 3.5" floppy diskI’ve always been amazed at web applications such as Asana, where in this case, you’re creating a project in a notepad fashion, not really viewing all the ugly squares on an underlying rigidly structured form.  You click, or press a shortcut key and you’re presented with a box in which to type, press enter, and that one magically goes away and another appears, leaving your text in its place.  Clicking intuitively somewhere else reveals a text area for a longer description, or clicking the sub-tasks icon, presents you with a fill-as-you go checklist.

Its nothing short of brilliant, and the best thing – there is no SAVE button.

I want this functionality for some longer forms I’m working on, think college undergrad and graduate applications.

Currently, you have to click save to save whatever you’ve entered and that feels sloppy, yes, its typical and expected, but I’d like something better and different, I like my apps to stand out. Plus, some of these pages have a lot of fields (for a reason) and if anything happens to your connection, the browser or your session, you’ll lose  that data.  If that happens, even if its not your application / server’s fault, you still leave a bad taste in the user’s mouth, and they may not be willing to fill it out again.

I set out on what I figured would be an R&D quest to figure this out, it ended up taking me less than 30 minutes to get a proof of concept working using my favorite interactive framework,  jQuery, and that included creating a MySQL database to save data to :)  I used plain old jQuery – if you can call it that.  I didn’t add in any extensions of modules to give me this ability.

Looking at my solution, it is so incredibly simple, its almost stupid.  I liken it to figuring out a magic trick, and thinking, really that’s all there is to it?  That impressed me?  I’m sure there are many other ways to do this, possibly even better, there might even be a module or extension available, but this is how I went about it.

I created a form with both a hidden and an input field that looked like this :

<input type='hidden' id='r_id' value='' />
<input type="text" class='blursave' placeholder="Type something…" 
  id='field_label' d_name='field_label' d_mod='z_test' />

 

The r_id field will hold the database record’s primary key (if we’re editing a record), and will be empty if this is a new / first time view.

The real key here is the blursave class – this can be called anything, I made that up, the name is arbitrary, but having a unique class name assigned to your fields is very important.  I’m also using Bootstrap which is not required to do this and is completely optional. I used it because I like my stuff to look nice even when I’m just “playing around”, so you’ll notice the placeholder attribute here as well, if you’re not using bootstrap – you can remove this.

Of almost equal importance is the d_name, and d_mod attributes.  The d_name is the field_name in the database where this value needs to be… or came from.  With my prototype (I don’t necessarily recommend this for production) I also added d_mod – the table this value belongs to.  For obvious reasons you don’t want to expose this to the world.  You could easily encrypt these values to make them a little less hackable, and I will do that when this ends up in production, but for my prototype, I didn’t want to spend the time doing that.  Having the table name with the data element makes is easier for a complex form that may be joined in the database schema.  You could add other attributes if you wanted to keep track of the record’s foreign key.  You could also combine all of these important bits into one field, encrypt it and just send one bit of data, decrypt and process it on the server.  Maybe my next post will have all that in there, we’ll see.

Continuing on,  the data we have represented in our field’s attributes consist of :

  • primary key of the record (or not)
  • database field name
  • database table name
  • the value going into the database

Here’s where the magic comes in.  Using jQuery, I can add a blur action to the .blursave class, so anytime someone blurs (moves focus) off of a field, this function is called.  It’ll look a lot like this -

$('.blursave').blur(function() {
});

So now what?  When this gets called because someone moved away from our field, we need to get those bits of information, then assemble arguments to post to a page that will save that information for us.  We’ll use the traditional div selector (#) as well as the .attr() method to grab our custom attributes like this -

$('.blursave').blur(function() {
   var r_id = $('#r_id').val();
   var d_val = $(this).val();
   var d_name = $(this).attr('d_name');
   var d_eid = $(this).attr('d_eid');
   var d_mod = $(this).attr('d_mod');
  $.post( "update.php", { r_id:r_id, d_val:d_val, d_name:d_name, d_mod:d_mod })
     .done(function( data ) {
         obj = JSON.parse(data);
         console.log( obj.sql);
         console.log( obj.rid);
         var rid = obj.rid;
         $('#r_id').val(rid);
     });
 });

You can see that I’ve accessed the record id (r_id) directly.  If this is a new form, this is empty.  If someone were coming back to edit data, this would have a value set (more on that in a second).  I then get the value typed into our field – .val() , and then use the attribute selector to snag the various other bits of data we’ll need to make our database call.

Once I have that data, I use the .post method to send this data to my update.php page.  The parameter section may look confusing, but those are key:value pairs, I just happened to name my keys the same as my variables.  This is probably bad practice, but whatever, its a prototype.

Over to update.php

In our update.php script, I set my php variables (again not a best practice, you’ll want to strip bad characters, and prevent hacking, yada, yada, yada)

$rid = $_POST['r_id'];               # record id to update (if exists)
 $dval = $_POST['d_val'];            # value to insert/update
 $dname = $_POST['d_name'];          # database field name to update
 $dmod = $_POST['d_mod'];            # tablename to update

I need to determine if this is a new record, meaning its the first data point entered on the form, in which case I need to run an insert, or if this is the 2nd+ data point, which then requires an update.  In the first situation – $rid would be empty, right?  Yep -

if (empty($rid)) {
   $sql = "insert into " . $dmod . "(".$dname.") VALUES ('".$dval."')";
   $res = $db->query($sql);
   $rid = $db->insert_id;
} else {
   $sql = "update " . $dmod . " set " . $dname . " = '" . $dval . "' where id = " . $rid;
   $res = $db->query($sql);
}

Agreed, this is not the best way to deal with checking $rid, but will work for us now.  If that is empty – which it would be on the first field used on the form, we’ll construct an insert statement, execute the query, and get the incremented primary key ($db->insert_id).  If it is not empty, we know which record to update, and we’ll construct an update statement as above and execute that.

SIDENOTE: depending on the database you’re using, you could probably use REPLACE INTO or UPSERT or whatever your database may support.  This method is guaranteed to work for any database that supports insert and update :)

After one of the above statements executes we have an $rid set, whether its the original we came to the party with, or one we picked up with our insert.

Again, since this was a prototype (no flames please), I wanted to see what the database was doing, so I included the SQL statement  in my return JSON string <G>.   I set up an array, and then json_encoded it to return back to my jQuery on my form page

$return_array = array ('sql'=>$sql,'rid'=>$rid);
print json_encode($return_array);

 

To the Form Code Batman

In our .post we have a status called .done – that executes … well… after the post is done, makes sense. The json string we created in our PHP file is returned to us and a callback function is executed, and the response (our json string) is stored in a javascript variable called data (you can name this anything), and it looks like this :

{"sql":"insert into z_test(field_name) VALUES ('this')","rid":175}

in order to use the json data, we need to parse it

obj = JSON.parse(data);

now we can access the elements of the data like this :  obj.sql  and obj.rid

I log these to the console so I can see what it going on (again for production, or on a live server even for testing,  you probably wouldn’t send the SQL statement, and wouldn’t log to the console).  Since this is running on my laptop, I don’t care.

console.log(obj.sql);
console.log(obj.rid);

then I set a javascript variable called rid to the record id we just touched in update.php (“rid” from the json string), and update the hidden r_id on our form.

var rid = obj.rid;
 $('#r_id').val(rid);

If this were a new form, next time a field is blurred, we have the record id of the first inserted record in our database and our update.php file will update and that data will be added to that record.  If we’re already editing a record, and this r_id was set before our update.php was run, eh, the code updates #r_id value anyway.  If you wanted you could check to see if its empty first then updated it, its up to you.

So there you have it, it took me longer to write this up than to actually build this save-on-blur prototype.

Quickly thinking about it, you’ll need some other code to deal with radio and checkboxes, but its still the same concept.

If anyone has a better way to do this please share, I’d love to hear about it.

 

Code it right
theCodeDog
theCodeDog

PHP and Word’s special characters

Sick of users copying and pasting Word content into your web forms?  We all know you end up with all their special characters ending up as ? in your text.  This recently happened to me and I had to fix it, see these were college essays on the undergraduate application.

This is what I used to convert them to html friendly characters :

function convert_raw_utf8_smart_quotes($string)
{
    $search = array(chr(0xe2) . chr(0x80) . chr(0x98),
	chr(0xe2) . chr(0x80) . chr(0x99),
	chr(0xe2) . chr(0x80) . chr(0x9c),
	chr(0xe2) . chr(0x80) . chr(0x9d),
	chr(0xe2) . chr(0x80) . chr(0x93),
	chr(0xe2) . chr(0x80) . chr(0x94));

    $replace = array('&lsquo;',
	'&rsquo;',
	'&ldquo;',
	'&rdquo;',
	'&ndash;',
	'&mdash;');
    return str_replace($search, $replace, $string);
}

 

This worked great until I had to pump out a PDF file for admissions using this content, and the above & codes don’t look so pretty. So I played a little music chairs with the code and ended up calling this when I had to display the code in the PDF file -

function convert_smart_quotes_for_PDF ($string) 
{ 
    #this reverses the process for the PDF rendering
    $search = array('&lsquo;',
	'&rsquo;',
	'&ldquo;',
	'&rdquo;',
	'&ndash;',
	'&mdash;');

    $replace= array("'", 
      "'", 
      '"', 
      '"',
      '-',
      '-'); 

    return str_replace($search, $replace, $string); 
}

 

Enjoy

Code it right
theCodeDog
theCodeDog

Best Mobile Development Tool … EVER

testflightlogoI read about this gem called TestFlight (http://www.testflightapp.com) earlier this year, and never really gave it much thought.  I’m pretty busy and a ‘lone wolf’ developer, so typically send out screenshots during development to the client and sometimes do a face-to-face demo.  Recently, more people here at the college wanted to proof and test the app before it was submitted, so we all gathered in a conference room, and I projected the iPhone Simulator on the big screen and gave a demo to the group.

After that meeting, I had one of the designers come to my office, hooked up her iPhone to my laptop, and went through the process of setting it up as a development phone with a provisioning profile and all that goodness.  If you’ve done this you know its a bit of a pain even for just your own phone.  Once it was set up, I deployed the app to her phone and sent her on her way.

I received an email a few days later with changes and new features.  I made them (took about 3 weeks), she came back up – and in the span of those three weeks – she had a phone issue and had to restore, essentially wiped out the setup I had done.  I don’t remember why, but the repeated setup didn’t work, or we didn’t have time to set it up again, so she used my phone to test the app.  The app finally was approved by the college, submitted to Apple, and released to the app store.

A couple bugs were discovered after it was launched, and I fixed them. Not wanting to have to have a meeting, demo or deploy the app again to other phones, but wanting them to view the changes I made, I remembered TestFlight and figured I’d give it a whirl.  I know the headache involved when manually setting up and deploying and app, so I buckled up ready to generate certificates, profiles, and playing with the developer portal at Apple.

I was completely amazed at how easy it was to create an account, set up a team, invite testers, and upload and install the app.  I had it installed on the designer’s phone within an hour of creating the account, and alot of that time was compiling, building and uploading the app.  Once your team mate(s) add their device, you’ll get an email with a “device-export.txt” file.

  • Save this file to  your desktop
  • Access Apple’s Portal and click Devices | All | click the + sign at the top to add a new device
  • Upload this file

You’ll now see your teammate’s device listed (just a quick note – you can set up 100 devices total – Apple’s limit).

Now you need to update TestFlight with the new devices via the provisioning profile. To do that -

  • click Development under Provisioning Profiles
  • download a new provisioning profile.
  • Back in TestFlight (after you’ve uploaded your app) – go to Apps
  • click your app name
  • click a version of your app
  • then permissions on the left
  • upload that new profile you downloaded from your portal

Now that the new profile is uploaded, you’ll see the new people you’ve added listed in TestFlight with empty checkboxes.  Check them off, and click Notify via email – and they’ll get an email with a button to install the new profile and a button to install the app.  That’s sounds confusing, but its pretty straightforward and makes sense once you’ve done it.

Getting your App Uploaded to TestFlight

One thing I didn’t know was how to create an .ipa file (which you can read about here btw – ( http://help.testflightapp.com/customer/portal/articles/494413-how-to-create-an-ipa-xcode-4-3- ) once you have an .ipa file, you can drag it to this TestFlight desktop app, and it’ll upload it for you.  Alternatively you can log into your TestFlight account, and upload it old school.

HOWEVER, you don’t have to do all of that if you install the desktop app ( https://testflightapp.com/desktop ) which is in beta, but freaking brilliant !

Screen Shot 2013-08-15 at 2.36.32 PMIt watches Xcode for new Archive builds and will ask if you want to Upload the new build to your TestFlight Account (be aware TestFlight must be running for this to happen).  If you miss that growl-like pop-up which goes away after a minute-ish, you can simply click the pilot icon in your status bar, and choose an archive.  TestFlight takes over, converts your archive to an .ipa and uploads it for you, which is fantastic and one less thing I had to do!

While it uploads, it’ll ask you for release notes, so you can list all the bugs, fixes and features you have added for this version, and when its complete you can choose what members (or all) on your team you want to notify of the new version.  These team members will get an email they can open on their device and immediately install the new app.

This saves so much time and hassle, and gives your client and/or app testers ‘beta’ access to your app – hassle free, which is the most important part.  Today alone its saved me a few hours because I’ve pushed 2 versions, and added multiple people to the team.  If you have questions about what it can do, if its free, how it works, etc check out their FAQ  (TestFLight is free btw)

I can’t tell you how awesome this is, you have to try it yourself.

-Jon

Code it right
theCodeDog
theCodeDog

iMessiah version 2.0 … waiting

iMessiah app icon

I’ve just completed a very long overhaul of the Messiah College iOS app – iMessiah. Overhaul as in complete ground up rewrite with a new graphic design, and am now starting the Android tweaks to get it to function and render 100% correctly on Android.

This app is directed at prospective students, with information, directories, maps, etc. With the release of the 1.x version a few years ago, many factors came into play with the 100% rewrite.  The first being the framework I used.  Version 1 used Rhomobile – a framework that uses the Ruby language to build a mobile app.  The app was sluggish, and felt like a badly written mobile web app.  There was no way to get it to work properly on Android, and the factors that drove us toward Rhomobile at the college have faded away almost as fast as they arrived.  Basically the app needed to be reconstructed to be fast, interactive, updatable and better looking overall, some of the screens were as ugly as they were slow.

Enter Titanium.

Appcelerator’s Titanium was the framework of choice for this build, and I have an intense love/hate relationship with it.  The hate part comes mostly from my ‘still-green’ knowledge, so sometimes it feels hard to craft what I want to do, but when I figure it out, I’m very happy with its performance.  Granted – this app isn’t your run of the mill multi-screen-hardcoded-brochureware you’d find from other colleges.  This is essentially a mobile-decentralized-controlled app that is unbelievably fast compared to its prior version and what its doing, and amazingly flexible when you get right down to it.

Here at Messiah we have Jadu, a content management system.  I’ve used Jadu APIs to pull data from that system into the app, save it for later use, and check occasionally for updates.  What this means, is that our PR and Marketing folks can make changes to certain areas of the CMS and content will update on the device.  Multiple feeds are live – such as news, events, and the sports scores (if there’s a game going on).  Live directories are pulled from our servers and updated as necessary so the device holder’s information is always current.

So its all but ready to go to the App Store … however, as of right now (July 23) Apple has posted this :

We’ll be back soon.

Last Thursday, an intruder attempted to secure personal information of our registered developers from our developer website. Sensitive personal information was encrypted and cannot be accessed, however, we have not been able to rule out the possibility that some developers’ names, mailing addresses, and/or email addresses may have been accessed. In the spirit of transparency, we want to inform you of the issue. We took the site down immediately on Thursday and have been working around the clock since then.

In order to prevent a security threat like this from happening again, we’re completely overhauling our developer systems, updating our server software, and rebuilding our entire database. We apologize for the significant inconvenience that our downtime has caused you and we expect to have the developer website up again soon.

If your program membership was set to expire during this period, it has been extended and your app will remain on the App Store. If you have any other concerns about your account, please contact us.

Thank you for your patience.

So now I wait. The good thing is – no one is waiting for me. Have a look at the gallery below to look over what I’ve put together.

But before that, I want to give credit where credit is due and thank the following people :

  • Project Manager : Ramona Fritschi : she kept me moving on the project and interfaced between the others on her team, reigned in requests, and nagged me for status updates. Without her in the mix I’d be taking direction from multiple people, trying to arrange meetings, request images and boil down the flow of functional requests.  She was also my app tester and sounding board when I had some crazy new idea for something.
  • Designer : Ben Bond : his graphic design and creativity is apparent in the new look of the app, a fresh, clean design which was well needed. It makes you want to click around and check out the app.  From a programmer’s standpoint, I think its beautifully crafted, each element is there for a reason, not just tossed in to make it look cool
  • Art Direction : Nancy Soulliard : she made sure we stayed in the bounds of Messiah’s guidelines, coloring inside the lines if you will.  She consulted on various screen layouts and more importantly “blessed” all the artwork before it was sent to me, so I didn’t have to second guess if we could use an image or graphic element.
  • Programmer :  Me : I tirelessly fought and won every battle with each bug or problem I created.  I kept my head (mostly) as new functionality creeped in at every turn or I decided to try some new way to achieve a faster render and it wouldn’t work the first 10 times. I became intimately involved with Appcelerator’s documentation and message boards, and made some new developer friends on twitter which is always a plus.
  • Pure Javascript Picture Gallery : Frédéric Maquin’ : this library was a lifesaver, the gallery was a last minute addition and this saved me from having to code it up from scratch.  Granted it posed its own insanely frustrating issues as I heavily customized and hacked it apart it for our purposes, but overall – very thankful to Frédéric Maquin for providing this to the community.

Code it right
theCodeDog
theCodeDog

Peter and the Computer Fair

masteringcoronasdklogo

** UPDATE **
Peter won 1st place in the regional computer fair.  Now he moves on to compete at the State level in May

 

My son Peter has been working on a mobile app for computer fair.  He’s 15, was not a programmer, and the “challenge” was to create an educational game for K-12, or any group in that range.  He had seen me working on a game tutorial class hosted on masteringCoronaSDK.com – a fantastic site, with great tutorials if you want to learn.  He took Jay’s Froggie Went a Hoppin’ game (the game you build as you go through the video series) and put a twist to it.

In Jay Whye’s game, you play a frog, and on each level you move your frog through the pond, from start to finish, hopping on as many lilly pads as possible. Each lilly pad you hop on disappears so you can not go back, or retrace your hops.  Once at the end, you lose 5 points for each pad you left in the pond.  In the higher levels, a snake slithers through, and will kill you if it touches you.  Also, if you take a path that leads to a dead end (since you can’t go back) you die.  Very addicting game actually, and a great way to learn how to code in Corona.

His video series, Beginning Mobile Game Development, starts with a Lua boot camp, which goes through the basics and some more advanced topics of the Lua language, and then walks the student through each step to build out the game.

Screen Shot 2013-03-07 at 9.00.32 AM

Professor Hopalong’s Math Adventure Title Screen

Peter wanted to build a math game for little kids, and decided to use Jay’s game framework as a basis, and change it up a bit.  In Peter’s game, your a bunny.  Each level presents a math problem (ie level 1 is 1+1=?).  The board is a path of carrots that lead to 3 different rabbit holes.  One hole contains the correct answer to the math problem.  You eat as many carrots as you can to get to the correct answer, and when you do, you win the level.  If you hop to the wrong answer (rabbit hole), you die (nice right?).

Peter changed all the graphics so your main character is now Professor Hopalong.  Since you’re a rabbit, you hop through a garden, eating a path of carrots, hopping to one of three rabbit holes.  The title sequence displays Professor Hopalong, in front of a bunch of carrots, with the default play, options, and credits buttons from Jay’s game.  All the graphics are either from Vicki Wenderlich, or from free use graphics, clip art and sound track sites.  Here’s a screen shot of level 2 -

Level 2 - Professor Hopalong's Math Adventures

Level 2 Screen shot with carrot path and 3 rabbit holes.

There are still a few little things he’d like to change, for example – right now each level is a static math problem.  So level 1 is always 1+1.  He wants to give each level a range of numbers to include in the math problem, and randomly choose those numbers.  So maybe level 1 contains a low and high of 1 and 2 – so that math problem could be 1+1, 1+2, or 2+1.  Level 2 might be 1 and 3 and so on.  Level 5 might start getting harder and be 2 and 6, so the number 1 is not in any of the math problems now.  As you go to higher levels, the problems get harder.  Starting at level 10, 20, 30 – he wants to change up and introduce subtraction, multiplication and division respectively, and each of these first levels with the new operators will start with lower numbered problems.

Its pretty neat, and I’m proud of what he’s done, however, it’ll never be published to the app store, its strictly going to just be a simulator demo for the fair.  I can’t afford to purchase a license for this, and I think since its based on Jay’s tutorial code, we’d have to work out a deal or something, not sure.  For the purposes of him learning to code, getting excited about programming, and the improvements I’ve seen in his ability to debug things (like a real programmer), I think it was worth the time.  Plus I got to spend time with my son helping him learn something I love.

The fair is March 25th, we’ll see how he does.

Code it right
theCodeDog
theCodeDog

MAMP – update phpMyAdmin

phpMyAdmin LogoI have an older version of MAMP installed on my MacBookPro.  I have a couple hosting accounts and they both have a current version of phpMyAdmin installed.  The later versions allow click-to-edit-in-row data changes on the browse or search results screens.  My local install does not, and it was getting annoying.

I tried something and it worked, which in hind sight seems pretty obvious, but figured I’d share it anyway.

Download a new version of phpMyAdmin

decompress it and leave the folder name as is for now (for me it was phpMyAdmin-3.5.6-english)

copy the directory and head over to your MAMP install to the bin directory

On my Mac, this is /Applications/MAMP/bin/

paste the new phpMyAdmin code tree into the bin directory

rename the current phpMyAdmin directory (conveniently named phpMyAdmin on my machine) to something like orig_phpMyAdmin

rename your new version (phpMyAdmin-3.5.6-english) to phpMyAdmin

enter the orig_phpMyAdmin directory and copy config.inc.php into the new directory.

That’s it.

 

Code it right
theCodeDog
theCodeDog
 
Powered by Wordpress and MySQL. Theme by Shlomi Noach, openark.org