Testing Woes.

While waiting for the devise and angular integration to finish I started to work on adding testing to the site. My first stop was to set up rspec tests for json. This ends up being pretty easy since we only have indexes right now on all of our models and with the parse Json method we can pretty easily use FactoryGirl and Faker to create some fake information and test for it. These tests ended up not taking too long and while not comprehensive they will let us test to make sure that the server is always serving up Json. The next step proved to be my undoing. After going through a couple of tutorials I decided to add protractor to the angular side for end to end testing. After a while of setting up the config file and a spec that checked for the title of the page I tried to start the webdriver. It failed. I sudo removed all the files for chromedriver and reinstalled them which seemed to fix the problem and the host server now runs. Immediately after I tried to run my protractor test. I continually got a 

“The driver executable does not exist: /usr/local/lib/node_modules/protractor/selenium/chromedriver” 

I uninstalled and reinstalled both selenium and the chromedriver from different sources following the advice from http://stackoverflow.com/questions/23240397/protractor-does-not-find-chromedriver-the-driver-executable-does-not-exist but I still couldn’t get it to work. It’s now the end of the day and it still doesn’t work. I’m at a loss. 

If anyone has had this problem and happens upon this post please let me know what you did to fix it. Thanks! 

Until then I’m going to leave the protractor branch alone and focus on editing pages as a logged in admin and formatting the site to look prettier.

Controller -> Serializer -> Factory -> Controller -> View

  This morning was spent finishing the work that I had started yesterday afternoon creating controllers and serializers in rails and passing them through http requests to angular so that they show up in views. Our three main components are our Items for sale, Artists and their info, and Articles about stuff goings on. Currently each of those are showing up on their own page in an unordered list of names. 

  The work flow was creating a controller with just the index action, Using ‘Active_model_serializer’ to convert them into pretty json and only pass through what we needed from the site. Once all three models had their rails-side index only setup I added routes for them. Note about the routes; I think that if people want to visit the site by going to …/articles they’ll just end up seeing a pack of json which is not what we want because it’ll bypass the entire angular app sitting cleverly atop the rails. As a solution I think I can just set a redirect in the routes.rb file to the angular version. Just add the /#/ to get to the angular front end for each possible view. So that’s something to try out. 

  On the angular side afterwards I created a very simple view with an ng-repeat directive and each of the objects names. Each of these has a route through the app.js file which specifies the http route, controller, and template to inject into the main view.  The controllers are also currently very simple and consist of a call to the object’s factory file which in turn does an http request for all the data. Because it’s all in javascript everything happens very quickly, which is great. 

  Also in my work today i discovered what the ‘use strict’ command at the top of the app.js page does. There’s a great article about it by John Resig (http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) but the basics are that it forces the applicaiton to run in a very specific context. It keeps me from making some dumb mistakes and unsafe actions, like creating a global variable by throwing exceptions and errors. 

So that’s all cool. Next step is to properly set up the page so that it looks like a real site and not just a bunch of lists on each page and also to look into a testing suite that is easy to implement with angular. I’m leaning towards protractor but we will fee what else I can find. 

A Sudden Change of Plans

I’ve decided that since my project creating a drink recipe book with svg wasn’t that interesting to me, I am going to help another classmate with his idea for a project that he’s hoping to continue into a real business. The idea is to have an ecommerce platform for artists to sell prints or pieces of their art, the proceeds of which will go to maintaining the site and once that’s taken care of to a series of charities, which depend on the artist. It’s a cool Idea with a semi complex nature to it and since the goal is to still focus on angular and testing (because it’s hopefully going to turn into a real site) I’m on board.  

Today was spent deciding how to set up the database and break something like this off into managable chunks. The first stage will be setting up artists profiles and basic shops as galleries. Then we split on adding either admin capabilities to edit the page and add new artists from the site and setting up the stores to accept payments. Hopefully we get far enough along to do both before our final presentation next friday. 

Another fun thought from today. Using SVG’s on my future portfolio site to “fold” into different page renderings, much like page origami with different colors on each fold. So I put that in the pocket for future use. 

Hours spent seeding

Whelp. I hit a small snag will trying to convert an entire json file to match my database structure. 

I ended up using a jstore column on my main drinks database to store all the ingredients. Cool. Awesome. Fun! Only the data in the json is stored so that each ingredient is a hash something like “ingredient” => “gin”  but what I want is “gin” => “2.0” where 2.0 is the number of ounces. Which through a couple loops and changing things from arrays to hashes finally lead to a basic hash which I saved to the database for an initial set of drinks (conveniently these are all the International Bartenders Association standard ones) This gives me a bit of room to make the basic framework before I start adding users and ways to make these drinks. 

Day 2 – Rails as an API

  So yesterday was a hard day to stay focused on anything mostly due to the stream of constant interruptions by facebook, twitter, texts, calls, and emails that come with having birthdays in this day and age. I also experienced a mildly upset stomach from eating too much cake and a total lack of desire to sit inside on such a gorgeous day at the end of summer. 

  Today should be different. I hope to get the basic database structure set up using Rails to serialize each of the cocktail drinks. For seed data I found a json file of drinks and recipes with ingredients. I think I’ve decided to try and store each of the ingredients serialized as a hash in the postgresql table. With the keys referencing the ingredient and the value being the amount. Still to be decided is whether I want to store the ingredient amount in ounces, centiliters, or by parts percentage.  

  More posts to come throughout the day! 

Wireframing

I think what I’ve decided to do with this project in terms of planning is to only plan out the very basic level of the app instead of the total final project. This way I can change wireframes and add more views based on what I need for each individual feature and I won’t feel terrible cutting things out if they don’t fit into my timeframe and then add them in after the presentation while I’m still working to find a job.

Final Project Wireframes

Wireframing

WDI Third Project

Starting this week, we begin our final project which will run to the end of the course. After a long run of doing no blog posts what-so-ever I’ve decided to try something new for this project. I’m going to document the entire process to see if that helps me to organize my thoughts and plans better and also stick to them more rigorously. I think it will also be useful to see my workflow and hopefully be able to notice glaring places for improvement and what works better.

The project idea is going to be built off of something I was playing with all week while learning Angular. The basic idea is a recipe book for drinks in angular where you can search by ingredient and category and glass type. I want to have a rails backend to store all the ingredients. What I’m still trying to plan out is which features I can add and how long it will take for me to realistically make each one a reality. Some features I want to add are a SVG drink diagram that shows the pour separated by ingredients and amounts using D3 or Snap, A user with a profile an an ability create and save drinks as favorites, and maybe a an ingredient list oh selected drinks to a cart function.

Since I’m planning on using things I haven’t really explored I would like to make testing a priority to help with expanding features. Which will also add a lot of time on to the process because I aside from the basics which we went over in class I don’t feel strongly about writing tests especially in Javascript. Hopefully angular makes it easier than what I think it will be. I’d also like to push a lot of flashy transition and have a decently responsive site.

Day one starts today!