Last night I had the privilege of walking us through our first interactive Drupal meetup here in St. Louis. I'll be honest, I didn't have time to fully plan the night out like I had hoped but everything actually turned out great and it was one of the most fun I've had at a meetup in a while.

Security Release

First up, we discussed the recent security release for Drupal 7. Thankfully, everyone in the room was aware of the release and had taken action to patch their sites. Beaven Rudge wrote a great article discussing how important it is to take action against any public Drupal 7 site you've got up. I highly recommend reading through the info-graphic that he posted.

Digging in - The Fun Part

Our goal for the evening was to build two applications for our faux pizza company "Dangulo's" (special credit goes to Jeff Geerling for the name). The first would use Drupal as a backend admin and data api. It would also be used to manage ingredient inventory and process orders. The second would be a separate AngularJS application that would serve a fairly dynamic form that customers would use to order our world-famous pie.

Before we dove in, we had to give an impromptu (and hopefully coherent) walkthrough of how AngularJS works and why we would chose to use it in this case. It's important to note that nearly any front-end framework could have been used for the customer-facing app. However, lately a good portion of my time has been spent with AngularJS so that's the route we chose for this project.

Once we had a good understanding of our architecture and how everything needed to be structured, we moved to the Drupal side. For this project, we decided to go with the beta2 version of Drupal 8. Thankfully, most in the room didn't have much trouble getting D8 up and running.

Drupal Configuration

Within our Drupal app, we needed to:

• Create a Toppings vocabulary with:
  • Title - the name of the topping
  • In Stock (boolean) - Whether the topping was in stock
• Create an Orders content type with the following fields:
  • Name (text) - The name of the customer
  • Quantity (number) - The number of pizzas being ordered
  • Toppings (taxonomy term reference) - Referencing Toppings
• Create a view that ouput a json-formatted list of toppings with:
  • Title
  • In stock

After creating the taxonomy, content type, and views, we created some sample ingredients and ended up with a pretty cool api endpoint for our ingredients.

Hello AngularJS

Next, we moved onto the AngularJS side. For this project, I created a starter app (which can be cloned/downloaded at github) that everyone downloaded so that they wouldn't have to start from zero. I actually used Yeoman to generate this app but decided to just push up a build of the app since no one had had node and/or grunt installed. This led to a small issue that all of the files were minified & uglified but given that we only had two hours to get things going, we forged ahead. If you're interested in working with the full app, it can be found here.

After configuring our controller to use $http to query our Drupal endpoint, and adding some markup to our orders view, we ended up with a list of ingredients from Drupal. Woot!

I'll admit, the app isn't that exciting at this point but the fact that we were able to manage content in Drupal, have it output in a standard format, and then use a completely decoupled application to view that data was very rewarding. Sadly, we ran out of time before we could go any further but in the end, I think we covered a lot of ground.

Next up?

Obviously, our apps are lacking a lot of functionality before they could be considered "production-ready". Things that we weren't able to get to include:

• Nesting ingredients into categories (ie meats, cheeses, veggies, etc)
• Building the actual form in AngularJS that has dynamic components (ie showing/hiding toppings selection, order total, etc)
• Creating order nodes in Drupal from the AngularJS app

Given that we've got so much work to do, we've decided to extend our interactive session into a second meetup. So mark your calendars as we will meet again in November for our last meetup of the year. Our goal will be to finish out our app and head into the holidays with a better understanding of this brave new world.

Special Thanks

Lastly, I'd like to send a special thanks to Relay Technology for hosting our meetup. Josh Paydon stopped by and gave us some great insight into their company, as well as how the tech scene is evolving in St. Louis. If you're a developer looking for work in the St. Louis area, I highly recommend getting in touch with them as they're a great company with some great opportunities available.

Tags

• drupal-planet
• drupal
• angularjs
• grunt
• yeoman
• node.js