Prática de Shadowing: Start building Shopify apps, FAST - Aprenda a falar inglês com vídeo

Escolha um modo de prática

Cada modo abre uma sala de prática em tela cheia.

307 frases

Se as frases estiverem muito curtas ou longas, clique em Edit para ajustá-las.

In this video, I'm going to show you how you can get started building Shopify apps.

I'm going to walk you through setting up your first Shopify development store and your first Shopify app, and I'm going to use gadgets to do it

because it abstracts a lot of Shopify's boilerplate and allows me to get started building quickly.

Let's get started.

Okay, so I'm going to get started here on the Shopify Partners landing page.

If you haven't already created a new Partners account, you need to go ahead and do that.

That's at shopfi.com slash partners.

The link is in the video description.

I already have a partner's account, so I'm just going to log in and I'll select my Riley Test Stuff account.

And that brings me to this partner's dashboard.

Now there's lots of different features and functionality built into this dashboard.

I'm going to focus on two main tabs, and that'll be the stores tab, where I can create development stores for testing my apps.

And then the apps tab, which are my apps, where I can actually manage the apps that I am building and testing.

So I'm going to click on stores to start.

You see I've already created some development stores but you can go ahead

and click add store and create development store to create a new one.

I'm gonna start by creating a store to test and build

and I'll give my store a name I'll call it cart transform testing.

Perfect.

You can select developer preview if you'd like.

Shopify has some more information if you click on this link about developer previews.

I am gonna go ahead and select cart transform

which you may have guessed from my store name and that's simply because I don't have a cart transform dev store yet.

Another popular one is checkout extensibility.

Maybe not necessarily for your first development store but it's not a bad idea to select that option as well.

It allows you to build some of Shopify's latest and greatest checkout features.

Finally I'm going to go ahead and start with test data

which just gives me some sample product order and customer data so I'm not starting from scratch.

Normally if you select create with an empty store you need to go ahead and upload your own products.

I'm going to skip that step.

So let's go ahead and create this development store.

Takes a little while to spin up.

But once it is created I'm redirected right to my new store.

My development store has been set up and I have been redirected to this back-end admin portal.

And this admin is what merchants use to manage and customize their stores.

So you can see if I click on products, these are where the sample products have been generated.

I can browse through them.

Same with customers.

There's some sample customers generated for me.

And right at the bottom, you'll notice there is an apps section.

So because this is a brand new shop, I haven't installed any apps yet we're about to get to that soon

but this is where my app will be available to merchants it will be embedded right in this admin portal

so that they can customize how their shop works

if i do hover over this online store option

and click on this icon this opens the shopify store front

so this is what the store will actually look like to buyers to people browsing the store

when they visit it

so you can see i can click on a product add it to the cart go through the checkout process

if you are interested in doing development for storefront that's called theme development

and if you are interested in doing kind of an entire storefront theme my tutorial here isn't going to cover

that so there is other videos there's other materials shopify documentation

that you'll want to take a look at

when it comes to actually developing themes

if you only want to develop small little pieces of storefront functionality

that can be done with shopify's theme extensions and

that is very relevant to the little walkthrough i'm about to go through

so you can use theme extensions

when you're building custom admin apps i will just flip back to my admin portal here

so i'm at the point now my development store is set

up got my admin things are looking pretty good i want to actually go ahead

and create a new app so i need to go back to my partner's dashboard here and

because it is my most used page in the partner's dashboard

it is going to auto complete right to the apps page so you see i've already selected it here

I already have a list of apps I've used for building and testing various things.

Your list might be empty right now.

So I'm going to go ahead and create a new app.

I'm going to create an app manually because I'm going to use Gadget to actually write the code for my application.

And the reason I'm using Gadget is because it is a hosted and auto-scaled development platform.

It's going to give me a full stack application.

So that's a Postgres database, node backend and react front end.

And there's a built in Shopify connection to handle a lot of Shopify's boilerplate.

So for example, there's going to be authentication handling, front end session token handling,

as well as things like webhook subscription and a historical data sync.

So Gadget's going to handle all that for me.

You can also create apps through Shopify CLI.

It gives you a remix template i'm not going to go into

that at all there's plenty of content around creating remake

that remix apps if you're interested i'm going to go ahead

and create that manually and i'll just give it a name my first app

and press create so that's wonderful i'm almost ready to set up my new gadget app

before I get into

that I will say there are two types of Shopify apps I'm going to go ahead

and click choose distribution and these are the two different distribution methods the first is public

so if you build a public app it will be available on the Shopify app store

or it can be unlisted but this means

that anyone who has a link to your app can install it and use it on their store

usually you're charging either a one-time fee

or a monthly subscription fee for merchants to be able to

use your app's functionality the second type of app are called

custom apps i recommend getting started with a custom app

if you can this is great opportunity for freelance work

because you're writing usually a single piece of custom functionality for a single merchant

so you don't have to deal with shopify's billing apis you don't have to deal with data tenancy

or multi-tenancy like you would do in public apps it is

an easier way to get started i'm not going to go

through this quite yet i will show you how to install

a custom distribution at the very end of this video though

so that's great i'm going to go back to my overview page i've got my client id in secret

that is what i need to set up my shopify connection in my gadget app

100

so i'm going to create my new gadget app next.

101

I will head over to gadget.new.

102

If you don't have a gadget account you'll need to sign up first.

103

I work here so I obviously do have an account.

104

I'm going to select the Shopify app type, click next, and then enter a domain for my app.

105

So I'll just call this my very first shopify.gadget.app

106

and i'll click get started so this creates my new gadget app for me

107

so this will give me a hosted postgres database node.js backend

108

and react front end powered by veat like i mentioned before the first thing i notice is

109

that there's this connect shopify button so i'm going to go ahead

110

and do that so i've shown you the parts of the partners dashboard

111

that is always how we recommend connecting to shopify you can also connect directly from

112

that store admin however it is limited in features and functionality

113

so we always recommend going through the partners dashboard even if you're just building for a single merchant

114

you'll notice at the very bottom here we have client id and client secret

115

those should look familiar because they're right here in my partners app

116

so i just need to copy them over to gadget and then i'll press connect

117

on this page i select what shopify scopes and data models i want to include in my app

118

this is intimidating the first time you go about building a shopify app because the shopify api is

119

huge you probably don't know what scopes and what models you actually need to build your app

120

that's a-okay this connection is always editable later

121

so you don't need to worry about making the right choices up front now before i actually select scopes

122

and models i'm going to just quickly take a step back

123

and talk about shopify's admin api so because we are building an app

124

that is embedded in that store admin we're going to use the admin api to get and write data to shopify

125

Of course, this can't be simple.

126

Shopify has two versions of their admin API.

127

There is a REST admin API and there is a GraphQL admin API.

128

Both of them have shared resources.

129

So if I go ahead on the REST API, I can click on products.

130

You see there is a product data model.

131

If I go into the GraphQL API.

132

I find products and collections.

133

Go to the objects and I can click on another product data model.

134

If I go ahead and do a quick glance at these fields, see there's properties body HTML created at.

135

They are not the same.

136

So that is nice and convenient.

137

The gadget data models are based on the REST API when available.

138

There are some models that are only available in the GraphQL API

139

and in that case we are fetching data using the GraphQL admin API.

140

So I just want to note that it is a large API.

141

It takes a while to get used to.

142

Don't be intimidated.

143

You can always edit your connection and gadget if you want different data models.

144

If you don't want data models you can remove them from the connection

145

so that is a okay

146

so i'm just going to go over back to my gadget app i'm going to select my product read scope

147

so i want to be able to read in product data into my app

148

and i'm just going to select the product

149

and i will select the product variant data models

150

so you see as i did that my setup summary changed a bit

151

so gadget is also going to automatically subscribe to shopify webhooks for me

152

so you can see i am subscribing to some shop webhooks.

153

So when a shop is updated or uninstalled, I will get a webhook for that, as well as my create, update, and delete product webhooks.

154

So whenever a merchant changes the product in the admin, that could be a trigger for an action that I want to run as part of my app.

155

So we are subscribing to webhooks for you.

156

You also get an overview of the models that we are going to sync data for automatically.

157

You can scroll down this page.

158

We do have a heap of models available.

159

So if you are getting into public app development at the very bottom, we also have billing resources.

160

I'm just going to go ahead and press confirm with my product selections now.

161

You'll notice that the product and product variant data models have been added to my app, as well as shop GDPR requests and sync models,

162

which are added to every gadget app when you connect to Shopify.

163

I'm going to get back to those in a little bit.

164

I'm going to finish setting up my connection first.

165

So we give you this app URL and redirection URL.

166

I need to copy these values, go back to my partner's app, click on the app setup tab,

167

and paste in this app URL and this redirection URL.

168

And I will press save here.

169

perfect so now my app is ready to be installed on my shop

170

so i'm going to go back to overview i can go ahead

171

and click select store in the test your app section

172

and i'm going to go ahead

173

and select my cart transform testing store my brand new development store

174

so i haven't written a line of oauth code that's what's

175

really great about gadget is it's going to handle all of the oauth for me

176

so i can just directly install my app on a store so i'll just click the install app button

177

and voila this is my embedded app you'll notice we're back

178

in this store's admin under the app section there is my first app

179

and this is just a shop information page this is actually a react front end

180

that is included and hosted as part of your gadget project so if i go back to gadget here

181

click on the front end folder and go to shoppage.jsx.

182

This is the page that is actually powering that front end here.

183

So you see there is a banner with a title.

184

Your app is successfully connected to Shopify.

185

If I go back here, my very first Shopify is successfully connected to Shopify.

186

So this React front end is styled using Shopify's Polaris component library.

187

Gadget automatically install this for you when you set up your connection to shopify so

188

if i just go over to the polaris docs i will include a link to these docs in the description but

189

if i click on components you can see there's lots of

190

components you can use these to build native feeling apps so

191

that your app blends in with the rest of the shopify admin

192

which is really nice so

193

if i scroll down here i should be able to find a banner component

194

and that looks pretty familiar if i go back here

195

so it is the same banner component it'll look the same as every other banner

196

that is used in the admin if the app is built on polaris

197

so that's wonderful the next thing i want to mention is webhooks

198

so if i go back to my gadget app

199

and click on my shopify product model you see a model is like a table in a database

200

and we have these fields so these fields

201

if we take a look at them

202

and compare them to the product resource from the rest api they should match up so that is great

203

we also have some crud actions generated automatically for you for this shopify product model

204

so you see there's create update and delete actions there's also a read api

205

if i go over across the code you can add custom code

206

and this is your app back end in node.js so

207

if you are writing custom functionality

208

that happens whenever you create a product this is where you'd

209

add it i'm not going to get into what the run

210

and on success functions mean right now i'm not going to

211

go through gadget stuff i do recommend going to our product tagger tutorial it will teach you more about gadget

212

and less focus on shopify over here in the triggers section though, we do have Shopify webhooks as triggers.

213

So whenever a product is created or updated, this create action can be run.

214

And the reason update can also run this create action is I might go into the admin, update a product.

215

If it doesn't exist in my database already, it'll create a new instance, a new record of this product.

216

So let's test this out.

217

I'm going to go to my admin, click on products, and I will just add a new product.

218

I'm going to go ahead and call this t-shirt.

219

I can enter a description if I want.

220

I don't want to right now.

221

Add media.

222

So this would be like an image of my product.

223

Set some pricing.

224

Track quantity.

225

I do need a skew in order to create a new product.

226

Doesn't really matter what it is.

227

So I'm okay with this.

228

It's just a title right now.

229

I'll press save.

230

So this actually creates a new product in my shop and it'll fire that products create webhook.

231

So if I go back to my Gadget app, I can go to my data page.

232

You'll see that the t-shirt has been added to my database.

233

So that's wonderful when I am creating or updating products.

234

I might also want to get all of the products that are already installed or already created in a merchant store,

235

and i can use gadgets data sync to do that so i'm going to scroll down click plugins shopify

236

and then go to shop install so this is the app i already connected

237

and i'm going to go ahead this is my store cart transform testing i'll hit the sync button

238

so i'm manually triggering a sync now there is also a

239

way to trigger a sync as soon as a merchant installs your app on a store

240

and what this is going to do is pull in all

241

of my product data from this store into my gadget database

242

so that i can start using my data from my database to actually perform my app's functionality

243

so i'll click on product click on data and you see

244

that all of the data is now synced to my database

245

so that's wonderful the Shopify API does have rate limits

246

and gadget handles that for you

247

so you don't have to worry about the number of products

248

or orders or customers that a store already has gadget will sync all of

249

that data as fast as it can and manage that rate limit

250

so you don't have to worry about doing

251

that yourself another nice benefit of using gadget so this is good I have

252

synced data into my database I have my embedded front-end I

253

think I'm probably ready at this point to go ahead

254

and create a production version of my app let's say

255

so I haven't actually built an app once again I will

256

refer you to any of our other tutorials figure out what you want to build

257

and then go ahead and build our app I'm gonna skip

258

that part and just get to how do I release an app in production.

259

So this is my development environment.

260

Gadget also has a production environment I can use.

261

So I actually need to go back to my partner's dashboard once again.

262

I do need to create a new app, another new app.

263

Call it my first production app.

264

once again i get a client id and secret

265

so i do want to copy these back to gadget i can go back to my connection

266

and plugins shopify and there is this production box i just want to add my app credentials here

267

so that's my client id my client secret i can confirm

268

that i can go ahead and copy the app url and redirection url back to the shopify partners app

269

click save go to overview now this is where i can go ahead

270

and choose my app distribution so if i click on this choose distribution i can select the custom distribution

271

this is just warning that my app can only be installed by a single store plus organization so I'm okay with that.

272

And I need to enter my store's domain.

273

So this is my cart transform testing store.

274

I think I can actually just go ahead and copy this here.

275

Perfect.

276

So that's the admin link.

277

You can allow multi-store install for a plus organization.

278

I'm fine with that.

279

So I'll generate a link.

280

This is just a confirmation dialog.

281

This can't be undone.

282

so there we go i can copy this link to install

283

my app on this particular store now there's one thing i need to do in gadget first

284

and that is actually deploy my app to production so

285

because there's two environments development and production i need to go ahead

286

and take all my code and model changes

287

and push them to my production environment before i install so i can just go to this deploy

288

down at the bottom here, click deploy to production.

289

And what this will do is minify and optimize all of my front end assets.

290

It's going to set up a production database, run any migrations that need to run behind the scenes, and then restart the production app.

291

Happens usually pretty quickly, which is nice.

292

And it is one click, which is another nice thing.

293

No messing around in an AWS or Google Cloud Console.

294

So that's great.

295

My app has been deployed.

296

so now i can go ahead copy this install link paste

297

it into yet another new tab i am going to go cart transform testing install my app

298

and there we go so this is the production version of my app installed on my store now so that's great

299

that was kind of a quick end-to-end build minus the build part of setting up my first shopify app so

300

that was just a very quick intro to shopify app development

301

i do recommend you actually go through the process of building an app next

302

and included in this video description is a link to our product tagger tutorial

303

and that'll walk you through actually modifying your database adding some custom backend code

304

and then building a unique front end for your embedded app

305

if you have any questions about getting started building shopify apps feel free to join our discord

306

and reach out the link is in the video description until next time i hope you keep building more

307

and coding less with gadget

Baixar aplicativo

Everything you need to speak fluently

AI PronunciationScore every sentence

IPA PracticeMaster every sound

VocabularyBuild your word bank

Vocab GameLearn while playing

Escaneie o QR

Download on theApp Store Get it onGoogle Play

O que é a Técnica de Shadowing?

Shadowing é uma técnica de aprendizado de idiomas com base científica, originalmente desenvolvida para o treinamento de intérpretes profissionais. O método é simples, mas poderoso: você ouve áudio em inglês nativo e repete imediatamente em voz alta — como uma sombra seguindo o falante com 1-2 segundos de atraso. Pesquisas mostram melhora significativa na precisão da pronúncia, entonação, ritmo, sons conectados, compreensão auditiva e fluência na fala.

Prática de Shadowing: Start building Shopify apps, FAST - Aprenda a falar inglês com vídeo

Escolha um modo de prática

Baixar aplicativo

Sobre esta lição

O que é a Técnica de Shadowing?