Top Content

Versión en EspañolES

Construyendo una Aplicación de Shopify con React & Node

Please sign in to watch this workshop.

Bookmark

Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.

Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.

This workshop has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Una aplicación Shopify extiende la funcionalidad de una tienda Shopify más allá de lo que ofrece inicialmente la plataforma. Permite personalizar y agregar nuevas características para adaptar la tienda a las necesidades específicas de cada comerciante.

Shopify ofrece varias herramientas para desarrolladores, incluyendo la CLI de la aplicación Shopify para crear e instalar aplicaciones, Polaris para la interfaz de usuario, y AppBridge para la comunicación entre tu aplicación y el administrador de Shopify.

Polaris es un sistema de diseño creado por Shopify que proporciona patrones de diseño consistentes para ayudar a los desarrolladores a construir experiencias de usuario que sean cohesivas y familiares para los comerciantes en Shopify.

Un componente de estado vacío en Shopify, utilizado a través de Polaris, es un elemento de UI que se muestra cuando no hay elementos o datos para mostrar en una lista, tabla o gráfico. Suele incluir un botón para incitar alguna acción, como añadir productos o configurar detalles.

Puedes encontrar inspiración para tu aplicación Shopify explorando industrias específicas, explorando mercados internacionales y sus necesidades únicas, o escuchando las necesidades y comentarios de los comerciantes en las comunidades de Shopify como foros y grupos de Facebook.

AppBridge es un cliente de JavaScript de Shopify que permite a las aplicaciones incrustadas interactuar con el marco administrativo de Shopify. Facilita la creación de una experiencia de usuario integrada y segura dentro del administrador de Shopify.

Puedes usar la tienda de desarrollo de Shopify, que es una cuenta gratuita con algunas limitaciones, para desarrollar y probar aplicaciones. También puedes utilizar la Shopify app CLI para crear y configurar rápidamente aplicaciones usando Node.js y React.

Jennifer Gray

Hanna Chen

87 min

10 Jun, 2021

Comments

Available in other languages:

Watch more workshops on topic

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

React Summit 2023

139 min

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

Top Content

Workshop

Matteo Frana

- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

next.js e-commerce react bricks react state management

Construye una sala de chat con Appwrite y React

JSNation 2022

41 min

Construye una sala de chat con Appwrite y React

Workshop

Wess Cope

Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!

web development react chat app case study realtime

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

React Advanced 2023

104 min

Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix

Workshop

Alexandra Spalato

I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria
II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes
III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen
VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización

e-commerce remix

Problemas difíciles de GraphQL en Shopify

GraphQL Galaxy 2021

164 min

Problemas difíciles de GraphQL en Shopify

Workshop

5 authors

En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.

scalability graphql case study

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript

Node Congress 2024

152 min

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript

Workshop

2 authors

Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.

web development graphql case study

De 0 a Autenticación en una Hora para tu Aplicación JavaScript

JSNation 2023

57 min

De 0 a Autenticación en una Hora para tu Aplicación JavaScript

Workshop

Asaf Shen

La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.

authentication case study

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Depuración de JS

React Summit 2023

24 min

Depuración de JS

Top Content

Mark Erikson

Replay.io

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

web development javascript case study best practices debug

Un Marco para Gestionar la Deuda Técnica

TechLead Conference 2023

35 min

Un Marco para Gestionar la Deuda Técnica

Top Content

Alex Moldovan

CodeSandbox

Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

developer challenges team productivity case study

Construyendo un Asistente AI Activado por Voz con Javascript

JSNation 2023

21 min

Construyendo un Asistente AI Activado por Voz con Javascript

Top Content

Tejas Kumar

Author of the "Fluent React" bestselling book, software engineer with 23 years of experience, and host of the developer-loved ConTejas Code podcast.

This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.

artificial intelligence case study

Una Guía Práctica para Migrar a Componentes de Servidor

React Advanced 2023

28 min

Una Guía Práctica para Migrar a Componentes de Servidor

Top Content

Fredrik Höglund

ephem.dev

React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

react react server components react query next.js react 18 case study

Solucionando Problemas de Rendimiento en React

React Advanced 2023

22 min

Solucionando Problemas de Rendimiento en React

Top Content

Josh Goldberg

Open Source enthusiast, TypeScript contributor, writing a book on Typescript

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

react performance case study

De Monolito a Micro-Frontends

React Advanced 2022

22 min

De Monolito a Micro-Frontends

Top Content

Ruben Casas

Postman

Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

micro-frontends developer challenges micro frontends react case study