Tuesday, February 9, 2016

Week 4 - Pinterest app - jQuery, Haml, Simple form, Bootstrap-sass, Paperclip

It is week 4 on Mackenzie's 12 in 12 challenge.  It is my third week and this paperclip gem has been giving me a tough time.  I scrapped the whole app twice and started over.

This time I am using carrierwave gem with rmagick and fog.  Fog is made specifically to upload to Amazon S3.

I'm going to go through what I had to learn.

Having ENV variables:  This is a file on your computer that your apps can point to and get information that you don't want to have in your app.  More on why this is important later!

I didn't understand how it worked.  The directions said:

Since it's a bad practice to have your credentials in source code, you should load them from default fog configuration file:~/.fog. This file could look like this:
default:
  aws_access_key_id:     
  aws_secret_access_key: 
So there is a file called .fog that is in my directory and I should put my aws credentials there.

Ok, did that, app doesn't work.  I now know that the repo for fog needs to be a whole more descriptive.  Developers assume you know some things that they don't tell you and it is annoying reading these readme files.  Like for instance, the .fog file did not exist, I had to create it.  Also, the app needs you to specify the region and the bucket name.

Here is my slack conversation with a senior developer.

You'll need to provide your fog_credentials and a fog_directory (also known as a bucket) in an initializer.  For the sake of performance it is assumed that the directory already exists, so please create it if need be.  You can also pass in additional options, as documented fully in lib/carrierwave/storage/fog.rb. Here's a full example:

```ruby
CarrierWave.configure do |config|
  config.fog_credentials = {
    :provider               => 'AWS',                        # required
    :aws_access_key_id      => 'xxx',                        # required
    :aws_secret_access_key  => 'yyy',                        # required
    :region                 => 'eu-west-1',                  # optional, defaults to 'us-east-1'
    :host                   => 's3.example.com',             # optional, defaults to nil
    :endpoint               => 'https://s3.example.com:8080' # optional, defaults to nil
  }
  config.fog_directory  = 'name_of_directory'                     # required
  config.fog_public     = false                                   # optional, defaults to true
  config.fog_attributes = {'Cache-Control'=>'max-age=315576000'}  # optional, defaults to {}
end
```



So I put my credentials in this file and pushed to github.  Some of you are cringing right now because you know what that means.  I realized a while later that my ENV variable go in place of 'AWS','XXX' and so forth.  The fact that the example has the actual region 'eu-west-1' made me think this is where those credentials go.  After I fixed this, the app was still throwing errors!

        
         Joshua Munene 9:27pm
I can’t gain access to amazon’s server
terminal

```AllAccessDisabledAll access to this object has been disabled209C1CF7E929B824Sj2Yrfph0TqpclltpXM0Sz46vNnPb4uR6w3AxfFez+X2hpVvqnml54pLhgQpIsfW1JTyzqK9yHE=```

Same error

Same error in the browser as before 403 forbidden


```Excon::Errors::Forbidden (Expected(200) <=> Actual(403 Forbidden)
excon.error.response
  :body          => "\nAllAccessDisabledAll access to this object has been disabled209C1CF7E929B824Sj2Yrfph0TqpclltpXM0Sz46vNnPb4uR6w3AxfFez+X2hpVvqnml54pLhgQpIsfW1JTyzqK9yHE="
  :headers       => {
    "Connection"       => "close"
    "Content-Type"     => "application/xml"
    "Date"             => "Wed, 03 Feb 2016 05:29:34 GMT"
    "Server"           => "AmazonS3"
    "x-amz-id-2"       => "Sj2Yrfph0TqpclltpXM0Sz46vNnPb4uR6w3AxfFez+X2hpVvqnml54pLhgQpIsfW1JTyzqK9yHE="
    "x-amz-request-id" => "209C1CF7E929B824"
  }
  :local_address => "192.168.1.217"
  :local_port    => 56683
  :reason_phrase => "Forbidden"
  :remote_ip     => "54.231.16.216"
  :status        => 403
  :status_line   => "HTTP/1.1 403 Forbidden\r\n"
):
  app/controllers/recipes_controller.rb:20:in `create'
```

Joshua Munene [9:40 PM] any ideas???
Emmanuel Mwangi [9:41 PM] What is your CarrierWave config?
Joshua Munene [9:41 PM] 
```CarrierWave.configure do |config|
        config.fog_credentials = {
            provider:                                'AWS',
            aws_access_key_id:            ENV['AWS_ACCESS_KEY_ID'],
            aws_secret_access_key:    ENV['AWS_SECRET_ACCESS_KEY']
        }
        # To let CarrierWave work on Heroku
        config.cache_dir                    = "#{Rails.root}/tmp/uploads"
        config.fog_directory            = ENV['S3_BUCKET']
end

module CarrierWave
    module MiniMagick
        def quality(percentage)
            manipulate! do |img|
                img.quality(percentage.to_s)
                img = yield(img) if block_given?
                img
            end
        end
    end
end
```

so I made a directory at 
~/.fog
that is where I put my credentials. Inside is:

```aws_access_key_id: '(can't show you that)'
aws_secret_access_key: '(That one either)'
s3_bucket: 'recipe-box-dev'```

that is what the config.fog_credentials should be pointing to right?
Emmanuel Mwangi [9:47 PM] do this:
`env | grep AWS`
on the command line

Joshua Munene [9:48 PM] AWS_SECRET_ACCESS_KEY=(Hidden)
AWS_ACCESS_KEY_ID=(Hidden)

thats the output
Emmanuel Mwangi [9:48 PM] ok now
`env | grep S3`(edited)

Joshua Munene [9:49 PM] nothing outputs
Emmanuel Mwangi [9:49 PM] `cat ~/.bash_profile | grep S3`

Joshua Munene [9:50 PM] => export S3_BUCKET_NAME="recipe-box-dev"
Emmanuel Mwangi [10:06 PM] Then you just need to `source ~/.bash_profile`
Then `env | grep S3` should show you
`S3_BUCKET_NAME=recipe-box-dev`
Then rails should pick it up and everything should be good.

Here is when I learned about the .bash_profile and how it works with Iterm or terminal.  This is a file that has your ENV variables and you can use it to make sure that they are set correctly.

Can I just say how awesome it is to have friend who is a developer/jedi master. He illuminated my path as I was in the darkness, barely able to feel the force. But this padawan is learning.

Ok so earlier I told you that ENV variable are for info that your app needs but you can not put in your app.  There reason is that your aws credentials must be inputed into Heroku config manually so your app can use it.  NOT through a file in your app.  I made this mistake when I first put my credentials in the carrierwave.rb file.  I got a message from Amazon.  I'll let you read it.

Case ID: 1648488551
Subject: Your AWS account  is compromised
Severity: Low
Correspondence: Dear AWS Customer,

Your AWS Account is compromised! Please review the following notice and take immediate action to secure your account.


Your security is important to us. We have become aware that the AWS Access Key AKIAI3273*hidden along with the corresponding Secret Key is publicly available online at https://github.com/search?q=AKIAI3273PKPPCD3KFPQ&type=Code&utf8=%25E2%259C%2593.

This poses a security risk to your account and other users, could lead to excessive charges from unauthorized activity or abuse, and violates the AWS Customer Agreement.

We also believe that this credential exposure led to unauthorized activity in your account. 

Your current EC2 usage is about $1200 per day.

My eyes were fixated on that number after the $.  Whaaaaat

Good thing Amazon is so cool.  They congradulated me on fixing the problem so soon and started a refund request for me.  See the thing is I had no idea this was happening.  I pushed the file to github and then I knew it wasn't the right thing to do and deleted it.  I was reading this email 2 days later saying "Lord Jesus please handle this. We both know I ain't got no $1200"  So i'm still waiting to hear from Amazon as to the refund request.

So to recap, I switched the app from paperclip to carrierwave and the documentation for carrierwave is more detailed that paperclip.  (after finishing this app) I went back and read the paperclip gem and I believe I can use it on amazon s3.  But I understood it only after using carrierwave.

Sorry for some of the formatting issues.  The background makes it easier to read code, but copy and pasting my chat history from Slack comes with some color issues.

Kenyacode

Monday, January 25, 2016

Week 3 - Recipe App - Haml, carrierwave, cocoon, fog

Click here to open in a new window
My name is Joshua a.k.a. kenyacode and I have been doing Mackenzie Childs 12 apps in 12 weeks challenge in an attempt to teach myself Ruby On Rails.

Well I'm on my third app and I haven't finished two weeks yet.  I made the first app on the 14th and the second app on the 22nd.  So today is the 25 and I thought I was going to knock this out in one day... eh NO!

I got through most of this app and started having problems with the paperclip gem.  It worked ok locally but connecting it to Amazon S3 to host the pictures was seeming to be impossible.

I also had some css issues that Mackenzie couldn't explain in his tutorial.

Ok, back to work.

Features I would like to add:
1. Make better use of the Name card in show view
2. Ability to multiply the recipes
3. Posting pictures & videos.
4. Multiple picture upload.
5. Search function
6. Social media shareability
7. carousel on show view
8. A pic per recipe step.
9. Add a splash page.


Update:

So the problems I was having were due to the fog gem ENV variables that needed to be set on my local dev environment and on heroku.  Thanks to my developer friends, it only took about 1/2 an hour and I was uploading pics through my app to amazon aws.

Kenyacode

Tuesday, January 19, 2016

Week 2 - Reddit Clone - Bootstrap Sass, Acts as votable, Simple form

Click here to open in a new window
Today I finished Mackenzie Childs Reddit Clone app from his 12 in 12 challenge.  That's build 12 apps in 12 weeks to teach yourself Ruby On Rails.

After the blog app I finished yesterday, this app didn't seem that different.  This is a Reddit type app that looks a lot like a blog but users add web links with a title.  The site also has the ability to vote on each link.  The highest rated link is shown first in the index.

This is due to the acts as votable gem.

<% @links.order(cached_votes_up: :desc).each do |link| %>
  <div class="link row clearfix">
    <h2>
      <%= link_to link.title, link %>
      <small class="author">Submitted <%= time_ago_in_words(link.created_at) %> by <%= link.user.name %></small>
   

    <div class="btn-group">
      <a class="btn btn-default btn-sm" href="<%= link.url %>">Visit Link</a>
      <%= link_to like_link_path(link), method: :put, class: "btn btn-default btn-sm" do %>
        <span class="glyphicon glyphicon-chevron-up"></span>Upvote<%= link.get_upvotes.size %>
      <% end %>
      <%= link_to dislike_link_path(link), method: :put, class: "btn btn-default btn-sm" do %>
        <span class="glyphicon glyphicon-chevron-down"></span>Downvote<%= link.get_downvotes.size %>
      <% end %>
    </div>
  </div>
<% end %>

One thing I have had a hard time with is css.  While doing this app and the blog app, I have learned so much more about css and sass.  Bootstrap-sass is a gem I use and its great for organizing the rules. It helps me to see how the rules are applied.

I was able to load this app with a seed file as well which makes the app look great right out the box. Visit here

Well its week one and I have already finished two apps and I have published them on Heroku.  Take a look, leave a comment below and check out my github page for more apps.  Follow this blog as I take the journey from novice to working web developer.  Lets see if I can finish these 12 apps in 6 weeks.

Features I would like to add:
1. Social media shareability
2. Display who submitted the comment
3. Posting pictures & gifs, videos.
4. Rich text formating
5. Search function
6. Social media shareability

Kenyacode

Thursday, January 14, 2016

Week 1 - Blog - Devise protected attributes

Click here to go the blog
I have been doing Mackenzie Childs Youtube challenge 12 apps in 12 weeks.
Ok back up here, I went to a code bootcamp for 3 months.  I found Mackenzie's channel and decided that it is the best way for me to really familiarize myself with Ruby on Rails.

My first app, the blog, I was able to finish in about 6 hours.  But that is just locally.  I was pretty tired after 6 hours and I only spent about an hour trying Heroku.  I did manage it the very next day.
Pushing up to Heroku added a second day.  I mostly stuck to Mackenzie's app but added/changed some styling to make it more unique.  I really like the way it turned out.

The show view with comments.  I also used a drop down menu here and my own styling.

Click here to go to page
Features I would like to add:
1. Edit comments
2. Add categories
3. Posting pictures & gifs, videos.
4. Rich text formating
5. Search function
6. Social media shareability


Here is the blog I made.  Let me know what you think in the comments below!

Kenyacode