Zyring Day 11 – UI controls for my pages

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Add a pager UI elements

Oddly phrased title, but this tutorial involves adding some UI controls for the pagination I did in the last tutorial – the usual “Previous | 1 | 2 | 3 | Next” type stuff. This can be done through an external library, Angular UI Bootstrap, which I install through bower.

That goes ok, but then I forget to add the dependency to my app.js file and don’t figure out what the problem isĀ for ages… I can see this becoming a theme. Even after this I get some errors, and discover I’ve loaded the wrong version of the library through bower: I need to install ‘angular-bootstrap’ rather than ui.bootstrap.

Once again, Stack Overflow comes to the rescue. After this, I have a nice bar of page numbers to click on:

UI element for changing pages

UI element for changing pages

Of course, it doesn’t actually do anything, yet, but it looks like that’ll be the next tutorial…

Advertisements

Zyring Day 10 – Callback Tuesday

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Divide apartments in a city into pages, part 1

This tutorial has a nice innocuous title but actually stumped me for ages. I spent all day on this but learnt some very useful stuff about JavaScript in the process (see later).

The idea of the tutorial is exactly what it says – divide up the list of apartments so that instead of vomiting a hundred or so apartments onto one page, it splits them into more user-friendly batches of 9. This also allows faster loading speeds and a less cluttered map. Seems reasonable.

The tutorial goes into very thorough detail on the process of how to split an array of data into sub-arrays. I think I could have worked this out OK on my own but I’m not complaining. The problem I had was how to adapt this method for getting my array from the backend server instead of one I’ve got saved in my current file. First I needed to understand a bit more about $resource and its query method, as I’d copied it in kind of mindlessly. I read some of the information on the previously linked (and very useful) tutorial on creating a CRUD app, and got my head around the syntax a bit better.

However, I was still confused: I tried printing my query({cityName: $routeParams.cityName}) to console.log and it was coming up empty. However, I’d used this in the previous tutorial and it definitely had some data stored in it. This looks like some kind of asynchronous thingy (to use the technical term).

šŸ˜¦ Time for some research.

Callback Tuesdays

At this point I should admit that I’ve been treating JavaScript as some version of Python, except it has the wrong syntax and runs in the browser. This approach was starting to fall apart a little…

I looked at Zyring’s own documentation on the $resource service and read the sentence

“If you like to be notified exactly when the results become available, you can pass in a function callback to the get and query methods”

I realised I didn’t really know what a callback is, and that I probably should if I was going to do anything time-dependent. Luckily when I googled it there were several decent introductions. I ended up playing with some examples based on this nice tutorial and runnable example. Below are my notes on this for future reference.

Their example is something like:

function mySandwich(param1, param2, callback) {
    console.log('Started eating my sandwich.nIt has ' + param1 + ' and ' + param2 + ' in it.');
    callback();
}

mySandwich('ham', 'cheese', function() {
    console.log('Finished eating my sandwich.');
});

This produces:

“Started eating my sandwich.
It has ham and cheese in it.”
“Finished eating my sandwich.”

We have freedom to change the function:

mySandwich('tuna', 'banana', function() {
    console.log('Bleeeurgh...');
});

This gives

“Started eating my sandwich.
It has tuna and banana in it.”
“Bleeeurgh…”

Or here’s an example with a callback function with a parameter:

<br />function anotherSandwich(param1, param2, callback) {
    console.log('Time for another sandwich.nnIt has ' + param1 + ' and ' + param2 + ' in it.');
    callback(param2);
}

anotherSandwich('ham', 'mustard', function(param) {
  console.log('Shame I hate ' + param + '.');
});

which gives

“Time for another sandwich.
It has ham and mustard in it.”
“Shame I hate mustard.”

Divide apartments in a city into pages, part 1

So this gave me some basic idea about callbacks, including the idea that I might want to implement my pagination algorithm in a function callback to $resource.query, so that the array has been fetched from the server before I start doing anything with it. I don’t know if this is the ‘proper’ way to do it, but it worked anyway.

Finally, writing the pagination algorithm based on the example went pretty smoothly, and I had my big array of apartment data split into a bunch of smaller arrays. I wasn’t whether I was supposed to do anything else with it right now, like connect it up to the html file somehow, but I thought I’d keep going and see what the later tutorials said… I can always go back if necessary.

Zyring Day 9 – more maps…

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Adding pins to Google Maps

Another straightforward one that does what it says on the tin, though I needed to view the example here to work out exactly how to do it. Now I have some markers on the map!

Map of Seattle with markers to show apartment locations

Markers showing apartment locations

The current map settings aren’t ideal, though, because Tacoma and Olympia are off the map. For now I just zoom out a bit (zoom level 8 instead of 10). Now the Olympia markers are visible:

Zoomed out to show Olympia

Zoomed out to show Olympia

Add overlays to your pin

This time I’m adding windows that pop up when a marker is clicked on, with some information like a picture of the apartment and the price. This uses the ui-gmap-windows directive and is again pretty simple to set up.

Map with pop-up description showing a photo and the price of each apartment

Now with pop-up descriptions

Zyring Day 8 – Google Maps time!

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Google Maps API key

Nice easy step here – obtain a key for the Google Maps API. OK, this was actually slightly more complicated than expected as Google’s instructions appear to be out of date, and the actual process was a bit different… not too much of a challenge though.

Installing a Google Maps directive

Another setup-type tutorial here, though again somewhat confusing. The particular page of of documentation linked to was for something called the Google Maps Asynchronous Loader, but I don’t know whether that is something to install on its own or as part of the angular-google-maps package. Anyway I just installed angular-google-maps with bower using the instructions on the Quickstart page. I originally didn’t read the bit about not needing to update index.html manually but that didn’t really matter, it was kind of useful to dig around the files and see where everything was saved anyway.

After that it was time to actually include some maps! Again, I followed the Quickstart instructions, using my API key from the previous step, and it went pretty smoothly – I now have a map (of Montreal) at the top of the page for each city.

A map (of Montreal, not Olympia)

Not a map of Olympia.

Centring Google Maps

This just involved moving the map from Montreal to Seattle. I was mildly surprised that Seattle is a good way north of Montreal, but other than that not much to report here.

Zyring Day 7 – displaying lists of apartments

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Getting a list of all apartments for a city

The aim of this tutorial was to retrieve the list of apartment data for each city and show it on the city page. This took me a little bit of time but there were no major problems, the instructions were clear. Just some syntax errors to fix and some reading up on $resource.

I now have some beautiful pages like this:

Screenshot for Redmond with a list of data

List of data for Redmond

Display a list of all apartments in each city

Unsurprisingly, in the next tutorial I have to clean up this mess I’ve vomited onto the HTML file, and display it in a more useful format. This uses the ng-repeat command I met in an earlier tutorial.

First I made a simple list of apartment titles, just to check I knew what I was doing:

<ul>
    <li>{{apartment.title}}</li>
</ul>

Then I had a think about what I’d actually want to display for each apartment. For a start, I went with:

  • title
  • thumbnail
  • floorplan
  • price
  • contact details
  • list of features

… basically everything except the location data, which I’ll think about how to display when I get on to the map stuff later.

This mostly went ok, except I need to work out how to extract all the list of features properly. At the moment I’m just extracting the first four items on the list:

<ul>
    <li>{{apartment.features[n]}}</li>
</ul>

This might be a better way to go anyway as the lists are quite long, but I still want to figure out how to extract all the items each time.

My pages now look like this:

List of data for Redmond, tidied up

Much tidier.

A definite improvement on last time.

After this I seem to have a choice of four different tutorials to tackle next! This will have to wait for a couple of days though.

Zyring Day 6 – something to do with the $resource function

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Using dependency injection in Angular

Hm, this one is still pretty abstract too. I’m apparently going to want to use something called the $resource function to connect with the backend server, and I want to refer to it using my factory defined in the previous tutorial. I’m still very unclear on what any of this stuff actually is, though, so hopefully things will start being connected up to the rest of the application soon.

Attaching a $resource to all apartments URL

Bit of a weird title, but this looks like what I was hoping for, a concrete connection to what I’m doing in the app. I connected up $resource to the backend server URL spidey.zyring.com/cities so I can use it to get apartment data. Still a bit confused about the connection to the previous tutorial on dependency injection, but hopefully I’ve got it right.

Zyring Day 5 – the backend server

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Get to know your backend server

This tutorial is more just a ‘read-and-understand’ job, which was a nice change of pace after yesterday. I’m introduced to the apartment data I’ll be using, which is in a JSON file hosted on the backend server and has the obvious stuff like price, location, photo and description.

I also read a bit of stuff about the HTTP protocol.

Creating an Angular Factory

In this tutorial I started on the ‘M’ bit of MVC, making a new directory to put our model code in. This will be the bit of the code that connects to the backend. Inside this directory I put a javascript file containing something called a factory, which is some Angular jargon I currently know nothing about. As I don’t really know what this is yet, I didn’t know what to call the file, so currently it’s rename_me_later.js. Then I stuck in an empty factory() method.

I’m hoping that this all makes more sense when used in context later, as with the ‘Communicating with Controllers’ tutorial which was also a bit abstract.

Zyring Day 4 – fun with routing

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Today’s tutorial successfully unconfused me on a variety of things. It took me ages to figure out, but I was happy when I got there and finally started to understand some basic things about Angular. The key for me was the ‘How do views get displayed in Angular?’ part of the help documentation, which gives more of a high-level overview of what’s going on.

The idea for this tutorial is to be able to click on each city and go to someĀ information for it. However, AngularJS is a single page application framework which loads a single HTML page once. So when we navigate to, say, the Seattle page, instead of loading a completely new page we just swap to another view. Also, there’s no need to have a separate view and controller for each city – we want to make generic ones (which I called cities.js and cities.html), and then parametrise the URLs so there is a separate page for each city.

At this point I was starting to lose track of how all these javascript and html files related to other, so I decided to draw some pictures. Here’s the file tree with all the bits I’ve been using so far included. There’s index.html, app.js, and one example view and controller, example.html and example.js.

File tree with an example view and controller.

File tree with an example view and controller.

And here’s some notes on each one.

File tree again with notes on each file added

File tree again with notes on each file added

I haven’t added anything on parametrising URLs yet, may put up a further picture at some point when I understand it better.

Now I had the diagrams, it was easier to keep in my head what was what. First I had to edit app.js to route to the page for each city using the parametrised URLs. My next task was to retrieve the city name stored in $routeParams and display it in the HTML view as the title for the page (instead of my previous standby, ‘BANANAS!!!’). This caused me a load more confusion but I got there in the end.

At this point I found this tutorial on routing helpful (the one linked to in the Zyring documentation was a video tutorial, which I never get on with, and also required you to sign up to something).

After I succeeded with all this I was feeling pretty pleased with myself given my complete lack of familiarity with Angular.

Zyring Day 3 – adding views and controllers, and getting confused

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Creating a new view and controller

I found this tutorial confusing and would have appreciated a little more guidance in exactly I was supposed to do. Of course, I’m expecting to struggle more with the Angular parts as it is new to me, but I’m not sure that was the whole problem. As far as I can make out I was supposed to create some kind of new view and controller, but it wasn’t very clear what they should do. I interpreted the task as making a view and controller for each city. I had no idea how to automate this, so I manually created an html page for each city (which currently just says ‘BANANAS!!!’) and a corresponding controller, and then individually linked each controller on the index.html page.

This worked, in that clicking on Seattle or whatever took me to an exciting ‘BANANAS!!!’ page, but it’s not really very clever. It looks like the next tutorial will explain how to do things properly.

Nothing else to report for Day 3 though as I spent most of it writing the big old intro post.

Zyring Day 2 – styling with Bootstrap

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Styling Your Cities Page

There’s not much instruction given here, but I’ve played with CSS and Bootstrap a little bit before and am happy to just start mucking around. I generally enjoy thinking about design and layout and spent plenty of time messing around making posters in LaTeX or vector graphics in Inkscape during my PhD.

I’m going to aim for a simple layout a bit like this:

rubbish sketch of page

High quality mockup of my page

So first I need to make a 3×2 grid, which I know how to do if I was going to manually specify what goes in each box. However, in this case what I really want to do is just populate it automatically with stuff from the controller, keeping it in three columns. This took me a while to figure out – I used this StackOverflow question for guidance, but that initially caused me to overcomplicate things a bit.

Anyway once I got that working it was down to playing with styling — this took me ages as I’m still quite new to it, but it wasn’t hard to google for relevant tutorials for things like adding a darker background to the city names to make them more readable.

What I ended up with wasn’t great and needs to be fitted to the screen better, but it’ll do as a start – I don’t want to spend forever on styling right now as I’m keen to get into the mechanics of the site.

website screenshot

Well, Ā it’s a step up from the hand-drawn one…