In this project, we’ll learn about the very powerful has_many and belongs_to shortcuts by refactoring MSM Queries again.
Follow along with this recording. I start by reviewing a task from the Very Best Debug project, and then later I start in on Refactoring MSM 2.
This project is optional practice at re-writing association accessor methods with ActiveRecord’s powerful has_many and belongs_to helpers.
You may not be able to re-write all of the associations that you find, depending on how complicated they are. See how many you can get.
Finally: to synthesize the many, many techniques you’ve learned so far, build a fully-functional permissioned social network, complete with image uploads.
Detailed notes/instructions in this chapter.
Until now, we’ve been writing fully-functional but very verbose, beginner-friendly code.
Over the next few projects, we’re going to refactor our code to be concise and industrial-grade — more along the lines of what professional Rails developers would write.
Following along with this video to get started.
Read Sections 1, 2, 4, 5, 6, and 7 of the Rails Guide on Testing. These are the kinds of tests that we write most frequently.
Then, begin on the next assignment, Helper Methods Pt 1. In that project, we have one fully functional web resource, movies. Create a test file, test/system/movie_test.rb, and take a stab at writing some System tests in it to lock down the current functionality of the application. For example, try adding a test that checks to make sure the URL /movieshas an <h1>element on it. Run your tests with:
rails test test/system/movie_test.rb
After you’ve spent 20-30 minutes on it, you’re allowed to look at the example specs in test/system/example_specs.rb. You can copy-paste some or all of them into your own test file.
As we refactor for the rest of the project, you should run the tests periodically to ensure you didn’t break anything.
This is a continuation of the Scaffold: Getting Started project, but you should click the “Load assignment in a new window” button here to set up a separate workspace and pick up from this new starting point.
Follow along with the video.
Follow along with the second walkthrough: Video: Helper Methods, Pt 2.
Use the same Gitpod workspace that you created in Helper Methods, Pt 1.
We’re going to tie up a few loose ends.
Set up a new workspace by clicking the “Load assignment in a new window” button below.
Follow along with the recording.
There are helpful notes in the README — keep it open in a tab.
We are going to start incorporating more Git into our workflows. A key aspect of Git is branching, or maintaining multiple versions of the codebase in parallel.
Play the first part, the Introduction Sequence, of this interactive tutorial on Git branching.
Later, whenever you feel the need to learn more advanced Git, go through the other parts.
We’ve been using the handy visual interface to Git located at /git in our projects, but it’s time to start learning the command-line interface (CLI) to Git — the way most developers use it.
Reading: Command-line Git Basics Reading: Git Aliases
In this project, we’ll rebuild Photogram (again). This time, it will be industrial grade™ — the kind of code you could charge money for. We’ll use database indexes and constraints, advanced association accessors, scopes, validations, view helper methods like link_to and form_with everywhere, partials to DRY up code judiciously, the Devise gem for authentication and password reset emails, authorizing access to each action explicitly, and many other industrial-strength upgrades.
There are extensive notes in the README — keep it open in a tab.
There are five parts to the walkthrough video:
Photogram Industrial, Pt 1 (Sorry about the poor audio quality in this part, the rest are better) - getting started. Photogram Industrial, Pt 2 - up through writing the sample data task Photogram Industrial, Pt 3 - up through adding Bootstrap, etc, and setting up basic navigation Please note that we’re using Bootstrap v4 in the video. The official Bootstrap docs now show v5 by default, so when referring to the docs, you should switch to v4.6 using the dropdown in the top-right. Or a good exercise would be to implement the same (or better) styling using v5 classes. Photogram Industrial, Pt 4 - starting the user profile page Photogram Indsutrial, Pt 5 - adding a tabbed interface to the user profile page Note that there are example solution model, migration, and sample data files located in the public/ folder. Don’t peek at them until you try it yourself, and don’t copy-paste — type it out yourself.
As always, make lots of commits as you work. Practice our new command-line Git workflow. We added some Git aliases that make things a bit easier.
Here is a target to work towards.
Let’s (finally) get a taste of JavaScript.
Open these detailed notes in a tab.
Since we’re moving away from Gitpod, from now on I recommend GitHub Codespaces, or installing locally.
It’s time to Ajaxify our apps!
Practice Ajax with Rails UJS. Notes in the README.