Integrating Github api

What an energetic day! Today I started with completing previous work that is upload a repository from github to the app so that we can edit the contents of file or folder.
What I exactly do is?
First of all add Github api in Gemfile

gem 'github_api'

then fetch the repository content in my controller file using


repo = Github::Client::Repos.new
@gitcontent=repo.find user: user,repo: reponame

from here I fetched Github clone URL


@gitcontent.clone_url

and then clone the repository


puts %x{git clone #{@gitcontent.clone_url}}

Yay! we done it!
Any Queries? comment below?
stay in touch and keep rocking 😀

Advertisements

Tab implementation using Jquery

This is the most interesting task I ever had. Every editor must have tabs so that we can open more than one file and then we can switch from one file to other and get the content of another file.
like this.Screenshot from 2017-05-29 18-22-54

How to do this?

This is the HTML Structure needed for this
Screenshot from 2017-05-29 18-30-57

So, the usage should go like this: When I click on Document1 link, a new tab will be shown with the title “Document1” and content “This is the content of Document1”. It will contain a red cross on the right side of the tab title which will remove the tab and its content.

$("#documents a").click(function() {
addTab($(this));
});

This code will add a click event on each document link, and will pass the link itself to addTab function.

function addTab(link) {
// hide other tabs
$("#tabs li").removeClass("current");
$("#content p").hide();

// add new tab and related content
$(“#tabs”).append(”

 

“);
$(“#content”).append(”

” +
$(link).attr(“title”) + “

“);
// set the newly added tab as curren
$(“#” + $(link).attr(“rel”) + “_content”).show();
}

The addTab function will first hide all tabs (if there are any) and remove class current from all tabs. This class sets a different color for the current tab. Then, it will create a new tab (li element) that will contain a link for tab title and another one for removing the tab. The content is added in a similar way. At the end, the code will set the new tab as current.

So far so good, but this will be pretty much static – we have to add functionality to tabs. When tab header is clicked related content should be shown. Also, when red cross is clicked tab with its content should be removed. For these two scenarios, we will use on method that will bind events to existing elements, but also to all elements that will be added later to HTML dom.

$('#tabs a.tab').on('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content p").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').on('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
});

The first function will add the content while the second will remove tab content. Now, there are a few more things to do. First, we need to implement a constraint which says that one document can only be opened once. To do so, we will extend addTab function with this code:

// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;

The last thing we need to handle is the case when a tab is removed. With the current code, no tab will be the current one, and no content will be displayed. What should be done next?
We need to extend the function that removes the tab with this code (put it at the end of the function):

// if there is no current tab and if there are still tabs left, show the first one
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// find the first tab
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// get its link name and show related content
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}

That’s it if you find any problem comment below! 🙂

What is Binstub?

While I was installing RSpec I run a command here

$bundle binstub rspec-core

I was wondering, what exactly the binstub is?
And why we have to use it?

Binstub

Binstub is the Binaries require by the executable files. Basically, Binstub prepare the environment around executables before dispatching the call. Ruby might need an extra stuff to their job and here the binstub is use to make sure that the stage is properly set.

let’s go through an example from the Guide

#!/usr/bin/env ruby
require ‘rubygems’

# Prepares the $LOAD_PATH by adding to it lib directories of the gem and
# its dependencies:
gem ‘rspec-core’

# Loads the original executable
load Gem.bin_path(‘rspec-core’, ‘rspec’)

The purpose of every RubyGems binstub is to use RubyGems to prepare the $LOAD_PATH before calling the original executable.

Float Property in css

Float

The float property allows us to take an element, remove it from the normal flow of a page, and position it to the left or right of its parent element. like if we want to move an image on the left side of the screen we can use

img{

float: left;

}

Clear
when we use float element it will change the normal flow of the page even changes the margins and padding. Also, changes the default display value we must keep an eye on their display property. so to remove or solve this issue we can use clear

now the clear has three values
left, right, both

clear:left;                          // removes the left float
clear:right:                       //removes the right float
clear: boht:                      //removes both right and left float

Action Cable(Rails 5)

Action cables

Action cable is introduced in rails5. It uses for Real-time communication.
Now here we discuss how to configure action cables in your websites.

1. Setup Action cable connection
For this, Open app/channels/application_cables/connection.rb

Here we will define 2 methods

class Connection < ActionCable::Connection::Base
#Totally rely on siged in user
identified_by :current_user
def connect
self.current_user= find_current_user
end

def disconnect

end
def find_current_user
if current_user = User.find_by(id: cookies.signed[‘user.id’])
current_user
else
reject_unauthorized_connection
end
end

end
end

Here generally we find the current user from cookies of browser and get the user id

2. Authenticate the user on Web server

Open config/initializers/warden.rb

Warden::Manager.after_set_user do |user, auth, opts|
scope = opts[:scope]
auth.cookies.signed[“#{scope}.id”] = user.id
end

#Delete the cookies when user is signed out
Warden::Manager.before_logout do |user, auth, opts|
scope = opts[:scope]
auth.cookies.signed[“#{scope}.id”] = nil
end

this will perform 2 actions

First, this will set cookies for signed in user and then make it available for the user and secondly this will erase the cookies when user signed out

3. Acces Action cable server through rails server

For this, Open config/application.rb

and add a line under

Class Application <Rails::Application

i.e.

config.action_cable.mount_path=’/cable’

By default action cable works on mount under ‘/cables’

after that, we have to mount this /cable in routes.

4. Open Routes.rb

Add this line in the end

mount ActionCable.server => ‘/cable’

5. Create a messaging

After all this, We have to create a messaging channel.

Here, we are creating channel for comments.

Type

$rails generate channel comments

will create 3 files.

Screenshot from 2017-01-27 12-38-34.png

6. Open comments_channel.rb

Here uncomment the line written in subscribed method

def subscribed

stream_from “comments”

end

I created channel comments so I have replaced stream from comments.

7. Broadcast the comment

Open  comments_controller.rb

here add 2 lines under we save the comment

  if @comment.save

ActionCable.server.broadcast “comments”,
render(partial:’comments/comment’,object: @comment)

flash[:success] = “Comment has been created”

this code will generally  broadcast the comment and rendAer a partial named as comment

8. Create a partial for this

Open views/comments/_comment.html.erb

<%= comment.body %>
<%= time_ago_in_words(comment.created_at) %>
ago by <%= comment.user.email %>

and Add a line where you have created the form for controller

remote: true

like this

my comment form is present in show.html.erb

 <%= form_for [@article,@comment], remote: true, :html => {class: “form-horizontal”, role: “form”} do |f| %>

this will specify we are using Ajax

9.  Update comments.coffee file

open app/assests/javascripts/channels/comments.coffee

add a line

recieved: (data) ->

$(“#messages”).prepend(data)

this will call when there is an upcoming message on the web socket for this channel

in this make sure you have indented the line properly here indentation matters.

now check your app in the browser and if you have any problem leave a comment below.

RSpec And Capybara(Rails5.0)

Rails application comes with a default testing framework known as mini test

But here we discuss RSpec because it is most widely used framework

Installation of Rspec and capybara

Step 1: open Gemfile
add

“gem ‘rspec-rails’, ‘3.1.0’”

in group development, :test do

Step 2: Create another group for test

group :test do
gem ‘capybara’, ‘2.7.1’
end

Step 3: Run

$bundle install

Step 4: Run

$rails generate rspec:install

Step 5: Last Step is to generate Stub

$bundle binstub rspec-core

Great! By this you have successfully installed RSpec

Dive into Rails 5.0

Rails is upgraded to Rails 5.0. With new release, we have new features including Action cables, API modes and many more. Let’s have fun by using these new features.

Let’s start from the start

If you haven’t install rails yet then go and install it from here

Generally, To create a rails application we use

$rails new blog_app

Now if we want to skip the default testing comes with the rails application we use

$rails new blog_app -T

Action cables

Earlier, Their is very difficult in rails to implement real time communication which include chats, irc, real-time editors but now in rails5 we can easily do it using Action cables

what it does?
It integrates web sockets with rest of the rails application which allows real-time
communication in rails.
In simple language, There is an open connection between your server and application.
We will discuss about it in future so stay connected.

Rspec

Rspec is a testing tool for Ruby, created for behavior-driven development (BDD). It is the most frequently used testing library for Ruby in production applications. Even though it has a very rich and powerful DSL (domain-specific language), at its core it is a simple tool which you can start using rather quickly. This tutorial will hopefully help you get started, assuming you have no prior experience with RSpec and even testing

we will discuss in detail about RSpec in future.