Shopify Remix QR Code App Tutorial Walkthrough
ฝัง
- เผยแพร่เมื่อ 25 ต.ค. 2023
- Let's do a video walkthrough of the QR Code App Tutorial on shopify.dev! Since they've updated the tutorial to use the newest Remix template, we go over some remix concepts and how we integrate Shopify utilities for app building.
Please let me know in the comments down below if you have any questions or run into any problems while following along in the video, I'd love to help out in any way I can. Feedback and constructive criticism is also highly appreciated!
And don't forget to follow me on Twitter! / devwithalex
🔗 LINKS
-------------------------
QR Code Tutorial on shopify.dev:
shopify.dev/docs/apps/getting...
Shopify App Docs (Remix):
shopify.dev/docs/apps/getting...
Shopify Devs Discord:
/ discord
✉️ INQUIRIES
-------------------------
Email: contact@devwithalex.com
Twitter: / devwithalex
🛠️ WORK WITH ME
-------------------------
Want to work with me to build or improve your app?
Go to devwithalex.com for more info on my packages + pricing!
🙋🏽♂️ About Me
-------------------------
Hi there! My name is Alex and I have been programming for over 5 years now. Programming has changed my life for the better, and I am on a mission to share my knowledge with you so that you can reap the rewards of a satisfying and fulfilling career in software development. My favorite thing about software development is that you are constantly learning, and I want to share the things I learn. I am always looking for ways to improve and new things to learn, so feel free to reach out or leave a comment letting me know where I can improve or if I should cover a specific topic!
That's is actually cool man, can't wait for the billing and other API implementations. Good job!
Dude, you're really good and really helpful.
yes niceness ! started yesterday with app development and found your channel. now i am stuck with the QR Code example app and you uploaded a new vid about that. best timing ever :P
Thanks for this. As someone who's new to Remix, it was super helpful to have you walk through that Shopify tutorial!
Thanks for your video. I'm just starting the journey with shopify apps, so your video was very helpful.
Great content!
Great stuff man, thanks!
thanks! great tutorial!!!
Very useful! Thanks
Thank you for this video
Thank you Alex, it is very informative. We need more Shopify Remix tutorial please. Maybe starting from simple app please.
Thank you very much! 😁
Great vid man! Thanks for diving deep on this, it helped a lot. Would love to see you create your own app like an app embed
Nice, good explain
So good as previous one.
Awesome job simplifying things. In your next video, please show how to use proxies and use of proxy in any extension with the new remix template.
awesome!
thanks brotha!
Awesome video!
Could you make a video showcasing how to build an app that displays order data (like graphs type of thing) and how to connect remix app to mysql database and how to display this database! Great video!
Great video. Please make a video on Webhooks
YOU ARE VERY GOOD DEVELOPER NICE BUDDY ...
one video for Shopify workflow please this video was very helpfull for me
Thank you for this video. Is there a way that we can create an ap with Remix using Mongo DB?
I see there is a docker file there as well. Is spinning this up in a container turn key?
btw, if you ran into some issues with HorizontalStack and VerticalStack while npm run dev, replace HorizontalStack with InlineStack and VerticalStack with BlockStack. Somehow the renamed it but did not updated the code in the example.
Yes! If you’re using the latest version of Polaris (v12) this is true. This template still uses v11 hence why the code isn’t updated, but the Polaris docs are updated to v12 so it can definitely be confusing
Bro when full serial will come?
Hi ,in old shopify framework i used express js for backend stuff and call that in react js using axios but now in remix framework how i can use express js how will be the structure looks like...if express doesnt support how to do the thing
I've started to build this on my own following the docs, and got this error when editing the index page - Failed To Execute Post Message On DOM Window. Have you encountered this?
Hey! I need help regarding hosting of app build with remix to aws EC2. Any tip will be highly appreciated. Thanks!
m wondering How and Where we can Deploy this remix app to Vercel,
because Flyio and heroku dont offer free way
I've just started to get into Shopify App dev, but have been a JS dev for while now. I've been doing some research and wondering where Remix fits it vs. something like Gadget? Remix seems like it offers a really good DX experience for coding the app itself, where as Gadget provides a good DX for everything around developing the app - ie creating a smooth pipeline. Is that accurate to say and is it a choice of one or the other right now?
Yeah there are pros to each one, with Gadget you get pretty much the entire backend managed and little need for maintenance or concern for scaling. On the other hand you obviously give up a lot of control, the cost of maintenance can be more especially at scale and there is some amount of “vendor lock in”. Gadget isn’t going anywhere so your projects aren’t in danger but something like transferring your app off of Gadget becomes a lot more difficult.
I also really like the DX that Remix provides and as far as actual development, I personally do enjoy the remix experience more with their routing, action/loaders, SSR, etc.
Short and not-as-helpful answer is “it depends”, I build apps with both stacks for different cases. I’m actually using gadget now to build a personal app because I don’t want to spend time with management, want to get something up quickly and the cost far outweighs the time that I’d spend otherwise. If I were building an app that has very heavy usage of webhooks or complex data requirements I’d reach for Gadget because managing that isn’t my cup of tea and I know that they have it covered. If I were building an app that relies primarily on metafields or requires a more flexible stack then I’d probably use Remix.
Again this is all just my opinion so definitely try them both out and compare with your experience. Hopefully that helps a little, thanks for watching!
Thank you so much for the reply. It was VERY helpful. You're right in that the next step is to build something with both of them - or build the same app twice. Really appreciate your input and enjoyed the commentary on this video. Cheers!@@devwithalex
At 17:20, shouldn't the delete operation check that the authenticated shop actually owns the QR code before deleting it? A malicious client could delete another shop's codes, right?
The authenticate method provided by Shopify should already take care of that and verify that the request came from an authenticated shop without any tampering. (See more on the process here: shopify.dev/docs/apps/auth/oauth/session-tokens) Definitely couldn't hurt to add as a sanity check in the model function though
@@devwithalex Thanks for the response. It validates the session came from *some* authenticated user, sure. But a user could, for instance, type the QR code ID of a competitor who also uses the app into the search bar, then view and delete their QR code. I just tested this and it works.
I know it's just an example app, but it's worrisome that someone could end up running this in production!
Hi Alex @devwithalex, stuck @ around 5mins. npm run prisma migrate dev -- --name add-qrcode-table . Missing script: "prisma'. Any suggestions please? Thank you, Edward.
Make sure you're running it from the root of the project, and that you've run `npm i` first as well. If you've generated the template by using the `npm init @shopify/app@latest` command then you should have the prisma script
Hey Alex it is a great tutorial
can you please help or create a video on how I can create a slider using remix and use that in my online store ( theme store ) it would be very helpful for me I'm not getting any resources about this or if you know anything about this can you just reply me on this comment please
Great video. thanks! Can someone explain me how to access the rest api. This is as far as I got.
const { admin } = await authenticate.admin(request);
admin.rest.resources.Product