devfest2018-rails/walkthrough.md

Walkthrough

Intro

- About me
    - Korey MacDougall
    - Researcher and Developer
    - New to Sudbury
    - Founder of Nickel City Software Inc.
    - Lover of GNU/Linux, FLOSS, and vim
    - Have been working with rails for approx 2.5 yrs

Scope of workshop

- Today we will try to cover: 
    - Tools/software needed to develop a rails app
    - Basics of Rails philosophy and architectural pattern (MVC)
    - How to create a simple rails app: an RPG character creator

Two notes

- all code is at notabug.org/kmac
- running app looks like this...

Environment Setup

0. Operating System / Virtual Machine

- virtualbox.org/wiki/Downloads
- guest additions

1. Need a Ruby interpreter

- sudo apt-get install ruby-dev

1a. Optionally, a ruby-version switcher

- chruby
- rbenv
- rvm

2. JavaScript runtime - we can use NodeJS

- Linux:        sudo apt-get install nodejs
- windows:      https://nodejs.org/en/download/
- macOS:        brew install node

3. Bundler - ruby package manager

- bundler.io
- a 'gem' is a ruby package
- sudo gem install bundler
- or try (windows): gem install bundler

4. Database engine

- sqlite for development
- sudo apt-get install libsqlite3-dev

5. rails gem

- sudo gem install rails

6. a text editor

- atom
- https://flight-manual.atom.io/getting-started/sections/installing-atom/

Rails Introduction - some notes and high-level principles

Rails is a large, complex ecosystem

- lots of different technologies involved, mainly html/css/js & ruby
- we will only touch a small sub-section of it today
- front-end frameworks (CSS & JS)
- asynchronous jobs
- cloud deployments
- databases

MVC Architecture

- Model: object properties and methods
- View: what is displayed to user
- Controller: handles request routing

Convention over configuration

- Many 'sane defaults' that save developers from writing repetitive code

Application: Character Maker

Create a new app

1. rails new char_maker

2. cd char_maker

3. rails server

4. In browser: visit localhost:3000

   • should see "Yay! You're on Rails!"

Overview of directory structure

- we will mostly be working within app/ and config/

Start creating characters

1. rails generate scaffold Character name:string health:integer strength:integer intelligence:integer agility:integer luck:integer

   • will create a character object with 6 attributes: name, and 5 stats

2. refresh page, see error

   • run rails db:migrate
   • migrations modify the database when you add/remove/modify objects

3. These characters are CRUD objects

   • Create, read, update, destroy

4. Notice the routes

   • rails uses a number of conventions, including routes/paths
   • default routes generated by scaffold
   • we will create a custom route later

Add a portrait for characters

1. active_storage:install

2. db:migrate

3. config/storage.yml, only keep local

4. edit config/environments/development.rb

   • notes on environments: 3 files, test.rb, development.rb, and production.rb
   • config.active_storage.service = :local

5. Attach files to records

   • edit app/models/character.rb
     • has_one_attached :avatar

6. edit app/views/characters/_form.html.erb

   • discuss partials
   • templates, html with embedded ruby, html.erb

7. Allow avatar parameter through

   • edit controller: app/controller/characters_controller.rb
   • discuss strong-params and white-listing
     

8. Display avatar on index page

   • edit thead to have Avatar
   • in table, add: image_tag(character.avatar, size: '100x100')

9. Display avatar on character page, app/views/characters/show.html.erb

   • <%= image_tag(@character.avatar, size: '250x250') %>

Add some styling with Bootstrap

1. Modify Gemfile

   • gem 'bootstrap', '~> 4.1.3'
   • gem 'jquery-rails'

2. bundle install

3. restart server

4. rename application.css, b/c bootstrap uses scss

   • mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

5. edit app/assets/stylesheets/application.scss

   • remove *= lines (13 and 14)
   • add: @import 'bootstrap';

6. add bootstrap dependencies to app/asssets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap-sprockets

7. Add table styling to index page

   • app/views/characters/index.html.erb
   • replace:
   • with:

   • Change page title

     • replace:

       Characters

       with your own title
     • try

       Your Party

   • Change "New" link_to to a button:

     • <%= button_to 'New Character', new_character_path, method: "get", class: "btn btn-primary text-center"%>

   • Pad/center table

     • add to app/assets/stylesheets/characters.scss:

       • .table-padded { margin: auto; width: 80%; }

     • add to app/assets/stylesheets/application.scss:

       • @import 'characters.scss';

   • Center New Char screen

   • Add a page background

     • move background.jpg to app/assets/images/
     • in app/assets/stylesheets/application.scss, add: body { background-image: image-url(background.jpg); background-size: cover; }

   • Could style the new char screen as a table