DEV Community: Nicole Schmidlin

How to turn your Ruby on Rails project into a Shopify app

Nicole Schmidlin — Fri, 18 Feb 2022 13:00:26 +0000

For the past few weeks, I spend my time turning a Rails project into a Shopify app and… it can be a pain. So I documented what worked and what didn’t and I hope this guide will make your introduction to Shopify app development at least a little bit easier.

Preparations

Of course, you can’t start coding right away, but luckily it’s only three things that need to be done:

Shopify Partner account
Development Store
ngrok account

Shopify Partner account

If you want to develop an app for Shopify, you need to create a Shopify Partners account. It’s really easy, you just need to sign up for it, and then you’re done. Plus, it’s free!

Development store

After creating a Partner account, you need to create a store. Otherwise, you wouldn’t be able to test your app inside a store.

Go to your Shopify Partners account and click on Stores on the menu on the left side.
Click Add Store and choose the option Development Store.
Fill out all the necessary information and done!

It should redirect you to the store’s dashboard.

ngrok account

You will also need a ngrok account. Simply sign up and download the correct version for your laptop and follow the instructions on the website. If the command on Setup & Installation doesn’t work for you, you can also do it manually as described in the Your Authtoken section.

Open a terminal and start the server with ngrok http 3000. Your terminal should look something like this:

If it didn’t work and you got ERR_NGROK_108, you might need to kill the current ngrok session and then restart it.

# kill and restart
$ kill `pgrep ngrok`
$ ngrok http 3000

Creating an app

Create an app in the Partner’s dashboard

Like for the development store, click on Apps on the menu on the left side and then on Create app.
Choose whether you want to create a custom or public app, I will choose a public app.
After that, input all the necessary information. For App URL use the URL provided by ngrok. In my case with the example from above it would be https://cbd2-somemorestuff.ngrok.io . For Allowed redirection URL(s), put in the same ngrok URL, but with /auth/shopify/callback at the end. This way, Shopify will be able to authenticate your app when you install it to your store.
Lastly, click on Create app. Done! Now you should see your app API key and secret key.

By default, embedded app should be enabled, but still, check if it is to be sure. To do so, click on App setup. Scroll down until you reach the Embedded app section and click on the Manage button. Enable Embed your app in Shopify admin if it’s currently disabled.

Add shopify_app gem

Take an existing project or create a new one and cd into its directory:

$ rails new shopify_rails_app_name
$ cd shopify_rails_app_name

2 Add the gem manually or run the following command in your terminal:

$ bundle add shopify_app

3 Install the generator with your own api key, secret and ngrok redirect URL (the one with /auth/shopify/callback at the end).

$ rails generate shopify_app:install -api_key=your_api_key 
-secret=your_app_secret -redirect_uri=your_redirect_uri

You might get the same long error message as me that starts like this:

in `method_missing': undefined method `assets' for #<Rails::Application::Configuration:0x000000010c7d75a0...

If you do, then you need to add require “sprockets/railtie” at the top of your application.rb in the config folder and create a manifest.js file in app > assets > config. Run the command once more.
4 Generate the home controller and shop model

$ rails generate shopify_app:home_controller
$ rails generate shopify_app:shop_model

5 Run the pending migrations
Before you execute the command, go to your routes.rb file and check if you have one or two root defined. By running the home controller command from step 4, Shopify will add root :to => ‘home#index’. Leave it and comment out your other root declaration. Otherwise, the installation won’t work (you can change it back later).
When you only have one root defined, run the migration:

$ rails db:migrate

6 Add API key and secret to .env
Open the .env file or create one in the root of your project and define your API key and secret like this:

SHOPIFY_API_KEY=Your Shopify API key
SHOPIFY_API_SECRET=Your Shopify API secret

And lastly, not necessary, but I still think you should do it: Check out all the changes the gem made (HomeController, ProductsController, migration, etc.).

Connect App to Store

Start the rails server

$ rails s

Visit the ngrok URL you defined as the App’s URL.
You should now see an input field asking you to enter your shop domain. Enter it and click Install app.

If you forgot your shop domain, simply click on your store in your partner dashboard and it should be displayed on the right side.

It should connect to your store and you should see this “You are about to install [your app name]” message. Click on the “Install unlisted app” button.

Your app is now installed!
Click on Apps on your store dashboard (not your partner dashboard) and you will see your app listed under Installed apps.

Click on your app to see it running!
If it’s not running, make sure your ngrok tunnel and rails server are both running. Also, if you cancel the ngrok tunnel and restart it, you will get a different URL and thus you will need to change your app’s URL and redirect URL in the partner’s dashboard.

Make it work

When you click on your app, you will see the default page of a Shopify App. It will display something along the lines of:

Products
Loading...
There are currently no webhooks

You can find it in app/views/home/index.html.erb in case you want to use it as your starting page or edit it or just play around.

If you wanted to change your root and you were to simply change it in the routes.rb file, you would see that it still loads, but it doesn’t work. If you click on a navigation item (to get to the About page for example), nothing happens. That is because for every controller we access in our Shopify App, we need to include the following:

include ShopifyApp::EmbeddedApp

If you hover over the About item in your navigation, you will see that it would redirect you to localhost:3000/about which Shopify cannot access. By including the code above, it changes it to your ngrok URL (https://cbd2-somemorestuff.ngrok.io/about), making it possible for Shopify to access.

Thank you

Thank you for reading all that and I hope I was able to give you an easier start to creating a Shopify App than the one I had.

What is a prototype in JavaScript?

Nicole Schmidlin — Mon, 29 Nov 2021 07:11:46 +0000

When I started working on a project with Vue.js, I came to the realization that I do not know much about JavaScript. Since then I’ve been looking into JS which then lead me to Object Oriented Programming in JavaScript. I learned about many things, but the concept I struggled the most with was probably prototypes.

With this blog post I hope I can explain it in an understandable way.

Small introduction

A constructor is a function that creates new objects. In JavaScript it looks like this:

function Person(name, age) {
   this.name = name;
   this.age = age;
}

The syntax to create a new object with a constructor looks like this:

const me = new Person("Nicole", 19);

me now has the name “Nicole”, and age 19. Easy and simple as you would expect.

Now imagine we wanted to create an object Person with the properties arms, hands, fingers, and name:

function Person(arms, hands, fingers, name) {
   this.arms = arms;
   this.hands = hands;
   this.fingers = fingers;
   this.name = name;
}

When you create four instances of Person, it will look like this:

const person1 = new Person(2, 2, 10, "Alice");
const person2 = new Person(2, 2, 10, "Bob");
const person3 = new Person(2, 2, 10, "Ursula");
const person4 = new Person(2, 2, 10, "Hanspeter");

Pretty annoying and very repetitive… That’s when prototypes become useful.

Prototypes

Prototypes are used to share properties among all instances of an object. Take the example from above:

Person.prototype = {
   constructor: Person,
   arms: 2,
   hands: 2,
   fingers: 10
}

With this prototype object, creating four instances of Person with the constructor looks much cleaner and is also less work:

function Person(name) {
   this.name = name;
}
const person1 = new Person("Alice");
const person2 = new Person("Bob");
const person3 = new Person("Ursula");
const person4 = new Person("Hanspeter");

As I said, much smaller and less repetitive work, but they all have the same properties as the ones created above without a prototype.

Not only does it look cleaner, but it is easier to change the values.

Let’s say you — for some really stupid reason — typed in 2 hands for each person, but the program actually only creates people with one hand (why we would need the properties arms and fingers is beside the point now). You would have to go through every. single. instance of the object and change not only the value 2 hands, but also 10 fingers. With only four instances, you would need to make eight changes. With the prototype, you will only ever need to make two changes.

It’s not the best example, but I think it gets the point across.

Single prototype property vs prototype object

Above I used a prototype object which is good when many properties should be shared. However, if there is only one shared property, you can write it like this:

Person.prototype.age = 30;

No need to make it bigger than it has to be.

Prototype functions

It is also possible to store functions as properties with a prototype.
Prototype object:

Person.prototype = {
   introduce: function() {
      console.log(`Hello, my name is ${this.name}`);
   }
}

Single prototype property:

Person.prototype.introduce = function(){
   console.log(`Hello, my name is ${this.name}`);
}

constructor: person

You might have noticed that I defined the constructor in the prototype object. This is important to do, because if we do not define the constructor, the objects will have Object as its constructor and not Person.

Alright, now let’s take this sentence apart to make it clearer.

You have a constructor for an object.

function Person(name, age){
   this.name = name;
   this.age = age;
}

Then you create an object with this constructor.

const me = new Person("Nicole", 19);

The constructor of me is Person. I think that much is clear.

me.constructor === Person
→ true

However, when you create a prototype object for Person and do not define the constructor, me will have the constructor Object.

Person.prototype = {
   introduce: function() {
      console.log(`Hello, my name is ${this.name}`);
   }
}
const me = new Person("Nicole", 19);
console.log(me.constructor === Person);
console.log(me.constructor === Object);
→ false
  true

But why?

The Prototype chain

To explain the prototype chain, let’s focus only on objects first. When you create an object, you can check its properties with hasOwnProperty.

But where does this come from? We never defined it anywhere, yet we can use it. The answer is that all objects inherit from Object which has its own prototype properties. You can check it by creating a simple object and check its constructor.

let exampleObject = {
   something: "hi"
}
console.log(exampleObject.constructor === Object);
→ true

So all objects stem from Object, can use its prototype properties and have Object as a constructor. This makes sense.

Now, when you create a prototype object, it is an object and thus inherits from Object. That is why you have to define the constructor or otherwise your instances of Person will have the constructor Object.

Object.prototype -inherited by-> Person.prototype ={} -inherited by-> me

Thank you

To be honest, I did not expect this article to get that long (I don’t know what happened), so if you made it till here, seriously, thank you for reading.