Share
Amazon S3 es una excelente manera de almacenar archivos, pero aprender a integrarlos en su sitio web puede ser un desafío. En este artículo, aprenderá cómo integrar Amazon S3 y Ruby on Rails a través de la construcción de una sencilla aplicación de transmisión de música..
Amazon S3 es "almacenamiento para internet"
Como lo indica el sitio web de Amazon, Amazon S3 es "almacenamiento para Internet". No solo es barato, sino que también es rápido y confiable. Es una excelente manera de mostrar contenido en su sitio web, incluidas imágenes, videos o casi cualquier cosa que desee. Amazon S3 no funciona exactamente como el almacenamiento en su computadora, así que aquí hay algunas cosas que debe saber:
Antes de continuar con este tutorial, hay algunas cosas clave que deben estar en su lugar:
El producto final de este tutorial es una sencilla aplicación de transmisión y descarga de música. En esta aplicación, el usuario podrá hacer lo siguiente:
En el momento en que se complete esta aplicación, habrá aprendido todos los temas principales que debe saber sobre el uso de Amazon S3 en su aplicación Ruby on Rails.
La gema aws-s3 le permite interactuar con el servicio Amazon S3 en su aplicación.
Lo primero que hay que hacer es instalar el aws-s3 gema de rubí. La gema le permite interactuar con el servicio Amazon S3 en su aplicación. Para hacer esto, si está en Windows, simplemente ejecute el comando:
gema de instalar aws-s3
Después de que se instale, genere nuestra aplicación Rails con el siguiente comando:
rieles nuevo mp3app
El último paso para iniciar su aplicación es ir al directorio mp3app / public y eliminar el archivo llamado "index.html". Una vez que se completa, su aplicación está lista para comenzar a interactuar con Amazon S3!
Su ID de clave de acceso y su Clave de acceso secreta le permiten conectarse a Amazon S3.
Para que podamos interactuar con Amazon S3, necesitamos decirle a nuestra aplicación cómo iniciar sesión en Amazon S3. Aquí es donde su ID de clave de acceso y Clave de acceso secreta son útiles. Su ID de clave de acceso y Clave de acceso secreta le permiten conectarse a Amazon S3. Pero primero, tenemos que decirle a nuestra aplicación que estamos usando el aws-s3 joya. Hacemos esto en el Gemfile:
gema 'aws-s3',: require => 'aws / s3'
Para que nuestra aplicación utilice esa gema, deberás escribir instalar paquete de comandos. Ahora que está funcionando, debemos decirle a nuestra aplicación cómo iniciar sesión en Amazon S3. También hacemos eso en el config / application.rb archivo, en una nueva línea dentro de la clase de aplicación:
AWS :: S3 :: Base.establish_connection! (: Access_key_id => 'Ponga aquí su ID de la clave de acceso',: secret_access_key => 'Ponga su clave de acceso secreta aquí')
Este código le dice a nuestra aplicación que cree una conexión a Amazon S3 tan pronto como se inicie la aplicación (el aplicacion.rb archivo se carga cuando se inicia su aplicación). Una última cosa que debe agregarse al archivo de la aplicación es una constante con el valor del depósito que usaremos. La razón para hacer esto es que si alguna vez necesitamos cambiar el grupo que estamos usando, solo se debe actualizar en esta ubicación. Debería verse algo como esto:
CUBO = "s3tutorialmusic"
Para este tutorial, decidí nombrar el cubo s3tutorialmusic, pero deberías reemplazarlo con cualquier cubo que tengas en tu cuenta. Al final, su archivo debería tener este aspecto (pero con su propia información de inicio de sesión):
Accentsconagua
requiera File.expand_path ('? / boot', __FILE__) requiera 'rails / all' Bundler.require (: default, Rails.env) si está definido? (Bundler) módulo Mp3app class Aplicación < Rails::Application config.encoding = "utf-8" config.filter_parameters += [:password] AWS::S3::Base.establish_connection!( :access_key_id => 'Ponga aquí su ID de clave de acceso',: secret_access_key => 'Ponga aquí su clave de acceso Secred') BUCKET = fin de 's3tutorialmusic' Ahora podemos comenzar a trabajar para que nuestra aplicación muestre algo en el navegador. Para empezar, vamos a generar el controlador y las vistas que necesitaremos. En total, generaremos tres acciones para nuestro controlador (a las que llamaremos canciones): indexar, subir y borrar.
Al final, la única vista que necesitaremos para esta aplicación es la vista de índice, ya que actuará como un panel de control central para cada acción que pueda realizar. Ahora, combinaremos todo eso en una bonita declaración de línea de comando:
rieles g controlador canciones índice subir eliminar
Una vez que haya terminado de ejecutarse, siga adelante y elimine las vistas generadas para subir y borrar, porque no serán utilizados. Pasemos a escribir el código para la acción de índice.!
En la acción de índice, el producto terminado permitirá a los usuarios cargar música nueva y eliminar la música existente. No hay nada que deba hacerse en el archivo del controlador de esta acción para cargar nueva música, pero necesitamos una lista de las canciones actuales para que los usuarios puedan eliminarlas..
Primero, necesitamos obtener un objeto que se refiera a nuestro grupo de música (recuerde que el nombre de ese grupo se almacena en el BUCKET constante). Así es como lo hacemos:
AWS :: S3 :: Bucket.find (CUBO)
Para poder utilizar los métodos disponibles en el aws-s3 gema, tenemos que decirle al intérprete de Ruby que queremos buscar las funciones en el AWS :: S3 espacio de nombres, por lo que es parte de la llamada al método. los Cangilón La clase contiene todos los métodos relacionados con la manipulación de cubos. Finalmente, el encontrar el método acepta un parámetro, el nombre del grupo, y devuelve un objeto que se refiere a ese grupo. Ahora que tenemos el cubo, obtengamos todos sus objetos haciendo esto:
AWS :: S3 :: Bucket.find (BUCKET) .objects
los objetos método devuelve un hash con los nombres de todos los objetos en ese cubo. Finalmente, necesitamos almacenar el resultado de esa llamada de método en una variable de instancia para que podamos usarlo en nuestra vista. Al final, así es como se verá la acción del índice:
def index @songs = AWS :: S3 :: Bucket.find (BUCKET) .objets end
Ahora necesitamos hacer la vista para que el usuario cargue y borre música. Comencemos con el último y creemos una lista desordenada de todos los objetos cargados actualmente, con un enlace para eliminar ese objeto. Podemos hacerlo así:
canciones variable mediante el uso de cada método. if (params [: song]) AWS :: S3 :: S3Object.find (params [: song], BUCKET) .delete redirect_to root_path else render: text => "¡No se encontró ninguna canción para eliminar!" fin
Ahora, debemos permitir que el usuario cargue música, ya que esa fue una de las piezas principales de la funcionalidad de esta aplicación. Primero, creamos un formulario simple que le permite al usuario elegir un archivo para cargar. Podemos hacerlo así:
Sube un nuevo MP3:
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %>
Creamos un formulario que se envía a la acción de carga, que es la acción que realmente realiza la carga a Amazon S3. Usamos post y multiparte porque estamos enviando archivos. Aparte de eso, este formulario es muy simple y fácil de entender, por lo que ahora podemos pasar a implementar la parte del controlador de esta acción..
Necesitamos tomar el archivo que se envió y crear un nuevo objeto S3 para él, que se realizará en la acción de carga. Podemos hacer eso con esta línea de código:
AWS :: S3 :: S3Object.store (sanitize_filename (params [: mp3file] .original_filename), params [: mp3file] .read, BUCKET,: access =>: public_read)
Hay mucho en esta línea de código, así que explicaré cada parte individualmente.
Como de costumbre, accedemos a la AWS :: S3 :: S3Object Para interactuar con objetos en Amazon S3..
Usamos el almacenar comando para subir archivos a S3. El primer parámetro especifica cómo llamar al archivo. Usamos el nombre_archivo original parámetro del archivo cargado para esto para que el nombre se mantenga igual. En cuanto a sanitize_filename Método, que será explicado en el siguiente párrafo. El segundo parámetro son los datos reales del archivo, que se obtienen al llamar al método de lectura en el archivo cargado. El tercer parámetro especifica el grupo a utilizar y el cuarto determina quién puede acceder al archivo. Como queremos que todos puedan leer el archivo (que incluye la descarga), especificamos el acceso como : public_read.
los sanitize_filename método es un método que ha sido utilizado por muchas personas y complementos, como adjunto_fu, y se usa para resolver un problema con Internet Explorer (impactante, ¿no es así?). En lugar de simplemente darnos el nombre del archivo cuando llamamos al método original_filename, IE devuelve la ruta completa al archivo; por ejemplo, si el archivo que queríamos subir fue llamado mysong.mp3, en vez de eso nos daría C: \ rails \ mp3app \ mysong.mp3 cuando llamamos nombre_archivo original. Podemos solucionar esto agregando el siguiente código al final del controlador:
private def sanitize_filename (file_name) just_filename = File.basename (file_name) just_filename.sub (/ [^ \ w \. \ -] /, '_') end
Nuestro último paso para completar la acción de carga es agregar algunas verificaciones de errores y rutas. La forma en que haces el control de errores en ruby es con un ¿empezar? ¿rescate? fin declaración. Muchas cosas pueden salir mal al cargar un archivo, por lo que tener una verificación de errores evitará que el usuario vea un mensaje de error que Rails generaría automáticamente. Aquí está la versión modificada de la acción de carga:
def upload begin AWS :: S3 :: S3Object.store (sanitize_filename (params [: mp3file] .original_filename), params [: mp3file] .read, BUCKET,: access =>: public_read) redirect_to root_path rescate: text => " No se pudo completar la carga "end end end
Si se produce un error, simplemente representamos un texto que se lo dice al usuario. A pesar de que el usuario sigue viendo un mensaje de error, es mejor que una enorme lista de códigos que aparecería en un mensaje de error generado por Rails.
Es posible que haya notado que a lo largo del código que hemos escrito hasta ahora, ha habido muchas veces donde algo como upload_path Se ha utilizado en lugar de especificar un controlador y una acción. Podemos hacer esto debido a un archivo llamado route.rb. Esto le dice a nuestra aplicación a qué URL se puede acceder en nuestra aplicación. También le damos nombres a ciertas rutas para facilitar la actualización de nuestro código. Aquí es cómo puede nombrar las rutas que utilizará nuestra Mp3app:
coincide con "songs / upload",: as => "upload" coincide con "songs / delete",: as => "delete" root: to => "songs # index"
El método de coincidencia especifica una ruta, como canciones / subir, y dale un nombre, upload_path. Ese nombre se especifica usando : as => "nombre" como el segundo parámetro para el método de coincidencia. Finalmente, el método raíz especifica qué acción será la acción raíz, que actúa de manera similar a index.html en un sitio web estático basado en HTML.
Ahora, hemos terminado de implementar la funcionalidad de la acción de carga. Aquí está el código final para el songs_controller.rb archivo hasta ahora:
clase 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 => "No se pudo completar la carga" end end def delete if (params [: song]) AWS :: S3 :: S3Object.find (params [: song], BUCKET). delete redirect_to root_path else render: text => "¡No se encontró ninguna canción para eliminar!" end end private def sanitize_filename (file_name) just_filename = File.basename (file_name) just_filename.sub (/ [^ \ w \. \ -] /, '_') end end
Y aquí es cómo se ve la aplicación hasta ahora cuando se ve en el navegador.
Hasta ahora, nuestra aplicación ha recorrido un largo camino. El usuario ahora puede cargar música, ver una lista de la música cargada actualmente y eliminar cualquier música existente. Ahora, tenemos una última pieza de funcionalidad central para implementar. Eso es permitir que el usuario realmente descargue esta música. Como se especificó al inicio de este tutorial, el usuario puede hacerlo de tres maneras:
En este momento, la lista de música solo se muestra usando una lista desordenada. Sin embargo, como vamos a terminar agregando tres enlaces adicionales al final de cada línea (uno para cada método de descarga), es más factible usar una tabla para organizar la lista. Modifiquemos la vista de índice para reflejar este cambio:
Descargar y eliminar los MP3 existentes
| <%= song.key %> | <%= link_to "Delete", "songs/delete/?song=" + song.key, :confirm => '¿Estás seguro de que deseas eliminar' + song.key + '?' %> |
Ahora estamos listos para agregar el código para permitir que el usuario descargue música. Comencemos con la descarga a través de HTTP, porque es la más fácil de implementar.
Para descargar a través de HTTP, solo necesitamos agregar una nueva
archivo application_helper.rb. Aquí es cómo se obtiene la URL: def download_url_for (song_key) AWS :: S3 :: S3Object.url_for (song_key, BUCKET,: authenticated => false) end
Este método solo acepta un parámetro, que es el nombre de la canción. Para ayudarnos a recordar que se puede acceder al nombre de la canción por song.key, llamamos el parámetro song_key. Como de costumbre, accedemos a la AWS :: S3 :: S3Object Clase para interactuar con objetos de Amazon S3. los url_for El método toma dos parámetros, siendo el tercero opcional..
: autentificado => falso, todas las URL caducarán en 5 minutos (de forma predeterminada).<%= link_to "Download", download_url_for(song.key) %>
Esta La descarga de archivos desde Amazon S3 a través de Bit Torrent es muy similar a la descarga a través de HTTP. De hecho, la única diferencia entre las dos URL de descarga es que el torrent one tiene? Torrent al final. Por lo tanto, nuestro método auxiliar para generar la URL de torrent solo agregará? Torrent al final de la url de HTTP. Aquí es cómo harías eso: Ahora, solo necesitamos añadir otro Transmitir las canciones a través del audio HTML5 es un poco más difícil que solo descargar la canción, así que comencemos con la parte fácil: Aquí está el código para generar el enlace: Ahora debemos trabajar en el javascript para agregar la etiqueta de audio a la página cuando se haga clic en este enlace. Para hacer esto, usaremos una técnica similar a la técnica que Jeffrey Way usa en su tutorial, El elemento de audio HTML 5.. El primer paso Es agregar algunas cosas a nuestros archivos de vista. En nuestro Entonces, cambiar el primer parámetro para la etiqueta de inclusión original de: por defecto a Siguiendo con el tema HTML5, usamos una etiqueta de sección en lugar de un div para crear nuestra sección de audio. Obtenemos una referencia a la sección de audio y la almacenamos en una variable, lo que se considera una mejor práctica. A continuación, debemos agregar un controlador de eventos de clic a nuestros enlaces con la clase html 5. Cuando ese controlador de eventos se apaga, necesitamos hacer algunas cosas: Ya que este tutorial es sobre Ruby on Rails, y no JavaScript, no voy a explicar en detalle cómo funciona este código. Sin embargo, el código es bastante simple, por lo que debería ser fácil para usted averiguar. Una cosa que debe tener en cuenta es que esto solo funcionará en navegadores que admitan HTML5 y que admitan mp3 como fuentes válidas para etiquetas de audio. Para la mayoría de los navegadores, la última versión admitirá este código HTML 5, pero los navegadores más antiguos no lo admiten. Finalmente hemos completado toda la funcionalidad central para esta aplicación. El usuario puede cargar, descargar y eliminar archivos mp3 de varias formas, como audio HTML5, descargas HTTP y Bit Torrent. Aquí es cómo debe verse la vista del índice en este punto: Si aún no lo has hecho, deberías intentar ejecutar este código y probarlo por ti mismo. Puedes hacer esto ejecutando el comando: Lo primero que debe hacer es envolver la página en un contenedor para que podamos centrarla. Todo lo que necesitamos hacer es colocar un div con un id de contenedor alrededor de la declaración de rendimiento en el archivo de diseño para que se vea algo como esto: A continuación, utilizaremos el estilo de la gema Ryan Bates., Ahora vamos a trabajar la vista de índice. Lo primero que debemos hacer es dividir la página en tres secciones. Esas secciones serán un encabezado, una sección principal y una barra lateral. En la parte superior de la página, vamos a agregar un encabezado simple: A continuación, dividamos la página en una región principal y una región de barra lateral. Nuestra región principal consistirá en la lista de canciones, mientras que la barra lateral contendrá el audio HTML5 y el formulario de carga. Así es como modificaremos el código: Ya que usaremos flotadores para diseñar esta página, debemos limpiarlos antes y después para asegurarnos de que el diseño no se arruine. Ahora agreguemos el CSS para ajustar el diseño de esas secciones: La barra lateral será el 30% de la página y la sección principal será el 70% de la página. Además, hay CSS para eliminar el subrayado de los enlaces a menos que el mouse se desplace sobre él, y también se agrega un relleno al Esperemos que ahora tenga una buena comprensión de cómo interactuar con Amazon S3 desde su aplicación Ruby on Rails. Con el Para aquellos de ustedes que son expertos en Ruby on Rails, estoy seguro de que pueden encontrar una manera de optimizar esta aplicación aún más. Además, sería genial compartir las optimizaciones que realice en la sección de comentarios para que los lectores puedan aprovechar aún más este tutorial.. va entre el nombre de la canción y el enlace de eliminación (pero eso es preferencia personal, por lo que puede tener los enlaces en el orden que elija).
Descargando a través de Bit Torrent
def torrent_url_for (song_key) download_url_for (song_key) + "? torrent" end
a nuestra mesa:
<%= link_to "Torrent", torrent_url_for(song.key) %>
Streaming con audio HTML5
para ello. Sin embargo, habrá algunas diferencias con respecto a los enlaces que agregamos para HTTP y Bit Torrent.
etiqueta, así que solo le daremos la misma url que la descarga HTTP. Esto también servirá como un respaldo para los navegadores con javascript deshabilitado, porque usaremos javascript para agregar el etiqueta a la página.
<%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5"%> layout / application.html.erb archivo, debemos incluir la última versión de jQuery, ya que esa es la biblioteca de javascript que usaremos. Aquí está el código para agregar justo antes de la primera línea de inclusión de javascript: <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>
aplicacion.js, porque ahí es donde almacenaremos nuestro código javascript y los otros archivos JavaScript predeterminados no son necesarios. A continuación, debemos agregar una sección a nuestra vista index.html.erb para colocar la etiqueta de audio. En la parte superior de esa vista, debemos colocar el siguiente código:
Escucha un MP3 con audio HTML5
$ (document) .ready (function () var audioSection = $ ('section # audio'); $ ('a.html5'). click (function () var audio = $ ('
Vista de índice completa
Escucha un MP3 con audio HTML5
Sube un nuevo MP3
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %> Descargar y eliminar los MP3 existentes
<% @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 => '¿Estás seguro de que deseas eliminar' + song.key + '?' %> rieles. A pesar de que hemos completado la funcionalidad principal de esta aplicación, todavía hay cosas que deben hacerse, como el estilo de la página. Hagamos eso ahora.
Diseño de la aplicación
generadores de nifty, Para dar a nuestra aplicación un estilo básico. Aquí está el CSS que usaremos de esa gema: #contenedor ancho: 75%; margen: 0 auto; color de fondo: #FFF; relleno: 20px 40px; borde: sólido 1px negro; margen superior: 20px; cuerpo color de fondo: # 4B7399; Familia tipográfica: Verdana, Helvetica, Arial; tamaño de fuente: 14px; .clear claro: ambos; altura: 0; desbordamiento: oculto;
Mi primera aplicación de transmisión de música
Audio HTML5
Subir una canción
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %>
<%= submit_tag "Upload" %> <% end %> Descargar / Eliminar canciones
<% @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 => '¿Estás seguro de que deseas eliminar' + song.key + '?' %> #sidebar ancho: 30%; flotador izquierdo; #main ancho: 70%; flotador izquierdo; a, a: visitó color: # 00f; texto-decoración: ninguno; a: hover text-decoration: underline; td relleno: 5px;
etiquetas para que no se vea tan apretado. Al final, ese es realmente el único CSS que necesitamos para darle a la página un diseño básico. Siéntase libre de agregar a esta aplicación todo el estilo que desee, ya que ciertamente hay maneras de hacer que esta aplicación se vea mejor.
Conclusión
aws-s3 gema, hacer esto es muy fácil, por lo que agregarlo a una aplicación existente tomará muy poco tiempo. Siéntase libre de modificar esta aplicación de la manera que desee para ver si puede mejorarla de alguna manera. Recuerde agregar su propia información de inicio de sesión de Amazon S3 y su constante de depósito a la aplicacion.rb archivo, de lo contrario la aplicación no se iniciará!