Conclusions

-

I have been tasked to create a dynamic website built on foundation of the WordPress – most popular content management system in the world. WordPress provides ease of use and broad range of additional plugins which can be very convenient for non - technical users.

Adding, modifying, and updating content is relatively easy and less time - consuming task than developing everything from scratch. That is why WordPress is still the platform of choice for 34% of Internet’s websites. Its plugin directory has more than 55000 and the WooCommerce (e-commerce solution for WordPress) powers 22% of the top 1 million online shops. (Source: link )

To demonstrate use of dynamic data within website I created two plugins which were embedded in the WP pages. One consumed Open Weather API and XML data and displayed dynamic user interface with help of jQuery (JavaScript library), second requested COVID-19 API latest info and output JSON response data using probably the most popular JavaScript library – React.js. Developing those as separate plugins gave me flexibility to insert it anywhere, I wanted to and the ability to re-use it (if required) in the future.

Other part of the task was to add the shop functionality to the website which is also easy by using one of the most popular ecommerce plugins for WordPress – WooCommerce. Creating shop and adding products were literally couple clicks and it is all available for free which is a great option for start-ups or small businesses. Expanding functionality of the shop by adding dynamic cart / checkout or extra payment methods is also quick thanks to huge plugin library. Visual side of the shop or the whole website can be also changed by using different themes (paid or free) or modifying existing one by creating a child theme. I created child theme based on the one already provided. The main advantage of creating the child theme is that all modifications will be still in place in case of parent theme update.

The last, more advanced part of the task was to use WordPress REST API and display content on the separate website. I decided to use React.js library for creating user interface again. I want to become more familiar and proficient in use of that tool and I like the component-based approach to building user interfaces. Adding CRUD (create, update, and delete) functionality were more complicated due to required authentication for the client’s requests. This problem was solved by adding user login section and authenticate it with JSON web token. A unique token is generated for successfully logged in users then it is stored in the browser’s cookie and is sent with all POST, PATCH and DELETE HTTP requests to WordPress API where is checked by JWT Authentication for WP-API plugin. If all data match, the request is executed, and proper message is displayed for the user in the browser.

Modern web development requires speed and cost-effective solutions and WordPress can offer both because it is free and require a relatively short amount of time from set-up to full deployment of small or big projects.

Integration of most popular JavaScript’s frontend frameworks like React, Vue or Angular with WordPress backend is also great solution for creating fast and dynamic websites without need to know any backend technologies like PHP or Node.js (JavaScript).

I enjoyed this module and I’m going to explore more possible uses for the WordPress REST API and will keep it in mind for my future projects.

Pawel Karpinski

Comments

Post a Comment

Popular posts from this blog

E-Commerce made easy with WordPress & WooCommerce

-
Image
  E-commerce introduction E-commerce (electronic commerce) refers to transactions conducted via the World Wide Web. It may involve buying physical or digital products, ordering services or transfer funds. It is booming sector with revenue growing every year. Even  in uncertain times of covid-19 pandemic online shopping is thriving. Purchasing goods from the comfort of own homes and get them delivered even the same day is changing the way how people perceive shopping process. Old ways of buying from brick and mortar stores are about to extinct. Time is the crucial factor when it comes to sales and if shops or manufacturers wants to be competitive on the market starting an online selling platform should be easy and quick. WordPress designed as a blogging platform became now home to millions of businesses thanks to plethora of plugins which allow to set-up selling goods and services in a matter of hours. WooCommerce installation and Setup I will demonstrate how easy is to add the...
Read more

Wordpress Environment Setup

-
Image
Wordpress require server environment (Apache, Nginx), PHP and access to MySQL or MariaDB for storing information. There are couple options available how we can to start developing wordpress powered websites:  Buy dedicated hosting space ( https://wordpress.com/pricing/ ) Create own server based on Cloud Computing Services Amazon AWS  Light Sail or  Digital Ocean  droplet Install on own Apache, Nginx server Linux based computer or raspberry Pi device Install PHP development environment on local desktop laptop -  XAMPP Use popular containerized approach with  Docker I'm going to setup my development environment using Docker. This will remove the hassle of installation and configuration required software on local computer. Instead I will create Docker compose file which use separate image files for (wordpress, php myadmin, and mySQL) and allow for one command set-up of whole environment. All required image files can be found on  Docker Hub  - libra...
Read more

Creating Frontend with React.js

-
Image
 Installing React Development Environment Now let's build independent frontend for the wordpress website using React.js - JavaScript library for creating user unterfaces.  To install React development we use popular npm (Node Package Manager) package  - create-react-app .  I created folder "frontend" for the react application in root folder of the wordpress website. Then use command npx create-react-app . in that folder to scaffold starting react project. Please don't forget to install Node.js which is required for React & NPM packages!! After successful installation we can compile and run the react app in the browser using npm start command in the terminal. Result in the browser, url address http://localhost:3000 Let's install additional NPM packages axios and react-router-dom . First is a promise based HTTP client for the browser and node.js, and second is a tool to handle routes in a single page application using dynamic routing. List of all installed...
Read more