From 1a32a63c4c40dc0a75dd6a485096e6031fef0ff3 Mon Sep 17 00:00:00 2001 From: PA4KEV Date: Mon, 2 Jan 2023 21:46:37 +0100 Subject: [PATCH] Add DXP development software page --- src/Pages/Software/Projects/DXPDevelopment.js | 46 +++++++++++++++++++ src/Pages/Software/Software.js | 13 ++++++ src/UI/Navigation.js | 2 + 3 files changed, 61 insertions(+) create mode 100644 src/Pages/Software/Projects/DXPDevelopment.js diff --git a/src/Pages/Software/Projects/DXPDevelopment.js b/src/Pages/Software/Projects/DXPDevelopment.js new file mode 100644 index 0000000..59444c9 --- /dev/null +++ b/src/Pages/Software/Projects/DXPDevelopment.js @@ -0,0 +1,46 @@ +import React from 'react'; + +import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'; + +const DXPDevelopment = () => { + return ( +
+
+ +
+ +
+
+

DXP Development

+

OPPLE Catalog Generator

+

What is DXP? It stands for Digital Experience Platform and is basically interactive software where data can be maintained. One such DXP I loved working on was for OPPLE. They are a brand of lighting products and have over 14000 different items.

+

My contributions were taking ownership of their catalog generator tool and maintaining the data of their products in Drupal on their website.

+

You can view the catalog here: https://www.opple.nl/en/product-catalogue-np

+

All the data was supplied through an external API by Compano and through an uploaded XML file. This data had to be parsed and converged into a logical structure so that products and product families were matched along with their features, photographs, accessoires, dimensional drawings, sensor diagrams and more. And all data is multilingual. And of course data had to be exchanged through excel files for pricelists and tender texts. Data was used interchangably between different tools and websites.

+ opple catalog +

The catalog generator makes use of the Drupal platform as an intranet portal where thousands of PDF's could be automatically generated in a single batch. The customer only has to alter the data and the layouts and appropriate sections appear.

+
+ +
+

Legacy

+

This project was handed to me as a monolithic source, with only 1 PHP file containing all the rendering logic and handling exceptions (as in, many products had their own unique, exceptional attributes). This was a project that had outgrown itself and was hard to scale further due to the current structure. I had to improve the code base, while retaining the legacy functions. But because everything was so tightly coupled I had to make sure a change did not break functionality elsewhere. The key is to write new code and provide "safety nets" for older code.

+

A common misconception is to think by creating quick code, is easy gain. Not much effort, just copy and paste the existing logic and adjust it a bit. Then put it in the same file, no need to document it. But by building up Technical Dept, you will either leave this code behind or you will forget how everything works. Making code scalable, is essential. Even for "small" or "temporary" projects. Do not take shortcuts, thinking it will save time or meet the deadline.

+
+ +
+

Improvement

+

Restructuring code built as such requires mostly patience. You cannot instantly restart everything, as this tool is used in production. You cannot create a new architecture complete with diagrams, there is currently no time. It is not the only project I work on, there are 20 other projects that also require attention. Instead, I started by moving functions around every time I worked on a new feature for the tool. Dedicating existing functions to separate module files was the start. Creating object-oriented code for new features was the next step. Applying unit tests came next. As long as a new feature request did not exceed in time, it could be slowly prepared to grow by having prework done every time.

+

Eventually, it became a tool with composed logic, making future maintenance and feature requests a lot more simple.

+

Moving forward with a structured tool, I am proud to have collaborated on this project!

+
+
+ +
+ ) +} + +export default DXPDevelopment; \ No newline at end of file diff --git a/src/Pages/Software/Software.js b/src/Pages/Software/Software.js index 7a6c008..5277291 100644 --- a/src/Pages/Software/Software.js +++ b/src/Pages/Software/Software.js @@ -1,5 +1,7 @@ import React from 'react'; +import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'; + const Software = () => { return (
@@ -9,6 +11,7 @@ const Software = () => { Certification Courses Skills + Projects
@@ -96,6 +99,16 @@ const Software = () => {
  • Git
    • + + +
    +

    Projects

    +
    +

    Projects I have worked on:

    + +
    diff --git a/src/UI/Navigation.js b/src/UI/Navigation.js index efbf84e..bc9b0bc 100644 --- a/src/UI/Navigation.js +++ b/src/UI/Navigation.js @@ -5,6 +5,7 @@ import Home from '../Pages/Home'; import Linux from '../Pages/Linux/Linux'; import Radio from '../Pages/Radio/Radio'; import Software from '../Pages/Software/Software'; +import DXPDevelopment from '../Pages/Software/Projects/DXPDevelopment'; import './Navigation.css'; @@ -49,6 +50,7 @@ const Navigation = (props) => { }> }> + }> }> }>