Share
Amazon S3 est un excellent moyen de stocker des fichiers, mais apprendre à l'intégrer dans votre site Web peut s'avérer un défi. Dans cet article, vous apprendrez à intégrer Amazon S3 et Ruby on Rails à travers la construction d'une application de streaming musical simple..
Amazon S3 est un "stockage pour Internet"
Comme l'indique le site Web d'Amazon, Amazon S3 est un "stockage pour Internet". Non seulement c'est peu coûteux, mais c'est aussi rapide et fiable. C'est un excellent moyen de diffuser du contenu sur votre site Web, notamment des images, des vidéos ou à peu près tout ce que vous voulez. Amazon S3 ne fonctionne pas exactement comme le stockage sur votre ordinateur, voici donc quelques informations à connaître:
Avant de poursuivre ce didacticiel, vous devez mettre en place quelques éléments clés:
Le produit final de ce tutoriel est une application simple de streaming et de téléchargement de musique. Dans cette application, l'utilisateur pourra effectuer les opérations suivantes:
À la fin de cette application, vous aurez appris tous les sujets importants à connaître sur l’utilisation d’Amazon S3 dans votre application Ruby on Rails..
La gem aws-s3 vous permet d'interagir avec le service Amazon S3 dans votre application..
La première chose à faire est d’installer le aws-s3 gemme rubis. La gemme vous permet d'interagir avec le service Amazon S3 dans votre application. Pour cela, si vous êtes sous Windows, lancez simplement la commande:
bijou installer aws-s3
Une fois installé, générez notre application Rails avec la commande suivante:
rails nouveau mp3app
La dernière étape pour démarrer votre application consiste à accéder au répertoire mp3app / public et à supprimer le fichier intitulé "index.html". Une fois cette opération terminée, votre application est prête à commencer à interagir avec Amazon S3.!
Votre ID de clé d'accès et votre clé d'accès secrète vous permettent de vous connecter à Amazon S3..
Pour pouvoir interagir avec Amazon S3, nous devons expliquer à notre application comment se connecter à Amazon S3. C’est là que votre ID de clé d’accès et votre clé d’accès secrète sont utiles. Votre ID de clé d'accès et votre clé d'accès secrète vous permettent de vous connecter à Amazon S3. Mais d’abord, nous devons dire à notre application que nous utilisons le aws-s3 gemme. Nous faisons cela dans le Gemfile:
gem 'aws-s3',: require => 'aws / s3'
Afin de laisser notre application utiliser cette gemme, vous devrez taper installation du groupe de commandes. Maintenant que cela fonctionne, nous devons indiquer à notre application comment se connecter à Amazon S3. Nous faisons aussi cela dans le config / application.rb file, sur une nouvelle ligne de la classe Application:
AWS :: S3 :: Base.establish_connection! (: Access_key_id => 'Indiquez votre ID de clé d'accès ici',: secret_access_key => 'Indiquez votre clé d'accès secrète ici')
Ce code indique à notre application de créer une connexion à Amazon S3 dès le démarrage de l’application (le application.rb fichier se charge au démarrage de votre application). Une dernière chose à ajouter au fichier d’application est une constante avec la valeur du compartiment que nous allons utiliser. La raison en est que si nous devons jamais modifier le compartiment que nous utilisons, il suffit de le mettre à jour à cet emplacement. Ça devrait ressembler a quelque chose comme ca:
BUCKET = "s3tutorialmusic"
Pour ce tutoriel, j'ai décidé de nommer le seau s3tutorialmusic, mais vous devriez le remplacer par tout ce que vous avez sur votre compte. En fin de compte, votre fichier devrait ressembler à ceci (mais avec vos propres informations de connexion):
Accentsconagua
require File.expand_path ('? / boot', __FILE__) nécessite 'rails / all' Bundler.require (: default, Rails.env) s'il est défini? module (Bundler) Classe Mp3app Application < Rails::Application config.encoding = "utf-8" config.filter_parameters += [:password] AWS::S3::Base.establish_connection!( :access_key_id => 'Mettez votre clé d'accès ici',: secret_access_key => 'Placez votre clé d'accès secrète ici') BUCKET = 's3tutorialmusic' end end Maintenant, nous pouvons enfin commencer à faire en sorte que notre application affiche réellement quelque chose dans le navigateur. Pour commencer, générons le contrôleur et les vues dont nous aurons besoin. Au total, nous allons générer trois actions pour notre contrôleur (que nous appellerons des chansons): index, upload et effacer.
Au final, la seule vue dont nous aurons besoin pour cette application est la vue index, car elle servira de panneau de configuration central pour toutes les actions que vous pouvez effectuer. Maintenant, nous allons combiner tout cela dans une belle instruction en ligne de commande:
rails g contrôleur Songs index upload delete
Une fois cette opération terminée, continuez et supprimez les vues générées pour télécharger et effacer, parce qu'ils ne seront pas utilisés. Passons maintenant à l'écriture du code de l'action index!
Dans l'action d'index, le produit fini permettra aux utilisateurs de télécharger de la nouvelle musique et de supprimer de la musique existante. Il n'y a rien à faire dans le fichier du contrôleur de cette action pour télécharger de la nouvelle musique, mais nous avons besoin d'une liste des chansons en cours pour permettre aux utilisateurs de les supprimer..
Premièrement, nous devons obtenir un objet qui fait référence à notre compartiment Musique (rappelez-vous que le nom de ce compartiment est stocké dans la constante BUCKET). Voici comment nous faisons cela:
AWS :: S3 :: Bucket.find (BUCKET)
Afin que nous puissions utiliser les méthodes disponibles dans le aws-s3 joyau, nous devons dire à l’interprète Ruby que nous voulons rechercher les fonctions dans le AWS :: S3 namespace, ce qui explique pourquoi cela fait partie de l'appel de la méthode. le Seau La classe contient toutes les méthodes liées à la manipulation des compartiments. Finalement, le trouver La méthode accepte un paramètre, le nom du compartiment, et retourne un objet qui fait référence à ce compartiment. Maintenant que nous avons le seau, obtenons tous ses objets en procédant comme suit:
AWS :: S3 :: Bucket.find (BUCKET) .objects
le objets La méthode retourne un hachage avec les noms de tous les objets de ce compartiment. Enfin, nous devons stocker le résultat de cet appel de méthode dans une variable d'instance afin de pouvoir l'utiliser à notre avis. En fin de compte, voici à quoi ressemblera l'action d'indexation:
def index @songs = AWS :: S3 :: Bucket.find (BUCKET) .objects end
Nous devons maintenant créer une vue permettant à l'utilisateur de télécharger et de supprimer de la musique. Commençons par la suite et créons une liste non ordonnée de tous les objets actuellement téléchargés, avec un lien pour supprimer cet objet. On peut faire ça comme ça:
@Chansons variable en utilisant chaque méthode. if (params [: chanson]) AWS :: S3 :: S3Object.find (params [: chanson], BUCKET) .delete redirect_to root_path else render: text => "Aucune chanson à supprimer!" fin
Nous devons maintenant permettre à l'utilisateur de télécharger de la musique, car c'était l'une des fonctionnalités essentielles de cette application. Tout d'abord, nous créons un formulaire simple qui permet à l'utilisateur de choisir un fichier à télécharger. On peut faire ça comme ça:
Télécharger un nouveau MP3:
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %>
Nous créons un formulaire qui est soumis à l'action de téléchargement, action qui effectue réellement le téléchargement vers Amazon S3. Nous utilisons post et multipart parce que nous soumettons des fichiers. En dehors de cela, ce formulaire est très simple et facile à comprendre. Nous pouvons maintenant passer à la mise en œuvre de la partie contrôleur de cette action..
Nous devons prendre le fichier qui a été soumis et créer un nouvel objet S3, qui sera exécuté dans l'action de téléchargement. Nous pouvons le faire avec cette ligne de code:
AWS :: S3 :: S3Object.store (sanitize_filename (params [: mp3file] .original_filename), params [: mp3file] .read, BUCKET,: access =>: public_read)
Il y a beaucoup de choses dans cette ligne de code, je vais donc expliquer chaque partie individuellement.
Comme d'habitude, on accède au AWS :: S3 :: S3Object afin d'interagir avec des objets sur Amazon S3.
Nous utilisons le le magasin commande pour réellement télécharger des fichiers sur S3. Le premier paramètre spécifie comment appeler le fichier. Nous utilisons le nom_fichier d'origine paramètre du fichier téléchargé pour cela afin que le nom reste le même. En ce qui concerne la sanitize_filename méthode, cela sera expliqué dans le paragraphe suivant. Le deuxième paramètre correspond aux données de fichier réelles, obtenues en appelant la méthode de lecture sur le fichier téléchargé. Le troisième paramètre spécifie le compartiment à utiliser et le quatrième détermine qui peut accéder au fichier. Parce que nous voulons que tout le monde puisse lire le fichier (ce qui inclut le téléchargement), nous spécifions l'accès comme suit: : public_read.
le sanitize_filename méthode est une méthode qui a été utilisée par de nombreuses personnes et plugins, tels que attachment_fu, et il est utilisé pour résoudre un problème avec Internet Explorer (choquant, n'est-ce pas?). Au lieu de nous donner simplement le nom du fichier lorsque nous appelons la méthode original_filename, IE renvoie le chemin d'accès complet au fichier. par exemple, si le fichier que nous voulions télécharger s'appelait mysong.mp3, il nous donnerait plutôt C: \ rails \ mp3app \ mysong.mp3 quand on appelle nom_fichier d'origine. Nous pouvons résoudre ce problème en ajoutant le code suivant à la fin du contrôleur:
private def sanitize_filename (nom_fichier) just_filename = fichier.nom_base (nom_fichier) just_filename.sub (/ [^ \ w \. \ -] /, '_') fin
La dernière étape de l’action de téléchargement consiste à ajouter une vérification des erreurs et des itinéraires. La façon dont vous faites une erreur de vérification dans ruby est avec un commencer? porter secours? fin déclaration. De nombreux problèmes peuvent survenir lors du téléchargement d'un fichier. Par conséquent, la vérification des erreurs empêchera l'utilisateur de voir un message d'erreur généré automatiquement par Rails. Voici la version modifiée de l'action de téléchargement:
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 => " Impossible de terminer le téléchargement "end end
Si une erreur se produit, nous rendons simplement du texte en informant l'utilisateur. Même si l’utilisateur voit toujours un message d’erreur, il vaut mieux qu’une longue liste de code qui apparaîtrait dans un message d’erreur généré par Rails..
Vous avez peut-être remarqué que tout au long du code que nous avons écrit jusqu'à présent, il y a eu de nombreuses fois où quelque chose comme upload_path a été utilisé au lieu de spécifier un contrôleur et une action. Nous pouvons le faire grâce à un fichier appelé routes.rb. Cela indique à notre application quelles URL peuvent être consultées dans notre application. Nous donnons également des noms à certains chemins pour faciliter la mise à jour de notre code. Voici comment vous pouvez nommer les chemins que notre Mp3app utilisera:
match "songs / upload",: as => "upload" match "songs / delete",: as => "delete" racine: to => "songs # index"
La méthode de correspondance spécifie un chemin, comme chansons / upload, et lui donner un nom, upload_path. Ce nom est spécifié en utilisant : comme => "nom" comme second paramètre de la méthode de correspondance. Enfin, la méthode racine spécifie quelle action sera l'action racine, qui agit de la même manière que index.html dans un site Web HTML statique..
Nous avons maintenant terminé la mise en œuvre de la fonctionnalité de l’action de téléchargement. Voici le code final pour le songs_controller.rb déposer jusqu'à présent:
classe 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 => "Impossible de terminer le téléchargement" end end def delete if (params [: chanson]) AWS :: S3 :: S3Object.find (params [: chanson], BUCKET). delete redirect_to root_path else render: text => "Aucune chanson à supprimer!" end end private def sanitize_filename (nom_fichier) just_filename = Fichier.nom_base (nom_fichier) just_filename.sub (/ [^ \ w \. \ -] /, '_') fin end
Et voici à quoi ressemble l'application jusqu'à présent dans le navigateur..
Jusqu'à présent, notre application a parcouru un long chemin. L'utilisateur peut maintenant télécharger de la musique, afficher une liste de la musique actuellement téléchargée et supprimer toute musique existante. Nous avons maintenant un dernier élément de fonctionnalité à mettre en œuvre. Cela permet à l'utilisateur de télécharger cette musique. Comme spécifié au début de ce didacticiel, l'utilisateur peut le faire de trois manières:
Pour le moment, la liste de musique est simplement affichée en utilisant une liste non ordonnée. Cependant, étant donné que nous allons finir par ajouter trois liens supplémentaires à la fin de chaque ligne (un pour chaque méthode de téléchargement), il est plus pratique d'utiliser un tableau pour organiser la liste. Modifions la vue index pour refléter ce changement:
Télécharger et supprimer des MP3 existants
| <%= song.key %> | <%= link_to "Delete", "songs/delete/?song=" + song.key, :confirm => 'Êtes-vous sûr de vouloir supprimer' + song.key + '?' %> |
Nous sommes maintenant prêts à ajouter le code pour permettre à l'utilisateur de télécharger de la musique. Commençons par le téléchargement via HTTP, car c’est le plus simple à implémenter..
Pour télécharger via HTTP, il suffit d’ajouter un nouveau
fichier application_helper.rb. Voici comment vous obtenez l'URL: def download_url_for (song_key) AWS :: S3 :: S3Object.url_for (song_key, BUCKET,: authentifié => false) fin
Cette méthode accepte uniquement un paramètre, qui est le nom de la chanson. Pour nous aider à nous rappeler que le nom de la chanson est accédé par song.key, nous appelons le paramètre song_key. Comme d'habitude, on accède au AWS :: S3 :: S3Object classe pour interagir avec les objets Amazon S3. le url_for méthode prend deux paramètres, le troisième étant optionnel.
: authentifié => faux, les URL expireraient toutes dans 5 minutes (par défaut).<%= link_to "Download", download_url_for(song.key) %>
Ce Le téléchargement de fichiers à partir d'Amazon S3 via Bit Torrent est très similaire au téléchargement via HTTP. En fait, la seule différence entre les deux URL de téléchargement est que celui-ci est torrent à la fin. Par conséquent, notre méthode d'assistance pour générer l'URL du torrent ajoutera simplement? Torrent à la fin de l'URL HTTP. Voici comment vous feriez cela: Maintenant, nous avons juste besoin d'ajouter un autre Il est un peu plus difficile de lire les chansons en continu au format HTML5 que de simplement télécharger la chanson. Commençons par la partie la plus facile: la Voici le code pour générer le lien: Nous devons maintenant travailler sur le javascript pour ajouter la balise audio à la page lorsque ce lien est cliqué. Pour ce faire, nous allons utiliser une technique similaire à celle utilisée par Jeffrey Way dans son tutoriel, L'élément HTML 5 Audio.. Le premier pas est d'ajouter quelques choses à nos fichiers de vue. Dans notre ensuite, remplacez le paramètre par défaut de la balise include d'origine par Suite au thème HTML5, nous utilisons une balise de section au lieu d’un div pour créer notre section audio.. Nous obtenons une référence à la section audio et la mettons en cache dans une variable, ce qui est considéré comme une pratique exemplaire. Ensuite, nous devons ajouter un gestionnaire d’événements click à nos liens avec la classe html 5. Lorsque ce gestionnaire d'événements se déclenche, nous devons faire quelques choses: Comme ce tutoriel concerne Ruby on Rails, et non JavaScript, je n’entrerai pas dans les détails pour expliquer le fonctionnement de ce code. Cependant, le code est assez simple, il devrait donc être facile à comprendre. Il convient de noter que cela ne fonctionnera que dans les navigateurs prenant en charge HTML5 et prenant en charge les mp3 comme sources valides pour les balises audio. Pour la plupart des navigateurs, la dernière version supportera ce code HTML 5, mais les navigateurs plus anciens ne le supporteront pas.. Nous avons enfin terminé toutes les fonctionnalités de base pour cette application. L'utilisateur peut télécharger, télécharger et supprimer des fichiers MP3 de différentes manières, notamment au format HTML5 Audio, Téléchargements HTTP et Bit Torrent. Voici à quoi la vue index devrait ressembler à ce stade: Si vous ne l'avez pas déjà fait, vous devriez essayer d'exécuter ce code et de l'essayer vous-même. Vous pouvez le faire en lançant la commande: La première chose à faire est d’envelopper la page dans un conteneur afin que nous puissions la centrer. Tout ce que nous avons à faire est de placer une div avec un identifiant de conteneur autour de la déclaration de rendement dans le fichier de présentation afin qu'il ressemble à ceci: Ensuite, nous allons utiliser le style de Ryan Bates gem, Maintenant, nous allons travailler la vue index. La première chose à faire est de diviser la page en trois parties. Ces sections seront un en-tête, une section principale et une barre latérale. En haut de la page, ajoutons un en-tête simple: Ensuite, divisons la page en une région principale et une région de la barre latérale. Notre région principale comprendra la liste des chansons, tandis que la barre latérale contiendra l'audio HTML5 et le formulaire de téléchargement. Voici comment nous allons modifier le code: Comme nous allons utiliser des flotteurs pour concevoir cette page, nous devons les effacer avant et après pour nous assurer que la mise en page ne soit pas gâchée. Ajoutons maintenant le CSS pour ajuster la mise en page de ces sections: La barre latérale aura 30% de la page et la section principale sera 70% de la page. En outre, il existe des CSS pour supprimer le soulignement des liens sauf si la souris le survole, et un remplissage est également ajouté à la liste. J'espère que vous avez maintenant une bonne compréhension de la manière d'interagir avec Amazon S3 à partir de votre application Ruby on Rails. Avec le Pour ceux d'entre vous qui sont des experts Ruby on Rails, je suis sûr que vous pouvez trouver un moyen d'optimiser encore plus cette application. En outre, il serait intéressant de partager les optimisations que vous apportez dans la section commentaires afin que les lecteurs puissent tirer davantage parti de ce didacticiel.. se place entre le nom de la chanson et le lien de suppression (mais c'est une préférence personnelle, vous pouvez donc avoir les liens dans l'ordre de votre choix).
Téléchargement via Bit Torrent
def torrent_url_for (song_key) download_url_for (song_key) + "? torrent" end
à notre table:
<%= link_to "Torrent", torrent_url_for(song.key) %>
Streaming avec HTML5 Audio
pour ça. Cependant, il y aura des différences par rapport aux liens que nous avons ajoutés pour HTTP et Bit Torrent..
balise, nous allons donc lui donner la même URL que le téléchargement HTTP. Cela servira également de solution de repli pour les navigateurs dont javascript est désactivé, car nous utiliserons javascript pour ajouter le tag vers la page.
<%= link_to "HTML5 Audio", download_url_for(song.key), :class => "html5"%> layout / application.html.erb fichier, nous devons inclure la dernière version de jQuery, car c’est la bibliothèque javascript que nous allons utiliser. Voici le code à ajouter juste avant la première ligne d'inclusion javascript: <%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" %>
application.js, parce que c'est là que nous allons stocker notre code javascript, et les autres fichiers JavaScript par défaut ne sont pas nécessaires. Ensuite, nous devons ajouter une section à notre vue index.html.erb pour insérer la balise audio. En haut de cette vue, nous devons insérer le code suivant:
Écoutez un MP3 avec HTML5 Audio
$ (document) .ready (fonction () var audioSection = $ ('section # audio'); $ ('a.html5'). click (function () var audio = $ ('
Vue d'index terminée
Écoutez un MP3 avec HTML5 Audio
Télécharger un nouveau MP3
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %> <%= submit_tag "Upload" %> <% end %> Télécharger et supprimer des MP3 existants
<% @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 => 'Êtes-vous sûr de vouloir supprimer' + song.key + '?' %> rails s. Même si nous avons complété les fonctionnalités de base pour cette application, il reste encore des choses à faire, telles que le style de la page. Faisons-le maintenant.
Styliser l'application
nifty_generators, pour donner à notre application un style de base. Voici le CSS que nous allons utiliser à partir de cette gemme: #container width: 75%; marge: 0 auto; couleur de fond: #FFF; rembourrage: 20px 40px; bord: noir 1px solide; marge supérieure: 20px; body background-color: # 4B7399; famille de fontes: Verdana, Helvetica, Arial; taille de police: 14px; .clear clear: les deux; hauteur: 0; débordement caché;
Ma première application de streaming de musique
HTML5 Audio
Télécharger une chanson
<%= form_tag upload_path, :method => "post",: multipart => true do%> <%= file_field_tag "mp3file" %>
<%= submit_tag "Upload" %> <% end %> Télécharger / Supprimer des chansons
<% @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 => 'Êtes-vous sûr de vouloir supprimer' + song.key + '?' %> #sidebar width: 30%; float: gauche; #main width: 70%; float: gauche; a, a: visité color: # 00f; texte-décoration: aucun; a: hover text-decoration: underline; td padding: 5px;
balises afin qu'il ne semble pas si à l'étroit. Au final, c’est vraiment le seul CSS dont nous avons besoin pour donner à la page une mise en page de base. N'hésitez pas à ajouter autant de style à cette application que vous le souhaitez, car il existe certainement des moyens de rendre cette application plus jolie..
Conclusion
aws-s3 gem, cela est très facile, donc l'ajouter à une application existante prendra très peu de temps. N'hésitez pas à modifier cette application de la manière que vous souhaitez voir si vous pouvez l'améliorer de quelque manière que ce soit. N'oubliez pas d'ajouter vos propres informations de connexion Amazon S3 et votre constante de compartiment à la application.rb fichier, sinon l'application ne démarre pas!