2012-07-29 8 views
6

Chciałbym zrobić moją stronę internetową, którą zakodowałem za pomocą Ruby on Rails jako backendu wbudowanego, dzięki czemu użytkownicy będą mogli łatwo udostępniać go przez kopiowanie i wklejanie kodu do osadzenia. (podobnie jak kod do umieszczenia na stronie YouTube, ale na stronie internetowej) Czy ktoś może wskazać mi samouczek lub ogólny kierunek, jak to zrobić? Mam zamiar umieścić moją stronę w Joomla CMS.Umieścić stronę internetową zakodowaną w Ruby on Rails w innej witrynie internetowej?

Wielkie dzięki.

Molo.

Odpowiedz

16

Załóżmy, że chcesz utworzyć widżet dla sklepu z aplikacjami mobilnymi. Widżet pozwoliłby na umieszczenie informacji o konkretnej aplikacji na dowolnej stronie internetowej.

Jeśli użyjemy znacznika script kod do osadzenia mógłby wyglądać następująco:

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

Gdzie 1234 byłby id specyficznej aplikacji chcielibyśmy umieścić.

Jeśli użyjemy znacznika iframe kod, aby umieścić na innych stronach internetowych, może wyglądać tak:

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

Pierwszą rzeczą, musimy zdecydować, jaki rodzaj tagu użyć. Używanie tagu i tagu iframe jest prostsze, ale ograniczamy się do używania elementu iframe. Używanie elementu iframe nie jest złą opcją, ale jeśli rozpowszechnisz to na stronach internetowych stron trzecich, nie będziesz w stanie zmienić tego później. Zamiast tego lepiej jest użyć znacznika script, który wstawi element iframe. Tag ten pozwala również na umieszczanie treści bezpośrednio na stronach, jeśli zdecydujesz się to zrobić później.

Wkładanie iframe oznacza, że ​​proporcje treści muszą być stałe i nie można zmienić, aby dostosować się do różnych rozmiarów okien w oknie nadrzędnym. Osadzanie treści bezpośrednio nie ma tego problemu, ale musisz bardzo uważać na CSS i dodawać stylu do wszystkich elementów, ponieważ w przeciwnym razie odziedziczą style strony hosta. Również osadzanie treści bezpośrednio, a następnie wykonywanie wywołań AJAX prawdopodobnie spowoduje problemy z różnymi przeglądarkami, chyba że użyjesz JSONP.

Niech najpierw stworzyć prostą stronę internetową z Sinatra że będziemy używać, aby umieścić nasz Szyny Widget:

mkdir host_page 
cd host_page 

W edytorze tekstu utwórz host.rb plik wewnątrz host_page folderu:

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

Utwórz index.erb i uruchom host_page:

mkdir views 
cat '<script src="http://localhost:3000/apps/1234.js" type="text/javascript"></script>' > views/index.erb 
ruby host.rb 

Teraz, jeśli odwiedzimy http://localhost:4567/, nic nie zobaczymy, ale wkrótce pojawi się widget.

Stwórzmy teraz aplikację szyny, która będzie osadzona.Start z nowym folderze swojego projektu i zrobić:

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

Dodaj potrzebnych tras:

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

Edycja kontroler aplikacji:

# 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 

W tym kontrolerze jesteśmy zawsze zwracając ta sama aplikacja. W rzeczywistej sytuacji dysponowalibyśmy modelem i kontrolerem, który pobrałby odpowiednie dane aplikacji z identyfikatora modelu znalezionego w parametrach.

Tworzenie widoku JavaScript i uruchomić serwer:

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

I to wszystko. Przejdź do http://localhost:4567/ i zobacz swój widget.

W przypadku, gdy chcesz użyć iframe, zastąpić zawartość pliku show.js.erb z tym:

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

Tutaj używamy content_tag ale może to być również wykonane w sposób podobny poprzedni jeden po prostu używając znacznika jak poprzednio.

Oczywiście jeśli używamy iframe, robimy dwa telefony, jeden do renderowania iframe, a drugi, aby załadować zawartość tego iframe. W przypadku tego drugiego połączenia wciąż brakuje nam widoku HTML. Wystarczy utworzyć widok tak:

# app/views/apps/show.html.erb 
<h3><%[email protected]_app[:title]%></h3> 
<p><%[email protected]_app[:descr]%></p> 
<p><em><%[email protected]_app[:rating]%></em><p> 

Teraz można wskazać ponownie http://localhost:4567/ i zobaczyć widżet wewnątrz iframe.

+0

Będziesz musiał dowiedzieć się jak obsługiwać wywołania ajaxowe w domenie w tym przykładzie. Możliwe użycie klejnotu '' 'rack-cors''' – absessive