WDI Day Thirty-Five: API’s and AJAX

Earlier this year I took a class in JavaScript development, so API’s and AJAX are somewhat familiar to me. Today I realized that I have a much better handle on these topics when it comes to tackling new projects, however, I’m looking forward to practicing my work with API’s so that I can feel more confident with that type of code.

Application Program Interface (API) is a service that provides raw data for the public. We reviewed how we can create our own APIs so that we can use them for CRUD functionality in apps, which was a pretty fun scenario to take a look at.

Asynchronous Javascript and XML (AJAX) do server side requests asynchronously on the client without having to send an actual browser request that reloads the page.

In class, we played around with the following code to make API requests – and I thought it was a pretty good chunk of code that I could use for future reference when it comes to API-related projects:

$(document).ready(function(){
$("h1").on("click", function(){
var url = "https://api.wunderground.com/api/api_key/geolookup/conditions/q/va/midlothian.json"
$.ajax({
url: url,
type: "get",
dataType: "json"
// $.ajax takes an object as an argument with at least three key-value pairs...
// (1) The URL endpoint for the JSON object.
// (2) Type of HTTP request.
// (3) Datatype. Usually JSON.
}).done(function(){
console.log("Ajax request success!")
}).fail(function(){
console.log("Ajax request fails!")
}).always(function(){
console.log("This always happens regardless of successful ajax request or not.")
})
})
})

WDI Day Thirty-Four: Intro to Angular

We started getting familiar with the structure for Angular applications, and how Angular is a framework where everything is very modular. Learning the different pieces and how they fit together was a little bit of a struggle. After being immersed in Ruby on Rails for a couple of weeks, it’s going to take a little while for my brain to readjust to JavaScript.

I learned about how directives are markers on a DOM element that tell Angular JS’s HTML compiler to attach a specified behavior to that DOM element. Angular expressions remind me a lot of inline Ruby code, which allow you to execute JS code in HTML files.

We got a head start on our homework, where I found myself running into errors. Hopefully when I work on it some more this weekend, all will get better.

WDI Day Thirty-Three: Project Week 2, Presentations

After an exhausting week of trying to get things to work, have things break, and also find myself unable to complete a few ‘nice-to-haves,’ I somehow made it through it all with a functional app that looks nice.

Today we worked on finishing touches for our applications. We also did screencasts of our apps to demo them. It was my first time ever making a screencast, and I’ll definitely need to do more of these in the future. Anyway, here’s mine:

I was really excited that this morning I managed to resolve my whole sending an image to the database issue. It was funny how I was almost in disbelief when I got it to work. Apparently I stared at my screen for a while and said, in disbelief, “I got it.” Everyone who was coding in the room cheered and high-fived me. They can definitely relate to how amazing it feels when you resolve an issue that seems impossible.

Later this week I hope to tackle some of my other unsolved problems. But for now, I’ll take a break and rest from this whole coding thing – I want my mind to definitely stay sharp.

mapsketch-screenshot

WDI Day Thirty-Two: Project Week 2, Part 4

Today proved to be another day of frustration. I spent the majority of the day tackling the encoding/decoding issue with images. I managed to resolve one major issue, where the Google API was throwing errors when trying to encode the canvas with the Google static image map, so I was able to create a string for the encoded image. However, I ran into the problem of being able to submit that string to the database. I tried hiding an input field where I changed the value to the encoded string and also tried to create a new field with the new value on submit of the form, but still no luck.

I did manage to resolve an issue with the drawing tool so that users can create different strokes in different colors. I also made a few UI adjustments, yet overall, it was a day of frustration that involved a lot of error and not too many breakthroughs. Perhaps tomorrow will bring with it some better insight?

WDI Day Thirty-One: Project Week 2, Part 3

I’ve been working like crazy, and some issues are issues that I don’t know whether or not they can be resolved. Overall this web app project has me realizing how important the planning process is. You may have a great idea, but you might want to test out a couple of things before moving forward with it.

Our projects are due on Thursday morning, so I have one more full day and night to work on my app. At the moment, it’s functioning and I’ve styled it so it nearly looks the way I’d like it to. I’ve also deployed it to Heroku so everything looks like it will function alright in production. Tomorrow night I’ll work on creating a screencast of the app, so until then, I’ll have to try to get everything ready to launch.

Goals for tonight:

  • Possibly roll out a many-to-many relationship where users can create lists.
  • Look into submitting images to a database. I’ve been struggling with this issue and have decided to put it to the side for now. I’ll visit it later to see it I can roll it out. If so, it would make the user experience a lot more seamless.

Goals for tomorrow?

  • Look into using ActionMailer for email confirmations.

WDI Day Thirty: Project Week 2, Part 2

Today was the second day where we got to work on our project 2 all day. In the morning there was a mini lesson on APIs and Rails, but after that, it was nonstop coding. What’s pretty unfortunate is that I didn’t make much progress. I’ve run into a couple of pretty large and advanced problems that my instructors haven’t been able to help me with.

One issue is that I need to figure out how to capture a screenshot of a webpage and then submit it to the database on submit of a form. The other issue is making calls to the Google API in order to change the background image of a canvas element on the page.

When you don’t make any progress, it’s tough to stay motivated and try to keep pushing forward to see what happens. Hopefully things will look better tomorrow. All I can do is keep trying new things, and hope I’ll eventually get the right results.

WDI Day Twenty-Nine: Project 2 Kickoff

After a long week of building CRUD app after CRUD app in Rails, today our Project 2 Week was kicked off with an intro to the project requirements. I’ll have to build an app in Rails that uses at least two models with at least one association, have complete RESTful routes, have error handling & validations for all resources, and utilize an ORM to create a database table structure.

I pretty much built the bare bones for my app at the beginning of the week as we went through learning CRUD. So today I worked on cleaning up my older code, adding a user login, styling the app a lot so I can get some inspiration on where to take it (for some reason when things look nicer, I get more motivated), and created another model.

My project is a pretty ambitious one, so I’m not sure if I’ll be able to build it entirely. It’s a drawing app, where users can draw on maps. It utilizes the CRUD functionality, but one of my biggest challenges will be to figure out how to store the images that users create. I’ve nearly completed the drawing functionality with JavaScript, and have figured out how to save the drawings as images. Another challenge is that I’d like to figure out how to implement Google’s image map API so that I can change the canvas background image dynamically to whatever location a user is interested in seeing.

Here’s a screenshot of my work in progress:

WDI Day Twenty-Eight: Testing with RSpec, Many to Many Relationships, & CRUD

We briefly got an overview on setting up tests with RSpec. The syntax was a little strange to me, and I’m realizing I really need to dive back into older things we covered just to ensure I’ve got a good grasp of everything. I won’t have a chance to do that this weekend since I have to work like crazy on my second project, but once that’s done with, I’m looking forward to reviewing things we covered earlier. Later we did a few exercises with many to many relationship models. I understand the concept, it’s just the actual use of this is something that will take some time for me struggling on the side with it. Once the lessons were over with, I worked like crazy on my homework assignment. Here’s a screenshot of the welcome view: coffeecheck-screenshot I had a lot of fun putting it together, but I probably spent more time than necessary styling it. And now I’m off to start working on my second project, so hopefully I”ll be off to a good start.

Project Details:

Ruby on Rails app will CRUD functionality where users can add, update, and delete coffee shops and coffee drinks. View the project

Technology Used:

  • Ruby
  • Ruby on Rails
  • psql
  • Heroku

WDI Day Twenty-Seven: Rails Encryption

Another day of rails has been completed. We learned about encryption and how to create fake users with sessions and cookies. At the end of the day I mentioned a Ruby Gem to my instructor, Devise, that works with user authentication, and he decided to walk us through it quickly after class.

Then I spent the entire evening working on my homework, the CRUD Rails app for keeping track of your favorite coffee spots and coffee drinks. I got a little too into styling the app, and should have spent more time trying to figure out a few coding hurdles. Tomorrow my goal is to implement commenting for the app and also try to look into an API to roll into it. I know that’s probably too ambitious, so I’ll see what I can get up and running before calling it a day.

WDI Day Twenty-Six: Rails Lab & Routing and Associations

So much rails, my mind is just swimming in words like controller, model, and method. Today I woke up super early to get a head start on my lab and homework for the week. I managed to knock out a couple of the bonuses for our Game of Thrones web app, although I didn’t bother to cover everything since I wanted to devote some real time and attention to my homework for the week.

Here’s a screenshot of how I styled the lab app:

got-screenshot

I successfully managed to nest routes for the lab, but didn’t have time to tackle many to many associations with my models. I’m hoping to do that with my homework or second project.

In the afternoon we walked through nesting routes and the type of fixes that are necessary when we move routes from being un-nested to nested. Then it was back to a long day and evening of coding. I’m hoping to make some real progress with my coffee shop app.