bettysteger.com http://bettysteger.com Sat, 30 Mar 2013 10:55:22 +0000 de-DE hourly 1 http://wordpress.org/?v=3.4.2 Single-Page application with Rails 3 and AngularJS http://bettysteger.com/single-page-application-with-rails-3-and-angularjs/ http://bettysteger.com/single-page-application-with-rails-3-and-angularjs/#comments Sun, 20 Jan 2013 15:24:02 +0000 admin http://bettysteger.com/?p=133 What is AngularJS?

AngularJS is an open-source JavaScript framework. View on github: https://github.com/angular/angular.js
It extends HTML’s syntax to express your application’s components clearly and define AngularJS functions, for example:

<ul>
  <li ng-repeat="show in shows">
    <a href={{show.link}} target="_blank">{{show.name}}</a>
  </li>
</ul>

AngularJS automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. It also helps with server-side communication, taming async callbacks with promises and deferreds; and make client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake.

 

Rails 3 and AngularJS – a small tutorial

First of all, create a new Rails app, and change your html-tag to <html ng-app> . To setup AngularJS link to the newest version (see http://angularjs.org/) and include your app/assets/javascripts/application.js after that in your layout file (eg: application.html.erb):

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<%= javascript_include_tag "application" -%>

You have to intercept html requests to create a single-page application. If you have your root (eg: home#index) you can easily put a before_filter in your ApplicationController to render ‘home/index‘ or even another layout every time the request format is HTML.

class HomeController < ApplicationController

  respond_to :html

  def index
  end

end

class ApplicationController < ActionController::Base

  protect_from_forgery

  before_filter :intercept_html_requests

  private

  def intercept_html_requests
    render('home/index') if request.format == Mime::HTML
  end

end

I recommend to read the conceptual overview. Understand Angular’s vocabulary and how all the Angular components work together. Watch the AngularJS Tutorial (with node.js). It explains every major AngularJS feature and also gives a live demo.

Create a new JS File (or use your application.js) and try creating your first AngularJS controller.

JS:

function ShowsCtrl($scope) {

  $scope.shows = [
    {
      id: 1,
      name:'Big Bang Theory',
      seen:true
    },
    {
      id: 2,
      name:'Breaking Bad',
      seen:false
    }
  ];

}

The data is now hardcoded in the controller, later $scope.shows will be defined with data from an external API. (you can also use rails routes and respond_to :json if you use Rails Models)

HTML:

<div ng-controller="ShowsCtrl">

  <ul>
    <li ng-repeat="show in shows">
      {{show.name}}
    </li>
  </ul>

</div>

As you see, you can define one part of your site to use AngularJS – and you can make many separated controllers.

To load real data by ajax call, you need to add $http in your controller function:

function ShowsCtrl($scope, $http) {

  $http.get('/shows.json').success(function(data) {
    $scope.shows = data;
  });

}

 

Add a module

For example, you would like to add localstorage functionality to your angular app. First look for an angular module, before you write one by yourself ;)  –> https://github.com/grevory/angular-local-storage

Include the external JS file in your app/assets/javascripts folder – you can see this line on the top of the file:

var angularLocalStorage = angular.module('LocalStorageModule', []);

Now it’s time to define your own app (‘appname‘) and add this module (‘LocalStorageModule‘). You can add as many modules as you like. In ‘LocalStorageModule‘ a service called ‘localStorageService‘ is defined. To use this service you have to include it in your controller initialization next to $scope and $http.

angular.module('appname', ["LocalStorageModule"]);

var ShowsCtrl = ['$scope', '$http', 'localStorageService', function($scope, $http, localStorageService) {
  localStorageService.add('ids', [1,2]);
}

Last step: update the html-tag and define the app name. Now you can use ‘localStorageService‘ in your controller.

<html ng-app="appname">

Code examples

Below are some code snippets with examples how to use it (in comments above every function).

/**
 * Gets number of seen shows.
 * @example
 *   {{seenCount()}} of {{shows.length}} seen
 * @return {Integer} seen count
 */
$scope.seenCount = function() {
  var count = 0;
  angular.forEach($scope.shows, function(show) {
    count += show.seen ? 1 : 0;
  });
  return count;
};

/**
 * Gets called everytime searchId is changed ($watch).
 * If the user chooses a search result the searchId is set and
 * the function adds this show if not null.
 */
$scope.searchId = null;
$scope.$watch('searchId', function() {
  if( $scope.searchId !== null ) {
    $scope.addShow($scope.searchId);
  }
});

/**
 * Adds show to $scope.shows if not already in array.
 * @param {Integer} id show
 */
$scope.addShow = function(id) {
  var show = $scope.loadShow(id);
  if($.inArray(show, $scope.shows) !== -1) { return; }

  $scope.shows.push(show);
};

/**
 * Toggles seen of a show
 * @example
 *   <li ng-click="toggleSeen(show)"></li>
 * @param  {Object} show
 */
$scope.toggleSeen = function(show) {
  show.seen = show.seen ? false : true;
};

/**
 * Removes all special chars, all except numbers, letters and spaces.
 * "Shameless (US)" => "Shameless US"
 * @example
 *   <a href="https://www.google.com/search?q={{parseName(show.name)}}">
 * @param  {String} name tvshow
 * @return {String}      name without special chars
 */
$scope.parseName = function(name) {
  return name.replace(/[^ a-zA-Z0-9]/g,'');
};

Deployment

There can be a minification problem if you use Rails with AngularJS (the Rails Asset Pipeline minifies all asset files). I got an error when deploying on heroku:

Uncaught Error: Unknown provider: e

before I did this: (not wrong, but leads to an error!)

app.controller("ShowsCtrl", function($scope, $http) { }

According to AngularJS tutorial (http://docs.angularjs.org/tutorial/step_05) you can change this line to the following to prevent minification issues:

var ShowsCtrl = ['$scope', '$http', function($scope, $http) { }

 

I hope I’ve helped some of you to get started with AngularJS and Rails.

Happy coding!

 

]]> http://bettysteger.com/single-page-application-with-rails-3-and-angularjs/feed/ 5 Ember Handlebars templates (Rails-like partials) http://bettysteger.com/ember-handlebars-templates-rails-like-partials/ http://bettysteger.com/ember-handlebars-templates-rails-like-partials/#comments Mon, 24 Sep 2012 11:55:54 +0000 admin http://bettysteger.com/?p=126 I was looking for Handlebar partials (or templates that i could embed) that i can render like partials in Rails:

render :partial => "partial_name"

You can either register a partial for a small inline code snippet:

/* partials.js */
Handlebars.registerPartial("time", 
  '<time datetime="{{created_at}}">{{created_at}}</time>'
);
/* file.handlebars */
some text created at: {{> time}}

or the more convenient way: create a new template file (eg. time.handlebars) and include it with Ember.Handlebars helper “template”, like so:

/* time.handlebars */
<time datetime="{{created_at}}">{{created_at}}</time>

/* file.handlebars */
some text created at: {{template "path/to/file/time"}}

That’s it, pay attention to the right path otherwise Ember will not find the template (just see the console for the error message)!

 

]]> http://bettysteger.com/ember-handlebars-templates-rails-like-partials/feed/ 0 Rails Development with Facebook Canvas http://bettysteger.com/rails-development-with-facebook-canvas/ http://bettysteger.com/rails-development-with-facebook-canvas/#comments Sat, 05 May 2012 17:30:12 +0000 admin http://bettysteger.com/?p=110 I was trying to make an existing app run as a Facebook App!

The following instructions/solutions will help you to access your http://localhost:3000/ through Facebook. In addition I would like to get the Facebook user with the fb_graph gem and save it in my database.

First of all you have to go to https://developers.facebook.com/apps/ to create a new Facebook test app.

The only important setting for now is this one:

I have also enabled the sandbox mode in the advanced settings, so that only I can access the Facebook app.

 

My app is really small so I’ve decided to only make an before_filter if the user uses Facebook to access my app:

class HomeController < ApplicationController
  before_filter :facebook_authorize

  private

  def facebook_authorize
    return unless params[:signed_request]
    @auth = FbGraph::Auth.new FACEBOOK[:key], FACEBOOK[:secret]
    @auth = @auth.from_signed_request(params[:signed_request])
    if @auth.authorized?
      f = Facebook.find_or_initialize_by_identifier(@auth.user.identifier.try(:to_s))
      f.access_token = @auth.user.access_token.access_token
      f.save!
      session[:current_user] = f.id
    else
      render :authorize
    end
  end
end

My Facebook Model only has two attributes: identifier and access_token.

If there is no params[:signed_request] nothing will happen because it is not a Facebook Canvas. Otherwise an unauthorized user (every user has to give explicit permission to use the app) have to get redirect to authorize the app:

The authorize.html.erb looks like this:

<script>
  top.location.href = '<%= @auth.authorize_uri("https://apps.facebook.com/YOUR_APP_NAME/").html_safe %>';
</script>

API Error Code: 191

API Error Description: The specified URL is not owned by the application
Error Message: Invalid redirect_uri: Given URL is not allowed by the Application configuration.

I got this error when redirecting to the authorize url. The problem was my canvas url! I’ve used this:

@auth.authorize_uri("https://apps.facebook.com/12345/").html_safe

This does not work with the App ID, you have to specify an App Namespace in the basic settings – then the error will disappear, like so (App Namespace is “app_localhost”):

@auth.authorize_uri("https://apps.facebook.com/app_localhost/").html_safe

 

]]> http://bettysteger.com/rails-development-with-facebook-canvas/feed/ 1 Upgrade to Rails 3.1 and deployment http://bettysteger.com/upgrade-to-rails-3-1-and-deployment/ http://bettysteger.com/upgrade-to-rails-3-1-and-deployment/#comments Mon, 05 Mar 2012 18:49:02 +0000 admin http://bettysteger.com/?p=97 Firstly i would recommend to read the RailsCast about Upgrading to Rails 3.1.

When you’ve done that, you can also update some other gems in your Gemfile. There came up to some issues that the railscast does not cover, so have a look at these simple solutions:

Embed images via Javascript

in my application.js I’ve added one image hardcoded with html:

<a href="#"><img src="images/delete.png" alt="delete" title="delete" /></a>

This won’t work as our application’s images (as described in the railscast) – so I’ve simply created a css class where I embed that image. The helper method for the right image path in CSS is image-url:

application.js:

<a title="delete" href="#">&nbsp;</a>

screen.sass:

.delete
  background: transparent image-url("delete.png") no-repeat left center
  display: block
  height: 10px
  width: 10px
  text-decoration: none
  display: inline-block

Deployment with Capistrano

I’ve updated capistrano to the newest version (2.11.2). Capistrano (v2.8.0 and above) includes a recipe to handle this in deployment. The only thing you need to add in your Capfile is the following line:

load 'deploy/assets'

Further reading: http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

Could not find a JavaScript runtime

During the deploying the following error occured: “Could not find a Javascript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)”

So I added the therubyracer gem to my Gemfile – and it worked!

gem 'therubyracer', :platforms => :ruby

Individual CSS files

I am working with a responsive webdesign grid (1140px grid). Therefore I want to have 3 different compiled CSS files: screen.css, mobile.css and one CSS for IE specific adjustments. If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in your production.rb:

# If you have individual stylesheets and JavaScript files to include
# config.assets.precompile += %w( *.css *.js ) # for all
config.assets.precompile += %w( screen.css mobile.css ie.css )

Right Permissions on Server

I’ve successfully deployed my upgraded app, but I was getting a Permission denied error on all assets files. That’s because my Apache2 user on my server doesn’t have the permissions to read these files, only my deploy user has had these permissions.

To see which user runs my Apache2 process I’ve done the following:

ps aux | grep apache
www-data  9907  0.1  4.7 251652 49728 /usr/sbin/apache2 -k start

so i’ve add this user to the group that have the right permissions:

usermod -G group www-data
/etc/init.d/apache2 restart

Allow Symlink on Server

A symlink from current/public/assets to shared/assets is automatically created. So you have to allow that in your VHost file:

<Directory /var/www/railsapp/current/public>
  AllowOverride all
  Options Indexes -MultiViews FollowSymLinks
</Directory>

 

 

If you successfully upgraded to Rails 3.1 you definitely have no problem to upgrade to Rails 3.2!

]]> http://bettysteger.com/upgrade-to-rails-3-1-and-deployment/feed/ 1 Appartementservice Bruno Steger http://bettysteger.com/appartementservice-bruno-steger/ http://bettysteger.com/appartementservice-bruno-steger/#comments Mon, 05 Mar 2012 14:45:58 +0000 admin http://bettysteger.com/?p=87 Ein WordPress-Projekt über das Appartementservice Bruno Steger im Salzburger Land.

Das Appartementservice besitzt Appartements in

•  Saalbach/Hinterglemm
•  Kaprun
•  Hintermoos bei Maria Alm
•  St. Martin bei Lofer
•  Hochkrimml

Eine Herausforderung war die Mehrsprachigkeit, denn die Seite verfügt über 3 Sprachen: Deutsch, Englisch und Ungarisch. Auch ein responsive Webdesign ist eingebaut um die Seite bei einer mobile Ansicht am Smartphone nicht zu verunstalten!

Jan 2012 | Appartementservice Bruno Steger

 

 

]]> http://bettysteger.com/appartementservice-bruno-steger/feed/ 0 Showmaniac http://bettysteger.com/showmaniac/ http://bettysteger.com/showmaniac/#comments Mon, 19 Dec 2011 23:08:46 +0000 admin http://46.163.119.83/bettysteger/?p=50 Showmaniac ist ein Projekt, das mir persönlich am Herzen liegt! Mit dieser App kann man ganz einfach seine liebsten US-Serien verfolgen. Ohne Registierung oder Anmeldung ist es möglich seine Lieblingsserien auszuwählen und kann somit sofort sehen, wann die TV Show ausgestrahlt wird. Ein ‘watch online’ und Download Link wird noch dazu bereitgestellt.

Realisiert wurde das ganze mithilfe eines neuen HTML5 Features: LocalStorage. Die ausgewählten Serien werden gespeichert und bleiben bestehen nachdem der Browser geschlossen wird.

Dec 2011 | Showmaniac

 

Seit Mai 2012 gibt es nun auch eine Facebook App, zu erreichen unter:
https://apps.facebook.com/showmaniac_org/

]]> http://bettysteger.com/showmaniac/feed/ 0 Wobistn? http://bettysteger.com/wobistn/ http://bettysteger.com/wobistn/#comments Mon, 19 Dec 2011 22:52:04 +0000 admin http://46.163.119.83/bettysteger/?p=43 WOBISTN? ist ein ortsbezogenes soziales Netzwerk, das Aktivitäten von Leuten in der Umgebung auf einer Landkarte anzeigt. Die angesagesten Locations und Orte werden innerhalb eines Kartenausschnitts in Form einer Heatmap dargestellt und eine Suchfunktion ermöglicht ein schnelles und einfaches Auffinden. Zusätzlich können diese Suchergebnisse mit einem Filter nach Geschlecht, Freunden und Kategorien eingeschränkt werden.

BenutzerInnen können Aktivitäten für einen bestimmten Zeitpunkt eintragen und Freunde dazu einladen. Dadurch wissen sie auf einen Blick, welche Location am angesagtesten ist und wo sich deren Freunde befinden. Alternativ zur normalen Registrierung gibt es auch die Möglichkeit sich über Facebook und Twitter anzumelden. Für die einfachere Verwendung unterwegs ist WOBISTN? in Kürze auch im App-Store für das iPhone erhältlich.

Ende Mai 2011 wurde nach Monaten harter und genialer Arbeit unser Bachelorprojekt so weit fertig gestellt!

May 2011 | Wobistn?

 

 

]]> http://bettysteger.com/wobistn/feed/ 0 Martin Lorenz Blog http://bettysteger.com/martin-lorenz-blog/ http://bettysteger.com/martin-lorenz-blog/#comments Mon, 19 Dec 2011 22:40:31 +0000 admin http://46.163.119.83/bettysteger/?p=40 Ein Portfolio und Blog von dem ehemaligen MultiMediaArt-Student Martin Lorenz. Besonderen Wert wurde hierbei auf das Front-End gelegt. Während der Projektarbeit habe ich extrem viel mit CSS und der Anpassung am WordPress Theme gearbeitet. Im Hintergrund macht es das CMS möglich neue Arbeiten mit Fotos, Videos usw oder neue Blogeinträge zu schreiben.

Feb 2011 | Martin Lorenz Blog

 

]]> http://bettysteger.com/martin-lorenz-blog/feed/ 0 GrandCentralCP http://bettysteger.com/grandcentralcp/ http://bettysteger.com/grandcentralcp/#comments Mon, 19 Dec 2011 22:26:36 +0000 admin http://46.163.119.83/bettysteger/?p=34 GrandCentralCP ist ein webbasiertes Webserver Admin Control Panel basierend auf Ruby on Rails. Existierende kommerzielle und freie Lösungen sind oft sehr komplex und versuchen alle Aspekte der Serverkonfiguration abzudecken. GrandCentralCP hingegen wird sich nur den Grundfunktionen widmen, die die meisten Webdesigner/-Entwickler brauchen, um ihren Kunden einen Webspace auf dem eigenen Root oder VServer anzubieten.

GCCP ist für Serveradministratoren, die bisher auf den Einsatz von Admin Software verzichtet haben und alles von Hand konfiguriert haben. Selbst wenn GCCP installiert und aktiv ist, soll es problemlos möglich sein alle Aspekte des Systems von Hand zu verwalten.

Die Software soll sich nur auf die Verwaltung von Apache, Passenger, PHP, MySQL und FTP kümmern. Alle weiteren Dienste, wie Mail und DNS werden NICHT unterstützt und müssen von externen Anbietern verwaltet oder manuell eingerichtet werden.
Die meisten bekannten kommerziellen Control Panels verwenden eine Admin->Reseller->Client(Domain) Struktur, die auch von vielen Open Source Produkten kopiert wurde. Bei GCCP soll es zusätzlich die Möglichkeit geben das komplette System in einem Single-User-Modus zu betreiben.

May 2010 | Grand Central CP

]]> http://bettysteger.com/grandcentralcp/feed/ 0 Fellow Network http://bettysteger.com/fellow-network/ http://bettysteger.com/fellow-network/#comments Mon, 19 Dec 2011 22:17:18 +0000 admin http://46.163.119.83/bettysteger/?p=29 Dies ist eine Plattform für Ärzte und mein erstes Drupal Projekt. Es handelt sich dabei um eine geschützte Community – nur vom Administrator bestätigte Benutzer dürfen sich einloggen und sich über News, Events, Meetings oder Jobangebote austauschen.

Aug 2010 | Fellow Network (protected Community)

 

]]> http://bettysteger.com/fellow-network/feed/ 0