Rails 6 | Hit the ground running
As a cohort of Microverse, I was assigned to write a technical article on Rails. I had this idea of building an app to help me improve English vocabulary, so why don’t I merge both of them?
I will explain all the steps that I took to build this little but amazing app.
http://vocabiapp.herokuapp.com
The source code is on Github. The code used on this article is on the branch feature/first-milestone.
Setup
- Install Ruby
- Install Rails 6
- Create fresh app
$ rails new vocabiapp - Install jQuery and Bootstrap
$ yarn add jquery popper.js bootstrap
Register the jQuery plugin on Webpack. Copy this file into config/webpack/environment.js
At this point if you start $ rails server the Rails welcome page should be displayed. Troubles? Click this link to get a free infinite 1-on-1 mentoring.
Layout
Rails is an MVC (Model, View, Controller) framework, the resulting webpage is built by a combination of views, usually reusable pieces.
We’ll start by creating the main layout and the partials that compose it. Then a StaticController to render our home page.
Did you notice .erb and <%= %>? The views on Rails use ERB which allows us to embed ruby code inside HTML.
Static Pages Controller
Have you ever heard that the best programmers are the lazy ones!? Rails believe it, that’s why they have created a complete set of code-generator tools.
$ rails g controller StaticPages homeCreated: controller (1), unit test (2), helper (3), view (4), SCSS(5). Let’s fill the view views/static_pages/home.html.erb.
The basic life cycle is Router -> Controller#Action ->[Model]? -> View.
Controller
The call to root method will assign the root_path (app.com/) to the method (action) homeof StaticPagesController.
Open the app and our new view will be displayed.
Word model
The model reflects a database entity (table) and contains validations, associations, callbacks.
At this first milestone, we will have only the Word model.
To create or edit entities Rails uses migrations. Using the model generator command the migrations will also be created.
$ rails g model Word rank:integer pos:string level:integer en:string es:string pt:stringThis command created the Word [model, fixtures, test] and the following migration to create the words table on the database.
Run the migration with $ rails db:migrate.
Database seed
Imagine the amount of work to create five thousand new words by hand? With Rails we can include initial app data with $ rails db:seed.
As seed data this app uses:
- The free List of 5k most frequent word in English.
- Translated to Spanish and Portuguese by Google Batch Translate API.
It will not be covered here. Copy the files (seeds.rb, translations_*.txt, words.html) into your db folder and run the seed command.
Rails Guides — Active Record Migrations
By default we are using SQLite3, check the contents of the table words. (db/development.sqlite3)
Game Controller
Lets create the GameController with an action called play and the view.
$ rails g controller Game playAdd the route to this action with params :pos (part of speech) and :level.
The play action should return all the words matching :pos and :level.
Copy the view file (play view code). Note the usage of jQuery alongside with bootstrap collapsible elements.
The app uses two SVG icons to feedback, paste them into app/assets/images.
We should avoid adding too much logic into the view, the GameHelper into your project.
Last step, game.scss and we the coding is done.
Start the server with $ rails server and open it
Conclusion
With Rails you can do a lot with a little, we have created an MVP in no time using the stack.
Progress further by:
- Install and study the develop branch code.
- Check the available issues on the project board.
- Contribute.
