Deploying code bases to staging and production websites can be done a million ways, with the bare minium manually FTP'ing the files over or at the other end Docker boxes that build and deploy. At VIA, historically we have used 

 to handle this for us. As time has gone on, we found ourselves wanting to move to something more nimble and that fit more of our current workflow. Enter 

GitHub Actions are basically workflows that are trigged by Git actions and live inside GitHub. For example, you want to build and deploy to production when a branch is merged into main.

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

Actions are written as YAML files and live in the.github folder in the project repo.

For an example scenario, let's say we have a small WordPress website hosted on WP-Engine that needs its theme built as part of the deployment. The workflow will consist of the trigger, setup, build, and deployment.

The trigger is simple, since we want to start the workflow when a branch is merged into main, our production branch.

Next we want to setup the virtual box and dependencies, such as Node. GitHub Actions allows you to configure things such as PHP version, Python version, etc... In this example, we are using latest Ubuntu box, Node 18x, and installing the root and theme Node dependencies. 

Note that npm ci is used instead of npm i, as 

 "in automated environments such as test platforms, continuous integration, and deployment".

Now that everything is setup and installed, the theme can be built

The final step is deployment. With GitHub Actions, there is 

 to share actions, which conveniently there is a 

. To use it, just specify the action and give it your SSH secret key and WP-Engine environment name.

Note that you can store the SSH secret key in the GitHub organization or repo's 

 so it does not appear in the workflow as plaintext.

Now you have a completed workflow that will build and deploy to WP-Engine. As an added bonus, this workflow can be extended for pushing feature branches to staging as well.

We are experts are specifying, designing and implementing the hosting setup your website, app or database needs. 

Hosting

Replacing Jenkins with GitHub Actions

 refers to their services as “Full-funnel Marketing & Sales Automation + CRM”, which essentially means a CRM that contains a marketing component. In more ways than one, SharpSpring is similar to the 

 platform — and offers standard CRM functions such as leads and forms, but they also have components like shopping cart abandonment and email marketing automation based on triggers.

Integrating SharpSpring into a website is actually fairly simple with the 

, which offers many methods/endpoints with a standard REST API. Since VIA is primarily a PHP and JS-based agency, there is a handy third-party 

 available that we use. However, for the purposes of this blog article, we are going to look at the API itself and the following example:

A web application that needs to send user data to SharpSpring as a lead and then place the lead into a custom list.

To create leads, SharpSpring offers the "createLeads" method, which can take up to 500 objects (though only 250 are recommended at once). A lead is only required to have an "emailAddress" (

When creating leads, if a lead already exists, the API will return object-level errors, which won't prevent the entire creation from failing.

So for our example, our application would send our user data to SharpSpring using the "createLeads" method and passing objects that contain "emailAddress", "firstName", and "lastName".

Once the request is returned, we will add them to our list.

Similar to the lead methods, list has the "addListMembers" and "addListMembersEmailAddress" methods.

Our team prefers using the "addListMemberEmailAddress" method since users only have to pass the email address versus the lead ID, which is a little easier to manage without keeping track of it. 

Adding a lead to a list is that easy, only requiring the lead email address and the list ID."

To note, this call is limited to 500 leads (there is no note on staying near 250 like the createLeads method).

Putting this all together in an example class, I have two methods, "createLeads" and "addLeadsToList". Both methods take an array of lead items, while "addLeadsToList" also takes the list ID.

As seen here, even without a library, the SharpSpring API is simple and straightforward to use.

As an added bonus, at the end of the script, we can output all the members from our list by using the "getListMembers" method. With this method, one just needs to pass the list ID.

Now you can create leads, add them to a list, and then output all the leads that belong to said list.

If you are looking for CRM integrations like SharpSpring or HubSpot into existing web platforms, our 

Back-end development does all the heavy lifting behind the scenes. From database design and deployment to writing application programming interfaces (APIs) to simply storing and serving your content, we’ve got you covered.

Backend Development

While we have wide and varied development expertise and experience the core of our development skill is with PHP, Javascript, Vue and React, allowing us to maintain and develop new features for 80% of all websites on the Internet. That said, we regularly explore new and useful platforms to stay ahead of the ever-changing development curve.

PHP, Javascript & React

Interactions with SharpSpring

 for invoicing subscriptions to users. While FreshBooks previously met PVA needs, in the last year or two there have been numerous bouts of API downtime and a confusing API migration that led the VIA team to explore other solutions.

Knowing FreshBooks was already using Stripe for the actual payments, our development team began looking into the 

 product as a replacement service, to fully integrate into Stripe. As part of this process, we had to consider how all of the data would migrate, how we would need to implement this on the website, how we would handle prorations, and the actual rollout of all this to an active subscriber base.

As noted earlier, FreshBooks already uses Stripe to handle the payments in the backend while FreshBooks sits on top and provides the invoicing layer. Migrating to Stripe cuts out the middleman, but also involves migrating all the user subscriptions from Stripe to Stripe — sounds strange but FreshBooks organized the subscriptions in a manner that our team needed to assess and change.

High level, the first step was to create new subscription products in Stripe. Once that was completed and documented, we imported the existing customer base into Stripe so every user was at least accounted for as a customer. At this point, Stripe was populated with usable data and products.

While not necessarily falling under the migration portion, the next step required adding new Stripe-related fields to our local subscriber database and adjusting the registration process to use Stripe to process payments and invoicing.

This total process was QA'd heavily, with pages of scenarios created to address all the known possible outcomes and multiple people testing each scenario out, to account for variability.

The biggest challenge in migrating existing subscriptions into our new subscription system was doing it in a timely manner while not creating too many artifacts.

The migration can be done when a user's subscription expires, but the PVA offers yearly subscriptions in addition to monthly and day passes, so in this case the migration couldn't be completed for at least a year as waiting for subscriptions to end wasn’t possible.

In the case of yearly subscriptions, the subscription would essentially start on the day of migration and a user would receive a proration of what they paid minus what time they have already used.

For example, if a PVA customer paid $400 for a yearly subscription 3 months ago, then they’ve used 25% of it (or $100). They would be prorated $300 and then invoiced $100 for the new subscription. Again, that subscription would basically restart on the day of migration.

To prevent any sort of bug from affecting the entire user base, the rollout of the Stripe invoicing system was limited to batches of users, starting with a select ten and increasing every week by a few hundred. This process was completely automated, sending a notification a week before and migrating the subscriber to Stripe the following week, issuing the proration, and informing the user.

During the rollout, the FreshBooks invoicing system was still live, with both systems being side by side. New subscribers would be funneled through Stripe while users not in that week's batch would see no difference.

As part of any new large feature, we prioritized QA, while also knowing that it wouldn’t be possible to detect all bugs. We were prepared for this and did in fact encounter some during the rollout. However, with this batched rollout, any bug didn't affect the entire user base and we were able to fix it without major disruption.

As mentioned above, users that were to be migrated were notified a week earlier and again on migration, with a link to pay their new Stripe invoice.

We were strategic in our approach of batching the rollout, so that our support team wasn’t flooded with questions at once, but rather in timely groups. This allowed us to assist PVA customers in the most efficient way possible.

In addition to email notices, banners were placed on the website notifying users of the move from FreshBooks to Stripe, and supporting copy and documentation were written beforehand to ensure ease and organization for our support team.

Going into this migration, our team knew we were in for a challenge as the site was live and active with thousands of subscribers. All of our planning and QA'ing paid off, as we only encountered the expected minor bugs coming out of the batched release.

While the batching is still active, the project has been a success overall, as users had/are having a relatively seamless process moving invoicing systems and now the PVA has a more steady and robust invoicing system powered by Stripe.

VIA has the ability to create custom eCommerce experiences and integrate existing platforms and solutions such as Stripe, PayPal, WooCommerce, and Shopify to provide a tailored experience. 

Migrating from FreshBooks to Stripe for invoicing

In Advanced Custom Fields, there is the Post Object field that allows you to select a post resource from your WordPress website. This field can return the actual post object or the post ID. I ran into a problem where I wanted to reuse this field but with dynamic content (posts from another WordPress website). After doing some digging into the ACF code base, I found a method to make this work.

Using the existing Post Object field did not work as there is a non-pluggable function deep in that code that sets the database connection. Copying this field and tweaking it (as a new field) also doesn't work as the Javascript on the frontend is looking for that field name.

From there I moved to use the Select Field. With the Select field, there are multiple filters and hooks you can use to customize the field. For our purposes, there is a Select field with the name "external_resource". 

Using the ACF and Select2 Javascript filters, upon typing in the Select field, query the external Wordpress JSON API and return the appropriate resources (ID and title). The ID gets saved to the database and then use "load_field" hook to fetch populate the field (so it appears correctly in ACF).

First we need to setup the initial Javascript filter. Using this, we can modify the Select2 augments so it will query the external API.

Inside this, we can make sure it's the field we want to modify. From there, we can actually modify the Select2 arguments. Then we send the search query to the Search endpoint and then returning the ID and the title. 

Now that the front end portion is working, we need to get the back end ACF to work. One of the things ACF does with Select fields is verify the value of the Select field with possible values. Because of this, setting the field with dynamic choices will break ACF and leave it with a blank value.

To get around this, the "load_field" hook can be used to dynamically populate the contents of the Select field. Since only IDs exist, an additional call needs to be made to the external WordPress API to fetch the title. 

Now the Select field can populated dynamically and work both on the front end and back end with an external WordPress source.

Custom Dev

We strongly believe in open-source technologies. Our CMS of choice is WordPress, not just for its ease-of-use, but the large community that pushes its development to new and exciting places. Active in the Wordpress community, we also develop 

WordPress

Dynamic Select Fields with Advanced Custom Fields

We recently completed a website project on behalf of our partners at Foxhollow Farm to combine their separate websites for delivery and pickup orders into one. You can read more about our UX solutions and results of the project in our case study. In this journal article however, we wanted to outline some of the development solutions that made this project possible.

The biggest issue when merging two systems is that you have data in different formats in different places, even if it is being used for the same purpose. In Foxhollow Farm's case, we had product data in WooCommerce and Shopify, with additional subscription data in Shopify. VIA Studio intended to merge everything into WooCommerce; this meant we had to move all the subscriptions from Shopify. In addition, one site used Stripe, and the other one used Authorize.net. 

, we were able to set up subscriptions in WooCommerce. The plugin also offers an 

, which can import a formatted CSV with subscriber data. On the Shopify side, Foxhollow Farm was using a tool called ReCharge to manage the subscriptions. 

 offers an active subscriber export, which we used to create a CSV of all the existing data. From there, we did some data massaging to only include the fields we need to import into the Subscriptions plugin. In order to be able to bill customers again, we had to pull the client ID and payment ID from Stripe as well.

Once that data was in the WooCommerce Subscriptions plugin, the subscriptions ran seamlessly, and customers continued to have their subscriptions fulfilled with no interruption on their side. Existing subscriptions use the existing Stripe token to authorize payments while new subscriptions use Authorize.net, to match the rest of the site.

Now that both pickup and delivery products are served through one website, the normal checkout flow provided out of the box by WooCommerce is inadequate. For instance, pickup products do not have shipping, however, they have pickup times and need to be noted multiple times during the checkout flow so the consumer knows this. Another example would be that some delivery products are only available for certain zip codes and there are also instances where both types of products would be in a user's shopping cart.

With this in mind, the design team came up with single page, multi-step checkout experience that informs the user of the shipping information (pickup times, actual shipment information, etc..) and makes everything clear and concise.

VIA Studio partnered with Fox Hollow Farm in Kentucky to improve user experience on their eCommerce shop.

Fox Hollow Farm eCommerce Site

To do this, development-wise we created two different portions - the slideout cart that uses ajax to update cart amounts and products and the actual checkout template. The checkout page is able to include all the required information at page load in tabs, with validation in between each tab step. The backend contains logic for the different use cases of product types.

 to help manage orders. With it, adding new order statuses became something the Foxhollow Farm team could do, and it even has the ability to customize emails sent when the status is changed to the new status. We also customized the existing emails to better reflect the different product types and their delivery or pickup methods.

While these solutions all primarily impacted the website's backend and eCommerce and payment platforms, it is what made the task of combining two website experiences into one, consistent experience possible!

Want to learn more about this project? Check out the UX case study!

Websites are the cornerstone of marketing in this day and age. Your website is the place where you have ultimate freedom to express your brand and interact with your audience and customers how you’d like. Using agile, user-focused strategies and design, we build highly accessible, highly useful websites that meet your goals.

Websites

Development Solutions for Foxhollow.com

Email development has always been the bane of a web developer's existence. You have to use outdated methods and don't have access to the full modern web to create a nice looking email that thousands of people will see. It's like asking a Nascar mechanic to create a car using only tools from the 90s - it can be done but its more than a pain.

With time, however, email development has become easier and more developer-friendly. Gone are the days of creating the email entirely with images and then cutting it up. Now you can breakout out the tables and creating a responsive email that looks good on all clients, even Outlook.

The largest part of developing emails is how the email is actually rendered by the email client. While this seems pretty straightforward at first, the fact that every email client uses a different rendering engine or has its own quirks turns what should be pretty simple into a much larger beast. There are versions of Microsoft Outlook that using `margin` does not work, however, using `Margin` does. Keeping on the Outlook theme, it either uses Microsoft Word or Internet Explorer as a rendering engine. You don't have to be super tech-savvy to understand maybe using Word to display essentially a website may not be the best thing...

However, as time has progressed the rendering engines have gotten better and more standardized. While there are still a lot of quirks, you can build something and be fairly confident that it's going to look good across the board. With the iPhone and smartphones forcing email clients to account for media queries and Gmail dragging everyone along, it's not too bad developing emails.

Outlook is no longer the dominant client as the Apple Suite and Gmail have taken over.  Mobile reigns king as well with the top client being the mail application on the Apple iPhone. 

Bar graph by Litmus of the top email clients.

The top email clients use Apple iPhone according to Litmus.

Top 10 Email Clients Overall

When I first started out in the web development industry as an intern, my first task was updating emails for clients. Even in 2013, this was a process of opening up the email in a HTML editor like Sublime and going thru the spaghetti code trying to make the changes. After a few weeks of email development, I understood why the intern got that job.

Today, the process is much more smooth. Here at VIA, we use three tools primary - 

. The first tool, MJML, is a development tool that allows us to create clean code and modular emails. It also includes a library of tested skeleton components that we can use in the emails and know they work already. It also will build the email and take care of any quirks and will inline and optimize the email. Using this tool has cut down on development time tremendously.

MailChimp is used primarily to manage email campaigns, contacts, and gives marketers the ability to visually edit email templates. MailChimp has the ability to import templates created elsewhere and use tags to create editable areas. Custom templates can be reused and customized for different campaigns. Gone are the days of having a developer create each email for the marketing team.

The other tool that we use extensively is Litmus. Litmus is an email testing tool that allows you to see your email in any of the major email clients. For instance, we have the ability to see what the email will look like in Outlook 2007, 2016, iOS Mail, and Gmail all the same time. It also has other features such as live editing and accessibility tools. With Litmus, we don't have to have the actual devices on site - no old Windows machine with Outlook on it.

When designing an email, a designer and developer at VIA first sit down and go over the constraints. We use the tried and true width of 640px as the base of the email and then try to design everything as blocks with no overlap. There is also a reminder on what modern CSS attributes, such as box shadows, do not work for emails. Previously, since it was a giant image being cut up or a much simpler email design, there was no need for dev and design collab.

Once we have a design approved by all parties, development starts. The email is cut up into the blocks and each is developed as a component in the email. Using MJML we are able to import these components into the main email file. In the end, we end up with a nice folder of components and an external stylesheet that is easy to navigate and make changes.

From there the email is imported into MailChimp, our email campaign tool of choice, and content loaded in. The email is then sent from MailChimp to Litmus to be tested in the major email clients. Typically there are the normal changes and then a set of Outlook only changes that have to be made. These revisions is typically resolved in one or two tests and then the email template is updated in MailChimp and sent for final approval.

Once this email template has been created and tested, it can be reused by the VIA marketing team without any help from developers. No more interns having to make changes.

View All Entries in the Email @ 50 Series:

Part I: Email @ 50: Email Marketing Still Works... Half a Century Later

Part II: Email @ 50: The Art of Email Design

Part IV: Email @ 50: Retrospective + The Future of Email

Email

Email stands the test of time as a reliable, trusted, always-there medium - and we’re big believers in its place and power with users. From developing interested audiences to supporting customers post-purchase and beyond, we can help you attract high-value, qualified emails leads and provide them engaging, valuable content through sophisticated email campaign strategy, design and development.

Email Campaigns

HTML, CSS and Javascript form the "presentation layer" of modern web development in your mobile and desktop browser. These things together are considered "Front-end Development". The tools, techniques and standards are changing all of the time - but our development team is always staying abreast of the latest. For our partners, we do the research, experimentation and testing needed to make sure your audience has an accessible, fast, reliable experience.

Frontend Development

Email @ 50: Email Development

One of the biggest challenges of moving from one CMS to another is getting your existing data to the new platform. In our case, we were moving our existing WordPress platform, which had been around for years, over to the 

 platform. At a high level, this involved getting the data out, transforming the data into something Sanity could read, and then actually importing it.

The first step was to get the actual data out of WordPress. You can achieve this with many different methods, but because the overall process was over the course of weeks and the content would change, I went with creating a custom plugin. This plugin would grab all my data, transform (which we will talk about later), and spit out a file that could be imported by Sanity.

To make this easy, the plugin made use of 

, which gives your Laravel classes for your WordPress objects. Using Corcel, I'm able to make changes to the different Wordpress object attributes and grab those attributes. For instance, let's say in Sanity I have a post published field which format is different than the published date in Wordpress. I can modify that published field in my class and then anytime I grab it will be Sanity ready.

In all my Corcel classes, I have an export method that grabs all the needed data and throws it into an array. In the main plugin class, I loop thru all my Corcel classes and call that export function, which then gets added to an array holder. That array holder then gets thrown into a ndjson (newline delimited JSON) file that gets downloaded.

There are two big elephants in the room - shortcodes and Portable Text. With shortcodes, the question comes up of how do we deal with content in shortcodes and how do we mimic that styling in Sanity. With portable text, how do we get the Wordpress object content (so our blog post content) in the portable text format that Sanity uses? At the time of this writing, there is not a PHP library that converts HTML to Portable Text (there are libraries for other languages).

The concept I came up with for dealing with shortcodes was to convert the shortcode into a custom HTML element that contained all the data I need, either as attributes or as inner content. Then when that gets converted over with Portable Text, we have a custom deserializer for that element. Now we have all that content and still get to format it separately.

For example, let's say I have a custom shortcode called "intro" that has one attribute called "color" and has content that lives inside of it. In my BlogPost class, I am modifying the content attribute and looking for my intro shortcode. Once I've found a case of that shortcode, I'm going to replace the actual shortcode ([intro]) with a custom HTML element called "<intro>". I'm going to grab the color attribute and content as well so I'm left with

That would replace the shortcode in my BlogPost content and later on I can use a custom deserializer to convert that into my intro Sanity block (we will talk about that later).

For a real-world example, we used the gallery shortcode in our blog posts. The gallery shortcode contains the "ids" attribute which is just a string of IDs of the images that it will grab. Looking over to the Sanity side, while we don't have a gallery block, we have  row/colum and image blocks, so we will want to convert the shortcode into something like this

Just like before, we look for our gallery shortcode in the blog post content. Once we find it, we grab the IDs attribute, fetch images for those IDs, and then remove the shortcode and replace it with the above code. On the Portable Text side, the default deserializer can handle image, so we just have to write a custom portion to handle the row tags.

 We do this process across the board for all the shortcodes we want to keep. Wordpress offers a handy function that will spit out it's shortcode regex, so we use that to grab our shortcodes.

From there we want to specific what shortcodes we want to keep, loop over those shortcodes, use the regex to find those shortcodes, and then do our content changes. 

At the time of this writing and when we did this data transition, there was not a HTML to Portable Text PHP library (the inverse is available). However, there is a Node.js library for this in the 

. What we did was set up a Node server with 

 running that accepted HTML (base64 encoded) and returned Portable Text. In this, we also had our custom deserializers for our shortcodes.

Now that our data has been exported and transformed, we can import the ndjson file into Sanity. To do this, use the 

. The tool will import images into your Sanity Media and will not timeout. With the "--replace" flag, it will overwrite existing documents, which is useful your doing testing.

At this point your data is now migrated. For us, it took a couple of imports to get it where we wanted it at, but in the end it worked out well.

Wordpress to Sanity Data Script

Here at VIA, we have many clients that use 

, which is also our preferred eCommerce solution. Over the years, we’ve found a few helpful tips and tricks that make developing for WooCommerce a little bit easier.

By using hooks (actions/filters) you can keep your code changes more streamlined and relatively maintenance-free (when compared to using a template override for one small change). In our process, anytime you use a template override, you have to justify doing that over using a hook.

For example, with the Corona virus causing disruptions, you may want to display a notice on how it will affect shipping above the shipping methods section in the checkout. So instead of making a template and manually adding a paragraph tag above that section, you can use the 

If you do have to use a template override, make sure you make a note in the file what you are adding or removing to it. This will come in handy down the road when you are updating WooCommerce and you have to update template files – if you don’t document the template override changes, it’s way harder to apply the new changes without overriding your changes and spending time comparing the two.

If you don’t have to, don’t use a plugin. While they are super handy and save on development time, if it’s something on the simple side, go ahead and roll your own unless the plugin you are considering is high quality (trusted source, good ratings, up to date).

Recently I reviewed a site that was held together by 44 plugins, the majority being different WooCommerce related plugins and needless to say there were many conflicts and the overall performance was bad. This was a case where 75% of the plugins could have been rolled by the developer at a low cost for better performance and higher quality.

If you need to sell online, we’ve got you covered. From simple selling strategies to complex subscription models, we’ve built them all. Our clients with ecommerce process tens of thousands of dollars per month through our systems. From Shopify integrations to WooCommerce workhorses to Magento installations and beyond, we’ve built and managed them all, safely and securely.

Ecommerce

WooCommerce Tips

At VIA, we’ve been experimenting with the many different solutions to creating mobile applications with web technologies. We’ve done simple applications that wrap a webview (

) to more advanced hybrid applications using libraries such as 

 this year, Nativescript announced support for Vue.js. Nativescript, which is a library and toolset that allows you to create native iOS and Android applications with Javascript, CSS, and XML. In the past, Nativescript supported Angular and Typescript, and now supports writing apps with 

. While Nativescript has always been on our radar, allowing apps to be written with Vue.js is a game-changer.

 into actual native elements. It does this by specifying elements in an XML style format, similar to native app development. From there, you can reference these elements like you would a DIV (it should be noted that there is no actual DOM with Nativescript). These elements can be styled with 

Javascript that is able to access all the native APIs

While we work primarily with React.js, we also know our way around Vue.js and the opportunity to create mobile apps with Vue.js seemed enticing.

 a “plugin that enables the usage of Vue.js with NativeScript”. Basically, the plugin allows Vue.js to interact with Nativescript and allows you to build an app with Vue.js. 

 offers the following reason to use Vue.js with Nativescript


"Vue.js provides all of the plumbing necessary to create high quality, highly maintainable apps, and you can reuse a considerable amount of your existing Vue.js knowledge and even web-based code to build your NativeScript-Vue app."

"With NativeScript, you can create zero compromise mobile apps with Vue.js that feature truly native UI and performance. Enjoy glorious 60fps without being a CSS or JavaScript wizard, even on Android. Say goodbye to mobile jank."

There is a great getting start guide located 

. I spent a few minutes creating a sample app that shows off a tab component and a listview of countries. You can open it up in the Nativescript Playground 

If you can get past creating layouts like you do with native applications and not having a DOM, Nativescript is extremely powerful and really closes the gap between full-on native apps and solutions using web technologies.

If your brand requires a stronger mobile presence or more functionality than a website can provide, we have experience building native mobile applications for clients. We can help you navigate your users’ current mobile expectations and determine if a mobile app or mobile website is the right solution. If a mobile application is the right course of action we can build, publish, and maintain it on all of the major mobile platforms.

Mobile Apps

Nativescript with Vue.js

, built by the folks over at Laravel, is a “beautifully designed administration panel for Laravel”. Beyond the fancy words and fluff, it is CRUD admin layer built with Vue.js and Tailwind.css that is made to work with your Laravel project almost out of the box. With Nova, you could drop it in, configure a “Nova” for each of your Eloquent models, and you ready to go.

By using Nova, you save a ton of time that would be spent building out a capable admin UI. It can also be extended with tons of 

Nova can be installed either by dropping in a ZIP file or with Composer. From there it’s just an Artisan command – “artisan nova:install”. Then, Nova resources can be created, which link Nova to your models. After that, you can 

 and your ready to go (you can also set up 

Nova provides a full CRUD interface for your Eloquent models. Every type of Eloquent relationship is fully supported. Need to edit the pivot data on your polymorphic many-to-many relationship? We have you covered.

Actions are PHP tasks that you can run against a resource or batch of resources. Have an action that takes a while? No problem, Nova’s queued actions will keep your administration panel feeling snappy.

Write custom filters for your resource indexes to offer your users quick glances at different segments of your data. To get you started, we’ve included built-in filters for “soft deleted” resources.

Need to customize a resource list a little more than a filter can provide? No problem. Add lenses to your resource to take full control over the entire Eloquent query.

Nova makes it painless to quickly display custom metrics for your application, allowing you to generate three types of graphs in seconds. To put the cherry on top, we’ve included query helper.

Nova offers CLI generators for scaffolding your own custom tools. We’ll give you a Vue component and infinite possibilities. Build the custom tools your business requires, or build the next great Nova add-on and share it with the world.

Need a field type that isn’t included with Nova? No problem – use the Nova CLI to generate a custom field and take total control over its implementation and design.

Feel the power of the Laravel ecosystem by linking your Nova administration panel with Laravel Scout. Once you do, you’ll get blazing fast search results powered by Algolia and the cloud.

Currently we have an internal project that the dev team is bootstrapping that will offer different plugins and extensions for software such as WordPress. As part of this, we rolled our own ordering system and software licensing system. With Nova, we didn’t have to create an admin panel to manage any of the systems, which sped up time of development immensely.

As you can see, we have our “resources” (of our models) in the navigation bar and then an overview of all the data in the model with the ability to add a new item or edit/delete the current one.

First off, Nova isn’t the only player in the field – there is also 

, which has been around longer than Nova and can be cheaper (offers an unlimited use license and free for non-commercial projects). 

 is an article comparing the two. One of the 

 with Nova is that it can be hard to customize and if you trying to go beyond the norm, to either use Backpack or build your own solution.

However if you are trying to launch fast and aren’t doing anything too complicated, Nova is the perfect solution for an admin panel.

Nova

 and started developing for the HubSpot platform. 

 is a “full platform of marketing, sales, customer service, and CRM software - plus the methodology, resources, and support - to help businesses”. Needless to say, it has been a joy to work with HubSpot as it offers an easy-to-use API and clean interface.

Let’s go over setting up a test environment and making sample API calls (with PHP) to create/update contacts and fill out a form.

Creating a testing environment within HubSpot is extremely easy (and very useful). After logging in, in the navigation bar there is a link for testing and from there you can create a test environment. The environment will “remain active as long as it’s receiving API calls and it will expire if it’s been inactive for 90 days”.

Ryan Winchester has developed a handy HubSpot PHP API client, which can be found on 

. Once you’ve added it to your project, the first thing you need to is setup your client. I wrapped my client connection in a function that returns the connection, that way I can call it as needed.

All the resources provided by the HubSpot PHP API client can be found 

 and they should match the HubSpot methods, which can be found 

Let’s say I want to add a new contact and update a property for the contact – HubSpot makes this easy enough with the 

 method. This allows you, just as the name suggests, to create or update a contact, by passing an email address (for the contact) and any properties you would like to update.

Now what if you wanted to submit a form, for example you have a questionnaire in your app that results need to be saved to a form in HubSpot – again, HubSpot makes this easy with the 

Nick Stewart

Journal Entries