Installation

$ npm install -g create-react-native-app

$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start

Basic App

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4286f4',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Create React Native App

Pros

• JavaScript − You can use the existing JavaScript knowledge to build native mobile apps.
• Community − The community around React and React Native is large, and you will be able to find any answer you need.
• Code sharing − You can share most of your code on different platforms.

Cons

• Native Components − If you want to create a native functionality which is not created yet, you will need to write some platform specific code.

Reference

• assert that it has #changed
• call #notify_observers

Public Instance Methods

• add_observer(observer, func=:update)

How it works

require 'observer'
class Bike
  include Observable
  attr_reader :mileage,:service
  def initialize(mileage =0, service = 3000)
    @mileage,@service = mileage, service
    add_observer(Notifier.new)
  end
  def log(miles)
    @mileage += miles
    notify_observers(self, miles)
  end
end

class Notifier
  def update(bike, miles)
    puts "The bike has logged #{miles} miles, totaling #{bike.mileage} miles traveled."
    puts "The bike needs to be taken in for a service!" if bike.service <= bike.mileage
  end
end

By running the code we can see

bike = Bike.new(2300, 3000)
bike.log(100)
=> "The bike has logged 100 miles, totaling 2400 miles traveled."
bike.log(600)
=> "The bike has logged 300 miles, totaling 3000 miles traveled."
=> "The bike needs to be taken in for service!"

First, we create an instance of the Bike class with 2300 miles, and we set that it needs to be taken for service when it reaches 3000 miles.

I hope this example helps you understand ruby observer design pattern better.

References

• https://ruby-doc.org/stdlib-2.3.2/libdoc/observer/rdoc/Observable.html#module-Observable-label-Mechanism
• https://cbabhusal.wordpress.com/2015/10/03/gang-of-four-observer-design-pattern-in-ruby/

Prerequisites

Installation

npm install -g @angular/cli

ng new my-app

cd my-app
ng serve --open

And that’s it!

What’s New In Angular 4

Router ParamMap

class MyComponent {
 sessionId: Observable<string>;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

class MyComponent {
 sessionId: Observable<string>;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParamMap
     .map(paramMap => paramMap.get('session_id') || 'None');
 }
}

Animation Package

Improved *ngIf and *ngFor

<div *ngIf="races.length > 0; else empty"><h2>Races</h2></div>
<ng-template #empty><h2>No races.</h2></ng-template>

<div *ngFor="let pony of ponies | slice:0:2 as total; index as i">
  {{i+1}}/{{total.length}}: {{pony.name}}
</div>

TypeScript 2.1 & 2.2 compatibility

Universal

Conclusion

References

$ rails generate
Usage: rails generate GENERATOR [args] [options]
...........
Rails:
assets
channel
controller
generator
helper
integration_test
jbuilder
job
mailer
migration
model
resource
responders_controller
scaffold
scaffold_controller
task
.............

• controller: The Rails controller coordinates the interaction between the user, the views, and the model.
• helper: Code in helpers is included in the corresponding view. We can move big loops, method calls or other logic into a method in the helper.
• mailer: It allows for sending and receiving emails from and to your application.
• migration: Rails Migration allows you to use Ruby to define changes to your database schema.
• model: It is Ruby class that talk to the database, store and validate data, perform the business logic.
• scaffold: It refers to the auto-generation of a simple set of a model, views and controller usually for a single table.

-h, [–help] # Print generator’s options and usage -p, [–pretend] # Run but do not make any changes -f, [–force] # Overwrite files that already exist -s, [–skip] # Skip files that already exist -q, [–quiet] # Suppress status output

Generators

• rails generate model ModellName

It generates the model and the associated database table. For example, we can add a new model to the app called User with fields name and age as,

Eg:  rails g model User name: string age: integer

• rails generate controller ListController show edit

It generates controller. It is used if you are creating static views or non-CRUD related features. Let’s create a user controller that will manage the data flow and view for each users.

Eg:  rails g controller users

• rails generate scaffold ModelName ControllerName

Generates Scaffold. Let’s create a scaffold User with edit and view actions.

Eg:  rails g scaffold User edit view

• rails generate migration AddNewTable

Generates Table to migrate. We can create migration for adding a table as

Eg:  rails g migration User

• rails generate plugin PluginName

Generates Plugin.

Eg:  rails g plugin rails_plugin

• rails generate integration_test TestName

Generates Integration Test.

Eg:  rails generate integration_test User

• rails generate session_migration

Generates Session Migration.

Creating Generators with Generators

$ rails generate generator initializer
 create lib/generators/initializer
 create lib/generators/initializer/initializer_generator.rb
 create lib/generators/initializer/USAGE
 create lib/generators/initializer/templates

class InitializerGenerator < Rails::Generators::NamedBase
  source_root File.expand_path("../templates", __FILE__)
end

First, notice that we are inheriting from Rails::Generators::NamedBase instead of Rails::Generators::Base. This means that our generator expects at least one argument, which will be the name of the initializer.

Customizing Rails generators

config.generators do |g|
  g.orm :active_record
  g.template_engine :erb
  g.test_framework :test_unit, fixture: false
  g.stylesheets false
  g.javascripts false
end

References

• https://learn.co/lessons/rails-generators-readme
• https://www.tutorialspoint.com/ruby-on-rails/rails-generators.htm
• http://www.agmprojects.com/blog/building-a-rails-generator-and-packing-it-into-a-gem

What is Vue.js?

Overview

– index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png"/>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

– src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from '@/components/Hello';
Vue.use(VueRouter);
const routes = [
  { path: '/', name: 'Hello', component: Hello },
];
/* eslint-disable no-new */
export default new VueRouter({
  routes,
  mode: 'history',
});

– src/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
export default {};
</script>

– src/main.js

import Vue from 'vue';
import router from '@/router';
import store from '@/store';
import App from '@/App';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

– src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  computed: mapState({
    message: state => state.Hello.message,
  }),
};
</script>

Getting Started

<script src="https://unpkg.com/vue"></script>

function printText () {
  return 'Hello World!'
}
// Set some text in jQuery
$('.element').text(printText())

<div class="app">
  <span class=".element">
    {{ msg }}
  </span>
</div>

new Vue({
  el: '.app',
  data: {
    msg: 'Hello World!'
  }
})

Why Vue.js?

Advantages

1. Simplicity

<div id="app">
  {{ message }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

2. Reactivity

var app = new Vue({
  el: '#app',
  data: {
    message: "<h1>Hello World</h1>"
  }
});
setTimeout(function() {
  app.message = "<small>Goodbye World</small>";
}, 2000)

<div id="app">
  <!--Renders as "Hello World" with <h1> tag-->
  <!--Then after 2 seconds re-renders as "Goodbye World" with <small> tag-->
  <p v-html="message">{{ message }}<p>
</div>

3. Focus

4. Flexibility

• Write your template in an HTML file
• Write your template in a string in a Javascript file
• Use JSX in a Javascript file
• Make your template in pure Javascript using virtual nodes

5. Components

<div id="example">
  <my-component></my-component>
</div>

// register
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
  el: '#example'
})

<div id="example">
  <div>A custom component!</div>
</div>

 6. Copying competitors

Conclusion

References

user = User.find(1)
user.to_json

• only – Only show column names in the output as specified in the list

  user.to_json(:only => [ :id, :email ])
  

• except – Show all column names except the ones specified in the list

  user.to_json(:except => [:id, :username])
  

render :json => { :sucess => true,
  :user => @user.to_json(:only => [:name]) }

as_json in Rails API

user.as_json(root: true)

user = User.find(1)
user.as_json

user.as_json(:only => [ :id, :email ])
user.as_json(:except => [:id, :username])

def as_json(options={})
 { :email => self.email }
end

from_json in Rails API

json = { user: { email: 'adone@gmail.com', username: 'adone'} }.to_json
user = User.new
user.from_json(json, true)
user.email                 #=> "adone@gmail.com"
user.username              #=> "adone"

References

• https://github.com/rails/rails/blob/master/activesupport/lib/active_support/core_ext/object/json.rb
• http://ruby-doc.org/stdlib-2.0.0/libdoc/json/rdoc/Regexp.html

#!/usr/bin/env ruby
require 'pathname'
require 'fileutils'
include FileUtils
# path to your application root.
APP_ROOT = Pathname.new File.expand_path('../../', __FILE__)
def system!(*args)
  system(*args) || abort("\n== Command #{args} failed ==")
end
chdir APP_ROOT do
  # This script is a starting point to setup your application.
  # Add necessary setup steps to this file.
  puts '== Installing dependencies =='
  system! 'gem install bundler --conservative'
  system('bundle check') || system!('bundle install')
  # puts "\n== Copying sample files =="
  # unless File.exist?('config/database.yml')
  #   cp 'config/database.yml.sample', 'config/database.yml'
  # end
  puts "\n== Preparing database =="
  system! 'bin/rails db:setup'
  puts "\n== Removing old logs and tempfiles =="
  system! 'bin/rails log:clear tmp:clear'
  puts "\n== Restarting application server =="
  system! 'bin/rails restart'
end

#!/usr/bin/env ruby
require 'pathname'
require 'fileutils'
include FileUtils
APP_ROOT = Pathname.new File.expand_path('../../', __FILE__)

def system!(*args)
  system(*args) || abort("\n== Command #{args} failed ==")
end

def system!(*args)
  system(*args) || puts "#{args} -> FAILED TO EXCECUTE"
end

chdir APP_ROOT do
  puts '== Installing dependencies =='
  system! 'gem install bundler --conservative'
  system('bundle check') || system!('bundle install')
  puts "\n== Preparing database =="
  system! 'bin/rails db:setup'
  puts "\n== Removing old logs and tempfiles =="
  system! 'bin/rails log:clear tmp:clear'
  puts "\n== Restarting application server =="
  system! 'bin/rails restart'
end

   puts "== Copying sample files =="
   unless File.exist?('config/database.yml')
     cp 'config/database.yml.sample', 'config/database.yml'
   end

To start with Pundit

gem 'pundit'

include Pundit

rails g pundit:install

#app/policies/application_policy.rb
class ApplicationPolicy
  attr_reader :user, :record
  def initialize(user, record)
    @user = user
    @record = record
  end
  #............
  def destroy?
    false
  end
  def scope
    Pundit.policy_scope!(user, record.class)
  end
  class Scope
    attr_reader :user, :scope
    def initialize(user, scope)
      @user = user
      @scope = scope
    end
    def resolve
      scope
    end
  end
end

Create policies

def pundit_user
  User.find_by_other_means
end

class User < ApplicationRecord  
  has_many :collections, dependent: :destroy
end

class Collection < ApplicationRecord  
  belongs_to :user
end

#app/policies/collection_policy.rb
class CollectionPolicy < ApplicationPolicy
  def destroy?
    record.user == user
  end
end

record.user == user

class CollectionsController < ApplicationController
  protect_from_forgery
  def create
    Collections::Create.call(collection_params, current_user)
    redirect_to root_url
  end
  def destroy
    collection = Collection.find(params[:id])
    authorize(collection, :destroy?)
    Collections::Delete.call(collection, current_user)
    redirect_to root_url
  end
  private
  def collection_params
    params.require(:collection).permit(:name)
  end
end

Policy without a corresponding model

# app/policies/website_policy.rb
class WebsitePolicy < Struct.new(:user, :website)
  # ...
end

# In controllers
authorize :website, :show?

# In views
<% if policy(:website).show? %>
  <%= link_to 'Website', website_path %>
<% end %>

Pundit scopes

class Scope < Scope
  def resolve
    if user.admin?
      scope.all
    else
      scope.where(:company_id => user.collections.select(:website_id))
    end
  end
end

def index
  @websites = policy_scope(Website.includes(:company).all)
  authorize @websites
end

Exception handling

class ApplicationController < ActionController::Base
  include Pundit
  protect_from_forgery with: :exception
  rescue_from Pundit::NotAuthorizedError, with: :user_not_authorized
  def user_not_authorized
    flash[:alert] = 'You are not authorized to perform this action.'
    redirect_back(fallback_location: root_path)
 end
end

Why Pundit?

• Well suited to the service oriented architecture that’s popular for large Rails applications
• Keep controllers skinny
• Pundit policy objects are lightweight, adding authorization logic without as much overhead as CanCanCan
• Emphasizes object-oriented design with discrete Ruby objects providing specialized services

References

• Pundit Gem on Github
• Rails-Devise-Pundit

Screenshots with PhantomJS

gem install phantomjs

var instance = require('webpage').create();

instance.open('http://redpanthers.co/', function() {
instance.render('screenshot-phantom.png');
phantom.exit();
});

phantomjs filename.js

Screencap gem

gem install phantomjs -v 1.9.8

phantomjs --version

gem 'screencap'

gem install screencap

Usage

require 'screencap'
screenshot = Screencap::Fetcher.new(<url>)
image = screenshot.fetch

• Fetcher class accepts url of the website to take screenshot.
• Screenshot is taken when fetch method is called.
• Also, fetch method supports various optional parameters to specify the area to capture the screenshot.
• We can specify where to store the screenshot captured, as shown below.

image = obj.fetch(
 output: '~/folder/file-name.png',
 # dimensions for taking screenshot of specific area
  width: 1024,
 height: 768
 )

Example

require 'screencap'
screenshot = Screencap::Fetcher.new('http://redpanthers.co/')
image = screenshot.fetch(output: '~/screencap/screencap.png',
                                   width: 300,
                                  height: 500)

Webshot gem

gem 'webshot'

gem install webshot

Usage

require 'webshot'
screenshot = Webshot::Screenshot.instance
screenshot.capture "https://github.com/", "image.png", width: 1024, height: 800

References

• PhantomJS
• Screencap gem
• Webshot gem

• Has date attributes only (year, month, day)
• Based on integer whole-day intervals from an arbitrary “day zero”
• Can handle date arithmetic in units of whole days
• Date object is created with ::new, ::jd, ::ordinal, ::commercial, ::parse, ::strptime, ::today, Time#to_date etc.
• Takes 4 bytes to store.

$ require 'date'
$ Date.new(2001,2,3)
  Date: 2001-02-03
$ Date.jd(2451944)
  Date: 2001-02-03 ...
$ Date.ordinal(2001,34)
  Date: 2001-02-03 ...
$ Date.commercial(2001,5,6)
  Date: 2001-02-03 ...
$ Date.parse('2001-02-03')
  Date: 2001-02-03 ...
$ Date.strptime('03-02-2001', '%d-%m-%Y')
  Date: 2001-02-03 ...
$ Time.new(2001,2,3).to_date
  Date: 2001-02-03 ...
$ Date.today
  "Mon, 02 Jan 2017"

Time

• Has date and time attributes (year, month, day, hour, min, sec, subsec)
• Can handle negative times before unix time
• Can handle time arithmetic in units of seconds

$ require 'time'
$ Time.now
   2015-12-08 10:26:40 -0200
$ time = Time.new
  Components of a Time
$ time.year    # => Year of the date
$ time.month   # => Month of the date (1 to 12)
$ time.day     # => Day of the date (1 to 31 )
$ time.wday    # => 0: Day of week: 0 is Sunday
$ time.yday    # => 365: Day of year
$ time.hour    # => 23: 24-hour clock
$ time.min     # => 59
$ time.sec     # => 59
$ time.usec    # => 999999: microseconds
$ time.zone    # => "UTC": timezone name

DateTime

• Has date and time attributes (year, month, day, hour, min, sec)
• It  is formatted as YYYY-MM-DD HH:MM:SS
• Based on fractions of whole-day intervals from an arbitrary “day zero” (-4712-01-01)
• Can handle date arithmetic in units of whole days or fractions
• Takes 8 bytes to store, and has a precision of .001 seconds.
  • A four-byte integer packed as YYYY×10000 + MM×100 + DD
  • A four-byte integer packed as HH×10000 + MM×100 + SS
• Valid ranges go from the year 1000 to the year 9999
• It is created with ::new, ::jd, ::ordinal, ::commercial, ::parse, ::strptime, ::now, Time#to_datetime etc.

$ require 'date'
$ DateTime.new(2001,2,3,4,5,6)
  DateTime: 2001-02-03T04:05:06+00:00 ...

Let’s see the Differences among all of them which makes them unique.

• Date use rational and a “day zero” for storage. But Time doesn’t. So Time is faster.
• Date field is populated with a literal date and does not concern itself with time zones so this can cause trouble if it is not expressed in the user’s local time. A DateTime can always be converted to a user’s local time if required.
• Time used to track changes to records and update every time when the record is changed. DateTime used to store a specific and static value which is not affected by any changes in records.
• Time internally converted current time zone to UTC for storage, and during retrieval converted back to the current time zone. DateTime can not do this.
• Time affected by different TIME ZONE related setting. Datetime is constant.
• Ruby’s Time class implements a proleptic Gregorian calendar and has no concept of calendar reform. This problem can be overcome using DateTime class.

References

• https://ruby-doc.org/stdlib-2.4.0/libdoc/date/rdoc/Date.html
• http://stackoverflow.com/questions/3928275/in-ruby-on-rails-whats-the-difference-between-datetime-timestamp-time-and-da
• https://www.tutorialspoint.com/ruby/ruby_date_time.html
• http://stevenyue.com/blogs/date-time-datetime-in-ruby-and-rails/