Création d'un blog de galerie d'images avec Symfony Flex: la configuration –

Cet article fait partie d'un projet zéro-à-héros – un blog de galerie multi-images – pour l'analyse comparative des performances et les optimisations. (Voir le repo ici.) Dans cette partie, nous allons mettre notre projet en place afin que nous puissions l'affiner dans les prochains posts, et l'amener à une perfection rapide.

De temps en temps vous devez créer un nouveau référentiel de projet, exécutez cette commande git init localement et lancer un nouveau projet génial. Je dois admettre que j'aime le sentiment de commencer quelque chose de nouveau;

Lao Tzu a dit:

Le voyage de mille miles commence par un pas

Nous pouvons penser à la configuration du projet comme la toute première étape de nos mille miles (utilisateurs!) périple. Nous ne savons pas exactement où nous allons nous retrouver, mais ce sera amusant!

Nous devrions également garder à l'esprit les conseils du prof. Donald Knuth:

L'optimisation prématurée est la racine de tout mal (ou du moins de la plupart) dans la programmation.

Notre chemin vers une application web stable, robuste et performante commencera par une application simple mais fonctionnelle – le soi-disant produit minimum viable (MVP). Nous remplirons la base de données avec du contenu aléatoire, effectuerons quelques tests et améliorerons les performances de manière incrémentielle. Chaque article de cette série sera un point de contrôle sur notre voyage!

Cet article couvrira les bases de la configuration du projet et de l'organisation des fichiers pour notre projet Symfony Flex. Je vais aussi vous montrer quelques conseils, astuces et scripts d'aide que j'utilise pour accélérer le développement

Que construisons-nous?

Avant de commencer un projet, vous devriez avoir une vision claire de la destination finale. Où allez-vous? Qui utilisera votre application et comment? Quelles sont les principales caractéristiques que vous construisez? Une fois que vous avez cette connaissance, vous pouvez préparer votre environnement, bibliothèques tierces, et plonger dans le développement de la prochaine grande chose.

Dans cette série d'articles, nous construirons un simple blog de galerie d'images où les utilisateurs peuvent s'inscrire ou connectez-vous, téléchargez des images et créez des galeries d'images publiques simples avec des descriptions écrites au format Markdown.

Nous utiliserons le nouveau Symfony Flex et Homestead (assurez-vous de J'ai lu des tutoriels sur eux, car nous n'allons pas les couvrir ici). Nous avons choisi Flex parce que Symfony 4 est sur le point de sortir (si ce n'est déjà fait, au moment où vous lisez ceci), car il est infiniment plus léger que l'ancienne version et se prête parfaitement à une optimisation pas à pas, et c'est aussi l'étape naturelle dans l'évolution du framework PHP d'entreprise le plus populaire.

Tout le code référencé dans cet article est disponible au GitHub repo .

Nous allons utiliser le moteur de création de modèles Twig, les formulaires Symfony et l'ORM Doctrine avec les UUID comme clés primaires.

Les entités et les itinéraires utiliseront des annotations; nous aurons une simple authentification par e-mail / mot de passe et nous préparerons des bases de données pour remplir la base de données.

Démarrer avec l'application

Pour essayer l'exemple que nous avons préparé, procédez comme suit:

• Mettre en place une base de données vide appelée "blog".
• Cloner le dépôt du projet depuis GitHub.
• Lancer composer installer . Si vous ouvrez maintenant l'application dans votre navigateur, vous devriez voir une exception concernant les tables de base de données manquantes. C'est bien, puisque nous n'avons créé aucune table jusqu'ici.
• Mettez à jour le fichier .env dans le répertoire racine de votre projet avec une chaîne de connexion à la base de données valide (mise à jour des informations d'identification). script d'initialisation de la base de données ./ bin / refreshDb.sh et attendez qu'il génère de belles galeries d'images.
• Ouvrez l'application dans votre navigateur et profitez-en!

Après l'exécution de bin / refreshDb. sh vous devriez être en mesure de voir la page d'accueil de notre site:

Vous pouvez vous connecter à l'application avec les identifiants user1@mailinator.com et mot de passe 123456 . Voir LoadUserData fixture class pour plus de détails sur les utilisateurs générés.

Partir de zéro

Dans cette section, nous décrirons comment configurer un nouveau projet à partir de zéro. N'hésitez pas à jeter un coup d'œil à l'exemple de base de données de l'application et voir les détails.

Après avoir créé un nouveau projet basé sur symfony / skeleton en exécutant la commande

 -project "symfony / skeleton: ^ 3.3" multi-utilisateur-galerie-blog

… nous pouvons d'abord définir la stabilité minimale de "dev" à cause de certains paquets de pointe:

 composer config minimum-dev de stabilité

… et requièrent ensuite des paquets supplémentaires (certains d'entre eux sont référencés par leurs alias, la nouvelle fonctionnalité apportée par Flex):

 composer req annotations sécurité orm modèle validateur d'actifs ramsey / uuid-doctrine

Les dépendances utilisées uniquement dans l'environnement dev sont obligatoires avec le drapeau - dev :

 compositeur req --dev fzaninotto / faker doctrine / Doctrine-Fixtures-Bundle

Flex fait un travail sérieux pour nous dans les coulisses, et la plupart des bibliothèques (ou bundles) sont déjà enregistrées et configurées avec des valeurs par défaut assez bonnes! Vérifiez le répertoire config . Vous pouvez vérifier toutes les dépendances utilisées dans ce projet dans le fichier composer.json

Les routes sont définies par des annotations, ainsi les suivantes seront automatiquement ajoutées dans config / routes.yaml ]:

 contrôleurs:
  ressource: ../src/Controller/
  type: annotation

Base de données, scripts et accessoires

Configurez la variable d'environnement DATABASE_URL (par exemple, en éditant le fichier .env ) pour configurer une connexion DB fonctionnelle. Si vous utilisez notre propre Homestead Improved (recommandé), vous avez une base de données appelée homestead avec la propriété user / pass / ] secret . Un schéma DB peut être généré à partir d'entités existantes en exécutant:

 ./ bin / console doctrine: schema: create

Si cela ne fonctionne pas, essayez d'exécuter la console en invoquant le binaire PHP, comme ceci:

 php bin / console doctrine: schema: create

Si cette étape est correctement exécutée dans la section "Premiers pas avec l'application" ci-dessus, vous devriez pouvoir voir les nouvelles tables dans la base de données (pour Galerie Image et Utilisateur entités).

Si vous voulez supprimer le schéma de la base de données, vous pouvez exécuter:

 ./ bin / console doctrine: schema: drop --full-database --Obliger

Fais-le jusqu'à ce que tu le fasses!

Je ne peux pas imaginer développer une application aujourd'hui sans avoir des appareils de données (c'est-à-dire, des scripts pour ensemencer la DB). Avec quelques scripts simples, vous pouvez remplir votre base de données avec du contenu réaliste, ce qui est utile quand il s'agit de développement et de tests rapides d'applications, mais c'est aussi un pré-requis pour un pipeline CI sain.

Bundle est un excellent outil pour gérer les installations de données car il prend en charge les appareils commandés (vous pouvez contrôler l'ordre d'exécution), partager des objets (via des références) entre les scripts et accéder au conteneur de service. La configuration des services ne permet pas l'accès public aux services, car la meilleure pratique consiste à injecter toutes les dépendances. Nous aurons besoin de quelques services dans nos installations, donc je vais rendre tous les services disponibles dans App Services en ajoutant ce qui suit au config / services.yaml : [19659041] App Service :
  ressource: '../src/Service/*'
  public: vrai

J'utilise aussi Faker pour obtenir des données aléatoires mais réalistes (noms, phrases, textes, images, adresses, …).

Jetez un coup d'œil au script pour les galeries d'ensemencement avec des images aléatoires pour avoir une idée de la fraîcheur de cette combinaison

Habituellement, je combine des commandes pour supprimer le schéma de base de données existant, créer le nouveau schéma DB, charger des fixtures de données et autres tâches répétitives dans un seul shell script – par exemple, bin / refreshDb.sh – donc je peux facilement régénérer le schéma et charger des données factices:

 # Drop schema
./bin/console doctrine: schema: drop --full-database --force

# Créer un schéma
doctrine ./bin/console: schéma: créer

# Appareils de chargement
Doctrine ./bin/console: fixtures: load -n --fixtures src / DataFixtures / ORM

# Installer les actifs
./bin/console assets: install --symlink

# Vider le cache
Cache ./bin/console: effacer

Assurez-vous de restreindre l'exécution de ce script en production, ou vous allez avoir du plaisir sérieux à un moment donné.

On peut argumenter que les données générées aléatoirement ne peuvent pas reproduire différents cas de bords, donc votre CI peut parfois échouer ou passer en fonction de la génération de données. C'est vrai, et vous devriez vous assurer que tous les cas de bords sont couverts avec vos appareils.

Chaque fois que vous trouvez un cas de bordure causant un bogue, assurez-vous de l'ajouter aux appareils de données. Cela vous aidera à construire un système plus robuste et empêchera des erreurs similaires dans le futur.

Controllers, Templates and Services

Les classes Controller sont situées sous le répertoire src Controller et ne prolongent pas les existantes. Classe de contrôleur fournie par FrameworkBundle . Toutes les dépendances sont injectées via les constructeurs, ce qui rend le code moins couplé et plus facile à tester. Je n'aime pas "magie" pour les choses simples!

Dans la nouvelle structure de répertoire Symfony, les modèles sont situés sous modèles .
J'ai créé un modèle maître base.html .twig qui définit la structure HTML de base et référence les ressources externes.

D'autres modèles l'étendent et remplacent ses blocs (par exemple, feuilles de style, corps, en-tête, contenu, JavaScripts et autres blocs). Les ressources sont référencées à l'aide de la fonction Twig asset car elle nous permettra de mieux contrôler ultérieurement (par exemple, en modifiant les hôtes et en ajoutant des chaînes de requête pour la gestion des versions). Les autres modèles sont organisés dans des sous-répertoires du répertoire src / templates

Les services sont automatiquement enregistrés et configurés par défaut dans la configuration de service de Symfony. De cette façon, vous n'avez pas besoin de configurer manuellement les extensions Twig avec des filtres pour la prise en charge de Markdown et de générer des URL pour les entités Image situées sous src / Twig

Gestion du code source / Contrôle de version

vous connaissez déjà les bases de Git et comprendre comment fonctionne .gitignore

Symfony Flex gère le projet par défaut .gitignore en ajoutant des fichiers et dossiers connus la liste des ignorés. Par exemple, Flex ajouterait les fichiers suivants à la liste des ignorés pour symfony / framework-bundle :

 .env
/ public / bundles /
/ var /
/vendeur/

Nous allons stocker les fichiers téléchargés dans var / uploads nous devons donc le créer en premier. Au lieu de le faire manuellement sur chaque configuration de projet, nous pouvons ajouter une commande pour créer tous les répertoires nécessaires à l'événement post-install-cmd dans notre section composer.json et faire Composer Exécuter cela pour nous (par exemple, "mkdir -p var / uploads" ). En savoir plus sur les scripts compositeurs ici et les scripts automatiques ici .

Nous devrions ajouter tous les autres répertoires et fichiers que nous voulons ignorer .gitignore mais en dehors de la section commentée et clairement marquée, gérée par Flex.

Autres astuces et dépannage

• Vérifiez votre fichier Homestead.yaml pour les variables d'environnement. Si vous avez déjà une variable APP_ENV Symfony n'essaiera pas de charger celle du fichier .env . Votre meilleur pari est de commenter la section APP_ENV dans Homestead.yaml juste pour être sûr.
• Cache effacer dans votre machine vagabonde peut échouer en raison d'autorisations. Vous pouvez simplement exécuter sudo rm -rf var / cache / * pour vider le cache manuellement ou, si cela échoue, le supprimer de l'extérieur de la machine virtuelle, sur la machine hôte dans le dossier partagé.

  Dans cet article, nous avons réussi à mettre en place un projet avec des entités, des contrôleurs, des modèles et des scripts d'aide. La base de données est remplie avec du contenu fictif, et les utilisateurs peuvent enregistrer et créer leurs galeries.

  Dans le prochain article, nous allons montrer comment remplir la base de données avec un ensemble de données plus important pour tester les performances de l'application. environnement, comment mettre en place une suite de tests simple, et simple CI basé sur Docker.

  
  

  Zoran Antolović est un ingénieur et un résolveur de problèmes de Croatie. CTO, propriétaire de démarrage, écrivain, conférencier motivateur et généralement le bon gars. Il adore la productivité, déteste les distractions et parfois les choses sur les ingénieurs.