WDI Day Forty-Six: Building a MEAN App & Starting a MEAN Lab

We had an introduction to adding Angular to the mix when building apps with Mongo DB, Express JS, and Node JS. However, the intro was a little too brief for everyone’s liking. Essentially we walked through an exercise that incorporated Angular with the rest of the stack, but not many of us were feeling at all confident with this new component.

After attempting to complete the in-class assignment, we were introduced to our lab for the week – building a MEAN stack application. We could either work in groups or alone. Although I enjoy working with others, when I’m struggling to retain new information, I do much better being able to struggle and absorb things on my own a little bit before returning to the group. Thus I opted for working on my own project.

It was a bit of a struggle – I tried to walk through the in-class assignment several times, but was unable to build something that could function. Next I started Googling all sorts of tutorials, desperate to find a working example of a way to format and use all these different pieces together. Luckily, I finally stumbled upon something that worked and helped me add basic CRUD functionality to the app. Once I had the working pieces in place, I pretty much called it a day. I was pretty sleep deprived from the day before, but I did indeed successfully complete a large chunk for the lab.

I’m hoping that tomorrow goes well and that I can successfully refine this application. I have a sturdy foundation now–all I want to do now is add to it and read over a few documents to make sure I’m understanding everything involved with the basics for the MEAN stack.

WDI Day Thirty-Eight: Angular Review & Lab Day

Apparently the vast majority of my class is struggling with Angular, so it’s good to know that I’m not alone. It’s been a lot of hours this week spent staring at code, attempting to make things, fiddling around with existing projects, and trying so desperately to get things to click.

This morning started off with a review, and then we had the rest of the day to work on a lab. We had to build an Angular app with a basic CRUD functionality. The app was called “WDI Radio,” and if we were able to get to it, we had to figure out how to play mp3 files in the app. I almost made it that far, but was proud of myself for putting together the app fairly quickly and deploying it with Firebase – something I had never done before.

wdi-radio-screenshot

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

WDI Day Nineteen: Sinatra

We played around with Sinatra, which is a framework for quickly creating web applications in Ruby. Other ways include Rails, Express/Node.js, and Django. We reviewed how to set up routing, which tells the application what the URLs should be for different pages. You can also pass variables into the URLs for more dynamic URLs.

There’s different ways of working with data on the server, which include:

  • GET – for ‘getting’ info (no data is changed)
  • POST – for ‘creating’ new data (usually by submitting a form)
  • PUT – for ‘updating’ existing data (usually by submitting a form)
  • DELETE – for ‘deleting’ data

To create views in Sinatra, you let it know which pages you want to route to with erb files, which are files that include a mixture of HTML and Ruby code. You even can share variables in different views.

Later in the day we met with Outcomes where we had someone come in to speak to us about networking on Linkedin. We also worked on our brand statements and then did an exercise where everyone went around the room and said what the good qualities were of our different classmates. Here’s what everyone had to say about me:

  • good eye for design
  • picks up things quickly
  • understands development
  • ahead of the game
  • quick learner
  • quickly dissect a problem
  • a leader
  • focused
  • detail-oriented
  • humble
  • perfectionist
  • resourceful