Zyring Day 1 – getting started

[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.]

Setting up my development environment

This involved installing Node.js – this took me a couple of goes as I didn’t read the list of prerequisites properly and didn’t have g++ installed. Overall not too much hassle, though I think this step would be highly intimidating for a beginner not used to installing packages from the command line.

I think it’s sensible that they added the ‘What To Expect’ section (‘Setting up a development environment is one of the most difficult and frustrating tasks that one faces as a software engineer’), but it’s at the bottom of the page so I only read it after I’d managed to install everything.

Next up, I installed grunt and bower using the instructions (apparently I don’t really need to know what these are right now). This used the package manager npm. The first time, this came up with a bunch of errors including some ‘permission denied’ stuff, so I added sudo at the beginning even though that was only in the Mac version instructions. This appears to have worked.

I also had to install git as it is not included in my version of Linux Mint… so that part of the instructions is not just for Windows.

Bringing up my website

OK, so in this part I should find out a bit more about what grunt and bower do.

First I ran the command npm install, which installs all the libraries that my tools require to work. This took ages, so I have plenty of time to stare at the ominous advice: ‘In case of any errors during the execution of this command, read the error messages and try to look for a solution by Googling the errors. If you have no idea how to tackle the errors, use the discussion board or the help button on the top right of the screen to get assistance’.

As it happened, I got nothing scarier than a couple of warnings. Although Dropbox started ranting about ‘cannot monitor the filesystem’, which from googling looks fixable. No problems with bower install.

The next step is supposed to bring up a browser window with my amazing website on it! Unfortunately, I got this Warning: watch ENOSPC” problem instead.

This also seems to be related to the Dropbox issue. In hindsight, it was probably a bit stupid to put the project into Dropbox as I’m only planning to use the files on this development machine where I’ve installed all the relevant stuff.
I just tend stick everything there by default.

I may move everything out of Dropbox next and hope nothing breaks. Anyway, at this point I’ve kind of had enough for one morning and so have a break.

Later: moved the folder out of Dropbox and ran grunt serve again. Success!

How to use Zyring

This section just has some bumf to read about what Zyring is.

Communicating with Controllers

To start, there’s some information on the Model-View-Controller pattern.

This is the first step where I start adding to the project. First I did the easy bit: finding images of the six cities given and adding them to the Images file. For most of these there are multiple cities with the same name, but I’m going to guess that in each case I want the one near Seattle.

Then it’s time to write some actual JavaScript. First I have to add some data with the names of the cities and their image URLS to the controller. I kind of bodge that but get on to the next lesson anyway where I work out the syntax and fix it…

Displaying a List of Cities

Here I update the HTML for my main page, displaying the names of each city with the image below. These are taken from the data stored in the controller, using ng-repeat as suggested.

After a bit of trial, error, reading the help given, and more error, I get something working. This produces a list of big pictures of the cities with their names above them. I don’t make any effort to make this look pretty, since I can see the next lesson is about styling with Bootstrap anyway. I think I’ll leave it here for today!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s