एक अन्य वेबसाइट पर रूबी ऑन रेल में कोडित वेब पेज एम्बेड करें?

Question

मैं अपना वेब पेज बनाना चाहता हूं जिसे मैंने रूबी ऑन रेल के साथ कोडेंड के रूप में कोड किया है ताकि उपयोगकर्ता आसानी से कुछ एम्बेड कोड कॉपी और पेस्ट करके इसे साझा कर सकें। (यूट्यूब एम्बेड कोड की तरह, लेकिन एक वेबपेज के लिए) क्या कोई मुझे ट्यूटोरियल या सामान्य दिशा में इंगित कर सकता है कि ऐसा करने के लिए कैसे जाना है? मैं जूमला सीएमएस में अपना वेब पेज एम्बेड करने की योजना बना रहा हूं।

बहुत धन्यवाद।

पियर।

Answer 1

मान लें कि आप मोबाइल ऐप स्टोर के लिए विजेट बनाना चाहते हैं। विजेट किसी भी वेब पेज में किसी निश्चित ऐप की जानकारी एम्बेड करने की अनुमति देगा।

अगर हम script टैग का उपयोग, तब एम्बेड कोड ऐसा दिखाई दे सकता:

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

कहाँ 1234 हम एम्बेड करना चाहते हैं विशिष्ट अनुप्रयोग के आईडी होगा।

हम iframe टैग कोड का उपयोग करते हैं अन्य वेब पृष्ठों में डालने के लिए दिखाई देगा:

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

पहली बात हम यह फैसला करना है टैग की तरह उपयोग करने के लिए है। उपयोग और iframe टैग अधिक सीधे आगे है लेकिन हम एक आईफ्रेम का उपयोग करने के लिए सीमित हैं। Iframe का उपयोग करना एक बुरा विकल्प नहीं है, लेकिन यदि आप इसे तृतीय पक्ष वेब पृष्ठों में वितरित करते हैं तो आप उसे बाद में बदलने में सक्षम नहीं होंगे। इसके बजाए, script टैग का उपयोग करना बेहतर है जो एक आईफ्रेम डालेगा। यह टैग आपको बाद में ऐसा करने का विकल्प चुनने पर सीधे आपकी सामग्री को पृष्ठों में एम्बेड करने की अनुमति देगा।

आईफ्रेम डालने का अर्थ है कि आपकी सामग्री के अनुपात को ठीक करना होगा और पैरेंट विंडो में विभिन्न विंडो आकारों के अनुकूलन में बदलाव नहीं किया जा सकता है। आपकी सामग्री को एम्बेड करने में सीधे इस समस्या नहीं है लेकिन आपको सीएसएस के साथ बहुत सावधान रहना होगा और अपने सभी तत्वों में स्टाइल जोड़ना होगा क्योंकि अन्यथा वे होस्ट पेज शैलियों का वारिस करेंगे। अपनी सामग्री को सीधे एम्बेड करना और फिर AJAX कॉल करना संभवतः क्रॉस-ब्राउज़र अनुरोध समस्याओं का उत्पादन करेगा जब तक आप JSONP का उपयोग नहीं करते।

चलो पहले सिनात्रा कि हम एम्बेड करने के लिए प्रयोग करेंगे के साथ एक सरल वेब पेज बनाने के हमारे रेल विजेट:

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

:

mkdir host_page 
cd host_page 

अपने पाठ संपादक के साथ

host.rb फ़ाइल host_page अंदर फ़ोल्डर बनाने

index.erb बनाएं और होस्ट_पृष्ठ लॉन्च करें:

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

अब अगर हम http://localhost:4567/ पर जाते हैं तो हम कुछ भी नहीं देखते हैं लेकिन जल्द ही वहां एक विजेट होगा।

आइए अब रेल ऐप बनाएं जो एम्बेडेड होंगे।अपनी परियोजना के लिए एक नया फ़ोल्डर के साथ शुरू और कार्य करें:

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

जरूरत रूट जोड़ें:

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

संपादित करें आपकी ऐप्लिकेशन नियंत्रक:

# 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 

कि नियंत्रक हम हमेशा लौट रहे हैं में एक ही ऐप वास्तविक स्थिति में हमारे पास एक मॉडल और नियंत्रक होगा जो पैराम में मिले मॉडल आईडी से उपयुक्त ऐप डेटा पुनर्प्राप्त करेगा।

अपने जावास्क्रिप्ट दृश्य बनाएँ और सर्वर प्रारंभ:

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 

और बस हो गया। http://localhost:4567/ पर जाएं और अपना विजेट देखें।

मामले में आप एक आइफ्रेम उपयोग करने के लिए, इस के साथ अपने show.js.erb फ़ाइल की सामग्री को बदलने हैं:

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

यहाँ हम एक content_tag लेकिन यह भी एक तरह से समान पिछले में किया जा सकता है का उपयोग कर रहे पहले से ही टैग का उपयोग करके।

जाहिर है अगर हम एक आईफ्रेम का उपयोग करते हैं, तो हम दो कॉल कर रहे हैं, एक आईफ्रेम प्रस्तुत करने के लिए और दूसरा उस आईफ्रेम की सामग्री को लोड करने के लिए। इस दूसरे कॉल के लिए हम अभी भी एक HTML व्यू गायब हैं।

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

अब आप http://localhost:4567/ के लिए फिर से बात और एक आइफ्रेम अंदर अपने विजेट देख सकते हैं: बस ऐसे ही दृश्य बनाना होगा।