This is part three in a series of articles documenting the process of building our first Shopify app. Click here for part two.
What To Build, What To Build…
The first step to building a Shopify app should be deciding what the app is going to be. Technically we made this our second step (the first being the development of our authentication system), but regardless, we quickly plotted the requirements we had for our app:
- Simple. The app should be relatively small and easy to execute. It should do its job without getting in the way or being overly complex.
- Solves a problem. It should solve a problem or fill a need that store owners have with a standard Shopify installation.
- Thoughtful. Every choice we make should be carefully considered and engineered to provide the best merchant experience.
With these requirements in mind, we began brainstorming ideas for what our first app could be.
The Idea
As this first app would serve as a template for all future apps, and be used to test our entire process from beginning to end, we wanted it to be a very small and simple idea to ensure a smooth process.
At this time, two of our co-founders were running a Shopify store of their own, and needed an app to allow customer’s to choose a specific delivery date for their order when checking out. They tried several, but found different issues with each one, and couldn’t get a perfect fit for their requirements.
This led us to an obvious conclusion: we should just make our own.
Research and Planning
We decided to build Delivery Date Picker (our working title for what is now called Bloom), and got to work researching other similar apps in the marketplace to get an idea of what features they generally offered and how they presented those features to their users.
We also found a lot of useful information by scouring through other app’s reviews to see what features users liked, and which they felt were missing.
From this, we compiled a list of goals we would like to be able to achieve with our date picker. Here’s a snippet:
To control the days that are enabled in the calendar:
- Disable specific days of the week
- Disable specific dates
- Disable X days before date. (e.g. must order 3 days before delivery date)
- Disable all dates after X date
To control how the calendar is displayed on my store:
- Either as a button or as an embedded calendar
- Able to change the design of the elements to match my theme
To control where the calendar is displayed:
- After X element on the page
- As an Online Store 2.0 product page widget
The app ended up growing in scope a little as we began development, and we added a few extra important features, including timeslots, different delivery methods and localisation.
After deciding on our features, we mapped out a list of all of the settings we would need, and their data formats in our database. From there, it was full steam ahead with the development!
Development Begins
We first created a basic React app template and began setting up the initial structure and configuration for an embedded Shopify app, which includes using App Bridge to authenticate and validate sessions within our app.
The app would also need to connect to our database, so it quickly became apparent that we would need to set up an API service for that. Having just set up our authentication service, we discussed the possibility of creating a parallel service for storing and retrieving data, but ultimately decided it would be easiest if we just merged the two, and had a single service that provided both authentication and API functionality.
This would involve a bit of a refactor of our existing authentication service, but would allow us to scale our apps in the future with ease and keep everything together in one place.
In the next post of this series, we’ll go deep into the process of making this change and the technical aspects involved.
Part four of this series is now available, detailing the process of making this change and the technical aspects involved.
This article was originally posted on www.shopside.com.au as a part of our blog.
