Rails

This is a tutorial for deploying a rails app that has already been created and pushed to github as the origin master.

Ref* https://devcenter.heroku.com/articles/getting-started-with-ruby#set-up

1. Be sure to specify which ruby version you are using in your Gemfile. You’ll probably be able to find this in app/my-budget/.ruby-version or by running

$ ruby -v

2. Create a procfile in your ruby app with a capital P under app/my-budget/Procfile

3. Type the following into the file and save - web: bundle exec rails server -p $PORT

4. Commit all latest changes to your origin master repository on github

$ git add . $ git commit -m “gemfile ruby version declared, procfile for heroku deployment” $ git push origin master

5. Follow the instructions to set up an account at https://dashboard.heroku.com

6. Create a new App - Tip: Name it the same name as your github and local app dirs

7. You’ll be directed to a new page where you can complete your deployment

8. Cd into your app dir in the terminal and Login in using and verify your credentials

$ heroku login

9. Create a branch from your github master repository

$ heroku git:remote -a reservations-rails

10. Push your app to your heroku branch

$ git push heroku

11. You’ll need to migrate your database to the heroku server

$ heroku run bundle exec rake db:create db:migrate

12. You can open your new app from the command line by running

$ heroku open

13. You can see your own working prototype any time you like at the URL specified in your Heroku account/settings

https://my-budget-selena.herokuapp.com/

This is the first app I have ever built, I ran a rails server for the first time on 13-July-2015, I have 6 weeks prior exposure to a custom framework for node.js, I started building a budgeting app on 1-September-2015, now you can check out https://my-budget-selena.herokuapp.com/ to take a walk through My_Budget prototype v1.0 – Deployed 21-September-2015 at 19:59:04. You can also check out the source code as I continue to build at https://github.com/SelenaSmall/my-budget

Now that I have all the working parts, it’s just a matter of replicating what I’ve already done to complete a very simplified version 1.0

Create transfers model, referring to article 4/09/2015

My Budget App – customise and migrate new models backed by posgreSQL

Controller, referring to article 5/09/2015

My Budget – generate new income controller and view with rails generate

See which additions and changes have been made to the app to get transfers working here:

https://github.com/SelenaSmall/my-budget/commit/1d4caf0173d5e799e2f944a1f70ed61cdd1d49c0

Replicate the New Income modal form for Expenses and remove unnecessary files which had been previously created for a New Income Page, referring to article 20/09/2015

My_budget- bootstrap modals

See which additions and changes have been made to get the expenses modal working here:

https://github.com/SelenaSmall/my-budget/commit/f66038b8b088c3c2903d410ee1d9a51f45447613

Complete a very basic ruby calculation which will add together the opening balance, expenses and transfers to sum up a total balance forward amount.

By running a rake db:drop db:create db:migrate, I can clear the database, refresh and go through the app to ensure it still builds correctly. The calculation have worked out correctly https://github.com/SelenaSmall/my-budget/commit/c1f9c3ec71e7bc97d5ac30c812d95de3ffb5fb7f

The total balance can be formatted in the same way as the opening balance to look better on the page

https://github.com/SelenaSmall/my-budget/commit/e572c65a9fdb27c6fea89ae3bc3864f7165228fc

Modal layouts can be improved by putting total income and total income amount on the same row

https://github.com/SelenaSmall/my-budget/commit/957f87073cfc083bc17136364b50d09624c267f5

Moving the ‘New’ button to the same row as Incomes and creating a new modal layout

https://github.com/SelenaSmall/my-budget/commit/bee092f209273275a6083eb3f232775f9ba5ff6c

This is going to be the new layout for all of my partials. Next up is layout logic for the overall app and maybe an improved colour scheme

Ensure all of the correct gems have been included into the app, the ones I’m using can be found in these locations:

https://github.com/bootstrap-ruby/rails-bootstrap-forms

https://github.com/twbs/bootstrap-sass

https://github.com/rails/turbolinks

1. Create a modal form to be rendered from the page you are on. In this, it’s going to be on the mybudget-show/home page because mybudget renders and controls the income partial.

<!-- Modal form -->
<div class="modal fade" id='new-income-modal-form' role='dialog'></div>
<!-- Modal form -->

2. Update the ‘new link’ in the partial view that will call the new modal

<!--<%= link_to 'Add Income', new_mybudget_income_path(@mybudget, @income) %>-->
 
<%= link_to new_mybudget_income_path(@mybudget, @income), remote: true, id: "new-item-link", class: "btn btn-sm btn-default round" do %> New
   
<%end%>

3. Create a new .js file under incomes which will be read by ‘Create’ in the incomes controller and direct to the appropriate partial view.

$("#new-income-modal-form").html("<%= j render('incomes/modal\_form\_new', income: @income) %>");
  
$('#new-income-modal-form').modal('show')

4. Create a new modal form partial which will be rendered in the modal form. It’s a good idea to make sure the new stuff works before destroying the old stuff.

<div class="modal-dialog reorder-modal-form">
  <div class="modal-content">
    <%= bootstrap_form_for([@mybudget, @income], remote: true) do |f| %></p> 
    
    <div class="modal-header">
      <h4 class="modal-title">
        New Income
      </h4></p>
    </div>
    
    <div class="modal-body">
      <table>
        <tr>
          <td class="field-name">
            <%= f.label :income %>
          </td>
          
          <td class="field">
            <%= f.text_field :income %>
          </td>
        </tr>
        
        <tr>
          <td class="field-name">
            <%= f.label :amount %>
          </td>
          
          <td class="field">
            <%= f.number_field :amount %>
          </td>
        </tr>
      </table>
    </div>
    
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" data-behaviour="form-clear">Cancel</button><br /> <%= f.submit class: "btn btn-primary", data: { trigger: 'loading' } %>
    </div>
    
    <% end %>
  </div>
</div>    

5. Lastly, in the incomes controller update the respond_to format in the create action, ensuring that it formats the new .js file we have just created.

def create
  @income = @mybudget.incomes.build(income_params)

  respond_to do |format|
    if @income.save
      format.html { redirect_to [@mybudget, @incomes], notice: 'income was successfully created.' }
      format.json { render :show, status: :created, location: @income }
      format.js {redirect_via_turbolinks_to [@mybudget, @incomes]}

6. Always remember to test it out. Run the server and see if it works correctly. There is now a button link under incomes.

Everything works and redirects back to the mybudget home page. These 6 steps can now be replicated anywhere that I would like a modal view to appear.

See the working example at

• https://github.com/SelenaSmall/my-budget/commit/694cb3ae84c5e2dbfbd0a2ecc4f8617455058319

*Refs

• http://getbootstrap.com/javascript/#modals

Indentation helps make it far easier for other people to read your code. To better understand what indentation is, take a look here http://www.computerhope.com/jargon/i/indent.htm

In sublime, you can change the size of indent spacing under view/indentation/ - for html and view files, 1 space is enough. These files will end up massive later on.

Below is an example of before and after indentation. You’ll notice that the image on the right is far easier to read. The fine line running down the left of the page view can help you to identify where classes and divs start and finish. The opening and closing tags for each element should line up. Elements within elements should not break these lines. Whether you are an experienced coder or not, if your files are difficult to read, your indentation probably needs to be reviewed.

Theses indents are only 1 space, which helps reduce files size. Also, running through the html5 tidy up, I was able to identify a number of missing or unnecessary element tags. Going through each file in your app from time to time is good practice for finding inconsistencies and potential optimisations.

See examples of clean files at

• https://github.com/SelenaSmall/my-budget/commit/57efd418c6611b6a43ae60a634e795297384efcc

*Ref - some really good write ups about why indentation is important

• http://mrbool.com/importance-of-code-indentation/29079
• http://garage4hackers.com/showthread.php?t=2655

Things you might have missed when setting up setting up your rails app. With the possibility of someone else working on it at some point, it’s a good idea to specify the ruby version and separate out the gem set specific to this application. This will help others to ensure that they have all of the correct files, gems etc installed to contribute.

Open the app in sublime, and create a new file in the apps root dir called

$ .ruby-version

In this file, specify the rails version you are currently running on.

If you are unsure of the version you can simply run the following command in you terminal

$ ruby -v

Create another file in the apps root dir called

$ .ruby-gemset

In that dir, you can name your gemset specific to this app as a reference.

See the live examples at

• https://github.com/SelenaSmall/my-budget/commit/dbbf3b9095903c78cac185eca7ce939106e91cd3

After two days of trying to imagine how the tables in my database are going to be accessed and what information is required. I have finally come to the conclusion that I need to redesign - either I’m not advanced enough yet to pull off the UX I ultimately want to do or I’m just thinking about it all wrong.

As my previous tutorials and articles explain in great details what I have done thus far, I am not going to explain this one step by step. Instead, I’m going to go through design decisions and processes that lead me to where I am now.

I woke up this morning still thinking about how to navigate the application. By simplifying again I could at least get it working. Until I learn a little more about UX theres point in there’s no point in going round in circles trying to get hidden layouts working. I’m better to leave that for now and fix up some other problems that I can foresee with my current design.

While doodling, I came to the realisation that my tables are laid out wrong. What I actually want to do is to be able to add or remove individual incomes or expenses during the week.

I also noted down some ideas on how I make this all happen - links and routes that might be needed.

This is where I left off

I decide it would be the best plan to create a new ‘budget’ in the first page - this will probably be a user feature later on. But for now, I just need one budget with an opening balance to start my calculations from. This new budget will also take ownership of all other figures and be able to render their data.

After getting the Create Budget feature working, I can reroute my pages app so it starts on the create page and once a new budget is created, it can route directly to that Budget’s data. There will be no need to delete a Budget once it has been created.

And tidy it up a bit..

Lastly, I can remove all the unnecessary routes, empty lines and pages in my files. Rerun the app and check that it’s still all working right.

Rails.application.routes.draw do
  root 'mybudget#index'

  resources :mybudgets, except: [:index] do
  resources :incomes, except: [:show, :index]
  resources :expenses, except: [:show, :index]
end

A simple recalculation will sum all the amounts in the income.amount and expenses.amounts columns

<div>
  TOTAL INCOME
</div>

<div class="total-output">
  <%= Income.sum(:amount) %>

Rerun and test that it all works.

Using classes as in my previous examples, I can tidy up what I already wrote and re-use a lot of the existing styling.

<div id="incomes">
</div>

<td class="table-items">
  <%= income.income %>
</td>

<td class="amount">
  $<%= income.amount %>
</td>

<td>
</td>

CSS files tend to get really messy really easily, so I want to ensure that that there’s no unnecessary lines in here.

.table {
  padding: 10px;
  padding-left: 250px;
}

.amount {
  text-align: right;
}

.table-items {
  text-align: right;
}

.total-output {
  text-align: right;
  padding-right: 20px;
  font-style: bold;
  font-size: 40px
}

Finally, I can rerun my Test App and see that I have completely refactored my earlier layouts in a new model.

You can follow my working example at

• https://github.com/SelenaSmall/My_Budget/commit/a6ff04afe2535fb18affddaf2b66955b285dd4cf

More to come soon!

It would seem that simply replicating what already works isn’t quite that simple. The following article, describes problematic encounters and design considerations relating to replication. It also provides examples of different types of bugs which can affect the outcome of your application in different ways. Some of which are harder to find and resolve than others.

Now that My Budget Income Model is working how I want it to, I can simply replicate those steps to reproduce similar models for Expenses, Transfers and Projections.

I’ve now set a deadline of when I want to have the first test app up and running. That deadline is very soon. Because of this I will scale down the overall project and simplify it as much as possible.

For now, the user will simply be able to run up and edit one budget for the week. Later on, once I learn how to do it, I’m going to implement a user login interface and date selection tools where projections can be date specific and saveable.

While replicating, I would like to run through step by step rather than straight copy and paste. That way I can better understand what’s happening in the pattern and potentially find way to improve what I have so far.

REPLICATE

I can use the Income files which are already working as a precedent for expenses. Referencing the generate call I made earlier on the 4th of September http://selenasmall.com/2015/09/04/my-budget-app-customise-and-migrate-new-models-backed-by-posgresql/, I can now generate exactly the table that I need first time.

I can go into the new migration with sublime and make sure it has all the same defaults as CreateIncomes

Then recreate the database.

$ rake db:drop && rake db:create && rake db:migrate

Next, referencing the 5th of September http://selenasmall.com/2015/09/05/my-budget-generate-new-income-controller-and-view-with-rails-generate/comment-page-1/#comment-26, I can generate a new expense controller and index form.

At this point, I am going to need a new expense resource in the routes.rb and I am going to need an exception on the same routes as Income, so I can virtually copy what’s already there.

It is now apparent that the app/views/incomes folder runs the partials currently showing on the app. I am going to need to refactor this into the app/views/layouts/application.html.erb

It’s actually not going to be that simple… both new.html.erb and edit.html.erb render different partials so they cannot be generic across the layout. The row however, can.

**I’m going to come back to this, as I haven’t quite worked out the best possible solution off the top of my head. I’m going to go on with creating the expense views and think about it as I go. _

First, the ExpenseController is going to be virtually the same as the IncomeController

In the expense model I’m also going to need a total_expense calculation

Maybe I can start with one page that renders all the forms to create new incomes, expenses etc and then load to a new page which renders edit.

Now to render the ‘New’ partial form for Expenses

Refresh the browser and test it out

Theres a problem with the new partial. A small typo can crash the whole system – I’ve tried to render folder ‘expenses’ instead of ‘expense’ in the app/views/layouts/application.html.erb

Refresh the browser again and see that I’m still not getting what I want.

I haven’t saved the new partial, I also need to make sure I’m calling the correct information form the Expense table in the database

Refresh the browser again and I get a new argument error. Because I’m trying to render a form for an expenses that hasn’t been created yet.

After comparing file and folder names, it is clear that I have not take pluralisation into account when creating the Expense controller and views. That’s not the problem though

The solution might be somewhere in the working Incomes files.

The problem is that the root of the application is ‘incomes/new’ – For this to work, Expenses would have to belong to Income. Unfortunately that business logic doesn’t quite work…

What I can do for now, is reroute the root to expenses/new and at least get the expense creator working. Once I have both Incomes and Expenses working separately, I can refactor with my new business logic, once I’ve finished thinking it through.

A new error indicates missing template for app/views/expenses/new.html.erb

For now, it’s going to be exactly the same as app/views/incomes/new.html.erb

Reload the browser and test

NameError indicates a spelling mistake

Reload the browser and test. Expense forms render successfully

Test by creating expenses

Missing Template. As this was virtually copied from Incomes, the ExpenseController is now expecting to be redirected to an edit page

I can either redirect back to the ‘new’ page or I can create the edit views. Since I’m intending to use the ‘Edit’ views later, I’m going to go with those

Reload the browser again and the page I am looking for appears to have rendered

Return to the root url and go through the expenses creation again to test that it actually worked. Now, only the ‘oneoff’ value is calculating in both the create and edit views. – I have another bug!

Although rails doesn’t throw an error for this kind of bug, I can closely compare Incomes with Expenses to find that the problem is another spelling mistake where I’ve defined expense_params in the ExpenseController

After refreshing the browser and testing the calculation, I am satisfied that the expense model is working correctly

Follow my working example

• https://github.com/SelenaSmall/My_Budget/commit/c1778ef3acf4d49a1231c436eb0f488207ea4ba9

More to come soon!

In this example I am going to do some very simple calculations based on field input values.

First, I’m going to make sure the database values are correct. The table data needs to be set to decimal as floating point numbers don’t calculate financial figures correctly and should never be used for this purpose. Integers also don’t quite do what I need them to either, as they only deal with whole numbers. In the case of both :wages and :other_income, the default value must be set to ‘0’ for the ‘new income’ to work correctly.

After changing the migration, of course I’ll need to exit the server and rebuild the database using command Line:

$rake db:drop && rake DB:create && rake db:migrate

Now, in the Income model I can create a method for total_income which basically takes the values from Income.wages and Income.other_income translates them to_d (to decimals) and adds them together.

Lastly, under app/views/incomes/incomes_index_form.html.erb and app/views/incomes/new_incomes_form.html.erb I need to update the output values.

In the :wages and :other_income fields, I can add

:step => 0.1

which tells the SQL table to allow up to 2 decimal places

<td class="field-name">
  <%= f.label :wages %>
</td>

<td class="field">
  <%= f.number_field :wages, :step => 0.01 %>
</td>

In the same file, I’ve also updated the output so it locates the :total_income method that we set earlier in the Income model

<td class="field-name" id="total-field-name">
  <%= f.label :total_income %>
</td>

<td class="field" id="total-field">
  <%= f.number_field :total_income %>
</td>  

This can all be tested by refreshing the localhost:3000 in the browser

Only complete the fields for ‘wages’ and ‘other income’, click update and see the new total appear after the refresh

Change one of the values and check the edit page is working correctly too

Try it with decimal places too, in this case we are trying to output 2 decimal places, testing this needs to ensure that 2dp is allowed but 3 or more are not.

Now that the adder is working, it’s time for some visual improvements. There is no need for a field to represent Total Income as the user is not allowed to change this amount any way.

<br /> 
        
<tr>
  <td class="field-name" id="total-field-name">
    <%= f.label :total_income %>
  </td>
  
  <td class="total-output">
    <%= @income.total_income%>
  </td>
</tr>

Now the number can be output without the field.

As in my previous tutorial on Css Basics, I can create a visual class around this output value with class=“total-output” so I can move it to an appropriate place in the form.

In app/assets/stylesheets/income.scss I can then update some of the css to improve the alignment, ensuring to drill down to the most unique identifier.

.total-output {
  text-align: right;
  adding-right: 20px;
  font-style: bold;
  font-size: 40px<
}

.field {
  padding: 10px;
  padding-left: 250px;

  #income_other_income {
    text-align: right;
  }

  #income_wages {
    text-align: right;
  }
}

As a reference, see my working example

• https://github.com/SelenaSmall/My_Budget/commit/6704589b936c7c331565b82f199994d12a159670

Continuing on from 9 My_Budget App - CSS Basics, see the design process to develop a theme.

First, use chrome dev tools as a helper to identify classes

If there’s no view where you want it to be, you can always create a new view class. I’ve wrapped app/views/incomes/incomes_index_form.html.erb in it’s own class=”forms-border”

<div class="forms-border">

Refresh the web page and inspect element to see the new class=”forms-border” has been created.

Now I can define the properties in the app/assets/stylesheets/income.scss

.bordered-form {
  margin: 20px;
  border: 2px solid black;
  padding: 10px;
}

After visualising it on the web page, the design development can continue on this form and will change a number of times throughout the rest of my development depending on how I like it to look.

For now, I will just develop a common theme and ensure that every view requiring a class has one.

This “bordered-form” view has a number of parameters making it the size and shape that it is. It is also made up of other nested views such as “field-name” which has parameters that will only effect class=“field-name” IF it’s nested within class=“bordered-form”

.bordered-form {
  margin-left: 50;
  padding: 20px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: #ADD6FF;
  border-radius: 15px;
  width: 750px;

  .field-name {
    padding-left: 40px;
  }

  .field {
    padding: 10px;
    padding-left: 250px;
  }

  .actions {
    padding-left: 472px;
    font-size: 18px;
  }

  h1 {
    font-size: 40px;
    font-weight: inherit;
    border-bottom: solid black 1px;
  }
}

I can also specify ultra specific parameters for classes with specific ID’s using the ‘#’ key. Css is hierarchal and ID’s override Classes.

#total-field-name {
  font-size: 25px;
  color: #1F3D99;
}

#income_income_total {
  background-color: lightyellow;
}

Lastly, I’ve tidied up the Css to ensure there are no unnecessary double-ups and that the top classes take priority in setting properties, chosen hexadecimal colours, hidden the nav-bar and spaced out my elements in a way that is visually appealing.

View the Css in my working model

*Ref

• https://github.com/SelenaSmall/My_Budget/commit/0710fac9b6a4b84af6d3c24219f16a75dc424570

This article assumes that the reader knows about basic HTML5 and CSS, and that they have probably used chrome developer tools before…

App/assets/stylesheets/income.scss is where you can find styles related to the income controller.

Along with some bootstrap that was already in that folder, I am going to import the income.scss into the App/assets/stylesheets/application.scss, which controls the overall layout of the whole application.

I can then open chrome developer tools and use the elements search tool to work out which areas I want to edit.

By clicking the magnifying glass on the left, I can hover the mouse over my page and see the actual area that each element takes up.

It is also much easier to identify nested elements.

Within the elements sections of the developer tools I can see that when I click on a page element, the dev tools shows me where to find that view.

In the elements tab, I can see that the button I have chosen to investigate belongs to class=”actions”. This is the class I want to edit.

On the right hand side of the page, the styles tab shows the default css for my selected element

Element.style will allow me to add or override existing css on that class

If the property is valid, I can see a preview in the web browsers

And I can see where the new piece of styling code will go in the app

Once I’m happy with the new display, I can take my new element.style I have just designed and put it into the App/assets/stylesheets/income.scss under the ‘class’ or ‘id’ which it belongs to. In this case, class=”actions”

To test this, I can simply save the .scss file and refresh my web browser to see that the new style is working on the element that I wanted to edit.

For help with colour pickers and css properties, http://www.w3schools.com/css/ has some very good examples and explanations

*ref my Working Example

• https://github.com/SelenaSmall/My_Budget/commit/2b1571a95be81860ce9396b581e6ad3a5834ccc9