Rails angular postgres and bootstrap pdf [Eng]


Télécharger Rails angular postgres and bootstrap pdf [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


rails angular postgres and bootstrap pdf [Eng]

...

Créer une superbe connexion avec Bootstrap et Concevoir

Applications visant à une de l 'entreprise employés exiger certains Trier de restrictions comme à qui pouvez accès leur. Celles-ci interne applications sont instrumental dans en cours d' exécution des opérations de l'entreprise, donc nous voulons faire attention à qui a accès. Cela signifie que nous avons besoin d'une authentification système.

Un système d’authentification est une première étape dans la réflexion sur les problèmes en tant que développeur full stack . Nous voulons que l’expérience utilisateur soit excellente, mais nous voulons également que le back-end soit sécurisé, jusqu’à la couche de données. Dans ce chapitre, nous allons utiliser la pierre précieuse de gérer les Legs aux bits de middleware d'authentification, et nous allons utiliser Bootstrap pour rendre l'expérience utilisateur grand.

Parce que c'est le premier chapitre, nous allons installer notre nouvelle application Rails. Mais nous allons également avoir besoin à obtenir Bootstrap installée. Puisque Éclat (la prénom de notre Rails) utilisera éventuellement AngularJS et d’autres logiciels frontaux composants, nous allons utilisation la installation de Bootstrap comme une façon à apprendre sur Bower , qui est comme Bundler 1 mais pour JavaScript et CSS bibliothèques.

La figure en haut de cette page (et en haut des chapitres suivants) montre où tout ce que vous apprendrez dans notre pile se repose d'application.

Let ' s obtenir à il, et ensemble en haut notre Frais Des rails application avec une simple s'identifier système alimenté par Concevoir.

Configuration de Devise pour l'authentification

Créer un système d'authentification à partir de zéro est rarement une bonne idée. Il est difficile à obtenir chaque partie de il correct puisque Sécurité les contrôles pouvez être subverti de manière inhabituelle et contre-intuitive. En raison de cela, nous allons utiliser un tried-et-vrai Rails plugin appelé Concevoir. 2

Devise est conçu pour répondre à presque toutes les exigences d’authentification, et absolument costume notre Besoins. Voici l ' quoi nous vouloir notre authentification système à faire:

  • Employés qui avoir besoin à utilisation notre app volonté signe en haut sur leur posséder.
  • Ils doivent utiliser le courrier électronique de leur entreprise lors de la signature. up.
  • Leur mot de passe doit comporter au moins 10 caractères. longue.

Nous aren 't va demander aux utilisateurs de valider leurs adresses e - mail, la plupart du temps de garder les choses simples en évitant la configuration e - mail. Vous devriez considérer pour une application réelle, et le rend facile Concevoir à utiliser une fois que vous avez entièrement configuré vos expéditeurs de courrier. 3

Depuis l' ajout d' une connexion est la première caractéristique que nous allons mettre en œuvre, nous allons commence par réglage en haut notre Des rails application. Remarque cette tandis que nous sommes ajouter Concevoir à une toute nouvelle application Rails, il est tout aussi simple d'ajouter un Legs au développement en déjà - application.

Configurer notre application Rails

nous vraiment n ' avoir besoin beaucoup plus que la de base Des rails application nous allons générer des rails nouveaux, mais puisque nous savons que nous sommes en utilisant Postgres maintenant et plus tard dans le livre nous allonsêtre en utilisant AngularJS, Là sont une peu options nous vouloir à ensemble à présent.

Let ' s appel notre Nouveau application éclat (puisque il volonté permettre notre utilisateurs à éclat comme ils faire leur travail, assisté par tout la merveilleux fonctionnalités nous allons être capable à ajouter pour eux). Il utilisera Postgres au lieu du SQLite par défaut base de données.

nous n ' vouloir à utilisation TurboLinks, 4 parce que il 's Aller à choc avec la Script Java nous allons être l'écriture plus tard sur quand nous début à utilisation AngularJS. Nous sommes sauter printemps 5 comme bien, la plupart parce que il t 'ISN 100% fiable, et il pourrait cause ton expérience avec celles-ci exemples à ne pas imiter la un nous sommes décrivant dans le livre. Finalement, nous sommes saut Test :: Unité comme notre essai cadre, parce que nous sommes va utiliser RSpec. 6 Comme vous le verrez au chapitre 6, Testez ce nouveau code fantaisie , à la page 83 , nous avons de bonnes raisons d’utiliser RSpec. Veuillez donc me supporter pour le moment.

Voici la commande pour créer une application Rails selon nos spécifications (si vous n 'Rails installé, vous aurez besoin d' abord d'émettre gem install rails).

$ rails new --skip-turbolinks \

--skip-spring               \

--skip-test-unit \

-ré postgresql               \ éclat

Cela créera notre nouvelle application comme vous le souhaitiez. Depuis presque tout notre travail volonté être dans ce Des rails app, Let 's aller devant et changement notre actuel répertoire dans le répertoire shine qui contient nos nouveaux Rails application:

$ cd shine

 

Avant de lancer l'application Rails, nous aurons besoin de mettre en place notre base de données (si vous n 'avez Postgres installé, consultez les instructions d'installation dans Postgres, sur page xxvi ). Si vous avez installé Postgres localement, vous aurez besoin de créer un utilisateur (si vous êtes à l' aide Postgres-as-a-service, vous devriez avoir un utilisateur créé déjà et devrait sauter cette étape). Notre utilisateur sera nommé briller et ont l'éclat de mot de passe. Nous pouvons le créer en utilisant l'application de ligne de commande installée avec Postgres, appelée createuser .

$ createuser --createdb --login -P shine

 

Vous aurez être invité pour une mot de passe, alors entrer éclat deux fois, comme demandé. --createdb indique à Postgres que notre utilisateur devrait pouvoir créer des bases de données (nécessaires ultérieurement). étape). le --s'identifiercommutateur volonté permettre notre utilisateur à bûche dans à la base de données et


-P signifie que nous voulons définir le mot de passe de notre nouvel utilisateur maintenant (ce qui explique pourquoi vous avez été invité à un mot de passe).

Si le 't Trouvé sur votre système de commande createuser Isn

Si le 't Trouvé sur votre système de commande createuser Isn

Ensuite, modifiez config / database.yml pour que l’application puisse se connecter à la base de données.

défaut : & adaptateur par défaut : postgresql encoding : hôte unicode : localhost

➤               nom d'utilisateur : éclat

➤               mot de passe : piscine brillante : 5

 

développement :

<< : * défaut

base de données : shine_development

 

test :

<< : * défaut

base de données : shine_test



 

Notez que si vous utilisez Postgres-as-a-service, vous aurez besoin d'utiliser les tials creden- vous ont été donnés au lieu de ce qui est montré ici. En règle générale, vous aurez un URL, de sorte que vous aurez à casser manuellement versle haut dans les pièces nécessaires à la figure / database.yml con-. le URL est d'habitude de la forme postgres: // nom_utilisateur: leur_passe_passe@hôte.com: PORT / nom_base .

Ensuite, nous allons mettre en place notre base de données.

$ bundle exec rake db: create

$ bundle exec rake db: migrate

 

nous pouvez à présent début la app à Vérifier cette tout travaillé. Bien que nous n 'ont tout base de données les tables, Des rails devrait se plaindre si la base de données configuration est fausse, donc c’est un test décent de notreconfiguration.

$ bundle exec rails server

 

Vous pouvez à présent visite http: // localhost: 3000 et voir la familier Des rails Bienvenue page sur page 5.

Enfin, nous devons créer une page dans notre application qui nécessitera une authentification. Nous allons appel ce la tableau de bord , et notre initiale version volonté avoir une simple, vue statique.

Ajoutez la route à config / routes.rb .

connexion / créer-tableau de bord / shine / config / routes.rb              

root 'tableau de bord # index'

 

Ensuite, créez app / controllers / dashboard_controller.rb .

connexion / créer-tableau de bord / shine / app / controllers / dashboard_controller.rb              

class DashboardController <ApplicationController

indice de def

fin fin

Enfin, créez app / views / dashboard / index.html.erb avec du contenu de base.

connexion / créer-tableau de bord / shine / app / vues / dashboard / index.html.erb              

<en-tête>

 

Bienvenue chez Shine!

 

 

Nous utilisons Rails <% = Rails.version %>

 

 

 

 

Future maison du tableau de bord de Shine

 

 

Redémarrez votre serveur, rechargez votre application, vous devriez voir la page que nous avons créé.

Maintenant que nous avons une application Rails en état de marche, nous pouvons installer Devise pour obtenir notre identifiant.

Installation de Devise

Tout d' abord, nous allons ajouter à notre Gemfile Devise.

connexion / installer-concevoir / shine / Gemfile              

bijou 'devise'

Ensuite, nous allons l' installer à l' aide Bundler.

$ bundle install

 

Devise comprend plusieurs générateurs 7 que nous pouvons utiliser pour simplifier la configuration et la configuration initiale. le devise: installer Générateur est la premier un nous allons avoir besoin à bootstrap Devise dans notre app.

$ bundle exec rails génère devise: installer créer config / initialiseurs / devise.rb créer config / locales / devise.en.yml

Ce commander volonté également sortie une équitablement longue message sur plus loin actions à prendre à ensemble en haut Concevoir. Nous allons être adresser tout de cette Conseil dans ce section, alors ne vous inquiétez pas 't à ce sujet pour à présent.

Ensuite, nous devons dire quelle table modèle Concevoir et base de données que nous allons utiliser pour l' authentification. Même si le site Web public de notre société dispose d' un mécanisme d'authentification des utilisateurs pour nosclients, nous voulons utiliser un système distinct pour notre interne utilisateurs. Ce permet tous les deux systèmes à varier comme nécessaire pour différentes parties de l'entreprise. Cela crée également un mur beaucoup plus explicite entre les clients et les utilisateurs et empêche les clients d’avoir accès à notre service interne. systèmes.

Devise fait partie de ce système distinct, mais nous avons également besoin d'une table de base de données et d'un modèle distincts. Puisque nous référons à nos clients « clients », nous allons référer à nos utilisateurs internes comme de simples « utilisateurs. " Devise peut créer cette table pour nous, en utilisant une Générateur appelé concevoir . Il volonté créer une Utilisateur actif Record modèle et base de données table (appelé UTILISATEURS ) avec la des champsnécessaire pour Concevoir à une fonction.

$ bundle exec rails génère un utilisateur

invoquer enregistrement_actif

créer               db / migrate / 20150228234349_devise_create_users.rb créer               app / models / user.rb

insérer               app / models / user.rb route devise_pour :utilisateurs

Ayons un regard sur ce qu'il a créé en examinant la migration.

connexion / install-invent / shine / db / migrate // 20150228234349_devise_create_users.rb              

classe DeviseCreateUsers

def change create_table ( : users ) do | t |

## Base de données authentifiable

t.string : email ,               null: false , par défaut: ""

t.string : mot_de_passe_encrypté , nul: faux , défaut: ""

 

## Restaurable

t.string               : reset_password_token

t.datetime : reset_password_sent_at

 

## Rememberable

t.datetime : Remember_created_at

 

## Trackable

t.integer : sign_in_count , valeur par défaut: 0, null: false

t.datetime : current_sign_in_at t.datetime : last_sign_in_at t.inet               : current_sign_in_ip t.inet               : last_sign_in_ip

 

les horodatages

fin

 

add_index : utilisateurs , : email ,               unique: vrai

add_index: utilisateurs,: reset_password_token, unique: true fin



fin

 

Chaque section de l 'indique commenté que les champs modules Concevoir sont pertinents pour. Don 'inquiète t à ce que ceux -ci sont pour l' instant. Nous avons également gagné 't ajouter tous les champs de notre propre à ce stade. Si nous en avons besoin plus tard, nous pouvons toujours les ajouter avec une nouvelle migration.

S Il y a une dernière étape avant de pouvoir enfin voir en action Concevoir. Nous devons indiquer lequel manette actes exiger authentification. Sans pour autant cette, A gagné legs 't faire quoi que ce soit, car il percevra toutes les pages comme étant ouvert aux utilisateurs anonymes.

Concevoir fournit une manette filtre appelé authenticate_user! , et nous pouvez utilisation que dans notre ApplicationController , puisque nous vouloir tout des pages et actes à être limité.

connexion / install-invent / shine / app / controllers / application_controller.rb              

classe ApplicationController < ActionController :: Base protect_from_forgery avec:: exception

➤               before_action : authenticate_user!

fin

 

Comme une façon pour nous à être certain nous avez réellement authentifié la utilisateur, Let 's affiche l'adresse email sur le tableau de bord. Devise fournit une méthode d'assistance appelé current_user , qui renvoie l' instance User de l'utilisateur actuellement authentifié. Puisqu'il s'agit d'une aide, nous pouvons l'utiliser directement dans notre vue.

… … …

Installation de Bootstrap avec Bower

Nous voulons que l' expérience de nos utilisateurs avec Shine soit bonne, mais nous n'avons pas des heures et des heures à dépenser pour le styler et le perfectionner. Nous pourrions aussi ne même pas avoir la compétence à faire unebien emploi. le réalité de Logiciel développement, en particulier pour les outils internes, est qu'il y est temps rarement assez ou les gens à travailler sur un grand conception.

Heureusement, il existe maintenant de nombreux frameworks CSS disponibles qui peuvent nous aider à produire un design décent . Un framework est un ensemble de classes réutilisables que nous pouvons appliquer - sans écrire de code CSS - pour styliser notre balisage. Par exemple, un framework peut définir un ensemble de tailles de police qui fonctionnent bien lorsqu'elles sont utilisées ensemble. Il peut également fournir des classes que nous pouvons appliquer à des champs de formulaire pour les mettre en page de manière efficace page.

Bootstrap 9 est un de la plus populaire et largement utilisé CSS cadres, et cela volonté donner utilisateurs un immense montant de Puissance à contrôle la Regardez et ressentir du app, sans pour autant ayant à écrire tout CSS nous-mêmes.Bootstrap est non le remplacement d'un concepteur réel - son style visuel par défaut a gagné 't gagner des prix de design. Mais, pour une application interne comme service, il est parfait. Cela fera paraître notre application bien.

À tour notre laid s'identifier et s'inscrire formes dans quelque chose nous pouvez être fier , nous devons installer Bootstrap, configurer dans notre portefeuille d'actifs de l 'application Rails, 10 puis faire quelques changements à la marge bénéficiaire prévoit les Devise écrans.

Installation de Bootstrap

Il existe trois façons d’installer Bootstrap dans une application Rails: en tant que Ruby Gem, en référençant une version disponible au public hébergée sur un CDN 11, ou en la téléchargeant et en la stockant dans le source de notre application .

Nous allons utiliser ce dernier, assisté d'un outil appelé Bower. 12 Plus tard dans le livre, nous aurons besoin d'utiliser certains actifs avant (CSS et JavaScript bibliothèques) aren 't disponible comme RubyGems, alors Tonnelle volonté devenir notre un arrêt magasinez pour tout ce qui se fait au début (plutôt que de faire gérer certains actifs via notre Gemfile et certains par Bower; voir l'encadré ci-dessous pour plus d'informations à ce sujet. décision).

À installer Bootstrap en utilisant Tonnelle, nous allons premier avoir besoin à installer Tonnelle; puis nous allons instruisons il à Télécharger et installer Bootstrap; et, enfin, nous allons configurer le pipeline d'actifs pour faire Bootstrapdisponible.

Installer Bower

Tonnelle factures lui-même comme une paquet directeur pour la Web. Il était créé par Twitter et est analogue à RubyGems, mais gère l'extrémité avant les atouts (comprenant Les frameworks CSS comme les bibliothèques Bootstrap et JavaScript comme Angular). Tonnelle est

écrit en JavaScript, et nécessite donc un runtime JavaScript pour fonctionner. Cela signifie que vous aurez à installer Node.js.

À installer Noeud, 13 simplement visite http://nodejs.org et suivre la instructions pour votre en fonctionnement système. Dans particulier, vous peut vouloir à vérifier en dehors la page sur l’installation de Node via des gestionnaires de packages, 14 car il dispose d’une documentation complète pour systèmes.

Une fois que vous avez installé nœud, vous aurez accès à l'application en ligne de commande de NPM. Ceci est un gestionnaire de paquets pour JavaScript, et nous allons l' utiliser pour installer Bower.

$ npm installer -g bower

 

Il peut sembler comique d'installer un gestionnaire de paquets juste pour installer un autre gestionnaire de paquets que nous allons utiliser à côté de notre base-Ruby existante, directeur chargé d'emballage, mais que l ' Comment il est.Tonnelle est Aller à faire notre vies Plus facile par nous donnant un contrôle clair et complet sur nos actifs initiaux. Cette configuration initiale va être plus que la peine il.

Avec Bower installé, nous pourrions gérer nos dépendances à l’aide de l’ application de ligne de commande bower . Cependant, il y a un bijou Ruby appelé Bower-rails qui rend notre interaction avec Bower un peu plus « Rails-like, »donc Let 's installer cela aussi en l'ajoutant à notre Gemfile .

connexion / installer-bootstrap / shine / Gemfile              

gem 'bower-rails'

 

Nous pouvons l'installer avec Bundler.

$ bundle install

 

La pierre précieuse bower-rails fait deux choses pour nous. Tout d'abord, cela nous permet de spécifier des dépendances dans une simple fichier appelé Bowerfile , lequel volonté être Plus facile à travail avec le format JSON 15 requis par l’ application en ligne de commande bower . Bower-rails fournit également des tâches de rake pour exécuter Bower pour nous.

$ bundle exec rake -T bower

râteau bower: cache: propre               # Effacer la tonnelle cache

râteau tonnelle: propre               # Essayer de ne garder que des fichiers ... rake bower: installer [options]               # Installer les composants du râteau Bower bower: installer: déploiement [options]               # Installer les composants de bower ... rake bower: installer: développement [options] # installer les deux dépendances ...

rake bower: installer: production [options] # Installer uniquement les dépendances, exc ...



19