Incorpora la pagina Web codificata in Ruby on Rails in un altro sito web?

Question

Vorrei creare la mia pagina Web che ho codificato con Ruby on Rails come backend embeddable in modo che gli utenti siano in grado di condividerli facilmente copiando e incollando del codice di incorporamento. (molto simile al codice di incorporamento di YouTube, ma per una pagina Web) Qualcuno potrebbe indicarmi un tutorial o una guida generale su come procedere? Sto pianificando di incorporare la mia pagina web in Joomla CMS.

Molte grazie.

Molo.

Answer 1

Supponiamo di voler creare un widget per un app store per dispositivi mobili. Il widget consentirebbe di incorporare le informazioni di una determinata app in qualsiasi pagina web.

Se usiamo il tag script, il codice incorporabile potrebbe apparire come questo:

<script src="http://my_appstore.com/apps/1234.js" type="text/javascript"></script> 

Dove 1234 sarebbe l'id della app specifica vorremmo incorporare.

Se usiamo il tag iframe il codice per mettere in altre pagine web potrebbe essere simile:

<iframe src="http://my_appstore.com/apps/1234" width="500" height="200" frameborder="0"></iframe> 

prima cosa che dobbiamo decidere è quale tipo di tag da utilizzare. L'utilizzo e il tag iframe è più semplice ma siamo limitati a utilizzare un iframe. L'utilizzo di un iframe non è una cattiva opzione, ma se lo si distribuisce su pagine Web di terzi non sarà possibile modificarlo successivamente. Invece, è preferibile utilizzare un tag script che inserirà un iframe. Questo tag consente inoltre di passare alla incorporazione del contenuto direttamente nelle pagine se si decide di farlo in seguito.

L'inserimento di un iframe indica che le proporzioni del contenuto devono essere corrette e non possono essere modificate per adattarsi a finestre di dimensioni diverse nella finestra padre. Incorporare direttamente i tuoi contenuti non ha questo problema, ma devi stare molto attento con i CSS e aggiungere stile a tutti i tuoi elementi perché altrimenti erediteranno gli stili di pagina host. Anche incorporare direttamente i tuoi contenuti e quindi effettuare chiamate AJAX probabilmente produrrà problemi di richiesta cross-browser a meno che non usi JSONP.

si deve prima creare una semplice pagina web con Sinatra che useremo per incorporare il nostro Rails Widget:

mkdir host_page 
cd host_page 

Con il vostro editor di testo creare host.rb file all'interno di host_page cartella:

# host.rb 
require 'sinatra' 
get '/' do 
    erb :index 
end 

Crea index.erb e avvia pagina_host:

Ora se visitiamo http://localhost:4567/ non vediamo nulla ma presto ci sarà un widget.

Ora creiamo l'app per i binari che verrà incorporata.Inizia con una nuova cartella per il progetto e fare:

rails new widget 
cd widget/ 
rails g controller apps 
rm app/assets/javascripts/apps.js.coffee 

Aggiungi le rotte necessarie:

# config/routes.rb 
MyApp::Application.routes.draw do 
    resources :apps 
end 

Modifica il controller app:

# app/controllers/apps_controller.rb 
class AppsController < ApplicationController 
    def show 
    @mobile_app = { 
     :title => "Piano Tutorial", 
     :descr => "Learn to play piano with this interactive app", 
     :rating => "*****" 
    } 
    end 
end 

In tale controller siamo sempre la restituzione del stessa app. In una situazione reale avremmo un modello e il controller che recupererebbe i dati dell'app appropriati dall'id del modello trovato in params.

Creare la vista javascript e avviare il server:

echo 'document.write("<h3><%=@mobile_app[:title]%></h3><p><%=@mobile_app[:descr]%></p><p><em><%=@mobile_app[:rating]%></em><p>");' > app/views/apps/show.js.erb 
rails server 

E questo è tutto. Vai a http://localhost:4567/ e guarda il tuo widget.

Nel caso in cui si desidera utilizzare un iframe, sostituire il contenuto del file show.js.erb con questo:

document.write("<%=escape_javascript(content_tag(:iframe, '', :src => app_url(params['id'])).html_safe)%>"); 

Qui stiamo utilizzando un content_tag ma potrebbe anche essere fatto in un modo simile al precedente uno semplicemente usando il tag come in precedenza.

Ovviamente se usiamo un iframe, stiamo facendo due chiamate, una per rendere l'iframe e l'altra per caricare il contenuto di quell'iframe. Per questa seconda chiamata ci manca ancora una vista html. Basta creare la vista come quella:

# app/views/apps/show.html.erb 
<h3><%=@mobile_app[:title]%></h3> 
<p><%=@mobile_app[:descr]%></p> 
<p><em><%=@mobile_app[:rating]%></em><p> 

Ora si può puntare di nuovo per http://localhost:4567/ e vedere il tuo widget all'interno di un iframe .