DEV Community: Rich11

How to Start Vision Pro Development (Today)

Rich11 — Mon, 11 Mar 2024 06:27:39 +0000

Introduction

When Apple unfurled the announcement of its latest innovation, the Vision Pro, my enthusiasm surged. Why? Because this was not just another addition to their tech portfolio, it was a whole new platform. A limitless canvas where we, the pioneers of code, could truly let our creativity run wild.

When the news hit, my immediate sentiment was awe. But, concurrently, a question lurked: 'This is revolutionary, but my arena is web development. Can I craft projects for this kind of device?' The challenge was daunting but tantalizing. Here was an opportunity to stride beyond my comfort zone, to master a new set of skills, despite having minimal experience with building native apps.

Months later, I find myself on the brink of releasing my second app for the Vision Pro. The journey has taught me how to construct simple but effective apps for this platform. But this narrative isn't about me. This is your ticket to join the Vision Pro realm, an invitation to dive into a 3D world, to create, innovate and manifest your ideas into tangible applications.

Are you ready to leap into the future of tech?
Join me as we explore, learn, and build for Apple's Vision Pro.

What do you need to know?

Swift is the foundation for developing applications for Apple platforms, including Vision Pro. Let's break down the process into accessible steps.

Swift

First thing is learning how to code. But that's a another topic. I assume you know how to program - at least a bit. Because that makes the journey a lot easier. Otherwise I would encourage you to start with coding.

Swift is Apple's own programming language and you need it to build any kind of native Apple product. This is especially true for vision pro. As far as I know right now it is the easiest way to do it.

But how can you learn it now? There are many great resources out there. There is even a book about the language from Apple themself. I like to learn, just the basics and don't try to overcomplicate things. Because we want to get into building apps as soon as possible.

Learn some things - then start building. Later dive into the details.

Platform specifics

After you have learned about swift - you have to learn about the platform. For vision pro it is the same as for iOS apps. You can build interfaces with SwiftUI. I think it helps if you build a small iOS project first. Because you probably know some parts of other platforms or even use the devices yourself.

Just get familiar with building layouts in SwiftUI. How an iOS project can be structured and what are the patterns that can be used in native development. There are some great resources which I will share later. These will help you to build your first iOS app.

Now comes the fun part. Getting familiar with the vision Pro platform. If you have a device. Use it. I think it is an advantage. If you do not. It is no problem. You can just try the simulator. Try the already installed apps. Install some of the example projects from Apple - just learn how this device and the simulator can be used.

Windows

Your vision Pro app will start with the first window it finds. Which will be presented to the user. You can move windows through the space. They are mostly 2D. You can imagine them as big Ipad apps floating through your space. I love that.

You can create more of these windows. But you can not set their position. So play around with creating windows. Open and close them on the click of a button.

Immersive Space

This is the new part. Building immersive experiences. These also can be opened programmatically. If they are opened - you can basically use the whole space and place 3D objects in it.

Apple added a way to make that really easy. If you have a 3D object - you can just use the 3DModel file and place it there. Do that. Play with the 3D content. It gives us as developers so many more possibilities.

From there on you can use a lot of the stuff which is already available. Apple pushed AR technologies already over the years. They have built a lot of things for that. You can use them but not always. That's the beauty of being an early adopter.

But there are also some resources from Apple on how you can build great immersive experiences.

What are the ressources?

You now know what is needed to build vision pro apps. But where can you learn more about it? There are many things you can do. Here are some resources I found helpful.

Apple WWDC content

The Apple Vision Pro was released at the WWDC 2023 - therefore Apple made a lot of videos for developers to understand how to build for the new device.

You can find all of the videos here: https://developer.apple.com/visionos/learn/

Most of the videos are awesome. Even the ones that are not really development specific are very interesting and I promise you will learn a lot.

Really helpful also is the section about developer news.

There you can find a really helpful Q&A which gives you a lot of insights. Furthermore you can look at the developer stories and how other developers have built apps for the vision pro which I found really motivating.

Example Projects

Apple themself published some example projects. Which are very nice. But do not get frustrated. The code is very complex. I even heard some experienced developers tell that. For me they helped to understand - how projects for vision pro can be built and what are some things that can be done.

But do not worry if you do not understand everything yet. It will get better.

Courses

There are not many courses out there yet. I mean I think it does not make too much sense for a solo dedicated apple vision pro course. Why? Because in general it is not that different from developing other apps for the apple ecosystem.

But there are some great courses for iOS Development. There is one a lot of people recommended to me.

iOS app development bootcamp

This course covers a lot. I did some parts of it. The good thing is that there is also a part about AR Kit which will help you to understand how to build immersive experiences. But this is designed for iOS. It can not be translated completely to visionOS.

Then there is a course I would love to highlight. The CS193p from Stanford.

Stanford CS193p

This course covers great topics and you will even learn how to build your fist app. The best thing is: it is completely free. I think if you want to dip your feet into iOS Development - you should think about starting here. The newest one is currently the lectures from spring 2023.

If you want a small course specifically for Vision Pro. Then I can recommend this one.

Build a vision pro app from scratch

It is made by a youtuber - and helped me a lot to understand some things. It even builds a cool little project while learning. So if you feel ready to build your first project. Go there.

The last recommendation for courses here would be the full day workshop from Hacking with Swift. I joined it live. It was amazing. It should be still available if you become a subscribing member on their site.

A lot of different topics were covered and again a small app was built. This is a fun thing for maybe a weekend to level up your Vision Pro skills. Furthermore there where questions asked by the community - which likely maybe will be your questions.

Books

Currently there are no books available. Or as far as I dont know of good ones. But again - building for vision pro is not that different from building for other apple platforms.

So one book that helped me a lot was one from Kodeco. It covers real world tactics to build Apps. I think that helps a lot if you want to make a real app at some point. Which is not only for fun but instead will also go live in the app store.

It covers a lot of topics which other books won’t. It even shows how to do testing and how to publish your app to the app store.

ChatGPT

I want to leave some words about this tool here. It helped me a lot. But yes it has some flaws. So mostly ChatGPT does not know about Vision Pro - why? Because as far as I know most of the models are based on knowledge from a time where the vision pro did not exist. So how should the model know?

But as mentioned before - building for apple vision pro is not groundbreaking different. So ChatGPT can help. But do not trust it blindly. Try to see it as a partner you can learn with. It can give you some hints, directions and ideas. But it does not know everything.

I had some moments where I got stuck. Then it helped. It helped to generate ideas. Often the code was wrong. Or even things were invented that were completely wrong. But sometimes it could be a good idea to use this tool.

And maybe one day we will get a nice coding partner from Apple. Let's see.

Final words

Start learning for apple vision pro today. It is fun. Try a new platform which will evolve over the years. Maybe you can bring completely new worlds to live through your newly gained knowledge. Wouldn’t that be cool? I think so.

Looking forward to hearing your tipps, tricks and resources to learn Vision Pro Development.

Gatsby and Contentful - How to use a headless CMS

Rich11 — Sat, 26 Jun 2021 06:10:18 +0000

What is Contentful?

Contentful is a CMS - which means Content Management System. These kinds of systems allow people
to manage content. Maybe the best known CMS is WordPress. In contrast to WordPress Contentful is headless.
What does this now mean? It means that it only provides the data which is presented by the CMS nothing else. A "normal" CMS would
also provide for example a visual part. Why is this good? Because it allows us as developers to use the
data from the headless CMS everywhere we want to. In our apps, websites and so on. The page could look completely different and the
data stays the same.

How to use Contentful with Gatsby?

As always in Gatsby we just have to use a plugin. The plugin is called gatsby-source-contentful.
This offers an easy and simple way to get the data from Contentful. Before you can start using the data, you have to set up a new account if you don't already have one.
Just sign up here for free. The basics are free and unless you do not need roles I think you are fine with the free plan.
Then you have to create your first space. You can image the space like a project you are making the content for.

Afterwards, you just could get your space ID and your accessToken. You can create them under settings > API Keys and then
generate a new one. First steps done. 🥳

Setup

Next is the setup of your Gatsby page. Just generate a new Gatsby project or use an existing one you would like to
add data from Contentful to. Then add the configuration to your gatsby-config file.

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `your_space_id`,
        // Learn about environment variables: https://gatsby.dev/env-vars
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
  ],
}

Please remember to use environment variables. That is important because if somebody could get your accessToken
he could get all your content. Better be safe. 😉

First Content-Type

Now, as we are ready for take off, we would add our first content type to Contentful. But what does ContentType mean?
A ContentType is basically the layout of the content, for example a blog post could be one. Each post has a title, text and maybe an image.
Together they are a content type. So let's add our first one.

Therefore, you need to go to ContentModel and click on add content type. Then a new window appears which wants you to give the content type a name
and an autogenerated identifier. You also could provide a description which is useful for your content editor because they might not know
what a specific ContentType is used for.

After you finished this step. You are ready to add your first field. Click on add field and choose a type which fits your needs the most. For example, you could choose text.
Then you have to configure the field even further. Give it a name and change the fieldId if the auto generated not suits you. Afterwards, if you click on create and configure,
you have the chance to sharpen the configuration even more. This could make sense in different cases, but should not be a part of this article.

Then add all fields you need in your ContentType and publish the changes. Now we have added the first ContentType, but we are missing content. A ContentType is useless
without content. So let's add content. Go to the content tab and click right on the button add content. The button name could differ depending on the ContentType pre
selected. But if you have more than one ContentType you have the choice of which ContentType you want to add.

Choose the ContentType and add the content in the predefined fields. It should be like you described it before in the ContentType. Afterwards, do not forget to
save the content and publish it.

Now we are ready to use our first content pieces. 🚀

Start the Gatsby server with

gatsby develop

After a few seconds the server has build, and we now could check if the data is available for us. To do this, visit: http://localhost:8000/\_\_\_graphql
The GraphiQL playground is really useful to see all of your data. Search for a data type called something with Contentful. The name should be something like allContentfulDataType where
dataType is the name of your ContentType you newly created on Contentful. If everything worked, you are now able to use the data from contentful in your page query.

That was easy, right?

Generate Pages

A really useful feature is that you are able to generate new pages from Gatsby. This is nothing special for Contentful but works perfect together with it.
For example, you could create a page from every blog post ContentType. So you never need to worry about adding a new page when adding a new post.

How does this work? You need to open your gatsby-node file.

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  return new Promise((resolve, reject) => {
    const template = path.resolve("./src/templates/template.js")
    resolve(
      graphql(
        `
          {
            <YOUR_GRAPHQL_CALL>
          }
        `
      ).then(result => {
        if (result.errors) {
          reject(result.errors)
        }

        const { content } = result.data

        content.edges.forEach(edge => {
          const slug = edge.node.slug
          createPage({
            path: `${slug}`,
            component: template,
            context: {
              slug,
            },
          })
        })
        return
      })
    )
  })
}

That's a lot at once. Let me explain it. First, you get the createPages function from the actions, which we will use later.
Then you have to return a promise. Why? Because we have to call the api from Contentful and wait for the data, and we want to create pages which
also takes some time.

Then inside the promise, we take a file we created before. This file will be the template for the new created pages. Then we make our graphql query to get the data we need.
After the data comes back, we work with the result. We first check for an error and if everything is fine, we call the createPage function on every entries of the array
we got from the server. The function gets a path with has to be different for every iteration, otherwise the pages would be overwritten. Then a component which should be
our template. Lastly, it needs a context which will be available as props for the page.

That's it. I think this is awesome because you do not have to write similar pages by your own, and you are able to add content via a CMS.

What are the benefits?

But what is all this for. Why do you need this? We as developers might not need this. Because for us, it is easier to add text in our editor. For example
my personal blog is generated from Markdown. But if a non-technical person wants to add content to a page, Contentful is awesome.

At TechLabs we also build the page with contentful. We searched for an easy way to edit the pages of our locations. We wanted a way to give each
location the chance to edit their subpage. Contentful makes it easy to give them an interface to add the data and also publish new content by themselves.

Conclusion

The combination of Gatsby and Contentful could be useful for any page. It's easy to set up and gives the developer huge flexibility. As my own
experience I only could say that I really enjoy working with Contentful. Furthermore, you could configure apps and a lot more things to even
optimize your time with Contentful. But you have to try if by yourself. Contentful is free to set up and allows you to test most of its functionality
for free.

4 Reasons for GatsbyJS and when not to use it.

Rich11 — Sun, 06 Jun 2021 16:54:30 +0000

Gatsby is a great tool to build websites and more. But often people ask me when to use it and what Gatsby is most suited for in my
opinion. That's a good question. And the answer as is always: It depends. But that's not all. Let's have a deeper look
on this question. I think it comes down to four points:

1. Performance

Gatsby is fast. That's true. I mean, its easy-to-reach crazy good score with Gatsby. This website has a score of 91 in performance and I did not do anything
to achieve a better score. It comes right out of the box. In comparison, a WordPress blog only reaches 63. I tested it on the blog whaitbutwhy (definitely check it out). And the performance on a site gets even worse when you use a page builder and a ton of
different plugins or even WooCommerce. And if you want to have a fast and reliable site - you also have to build it with custom code.

Ok, but what does these numbers mean. It means that you lose some people because of your site speed and also miss some opportunities on the search optimizations. Both
are very important for an online business. I think we all had this moment where we visited a website which loads long. I think it is annoying. Or think about an online store
you want to shop in. If every time you visit another product the site takes a long time, that would be a bad experience.

In numbers that means:

40% of people abandon a website that takes more than 3 seconds to load. 🤯

Thanks to Neil Patel for a really in deeps article about the bottom line of a slow page.

I think this number shows really drastically how important a fast page is for your business. How much money you would lose with a slow website. Gatsby helps you to avoid
this and gives you a lot more speed than most others tools to build a site. But the benefits you get out of the box could even be optimized by using the right plugins and
optimization of your gatsby-config file. But that's an entirely different topic.

So number one is clear. If you need a really fast site use Gatsby.

2. Flexibility

Next up is Flexibility. This is also a good and important part. Building a page with Gatsby gives you flexibility. Which ensures to react to potentially changes in the future. Think about it
this way. You have built a page with Gatsby. Then your page grows, and you need a CMS because there are people how need to work on the content. Than you easily could add a CMS to Gatsby. If you are
lucky your page still grows. You think about selling merch in your own shop. That also easy to add with Gatsby, no worries. And you want to have a small part on the page where the data comes from
airtable. That's also possible.

I know that this also would be possible with something like WordPress but if you cannot code it yourself there you would have to search for a plugin and pray that this plugin suits all your needs.
And yes, If you want to do all these things in Gatsby you also need to code, but you do not need to learn PHP and the ins and outs of WordPress. If you know react, it is enough. And also Gatsby gives you more
flexibility on the tooling. I mean, if you want to use StyledComponents instead of CSS. You can! You like TypeScript more than plain JavaScript. Go and do it. There are no limits.

I really love how flexible Gatsby is and this helps me as a developer to build different sites for different needs. And I do not have to rebuild everything if the business changes.

3. Design

Flexibility is great. But Flexibility in Design could be a major thing. If your company has a CI which needs to be used, most page builder are not able to deal with it. With Gatsby, you could build the pixel perfect
page.

Yes, every time you have a page with a special design, you need to code it. In my opinion not every time. Because tools like Webflow are pretty good, for people with a bit of programming knowledge
and some design skills. But this only counts for a page with not that much functionality. If you want more - you need something like Gatsby.

And maybe your company has already some prebuild components which could be used in a project. Then it is easy for you to build a page with Gatsby.

I think for me personally it's easier to build a design with CSS than learning a new page builder and being frustrated afterwards why some things do not work with it. But in the end
it should be your personal preference.

4. Ecosystem

The last thing to keep in mind that when building with Gatsby is the Ecosystem. Why is this important? First, if you need help, you have several places you could go. And Second there are so
many plugins and recipes you could use to improve your page.

In comparison, if you use a not that popular tool than you might end up stuck on a problem or searching for plugins and help. I would always go for a tool which either has a great customer
support or a good Ecosystem.

I can totally recommend the Gatsby Discord and docs. There are some information and helpful tools you could find an answer for your problem.

When not to use Gatsby

As you might recognize, I like Gatsby. But I think not all the time Gatsby is the right choice. I would love to say it always makes sense, but this would be not honest.

For me, it there a some points which should be considered before thinking about building with Gatsby:

You can not code and do not know anybody who can code.
You are superb at coding with WordPress.
You only want a minimal page.
You want a really graphical way to edit your site.

Let me give a bit more detail to all these points.

If you can not code it will be hard and yes I totally would recommend learning to code, but this takes some time. If you don't want to do it, and you don't know someone who can code or if it is to
expensive. Then you have to find another way. Building a site with Gatsby and do not know how to code is impossible in my opinion.

The next should also be clear. I mean, if you have your tools and your already experienced, and you know they will fit for the job. It is fine and a good idea to work with what you know.
If you want to try something new. I can totally recommend it Gatsby, but I think you would be faster with the tools you know.

For the next point, it's also not that useful to use Gatsby. If you just won't a small page. Just use HTML and CSS. Its fast and easy. I mean, if your page is only like a small online business card.
Why bother with a tool like Gatsby. I think then you could do it for fun but not because it is useful.

The last part I would like to mention is in case you love to design your page like in a design tool. Then Gatsby is not right for you. If you need it shiny and beautiful, you should take something like
Webflow and wix.com. They are great, and it is a more visual way to build a page.

Conclusion

Gatsby is great. I can totally recommend you to build a page with it. But next time you would like to build a project, think about what your purpose is. I mean that's a general question you
should ask yourself when thinking about a project. Do not use the shiny new framework because its new, use something that suits the job.

I think most of the time Gatsby will do a great job, but sometimes it would be better to use something else. Hopefully my point of view will help you than to achieve your goals and satisfy
your needs.

Build an online Shop with Gatsby and Shopify (Part 3)

Rich11 — Fri, 28 May 2021 08:18:36 +0000

This is the third and last part of my gatsby and shopify series. If you have not read the parts before I would recommend reading them before. Otherwise, it will be hard to follow.
Today we will add the function to add a product to our cart and then build a checkout page where you can click on checkout to get redirected to your personalized shopify checkout.

First we should recall where we stopped.

import fetch from "isomorphic-fetch"
import React, { useEffect, createContext, useState } from "react"
import Client from "shopify-buy"

const client = Client.buildClient(
  {
    storefrontAccessToken: process.env.ACCESS_TOKEN,
    domain: `${process.env.SHOP_NAME}`,
  },
  fetch
)

const defaultValues = {
  client,
  checkout: {
    lineItems: [],
  },
}

export const StoreContext = createContext(defaultValues)
const isBrowser = typeof window !== "undefined"

const ContextProvider = ({ children }) => {
  const [checkout, setCheckout] = useState(defaultValues.checkout)

  const setCheckoutItem = checkout => {
    if (isBrowser) {
      localStorage.setItem("shopify_checkout_id", checkout.id)
    }

    setCheckout(checkout)
  }

  useEffect(() => {
    const initializeCheckout = async () => {
      const existingCheckoutID = isBrowser
        ? localStorage.getItem("shopify_checkout_id")
        : null

      if (existingCheckoutID && existingCheckoutID !== `null`) {
        try {
          const existingCheckout = await client.checkout.fetch(
            existingCheckoutID
          )
          if (!existingCheckout.completedAt) {
            setCheckoutItem(existingCheckout)
            return
          }
        } catch (e) {
          localStorage.setItem("shopify_checkout_id", null)
        }
      }

      const newCheckout = await client.checkout.create()
      setCheckoutItem(newCheckout)
    }

    initializeCheckout()
  }, [])

  return <StoreContext.Provider>{children}</StoreContext.Provider>
}

export default ContextProvider

Add Variant to Cart

Next up we would need a function to go add a product to the cart. So let us build it.

const addVariantToCart = (variantId, quantity) => {
  const checkoutID = checkout.id

  const lineItemsToUpdate = [
    {
      variantId,
      quantity: parseInt(quantity, 10),
    },
  ]

  return client.checkout
    .addLineItems(checkoutID, lineItemsToUpdate)
    .then(res => {
      setCheckout(res)
    })
}

The function takes two arguments. The first one is the id of the product or more specific: the id of the variant. That means when you have a product like a shirt you would have different variants.
You would take the id for the variant. The other parameter is the quantity.

Then afterwards we get the id for the checkout. This we need for later. It will be used for making our request because shopify needs to know to which checkout they need to add the variant to.
Then we construct or data we want to send. For now, we only send one at a time. Later you could make this more complex and maybe to a bulk adding version of this function.

In the last step we need to use our shopify sdk to add the items to the checkout. Then we wait for the response and set it to the state.

Passing our data

One important thing we missed in our ContextProvider file. We need to pass the functions and our data to use it afterwards.

return (
  <StoreContext.Provider
    value={{
      ...defaultValues,
      addVariantToCart,
      checkout,
    }}
  >
    {children}
  </StoreContext.Provider>
)

We pass an object called value into the context provider. There we spread in the defaultValues. Pass our newly build function and the checkout state.

Now we could use our provider. 🚀

Using the provider

In order to make the data accessible everywhere in our pages I would recommend adding the ContextProvider component in our layout. Just wrap everything else in it. This makes it available everywhere else.

Now we could use the context everywhere you want.

We will add it to a component which shows a product with the add to cart button.

import React, { useContext } from "react"
import { StoreContext } from "../provider/ContextProvider"

const ProductDescription = ({ title, priceRange, description, shopifyId }) => {
  const { addVariantToCart, checkout } = useContext(StoreContext)

  const handleAddToCart = () => {
    addVariantToCart(shopifyId, 1)
  }

  const handleDirectCheckout = () => {
    addVariantToCart(shopifyId, 1)
    window.open(checkout.webUrl, "_self")
  }

  return (
    <div className="row">
      <div className="col">
        <StyledProductName>{title}</StyledProductName>
        <StyledPrice>{priceRange.minVariantPrice.amount} €</StyledPrice>
        <StyledLabel>Product Type</StyledLabel>
        <StyledSelect name="producttype" id="producttype">
          <option value="Download">Download</option>
          <option value="Artwork">Artwork</option>
        </StyledSelect>
        <hr />
        <StyledProductText>{description}</StyledProductText>
        <StyledButton className="mr-3" onClick={handleAddToCart}>
          Add to Cart
        </StyledButton>
        <StyledButtonSecondary onClick={handleDirectCheckout}>
          Direct Checkout
        </StyledButtonSecondary>
      </div>
    </div>
  )
}

export default ProductDescription

Do not wonder why the JSX Tags look a bit different. They are styled with styled components. Which is an entirely different topic. If you want to learn more about it. Just have a look here: Styled components.
For now, you just have to know that it is a way of styling and under the hood you could use any tag you want. And as we want to focus here on building the functionality this is not something you should worry about.

Enough about styled components. First we need to import the store context. Then we can use it in the component.

const { addVariantToCart, checkout } = useContext(StoreContext)

We use the addVariantToCart function and the checkout state from the StoreContext. Above is shown how you get it from the context. Pretty easy right?

Next We have two functions which will handle the clicks on the buttons. The first just calls the addVariantToCart function with the shopifyId which was passed as props. The id you get with calling the shopify data on your page.
And then you could also add a quantity. For simplicity its only possible to add one product at the moment. But that would be an easy fix and could be done later.

Next the handleDirectCheckout function. This would be if a user directly wants to check out with the product on the page. Therefore, the addVariantToCart function is also called afterwards we open the shopify checkout.
The url of the checkout is stored in the checkout state. This is a large object we get from shopify. Also, there are other things in it like all the items in the line or the total amount of the cart.

Final words

Now you know how to use the context and how to build your own shop with shopify and gatsby. I know that's not all you need to build, but it should give you a starting point and hopefully
enables you to build your own shop. I think it is really fun and a cool way to build your custom shop.

If you have a question feel free to reach out. I would be happy to help.

Build an online Shop with Gatsby and Shopify (Part 2)

Rich11 — Thu, 20 May 2021 09:08:27 +0000

In the last part we learned how to get data from shopify. This helps us to show the customer our data. But this is only one way. We only can show data and not interact with it.
So what would happen if a user wants to buy an Item from our store. Right now it would not work. But in this series we will make it work. So fasten your seatbelt we will start right now.

Shopify Buy SDK

For the interaction you need the shopify buy SDK. I totally recommend you to have a look at the documentation. There a lot more things you could do with the SDK than
we can cover here.

First you need to install the SDK.

npm install shopify-buy

We also need isomorphic-fetch. You might know what fetch is, but what is it, and why do we need it? The problem with fetch is that is currently not implemented across all browsers consistently.
Isommorphic-Fetch allows you to fetch in your node code in a cross-browser compliant fashion. So it is better to use it here than fetch.

So the next step would be to also install this.

npm install isomorphic-fetch

Now we are ready to start coding. So grab your favorite drink and lets start.

React Context

So the first thing would be to initialise the newly installed SDK. But where do we place it? It should be accessible everywhere, and it would be nice if we could abstract the logic to a separate file.
Would the layout component be right? No I guess that would not be good. Maybe you have a page which won't use the layout. Then you could not use the SDK.

I would recommend using the React context. I will explain shortly what this is. If you are familiar with it feel free to jump to the part where we initialise the SDK.

The context allows us to pass data through the component tree without having to pass props down to every component by hand. That is awesome because it could be really annoying to pass the props all
the time to your components. You can learn more about it in the official documentation.

So the next step would be to add a folder called provider with one file in it called ContextProvider.js. At the top you need to import three things.

import fetch from "isomorphic-fetch"
import React, { useEffect, createContext } from "react"
import Client from "shopify-buy"

Let's now continue with initializing the shopify-buy SDK.

Initialize the Shopify Buy SDK.

const client = Client.buildClient(
  {
    storefrontAccessToken: process.env.ACCESS_TOKEN,
    domain: `${process.env.SHOP_NAME}`,
  },
  fetch
)

With the build client function we can initialize the client. You have to pass your storefront token and your domain name. And also the isomorphic fetch as a second argument.
Afterwards the client is ready to use.

Next we should set some default values the application could use to set up the store. Just create a constant under the initialized client.

const defaultValues = {
  client,
  checkout: {
    lineItems: [],
  },
}

The client is the client we initialized before. And then we also have a checkout object which contains an array of lineItems. This is the array which will store all the items a user puts into his shopping bag.

The next step would be to create the context and really important export it. We should export it that we could use it in our component tree. But this will be done later but add the line to your file.

export const StoreContext = createContext(defaultValues)

The createContext function was imported from react above and is a function that comes with react. We pass the default values to give create the context with the values we defined. Nothing special here.

Another helper we add under the const is a check if we are in a browser. Why do we need this? Gatsby is server-side rendered and at some points we may need to access the window element. On the server we wont
have a window object because it comes with the browsers. So the helper show return true if we are in a browser.

const isBrowser = typeof window !== "undefined"

So we check the type of the window property. If window would be undefined we could not access it, and we might be not in the browser. We need later to access the localStorage, and therefore we need
a window object. If we would not check this the operation could potentially fail.

Let's have a look how your ContextProvider file would look right now.

import fetch from "isomorphic-fetch"
import React, { useEffect, createContext, useState } from "react"
import Client from "shopify-buy"

const client = Client.buildClient(
  {
    storefrontAccessToken: process.env.ACCESS_TOKEN,
    domain: `${process.env.SHOP_NAME}`,
  },
  fetch
)

const defaultValues = {
  client,
  checkout: {
    lineItems: [],
  },
}

export const StoreContext = createContext(defaultValues)
const isBrowser = typeof window !== "undefined"

Create the Context Component

Awesome now we finally can build the ContextProvider Component with all the logic in it.

const ContextProvider = ({ children }) => {
  const [checkout, setCheckout] = useState(defaultValues.checkout)
  return <StoreContext.Provider>{children}</StoreContext.Provider>
}

export default ContextProvider

Ok that's a lot at once. I give my best to explain it as easy as possible. In the first line we create the component and pass a child into the component. The children allow us to use the
component later as a wrapper component. Like so:

<ContextProvider>
  <AnyChildComponent />
</ContextProvider>

But we need to pass it somewhere in our return value from the component.

In the first line of our functional component we defined a State with the useState hook. We pass to properties to it. One is the checkout. With this we could use the values stored in the checkout. And the
others would be setCheckout which allows us to change the values which are store in the checkout. And we pass the hook our default values for the checkout.

Why is this useful? There may be the case where you want
to access all your items in the shopping cart. But the customer did not put one item in there. So your store would crash because you tried to map over all items in your bag, but there is emptiness inside
and no array you could use for mapping over.

The last thing we have to talk about here is the return value. We return the StoreContext we create before the component and access the provider from it. That's how we use the context. Don't worry too much about it.

The next step is to initialize the checkout when we want the shop is mounted. To achieve this we use the useEffect hook from react to be able to do some things when the shop is mounted.

Use Effect Hook

The useEffect hook is also a react function which can be used to access the lifecycle of our application.

useEffect(() => {
  const initializeCheckout = async () => {
    const existingCheckoutID = isBrowser
      ? localStorage.getItem("shopify_checkout_id")
      : null

    if (existingCheckoutID && existingCheckoutID !== `null`) {
      try {
        const existingCheckout = await client.checkout.fetch(existingCheckoutID)
        if (!existingCheckout.completedAt) {
          setCheckoutItem(existingCheckout)
          return
        }
      } catch (e) {
        localStorage.setItem("shopify_checkout_id", null)
      }
    }

    const newCheckout = await client.checkout.create()
    setCheckoutItem(newCheckout)
  }

  initializeCheckout()
}, [])

Again it is a lot and I try my best to explain it for now.

First we use the useEffect hook which we need to pass a function as the first argument. In this case it is an anonymous arrow function. It basically looks like this () => {}. Weird syntax I think.
Anyways.

Next up we want to initialize the checkout. So you might think you could directly write all the code inside the arrow function. That's sadly not that easy. As we talk to the serve we need to write an async function.
Because it could take some time to wait for answer from the server. When we want to do something async in the useEffect hook we need to write is as a separate function. Otherwise, it won't work.
So we should write an arrow function which is marked as async.

In the first line of the function we check if there is already a checkoutId. The checkoutId is used by shopify to save different shopping bags. Every bag that is created gets a unique id which is
used to access it later and recognize the items a user picked. We do the check because we want to present the user a good experience. Maybe he returns to the page after a few hours and then wants to
buy the items. Then we still could recognize what he picked. Also, if he would switch the sites in our shop he would always use the items in his bag. That would be a bad shopping experience.

For the check we create a variable where could store the value of the existing checkoutId. First we check if we are in a browser otherwise we cannot access the local storage. If we aren't in a browser it would be set to null.
Then we get the localStorage item by the name we defined.

Short coffee break to get some energy for the next steps.

Ok back full off energy.

We next check if we have a checkoutId, and it also should not be null. Remember if it would be null we would be on the server. Then we know there is already a checkout. So the user put some
things in a basket. Then we need to get the things stored in there. So we need to talk to shopify and get the data. But this potentially could go wrong, so we will wrap it in a try catch block.

Next we use the shopify SDK to fetch the checkout. We pass the id there and then store it in a constant. We need to use await because it could take some time to talk to the server.

After we got the answer we need to use another if statement to check it the checkoutId was not already used to check out. If this is not the case we could set the checkout item and return which stops the function.

The setCheckoutItem is a little helper function which I created. It looks like the following and has to be declared above the useEffect.

const setCheckoutItem = checkout => {
  if (isBrowser) {
    localStorage.setItem("shopify_checkout_id", checkout.id)
  }

  setCheckout(checkout)
}

It takes the checkout obIt takes the checkout object and first stores the checkoutId into the localStorage for later and also sets the checkout state. That's needed because we use it at each new mount of the shop as described earlier.

Now we need to go back again to the function inside the useEffect hook. At the bottom of the initializeCheckout function are two more lines I would like to point your attention to. If there would not be a checkoutId we have
to create a new checkout. Therefore, we again use the shopify sdk to create it and store it into a constant. And then again call our little helper function. So this is needed when a customer visits our store
for the first time or after a long time again.

And then we are done with the initalize function. So we need to call it inside the use effect hook. One important thing you should not forget is to add the empty array as second argument to the
useEffect hook. This ensures that the hook is only run on the first render.

Wow. That was a lot. Here is the file again in total now.

import fetch from "isomorphic-fetch"
import React, { useEffect, createContext, useState } from "react"
import Client from "shopify-buy"

const client = Client.buildClient(
  {
    storefrontAccessToken: process.env.ACCESS_TOKEN,
    domain: `${process.env.SHOP_NAME}`,
  },
  fetch
)

const defaultValues = {
  client,
  checkout: {
    lineItems: [],
  },
}

export const StoreContext = createContext(defaultValues)
const isBrowser = typeof window !== "undefined"

const ContextProvider = ({ children }) => {
  const [checkout, setCheckout] = useState(defaultValues.checkout)

  const setCheckoutItem = checkout => {
    if (isBrowser) {
      localStorage.setItem("shopify_checkout_id", checkout.id)
    }

    setCheckout(checkout)
  }

  useEffect(() => {
    const initializeCheckout = async () => {
      const existingCheckoutID = isBrowser
        ? localStorage.getItem("shopify_checkout_id")
        : null

      if (existingCheckoutID && existingCheckoutID !== `null`) {
        try {
          const existingCheckout = await client.checkout.fetch(
            existingCheckoutID
          )
          if (!existingCheckout.completedAt) {
            setCheckoutItem(existingCheckout)
            return
          }
        } catch (e) {
          localStorage.setItem("shopify_checkout_id", null)
        }
      }

      const newCheckout = await client.checkout.create()
      setCheckoutItem(newCheckout)
    }

    initializeCheckout()
  }, [])

  return <StoreContext.Provider>{children}</StoreContext.Provider>
}

export default ContextProvider

So that's the end for now. It was a lot to cover, but now we have the foundation for our interaction with the shop setup. In the next steps would be to actually use the context and add items to the shopping bag.
Afterwards we will build a shopping back component. Sounds like fun? Stay tuned for the next part.

Build an online Shop with Gatsby and Shopify (Part 1)

Rich11 — Wed, 19 May 2021 16:42:54 +0000

I wanted to build an online shop but it should not be the typical shopify design. Otherwise it would be nice to have the functionallity of shopify.
Ok maybe I could build something with Liquid (shopifys own templating language). But I already now react and gatsby, why should I learn something new?

Ok maybe you feel the same. Maybe not. This article should give you a small guideline on how to start with Gatsby and shopify. It should help
you to build your first custom online shop. Its easier than you think.

Create a new Gatsby Project

Yes thats the start. Thankfully gatsby offers a simple way to setup a new project. You can use their own CLI wich enables you to run and create projects.
Just install it via npm:

npm install -g gatsby-cli

The -g means global which installs the package globally which makes it available everywhere. If you want to learn more about the CLI you should have a look here.

The next step is to generate the project. Move to the folder which suits your project the most and type:

gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

This will create a project with a default starter template. You could also choose a different starter or go through the process. But I would recommend
to understand how the ins and outs of gatsby work until you use a prebuild starter.

Next you could start your page with:

gatsby develop

This should serve the project on https://localhost:8000. Next up we will add the shopify data.

Get the data from shopify

To get the data from shopify we need a plugin to get the data from shopify. I would recommend that you have a look at offical documentation.
The Plugin could be installed by running:

npm install --save gatsby-source-shopify

After you installed the plugin you have to change your gatsby-config.js. No worries. We will do it together.
Just add the entrie below to your plugins array.

  {
      resolve: `gatsby-source-shopify`,
      options: {
        // The domain name of your Shopify shop.
        shopName: '',
        // The storefront access token
        accessToken: '',
      },
  }

The both empty values have to be filled from you. I will show you where to find the data and how to put them in. The process is relatively easy.
One thing to mention here: I would recommend to add these credentials via environment variables. That keeps them secure and helps to keep your data safe.

Create your store

If you dont have already setup a store here are some basics tipps to set it up. One thing that most people forget that you have to pay for shopify. But there
is a workaround for that. First create an account at the shopify partners page. Its a tool for agencies or people who build stores for others.
There you can create an account and setup a shopify shop which is for free until you transfer the ownership or want to sell products. It means you can take the time
to build your site and don´t need to worrie about payments in the beginning.

After you logged in into your shop go to apps. And click on manage private apps at the bottom of the page. Then create a new private app. Add the name of your app and give the app a name. Make sure to
allow the access to the Shopify Storefront API. Then save the app and copy your access token.

You can now add the credentials to the gatsby-config file we edidted before. Add the access token and the shopName and please dont commit your credentials to github.

Querying your products

If you already have products in your shop you now should be able to get them through the plugin. Simply start your page with:

gatsby develop

and check the GraphiQL Playground under http://localhost:8000___graphql. There you should now be a lot more queries available than before. If not please
check if your credentials are correct.

For example you now could build a query like this here:

export const pageQuery = graphql`
  query($id: String!) {
    product: shopifyProduct(id: { eq: $id }) {
      description
      title
    }
  }
`

This query gets only a product with a specific id with its title and description. The data coming back from the query would be available as data props to your page.

Now you were able to get your first product data from shopify. The next step would be to get the data and build a custom shopping cart. This topic will be in another post which will be published soon.

All in all its really easy and fun to build a shop with gatsby and shopify. I would be happy if you give it a try.