Integral Service

Sylius, comment mettre en place un mode catalogue

Integral Service — Invalid Date

Sylius est un framework PHP basé sur Symfony qui offre des fonctionnalités E-Commerce. En plein essor depuis plus de 5 ans maintenant, la technologie grandit et sa communauté avec !

Sylius se démarque notamment de ses principaux concurrents (Magento, Prestashop…) par sa grande adaptabilité aux besoins métiers spécifiques. A contrario, une plus grande souplesse implique une montée en compétence plus ardue et des connaissances solides.

Integral Service développe des sites E-Commerce avec Sylius depuis maintenant 5 ans. Nous avons vu grandir la technologie, depuis l’alpha jusqu'à aujourd'hui. A notre actif, on retrouve des plateformes E-Commerce automatisées avec différents ERP (Gestimum, Wavesoft, Business Central, Sage X3, Divalto, ...) mais aussi des rendus 3D, ou des configurateurs de produits !

Dans cet article, nous souhaitons vous proposer une méthode exhaustive afin de développer un mode Catalogue complètement dynamique dans votre projet Sylius. Le mode catalogue désigne le fait d’avoir la fonctionnalité de consultation des produits, sans les fonctions de tunnel de commande et d’achat.

Nous commencerons par la préparation de l’activation du mode catalogue dans l’interface d’administration. Ensuite nous expliquerons comment restreindre l’accès au tunnel de commande. Et enfin nous terminerons par l’affichage conditionnel des différentes informations liées à l’achat en ligne.

Ce guide de développement requiert un minimum de connaissances du framework Symfony ainsi que de Sylius. Le code présenté dans ce guide est tiré d’un projet exemple basé sur Sylius v1.11.7 et Symfony v5.4.12.

Ajout du mode catalogue à l’interface d’administration des données

La première chose à déterminer est l’endroit ou l’on veut faire apparaître l’option “Mode Catalogue” dans notre interface d’administration.

Sylius introduit le concept de canaux (Channel), qui permet de gérer plusieurs boutiques avec une seule interface d’administration, c’est justement ici que l’on va venir se brancher ! Ainsi vous pourrez activer ou désactiver le mode catalogue pour chaque canal de votre application.

Pour ajouter un nouveau paramètre à nos canaux, il nous faut ajouter un champ dans l’entité Channel de Sylius.

Pour plus de détails sur la customisation des modèles : https://docs.sylius.com/en/1.12/customization/model.html

Ajouter catalogMode dans l’entité Channel

D’abord, on vient ajouter l’attribut booléen catalogMode dans l’entité Channel.

//src/Entity/Channel/Channel.php
class  Channel  extends  BaseChannel
{
	/**
	* @ORM\Column(name="catalog_mode", type="boolean", nullable=false, options={"default" : false})
	*/
	private  bool  $catalogMode  =  false;

	/**
	* @return bool
	*/
	public  function getCatalogMode(): bool
	{
		return  $this->catalogMode;
	}

	/**
	* @param bool $catalogMode
	* @return Channel
	*/
	public  function setCatalogMode(bool  $catalogMode): Channel
	{
	$this->catalogMode  =  $catalogMode;
		return  $this;
	}
}

Ensuite on génère la migration associée. $ php bin/console doctrine:migration:diff

Puis on l’exécute. $ php bin/console doctrine:migration:migrate

//src/Migrations/VersionXXXXXXXXX.php
final  class  Version20220802073139  extends  AbstractMigration
{
	public  function getDescription(): string
	{
		return  '';
	}	

	public  function up(Schema  $schema): void
	{	
		$this->addSql('ALTER TABLE sylius_channel ADD catalog_mode TINYINT(1) DEFAULT \'0\' NOT NULL');	
	}

	public  function down(Schema  $schema): void
	{
		$this->addSql('ALTER TABLE sylius_channel DROP catalog_mode');
	}
}

Ça y est ! On a ajouté notre attribut, maintenant il faut mettre à jour le formulaire des Channel pour pouvoir modifier sa valeur dans l’interface d’administration.

Ajouter le champ dans le formulaire Channel

Symfony introduit le principe d’extension de formulaire et Sylius le reprend afin de permettre aux développeurs de modifier librement les formulaires du framework !

Pour plus de détails sur la customisation des formulaires : https://docs.sylius.com/en/1.12/customization/form.html

D’abord il faut créer l’extension de formulaire qui va nous permettre d’afficher notre champ, fraîchement ajouté.

//src/Form/Extension/ChannelTypeExtension.php
final  class  ChannelTypeExtension  extends  AbstractTypeExtension
{
	public  function buildForm(FormBuilderInterface  $builder, array  $options): void
	{
		$builder->add('catalogueMode', CheckboxType::class, [
			'label'  => 'channel.form.label.catalog_mode',
			'required'  =>  false,
		]);
	}

	public  static  function getExtendedTypes(): iterable
	{
		return [ChannelType::class];
	}
}

Une fois le fichier créé, il faut le déclarer dans la configuration des services de l’application.

#config/services.yaml
app.form.extension.type.channel:
	class: App\Form\Extension\ChannelTypeExtension
	tags:
		- { name: form.type_extension, extended_type: Sylius\Bundle\ChannelBundle\Form\Type\ChannelType }

Enfin, il ne reste plus qu'à modifier le template d’affichage du formulaire pour y inclure notre champ custom.

{# templates/bundles/SyliusAdminBundle/Channel/Form/_lookAndFeel.html.twig #}

<div  class="ui hidden divider"></div>

<h4  class="ui top attached large header">{{  'sylius.ui.look_and_feel'|trans  }}</h4>

<div  class="ui attached segment">
	{{  form_row(form.themeName) }}
</div>

<div  class="ui attached segment">
	{{  form_row(form.locales) }}
	{{  form_row(form.defaultLocale) }}
</div>

<div  class="ui attached segment">
	{{  form_row(form.menuTaxon) }}
</div>

<div  class="ui hidden divider"></div>

<div  class="ui attached segment">
	{{  form_row(form.catalogueMode) }}
	{{  form_row(form.skippingShippingStepAllowed) }}
	{{  form_row(form.skippingPaymentStepAllowed) }}
	{{  form_row(form.accountVerificationRequired) }}
</div>

Et voilà ! nous avons un formulaire avec un champ custom prêt à l’emploi qui nous permet d’activer ou de désactiver le mode catalogue.

Restriction de l’accès au tunnel de commande

L’intérêt d’un mode catalogue est de masquer les fonctionnalités d’achat par défaut de Sylius pour ne proposer qu’un catalogue vitrine en ligne. Il nous faut donc restreindre l’accès au tunnel de commande de Sylius ainsi qu’à la page “Panier”. Il faut cependant être vigilant sur l’accès via API des différentes fonctionnalités mentionnées. Pour cela nous proposerons un blocage métier (avec le Processor) ainsi qu’un blocage d’accès aux pages avec un contrôleur agissant comme une sorte de pare-feu.

Extension de l’OrderProcessor

Sylius introduit le concept d’OrderProcessor. Il s’agit d’un composant qui est appelé à plusieurs étapes du processus de commande et qui va servir à appliquer la logique de calcul liée aux commandes (les différentes taxes, promotions, sélection des méthodes de livraison…).

Schéma de l’OrderProcessor par défaut de Sylius Source : https://docs.sylius.com/en/1.12/book/orders/orders.html

Dans le schéma ci-dessus, on peut voir qu’en réalité l’OrderProcessor est composé de plusieurs Processors, exécutés dans l’ordre décroissant de leur priorité. L’idée pour notre mode catalogue va être de créer un nouveau Processor avec la plus haute priorité afin de vérifier si le canal courant est en mode catalogue ou non. Si oui, alors nous lèverons une exception de type NotFound pour générer une erreur 404.

//src/Services/OrderProcessor/OrderCatalogProcessor.php
final  class  OrderCatalogProcessor  implements  OrderProcessorInterface
{
	private  ChannelContextInterface  $channelContext;

	public  function __construct(ChannelContextInterface  $channelContext)
	{
		$this->channelContext =  $channelContext;
	}

	public  function process(OrderInterface  $order): void
	{
		if ($this->channelContext->getChannel()->getCatalogMode()) {
			throw  new  NotFoundHttpException();
		}
	}
}

Ensuite, il suffit de configurer le Processor pour l’activer.

#config/services.yaml
app.service.order_processor.order_catalog_processor:
	class: App\Service\OrderProcessor\OrderCatalogProcessor
	tags:
		- { name: sylius.order_processor, priority: 70 }

La surcharge de la logique de l'OrderProcessor est donc terminée.

Création d’un contrôleur pour vérifier et rediriger les requêtes vers les pages interdites

Désormais nous avons restreint les logiques métier liées au tunnel de commande de notre application Sylius. Néanmoins, les utilisateurs pourront toujours accéder aux pages panier via une requête HTTP classique (avec l’url de la page par exemple).

L’idée va être de créer un contrôleur personnalisé qui va vérifier si le canal courant est en mode catalogue ou non, puis laisser passer les requêtes ou renvoyer une erreur.

//src/Controller/CatalogController.php
class  CatalogController  extends  AbstractController
{
	private  ChannelContextInterface  $channelContext;

	public  function __construct(ChannelContextInterface  $channelContext)
	{
		$this->channelContext =  $channelContext;
	}

	public  function checkCatalogMode(Request  $request): Response
	{
		if ($this->channelContext->getChannel()->getCatalogMode()) {
			throw  new  NotFoundHttpException();
		}

		$redirectController  =  $request->get('_redirect_controller');

		if (empty($redirectController)) {
			throw  new  MissingMandatoryParametersException('request is missing _redirect_controller parameter');
		}

		return  $this->forward($redirectController, $request->attributes->all());
	}
}

Enfin, il nous suffit de surcharger les routes définies par Sylius pour l’accès au tunnel de commande ainsi qu’à la page panier.

#config/routes/catalog_mode.yaml
sylius_shop_cart_summary:  
    path: /{_locale}/cart  
    methods: [GET]  
    defaults:  
        _controller: App\Controller\CatalogController:checkCatalogMode  
        _redirect_controller: sylius.controller.order:summaryAction  
        _sylius:  
            template: "@SyliusShop/Cart/summary.html.twig"  
  form: Sylius\Bundle\OrderBundle\Form\Type\CartType  
  
sylius_shop_checkout_address:  
    path: /{_locale}/checkout/address  
    methods: [GET, PUT]  
    defaults:  
        _controller: App\Controller\CatalogController:checkCatalogMode  
        _redirect_controller: sylius.controller.order:updateAction  
        _sylius:  
            event: address  
            flash: false  
            template: "@SyliusShop/Checkout/address.html.twig"  
  form:  
                type: Sylius\Bundle\CoreBundle\Form\Type\Checkout\AddressType  
                options:  
                    customer: expr:service('sylius.context.customer').getCustomer()  
            repository:  
                method: findCartForAddressing  
                arguments:  
                    - "expr:service('sylius.context.cart').getCart().getId()"  
  state_machine:  
                graph: sylius_order_checkout  
                transition: address  
  
sylius_shop_checkout_select_shipping:  
    path: /{_locale}/checkout/select-shipping  
    methods: [GET, PUT]  
    defaults:  
        _controller: App\Controller\CatalogController:checkCatalogMode  
        _redirect_controller: sylius.controller.order:updateAction  
        _sylius:  
            event: select_shipping  
            flash: false  
            template: "@SyliusShop/Checkout/selectShipping.html.twig"  
  form: Sylius\Bundle\CoreBundle\Form\Type\Checkout\SelectShippingType  
            repository:  
                method: findCartForSelectingShipping  
                arguments:  
                    - "expr:service('sylius.context.cart').getCart().getId()"  
  state_machine:  
                graph: sylius_order_checkout  
                transition: select_shipping  
  
sylius_shop_checkout_select_payment:  
    path: /{_locale}/checkout/select-payment  
    methods: [GET, PUT]  
    defaults:  
        _controller: App\Controller\CatalogController:checkCatalogMode  
        _redirect_controller: sylius.controller.order:updateAction  
        _sylius:  
            event: payment  
            flash: false  
            template: "@SyliusShop/Checkout/selectPayment.html.twig"  
  form: Sylius\Bundle\CoreBundle\Form\Type\Checkout\SelectPaymentType  
            repository:  
                method: findCartForSelectingPayment  
                arguments:  
                    - "expr:service('sylius.context.cart').getCart().getId()"  
  state_machine:  
                graph: sylius_order_checkout  
                transition: select_payment  
  
sylius_shop_checkout_complete:  
    path: /{_locale}/checkout/complete  
    methods: [GET, PUT]  
    defaults:  
        _controller: App\Controller\CatalogController:checkCatalogMode  
        _redirect_controller: sylius.controller.order:updateAction  
        _sylius:  
            event: complete  
            flash: false  
            template: "@SyliusShop/Checkout/complete.html.twig"  
  repository:  
                method: findCartForSummary  
                arguments:  
                    - "expr:service('sylius.context.cart').getCart().getId()"  
  state_machine:  
                graph: sylius_order_checkout  
                transition: complete  
            redirect:  
                route: sylius_shop_order_pay  
                parameters:  
                    tokenValue: resource.tokenValue  
            form:  
                type: Sylius\Bundle\CoreBundle\Form\Type\Checkout\CompleteType  
                options:  
                    validation_groups: 'sylius_checkout_complete'

#src/routes.yaml
sylius_catalog_mode:
	resource: "./routes/catalog_mode.yml"

Désormais l’accès aux pages et aux fonctionnalités du processus de commande est totalement restreint. Cependant, dans un projet Sylius, lorsqu’un utilisateur se connecte à son compte, le panier en cours de la session est fusionné avec celui enregistré pour cet utilisateur. Lorsque le mode catalogue est activé, nous ne voulons pas effectuer ce traitement. Il faut alors surcharger l’évènement correspondant afin de conditionner cette fonctionnalité.

//src/EventListener/UserCartRecalculationListenerDecorator.php
final class UserCartRecalculationListenerDecorator  
{  
  public function __construct(  
	  private CartContextInterface $cartContext,  
	  private OrderProcessorInterface $orderProcessor,  
	  private SectionProviderInterface $uriBasedSectionContext,  
	  private ChannelContextInterface $channelContext  
  ) {}  
 
  /**  
  * @param InteractiveLoginEvent|UserEvent $event  
  */  
  public function recalculateCartWhileLogin(object $event): void  
  {  
	  if ($this->channelContext->getChannel()->getCatalogMode()) {  
		  return;  
	  }  
	  
	  if (!$this->uriBasedSectionContext->getSection() instanceof ShopSection) {  
		  return;  
	  }  
	  
	  /** @psalm-suppress DocblockTypeContradiction */  
	  if (!$event instanceof InteractiveLoginEvent && !$event instanceof UserEvent) {  
		  throw new \TypeError(sprintf(  
			  '$event needs to be an instance of "%s" or "%s"',  
			  InteractiveLoginEvent::class,  
			  UserEvent::class  
		  ));  
	  }  
	  
	  try {  
		  $cart = $this->cartContext->getCart();  
	  } catch (CartNotFoundException) {  
		  return;  
	  }  
	  
	  Assert::isInstanceOf($cart, OrderInterface::class);  
	  
	  $this->orderProcessor->process($cart);  
  }  
}

Affichage conditionnel des prix et autres informations d’achat

Toutes les fonctionnalités et pages ayant été bloquées, il ne nous reste désormais plus qu’à conditionner l’affichage des boutons d’ajouts au panier et de toute autre information que vous ne souhaitez pas afficher en mode catalogue. L’objet channel est injecté automatiquement par Sylius dans les différentes pages publiques du site (dans le Shop). Il est donc très simple de conditionner un affichage avec Twig.

{# theme/MonTheme/bundles/SyliusShopBundle/Product/Show/_priceWidget.html.twig #}
…
{%  if  not  sylius.channel.catalogMode  and  not  product.variants.empty() %}
	{%  include  '@SyliusShop/Product/Show/_price.html.twig'  %}
{%  endif  %}
…

Néanmoins, pour l’interface d’administration de Sylius, les différents formulaires liés aux canaux peuvent être optimisés pour obtenir une meilleure UX. Pour cela, nous allons créer une extension twig qui nous permettra de savoir si un canal est en mode catalogue via son code.

//src/Twig/CatalogExtension.php
class  CatalogExtension  extends  AbstractExtension
{
	private  ChannelRepositoryInterface  $channelRepository;

	public  function __construct(ChannelRepositoryInterface  $channelRepository)
	{
		$this->channelRepository =  $channelRepository;
	}

	public  function getFunctions(): array
	{
		return [
			new  TwigFunction('isChannelCatalog', [$this, 'isCatalog'])
		];
	}

	public  function isCatalog($channelCode): bool
	{
		$channel  =  $this->channelRepository->findOneByCode($channelCode);

		if (empty($channel)) {
			throw  new  ChannelNotFoundException();
		}

		return  $channel->getCatalogMode();
	}
}

Conclusion

Finalement, le mode catalogue à été ajouté de manière totalement dynamique à notre projet Sylius et nous avons le contrôle total sur les différents rendus d’affichage que nous voulons obtenir.

L’idéal pour une fonctionnalité de ce type est de la développer dans un plugin Sylius afin de la réutiliser très simplement par la suite, et pourquoi pas la mettre à disposition de la communauté ! Peut-être qu’un article sur la création de plugins Sylius pourrait arriver prochainement…

N’hésitez pas à nous faire vos retours sur nos différents réseaux sociaux :

LinkedIn : https://fr.linkedin.com/company/integral-service-web

Twitter : https://twitter.com/IntegralWeb69

Instagram : https://www.instagram.com/integralweb69/

Facebook : https://www.facebook.com/integralweb69

Les nouveautés de Symfony 5

Integral Service — Invalid Date

Symfony 5 est disponible depuis le 21 Novembre 2019. Il est la suite logique de Symfony 4 qui a largement été applaudi par la communauté.

Une version simple et puissante

Symfony dans sa cinquième version a été conçue pour être plus simple à apprendre, à appréhender et à configurer. Bien sûr les installations et les déploiements ont été également grandement simplifiés.

Afin d'être dans la continuité de Symfony 4, cette nouvelle itération intègre Symfony Flex afin d'automatiser un maximum les tâches d'installation et configuration initiale. Les recettes de Symfony (Symfony recipes) utilisent largement ces concepts d'automatisation afin de proposer des centaines de bundles ou plugins aux développeurs.

Légère et rapide

Comme la version 4, ce nouvel opus s'allège grandement en supprimant plus de 37 000 lignes de code. De plus cet cure d'amaigrissement associé à quelques améliorations architecturales apporte une amélioration de performance de l'ordre de 7% sur la le coeur (core).

La communauté, Symfony et Sensio vont donc dans le même sens que les développements de PHP: s'alléger tout en proposant de meilleure performances à chaque itérations.

Une meilleure gestion de l'UTF-8

Cela avait été largement annoncé par la communauté mais Symfony 5 intègre un nouveau composant (appelé Component) appelé String qui apporte une grande avancée: Une API orientée objet qui permet de travailler avec :

Les bytes
Les code points
Les grapheme clusters

Cette API simplifiera grandement la vie des développeurs lorsqu'il faudra traiter ou manipuler des chaînes de caractères comme par exemple utiliser des fonctions de :

trim
replace
find in string
...

Un nouveau composant de gestion des notifications

Avec cette dernière version introduite par Fabien Potencier, il est mis en place un nouveau composant de gestion de notifications appelé Notifier. Comme son nom l'indique il va permettre d'envoyer des informations via de nombreux canaux comme Slack, Telegram, WhatsApp ou encore un simple email.

La gestion des secrets

Déjà introduite dans la dernière version de Symfony 4, la nouvelle gestion des secrets de SF5 est très appréciées. Ainsi à l'aide d'un jeu de clefs secrètes vous pourrez stocker des données sensibles de production (comme un mot de passe de base de données, une clef privée ou autre) entièrement chiffrée. Cette donnée pourra donc désormais être stockée dans votre gestionnaire de version préféré comme git. Et bien sûr cela a été bien intégré avec la gestion des environnements (.env).

Une migration facilitée

Enfin, pourrions nous dire, la mise à jour de la version 4.4 de symfony vers la version 5 est plutôt simple et rapide. Il suffi de supprimer toutes les dépréciations (fonctions, classes et librairies qui ne seront plus disponibles) et de lancer la migration.

Symfony 4 : un état des lieux avant la sortie

Integral Service — Invalid Date

La sortie de Symfony 4 approche à grand pas et est prévue pour fin Novembre (Yes!).

Nous vous proposons de faire un dernier tour du propriétaire, plus complet que notre précédent article, suite à l'annonce de la mise à disposition de Symfony Beta 4, dernière étape avant la sortie officielle de Symfony 4.0 stable.

Cette présentation a pour objectif de faire une cartographie macroscopique des nouveautés introduites par cette version majeure.

Un micro framework par défaut

Symfony 4 introduit un changement de philosophie et propose désormais aux développeurs de pouvoir utiliser et installer uniquement les composants qui lui sont strictement nécessaires.

La nouvelle édition standard de symfony ne contient désormais que le core du framework qu'on pourrait apparenter à un micro framework. Comme vous pouvez le constater dans la capture ci-dessous d'une installation Symfony 4 standard, on retrouve le strict nécessaire.

Vous remarquerez entre autre la disparition de Doctrine, Twig, ... dans le socle. On verra un peu plus loin qu'ils restent tout de même disponible.

Des changements dans l'arborescence des dossiers

Après avoir déjà eu le droit à un remaniement de la structure des dossiers pour les précédentes versions majeures de Symfony, SF 4 apporte aussi plusieurs modifications à ce sujet. Comme vous pouvez le remarquer dans la capture d'écran ci-dessous:

Suppression du dossier web remplacé par un dossier public
Disparition du dossier app
Un dossier config à la racine fait son apparition et contient l'ensemble des configurations de votre projet par packages
Une arborescence beaucoup plus "plate"

Pour les développeurs familiers avec la structure de dossier de Symfony 3, vous remarquerez de nombreux autres changements (déplacement de Kernel.php, modification de app.php en index.php etc...).

12 factor app

De nos jours, les applications sont bien souvent proposées avec des structures "As A Service". Le 12 factor app est une méthodologie pour créer des applications de ce type. Pour en savoir plus n'hésitez pas a lire la présentation en 12 chapitres de cette méthodologie sur le site officiel.

Dans les grandes lignes on peut retenir plusieurs objectifs:

Maximiser la portabilité de l'application en s'appuyant le moins possible sur des dépendances du système d'exploitation
Être compatible avec les plateformes de déploiements modernes (Cloud, Paas, ...)
Minimiser les différences entre les plateformes de production et développement et ainsi faciliter la mise en place du déploiement continu
Permettre le scaling de l'application sans avoir besoin de réaliser de grands changements dans l'application

Symfony 4 essaie de répondre au mieux à ces différentes problématiques.

Symfony Flex et les recettes

Symfony 4 introduit l'arrivée de Symfony Flex le nouvel installateur officiel du framework. Il remplace donc l'ancien installateur de Symfony standard édition et est d'ores et déjà compatible avec Symfony 3.3.

Symfony Flex n'est pas une nouvelle version de Symfony, mais bel et bien un outil à part entière.

Symfony Flex améliore sensiblement les processus d'installation dans Symfony et automatise les tâches (rébarbatives) comme installer ou désinstaller les bundles et la gestion de Composer. Flex apporte notamment la possibilité d'exécuter et automatiser des tâches avant et après l'exécution d'une tâche Composer. Ainsi Flex apporte la possibilité, en plus de la gestion de l'installation des librairies et bundles, de pouvoir les configurer automatiquement.

L'ensemble de ces tâches et fonctionnalités sont décrits sous forme de recette. Vous pouvez par exemple retrouver l'ensemble des recettes symfony pour les paquets Composer gérés par l'équipe en charge du Core de Symfony comme:

API platform
Security
Doctrine
Easy Admin
Twig
...

Lien vers le dépôt officiel.

Les packages officiels

Avec cette nouvelle version de Symfony, de nombreux bundles sont désormais référencés sur les serveurs de Symfony Flex, leur donnant un caractère plus officiel dans l'écosystème Symfony.

EasyAdminBundle

Si vous avez besoin de développer une interface d'administration pour votre site, EasyAdminBundle vous facilitera grandement la vie. Il permet, depuis un simple fichier de configuration, de générer les pages de CRUD (Create / Read / Update / Delete) de vos objets, avec un moteur de recherche et une gestion de la pagination et du tri. Le tout dans une interface responsive pour s'adapter à tous vos supports !

Doctrine

Doctrine reste bien sûr l'ORM privilégié sous Symfony 4. Toujours bien interfacé avec Symfony, il vous permettra d'interagir facilement avec votre base de données.

APIPlatform

APIPlatform est un framework construit avec Symfony et conçu pour faciliter le développement d'API REST ou GraphQL.

Et bien d'autres !

Vous pourrez trouver la liste des recipes de Symfony Flex sur le Symfony Recipes Server.

Les contrôleurs

Si vous avez l'habitude de travailler avec Symfony 2 ou Symfony 3 jusqu'à sa version 3.2, vous vous êtes peut-être déjà retrouvé coincé dans une situation où vous vous êtes demandé :

Est-ce que je peux définir mon contrôleur en tant que service ?

Et si c'est le cas, vous avez aussi sûrement vu cet avertissement dans la documentation de Symfony :

Dans cette nouvelle version de Symfony, non seulement définir les contrôleurs en tant que service n'est plus considéré comme une mauvaise pratique, mais les contrôleurs sont des services par défaut !

Vous pouvez donc intéragir facilement avec eux depuis d'autres services, et donc d'autres contrôleurs.

L'injection de dépendance automatique: Autowiring

Qu'est-ce que c'est ?

Cette fonctionnalité présente depuis la version 2.8 de Symfony, repensé dans la version 3.3 est maintenant activé par défaut. Concrètement, il n'est plus nécessaire de préciser dans la configuration les dépendances de vos services.

Comment l'autowiring fonctionne ?

Prenons une première classe ci-dessous avec une dépendance.

  namespace AppBundle\Service;
  
  use AppBundle\Service\Categorie;

  class Produit
  {
      private $categorie;
  
      public function __construct(Categorie $categorie)
      {
          $this->categorie = $categorie;
      }
  }

Et ci-dessous la classe des catégories
namespace AppBundle\Service;

  class Categorie
  {
      private $name;
  
      public function getName()
      {
          return $this->name;
      }
  }

La configuration par défaut de Symfony 4 va permettre à ces deux classes d'être automatiquement enregistrées en tant que service et d'être liées selon leurs dépendances.

Le système d'autowiring va utiliser le type du paramètre indiqué dans le constructeur de la classe Produit (ou dans n'importe quelle autre méthode) et cherche un service avec un ID qui correspond parfaitement à ce dernier.

Trois cas sont possibles :

Si aucun service n'a été défini pour ce type et si le type correspond à une classe non abstraite, alors la classe sera enregistrée automatiquement en tant que service privé, et celui-ci sera utilisé comme argument.
Si un service défini dans le container correspond au type, alors un alias est créé pour ce service et l'autowiring fonctionne de façon standard avec celui-ci
Si deux services ou plus correspondent alors une exception est levée. Il sera alors nécessaire de créer un alias pour le service à utiliser ou alors de l'indiquer de façon explicite dans la configuration.

En résumé

L'exemple ci-dessus se voulait simple, avec seulement deux classes, mais dans un contexte différent avec un grand nombre de dépendances et des dizaines de services, l'intérêt de l'autowiring est indéniable. Dans tous les cas c'est une évolution très agréable pour les développeurs.

On notera que l'autowiring ne fonctionne pas par magie, et l'équipe de Symfony l'a imaginé de façon à ce que son comportement reste prévisible.

Webpack Encore

Dans "Webpack Encore" il y a "Webpack"

Initialement utilisé par la communauté REACT, Webpack est rapidement devenu un nouveau standard de l'industrie Web pour gérer les assets du front-end.

Les outils qui étaient précédemment largement utilisés dans ce domaines, les task-runners tels que Grunt et Gulp, nécessitaient une lourde configuration, qui devait être modifiée à chaque nouveau fichier ou lors de changements dans l'organisation du code JavaScript et CSS. La plupart du temps, ces outils étaient utilisés pour produire un fichier JS minifié et un fichier CSS minifié, utilisés sur l'ensemble des pages du site. Pour ce faire, leurs fichiers de configuration listaient l'ensemble des assets à faire traiter par différents processus (transpile, concat, minimify, ...).

Webpack se différencie de ces outils par son approche plus modulaire. Le fichier de configuration de Webpack va, pour chaque module, pointé vers un "point d'entrée", qui est un fichier JS. Ce dernier va ensuite inclure les autres fichiers nécessaires (JS, CSS, images) via des directives "require" ou "import". En bout de chaîne Webpack va "traiter" tous ces fichiers hétérogènes pour sortir du code ou des assets compréhensibles par le navigateur.

Webpack permet donc de générer pour chaque page des assets optimisés, ne contenant que le strict nécessaire à son bon fonctionnement. La configuration de l'outil peut sembler complexe, mais présente l'avantage de ne nécessiter que peu de modification durant l'évolution des projets, puisque les dépendances sont gérés directement dans le code et non dans la configuration.

Pour plus d'informations sur webpack vous pouvez suivre ce lien

Une configuration fastidieuse malgré tous ses atouts

Si sur le papier Webpack propose une réelle avancée par rapport aux "task-runners" Grunt & Gulp, sa configuration n'en est pas moins fastidieuse et beaucoup de développeurs rechignent encore à sauter le pas face à cette difficulté.

C'est en partant de ce constat que les équipes de SensioLabs on développé "Webpack Encore", un webpack facile à utiliser et spécialement optimisé pour fonctionner avec Symfony (même si il peut aussi ête utilisé en dehors).

La meilleur librairie accessible à tous avec Webpack Encore

Inspiré de "Webpacker" et "Mix", "Webpack Encore" met la configuration à la portée de tous tout en étant spécialement optimisé pour fonctionner avec Symfony 4.

Voila qui devrait lever les dernières réticences à son utilisation et permettra une utilisation avancée des assets dans Symfony.

L'avis d'Integral Service

Nous utilisons Symfony dans de nombreux projets d'applications Web qui nécessitent une architecture robuste, évolutive et professionnelle.

Symfony 4 est la suite logique aux évolutions successives du framework. Cette version est orientée performance en proposant un framework standard minimaliste sur lequel on peut greffer uniquement les bundles ou librairies qui sont nécessaires.

Cette version est aussi rafraichissante pour les développeurs car une bonne partie du travail qui était rébarbatif et apportait peut de valeur ajoutée dans les précédentes versions a été automatisé ou simplifié.

Ce nouvel opus reste droit dans ses bottes et propose des nouveautés qui améliore encore la qualité de ce framework et confirme sa place dans les frameworks PHP professionnels.

En attendant Symfony 4

En attendant la sortie officielle, nous vous proposons une série de petits tutoriels ou démonstrations pour vous initier à cette nouvelle version.

Qu'est-ce qu'une Progressive Web App ?

Integral Service — Invalid Date

Le meilleur du web avec les avantages de l'expérience mobile

Une Progressive Web App (PWA)désigne une application à mi-chemin entre un site web responsive et une application mobile.

C'est une solution technique qui permet d'améliorer l'expérience utilisateur (UX) en fournissant les avantages des dernières technologies web sur une interface semblable à celle d'une application.

Concrètement, lorsqu'un utilisateur se rend sur votre PWA depuis son smartphone ou sa tablette ou à l'aide de son navigateur de son PC, il aura l'impression d'utiliser une application.

Cela permet non seulement de rendre votre application plus intuitive et agréable à utiliser, mais elle restera également consultable en mode hors ligne.

Pourquoi choisir une PWA ?

Une majorité d'internautes sur les smartphones

Depuis octobre 2016 les internautes privilégient en majorité la consultation des sites sur les smartphones et tablettes, au niveau mondial.

Il est donc primordial pour votre site web ou votre application d'être optimisé pour une utilisation sur smartphones et tablette.

Ce n'est pas une application mobile

Par ailleurs, une PWA n'est pas une application mobile, ce qui présente plusieurs avantages:

Le cout de développement d'une PWA est inférieur à celui d'une application mobile : Créer votre application mobile native, nécessite un développement pour chacune des plateformes iOS, Android et parfois Windows Mobile, ce qui fait doubler ou tripler le prix total de l'application. Le développement d'une application adapté à toutes les plateformes permet donc de réaliser des économies.
Les coûts de maintenances sont réduits : La maintenance d'une application mobile native, disponible sur plusieurs plateformes, est plus couteuse que la maintenance d'une seule application développée en PWA.
L'utilisateur n'a pas besoin de télécharger votre application : Il peut tout simplement y accèder via son navigateur et vous évitez de devoir publier des applications sur les différents stores App Store, Play Store et Windows Store. De plus, il est tout à fait possible de proposer à vos utilisateurs d'avoir une icône raccourcie, ressemblant en tout point à celle d'une application, sur son support mobile. Ainsi une progressive Web App ressemble et se comporte de la même manière qu'une application native mais cette application est une application web.
S'affranchir des délais de publication d'une app sur les stores : En effet aujourd'hui les délais de publication d'une app mobile sur les différents stores peuvent être contraignants. De plus cela permet de supprimer les comissions reversées à Google ou Apple lorsque vous réalisez des ventes via l'achat in-app.
Une personnalisation sans limite : Toute la puissance des technologies web est disponible pour produire une application innovante sous de nombreux aspects.

Il existe cependant quelques inconvénients à la réalisation d'une PWA:

Les performances : Si vous souhaitez réaliser une application entièrement disponible en mode hors ligne et que le volume de données à stocker est important cela peut devenir problématique. Dès ce moment vous pouvez vous tourner vers des applications mobiles hybrides ou natives.
Les anciens navigateurs sont un problème : Les navigateurs trop anciens ne permettent pas de faire fonctionner les progressive web app de manière optimale. Cela s'explique particulièrement par le fait qu'ils n'ont pas de gestion du mode hors ligne, ou encore un moteur technique trop ancien.

Les avantages du matériel mobile

source: https://whatwebcando.today/

Une PWA permet d'utiliser la plupart des fonctionnalités d'un prériphérique mobile. Il sera donc tout à fait possible de l'utiliser en mode hors ligne, d'envoyer des notifications, d'utiliser la géolocalisation ou encore de détecter l'inclinaison d'un smartphone par exemple.

Par ailleurs, Windows pense à inclure les PWA dans son store et Google à également des idées pour celles-ci.

Les concepts clés d'une PWA

Une progressive web app, c'est avant tout une expérience utilisateur et c'est pour cela qu'elle répond à trois grands principes:

la fiabilité
la rapidité et fluidité
la séduction de l'utilisateur

Ces trois points font en partie la réussite ou non d'une PWA.

Fiable

L'une des caractéristiques majeures d'une PWA c'est sa capacité à fonctionner hors ligne. Une fois que l'utilisateur à accédé à l'application une première fois, il pourra l'utiliser indépendament de l'état de sa connexion internet. Cela à pour avantage de limiter les temps de chargement et donc de fluidifier l'utilisation générale de l'application.

Rapide

Plus de la moitié des utilisateurs abandonneront l'application si le temps de chargements de celle-ci est supérieur à 3 secondes. Une fois l'application web lancée, il est impératif que les interfaces graphiques soient fluides et rapides. Chaque action de l'utilisateur doit amener une réponse visuelle immédiate de la prise en compte de l'action.

Engageante

Sur mobile ou tablette lors de la visite de votre app, l'utilisateur est invité à installer l'application dès l'écran d'acceuil. De plus, il est possible pour votre pwa d'envoyer des notifications comme une application native. Ces notifications peuvent par exmeple vous permettre de proposer ou d'alerter vos utilisateurs de l'arrivée d'un nouveau contenu, d'une évolution des fonctionnalités de l'app, ...

Conclusion

Le nombre croissant des mobinautes pousse le web à évoluer et s'adapter aux contraintes liées à ce format. La PWA est une technique de développement récente, accolmpagné de languages tout aussi jeunes, qui permet de faciliter la création d'application web à destination de ces supports.

Cette solution technique peut laisser penser à un futur où les applications fonctionneront indépendament de leurs plateformes et cela grâce aux technologies du web.

Par ailleurs, la PWA est une solution idéale pour mutualiser les coûts et raccourcir les délais de développement.

Le retours sont pour l'instant positifs avec des sites comme Ali Express qui a augmenté sont taux de nouveaux utilisateurs de plus de 100% gràace à sa PWA, ou Konga qui a diminué le poids de son application de 92% en migrant vers une PWA et a donc rendu son utilisation plus fluide, rapide et légère.

La création de PWA par des géants de la presse tels que le Washington post, le Financial Times ou encore L’Équipe démontre également la fiabilité et la valeur ajoutée de cette technologie.

Nous vous proposons ci-dessous de découvrir quelques exemples de Progressive Web Apps:

Vous trouverez ici encore plus d'exemples de pwa.

Le responsive c'est normal

Integral Service — Invalid Date

Qu'est-ce que le responsive web design ?

Le responsive Web design (RWD) est une approche de conception Web qui permet d'élaborer des sites offrants un expérience d'utilisation optimale quelque soit l'appareil utilisé.

En prenant exemple sur ce site voici ce que peut donner le rendu d'un site responsive sur de multiples supports.

Les enjeux du responsive design sont nombreux et pas uniquement techniques.

Le responsive Web Design est une des techniques parmis tant d'autres pour rendre un site "mobile friendly". En effet il n'y a pas que l'affichage qui est un facteur différenciant sur mobile. On retrouve principalement trois grands critères:

La taille des écrans. Le rendu visuel d'un site web ne peut pas être le même sur un mobile et un PC ne serait-ce que pour le confort d'utilisation.
Le débit de la connexion. Aujourd'hui ce n'est plus forcément 100% vrai mais le débit d'une connexion d'un ordinateur est souvent plus élevé que celui d'un smartphone.
La prise en main et la navigation. Il existe une grande différence entre naviguer à la souris et au doigt.

Les usages évoluent

Il vous suffit d'observer vos voisins dans les transports en commun. Tout le monde regarde son smartphone ou sa tablette tactile. Alors qu'en 2014, en France, 55% de la population accédait à Internet à l'aide de son smartphone, aujourd'hui cela a bien augmenté selon les chiffres en provenance du baromètre du Numérique publié par l’ARCEP.

Chez Integral Service nous observons, parmis les statistiques d'audience de nos clients, une nette augmentation des visites des sites ou applications sur smartphone. Certains atteignent même plus de 90% de visites sur mobile !

Quand on observe ces statistiques on se rend bien compte que l'accessibilité des sites se doit d'être irréprochable sur mobile et tablette.

Google s'en mêle

Cela fait plusieurs mois que Google augmente petit à petit l'importance d'être mobile ready. Google ne se cache plus sur les risques de déclassement des sites pas ou peu accessibles sur mobile. Même s'il semble que l'algorithme de Google utilise encore prioritairement le contenu des sites accessibles en Desktop pour le référencement, la tendance est en train de s'inverser.

Il y a quelques temps, l'outil pour les webmaters Google Webmaster Tools a été mis à jour pour intégrer un testeur de site mobile. Cela vous permet de vous rendre compte de comment la version mobile de votre site est prise en charge par le moteur de recherche.

On peut aussi noter que Google a ajouté sur la requête mobile friendly son testeur de site mobile.

Il semblerait même que Google soit en train d'expérimenter une nouvelle mise à jour de son algorithme de recherche en prenant en compte en priorité le contenu disponible sur mobile. Il devient évident que le côté responsive des sites joue déjà dans la balance du référencement naturel et que cela ne va faire qu'augmenter.

Les technologies sont éprouvées

Aujourd'hui il est important d'apporter un soin tout particulier pour rendre un site ou une application responsive ou en tout cas Mobile friendly. Pour se faire il est nécessaire de :

Penser le design du site sur Desktop, Mobile et Tablette au minimum
Faire un peu de technique et optimiser
Utiliser des technologies web adaptées
Tester le rendu

Certes, cela demande du temps et des compétences supplémentaires, mais aujourd'hui les technologies web permettent de répondre à l'ensemble de cette problématique.

Mobile friendly, c'est la norme

Les internautes sont de plus en plus nombreux à utiliser différents supports pour consommer internet, Google prend en compte et donne un bonus à tout ceux qui ont un site accessible sur mobile et il existe de nombreuses techniques pour rendre un site "Mobile friendly".

A une époque, opter pour le responsive design ou une version mobile friendly de son site était un "plus". Aujourd'hui, pour une organisation souhaitant optimiser sa présence sur le Web, fournir un nouvel outil à ses collaborateurs ou encore offrir un nouveau service à ses client, ce n'est plus un choix, c'est devenu la norme.

Le HTTPS devient incontournable

Integral Service — Invalid Date

Qu'est-ce que le HTTPS ?

Le HTTPS (HyperText Transfer Protocol Secure) est un protocole sécurisé de communication entre un serveur et un navigateur donc créé pour le Web. Le HTTPS c'est donc l'utilisation du HTTP couplé avec une couche de sécurité (par exemple SSL ou TLS).

Le HTTPS à la différence du HTTP permet deux choses :

Contrôler et confirmer l'identité du site web que vous visitez
Chiffrer les données échangées entre le navigateur web et le serveur web

L'utilisation d'un certificat HTTPS valide se décrit sur votre navigateur comme dans l'image ci-dessous :

Google, le fer de lance du HTTPS

Google avait annoncé dès mi-2016 une volonté forte de passer l'ensemble des sites internet de la planète sous HTTPS. Pour se faire ils ont commencé par annoncer une évolution de chrome :

« à partir de janvier 2017, Chrome 56 indiquera dans la barre d’adresse un message signalant un danger pour certains sites web non accessibles en HTTPS. »

A travers cette évolution, qui peut paraître mineure, de Google Chrome, Google lance un pavé dans la mare. En effet Google Chrome est un des navigateurs les plus utilisés au monde, comme le montrent les dernières statistiques de juin 2017, et cette prise de position impose une migration rapide de nombreux sites internet.

Pour conforter sa position avec les certificats SSL, Google avait annoncé dès 2014 :

« Nous commençons à utiliser le protocole HTTPS en tant que facteur de positionnement. Pour l’instant, cet indicateur a très peu de poids et ce afin de laisser le temps aux webmasters de passer au protocole HTTPS. »

Puis en 2015 ils surenchérissent :

« Gmail, la recherche Google et YouTube bénéficient de connexions sécurisées depuis longtemps. Nous avons également commencé à légèrement améliorer le classement des URL HTTPS dans les résultats de recherche l’an dernier. La navigation sur le Web devrait être une expérience privée entre l’utilisateur et le site Web, sans que cela ne donne lieu à des actes d’espionnage, à des attaques dites « de l’homme du milieu » ni à des modifications de données. C’est pourquoi nous appuyons fortement la généralisation du HTTPS. »

La situation a un peu évoluée depuis, puisqu'en matière de référencement il est fortement conséillé de mettre en place un certificat HTTPS.

Aucune obligation

Il n'y a aucune obligatoire, pour le moment, de sécuriser votre site internet avec le certificat HTTPS. Pour le moment, cela ne se traduira que par un affichage indiquant que la connexion n'est pas sécurisée.

Nous tenons à rappeler que la mise en place d'un certificat de sécurité est vivement recommandée pour les sites collectant des données sensibles (Mots de passe, paiement en ligne, ...).

Google veut rendre le HTTPS obligatoire

C'est récemment que les équipes de Google Chrome ont annoncées une nouvelle étape dans la sécurisation du Web. Dès Octobre 2017, Google Chrome traitera les sites qui possèdent des formulaires de saisie de données utilisateur non sécurisés par un certificat SSL différemment.

Dès lors que vous vous rendrez sur une page qui possède un formulaire de saisie non sécurisé et que vous souhaiterez remplir, le navigateur fera précédé l'URL du site de la mention 'Non sécurisé', comme le montre l'animation ci-dessous :

Ils annoncent même vouloir aller plus loin et afficher ce fameux label "non sécurisé" sur toutes les pages non accessibles en HTTPS.

En conclusion

Il est évident que les grands acteurs du Web tendent à faire pencher les sites web vers l'utilisation du HTTPS. Même si aujourd'hui, rien ne rend obligatoire la mise en place de certificats SSL, elle devient une bonne pratique.

De nombreux hébergeurs (ainsi qu'Integral Service) ont déjà mis en place des solutions (gratuites ou payantes) pour pouvoir bénéficier facilement de certificats SSL.

Vous avez des questions ? N'hésitez pas à nous contacter à travers notre page de contact ou directement à partir de notre page Facebook.

Les nouveautés de Symfony 4

Integral Service — Invalid Date

Des changements pour Symfony

Durant la Keynote de Fabien Potencier au Symfony Live 2017 de nombreuses annonces ont été révélées.

Découvrez notre dernier article sur l'ensemble des nouveautés introduites par symfony 4 ici.

Le processus de publication des versions de Symfony change

SensioLabs, la société créatrice de Symfony, à souhaité mettre en avant un nouveau rythme dans les mises à jours. Ainsi il sera désormais prévu 1 version majeure tous les 2 ans et une version mineure tous les 6 mois.

C'est pourquoi Symfony 4 est annoncé pour Novembre 2017 alors qu'il est déjà disponible en Bêta depuis le mois d'Avri 2017.

Les distributions Symfony, c'est fini

C'est désormais officiel, Symfony 4 ne proposera plus diverses distributions pré-conditionnées comme l'édition CMF, ou la REST Edition. Désormais une seule distribution sera diponible, la standard.

Symfony 4, des changements pour les développeurs

Comme l'avait expliqué Fabien Potencier dans son 1er billet à propos de Symfony 4, la structure du framework a besoin de changement.

Premièrement l'installation change drastiquement. Désormais un seul fichier composer.json sera disponible afin d'installer le framework. Ce fichier est disponible dans le skeleton de Symfony. Ce fichier décrit l'ensemble des bundles nécessaires au fonctionnement du coeur de Symfony.

La bonne nouvelle, c'est que désormais les développeurs web pourrons installer eux-même les bundles strictement nécessaire à leur besoin. Ainsi Symfony 4 en standard sera bien plus léger que ses prédecesseurs, mais tout sera à installer manuellement!

Les recettes Symfony 4

Comme on l'a vu précédemment, l'installation de Symfony 4 à changé. Cependant pour aider les développeurs à la compréhension de ce nouveau système et dans leurs quotidien, un nouveau système à vu le jour: les Recipe (Recettes).

A partir de la version 3.4 ou de la version 4 de Symfony, ce nouveau système sera intégré. Ainsi les dépendances des Bundles seront gérées directement par les recettes.

Une démo pour la route !

Fabien Potencier nous à mis à disposition une vidéo de démonstration de Symfony 4 dans son dernier billet:

Pour aller plus loin

Nous vous poposons quelques liens pour aller plus loin dans vos recherches ou vos expérimentations Web autour de Symfony 4:

Un nouveau site

Integral Service — Invalid Date

C'est l'histoire du cordonnier...

Notre ancien site, qui nous a rendu bien des services, a soufflé ses 3 bougies en milieu d'année 2017. Après quelques échanges en interne nous avons décidé d'arrêter de répondre à l'adage "Les cordonniers sont les plus mal chaussés" et de créer de toute pièce notre nouvelle vitrine web.

Le site se devait de répondre aux exigences qu'on avait formulé:

Elegant
Rapide, très rapide
Utiliser des technologies récentes
Le moins de maintenance possible
nous amuser pendant sa réalisation !

Elegant

Tous les gouts sont dans la nature, cependant on a essayé de réutiliser un maximum la veille graphique que l'on fait au quotidien grâce à notre compte Twitter.

Rapide & récent

La rapidité du site était une de nos priorités. Rien de plus énervant qu'un site qui prend plusieurs secondes pour s'afficher que ce soit sur PC ou Smartphone. C'est pourquoi nous avons mis en place les dernières techniques d'optimisation pour vous proposer un site fluide !

Pour se faire On a utilisé des technologies web super cool comme:

React
Webpack
Yarn
HTTP/2
...

Cet ensemble d'outils nous a permis de réaliser une structure technique solide qui s'adapte en fonction de votre bande passant et de votre navigateur.

La maintenance

On souhaitait avoir un site le plus autonome possible. Nous avons donc utilisé le générateur de site statique Gatsby pour générer 100% de notre site au format HTML / CSS / Javascript. Avec ce type de site internet, plus besoin de mises à jours de sécurité ou autre! On peut le faire quant on le souhaite !

On est tous très content du résultat et on espère qu'il vous plaira aussi !

A venir

Un nouvel effort va être fait pour que l'on partage toujours plus de contenu sur le Blog !

Integral System votre expert en PC industriel

Integral Service — Invalid Date

Du nouveau !

Integral System est une société référante dans le domaine des PC industriel et de l'automation. Nous avons entrepris, il y a quelques semaines, de remettre au goût du jour l'ensemble des sites du groupe.

L'expertise de plusieurs dizaines d'années d'Integral System dans le matériel informatique industriel n'est plus à prouvé et ils proposent donc logiquement un grand nombre de PC.

Après une étude en profondeur du système d'information d'Integral System, de l'architecture des produits et de la base tarif, nous avons mis à profis notre expertise Symfony et Sylius pour proposer un nouveau site E-Commerce spécialement adapté à la distribution de PC industriels, PC Fanless et autres matériels informatique industriel.

On peut retrouver plus de 150 catégories de matériel allant du PC Fanless industriel, en passant par les Panel PC, les cartes mère industrielle et les applications de supervision.

N'hésitez pas aller faire un tour sur ce nouveau site !

Blanc Cambouis, les meubles design

Integral Service — Invalid Date

L'innovation au coeur du E-Commerce

Blanc Cambouis est une marque de meuble design Français pour laquelle nous avons réalisée un site E-Commerce qui intègre d'un configurateur dynamique connecté à un moteur de rendu 3D. Ce moteur 3D vous permet de personnaliser l'ensemble de la gamme de meuble de Blanc Cambouis à tarvers plus de 10 000 combinaisons par meuble.

Nous avons rencontré JEC et Blanc Cambouis qui nous on expliqué que leurs objectif était d'obtenir un site E-Commerce qui mette en avant les créations de Lilian le designer, de manière esthétique et personnalisables.

C'est pourquoi nous avons logiquement proposé l'utilisation de la technologie WebGL afin de créer un moteur de rendu 3D efficace, fonctionnel et fluide (même sur smartphone !).

Nous avons choisi d'utiliser Symfony 3 et Sylius afin de réaliser cette plateforme E-Commerce pour des raisons de performance, et la capacité d'évolution du framework Symfony.

Vous pouvez dès à présent aller découvrir ce site haut en forme et en couleurs !

Smokitten, le jeu vidéo pour arrêter de fumer

Integral Service — Invalid Date

Un projet de nos amis Dowino

Smokitten est un nouveau projet réalisé par la société Dowino (nos voisins du Pôle Pixel) spécialisée dans le serious game qui a pour objectif d'aider à arrêter de fumer (Ou ne jamais commencer !).

C'est dans une optique de sensibilisation et surtout d'aide au quotidien que les équipes ont déjà commencée à travailler d'arrache pied sur ce nouveau projet de jeu vidéo.

Un nouveau défi

Après avoir réalisé un carton avec A Blind Legend l'équipe se lance dans un nouveau défi: créer un jeu vidéo engageant avec lequel le joueur prend plaisir à jouer avec sa famille et ses amis. Tout le monde peut vous aider à arrêter de fumer !

Fortis dextrae humo limina Tempus singultibus illa

Nous les avons accompagné pour la réalisation du site internet de Smokitten et sommes fiers de vous présenter ce nouveau projet !

N'hésitez pas à visiter Smokitten.com pour suivre cette nouvelle aventure !

Integral Service s'installe au sein du Pôle Pixel

Integral Service — Invalid Date

Le Pôle Pixel

Le pôle Pixel, dédié aux domaines de l'image et du son, regroupe aujourd'hui plus de 100 entreprises dans environ 16 000m² d'espaces. Ce groupement d'entreprises villeurbannaises encadre les studios de cinéma Lumière qui ont accueilli de nombreux tournages de cinema de renom.

Cette concentration de créativité et les possibilités de synergie nous ont finalement décidé à emménager dans ces nouveaux locaux.

C'est avec plaisir que nous vous fournissons donc notre nouvelle adresse ci-dessou: Notre nouvelle adresse:

Integral Service 36, Rue Emile Decorps 69100 Villeurbanne, France

+33 (0)4 37 69 72 09