day4notesad1.md

Day 4

Intro

Welcome

You all learned and practiced some really important concepts for the hw due this week. You built your first real interactive dynamic rails applicaiton. not just a static html website, but a web app. congrats!

the goal for today is to solidify those fundamentals

Route -> Controller -> Action -> View

Users begin interacting with our application by visiting some URL, if the URL is one of the Routes that we’ve defined in the routes file, then our app will open a controller and run a method that takes a view template and generates a html file that our users see in their browser

You also saw how to get inputs from our users using forms, query strings and the params hash.

We need to have this foundation down solid before we do anything else, especially before we get to databases next week, and combine everything * store the info from that users input into form in our database and retrieve and display it in useful ways * finally a CRUD database backed cloud delivered app

1. Open fortune-teller click on the load button
   • and start to create your workspace
   • THIS COULD TAKE A FEW MINUTES or more
   • if you create a workspace and see the error message that says, “Repository not found” or “cannot create workspace” that means your copy of the assignment hasn’t created yet.
     • You just have to wait a little longer and click the create workspace button again.
     • You can tell if your copy of the assignment has been created if you open the link at the top and you don’t get a 404 error
   • make sure you have the README open, if you weren’t already aware the README generally has a lot of important information about the assignment. There’s, of course, the link to the target app. Sometimes there will be links to specific chapters that walk through parts of the assignment or hints on how to approach a certain part. So be sure to read them.
   • you can read it on the grades page, or open it up on GitHub. it’s also in your Gitpod workspace

Fortune Teller

So if I bin/server the preview pane opens up and we have a homepage with a bunch of links— we’re going to use these to practice.

All urls in rails apps follow the same sequence of steps. To find out how this route works, i go to Routes, find match, then go to controller and action then view template.

So feel free to stop me if you have questions on this process or anything you wrote down watching the videos.

Routes

1. not using application controller like we used in the videos. application_controller, is nice and convenient to use because rails app come with the file, we don’t have to create it
   • but we’re going to start creating our own controllers
     • better organize our code
     • when our apps get bigger and start to have 30,50, or 100 actions— one for each route
     • it becomes really hard to use one controller and read all those different actions.
     • searching through 2000+ lines of code
   • created a file, numbers_controller with a class NumbersController
     • when you create your own class inherit from ApplicationController
   • everything else is the same,
     • look for an action called “winners”, define some ruby variables, and render a template
   • take look at this part
     • variable with empty array
     • made a loop
     • each time the loop runs it generates new random number
     • adds it the array (similar to that last Ruby gym puzzle)
     • this is just one way to generate 5 numbers
       • i could have made 5 different variables
     • how am i using this array? in view template…
     • I have an each loop and an un ordered list
     • we’ll be doing this a lot in the future,
       • where we look up a list of records from the db and then loop over that list in a view template and format it in some useful way
     • so once you get used to this, it’s extremely powerful.
     • take a look at this, see if you can think of any questions about this—
     • or if you can validate your understanding
     • if you have the code open, poke around and experiment.
     • What do you think?

• Let me ask you a couple questions then
  • what happens if I remote the = from <%= elephant?
    • just an empty html list
    • view source, you can see the list items still exist b/c the loop is still running, but the content of each list item is blank
    • = evaluate the expression, and place the return value into the plain html file that we send to the browser
  • what happens if I put the = on the <% end?
    • that’s just a syntax error
  • what happens if I put = on the each loop?
    • .each like all ruby methods returns a value, it returns the array it was called on
    • since the array is the return value, the array shows up in the html
  • general rule
    • if/elsif/else/each/end you use the non-equal sign

Zodiacs

so we’re gonna do lab and I want you to build out the features for the zodiac signs.

• i’ll demo the first one
• so if I visit /zodiacs/aries I get this no route matches error b/c we haven’t built it yet
• if I go to the routes file
• you’ll notice there’s a lot of pre-written stuff in here
• all the routes for this app have already been defined and were working but we went in and planted a bunch of different bugs that broke them. You’re job is to debug these routes, which is a big part of being a developer
  • your skill as a developer is measure by how many error messages you can recognize and resolve
  • you might see me or Raghu encounter an error message and instantly debug it— that wasn’t always the case.
  • The first time it took me 2 hrs to debug, for you all it will take less than 2hrs since if you get stuff for 15 minutes you can ask a question on piazza
• the goal is to become familiar with error messages, not to rebuild this app from scratch
• Steps to follow
  • uncomment one route at a time
  • visit the route
  • see the error message and try to parse as much info as you can from it
  • go back to the code and try to reason your way through it
  • after fixing that error, refresh the page
  • if the error message changed, that means I resolved that one bug and now I can debug the next step
  • action
  • uninitialize constant
    • how does rails even know how to find this class?

visually see if it looks good and matches the format of the target. Then, run rails grade to make sure.

all of these bugs are the most common bugs we see students struggling with, so we made an entire assignment where you have the chance to run into each one, become familiar with why they show up and how to resolve them

if you change a file or folder name gitpod sometimes doesn’t detect it —> restart your server (just like wifi, restart your modem)

time (save 1:20 min for omni-2)

Omnicalc 2

omnicalc-2 is another chance to practice forms— query strings and params

If we look at the target, this one requires credentials, which you can find in Canvas assignment. Why? we’ll get to that

this has calculators like omnicalc-1

• these are actually less interesting then the monthly payment or random number
  • add, subtract, multiply
  • EXECPT— we have these cool ones
    • translate (spanish)
    • street to weather (5807 s woodlawn ave)

this is pretty powerful and interesting… * translating into whatever language we want * sending a text message how the heck do we write the Ruby to translate text? or send a text message? Do we even know enough Ruby to do those things? We’ll get to that a little later, but the answer might surprise you :)

For now, I’ll demo one of these easier ones, and this is a chance for you all to clarify anything that was fuzzy when you learned about forms

• setup basic RCAV,
  • two RCAVs involved, the form page and the results page
    • I’m going to work backwards and build the results page first
  • watch and ask questions on anything that I go through
  • (work in small steps, and make the error messages visible)
• add query string w/ two values -> show up on the page
  • do string addition first
    • "that math doesn’t seem right” anyone know what happened?
    • then float add
  • this action works and are completely independent from a form
  • one do the work, using a query string
• another RCAV to display a form to make it easy to do the work let’s add something so that users don’t have to type into the address bar
• In general, we’ve used links to navigate to other pages
  • add new RCAV w/ link w/ query string
  • but this is only useful when we’re not accepting input from the user,
• for those cases we use forms which will build the query string for us.
  • action
  • input
  • name
  • button
  • profit!
• valid forms
  • as you probably noticed from the last assignment
  • for/id in order to pass tests

Work on the other basic math forms, get solid on RCAV, forms, query strings, and params

• ask questions

API Demo

*start with a basic RCAVs for form and results

• I stubbed out these forms, how do I write the ruby to do take a street address and get back coordinates?

• 🤔 you know who does this really well already? Google Maps

  • *go to site, show address, show coords in source code

• If only I could make my app visit this webpage and get back the information I want.

  • well we can!
  • use open method
    • API require you to sign up for an account, and they give you a key so they can meter your usage and even sometimes charge you anytime you use it
  • get key from canvas
    • key is a part of the query string

• What does this look like?

  • a hash!
  • now if I do a class it’s actually a String
  • if only it was a Ruby Hash
    • i could fetch, use .at, fetch again
    • IF ONLY THERE WAS A WAY
  • turns out there is a way— a class JSON
  • if we parse the json, it will return a Ruby data structure, not just a string

• Since it’s a hash, we can do another hash_dig exercise from hash-chapter

  • use .class, .keys, .fetch, .at
  • or use this chrome extension

Outro

HW you’ll have API start on the HW early— so you can ask questions and we have time to get back to your. If you start the hws on thursday night, we can’t get back to you before class.