diff --git a/README.md b/README.md index b9a7993..b19387e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Préambule -Slides du cours disponibles [ici](http://slides.com/women_on_rails/week-3) +Slides du cours disponibles [ici](http://slides.com/women_on_rails/week-4) Ce tutoriel a pour objectif de s'essayer à la console Ruby et de comprendre l'utilisation du langage Ruby dans le projet ``` Curiosities```, dans le cadre du cycle 1 des ateliers Women On Rails. @@ -10,215 +10,27 @@ Ce tutoriel a pour objectif de s'essayer à la console Ruby et de comprendre l'u Vous pouvez retrouver les commandes utiles pour le terminal, git et la console Ruby On Rails [ici](https://women-on-rails.github.io/guide/main_commands). -## Découvrir l'univers de Ruby en voyageant sur de bonnes Rails +## La console Ruby -Regardez l'architecture du projet. -Vous devriez voir plusieurs fichiers et dossiers, dont les principaux : -- ````app```` : Contient principalement les contrôleur, les vues, les modèles et les assets de l'application -- ````config```` : Contient les fichiers de configuration relatifs à l'application -- ````db```` : Contient tout ce qui permet de construire la base de donnée -- ````Gemfile```` : Contient la liste des plug-ins déjà existants qui vont être utilisés dans l'application -Si vous ouvrez le dossier ````app````, vous découvrirez les dossiers suivants: -- contrôleur (````controllers````) : Ils réagissent aux actions des utilisateurs et vont chercher les données dans la base (grâce aux modèles) pour les mettre à disposition des vues. -- modèles (````models````) : Ce sont des objets assurant la gestion des données. -- vues (````views````) : Elles correspondent à la manière d'afficher les informations à l'utilisateur. Il s'agit généralement d'une combinaison de code HTML et de Ruby dans des fichiers .html.erb. -- ````assets```` : Ce sont les images, les morceaux de code javascript et les feuilles de style en CSS utilisés dans les vues. # Étape 2 : Lire l'exercice et se lancer -Ouvrez votre projet avec Cloud9, ou l'éditeur que vous utilisez si vous avez une installation native. - -### S'essayer à la console et manipuler ruby - -Ouvrez une console ruby en tapant ```irb``` dans votre terminal et maintenant passons aux exercices ! - -1. **Appliquez des méthodes préconstruites sur une variable** - - Déclarez une variable avec une `String` (un texte est une suite de lettres, une "chaîne de caractères", que nous appellerons String) à l'intérieur comme ceci par exemple : - ``` Console - hello = 'hello, world!' - ``` - - Trouvez et appliquez *les* méthodes qui vont mettre en majuscule toute la string et la séparer en plusieurs parties. - - Un principe intéressant de ruby, c'est que vous pouvez **enchaîner** vos méthodes. Cela vous permet d'appliquer en une seule ligne toutes les méthodes pour transformer la String. Par exemple : ```hello.upcase.size```. - - N'hésitez pas à chercher dans la doc Ruby toute opération que vous pouvez faire quand vous avez une String à disposition. - - Essayez aussi avec des Integer (nombres entiers). - -2. **Utilisez .each sur un array** - - Définissez un `Array` (tableau, ou liste d'éléments) et jouez l'itérateur `.each`. - - Un Array peut se définir de nombreuses façons, par exemple : - ``` Console - tableau1 = ["Salut", "apprenties", "développeuses"] - - element1 = 'Bonjour' - element2 = 'les' - element3 = 'Rubyistes' - tableau2 = [element1, element2, element3] - ``` - - Et voici la syntaxe de la boucle **each** - ``` Console - tableau1.each do |element| - # écrire ce que vous voulez faire avec chacun des éléments du tableau - element.upcase - end - ``` - - Allez voir dans la doc ruby des Enumerable ce que vous pouvez faire avec toutes les listes (Array entre autres). - -3. **Écrivez une méthode et utilisez-là avec différents arguments** - - Une méthode se déclare comme suit. Par exemple pour fusionner deux textes en une phrase : - ``` Console - def nom_methode(parameter1, parameter2) - # écrire ce que la méthode fait, par exemple ici faire une chaîne de caractères qui "joint" les deux Strings avec " et " - "#{parameter1} et #{parameter2}" - end - ``` - - Et s'appelle dans la console comme ceci: - ``` Console - nom_methode("Découvrir", "s'amuser") - - argument1 = "coder" - argument2 = "jouer" - nom_methode(argument1, argument2) - ``` - - Maintenant, imaginez une méthode qui donne la somme de 2 paramètres, si ces paramètres sont entiers. - ``` Console - def somme # à vous de définir les paramètres - # à vous de définir le code - end - somme # à vous d'appeler somme avec plusieurs valeurs pour voir si ça marche - ``` - - À votre tour (et n'oubliez pas, Google et StackOverflow sont vos nouveaux meilleurs amis) ! - -4. **Écrivez une classe avec plusieurs méthodes et créez plusieurs instances de cette classe** - - Imaginez une classe qui définirait les caractéristiques de votre animal préféré (Grumpy cat, non ?). - - Pour rappel, une classe ressemble à cela : - ``` Console - class Animal - def roar - puts 'Miaougrmphf' - end - end - ``` - - Et vous pouvez l'utiliser ainsi : - ``` Console - grumpy = Animal.new - grumpy.roar - ``` - - Amusez-vous à créer plein de méthodes ! - -### Application au projet Curiosités +## Application au projet Curiosités Ouvrez votre projet avec Cloud9, ou l'éditeur que vous utilisez si vous avez une installation native. Si vous utilisez SublimeText, vous pouvez faire subl . dans la console pour ouvrir directement votre projet. (subl c'est SublimeText, l'espace c'est parce que la commande est finie, et le point c'est pour dire "ouvre dans Sublime Text tout le dossier dans lequel je suis, en un coup"). -#### Ouvrir le contrôleur et la vue principaux de l'application - -Nous allons manipuler deux fichiers dans cet exercice : le contrôleur ````home_controller```` et la seule vue liée à ce contrôleur. -Essayez de les trouver et ouvrez les avec votre éditeur de texte. - -Quelques notions : - -Ruby On Rails permet d'utiliser au mieux le [protocole HTTP](https://openclassrooms.com/courses/les-requetes-http), sur lequel repose la navigation Web. Il y a 4 types de requêtes principales en HTTP : -- GET (afficher une page), -- POST (créer une nouvelle ressource), -- PUT (pour modifier entièrement la ressource, ou PATCH pour la modifier partiellement), -- DELETE (supprimer une ressource). - -Suite à chaque requête, le serveur envoie une réponse. - -De plus, il y a 7 actions de base dans chaque contrôleur Rails: -- SHOW : affiche une ressource en particulier -- INDEX : affiche la liste de toutess les ressources d'un meme type -- NEW : affiche le formulaire pour créer une nouvelle ressource -- CREATE : une fois le précédent formulaire complété, crée la ressource -- EDIT : affiche le formulaire d’édition d'une ressource -- UPDATE : met a jour une ressource spécifiée -- DESTROY : supprime une ressource spécifique - -Petit indice : Le controlleur ```Home``` n'a que l'action ```index``` et la vue qui nous intéresse pour cet exercice est liée à cete action (elle a le même nom que l'action, et c'est comme ça que Ruby on Rails la retrouve). - -#### Modifier la vue et le contrôleur pour afficher des données - -Lancez un serveur Rails avec le bouton ```Run Project``` dans votre workspace Cloud9 pour pouvoir visualiser vos changements (ou avec la commande ```rails server``` dans votre terminal si vous avez une installation native). L'url à utiliser dans le navigateur sera indiquée dans le terminal. - -![Page de base](/images/readme/vue_navigateur.png) - -Pour le moment, tout ce que vous voyez affiché sur votre navigateur (lorsque vous lancez votre serveur et que vous allez sur l'adresse indiquée par votre console) est contenu dans le fichier ```index.html.erb```. - -![Page de base](/images/readme/contenu_dans_html.png) - -Nous allons changer cela et définir des variables dans la méthode ``` index ``` du contrôleur ```home``` qui contiendront le texte à afficher. - -> Important : -> Notez que les variables définies dans le contrôleur sont précédées par le caractère @. Cela veut dire que la variable sera accessible dans la vue liée à la méthode dans laquelle elle est définie. -> Si la variable n'est pas précédée d'un @, elle ne sera accessible que dans le contexte de la méthode ```index```. - -![Page de base](/images/readme/contenu_dans_variables.png) - -> Astuce: -> Les symboles ```<% %>``` que vous voyez dans le fichier ```index.html.erb``` servent à executer du code ruby dans une vue HTML. -> Si on y rajoute le caractère ```=```, cela permet d'afficher quelque chose. -> Par exemple ``` <%= @name %>``` affiche le contenu de la variable ```@name``` dans la vue ```index.html.erb```. - -Appliquez cela à votre propre application puis rechargez la page du navigateur. -Normalement, l'affichage ne devrait pas avoir changé car le contrôleur communique les variables et leur contenu à la vue ```index.html.erb```. - -Maintenant, définissons une variable locale (variable non précédée du caractère @) dans notre méthode ```index``` et utilisons la dans la vue ```index.html.erb```. - -![Page de base](/images/readme/avec_variable_non_propagee.png) - -Rechargez la page de votre navigateur. Vous devriez avoir une erreur qui s'affiche. La variable définie sans @ étant accessible seulement dans le contexte de la méthode ```index``` du contrôleur ```home```, elle n'est pas reconnue par la vue ```index.html.erb```. - -![Page de base](/images/readme/erreur.png) - -Enlevez la variable problématique dans la vue et dans le contrôleur. - -#### Manipuler des objets dans le contrôleur - -Retournez dans le contrôleur ```home``` et définissez un tableau de chaines de caractères dans la méthode ```index```. - -![Page de base](/images/readme/variable_tableau.png) - -Puis, affichez les éléments de votre tableau dans la vue ```index.html.erb``` en utilisant une boucle ```each```. - -![Page de base](/images/readme/html_avec_boucle.png) -Rafraichissez la page de votre navigateur et voila ! Vous avez les éléments contenus dans votre tableau qui s'affichent à l'écran. +- creation du modèle Curiosity +- creation en console de nouvelles curiosités en base de données +- ajout de validations sur le modele pour obliger a avoir un nom -![Page de base](/images/readme/vue_avec_tableau.png) -Pour aller plus loin, vous pouvez créer une nouvelle classe et remplacer le tableau de chaines de caractères par un tableau contenant plusieurs instances de cette classe. Dans la vue, vous pourriez afficher un attribut de chacune des instances du tableau. # Étape 3 : Enregistrer les modifications sur le répertoire distant [Enregistrer vos modifications et les envoyer sur votre répertoire Github](https://women-on-rails.github.io/guide/push_project) # Pour aller plus loin : -- Le protocole HTTP : https://openclassrooms.com/courses/les-requetes-http -- Les actions CRUD : https://fr.wikipedia.org/wiki/CRUD -- La documentation officielle de Ruby On Rails : http://guides.rubyonrails.org/ -- En savoir plus sur les controleurs : http://guides.rubyonrails.org/action_controller_overview.html ou -- Les conditions : https://www.grafikart.fr/formations/apprendre-ruby/conditions -- Les boucles : https://www.grafikart.fr/formations/apprendre-ruby/loops -- Les méthodes : https://www.grafikart.fr/formations/apprendre-ruby/method -- Les classes et instances : https://www.grafikart.fr/formations/apprendre-ruby/poo-objet -- Tableaux, hashes et symboles : https://www.grafikart.fr/formations/apprendre-ruby/array-hash ou https://zestedesavoir.com/tutoriels/634/une-introduction-a-ruby/497_les-bases/2490_les-tableaux/ -- Les booléens : http://www.tonyryudev.com/joomla3/index.php/menu-mes-developpements/menu-cours-ruby-rgss/4-ruby-cours-n-3-les-booleens-et-les-calculs-logiques -- Découverte des variables et de leur contexte : https://hackademy.io/tutoriel-videos/introduction-ruby-partie-4 diff --git a/images/readme/avec_variable_non_propagee.png b/images/readme/avec_variable_non_propagee.png deleted file mode 100644 index 9d83012..0000000 Binary files a/images/readme/avec_variable_non_propagee.png and /dev/null differ diff --git a/images/readme/contenu_dans_html.png b/images/readme/contenu_dans_html.png deleted file mode 100644 index 61b97d6..0000000 Binary files a/images/readme/contenu_dans_html.png and /dev/null differ diff --git a/images/readme/contenu_dans_variables.png b/images/readme/contenu_dans_variables.png deleted file mode 100644 index 5271313..0000000 Binary files a/images/readme/contenu_dans_variables.png and /dev/null differ diff --git a/images/readme/erreur.png b/images/readme/erreur.png deleted file mode 100644 index c7fdcf9..0000000 Binary files a/images/readme/erreur.png and /dev/null differ diff --git a/images/readme/html_avec_boucle.png b/images/readme/html_avec_boucle.png deleted file mode 100644 index a44513d..0000000 Binary files a/images/readme/html_avec_boucle.png and /dev/null differ diff --git a/images/readme/variable_tableau.png b/images/readme/variable_tableau.png deleted file mode 100644 index d9c570a..0000000 Binary files a/images/readme/variable_tableau.png and /dev/null differ diff --git a/images/readme/vue_avec_tableau.png b/images/readme/vue_avec_tableau.png deleted file mode 100644 index b46d701..0000000 Binary files a/images/readme/vue_avec_tableau.png and /dev/null differ diff --git a/images/readme/vue_navigateur.png b/images/readme/vue_navigateur.png deleted file mode 100644 index 40be24d..0000000 Binary files a/images/readme/vue_navigateur.png and /dev/null differ