Dewdrop: Part One
At work, we have been working on a plugin tool called Dewdrop. You can find more information on it at GitHub. This is the first in a series of high-level tutorials on Dewdrop plugin development for WordPress.
The readme on the github page is fairly comprehensive, but this first post will be a detailed step-by-step of how to get a Dewdrop plugin going. There are a few undocumented caveats.
Step Zero: Problem Introduction
I will be working to develop a WordPress plugin which will manage an automated quote system for people wanting an attorney to handle their traffic tickets. The client will fill out a form with the details of their ticket (violation, county, court, etc), and after some simple calculations are done based on the options they selected, they will be given a quote. This is a pretty simple model that could be easily adapted to a wide variety of business needs. Each of the options will have different variables associated with them which affect the final quote. For example, there may be a base price for any quote of $100, but for specific counties there may be a modifier of an additional $40, which would take the quoted price up to $140.
Step One: Installation
For the purposes of this demo, I will be working on a stock Digital Ocean server running WordPress 4.1 on 14.04. They have a guide for an One-Click Install that you can follow to get the WordPress instance set up, and I won’t be going in to the details covered there. I will also be using the 2015 theme, although bear in mind that your front end styling can be whatever you like.
There are also a few things required for Dewdrop that I will address as we get going.
First things first, SSH in to your server, cd in to the WordPress pugin directory and create a new directory for your plugin.
$ cd /var/www/wp-content/plugins/ $ mkdir dewdropdemo $ cd dewdropdemo
We will be following the steps in Dewdrop’s README.md pretty closely, but there are a few additional pieces of information. Create a composer.json file with the following contents:
{
"autoload": {
"psr-4": {
"Model\\": "models/"
}
},
"require": {
"deltasystems/dewdrop": "dev-master"
}
}
The next step is to download and install Composer and install Dewdrop and it’s dependencies using the composer.json file you just created.
$ curl -s http://getcomposer.org/installer | php $ php composer.phar install --prefer-dist
Whoops! I seem to have run in to a problem.
Your requirements could not be resolved to an installable set of packages.
Problem 1
- phpdocumentor/template-zend 1.3.2 requires ext-xsl * -> the requested PHP extension xsl is missing from your system.
- phpdocumentor/template-zend 1.3.1 requires ext-xsl * -> the requested PHP extension xsl is missing from your system.
- phpdocumentor/template-zend 1.3.0 requires ext-xsl * -> the requested PHP extension xsl is missing from your system.
- deltasystems/dewdrop dev-master requires phpdocumentor/phpdocumentor 2.7.* -> satisfiable by phpdocumentor/phpdocumentor[v2.7.0, v2.7.1].
- phpdocumentor/phpdocumentor v2.7.0 requires phpdocumentor/template-zend ~1.3 -> satisfiable by phpdocumentor/template-zend[1.3.0, 1.3.1, 1.3.2].
- phpdocumentor/phpdocumentor v2.7.1 requires phpdocumentor/template-zend ~1.3 -> satisfiable by phpdocumentor/template-zend[1.3.0, 1.3.1, 1.3.2].
- Installation request for deltasystems/dewdrop dev-master -> satisfiable by deltasystems/dewdrop[dev-master].
Composer requires the PHP extension xsl. You can install it using apt-get like so:
apt-get install php5-xsl
But there seems to be another problem — this is, to the best of my knowledge, an issue with DigitalOcean’s one-click install, and hopefully it won’t be the case in the future, but at the time of writing by following this guide you will see
$ apt-get install php5-xsl Reading package lists... Done Building dependency tree Reading state information... Done The following extra packages will be installed: libxslt1.1 The following NEW packages will be installed: libxslt1.1 php5-xsl 0 upgraded, 2 newly installed, 0 to remove and 3 not upgraded. Need to get 159 kB of archives. After this operation, 587 kB of additional disk space will be used. Do you want to continue? [Y/n] y Get:1 http://us.archive.ubuntu.com/ubuntu/ trusty/main libxslt1.1 amd64 1.1.28-2build1 [145 kB] Err http://us.archive.ubuntu.com/ubuntu/ trusty-updates/main php5-xsl amd64 5.5.9+dfsg-1ubuntu4.4 404 Not Found [IP: 91.189.91.14 80] Err http://security.ubuntu.com/ubuntu/ trusty-security/main php5-xsl amd64 5.5.9+dfsg-1ubuntu4.4 404 Not Found [IP: 91.189.91.24 80] Fetched 145 kB in 0s (1,260 kB/s) E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/main/p/php5/php5-xsl_5.5.9+dfsg-1ubuntu4.4_amd64.deb 404 Not Found [IP: 91.189.91.24 80] E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
This looks like Ubuntu’s packages are 404’ing on me. It only does it about 40% of the time, and can be fixed by a few updates:
$ sudo apt-get update $ sudo apt-get upgrade $ sudo apt-get dist-upgrade
Now you should be able to
$ apt-get install php5-xsl
without any issues, and finally
$ php composer.phar install --prefer-dist
Loading composer repositories with package information
Installing dependencies (including require-dev)
- Installing phpdocumentor/unified-asset-installer (1.1.2)
Downloading: 100%
The following exception is caused by a lack of memory and not having swap configured
Check https://getcomposer.org/doc/articles/troubleshooting.md#proc-open-fork-failed-errors for details
PHP Fatal error: Uncaught exception 'ErrorException' with message 'proc_open(): fork failed - Cannot allocate memory' in phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php:974
Stack trace:
#0 [internal function]: Composer\Util\ErrorHandler::handle(2, 'proc_open(): fo...', 'phar:///var/www...', 974, Array)
#1 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php(974): proc_open('stty -a | grep ...', Array, NULL, NULL, NULL, Array)
#2 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php(784): Symfony\Component\Console\Application->getSttyColumns()
#3 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php(745): Symfony\Component\Console\Application->getTerminalDimensions()
#4 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/ in phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php on line 974
Fatal error: Uncaught exception 'ErrorException' with message 'proc_open(): fork failed - Cannot allocate memory' in phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php:974
Stack trace:
#0 [internal function]: Composer\Util\ErrorHandler::handle(2, 'proc_open(): fo...', 'phar:///var/www...', 974, Array)
#1 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php(974): proc_open('stty -a | grep ...', Array, NULL, NULL, NULL, Array)
#2 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php(784): Symfony\Component\Console\Application->getSttyColumns()
#3 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php(745): Symfony\Component\Console\Application->getTerminalDimensions()
#4 phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/ in phar:///var/www/wp-content/plugins/dewdropdemo/composer.phar/vendor/symfony/console/Symfony/Component/Console/Application.php on line 974
Nope! One last thing. This time it is simple, they give you the link in the error message. Enter the commands there:
$ /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024 $ /sbin/mkswap /var/swap.1 $ /sbin/swapon /var/swap.1
And finally this time……….
$ php composer.phar install --prefer-dist
Success! Dewdrop is now installed in this plugin location. Note: It may ask for your GitHub username and password while downloading a million packages. Just enter it, it’s only for downloading.
Step Two: Initialization
There are a few more things necessary to lay the groundwork for Dewdrop plugin development. The first is
$ ./vendor/bin/dewdrop wp-init
Dewdrop’s command line utility is installed at that location. Hint: If you ever want to see all the commands available through the CLI, just enter that command without the `wp-init` argument. Wp-init will create the local directories we will be working out of, in a structure like so:
admin/ db/ models/ └── metadata www/
The next command is
$ ./vendor/bin/dewdrop dbdeploy
This will run dbdeploy to set up the tables &c we will be working with. Dbdeploy is one of the more frequently used commands.
Finally, we will
$ ./vendor/bin/dewdrop dewdrop-test
This will run all of Dewdrop’s automated tests. ((Protip: At the time of writing, there are 537 tests, 960 assertions, 1 failure and 18 errors, but that should get resolved shortly))
Step Three: Some other requirements
Dewdrop has a few dependencies that are not explicitly mentioned anywhere.
WP Session Manager Plugin
WP Session Manager Plugin is used by Dewdrop to handle WP’s alerts, I believe. It is a free plugin which you should install.
intl PHP extension
$ apt-get install php5-intl
You will need to restart Apache next
$ sudo service apache2 restart
Bower
The next step is to get Bower installed and ready, which will handle the js/css which help to make Dewdrop beautiful :) This will require node.js, NPM, and Bower, in that order. You can easily find links to how to install all these things, but if you’re following along on my Ubuntu-based droplet, here are the commands you will need to use.
curl -sL https://deb.nodesource.com/setup | sudo bash - sudo apt-get install -y nodejs apt-get install -y build-essential
This should get Node.js set up properly. Following that, you will need NPM:
sudo apt-get install npm
And following that, Bower:
npm install -g bower
We also need a .bowerrc file, which will tell Bower where to install the libraries Dewdrop will look for. You will create it in the same directory as the bower.json file is found, like so:
touch vendor/deltasystems/dewdrop/.bowerrc
You can then edit it in your favorite editor so the contents look like this:
{
"directory": "../../../www/bower_components"
}
This tells Bower that we would like to install in the bower_components directory, located in the www directory of our plugin’s root. This is where Dewdrop will look for them. Once you have that file created, while still in the vendor/deltasystems/dewdrop directory, you can run
bower install
After it’s done running, you will have all the packages available in www/bower_components.
I’m leaving this section open to potential extension in the future, as there may be other requirements I’m missing at this time.
Share Your Thoughts