Initial commit

.devcontainer/devcontainer.json

@@ -0,0 +1,20 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+    // "ghcr.io/devcontainers-extras/features/shell-utils:latest": {}
+  },
+  "forwardPorts":[8000, 3000],
+  "portsAttributes": {
+    "8000": {
+      "label": "CMS Application Port",
+      "onAutoForward": "silent"
+    },
+    "3000": {
+      "label": "Storefront Port",
+      "onAutoForward": "silent"
+    }
+  },
+  "updateContentCommand": "make all -j2",
+  "postAttachCommand": ".scripts/makeCmsPortPublic.sh",
+  "shutdownAction": "stopCompose"
+}

.gitignore

@@ -0,0 +1 @@
+.env

.scripts/generateEnv.sh

@@ -0,0 +1,40 @@
+#!/usr/bin/env bash
+set -e
+EXPOSED_HOST=cms.localhost
+WORDPRESS_URL="http://${EXPOSED_HOST}:8000"
+if [ ! -z "$CODESPACE_NAME" ]
+then
+  EXPOSED_HOST="${CODESPACE_NAME}-8000.${GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN}"
+  WORDPRESS_URL="https://${EXPOSED_HOST}"
+fi
+
+cat > .env <<EOF
+# CONTAINERS DEV FILES OWNERSHIP ON MOUNTED VOLUMES
+USER_ID=$(id -u)
+GROUP_ID=$(id -g)
+
+EXPOSED_HOST=${EXPOSED_HOST}
+
+# STOREFRONT - NEXTJS
+NEXT_PUBLIC_BASE_URL=http://localhost:3000/api
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="<changeit>"
+STRIPE_SECRET_KEY="<changeit>"
+
+# CMS - WORDPRESS
+WORDPRESS_URL=${WORDPRESS_URL}
+WORDPRESS_DB_HOST=db
+WORDPRESS_DB_NAME=aixmazon
+WORDPRESS_DB_USER=aixmazon_user
+WORDPRESS_ADMIN_USERNAME=admin
+WORDPRESS_ADMIN_PASSWORD=admin
+[email protected]
+WORDPRESS_DB_PASSWORD_FILE=/var/run/secrets/cms_db_password
+WOOCOMMERCE_API_KEY=ck_bdd51885c94eaa1c35a8714de211a84567213489
+WOOCOMMERCE_API_SECRET=cs_9e5aa761a36d7c6b321f882c0aacf99929a1b259
+
+# DB - MARIADB
+MYSQL_DATABASE=aixmazon
+MYSQL_USER=aixmazon_user
+MYSQL_PASSWORD_FILE=/var/run/secrets/cms_db_password
+MYSQL_RANDOM_ROOT_PASSWORD=1
+EOF

.scripts/makeCmsPortPublic.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+if [ ! -z "$CODESPACE_NAME" ]
+then
+  gh codespace ports visibility 8000:public -c $CODESPACE_NAME
+else
+  echo "Running on local dev, not needed to make port visibility public"
+fi

.scripts/setupWordPress.sh

@@ -0,0 +1,104 @@
+#!/usr/bin/env bash
+set -o allexport
+source .env
+set +o allexport
+
+function install {
+  # Auto setup admin access
+  docker compose exec --user=www-data cms wp core install \
+    --url="$WORDPRESS_URL" \
+    --title="Aixmazon" \
+    --admin_user="$WORDPRESS_ADMIN_USERNAME" \
+    --admin_email="$WORDPRESS_ADMIN_EMAIL_ADDRESS" \
+    --admin_password="$WORDPRESS_ADMIN_PASSWORD" \
+    --skip-email &> /dev/null
+}
+
+echo -n "Installing: "
+while ! install
+do
+  echo -n "."
+  sleep 0.5
+done
+echo " Done ✅"
+
+set -e
+
+# Activate plugins
+docker compose exec --user=www-data cms wp plugin activate woocommerce wordpress-importer woocommerce-gateway-stripe
+
+# Enable Wordpress json API
+docker compose exec --user=www-data cms wp rewrite structure '/%postname%/' --hard
+
+# Woocommerce setup
+docker compose exec --user=www-data cms wp option update woocommerce_store_address '413 Av. Gaston Berger'
+docker compose exec --user=www-data cms wp option update woocommerce_store_city 'Aix-en-Provence'
+docker compose exec --user=www-data cms wp option update woocommerce_store_postcode 13100
+docker compose exec --user=www-data cms wp option update woocommerce_default_country FR
+docker compose exec --user=www-data cms wp option update woocommerce_currency "EUR"
+docker compose exec --user=www-data cms wp option update woocommerce_price_decimal_sep ","
+docker compose exec --user=www-data cms wp option update woocommerce_price_thousand_sep " "
+
+
+docker compose exec --user=www-data cms wp option update woocommerce_onboarding_profile --format=json '
+{
+  "is_agree_marketing": false,
+  "store_email": "[email protected]",
+  "is_store_country_set": true,
+  "industry": [
+    {
+      "slug": "other",
+      "detail": "Books"
+    }
+  ],
+  "product_types": [
+    "physical",
+    "downloads"
+  ],
+  "product_count": "0",
+  "selling_venues": "no",
+  "setup_client": false,
+  "business_extensions": [],
+  "theme": "twentytwentythree",
+  "completed": true
+}
+'
+
+# Generate Woocommerce api key pair
+docker compose exec \
+--user=www-data cms \
+wp option get aixmazon_storefront_key_generated &> /dev/null || \
+(
+  docker compose exec \
+    --user=www-data \
+    --env WOOCOMMERCE_API_KEY=$WOOCOMMERCE_API_KEY \
+    --env WOOCOMMERCE_API_SECRET=$WOOCOMMERCE_API_SECRET \
+    cms wp eval '
+      global $wpdb;
+      echo $wpdb->insert(
+        $wpdb->prefix . "woocommerce_api_keys",
+        array(
+          "user_id" => 1,
+          "description" => "storefront",
+          "permissions" => "read_write",
+          "consumer_key"=> wc_api_hash(getenv("WOOCOMMERCE_API_KEY")),
+          "consumer_secret" => getenv("WOOCOMMERCE_API_SECRET"),
+          "truncated_key" => substr(getenv("WOOCOMMERCE_API_SECRET"), -7)
+        )
+      );' \
+  && docker compose exec \
+  --user=www-data cms \
+  wp option add aixmazon_storefront_key_generated 1 &>/dev/null
+)
+
+# Load sample products catalog
+docker compose exec --user=www-data cms wp option get aixmazon_storefront_product_catalog_loaded &> /dev/null || \
+(
+  docker compose exec \
+    --user=www-data \
+    cms bash -c "
+      curl -OL https://raw.githubusercontent.com/woocommerce/woocommerce/master/sample-data/sample_products.xml \
+      && wp import sample_products.xml --authors=create && rm sample_products.xml \
+    " \
+  && docker compose exec --user=www-data cms wp option add aixmazon_storefront_product_catalog_loaded 1 &> /dev/null
+)

.secrets/cms_db_password

@@ -0,0 +1 @@
+dbpassword

Makefile

@@ -0,0 +1,27 @@
+generateEnv:
+	.scripts/generateEnv.sh
+.PHONY: generateEnv
+
+cms-deps: generateEnv
+	cd cms && composer install
+
+.PHONY: cms-deps
+
+storefront-deps: generateEnv
+	cd storefront && npm install
+.PHONY: storefront-deps
+
+
+all: storefront-deps cms-deps
+	docker-compose up -d
+	.scripts/setupWordPress.sh
+.PHONY: all
+
+clean:
+	docker compose stop
+	docker compose rm -f
+	docker volume rm -f test-devcontainers_db
+	rm -rf cms/vendor cms/wordpress
+	rm -rf storefront/node_modules
+	rm -rf storefront/.next
+.PHONY: clean

README.md

@@ -0,0 +1,59 @@
+# Module e-commerce Licence Pro ECUE41 - Front Store Next.js
+
+# Objectif
+
+Module e-commerce Licence Pro ECUE41 - Front Store Next.js
+L'objectif est de réaliser un `storefront` (ou vitrine) basé sur [NextJS](https://nextjs.org/) en utilisant [l'API de WooCommerce](https://woocommerce.com/document/woocommerce-rest-api/)
+
+## Mise en route
+
+:zap: Cette année pour la 1ère fois vous allez gagner du temps en utilisant [devcontainers](https://containers.dev/), que ce soit en local sur votre machine dans vscode ou via [Github Codespaces](https://github.com/features/codespaces).
+
+Pour donner suite au TD2, je vous invite à parcourir le dépôt, en particulier les fichiers suivants:
+1. [devcontainer.json](.devcontainer/devcontainer.json) : en particulier ce que déclenchent `updateContentCommand` et `postAttachCommand`
+1. [Makefile](Makefile) : il permet facilement d'initialiser et réinitialiser en un instant (j'ai opté pour composer pour initialiser Wordpress notamment)
+1. [setupWordPress.sh](.scripts/setupWordPress.sh) : il permet d'automatiser la configuration Wordpress à l'aide de [wp-cli](https://wp-cli.org/fr/). Beaucoup plus rapide et reproductible que de cliquer partout dans le wp-admin :zap:
+1. [generateEnv.sh](.scripts/generateEnv.sh) : il permet de notamment gérer le côté dynamique du de l'identifiant POSIX de votre utilisateur/groupe ainsi que du host exposé en fonction d'une exécution en local ou via codespaces.
+
+Veuillez noter que j'ai essayé de respecter au mieux les [12 factors](https://12factor.net/fr/), que nous aurons l'occasion de revoir pendant le module docker.
+
+> **Note**
+> Si vous avez bien parcouru ces fichiers, alors vous savez quels identifiants utiliser pour vous connecter sur /wp-admin du wordpress :wink:
+
+
+## Règles
+
+
+### Équipes
+
+Vous formez des équipes de 3 à 4, ces équipes font partie d'un Pool.
+
+### Pair programming en équipe
+
+Chaque équipe doit fonctionner selon le principe de [pair](https://en.wikipedia.org/wiki/Pair_programming) ou [mob](https://en.wikipedia.org/wiki/Mob_programming) programming. Cela consiste à ce qu'une seule personne à la fois - par tranche de 15 à 20 minutes - code. Les autres personnes du groupe doivent alors remplir ces rôles en parallèle :
+1. **Relecteur/ice** : suggérer des meilleures façons de faire, corriger des erreurs.
+2. **Se documenter** : aller chercher la connaissance et revenir avec des solutions pour faire gagner du temps à celui/celle qui code.
+3. **Testeur/ice** : à minima, faute d'écrire des tests automatisés, tester la fonctionnalité en parallèle sur un autre ordinateur
+4. **Planificateur** : lire la prochaine issue, la comprendre et se renseigner pour aider à la démarrer le plus vite possible (il est possible d'ajouter des commentaires à une issue, c'est idéal pour la compléter avec des informations utiles à sa réalisation)
+
+Vous devrez successivement vous relayer sur chacun de ces rôles.
+
+### Pull requests
+
+chaque équipe qui prendra une issue devra la soumettre sur Github par système de [pull requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests), afin que je puisse relire et apprécier le travail. Chaque équipe devra soumettre ses pull requests à destination de la branche qui porte le nom de son Pool (`PoolA` ou `PoolB`).
+
+### Pools
+
+Enfin, les équipes seront réparties dans 2 pools. Chaque pool sera en concurrence et devra réaliser exactement les mêmes issues par équipe.
+
+À la fin du TD, un pool sera désigné vainqueur sur l'ensemble du travail réalisé. Chaque équipe sera également évaluée pour son travail au sein de chaque pool.
+
+:trophy: Le Pool qui obtiendra la meilleure réalisation aura droit à une bonnification. :trophy:
+
+
+# Paiement carte de test Stripe
+
+```
+4111 1111 1111 1111
+03/30 737
+```

cms/.gitignore

@@ -0,0 +1,52 @@
+# Ignore local configuration files.
+/.env
+/wp-config-local.php
+
+# Ignore Composer packages.
+/vendor/
+
+# Temporary and build directories.
+/_www
+
+# Standard Wordpress files and folders:
+/wordpress/.htaccess
+/wordpress/vendor/
+/wordpress/composer.json
+/wordpress/index.php
+/wordpress/license.txt
+/wordpress/readme.html
+/wordpress/wp-activate.php
+/wordpress/wp-admin/
+/wordpress/wp-blog-header.php
+/wordpress/wp-comments-post.php
+/wordpress/wp-config-sample.php
+/wordpress/wp-content/index.php
+/wordpress/wp-content/plugins/index.php
+/wordpress/wp-content/themes/index.php
+/wordpress/wp-cron.php
+/wordpress/wp-includes/
+/wordpress/wp-links-opml.php
+/wordpress/wp-load.php
+/wordpress/wp-login.php
+/wordpress/wp-mail.php
+/wordpress/wp-settings.php
+/wordpress/wp-signup.php
+/wordpress/wp-trackback.php
+/wordpress/xmlrpc.php
+
+# User uploaded and system generated files.
+/wordpress/wp-content/cache/
+/wordpress/wp-content/uploads/
+
+# Ignore themes and plugins installed via Composer.
+/wordpress/wp-content/plugins/*
+!/wordpress/wp-content/plugins/README.md
+/wordpress/wp-content/themes/*
+!/wordpress/wp-content/themes/README.md
+
+# Ignore mounts
+wordpress/wp-content/cache
+wordpress/wp-content/uploads
+
+# Ignore post install command artifact locally
+wordpress/wp-config.php

cms/Dockerfile

@@ -0,0 +1,23 @@
+# syntax = docker/dockerfile:1.4
+FROM wordpress:6-php8.1-apache
+ARG USER_ID
+ARG GROUP_ID
+ENV WP_CLI_CONFIG_PATH=/wp-cli.yml
+RUN <<eot bash -e
+  apt update
+  apt install -y less
+  curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
+  chmod +x wp-cli.phar
+  mv wp-cli.phar /usr/local/bin/wp
+  # Update internal user of wordpress service to dev user & group idss
+  groupmod --gid ${USER_ID} www-data
+  usermod --gid ${GROUP_ID} www-data
+  usermod --uid ${GROUP_ID} www-data
+  chown -R www-data:www-data /var/www
+  cat > /wp-cli.yml <<YML
+  apache_modules:
+    - mod_rewrite
+YML
+  chown -R www-data:www-data /wp-cli.yml
+eot
+

cms/composer.json

@@ -0,0 +1,38 @@
+{
+    "require": {
+        "johnpbloch/wordpress-core-installer": "^2.0",
+        "johnpbloch/wordpress-core": "^6.1",
+        "wpackagist-plugin/woocommerce": "^7.1",
+        "wpackagist-plugin/wordpress-importer": "^0.8.0",
+        "wpackagist-plugin/woocommerce-gateway-stripe": "^7.0"
+    },
+    "config": {
+        "allow-plugins": {
+            "johnpbloch/wordpress-core-installer": true,
+            "composer/installers": true
+        }
+    },
+    "repositories": {
+        "wppackagist": {
+            "type": "composer",
+            "url": "https://wpackagist.org"
+        }
+    },
+    "extra": {
+        "installer-paths": {
+            "wordpress/wp-content/plugins/{$name}": [
+                "type:wordpress-plugin"
+            ],
+            "wordpress/wp-content/themes/{$name}": [
+                "type:wordpress-theme"
+            ],
+            "wordpress/wp-content/mu-plugins/{$name}": [
+                "type:wordpress-muplugin"
+            ]
+        }
+    },
+    "preserve-paths": [
+        "wordpress/robots.txt",
+        "wordpress/wp-config.php"
+    ]
+}