Endless / Infinite Scrolling using jQuery and .Net MVC

There is no need to rant here, because I got that out of the way in the previous post.  THIS is PURE code and examples.

Some background…  I had old school page controls on my website, because I wanted something to work and I didn’t want to have to figure out HOW to do this fancy scrolling thing that all the new kids were doing.  So it worked for a while, but then people started using my site…   Shameless plug: www.CheckOutMyStuff.net

So if you’ve made it to this page, most likely I’ve directed you to it because the Word Press search meta data haven’t been that great.  Plus, I don’t have the clout to post on StackOverflow.com, because I DON’T BLOG much. This has been addressed in the previous post/rant.

Since I want to keep this simple I’ll start from the bottom up since the tinier morsels are at the bottom and the grand finale Java Script is at the top.  I also expect that you
already have an MVC project up and ready to go.  This blog post does NOT go over how to create a .Net MVC project.

The Java Script code is pretty generic so it could be used to query ANY endpoint that returns JSON.

Ground Floor / Data Model

Let’s say you have some data you want to display in on your page.  You will need a model object so it can be displayed, and you’ll probably have quite a few since you want to scroll
them.  I have a “Stuff” model where most of the data I want to display and Id is used for building links, etc.

namespace SM.COMS.Models

{

       public class InfiniteScrollingStuff

       {

              public InfiniteScrollingStuff() { } 

              public string Description { get; set; } 

              public string FullName { get; set; } 

              public string Id { get; set; } 

              public string ImageUrl { get; set; }

       }

}

The Pipes / Returning The Data

The controller code is posted below.  Note that this is just a sample and the code is manufacturing the data, versus retrieving it from a database (that is left as an exercise for the reader).  Put your constants at the top of the controller or wherever you put them.  I chose values as multiples of 4 because I have some complex code that will split them up in the bootstrap rendering.

private const int INFINITE_SCROLLING_BATCH = 16;

private const int INFINITE_SCROLLING_INITIAL = 32;

[HttpGet]

public ActionResult GetPagedResults2(int lastRowId, bool isHistoryBack)

{

    // If “back” to this page, then don’t skip anything.

    var toSkip = isHistoryBack ? 0 : lastRowId;

 

    // If “back” to this page, then Take() ALL.  Otherwise Take() the page amount

    var toTake = isHistoryBack ? (lastRowId == 0 ? INFINITE_SCROLLING_INITIAL : lastRowId)

                 : (lastRowId == 0 ? INFINITE_SCROLLING_INITIAL : INFINITE_SCROLLING_BATCH);

 

    // Most likely you’ll have your context and the table here

 

    //var data = _data.StuffAndThings.Skip(toSkip).Take(toTake);

 

    // Then you’ll map your data to the model.

 

    // In this case we’ll just create some dummy data really FAST.

 

    var modelData = new List<InfiniteScrollingStuff>();

 

    for (int counter = 0; counter < 500; counter++)

    {

        modelData.Add(new InfiniteScrollingStuff

                 {

                     Id = Guid.NewGuid().ToString(),

                     FullName = $”Test Full Name {counter},

                     Description = $”Test Description {counter},

                     ImageUrl = $”/images/image{counter}.png”

// Of course this image will render as broken since not on your server.

                  });

    }

 

    // You could create a smaller set of data for testing and return the same thing over and over to build out your rows on the client.

 

    var result = modelData.Skip(toSkip).Take(toTake);

 

    return Json(result, JsonRequestBehavior.AllowGet);

}

A Room – With The View

Your view code will be very simple.  Probably just a title and then the data you want to be formatted.  NONE of the formatting will be done in the view.  The formatting will be done later in the Java Script code that requests the data.  The last “div” tag is a placeholder for the data that will be requested when the view is loaded and upon scrolling.

<input type=”hidden” id=”lastRowId” value=”0″ />

<div class=”row”>

       <div class=”col-sm-6″>

              <h2>@ViewBag.Title</h2>

       </div>

</div>
<div id=”infiniteScrollingData”></div>

The Coffee Table – Set Your Java Script Here

You COULD put your Java Script code within <script> tags inside your view, but that makes it harder to REUSE.  Possibly in ANOTHER blog I’ll show how you can reuse this generic Java Script code to adjust itself based on which view is being used.  REMEMBER, hidden fields can hold data, but they can ALSO hold CODE too.

// —-==== For Infinite scrolling page. ====————————————————-

 

var inCallback = false;           // Prevent multiple retrievals of the same data recursion

 

// Get default data…

$(document).ready(function () {

     GetDataForInfiniteScroll(false);

});

 

// Get next page of data on scroll

$(window).scroll(function () {

     if ($(window).scrollTop() == $(document).height() – $(window).height()) {

          GetDataForInfiniteScroll(true);

     }

});

 

// Data retrieval method

function GetDataForInfiniteScroll(scrollPage) {

 

    if (inCallback == true) {

        // Bust out of the possible multiple calls to this while the callback is attempting to return data.

        return;

    }

 

    inCallback = true;

 

    var lastRowId = ($(“#lastRowId”).val() * 1);

 

    // If there is no lastRowId text field then don’t make the request.

 

    if (isNaN(lastRowId)) {

         inCallback = false;

         return;

    }

 

    var isHistoryBack = (lastRowId > 0 && !scrollPage);

 

    var requestUrl = ‘/ViewData/GetPagedResults’ + ‘?lastRowId=’ + lastRowId

+ ‘&isHistoryBack=’ + isHistoryBack;

 

    $.ajax({

        type: ‘GET’,

        url: requestUrl,

        dataType: ‘json’,

        success: function (jsonData) {

            var rowid = lastRowId;

 

            if (jsonData == null) {

                inCallback = false;

                return;

            }

 

            var literalHtml = ;

 

            $.each(jsonData, function (index, item) {

 

                 literalHtml += ‘<a class=”btn-link” href=”/stuff/detail/’ + item.Id + ‘”>’

                             + ‘<img class=”img-responsive” src=”‘ + item.ImageUrl + ‘” /></a>’

                             + ‘<h4>’ + item.FullName + ‘</h4>’;

 

                 rowid++;

            });

 

            $(‘#infiniteScrollingData’).append(literalHtml);

 

            if (!isHistoryBack) {

                $(“#lastRowId”).val(rowid);

            }

 

            inCallback = false;

            },

            error: function () {

                inCallback = false;

                //alert(‘Error’);

         }

     });

 

     return false;

}

Sit Back And Relax…

HOPEFULLY you’ve hooked this all up into an existing project and it’s working well for you.  Granted, your mileage may vary and I don’t make any claims that these snippets are
ABSOLUTELY bug free.  Please feel free to post comments if I have made your life easier or I have screwed up somewhere.  THANKS!  Don’t bother subscribing to this blog because it will probably be ANOTHER year before I post another one.  Or do, and you’ll be in for a treat ONCE a year.  At least it won’t be too much noise.  😉

Make WORK your favorite!

I SWEAR, I LOVE that quote from Elf.  It cracks me up every time I say it.

make-work-your-favorite

 So this blog is in response to the “you should blog more”, which I get a LOT.  Where does that COME from?  I don’t blog much.  I would say RARELY.  I try to blog about things that are productive, but they always turn into crazy rants.  THAT’S what THIS is.  I figure I’d get that out of the way so it would NOT be incorporated into my NEXT blog post which should actually be HELPFUL.  At least I HOPE it’ll be helpful.

 I SHOULD be working!  There is SO MUCH to do.  Why the HELL am I blogging?  I read about 4 or 5 different posts about “infinite or endless” scrolling.  This is a term used where your client (web or app) requests a bit of data to fill the screen which returns MUCH faster than attempting to request ALL of it.  Instead of having paging controls that just take up valuable real estate on the screen, the client monitors the scrolling of the window and if the user scrolls down then more data is loaded to fill that empty space.  The user keeps scrolling and the client keeps requesting more data.  There were a few posts about this that were total crap and totally confusing.  I stumbled across one that was pretty close, but they took their complex example and went with it (and some of their HTML was malformed and didn’t render properly).  If you’re going to demonstrate a piece of core functionality, then your objects DON’T need to be that complex.  Keep it SIMPLE!!  THEN if you want to go into something crazy then by all means DO THAT.

So that’s what I’m going to try to do with my next example.  Keep it bare bones and then if I feel like I have the time, then expand on that.

And THAT’S the problem.  WHO has the time to BLOG?  If there isn’t WORK  or other obligations to do (like random legal bullshit) then WHY the hell would anybody BLOG when they COULD be playing Xbox?  Yeah, I don’t get it either.  I certainly DON’T get paid for this.  I would definitely like to THANK the people who took the time to blog about endless scrolling and I could piece together the different examples (most that did NOT work right out of the box) and make it my own.  So I will take the complex code that I’ve already expanded upon and make it SIMPLE for the next post.

</rant>

If you’re following this then PLEASE SAY SOMETHING.  Put a comment below and THANK YOU for listening to my rant.

Categories: Rant

SpilledMilk.com Version Five dot OH!

“You should blog more, you should blog more”… ALRIGHT ALREADY!!

I thought “The Grid” would launch and I could just drag and drop content into my account and a website would magically show up. They SAID they would open up some time in the spring. And YES, technically it’s STILL spring, but you wouldn’t know it with all this snow all over the place. I guess I’m “Founding Member 29143” which makes me feel kind of like a member of The Matrix or OASIS. https://thegrid.io/#29143 I’m guessing they want MORE founding (funding) members before they launch. Their official statement was they effectively weren’t ready yet and wanted to wait. Reminds me of Pied Piper

So I had to roll up my sleeves and get to work. For those that don’t know me, I don’t wear long sleeves so I’m ALWAYS ready. I had been meaning to redo my website for a LONG time now, but it’s hard to find the time. FINALLY, it had to be done. I had gotten a Twitter Bootstrap link from William and it’s been in my InBox since June 26, 2014. I had briefly looked at their site. http://getbootstrap.com/ There is SO much there! It was just too hard to take in all at once so I bailed on it. I figured it would take TOO much time. Flash back to about a week ago, May 8th, 2015 and I finally bit the bullet. I fired up Microsoft’s Visual Studio Ultimate 2013 and started down the path…

I created a new project/solution and chose the MVC 5.0 with razor. Studio thought for a bit and then created all the templates. The templates ALREADY included support for Bootstrap! WOO HOO!! (Whenever you see a “WOO HOO”, think Homer Simpson when he finds donuts at work.) I hit F5 and the template site came up locally on my computer. WOO HOO!! When you’re trying to get a website up and running only a week before the Denver Comic Con you’ve GOT to go with the default. DE-FAULT! DE-FAULT! DE-FAULT! (again, think Homer Simpson).

I changed the About view. I changed the Contact view. I changed the Footer in _Layout.cshtml. I went through the nav-bar and changed a few things. And I was DONE! Ok, so I wasn’t ACTUALLY done. There was still quite a bit more to do so I turned to www.PluralSight.com

I found a course by Mark Zamoyta on Pluralsight called Responsive Websites with Bootstrap 3 and it was a beginner level. SWEET! I figured it would be a walkthrough and is absolutely WAS. He walks you through all things “Responsive”: Patterns, Navigation, Images, Video, Scrolling, and Animation. I grabbed bits and pieces of his course and the example code to put into my MVC 5.0 site. His course was all done in an index.html page, but I was able translate what he did into my Index.cshtml view and _Layout.cshtml files. That brought the level up to intermediate by constantly doing that mental leap, but it wasn’t that difficult. The bummer deal for YOU is that if you don’t have a Pluralsight subscription then you’re SOL. Sorry.

I had to re-install Chrome for about the fourth time, because I really needed its developer tools (F12) for its phone and tablet emulation. This allowed me to see how things would look and perform on an iPad or iPhone. I’m really not a fan of Chrome because I’ve had WAY too much adware come through it and it’s a royal pain in the ass trying to get rid of it. So the best way is just to uninstall Chrome and then re-install it when you need it again. So we’ll see how long this lasts.

I was able to deploy last night to www.GoDaddy.com using the FTP option of Visual Studio. Of course it was not successful the first time. Or the second time. OR the third time. Or the FOURTH! I was getting some obscure security error and finally found a page on the GoDaddy site that told me what options to set and how to do it, but it was an outdated page so that option didn’t exist anymore. I needed to set the CAV PRIV to FULL since I was using MVC 5.0. How the hell do I do THAT? I called the GoDaddy support line. Lou was AWESOME! In about two minutes he figured it out and sent me a setting that I need to have in my web.config. I added that setting in the appropriate section, redeployed, and *POOF*… My site magically appeared. WOO HOO!!

I still have a LONG way to go before the con, but at least I have a new and improved site. I need to add quite a bit more content and find that sweet spot for image file size and dimensions so the pages load quicker. I’ve got to do more Search Engine Optimization (SEO) research since domain name no longer rules. Dwayne REALLY set me straight with the SEO and talked about Google Penguin versus Google Panda rules.

Just spot checking some SEO tips and tricks I’ve already done the #1 thing you can do. Convert to mobile. Twitter Bootstrap is “mobile first”. Tonight I’ll be making it FAST (that’s #4). And #3 is Google’s integration into Twitter data, so prepared to get annoyed if you’re a Facebook friend.

I’ll post the results in a few months.

Take care, and thanks for listening to my rant… Parker

Idiot Driver 3.0

“Why don’t you blog more?” … “You should blog more.” I’ve been hearing that more and more. Who REALLY has the TIME to DO this?? So it’s been WELL over two years since my last blog post. Since two-dot-oh Twitter has changed their interface and with THAT… my app was broken. I don’t know EXACTLY when that happened, but it happened. Needless to say, I was PISSED. But why should I try to fix it? Twitter was just going to change their interface AGAIN and then my application would be broken… again.

The voice control was pretty much a hack. There was PROMISE of an API (Application Programmer Interface), but nothing really showed up from Microsoft. The Windows Phone 8 came out, but I didn’t have one. So what was the point of fixing idiot driver? All roads pointed to a dead end and some SERIOUS LACK of motivation.

I’m not sure where I got this motivation to rev back up and get in gear. Could it be my new found love of the Top Gear show and how they LOVE to make fun of EVERYTHING? That really could have been IT! It’s been hard to find the time. A few hours here. A few hours there. My to-do list was getting WAY out of hand, but then suddenly I was getting it under control.

My FIRST step was go for broke. Windows 8.1 I thought. I thought WRONG. I’ve been using Visual Studio 2013 for quite some time and the NEW way to run the phone emulation was through Hyper-V (Microsoft’s virtual machine code). By default I believe the Windows Phone SDK (Software Developers Toolkit) comes install by default with VS 2013. If it doesn’t, it’s easy enough to download and get up and running. Microsoft even GIVES their “express” version away to entice more developers. So even BEFORE I generated a template project I needed to get Hyper-V going.

So the RIGHT way to do this is to go to the BIOS FIRST. Make sure that your machine supports virtualization. The Hyper-V installation will tell you what options you need. As it turns out, my aging HP HAS these options but they aren’t on be default. You can typically get to the BIOS by rebooting and then frantically pressing F2, F1, F8, F10, F11, F12… Well, it’s ONE of those. I usually hit the right one eventually. Sometimes the boot screen will actually TELL you which key to press for the BIOS. Yeah. Press THAT one. Dig around and find the virtualization options and make sure they’re ON.

Once you reboot you will have to turn on the Hyper-V options ON in the Windows Options section. This is the “Features” section of the “Programs and Features” control panel. Turn on as many of the Hyper-V options on as you can. You might have to reboot. Yes. AGAIN! But quite possibly I didn’t have to this time.

You will NOW be able to run the phone emulators. If you haven’t set things up correctly, and believe me, I HADN’T quite a few times then these things won’t run. If you’re about to give up, then don’t worry. You can run your development code on your phone or better yet, your OLD phone that you couldn’t trade in. You can register these devices when you get your Windows Phone development account. You can only have so many phones registered at a time, but I think the max is three. If you’re named your new device the SAME name, you will have to UNregister the old phone and the REregister the NEW phone.

If you’re running your emulators fine and then you see weirdness that your application doesn’t authenticate with Twitter… Check the time on the emulator. Make sure the phone emulator time matches the REAL time otherwise you won’t be able to logon. You can close down the emulator and restart it or you can go into its settings to fix the time. This probably happened overnight when your computer went to sleep and the emulator went to sleep along with the computer. When the computer wakes back up, the phone emulator DOESN’T resynchronize with the computer. Sad panda. L

Once you’ve got something on which to run your code, you can create a template. I started with Windows 8.1. I called it PhoneApp2. I figured I could change the name later. Oh wait. I didn’t change the previous version, PhoneApp1. The conversion was going slow and I was creating ALL NEW views and using ALL NEW controls. I sure did MISS the old controls though. I used the ListPicker heavily, but I didn’t see it as one of the standard controls. I had converted the MainPage, About, Settings, and Disclaimer. Things were compiling and I was getting things set up the way they were. I needed to bring TweetSharp into the fold, because the API looked very straightforward. My old code just made the REST calls using Hammock. What a pain in the ass THAT was. I knew I needed to change from THAT mess. I tried to install TweetSharp from NuGet. NO support for Windows 8.1 because the Json serializer wouldn’t install because it wasn’t built for 8.1. BUMMER! All that time wasted. Going with 8.1 and then finding out that it wasn’t going to happen.

That was actually a blessing in disguise, because I created a Windows 8.0 project. Of course I called it something original. Yes. The default. PhoneApp3 was born. When I was digging through the files again of PhoneApp1 I found a README.txt file. Why didn’t I see that before? At the top of the file mentioned the use of the Windows Phone Toolkit. Ah-HA! This was readily available through NuGet as well. Of course I NuGot it. Is that a word? Past tense of NuGet is most certainly NuGot. Or is it NuGetted?

I NuGot TweetSharp which grabbed the Newtonsoft Json Serializer and Hammock (the REST easy library). I just started with the MainPage view. A few controls including the browser (for the oAuth 1.0b authentication). A few application buttons. All I wanted to test was to see if I could talk to Twitter. I could grab a few oAuth keys from the Twitter AppDev pages to bypass the logon. I plugged this stuff into the TweetSharp code and in a few minutes I had about 20 of my latest tweets showing up in my app. SUCCESS!! I coded up the oAuth browser response stuff using most of my old code for reference. Then it was mostly a matter of cutting and pasting the controls from my old PhoneApp1 project (Idiot Driver 2.0) and pasting them into newly created files. I was determined to stick with the MVVM (Model-View-ViewModel) pattern that I’ve been using for Silverlight and WPF. I was successful at this in MOST places, except for the application buttons. You can’t {Bind} to a RelayCommand there. Maybe you can do it in 8.1, but certainly NOT in 8.0. So you have to go old-school and hook up the click event. I created a utility class that would help me with the transition from the code behind (an evil place to put your logic) to the ViewModel. I created a routine to translate the DataContext to the ViewModel generically. I also created a class to call the RelayCommand which I needed for the old-school events.

I found two articles done by somebody who helped with the voice recognition libraries and those helped a TON. I scooped some code out and go the license plate and rant prompts working. I was STUNNED that I could dictate letters and numbers and the code would actually spell out license plates (ABC 123). Since the spacing was rather arbitrary I added some translation code which would turn the word “space” into an actual space. I did the same with “hyphen” and “dash”, which in the end they all got turned into underscore “_” characters anyway so they would be recognized as a Twitter #hashtag. I had to add more options because the API isn’t great at recognizing sentences so I added code to turn the word “period” into a period. I’m not sure if I’ll go total “Dragon”, but it would be nice if you could edit your tweet using your voice versus saying the entire thing over and over until the API recognizes EXACTLY what you’ve said. That’s for FUTURE versions I guess.

So a few more hours sprucing the thing up a bit and getting a few more bugs ironed out. You can edit your default tweet list and turn on/off more options. Once piece of code that I was FINALLY able to implement is the #hashtag #everything option. #This #will #turn #ALL #your #words… Well YOU get the picture. It’s annoying. That’s why you can turn the feature on and off. I swear. I’ve SEEN tweets like this though. THEY need this app!! They can type normally and the app will make their tweet annoying FOR them.

The publishing experience was actually easier than before. The Windows Phone Dev Publishing center remembered all my settings from before. The only hard part was adding the screenshots. That wasn’t working because I needed to delete my old ones FIRST, and THEN add my WXGA ones which would scale down automatically. Once I got that figured out, my app was back out in the store within about an hour of submission. Of course as SOON as you publish, you find bugs. So the next night I’m fixing those and then re-publishing. And the next night. Which brings me to version 3.2. It’s pretty stable. And what can you expect for FREE!

So I’ve put down my coding keyboard and picked up the “creative” keyboard to bring this shiny new blog entry. I doubt you’ve made it to the end, but hopefully you don’t feel like I’ve wasted your time, since I certainly feel like I have. But if you laughed just ONCE, then I’ve done my job.

Idiot Driver 2.0

My FIRST thought is WHY did this TAKE so (expletive deleted) DAMN long?  All right, all right.  I’ll cut you some slack Microsoft.  You DID give me the App Dev account for FREE.  I’ll give you that.  PLUS, you’re making sure my code isn’t stealing somebody’s password or doing something malicious to their phone.

That’s the timely news.  But if we warp back to two weekends ago, I would have been throwing QUITE a few expletives towards Twitter.  It was rainy and overcast and was the perfect time to update Idiot Driver to 2.0 and apply the “metro” look to the main page.

I have a few custom controls that I wrote for the settings page that prompt for input.  The first one is just a single field with Ok and Cancel all placed on a modal background.  I can adjust THAT font size so it’s a bit bigger (I know, it should be even BIGGER – next version).  Most of the default text blocks are pretty small.  Call it programming for the blind.  Which I am.  Oh sure, I can SEE, but I need a powerful prescription to see WELL.  I added a small “drop arrow” to the metro button so it looks more like a drop down list.  WHY Microsoft didn’t make this style a default is beyond me.

This modal field was NOT wrapping the text and was seriously annoying so I fixed that.  AND I intercepted the “Back” button in the modal field so it wouldn’t dismiss the entire page and go back to the previous page or exit you out of the application.  If the modal is displayed, the first press of the back button will dismiss the keyboard and the next press of the back button will dismiss the field.  A minor technicality, but definitely a LOT less annoying.

Raj sent me some code that he found on the net which basically adds the tilt effect to EVERY control that can do it.  So I added these tags to the top of each page and it just WORKED.  I was pretty happy about that, but the highlight color is pure white which is pretty ugly.  Maybe not ugly enough to try to change it before the next release, but I’ll get to it.

xmlns:STK=”clrnamespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit”
STK:TiltEffect.IsTiltEnabled=”True”>

 I added <<MYTAG>> substitution which is similar to the <<TAG>> substitution but it replaces the <<MYTAG>> with YOUR license plate it you’ve defined it.

The name change was pretty easy too.  Just make sure that all or your application name references are changed (including the manifest).  By doing that, the name will change in the Windows Marketplace.  I think that’s what took so long with certification and then the subsequent publishing to the WM.

The thing that REALLY got me all steamed was the fact that Twitter changed their REST (Representational State Transfer) response.  Everything above, including the manifest change, took me about 3 hours.  I was all set to test things on thephone (versus testing on the emulator).  That means I had to re-authenticate with Twitter.  This is where things failed.  I was able to get to the Twitter Authentication page, but once I pressed OK the navigation events would trigger and the response came back compressed.  The code I had was definitely NOT expecting this and spit out some graphical characters in the error box.  This meant that TEXT was definitely NOT coming back from Twitter and I had a long road ahead of me to try to figure out what was going wrong.  I Bing’d a bit and found that Twitter had made an announcement a while back that they WOULD be doing this.  GREAT!  I just get my application out to the marketplace just in time for Twitter to change their
minds AGAIN.  Just like with the first Twitter hurdle, the posts are REALLY old and out of date.  Although I saw something that looked promising.  “All I had to do was set two properties in the request and everything worked!”  This was coming from some post.  So I tried it, and I got nothing.  I was still getting compressed data in the response.  I figured I was going to have to decompress it myself.

I ended up using a GzipInputStream in one of the libraries that I was already using.  There was quite a bit of setup because you have to take the “character” data and convert it to bytes.  Then put the bytes into a MemoryStream.  THEN hand the MemoryStream off to the GzipInputStream.  I tested it and I got “bad magic”.  No.  SERIOUSLY.  “Bad Magic” means that the first two bytes of the data were NOT correct.  Not the correct “magic” (or completely arbitrary) numbers that mean THIS data stream is “Gzip Compressed”.  For data that has been gzipped those magical first two bytes are 13 and 139.  The stream that was coming back from Twitter was 13 and 253.  I tried quite a few permutations of properties and spitting things out to the debug window and I could ONLY debug the stuff ON my phone.  PHUN!!

if (response.Headers[“Content-Encoding”] == “gzip”)
{
    // MAGIC: First byte (13), second byte (139)
    // BOGUS coming back from Twitter: First byte (13), second byte (253)

    byte[] bytes = StringToByteArray(content);

    //bytes[1] = 139;

    using (MemoryStream stream = new MemoryStream(bytes))
    {
        using (GZipInputStream gzipStream = new GZipInputStream(stream))
{
using (StreamReader reader = new StreamReader(gzipStream))
{
StringBuilder builder = new StringBuilder();

                while (reader.Peek() > -1)
                {
                    int theByte = reader.Read();

                    builder.Append(((char)theByte).ToString());
}

                content = builder.ToString();
}
}
}

    Debug.WriteLine(string.Format(“content = ‘{0}'”, content));
}

I tried different Gzip libraries that Hammock might recognize to NO avail.  SIX hours later I figured I needed to head back to Bing.

I ran across a thread on a Twitter API forum that took me back to CodePlex.  REALLY?  I had gotten just about every library from CodePlex so why not some SOURCE?  I grabbed the source for Hammock and SharpZipLib.  That didn’t work.  I was getting reference errors and the namespaces were out of whack.  More Binging…  I found https://github.com/GunioRobot/hammock and downloaded the source from there.   I scooped those pre built DLLs from the projects and plopped them into my project.  BOOM!  Object reference not set.  AGAIN!  REALLY?  I stepped through the code and bit and saw something out of alignment.  So I brought the Hammock AND SharpZipLib project into MY project and hoped for the best.  I ABSOLUTELY could NOT believe it.  All of the source compiled and loaded onto my phone.  It actually WORKED!!  I threw my arms up in the air.  TOUCHDOWN!!  WOOO!!  I could NOT believe it.  I was hopeful, but wasn’t expecting even THIS to work.  So if I initially had ALL of the source in my project then…   “All I had to do was set two properties in the request and everything worked!”

I apologize to my friends that aren’t nerds who actually stuck it out to the end of this.  My brain hurt for quite a few hours, at least YOURS can hurt for a few minutes reading this.  😉

What’s in a name?

I’ve gotten some feedback on the Crazy Driver application name.  My FIRST instinct was Idiot Driver.  I don’t know about YOU, but when I see somebody doing something stupid I say to myself “What an idiot”.  I didn’t think Microsoft would “allow” this name so I shelved it.   I should have gone with my gut.  I thought I’d try to go with a play on words “Tweet Tag”, but how many people use the slang Tag for a license plate?  I also did a search and found the site tweetag.com.  So the domain was already taken.  Stupid Driver?  Stoopid Driver? (Too close to Stoopid Monkey, the people that bring us Robot Chicken.)

I thought some more and looked on Twitter and found people using the hash tag #CrazyDriver.  I thought was pretty generic.  And went with it.  I did a cursory search and didn’t find anything with that name.  My Crazy Driver app is released at the end of March and lo and behold the Crazy Driver GAME is released at the end of APRIL!  WTF?  And NOW Microsoft sends out their copyright infringement letter.  Pretty coincidental, but I certainly DON’T want anybody infringing on MY copyrights so I don’t want to do it to them.

I’m thinking I want to go back to Idiot Driver.  I don’t see this app in any of the online stores.  I e-mail the Windows Phone Marketplace support about my dilemma and the guy replied “I don’t see why you couldn’t use that name.  I should pass.”  So I’m gonna do it.  All I have to do is change the APPLICATION_NAME constant in my app to “Idiot Driver” and then change those references in my submission.  Hopefully it’s as easy as that and the people would already downloaded the application will get their newly named application during the next update.

It’s not ALL about idiot drivers.  You might see some cool things and have something POSITIVE to tweet about.  By all means.  There’s a few positive system default tweets as examples.  Or create and save your OWN.  Play “Slug Bug” or “Out of State” or get help with license plates that you can’t decode.  Ok, so THIS one was EASY!

YOURMOM

#CO_YOURMOM

Thank you for you continued support.  The name may have to change again, but the app will keep getting better.  🙂

In the beginning…

 

Crazy Driver Tile

Crazy Driver Tile

So I wanted to just get this app OUT there. Out to the Marketplace. Yeah, yeah. I started a sentence with SO. SO SUE me. Oh wait. No. DON’T do that. I really wanted that voice-to-text API in place before I published, but I knew that there would be some pain in submitting my application. And there WAS.

I got the main page laid out. I needed a settings page. And an “About” page.

http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx

In order to pass certification you need a way for people to contact you. That typically goes on the About page. I was going to use a pre-made About page DLL, but it didn’t really have the exact layout that I wanted so I created my own panoramic page and put everything in there.

I figured that I NEEDED a disclaimer page. I’ve already said it (in my previous post), texting while driving is STUPID. DON’T BE STUPID! That took some doing. Not the layout, but I needed to remove that page from the history so when you’re on the main page and you hit the back button you don’t go back to the disclaimer. THAT would be stupid too. So in the main page I added this to the Loaded event. I tried a TON of other stuff, but this is what worked the best.

// Remove the disclaimer page.
try
{
 if (((App)Application.Current).RootFrame.CanGoBack)
 {
  ((App)Application.Current).RootFrame.RemoveBackEntry();
  }
}
catch (Exception)
{
 // Eat this.
}

Finding the Twitter code was painful as well. I headed down the wrong path because I didn’t realize that Twitter CHANGED their API a while back. Uh Oh. That’s a BIG NO NO Twitter. But they’re so big that they just did it and HOPEFULLY it won’t change again. So I got all the old code laid in place and NOTHING worked, so I googled with bing some more. I finally found some REST code that worked. I didn’t KNOW it was going to work, but I thought I’d give it a shot. It uses the Hammock.WindowsPhone DLL and some other C# code.

Things STILL weren’t working, but I noticed that in the TwitterSettings.cs file I needed to setup some keys and you HAVE to head to https://dev.twitter.com/, create and register your application, and THEN you can get some keys. Paste those keys into your settings and you’re good to go.

I wanted to TRY to make some money with this thing so I thought I’d put Microsoft’s Advertising control on the bottom. But you need KEYS for THAT to work too.

https://pubcenter.microsoft.com/

I tested the final release state on my phone. I had been doing this all along, but deploying the debug version. So now I ran a few smoke tests against my app just to make sure the Twitter registration was working. The disclaimer would display and then not get in your way when you wanted to exit the application. I added a few new default tweets and then deleted them. You probably saw those test tweets. Ok. Probably not. 😉

I was READY to submit my application! WOOO! Of course you can only submit your application if you’re a registered developer (but you already knew that, right?) That’s 100 bucks a year, but I got my registration for free through the “30 Days to Launch” campaign.

The first page of submission you’ve got to have ALL these other icon sizes. WHAT? Oh geez. So I brought up Pixlr and sized up the icons. They looked like crap, but I figured I’d change them later. You’ve got to answer a few questions about pricing and distribution. I selected FREE and worldwide. A few more questions and I was ready to submit.

It took a few days after submission to get a certification failure notification, because a few of the Asian countries would find my app offensive. Hmmm. Was it my disclaimer page? DON’T BE AN IDIOT! Or one of my system default tweets that has the word “damn” in it? So I removed quite a few countries. Submitted again. And the thing passed a few days later.

AWESOME!! My FIRST Windows Phone app. WOOO!!

Version 1.0 was out the door at the end of March. And I was already working on version 1.5. I figured I’d call it 1.5 because only half of the app would be “metroized”. The settings page got the metro look and a few other annoying things were taken out. The disclaimer only shows up every 10 times. The default tweet “Select default tweet…” which was actually just the first row of the default tweets was ALWAYS in the editable tweet section. So THAT got removed. As part of the “metroization” I created a modal text field which has bigger text and auto selects the entire field when it pops up. This way you can just start typing if you want to replace the default hash tags. I cleaned up some of the icons and made the horn bigger and the twitter bird smaller. Does that bird have a name? Hmmm. Since I could only find REALLY low resolution pictures of the car horn icon I created my own using Paths in Blend. So now I can scale that horn up and down at will. I’m still keeping that dashboard themed icon when pinned. I think it makes sense using that main dashboard metaphor anyway.

The submission of 1.5 was a hell of a lot easier. I knew it would be, because when I resubmitted 1.0 all I had to do was make changes to the submission and everything else stayed the same. For 1.5 I dropped in the new screen shots and icons. Loaded the new XAP file. Clicked NEXT on quite a few screens and the thing submitted and then passed certification a few days later. WOO!

Version 2.0? This still won’t have the voice-to-text in it, but the main page will be “metroized” and the default state will be using the geo-location services from Bing! Yes, you have to get yet ANOTHER application key.

So PLEASE stick with me and you’ll see the little engine that could grow into a full-fledged application.

THANKS!!