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