Above is a walk-through of my final project! Requirements include:
- Must use an Angular Front-End that includes at least 5 pages
- Must contain some sort of nested views
- Must contain some sort of searching as well as filtering based on some criteria. Ex: All items in the "fruit" category, or all tasks past due
- Must contain at least one page that allows for dynamic updating of a single field of a resource. Ex: Allow changing of quantity in a shopping cart
- Links should work correctly. Ex: Clicking on a product in a list, should take you to the show page for that product
- Data should be validated in Angular before submission
- Must talk to the Rails backend using $http and Services.
- Backend created with JSON that accepts and stores the data for Angular
I was inspired to create a localized version of the "Girl Develop It" website, for the San Diego chapter. It's a group that I'm very proud of because of its welcoming environment and offerings of beginner-friendly classes at an affordable price. I've made friends here and it's great to see how much we've all learned. Last night people were writing JQuery when just a few months ago some haven't even heard of it before! I literally invite every woman I know to this group, regardless if they are local to my area or not because they have chapters sprinkled all throughout the US. And if there isn't a chapter near you, you should totally start one!
So I wanted to capture the essence of their original site, but highlight the features of our local chapter to include functionalities surrounding our book club, job posting, and meetup groups. I am happy with how it's turned out so far, although I ran into a few roadblocks that I'll briefly discuss below. I also have a few ideas for how I want to improve it. My assessment is this Thursday, which will also mark the completion of the Learn Verified curriculum, if passed! Yahoo!
SOME CHALLENGES + SOLUTIONS:
In general, Angular took me a little while to get the hang of, so much so that I consulted outside resources to receive the same information in multiple ways. I used Lynda, Code School, Code Academy, and of course its documentation, throughout the building of this app. I was instantly smitten by its features such as two-way data binding, nested views and ng-repeat, all in support of a dynamic one-page web app, but I frequently went cross-eyed when it came time to building this app from scratch.
The first challenge I had was figuring out how Rails and Angular could work together. I found this Youtube video and blog post to be extremely helpful; both resources use Bower to add Angular to a Rails app.
The second and probably biggest challenge I faced was making API calls to the Meetup.com API. I kept getting a "CORS" error, which had to do with authorization even though the information I wanted to access is public. Although I'm thinking about it, I purposefully didn't create logins for my app so setting up Omniauth for this wasn't practical. Eventually, a solution was found using the meetup client gem.
I also kept changing the structure of my database to suit the needs of my app, which I'm still unsure about. I had to do some googling about because Angular authentication wasn't covered during this course. For the purpose of my assignment though, my current setup fulfills the requirement of being able to save Angular data via a post to my API. However, previously it was set up with two models, so that a book could have many reviews. This was so that everyone from our group could submit a review. Possibly we could have an internal group rating for a particular book with this data, for example. Currently the real website is accessible to everyone which is why I originally wanted to mimic the same feel. But then I changed it because I think I want to create user roles, so that only admins can add a book to our reading list or post jobs, which (I think) would mean that each user could submit/record their own review/rating. Now the book and review is in one model with requests to update the API accordingly. I'm still undecided, but I hope to get helpful advice during my assessment and polish it up.