Share
Amazon S3 is een geweldige manier om bestanden op te slaan, maar het leren van hoe het te integreren in uw website kan een uitdaging zijn. In dit artikel leer je hoe je Amazon S3 en Ruby on Rails kunt integreren door een eenvoudige muziekstreaming-applicatie te bouwen.
Amazon S3 is "opslag voor internet"
Zoals Amazon's website het zegt, Amazon S3 is "opslag voor internet". Niet alleen is het goedkoop, het is ook een snel en betrouwbaar. Het is een geweldige manier om inhoud op uw website weer te geven, inclusief afbeeldingen, video's of vrijwel alles wat u maar wilt. Amazon S3 werkt niet precies zoals de opslag op je computer, dus hier zijn een paar dingen die je moet weten:
Voordat u verder gaat met deze zelfstudie, zijn er enkele belangrijke dingen die moeten worden uitgevoerd:
Het eindproduct van deze tutorial is een eenvoudige app voor het streamen en downloaden van muziek. In deze toepassing kan de gebruiker het volgende doen:
Tegen de tijd dat deze toepassing is voltooid, hebt u alle belangrijke onderwerpen geleerd die u moet weten over het gebruik van Amazon S3 in uw Ruby on Rails-toepassing..
Met de aws-s3-edelsteen kunt u communiceren met de Amazon S3-service in uw toepassing.
Het eerste dat u moet doen, is het installeren van aws-s3 robijn edelsteen. Met de edelsteen kunt u communiceren met de Amazon S3-service in uw toepassing. Om dit te doen, als u op Windows werkt, voert u eenvoudig de opdracht uit:
gem installeer aws-s3
Nadat dit is geïnstalleerd, genereert u onze Rails-applicatie met de volgende opdracht:
rails nieuwe mp3app
De laatste stap om je applicatie te starten is om naar de mp3app / public directory te gaan en het bestand "index.html" te verwijderen. Als dat is voltooid, is je toepassing klaar om te gaan communiceren met Amazon S3!
Met uw Access Key ID en Secret Access Key kunt u verbinding maken met Amazon S3.
Om ervoor te zorgen dat we kunnen communiceren met Amazon S3, moeten we onze toepassing laten weten hoe u zich bij Amazon S3 kunt aanmelden. Dit is waar uw Access Key ID en Secret Access Key van pas komen. Met uw Access Key ID en Secret Access Key kunt u verbinding maken met Amazon S3. Maar eerst moeten we onze toepassing laten weten dat we de aws-s3 edelsteen. We doen dit in de Gemfile:
gem 'aws-s3',: require => 'aws / s3'
Als u onze app daadwerkelijk die edelsteen wilt laten gebruiken, moet u typen opdracht bundel installatie. Nu het werkt, moeten we onze toepassing laten weten hoe u zich bij Amazon S3 kunt aanmelden. We doen dat ook in de config / application.rb bestand, op een nieuwe regel in de klasse Application:
AWS :: S3 :: Base.establish_connection! (: Access_key_id => 'Geef hier je toegangssleutel-ID op',: secret_access_key => 'Zet hier je geheime toegangscode in')
Deze code vertelt onze applicatie om een verbinding met Amazon S3 te maken zodra de toepassing wordt gestart (de application.rb bestand wordt geladen wanneer uw toepassing wordt opgestart). Een laatste ding dat moet worden toegevoegd aan het applicatiebestand is een constante met de waarde van de bucket die we gaan gebruiken. De reden hiervoor is dat als we ooit hoeven te veranderen welke bucket we gebruiken, deze alleen op deze locatie hoeft te worden bijgewerkt. Het zou er ongeveer zo uit moeten zien:
EMMER = "s3tutorialmusic"
Voor deze zelfstudie heb ik besloten de bucket een naam te geven s3tutorialmusic, maar je moet dat vervangen door elke emmer die je op je account hebt staan. Uiteindelijk ziet uw bestand er ongeveer zo uit (maar met uw eigen inloggegevens):
Accentsconagua
vereist File.expand_path ('? / boot', __FILE__) vereist 'rails / all' Bundler.require (: default, Rails.env) indien gedefinieerd? (Bundler) module Mp3app-klasse Toepassing < Rails::Application config.encoding = "utf-8" config.filter_parameters += [:password] AWS::S3::Base.establish_connection!( :access_key_id => 'Plaats hier uw toegangssleutel-ID',: secret_access_key => 'Zet hier uw Secred Access Key' in) BUCKET = 's3tutorialmusic' end-end Nu kunnen we eindelijk beginnen met het maken van onze applicatie om iets in de browser daadwerkelijk weer te geven. Laten we om te beginnen de controller en weergaven genereren die we nodig hebben. In totaal zullen we drie acties genereren voor onze controller (die we nummers zullen noemen): index, uploaden en verwijderen.
Uiteindelijk is de enige weergave die we nodig hebben voor deze toepassing de indexweergave, omdat deze zal fungeren als een centraal controlepaneel voor elke actie die u kunt doen. Nu, we zullen dat allemaal combineren in één mooie opdrachtregelinstructie:
rails g controller Songs index upload verwijderen
Zodra dat is voltooid, kunt u de gegenereerde weergaven verwijderen uploaden en verwijderen, omdat ze niet zullen worden gebruikt. Laten we verder gaan met het schrijven van de code voor de indexactie!
In de indexactie kunnen gebruikers met het voltooide product nieuwe muziek uploaden en bestaande muziek verwijderen. Er is niets dat moet worden gedaan in het controllerbestand van deze actie voor het uploaden van nieuwe muziek, maar we hebben wel een lijst met huidige nummers nodig om gebruikers deze te laten verwijderen.
Eerst moeten we een object krijgen dat verwijst naar onze muziekemmer (onthoud dat de naam van die bucket is opgeslagen in de constante BUCKET). Hier is hoe we dat doen:
AWS :: S3 :: Bucket.find (bak)
Om ons de methoden beschikbaar in de aws-s3 schat, we moeten de Ruby tolk vertellen dat we naar de functies in de AWS :: S3 naamruimte, dat is waarom dat onderdeel is van de methodeaanroep. De Emmer klasse bevat alle methoden met betrekking tot het manipuleren van buckets. eindelijk, de vind methode accepteert één parameter, de naam van de bucket en retourneert een object dat naar die bucket verwijst. Nu we de bucket hebben, kunnen we al zijn objecten als volgt ophalen:
AWS :: S3 :: Bucket.find (EMMER) .objects
De voorwerpen methode retourneert een hash met de namen van alle objecten in die bucket. Ten slotte moeten we het resultaat van die methodeaanroep opslaan in een instantievariabele, zodat we deze in onze weergave kunnen gebruiken. Uiteindelijk ziet de indexactie er als volgt uit:
def index @songs = AWS :: S3 :: Bucket.find (BUCKET) .objects end
Nu moeten we de gebruiker laten zien hoe hij muziek kan uploaden en verwijderen. Laten we beginnen met de laatste en een ongeordende lijst maken van alle objecten die momenteel zijn geüpload, met een koppeling om dat object te verwijderen. We kunnen dat doen zoals:
@songs variabele door gebruik te maken van elke methode. if (params [: song]) AWS :: S3 :: S3Object.find (params [: song], BUCKET) .delete redirect_to root_path else render: text => "Er is geen nummer gevonden om te verwijderen!" einde
Nu moeten we de gebruiker daadwerkelijk muziek laten uploaden, want dat was een van de belangrijkste stukjes functionaliteit voor deze toepassing. Eerst maken we een eenvoudig formulier waarmee de gebruiker een bestand kan kiezen om te uploaden. We kunnen dat doen zoals:
Upload een nieuwe MP3:
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %>
We maken een formulier dat wordt verzonden naar de uploadactie, wat de actie is die de upload naar Amazon S3 daadwerkelijk uitvoert. We gebruiken post en multipart omdat we bestanden indienen. Anders dan dat, is deze vorm heel eenvoudig en gemakkelijk te begrijpen, dus nu kunnen we doorgaan met het implementeren van het controllergedeelte van deze actie.
We moeten het ingediende bestand nemen en er een nieuw S3-object voor maken, dat zal worden uitgevoerd tijdens de uploadactie. We kunnen dat doen met deze regel code:
AWS :: S3 :: S3Object.store (sanitize_filename (params [: mp3file] .original_filename), params [: mp3file] .read, BUCKET,: access =>: public_read)
Er is veel gaande in deze ene regel code, dus ik zal elk onderdeel afzonderlijk uitleggen.
Zoals gewoonlijk hebben we toegang tot de AWS :: S3 :: S3Object om te communiceren met objecten op Amazon S3.
Wij gebruiken de op te slaan opdracht om bestanden daadwerkelijk naar S3 te uploaden. De eerste parameter geeft aan wat het bestand moet worden aangeroepen. Wij gebruiken de original_filename parameter van het geüploade bestand hiervoor, zodat de naam hetzelfde blijft. Wat betreft de sanitize_filename methode, die in de volgende paragraaf zal worden uitgelegd. De tweede parameter is de feitelijke bestandsgegevens, die worden verkregen door de leesmethode in het geüploade bestand aan te roepen. De derde parameter geeft de bucket aan die moet worden gebruikt en de vierde parameter bepaalt wie toegang heeft tot het bestand. Omdat we willen dat iedereen het bestand kan lezen (inclusief downloaden), geven we de toegang op als : public_read.
De sanitize_filename methode is een methode die door veel mensen en plug-ins is gebruikt, zoals attachment_fu, en het wordt gebruikt om een probleem met Internet Explorer op te lossen (schokkend toch?). In plaats van ons alleen de naam van het bestand te geven als we de methode original_filename aanroepen, geeft IE het volledige pad naar het bestand terug; bijvoorbeeld, als het bestand dat we wilden uploaden werd aangeroepen mysong.mp3, het zou ons in plaats daarvan geven C: \ rails \ mp3app \ mysong.mp3 wanneer we bellen original_filename. We kunnen dit oplossen door de volgende code aan het einde van de controller toe te voegen:
private def sanitize_filename (bestandsnaam) just_filename = File.basename (bestandsnaam) just_filename.sub (/ [^ \ w \. \ -] /, '_') einde
Onze laatste stap bij het voltooien van de uploadactie is om een aantal foutcontroles en routes toe te voegen. De manier waarop u foutcontrole in Ruby uitvoert, is met een beginnen? redden? einde uitspraak. Bij het uploaden van een bestand kunnen er veel dingen fout gaan. Als gevolg van het controleren van de fout kan de gebruiker een foutmelding zien die Rails automatisch zou genereren. Hier is de aangepaste versie van de uploadactie:
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 => " Kan het einde van de upload niet voltooien
Als er een fout optreedt, geven we alleen wat tekst weer die dat aan de gebruiker vertelt. Hoewel de gebruiker nog steeds een foutmelding ziet, is het beter dan een enorme lijst met code die zou verschijnen in een foutmelding gegenereerd door Rails.
Het is je misschien al opgevallen dat in de hele code die we tot nu toe hebben geschreven, er vaak dingen zijn geweest zoals upload_path is gebruikt in plaats van een controller en actie te specificeren. We kunnen dit doen vanwege een bestand met de naam routes.rb. Dit vertelt onze applicatie welke URL's toegankelijk zijn in onze applicatie. We geven ook namen aan bepaalde paden om het gemakkelijker te maken onze code bij te werken. Hier is hoe je de paden kunt noemen die onze Mp3app zal gebruiken:
match "songs / upload",: as => "upload" match "songs / delete",: as => "verwijder" root: to => "liedjes # index"
De matchmethode specificeert een pad, zoals songs / upload, en geef het een naam, upload_path. Die naam wordt opgegeven met : as => "naam" als de tweede parameter voor de matchmethode. Ten slotte specificeert de root-methode welke actie de root-actie zal zijn, die vergelijkbaar werkt met index.html op een statische HTML-gebaseerde website.
Nu zijn we klaar met het implementeren van de functionaliteit van de uploadactie. Hier is de definitieve code voor de songs_controller.rb bestand tot nu toe:
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 rescue render: text => "Kon de upload niet voltooien" end end def delete if (params [: song]) AWS :: S3 :: S3Object.find (params [: song], BUCKET). delete redirect_to root_path else render: text => "Er is geen nummer gevonden om te verwijderen!" end end private def sanitize_filename (bestandsnaam) just_filename = File.basename (bestandsnaam) just_filename.sub (/ [^ \ w \. \ -] /, '_') end end
En hier ziet de toepassing er tot nu toe uit in de browser.
Tot dusverre heeft onze toepassing een lange weg afgelegd. De gebruiker kan nu muziek uploaden, een lijst met momenteel geüploade muziek bekijken en bestaande muziek verwijderen. Nu hebben we nog een laatste stuk kernfunctionaliteit om te implementeren. Dat wil zeggen dat de gebruiker deze muziek daadwerkelijk kan downloaden. Zoals aangegeven aan het begin van deze tutorial, kan de gebruiker dat op drie manieren doen:
Op dit moment wordt de lijst met muziek gewoon weergegeven met een ongeordende lijst. Omdat we uiteindelijk nog drie extra links aan het einde van elke regel zullen toevoegen (één voor elke downloadmethode), is het beter om een tabel te gebruiken om de lijst te ordenen. Laten we de indexweergave aanpassen om deze wijziging te weerspiegelen:
Download en verwijder bestaande MP3's
| <%= song.key %> | <%= link_to "Delete", "songs/delete/?song=" + song.key, :confirm => 'Weet je zeker dat je' + song.key + '? Wilt verwijderen?' %> |
Nu zijn we klaar om de code toe te voegen om de gebruiker muziek te laten downloaden. Laten we beginnen met downloaden via HTTP, omdat dit het gemakkelijkst te implementeren is.
Om via HTTP te downloaden, moeten we gewoon een nieuw toevoegen
application_helper.rb bestand. Zo krijg je de URL: def download_url_for (song_key) AWS :: S3 :: S3Object.url_for (song_key, BUCKET,: authenticated => false) einde
Deze methode accepteert slechts één parameter, de naam van het nummer. Om ons te helpen herinneren dat de naam van de song toegankelijk is voor song.key, noemen we de parameter song_key. Zoals gewoonlijk hebben we toegang tot de AWS :: S3 :: S3Object klasse om te communiceren met Amazon S3-objecten. De url_for methode neemt twee parameters, waarbij de derde optioneel is.
: authenticated => false, de URL's verlopen allemaal over 5 minuten (standaard).<%= link_to "Download", download_url_for(song.key) %>
Deze Het downloaden van bestanden van Amazon S3 via Bit Torrent lijkt veel op downloaden via HTTP. In feite is het enige verschil tussen de twee download-URL's dat de torrent een heeft? Torrent aan het einde ervan. Daarom zal onze helper methode om de torrent url te genereren gewoon torrent toevoegen aan het einde van de HTTP url. Hier is hoe je dat zou doen: Nu moeten we gewoon nog een toevoegen Het streamen van de nummers via HTML5-audio is een beetje moeilijker dan alleen het downloaden van het nummer, dus laten we beginnen met het eenvoudige deel: de Hier is de code voor het genereren van de link: Nu moeten we aan het javascript werken om de audiotag aan de pagina toe te voegen wanneer op deze link wordt geklikt. Om dit te doen, zullen we een techniek gebruiken die lijkt op de techniek die Jeffrey Way gebruikt in zijn tutorial, The HTML 5 Audio Element. De eerste stap is om een paar dingen toe te voegen aan onze weergavebestanden. In onze Dan, verander de eerste parameter voor het origineel include tag from: standaard naar Na het HTML5-thema gebruiken we een sectietag in plaats van een div om onze audiogedeelte te maken. We krijgen een verwijzing naar het audiogedeelte en cachen het in een variabele, wat als een goede oefening wordt beschouwd. Vervolgens moeten we een klikgebeurtenishandler toevoegen aan onze links met de html 5-klasse. Wanneer die gebeurtenishandler afgaat, moeten we een paar dingen doen: Aangezien deze tutorial gaat over Ruby on Rails, en geen JavaScript, zal ik niet in detail ingaan op hoe deze code werkt. De code is echter vrij eenvoudig, dus het zou gemakkelijk voor je moeten zijn om erachter te komen. Een ding dat je moet opmerken is dat dit alleen zal werken in browsers die HTML5 ondersteunen en mp3's ondersteunen als geldige bronnen voor audiotags. Voor de meeste browsers ondersteunt de nieuwste versie deze HTML 5-code, maar oudere browsers ondersteunen dit niet. We hebben eindelijk alle kernfunctionaliteit voor deze toepassing voltooid. De gebruiker kan mp3's op verschillende manieren uploaden, downloaden en verwijderen, inclusief HTML5-audio, HTTP-downloads en Bit Torrent. Hier is hoe de indexweergave eruit zou moeten zien op dit punt: Als u dit nog niet hebt gedaan, moet u proberen deze code uit te voeren en het zelf uit te proberen. U kunt dit doen door de opdracht uit te voeren: Het eerste dat u hoeft te doen, is de pagina in een container te verpakken, zodat we deze kunnen centreren. Alles wat we moeten doen is een div met een id van container rond de yield-statement in het layoutbestand plaatsen zodat het er ongeveer zo uitziet: Vervolgens zullen we de styling van Ryan Bates edelsteen gebruiken, Nu zullen we de indexweergave bewerken. Het eerste dat we moeten doen, is de pagina opdelen in drie delen. Die secties zijn een koptekst, een hoofdsectie en een zijbalk. Aan de bovenkant van de pagina voegen we een eenvoudige kop toe: Laten we vervolgens de pagina verdelen in een hoofdregio en een zijbalkregio. Onze hoofdregio bestaat uit de lijst met nummers, terwijl de zijbalk de HTML5-audio en het uploadformulier zal bevatten. Hier is hoe we de code zullen wijzigen: Omdat we vlotters gebruiken om deze pagina te ontwerpen, moeten we de vlotters voor en na leegmaken om ervoor te zorgen dat de lay-out niet in de war raakt. Laten we nu de CSS toevoegen om de lay-out van die secties aan te passen: De zijbalk is 30% van de pagina en het hoofdgedeelte is 70% van de pagina. Daarnaast is er CSS om de onderstreping van de koppelingen te verwijderen, tenzij de muis erover zweeft, en er is ook opvulling toegevoegd aan de Hopelijk heb je nu een goed begrip van hoe je kunt communiceren met Amazon S3 vanuit je Ruby on Rails-applicatie. Met de Voor degenen onder u die Ruby on Rails-experts zijn, weet ik zeker dat u een manier kunt vinden om deze toepassing nog verder te optimaliseren. Daarnaast zou het geweldig zijn om alle optimalisaties die u in de opmerkingensectie maakt te delen, zodat lezers nog meer uit deze tutorial kunnen halen. tussen de naam van het nummer en de link om te verwijderen (maar dat is persoonlijke voorkeur, dus je kunt de links hebben in elke gewenste volgorde).
Downloaden via Bit Torrent
def torrent_url_for (song_key) download_url_for (song_key) + "? torrent" einde
naar onze tafel:
<%= link_to "Torrent", torrent_url_for(song.key) %>
Streamen met HTML5-audio
ervoor. Er zullen echter enkele verschillen zijn met de links die we hebben toegevoegd voor HTTP en Bit Torrent.
tag, dus we geven hem dezelfde URL als de HTTP-download. Dit zal ook dienen als een terugval voor browsers met javascript uitgeschakeld, omdat we javascript zullen gebruiken om de tag naar de pagina.
<%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5"%> layout / application.html.erb bestand, moeten we de nieuwste versie van jQuery opnemen, omdat dat de javascript-bibliotheek is die we zullen gebruiken. Hier is de code die moet worden toegevoegd vlak voordat de eerste javascript regel bevat: <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>
application.js, want dat is waar we onze javascript code zullen opslaan, en de andere standaard JavaScript-bestanden zijn niet nodig. Vervolgens moeten we een sectie toevoegen aan onze index.html.erb-weergave om de audiotag in te voegen. Bovenaan die weergave moeten we de volgende code plaatsen:
Luister naar een MP3 met HTML5-audio
$ (document) .ready (function () var audioSection = $ ('section # audio'); $ ('a.html5'). click (function () var audio = $ ('
Voltooide indexweergave
Luister naar een MP3 met HTML5-audio
Upload een nieuwe MP3
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %> Download en verwijder bestaande MP3's
<% @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 => 'Weet je zeker dat je' + song.key + '? Wilt verwijderen?' %> rails s. Hoewel we de kernfunctionaliteit voor deze toepassing hebben voltooid, zijn er nog steeds dingen die moeten worden gedaan, zoals het stylen van de pagina. Laten we dat nu doen.
De applicatie stylen
nifty_generators, om onze applicatie een basisstijl te geven. Hier is de CSS die we van dat juweel zullen gebruiken: #container width: 75%; marge: 0 auto; achtergrondkleur: #FFF; opvulling: 20px 40px; rand: vast 1px zwart; margin-top: 20px; body achtergrondkleur: # 4B7399; lettertype-familie: Verdana, Helvetica, Arial; lettergrootte: 14 px; .helder duidelijk: beide; hoogte: 0; overloop verborgen;
Mijn eerste muziekstreaming-applicatie
HTML5-audio
Upload een nummer
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %>
<%= submit_tag "Upload" %> <% end %> Download / verwijder liedjes
<% @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 => 'Weet je zeker dat je' + song.key + '? Wilt verwijderen?' %> #sidebar width: 30%; zweven: links; #main width: 70%; zweven: links; a, a: visited color: # 00f; tekstdecoratie: geen; a: hover text-decoration: onderstrepen; td opvulling: 5px;
tags zodat het er niet zo krap uitziet. Uiteindelijk is dat eigenlijk de enige CSS die we nodig hebben om de pagina een basislay-out te geven. Voel je vrij om zoveel styling aan deze applicatie toe te voegen als je zelf wilt, want er zijn zeker manieren om deze applicatie er leuker uit te laten zien.
Conclusie
aws-s3 schat, dit is heel eenvoudig, dus het toevoegen van een bestaande applicatie kost erg weinig tijd. U kunt deze applicatie op elke gewenste manier aanpassen om te zien of u deze op welke manier dan ook kunt verbeteren. Vergeet niet om uw eigen Amazon S3-inloginformatie en bucketconstante toe te voegen aan de application.rb bestand, anders start de applicatie niet!