Share
Amazon S3 è un ottimo modo per archiviare i file, ma imparare a integrarli nel tuo sito web può essere una sfida. In questo articolo imparerai come integrare Amazon S3 e Ruby on Rails attraverso la costruzione di una semplice applicazione di streaming musicale.
Amazon S3 è "storage per Internet"
Come dice il sito web di Amazon, Amazon S3 è "storage per Internet". Non solo è economico, ma anche veloce e affidabile. È un ottimo modo per pubblicare contenuti sul tuo sito Web, incluse immagini, video o praticamente tutto ciò che desideri. Amazon S3 non funziona esattamente come lo spazio di archiviazione sul tuo computer, quindi ecco alcune cose che dovresti sapere:
Prima di continuare con questo tutorial, ci sono alcune cose chiave che dovrebbero essere in atto:
Il prodotto finale di questo tutorial è una semplice applicazione per lo streaming e il download di musica. In questa applicazione, l'utente sarà in grado di fare quanto segue:
Una volta completata questa applicazione, avrai appreso tutti i principali argomenti che devi sapere sull'utilizzo di Amazon S3 nell'applicazione Ruby on Rails.
La gemma aws-s3 ti consente di interagire con il servizio Amazon S3 nella tua applicazione.
La prima cosa da fare è installare il AWS-s3 gemma rubino. La gemma ti consente di interagire con il servizio Amazon S3 nella tua applicazione. Per fare ciò, se sei su Windows, esegui semplicemente il comando:
gem installa aws-s3
Dopo averlo installato, genera la nostra applicazione Rails con il seguente comando:
rota nuovo mp3app
Il passaggio finale per avviare la tua applicazione è entrare nella directory mp3app / public ed eliminare il file "index.html". Una volta completato, l'applicazione è pronta per iniziare a interagire con Amazon S3!
L'ID della chiave di accesso e la chiave di accesso segreta consentono di connettersi ad Amazon S3.
Per poter interagire con Amazon S3, dobbiamo dire alla nostra applicazione come accedere ad Amazon S3. È qui che l'ID della chiave di accesso e la chiave di accesso segreto sono utili. L'ID della chiave di accesso e la chiave di accesso segreta consentono di connettersi ad Amazon S3. Ma prima, dobbiamo dire alla nostra applicazione che stiamo usando il AWS-s3 gemma. Lo facciamo nel Gemfile:
gem 'aws-s3',: require => 'aws / s3'
Per consentire effettivamente alla nostra applicazione di usare quella gemma, dovrai digitare comando bundle install. Ora che funziona, dobbiamo dire alla nostra applicazione come accedere ad Amazon S3. Lo facciamo anche nel config / application.rb file, su una nuova riga all'interno della classe Application:
AWS :: S3 :: Base.establish_connection! (: Access_key_id => 'Inserisci qui l'ID della chiave di accesso',: secret_access_key => 'Inserisci la chiave di accesso segreta qui')
Questo codice dice alla nostra applicazione di creare una connessione ad Amazon S3 non appena viene avviata l'applicazione (il file application.rb caricare i file all'avvio dell'applicazione). Un'ultima cosa che deve essere aggiunta al file dell'applicazione è una costante con il valore del bucket che useremo. La ragione per fare questo è che se dovessimo mai cambiare il bucket che stiamo utilizzando, è necessario aggiornarlo solo in questa posizione. Dovrebbe assomigliare a qualcosa di simile a questo:
SECCHIO = "s3tutorialmusic"
Per questo tutorial, ho deciso di nominare il bucket s3tutorialmusic, ma dovresti sostituirlo con qualsiasi bucket che possiedi sul tuo account. Alla fine, il tuo file dovrebbe apparire in questo modo (ma con le tue informazioni di accesso):
Accentsconagua
richiede File.expand_path ('? / boot', __FILE__) richiede 'rails / all' Bundler.require (: default, Rails.env) se definito? (Bundler) modulo Mp3app class Applicazione < Rails::Application config.encoding = "utf-8" config.filter_parameters += [:password] AWS::S3::Base.establish_connection!( :access_key_id => 'Metti qui l'ID della chiave di accesso',: secret_access_key => 'Inserisci qui la tua chiave di accesso secreta') BUCKET = 's3tutorialmusic' end end Ora possiamo finalmente iniziare a lavorare per far sì che la nostra applicazione mostri effettivamente qualcosa nel browser. Per iniziare, generiamo il controller e le visualizzazioni di cui avremo bisogno. In totale, genereremo tre azioni per il nostro controller (che chiameremo canzoni): indice, upload e Elimina.
Alla fine, l'unica vista di cui avremo bisogno per questa applicazione è la vista indice, poiché agirà come un pannello di controllo centrale per ogni azione che è possibile eseguire. Ora, combineremo tutto ciò in una semplice istruzione da riga di comando:
rails g controller Songs index upload delete
Al termine dell'esecuzione, andare avanti ed eliminare le visualizzazioni generate per caricare e Elimina, perché non saranno usati Passiamo alla scrittura del codice per l'azione indice!
Nell'azione indice, il prodotto finito consentirà agli utenti di caricare nuova musica ed eliminare la musica esistente. Non c'è nulla che deve essere fatto nel file del controller di questa azione per caricare nuova musica, ma abbiamo bisogno di un elenco di brani attuali per consentire agli utenti di eliminarli.
Innanzitutto, dobbiamo ottenere un oggetto che faccia riferimento al nostro bucket musicale (ricordate che il nome di quel bucket è memorizzato nella costante BUCKET). Ecco come lo facciamo:
AWS :: :: S3 Bucket.find (benna)
Per permetterci di utilizzare i metodi disponibili in AWS-s3 gem, abbiamo bisogno di dire all'interprete Ruby che vogliamo cercare le funzioni nel AWS :: S3 namespace, motivo per cui fa parte della chiamata al metodo. Il Secchio la classe contiene tutti i metodi relativi alla manipolazione dei secchi. Finalmente, il trova metodo accetta un parametro, il nome del bucket e restituisce un oggetto che fa riferimento a quel bucket. Ora che abbiamo il secchio, prendiamo tutti gli oggetti facendo questo:
AWS :: :: S3 Bucket.find (benna) .objects
Il oggetti metodo restituisce un hash con i nomi di tutti gli oggetti in quel bucket. Infine, abbiamo bisogno di memorizzare il risultato di tale chiamata di metodo in una variabile di istanza in modo che possiamo usarlo nella nostra vista. Alla fine, questo è l'aspetto dell'indice:
indice def @songs = AWS :: S3 :: Bucket.find (BUCKET) .objects end
Ora dobbiamo fare in modo che l'utente possa caricare ed eliminare la musica. Iniziamo con le versioni successive e creiamo un elenco non ordinato di tutti gli oggetti attualmente caricati, con un link per eliminare quell'oggetto. Possiamo farlo in questo modo:
@canzoni variabile usando ciascun metodo. if (params [: song]) AWS :: S3 :: S3Object.find (params [: song], BUCKET) .delete redirect_to root_path else render: text => "Non è stato trovato alcun brano da eliminare!" fine
Ora, dobbiamo effettivamente consentire all'utente di caricare la musica, perché quello era uno dei pezzi fondamentali di funzionalità per questa applicazione. Innanzitutto, creiamo un semplice modulo che consente all'utente di scegliere un file da caricare. Possiamo farlo in questo modo:
Carica un nuovo MP3:
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %>
Creiamo un modulo che viene inviato all'azione di caricamento, che è l'azione che esegue effettivamente il caricamento su Amazon S3. Utilizziamo post e multipart perché stiamo inviando file. Oltre a questo, questo modulo è molto semplice e facile da capire, quindi ora possiamo passare all'implementazione della parte controller di questa azione.
Dobbiamo prendere il file inviato e creare un nuovo oggetto S3 per esso, che verrà eseguito nell'azione di caricamento. Possiamo farlo con questa linea di codice:
AWS :: S3 :: S3Object.store (sanitize_filename (params [: mp3file] .original_filename), params [: mp3file] .read, BUCKET,: access =>: public_read)
Ci sono molte cose in questa linea di codice, quindi spiegherò ciascuna parte individualmente.
Come al solito, accediamo al AWS :: :: S3 S3Object per interagire con gli oggetti su Amazon S3.
Noi usiamo il memorizzare comando per caricare effettivamente i file su S3. Il primo parametro specifica cosa chiamare il file. Noi usiamo il original_filename parametro del file caricato per questo in modo che il nome rimanga lo stesso. Per quanto riguarda la sanitize_filename metodo, che sarà spiegato nel prossimo paragrafo. Il secondo parametro sono i dati di file effettivi, ottenuti dal richiamo del metodo di lettura sul file caricato. Il terzo parametro specifica il bucket da utilizzare e il quarto determina chi può accedere al file. Perché vogliamo che tutti siano in grado di leggere il file (che include il download), specifichiamo l'accesso come : public_read.
Il sanitize_filename metodo è un metodo che è stato utilizzato da molte persone e plugin, come ad esempio attachment_fu, ed è usato per risolvere un problema con Internet Explorer (scioccante, no?). Invece di darci il nome del file quando chiamiamo il metodo original_filename, IE restituisce l'intero percorso del file; ad esempio, se è stato chiamato il file che volevamo caricare mysong.mp3, ci darebbe invece C: \ rotaie \ mp3app \ mysong.mp3 quando chiamiamo original_filename. Possiamo risolvere questo problema aggiungendo il seguente codice alla fine del controller:
private def sanitize_filename (file_name) just_filename = File.basename (nome_file) just_filename.sub (/ [^ \ w \. \ -] /, '_') end
Il nostro ultimo passaggio nel completare l'azione di caricamento è aggiungere alcuni controlli e percorsi degli errori. Il modo in cui esegui il controllo degli errori in ruby è con a inizio? salvare? fine dichiarazione. Molte cose potrebbero andare storte quando si carica un file, quindi il controllo degli errori impedisce all'utente di visualizzare un messaggio di errore che Rails genererebbe automaticamente. Ecco la versione modificata dell'azione di caricamento:
def upload begin AWS :: S3 :: S3Object.store (sanitize_filename (params [: mp3file] .original_filename), params [: mp3file] .read, BUCKET,: access =>: public_read) redirect_to root_path rescue render: text => " Impossibile completare il caricamento "end end
Se si verifica un errore, eseguiamo semplicemente il rendering di un testo che lo dice all'utente. Anche se l'utente vede ancora un messaggio di errore, è meglio di un enorme elenco di codici che verrebbe visualizzato in un messaggio di errore generato da Rails.
Potresti aver notato che in tutto il codice che abbiamo scritto finora, ci sono state molte volte in cui qualcosa di simile upload_path è stato utilizzato al posto di specificare un controller e un'azione. Possiamo farlo a causa di un file chiamato routes.rb. Questo indica alla nostra applicazione quali URL sono accessibili nella nostra applicazione. Diamo anche dei nomi a determinati percorsi per facilitare l'aggiornamento del nostro codice. Ecco come puoi dare un nome ai percorsi che il nostro Mp3app userà:
match "songs / upload",: as => "upload" match "songs / delete",: as => "delete" root: to => "songs # index"
Il metodo di corrispondenza specifica un percorso, come canzoni / upload, e dargli un nome, upload_path. Questo nome è specificato usando : as => "nome" come secondo parametro del metodo di corrispondenza. Infine, il metodo root specifica quale azione sarà l'azione root, che agisce in modo simile a index.html in un sito Web basato su HTML statico.
Ora, abbiamo finito di implementare la funzionalità dell'azione di caricamento. Ecco il codice finale per songs_controller.rb file finora:
class SongsController < ApplicationController def index @songs = AWS::S3::Bucket.find(BUCKET).objects end def upload begin AWS::S3::S3Object.store(sanitize_filename(params[:mp3file].original_filename), params[:mp3file].read, BUCKET, :access => : public_read) redirect_to root_path salvataggio render: text => "Impossibile completare il caricamento" end end def delete if (params [: song]) AWS :: S3 :: S3Object.find (params [: song], BUCKET). cancella redirect_to root_path else render: text => "Non è stato trovato alcun brano da eliminare!" end end private def sanitize_filename (file_name) just_filename = File.basename (nome_file) just_filename.sub (/ [^ \ w \. \ -] /, '_') end end
Ed ecco come appare l'applicazione fino ad ora quando viene visualizzata nel browser.
Finora, la nostra applicazione ha fatto molta strada. L'utente può ora caricare musica, visualizzare un elenco di musica attualmente caricata ed eliminare qualsiasi musica esistente. Ora, abbiamo un ultimo pezzo di funzionalità di base da implementare. Questo significa che l'utente scarica effettivamente questa musica. Come specificato all'inizio di questo tutorial, l'utente può farlo in tre modi:
In questo momento, l'elenco di musica viene semplicemente visualizzato utilizzando un elenco non ordinato. Tuttavia, poiché stiamo per aggiungere altri tre collegamenti alla fine di ogni riga (uno per ogni metodo di download), è più possibile utilizzare una tabella per organizzare l'elenco. Modifichiamo la vista indice per riflettere questa modifica:
Scarica ed elimina i file MP3 esistenti
| <%= song.key %> | <%= link_to "Delete", "songs/delete/?song=" + song.key, :confirm => 'Sei sicuro di voler eliminare' + song.key + '?' %> |
Ora siamo pronti ad aggiungere il codice per consentire all'utente di scaricare musica. Iniziamo con il download via HTTP, perché è il più semplice da implementare.
Per scaricare tramite HTTP, abbiamo solo bisogno di aggiungere un nuovo
file application_helper.rb. Ecco come ottieni l'URL: def download_url_for (song_key) AWS :: S3 :: S3Object.url_for (song_key, BUCKET,: authenticated => false) end
Questo metodo accetta solo un parametro, che è il nome della canzone. Per aiutarci a ricordare che il nome della canzone è accessibile da song.key, chiamiamo il parametro song_key. Come al solito, accediamo al AWS :: :: S3 S3Object classe per interagire con oggetti Amazon S3. Il url_for il metodo richiede due parametri, mentre il terzo è facoltativo.
: authenticated => false, l'URL scadrà tra 5 minuti (per impostazione predefinita).<%= link_to "Download", download_url_for(song.key) %>
Questo Il download di file da Amazon S3 tramite Bit Torrent è molto simile al download tramite HTTP. In effetti, l'unica differenza tra i due URL di download è che il torrent ha "torrent" alla fine di esso. Pertanto, il nostro metodo helper per generare l'url torrent aggiungerà semplicemente "torrent alla fine dell'URL HTTP". Ecco come lo faresti: Ora, abbiamo solo bisogno di aggiungerne un altro Lo streaming dei brani tramite l'audio HTML5 è un po 'più difficile del semplice download del brano, quindi iniziamo dalla parte facile: il Ecco il codice per generare il link: Ora dobbiamo lavorare sul javascript per aggiungere il tag audio alla pagina quando questo link viene cliccato. Per fare questo, useremo una tecnica simile alla tecnica che Jeffrey Way usa nel suo tutorial, l'HTML 5 Audio Element. Il primo passo è aggiungere alcune cose ai nostri file di visualizzazione. Nel nostro Poi, cambia il primo parametro per il tag di inclusione originale da: defaults a Seguendo il tema HTML5, usiamo un tag di sezione invece di un div per creare la nostra sezione audio. Otteniamo un riferimento alla sezione audio e lo memorizziamo in una variabile, che è considerata una best practice. Successivamente, dobbiamo aggiungere un gestore di eventi click ai nostri collegamenti con la classe html 5. Quando il gestore di eventi si spegne, dobbiamo fare alcune cose: Dato che questo tutorial riguarda Ruby on Rails, e non JavaScript, non entrerò nei dettagli per spiegare come funziona questo codice. Tuttavia, il codice è abbastanza semplice, quindi dovrebbe essere facile per te capire. Una cosa che dovresti notare è che funziona solo nei browser che supportano HTML5 e supporta gli mp3 come sorgenti valide per i tag audio. Per la maggior parte dei browser, l'ultima versione supporterà questo codice HTML 5, ma i browser più vecchi non lo supportano. Abbiamo finalmente completato tutte le funzionalità di base per questa applicazione. L'utente può caricare, scaricare ed eliminare mp3 in vari modi, tra cui audio HTML5, download HTTP e Bit Torrent. Ecco come dovrebbe apparire la vista indice a questo punto: Se non lo hai già fatto, dovresti provare a eseguire questo codice e provarlo tu stesso. Puoi farlo eseguendo il comando: La prima cosa da fare è avvolgere la pagina in un contenitore in modo che possiamo centrarla. Tutto quello che dobbiamo fare è mettere un div con un id di container attorno all'istruzione yield nel file di layout in modo che assomigli a questo: Successivamente, useremo lo stile della gemma Ryan Bates, Ora lavoreremo la vista indice. La prima cosa che dobbiamo fare è dividere la pagina in tre sezioni. Queste sezioni saranno un'intestazione, una sezione principale e una barra laterale. Nella parte superiore della pagina, aggiungiamo un'intestazione semplice: Quindi, dividiamo la pagina in una regione principale e in una regione della barra laterale. La nostra regione principale consisterà nell'elenco delle canzoni, mentre la barra laterale conterrà l'audio HTML5 e il modulo di caricamento. Ecco come modificheremo il codice: Dato che utilizzeremo i float per progettare questa pagina, dobbiamo eliminare i float prima e dopo per assicurarci che il layout non venga incasinato. Ora aggiungiamo il CSS per regolare il layout di quelle sezioni: La barra laterale sarà il 30% della pagina e la sezione principale sarà il 70% della pagina. Inoltre, c'è il CSS per rimuovere la sottolineatura dai collegamenti a meno che il mouse non stia passando sopra il mouse, e vi è anche il padding aggiunto al Speriamo che tu abbia una buona conoscenza di come interagire con Amazon S3 dall'applicazione Ruby on Rails. Con il Per quelli di voi che sono esperti di Ruby on Rails, sono sicuro che potrete trovare un modo per ottimizzare ulteriormente questa applicazione. Inoltre, sarebbe bello condividere le ottimizzazioni che fai nella sezione commenti in modo che i lettori possano ottenere ancora di più da questo tutorial. si inserisce tra il nome della canzone e il link di eliminazione (ma questa è una preferenza personale, quindi puoi avere i link in qualsiasi ordine tu scelga).
Download tramite Bit Torrent
def torrent_url_for (song_key) download_url_for (song_key) + "? torrent" fine
alla nostra tavola:
<%= link_to "Torrent", torrent_url_for(song.key) %>
Streaming con audio HTML5
per questo. Tuttavia, ci saranno alcune differenze dai link che abbiamo aggiunto per HTTP e Bit Torrent.
tag, quindi gli daremo lo stesso URL del download HTTP. Questo servirà anche come ripiego per i browser con javascript disabilitato, perché useremo javascript per aggiungere il tag alla pagina.
<%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5"%> layout / application.html.erb file, dobbiamo includere l'ultima versione di jQuery, perché questa è la libreria javascript che useremo. Ecco il codice da aggiungere prima della prima riga di inclusione di javascript: <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>
application.js, perché è lì che memorizzeremo il nostro codice javascript e gli altri file JavaScript predefiniti non sono necessari. Successivamente, dobbiamo aggiungere una sezione alla nostra vista index.html.erb per inserire il tag audio. Nella parte superiore di questa vista, dobbiamo inserire il seguente codice:
Ascolta un MP3 con audio HTML5
$ (document) .ready (function () var audioSection = $ ('section # audio'); $ ('a.html5'). click (function () var audio = $ ('
Vista indice completata
Ascolta un MP3 con audio HTML5
Carica un nuovo MP3
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %> Scarica ed elimina i file MP3 esistenti
<% @songs.each do |song| %>
<% end %> <%= song.key %> <%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5"%> <%= link_to "Download", download_url_for(song.key) %> <%= link_to "Torrent", torrent_url_for(song.key) %> <%= link_to "Delete", "songs/delete/?song=" + song.key, :confirm => 'Sei sicuro di voler eliminare' + song.key + '?' %> rotaie s. Anche se abbiamo completato le funzionalità di base per questa applicazione, ci sono ancora cose che devono essere fatte, come ad esempio lo stile della pagina. Facciamolo ora.
Disegnare l'applicazione
nifty_generators, per dare alla nostra applicazione uno stile di base. Ecco il CSS che useremo da quella gemma: #container width: 75%; margine: 0 auto; background-color: #FFF; imbottitura: 20px 40px; bordo: solido 1px nero; margin-top: 20px; body background-color: # 4B7399; famiglia di caratteri: Verdana, Helvetica, Arial; font-size: 14px; . chiaro chiaro: entrambi; altezza: 0; overflow: nascosto;
La mia prima applicazione di streaming musicale
HTML5 Audio
Carica una canzone
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %>
<%= submit_tag "Upload" %> <% end %> Scarica / Elimina canzoni
<% @songs.each do |song| %>
<% end %> <%= song.key %> <%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5"%> <%= link_to "Download", download_url_for(song.key) %> <%= link_to "Torrent", torrent_url_for(song.key) %> <%= link_to "Delete", "songs/delete/?song=" + song.key, :confirm => 'Sei sicuro di voler eliminare' + song.key + '?' %> #sidebar width: 30%; fluttuare: a sinistra; #main width: 70%; fluttuare: a sinistra; a, a: visited color: # 00f; decorazione del testo: nessuna; a: hover text-decoration: underline; td padding: 5px;
tag in modo che non sembra così stretto. Alla fine, questo è davvero l'unico CSS di cui abbiamo bisogno per dare alla pagina un layout di base. Sentiti libero di aggiungere tanto stile a questa applicazione come vuoi tu, perché ci sono sicuramente dei modi per rendere l'applicazione più gradevole.
Conclusione
AWS-s3 gem, farlo è molto semplice, quindi aggiungerlo a un'applicazione esistente richiederà pochissimo tempo. Sentiti libero di modificare questa applicazione in qualsiasi modo ti piacerebbe vedere se puoi migliorarla in qualsiasi modo. Ricordati di aggiungere le tue informazioni di accesso Amazon S3 e la costante del bucket al application.rb file, altrimenti l'applicazione non verrà avviata!