\n\n\n```\n\nNessa aula, vamos iniciar com o clássico Hello World, essencial ao trabalhar com qualquer linguagem ou framework. Dividi a aula em duas partes: primeiro, criaremos um arquivo modelo que servirá de base para os próximos conceitos. Usaremos o React com a tag script para focar nos fundamentos. Vou mostrar como criar um arquivo `modelo.html` e configurar a estrutura básica do HTML, incluindo a div que renderiza a aplicação. Na próxima aula, instalaremos extensões e faremos o Hello World funcionar.","content":null,"duration":195,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"tags":[],"video":{"jupiterVideoId":"637592c6-0178-4bc3-b6e8-4507d375df4d","platform":"nivo"},"route":"/jornada/react-2025/sala/fundamentos-9/grupo/formas-de-rodar-o-react-e-hello-world/aula/criando-arquivo-base","metadata":{"journey_id":"d941129a-2873-4670-b53a-05da566d1496","journey_title":"React","type":"cluster","is_expert_content":false,"node_id":"7be2f248-2d13-4ca3-9879-8f94907299fc","node_title":"Fundamentos","node_slug":"fundamentos-9","roadmap_slug":null,"cluster_id":"bed08bdb-10ff-4c27-b807-5ff653ec7b94","cluster_title":"Fundamentos","cluster_slug":"fundamentos-9","cluster_thumbnail_url":null,"lesson_group_id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","group_slug":"formas-de-rodar-o-react-e-hello-world","group_title":"Formas de rodar o React e Hello World","lesson_id":"393df3ea-440b-46a3-88ab-77515bcb7394","lesson_slug":"criando-arquivo-base","lesson_title":"Criando arquivo base"},"lessonGroup":{"id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","slug":"formas-de-rodar-o-react-e-hello-world","title":"Formas de rodar o React e Hello World"}},{"id":"e8f77d19-fed9-4f36-81a8-fd374e84242c","slug":"extensoes-uteis-para-o-react-no-vs-code","type":"VIDEO","title":"Extensões Úteis para o React no VSCode","lessonJourneyId":"e6102c05-6685-432f-b649-3cb08ef7dea6","description":"Antes de mergulharmos no Hello World, quero compartilhar duas extensões do VS Code que vão facilitar sua vida como desenvolvedor. A primeira é o Biome, um formatador de código que melhora a indentação automaticamente ao salvar. Basta instalá-lo e configurá-lo nas opções de formatação. A segunda é o Live Preview, que permite visualizar seu projeto em um navegador integrado. Na próxima aula, vamos criar nosso Hello World em React, que é super simples!","content":null,"duration":139,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"tags":[],"video":{"jupiterVideoId":"95293e83-f96e-4b64-b049-a498fef1284b","platform":"nivo"},"route":"/jornada/react-2025/sala/fundamentos-9/grupo/formas-de-rodar-o-react-e-hello-world/aula/extensoes-uteis-para-o-react-no-vs-code","metadata":{"journey_id":"d941129a-2873-4670-b53a-05da566d1496","journey_title":"React","type":"cluster","is_expert_content":false,"node_id":"7be2f248-2d13-4ca3-9879-8f94907299fc","node_title":"Fundamentos","node_slug":"fundamentos-9","roadmap_slug":null,"cluster_id":"bed08bdb-10ff-4c27-b807-5ff653ec7b94","cluster_title":"Fundamentos","cluster_slug":"fundamentos-9","cluster_thumbnail_url":null,"lesson_group_id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","group_slug":"formas-de-rodar-o-react-e-hello-world","group_title":"Formas de rodar o React e Hello World","lesson_id":"6cf4c7a0-3d80-460c-a105-d636900cfb9f","lesson_slug":"extensoes-uteis-para-o-react-no-vs-code","lesson_title":"Extensões Úteis para o React no VSCode"},"lessonGroup":{"id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","slug":"formas-de-rodar-o-react-e-hello-world","title":"Formas de rodar o React e Hello World"}},{"id":"29d97f3f-4ea2-4b1b-a5bd-c2945468a30b","slug":"nosso-primeiro-hello-world","type":"VIDEO","title":"Nosso primeiro \"Hello World\"","lessonJourneyId":"473f1d93-a568-4ece-996f-da6f82a615f8","description":"Agora que configuramos nosso ambiente no VS Code, vamos criar nosso primeiro projeto em React: o Hello World. Começamos copiando um arquivo modelo e renomeando-o. Em seguida, utilizamos `ReactDOM.createRoot` para buscar a div principal da nossa aplicação. O interessante é que, ao invés de usar strings, inserimos diretamente o HTML, aproveitando o JSX, que permite essa integração entre HTML e JavaScript. Na próxima aula, vamos aprofundar em HTML, CSS e JSX.","content":null,"duration":190,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"tags":[],"video":{"jupiterVideoId":"ed6d7f8c-12dc-4e93-919e-a04b85471193","platform":"nivo"},"route":"/jornada/react-2025/sala/fundamentos-9/grupo/formas-de-rodar-o-react-e-hello-world/aula/nosso-primeiro-hello-world","metadata":{"journey_id":"d941129a-2873-4670-b53a-05da566d1496","journey_title":"React","type":"cluster","is_expert_content":false,"node_id":"7be2f248-2d13-4ca3-9879-8f94907299fc","node_title":"Fundamentos","node_slug":"fundamentos-9","roadmap_slug":null,"cluster_id":"bed08bdb-10ff-4c27-b807-5ff653ec7b94","cluster_title":"Fundamentos","cluster_slug":"fundamentos-9","cluster_thumbnail_url":null,"lesson_group_id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","group_slug":"formas-de-rodar-o-react-e-hello-world","group_title":"Formas de rodar o React e Hello World","lesson_id":"7eada2f4-c324-4f64-8ceb-5983f685b16d","lesson_slug":"nosso-primeiro-hello-world","lesson_title":"Nosso primeiro \"Hello World\""},"lessonGroup":{"id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","slug":"formas-de-rodar-o-react-e-hello-world","title":"Formas de rodar o React e Hello World"}}]}],"journeyNode":{"id":"7be2f248-2d13-4ca3-9879-8f94907299fc","slug":"fundamentos-9","title":"Iniciação","description":"Nesse módulo você dará os seus primeiros passos com o React entendendo o que é React e o que não é, DOM x Virtual DOM, árvore de renderização, reconciliação, como reutilizar código por meio de componentes, formas de rodar o React e como criar o seu primeiro \"Hello World\"","isFreemium":false,"isBonus":false,"releaseAt":"2025-05-05T03:00:00.000Z"},"journey":{"id":"d941129a-2873-4670-b53a-05da566d1496","slug":"react-2025","title":"React","iconUrl":"https://xesque.rocketseat.dev/platform/1760965441182.svg","isFree":false,"freeUntil":null,"isEntryCourse":false,"isCertificable":true,"certificate":{},"contentType":"SPECIALIZATION","hasAfterAccess":false,"shouldRedirectToInternalPage":false,"plutoOfferSlug":"formacao-em-react","parentJourney":null},"forum":{"slug":"react-js"}},"dataUpdateCount":0,"dataUpdatedAt":1786293514495,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":["GetJourneyLessonByNodeSlug",{"nodeSlug":"fundamentos-9"}],"queryHash":"[\"GetJourneyLessonByNodeSlug\",{\"nodeSlug\":\"fundamentos-9\"}]"},{"state":{"data":{"lessonGroups":[{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup","lessons":[{"id":"43eb4e46-9f18-441d-8868-40f246781fd9","slug":"introducao-e-showcase","type":"VIDEO","title":"Introdução e showcase","lessonJourneyId":"c7cbe71d-04dd-4a56-be8a-aaeec3b31d1c","description":"Explore o Electron para criar apps desktop com HTML, CSS, JS e React. Veja o projeto Notion-like do curso, abordando storage nativo e integração com o sistema. Compare Electron com Tauri e outras tecnologias, entendendo quando usar cada um. Foco no desenvolvimento completo de apps Electron.","content":null,"duration":527,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"a2474d3a-4595-4584-9eea-dd6243be969d","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/introducao-e-showcase","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"ccb533f4-d4f3-48b5-91fc-c355302e624a","lesson_slug":"introducao-e-showcase","lesson_title":"Introdução e showcase"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"77f781a5-6992-43f3-95c1-c704bcc8f9f7","slug":"arquitetura-do-electron","type":"VIDEO","title":"Arquitetura do Electron","lessonJourneyId":"97cec881-1bf2-44ee-a9e4-50ad1c707408","description":"Aprenda a arquitetura do Electron: processos Renderer (frontend), Main (backend) e Preload (ponte). Entenda a comunicação IPC entre eles, a importância da segurança e evite más práticas de acesso direto a APIs sensíveis no frontend.","content":null,"duration":590,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"fed65e94-d34e-47e1-ad78-2455837afbee","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/arquitetura-do-electron","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"5662cf0e-c559-438d-a8ee-17c6a52ca9fd","lesson_slug":"arquitetura-do-electron","lesson_title":"Arquitetura do Electron"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"56f645f8-048f-4667-b25d-bed1bf73413e","slug":"figma-rotion","type":"LINK","title":"Figma: Rotion","lessonJourneyId":"1ce2bb79-5411-421c-b967-c7231cf36f11","description":"","content":null,"duration":0,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":false,"tags":[],"material":{"link":"https://www.figma.com/file/oDWCeuEWPkoSJytDBuTax5/Rotion-(Curso-de-Electron)?node-id=0%3A1&t=HtcoV49MKcpXCOYg-0/duplicate"},"files":[{"name":"Link","url":"https://www.figma.com/file/oDWCeuEWPkoSJytDBuTax5/Rotion-(Curso-de-Electron)?node-id=0%3A1&t=HtcoV49MKcpXCOYg-0/duplicate","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"3d41bbe6-3b08-4173-aed8-d6db59923faf","lesson_slug":"figma-rotion","lesson_title":"Figma: Rotion"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"f6ec8809-1b91-48ac-86d3-9d4b7f7b1e4e","slug":"setup-da-aplicacao","type":"VIDEO","title":"Setup da aplicação","lessonJourneyId":"02476539-8678-4575-bd87-8862d7995e95","description":"Nesta aula, configuramos a estrutura inicial da aplicação Electron. Exploramos templates como Electron VIT (com React/TypeScript) e Electron App, criando o projeto 'Rotion'. Entendemos os processos main, renderer e preload, e como rodar a aplicação. Vimos que Electron exibe apps web com acesso nativo, personalizando a janela e o conteúdo.","content":null,"duration":1132,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"460c9d49-12a7-4d96-b488-2b5a7c062153","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/setup-da-aplicacao","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"75d499ce-899b-46f2-ab9a-395960554645","lesson_slug":"setup-da-aplicacao","lesson_title":"Setup da aplicação"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"30b4a295-3c40-4d45-a005-7a52690339e8","slug":"adicionando-uma-fonte-externa","type":"VIDEO","title":"Adicionando uma fonte externa","lessonJourneyId":"e700be73-7447-45ef-b97a-15b9d109fa8c","description":"Nesta aula, adicione uma fonte externa (Google Fonts - Inter) ao seu app Electron. Entenda e resolva erros de Content Security Policy (CSP) para `style-src` e `font-src`, permitindo o carregamento de estilos e fontes de domínios externos. Depure com DevTools e aplique a fonte com sucesso.","content":null,"duration":307,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"da080f23-b6fb-4240-ba24-f48c8c08e28a","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/adicionando-uma-fonte-externa","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"b1f84d56-45b2-4c61-99f4-c703925b4f7f","lesson_slug":"adicionando-uma-fonte-externa","lesson_title":"Adicionando uma fonte externa"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"8bc99c03-8f5c-4383-9952-248cfa194198","slug":"setup-do-tailwindcss","type":"VIDEO","title":"Setup do TailwindCSS","lessonJourneyId":"2d5a320a-37af-4df8-9c5f-c19e63bb15f5","description":"Configure o Tailwind CSS para apps desktop com Electron. Aprenda a instalar Tailwind, PostCSS e AutoPrefixer, configurar `tailwind.config.js` e integrar com Vite. A aula aborda a solução de erros comuns de configuração, garantindo o uso do Tailwind para estilizar sua aplicação.","content":null,"duration":385,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"f2bfba1e-52cd-41c5-86b0-7ea3e6fee5fc","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/setup-do-tailwindcss","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"2572fc1d-b8f3-4b74-b658-a55ea4983b48","lesson_slug":"setup-do-tailwindcss","lesson_title":"Setup do TailwindCSS"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"d00854f6-943a-4588-a961-d541d5269096","slug":"typescript-eslint-download-tsconfig","type":"VIDEO","title":"TypeScript & ESLint","lessonJourneyId":"9dde784d-07d5-4095-8ad2-a4661fc2952c","description":"Nesta aula, configure TypeScript e ESLint para apps Electron com Vite. Simplifique o setup do TS usando um único tsconfig.json com aliases de importação (`~`, `@`). Otimize o ESLint com a configuração da Rocketseat, removendo dependências e ignorando pastas de build. Melhore a organização do código e a produtividade.","content":null,"duration":421,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"37b8474a-a8e4-4439-9504-8d7baf099879","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/typescript-eslint-download-tsconfig","files":[{"name":"Link","url":"https://storage.googleapis.com/golden-wind/ignite/curso-electron-assets/tsconfig.json","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"c2b85461-f19a-429d-859f-67d1163b771b","lesson_slug":"typescript-eslint-download-tsconfig","lesson_title":"TypeScript & ESLint"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"32d64094-8085-452d-96ac-a2d53a44dbd4","slug":"icones-e-nome-da-aplicacao-link-pro-figma","type":"VIDEO","title":"Ícones e nome da aplicação","lessonJourneyId":"8527115a-d4e6-456a-9eb0-05be0ffe34c9","description":null,"content":null,"duration":903,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":false,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"dd487042-589c-4fe7-9f37-4cacbf66e5e0","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/icones-e-nome-da-aplicacao-link-pro-figma","files":[{"name":"Link","url":"https://www.figma.com/file/0ORGyIhHTxcWj4hbHvCrBw/Rotion-(Curso-de-Electron)/duplicate","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"70bb82cd-4c5b-4069-a87d-e4f1afcbba87","lesson_slug":"icones-e-nome-da-aplicacao-link-pro-figma","lesson_title":"Ícones e nome da aplicação"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"77145f33-bf9c-42d7-9dab-33662ba636f5","slug":"cores-e-estilos-globais-download-cores-tailwind","type":"VIDEO","title":"Cores e estilos globais","lessonJourneyId":"8d74e799-fb2e-4516-af4b-fd0c3dd270f5","description":"Aprenda a configurar cores globais na aplicação. Adicione a paleta de cores 'Rotion' (50-900) ao Tailwind CSS e aplique um fundo e texto padrão. Ajuste a cor de fundo da janela nativa do Electron para evitar flashes brancos ao redimensionar.","content":null,"duration":214,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"9378d19e-1f05-4761-b150-1569bf31c558","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/cores-e-estilos-globais-download-cores-tailwind","files":[{"name":"Link","url":"https://storage.googleapis.com/golden-wind/ignite/curso-electron-assets/cores-tailwind.txt","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"8abe4880-22a9-463e-b05b-3a5c6e5e3ad2","lesson_slug":"cores-e-estilos-globais-download-cores-tailwind","lesson_title":"Cores e estilos globais"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}},{"id":"90bbe217-63f3-4883-a905-632541f96d10","slug":"esqueleto-da-aplicacao-download-components","type":"VIDEO","title":"Esqueleto da aplicação","lessonJourneyId":"73b98ee5-aaeb-45c2-86bd-ab4e1fb39e67","description":"Nesta aula, montamos o esqueleto visual da aplicação Electron. Integramos componentes HTML/CSS pré-prontos e configuramos bibliotecas como CLSX, Phosphor React e CMDK. Ajustamos a janela do Electron para macOS (title bar, traffic lights) e implementamos o arrastar da janela usando CSS WebKit App Region e utilitários Tailwind.","content":null,"duration":1042,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"2132e19f-88b0-4e98-b765-f1c59d77c705","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/fundamentos-and-setup/aula/esqueleto-da-aplicacao-download-components","files":[{"name":"Link","url":"https://storage.googleapis.com/golden-wind/ignite/curso-electron-assets/components.zip","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","group_slug":"fundamentos-and-setup","group_title":"Fundamentos & setup","lesson_id":"90482e31-0f7f-4b85-80f5-261ba17766b0","lesson_slug":"esqueleto-da-aplicacao-download-components","lesson_title":"Esqueleto da aplicação"},"lessonGroup":{"id":"699e157d-dee2-4fd2-a430-0a5bd9adf1fb","slug":"fundamentos-and-setup","title":"Fundamentos & setup"}}]},{"id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","slug":"construcao-da-aplicacao","title":"Construção da aplicação","lessons":[{"id":"5f2ee681-a244-4b91-bb3f-94c5450e98dc","slug":"configurando-roteamento","type":"VIDEO","title":"Configurando Roteamento","lessonJourneyId":"d8247fca-a31e-428d-b1d6-9ccc2d260667","description":"Configure roteamento em apps Electron com React Router DOM. Entenda o desafio de múltiplas janelas e como `electron-router-dom` permite instâncias de roteamento por janela. Aprenda a configurar nos processos main e renderer, e veja um exemplo prático de navegação.","content":null,"duration":572,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"6e975364-4cd9-4eca-9807-6ce054f04a69","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/construcao-da-aplicacao/aula/configurando-roteamento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","group_slug":"construcao-da-aplicacao","group_title":"Construção da aplicação","lesson_id":"12f78859-8920-41ec-b1b7-382a4ab722e7","lesson_slug":"configurando-roteamento","lesson_title":"Configurando Roteamento"},"lessonGroup":{"id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","slug":"construcao-da-aplicacao","title":"Construção da aplicação"}},{"id":"a97da478-8ac3-43db-ae30-87e855d5f051","slug":"configurando-layout","type":"VIDEO","title":"Configurando layout","lessonJourneyId":"a780fdc3-d8b6-4f8f-a394-7caebda84e1b","description":"Nesta aula, Diego Fernandes configura o layout padrão da aplicação. Ele move elementos comuns (sidebar, header) para um componente de layout (`default.tsx`) e usa o `Outlet` do React Router DOM para definir onde o conteúdo dinâmico das páginas será inserido. Também ajusta o tamanho inicial da janela.","content":null,"duration":193,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"1e3c492f-4e64-47af-a944-06460ba5e7d4","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/construcao-da-aplicacao/aula/configurando-layout","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","group_slug":"construcao-da-aplicacao","group_title":"Construção da aplicação","lesson_id":"2ea005ef-dc32-44b6-a56b-da46282aee93","lesson_slug":"configurando-layout","lesson_title":"Configurando layout"},"lessonGroup":{"id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","slug":"construcao-da-aplicacao","title":"Construção da aplicação"}},{"id":"a2762a75-d4c2-494a-8770-b88eef36f456","slug":"pagina-do-documento","type":"VIDEO","title":"Página do documento","lessonJourneyId":"e650f545-4700-477f-b815-f9b96ec0e872","description":"Nesta aula, estruturamos a página do documento, configurando o layout principal com padding e gap. Criamos uma sidebar responsiva e sticky para a Tabela de Conteúdos, usando componentes `toc.root`, `toc.link` e `toc.section`. Preparamos a área de conteúdo para centralizar o texto, otimizando a leitura em telas largas.","content":null,"duration":376,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"7e29c2bb-e486-449e-bf6c-256fd4a6fdcd","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/construcao-da-aplicacao/aula/pagina-do-documento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","group_slug":"construcao-da-aplicacao","group_title":"Construção da aplicação","lesson_id":"c9fea7bf-5370-4c03-9fe4-92f56700db37","lesson_slug":"pagina-do-documento","lesson_title":"Página do documento"},"lessonGroup":{"id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","slug":"construcao-da-aplicacao","title":"Construção da aplicação"}},{"id":"8f1a29a0-8fbf-42d3-98e9-a9e0ceedcc38","slug":"editor-de-texto","type":"VIDEO","title":"Editor de texto","lessonJourneyId":"13c4563c-6c19-420f-bf03-682efdd7d98c","description":"Configure o editor de texto TipTap no Electron. Instale extensões, integre com Tailwind CSS Typography para estilização automática e personalize o placeholder. Defina a estrutura do documento para iniciar com um título, criando um editor robusto e estilizado para sua aplicação.","content":null,"duration":1067,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"9dff1273-5728-45b9-ae06-645eec715395","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/construcao-da-aplicacao/aula/editor-de-texto","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","group_slug":"construcao-da-aplicacao","group_title":"Construção da aplicação","lesson_id":"691eeb63-18fc-4f72-9d74-879cf751e03f","lesson_slug":"editor-de-texto","lesson_title":"Editor de texto"},"lessonGroup":{"id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","slug":"construcao-da-aplicacao","title":"Construção da aplicação"}},{"id":"c1a73f3a-1571-47cb-b06f-2bf5f9ba7653","slug":"sidebar-flexivel","type":"VIDEO","title":"Sidebar flexível","lessonJourneyId":"b47a691f-f08d-4297-9100-556fd7fe8ba5","description":"Crie uma sidebar flexível e retrátil com Radix UI Collapsible. Aprenda a controlar a abertura/fechamento via botões no header e sidebar, gerenciar o estado de visibilidade e adicionar animações suaves usando Tailwind CSS, finalizando o layout da aplicação.","content":null,"duration":651,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"ecb70e87-0b53-4105-97b0-00389492fdf0","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/construcao-da-aplicacao/aula/sidebar-flexivel","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","group_slug":"construcao-da-aplicacao","group_title":"Construção da aplicação","lesson_id":"cfe0f4f4-8705-4240-8a90-a027794b234e","lesson_slug":"sidebar-flexivel","lesson_title":"Sidebar flexível"},"lessonGroup":{"id":"ff29020e-b852-46dd-8fc2-f1b128becdb7","slug":"construcao-da-aplicacao","title":"Construção da aplicação"}}]},{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação","lessons":[{"id":"b1282aaf-7850-4504-a700-aab42c77aa6d","slug":"exemplo-de-comunicacao-ipc","type":"VIDEO","title":"Exemplo de comunicação IPC","lessonJourneyId":"2a4276c2-ab34-46a4-818c-5cf9f4b3e694","description":"Nesta aula, explore a comunicação entre processos (IPC) no Electron. Entenda a divisão entre main, renderer e preload, e como o preload atua como ponte segura. Implemente exemplos práticos de IPC unidirecional (`send`/`on`) e bidirecional (`invoke`/`handle`), expondo APIs via `contextBridge` e lidando com tipagem.","content":null,"duration":1260,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"e5c06ab3-f229-48f0-ab6a-6da39e480666","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/exemplo-de-comunicacao-ipc","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"ca0c1fea-392e-41c1-9f7f-c99a950fc6fb","lesson_slug":"exemplo-de-comunicacao-ipc","lesson_title":"Exemplo de comunicação IPC"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"01378b65-30e1-49ae-b185-07e6cd26f0fc","slug":"configurando-o-react-query","type":"VIDEO","title":"Configurando o React Query","lessonJourneyId":"354a1cf7-7c00-447f-bc6e-1026edff2ff6","description":"Aprenda a configurar o React Query em apps Electron. Veja como a API IPC funciona como promises, permitindo integrar o React Query para gerenciar requisições de dados. Configure o QueryClientProvider, use o hook useQuery para buscar documentos e explore recursos como o \"Refetch on Focus\" para manter dados atualizados.","content":null,"duration":772,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"7cb53bd2-d254-490e-bf3e-ebd9b0d2645e","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/configurando-o-react-query","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"4435491c-f5f2-4b0d-b98a-f04ef237c996","lesson_slug":"configurando-o-react-query","lesson_title":"Configurando o React Query"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"d1a91692-dc30-41b1-a998-efeb92bcf86f","slug":"insights-sobre-armazenamento","type":"VIDEO","title":"Insights sobre armazenamento","lessonJourneyId":"c6bad5a9-c7f5-4366-b99e-3d4ea327f4ec","description":"Diego Fernandes compartilha insights sobre armazenamento no Electron. Entenda a diferença entre o processo `main` do Electron e um backend tradicional. Saiba quando usar armazenamento local (offline) para aproveitar as APIs do Electron, ou APIs web (online/compartilhado) para dados sincronizados. O curso focará no armazenamento offline para explorar mais o Electron.","content":null,"duration":211,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"e8651d60-dd9a-4bb1-a011-2a4f94b577a4","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/insights-sobre-armazenamento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"b70001e9-4c4f-4406-95aa-dccf6e72dfa3","lesson_slug":"insights-sobre-armazenamento","lesson_title":"Insights sobre armazenamento"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"41904197-0bd8-4f8e-8687-25e39a9694e5","slug":"configurando-o-store","type":"VIDEO","title":"Configurando o store","lessonJourneyId":"00583219-ed65-4a68-abd3-b25a59d75de7","description":"Nesta aula, explore opções de armazenamento de dados local para apps Electron, como SQLite e Electron Store. Entenda as vantagens e desvantagens de cada um. Configure o Electron Store, definindo tipos de dados com TypeScript e valores padrão. Aprenda a usar o Electron Store para persistir dados, ideal para preferências de usuário e estados da aplicação, e como ele será usado didaticamente para documentos.","content":null,"duration":643,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"ba29d914-e4ab-4774-aa75-a786d9b2cd3c","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/configurando-o-store","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"91d595a6-b11e-4695-b482-c28b129eae55","lesson_slug":"configurando-o-store","lesson_title":"Configurando o store"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"eb50a9d7-00f8-48cb-93b7-e4775b84c5e3","slug":"estruturando-ipc-handlers","type":"VIDEO","title":"Estruturando IPC Handlers","lessonJourneyId":"bd28660c-9e02-4606-9979-f13c494b0879","description":"Aprenda a estruturar a comunicação IPC no Electron. Padronize os canais com constantes compartilhadas e adicione tipagem para requests e responses, melhorando a manutenção e segurança. Veja como configurar aliases de importação com `vite-tsconfig-paths`.","content":null,"duration":506,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"9f2f329a-2797-43cb-8b65-45b5ebc029c1","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/estruturando-ipc-handlers","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"165f5f77-84b0-462b-adab-1e1d418807e5","lesson_slug":"estruturando-ipc-handlers","lesson_title":"Estruturando IPC Handlers"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"6e3f8f9f-9a38-4747-83ed-3895182d44e1","slug":"estrutura-do-crud-via-ipc","type":"VIDEO","title":"Estrutura do CRUD via IPC","lessonJourneyId":"0a05727f-7b80-4678-85f3-afb0f368d2bb","description":"Nesta aula, Diego Fernandes estrutura as operações CRUD de documentos via IPC no Electron. Ele define tipagens de requisição e resposta para buscar, criar, salvar e deletar documentos, e implementa as chamadas `ipcRenderer.invoke` no `preload` para preparar a comunicação entre processos.","content":null,"duration":523,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"d56ee678-d09c-4a47-8fbd-bafbec4908af","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/estrutura-do-crud-via-ipc","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"13145c94-0c33-4ea9-8abf-3bd630760747","lesson_slug":"estrutura-do-crud-via-ipc","lesson_title":"Estrutura do CRUD via IPC"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"0134a17d-a453-4ea7-ade8-9cfdc663d156","slug":"conectando-com-o-store","type":"VIDEO","title":"Conectando com o store","lessonJourneyId":"08518216-55c5-4eaf-8ea9-88a6cf9429d3","description":"Nesta aula, conecte os métodos IPC Main (fetchAll, fetch, create, save, delete) ao Electron Store. Aprenda a listar, buscar, criar, salvar e deletar documentos, utilizando `Object.values`, `store.get` (com .prop para IDs), `store.set` e `store.delete`. Geração de UUIDs e tratamento de tipagem com `@ts-ignore` são abordados.","content":null,"duration":693,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"5c990d68-2b04-48fc-ba40-8ba59ccdc8ee","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/conectando-com-o-store","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"b4a026b2-8ae4-4adf-b7c8-c9068ed1009b","lesson_slug":"conectando-com-o-store","lesson_title":"Conectando com o store"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"8e8b1d8f-1258-4bef-89bf-5fadf2d71772","slug":"criando-novo-documento","type":"VIDEO","title":"Criando novo documento","lessonJourneyId":"325c8dff-0695-4a47-a475-40d9165cb4e1","description":"Implemente a criação de documentos com `useMutation` do React Query. Gerencie o estado de carregamento e otimize a atualização da UI. Aprenda a usar `setQueryData` para atualizar o cache do React Query diretamente, evitando refetchs desnecessários e melhorando a experiência do usuário.","content":null,"duration":808,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"2058bee2-add7-4c90-a82a-15d0d071a06d","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/criando-novo-documento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"7cb7b9c9-cfb8-4d27-8465-e07ceeb12b41","lesson_slug":"criando-novo-documento","lesson_title":"Criando novo documento"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"4fd50d0e-58a3-4f88-9ccf-81e5f75bd2ab","slug":"visualizacao-do-documento","type":"VIDEO","title":"Visualização do documento","lessonJourneyId":"50f4ec19-4f60-4d28-8f82-b9789e5f313d","description":"Nesta aula, implementamos a visualização dinâmica de documentos. Configuramos rotas com ID, usamos `NavLink` para navegação ativa e `useParams` com `useQuery` para buscar dados específicos. O `useMemo` prepara o conteúdo (título em `

`, corpo em `

`) para o editor, que é exibido apenas após o carregamento. Demonstramos a atualização do conteúdo ao selecionar diferentes documentos.","content":null,"duration":814,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"91211e84-893d-4f88-8c7b-775f2aabe65a","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/visualizacao-do-documento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"95acb8ed-5544-4cf4-b1c0-52296a203f9b","lesson_slug":"visualizacao-do-documento","lesson_title":"Visualização do documento"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"1af6f1a0-4afe-4e9d-87fb-4092d9ca6fd9","slug":"remocao-do-documento","type":"VIDEO","title":"Remoção do documento","lessonJourneyId":"0c1c7841-77c2-4806-a6f9-91a1fb8c608d","description":"Implemente a remoção de documentos usando `useMutation` e `useParams`. Atualize a lista em tempo real com `setQueryData` e `filter` após a exclusão. Navegue para a rota inicial e otimize a UI, ocultando o botão de apagar quando nenhum documento estiver selecionado.","content":null,"duration":379,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"859d3242-c5db-438d-bc9c-7a524203381e","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/remocao-do-documento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"fe177971-2e12-44b4-a561-da5dcff3da64","lesson_slug":"remocao-do-documento","lesson_title":"Remoção do documento"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}},{"id":"c0209f13-c321-4fb3-879d-9752acb4f75e","slug":"alteracoes-no-documento","type":"VIDEO","title":"Alterações no documento","lessonJourneyId":"868d09f4-3999-44b4-9e66-fa08fed20cd0","description":"Nesta aula, finalize a comunicação entre renderer e main para atualização de documentos. Aprenda a usar Regex com grupos nomeados para extrair título e conteúdo de HTML do editor. Implemente a função `onUpdate` para enviar dados via `useMutation` ao processo principal e atualize a sidebar em tempo real, garantindo a persistência e exibição correta dos dados.","content":null,"duration":1107,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"e3c292eb-acf9-49f4-9dba-cbc4e4d1f0f4","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/storage-e-comunicacao/aula/alteracoes-no-documento","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","group_slug":"storage-e-comunicacao","group_title":"Storage e comunicação","lesson_id":"71396d78-b973-4539-a4b8-ee53a13739ac","lesson_slug":"alteracoes-no-documento","lesson_title":"Alterações no documento"},"lessonGroup":{"id":"ddcc3912-a95f-4e45-a502-e7037596cd4b","slug":"storage-e-comunicacao","title":"Storage e comunicação"}}]},{"id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","slug":"features-do-electron","title":"Features do Electron","lessons":[{"id":"b4abb18c-2029-45cc-b056-bd6ebdba73c8","slug":"criando-tray-menu","type":"VIDEO","title":"Criando tray menu","lessonJourneyId":"ca9b298f-5817-4644-94a0-dfb4791025b8","description":"Aprenda a criar e configurar um Tray Menu no Electron. Entenda como adicionar ícones adaptativos (preto/transparente, nome 'Template', 1x/2x/3x), itens de menu (normais, desabilitados, separadores, checkboxes) e a estrutura básica para interagir com sua aplicação.","content":null,"duration":473,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"10e73489-74e4-4294-b7b2-2757d5a517e9","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/features-do-electron/aula/criando-tray-menu","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","group_slug":"features-do-electron","group_title":"Features do Electron","lesson_id":"24719482-a164-450a-8bbf-4bf6ef5366a1","lesson_slug":"criando-tray-menu","lesson_title":"Criando tray menu"},"lessonGroup":{"id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","slug":"features-do-electron","title":"Features do Electron"}},{"id":"d1e910b9-eecd-441d-9f35-f050ce9d9923","slug":"criar-documento-pelo-tray","type":"VIDEO","title":"Criar documento pelo tray","lessonJourneyId":"8d0cc40b-1533-4c7c-a9c9-0437283ea035","description":null,"content":null,"duration":1169,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":false,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"88395574-6bc4-49b7-acd9-71dbcfaea9ea","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/features-do-electron/aula/criar-documento-pelo-tray","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","group_slug":"features-do-electron","group_title":"Features do Electron","lesson_id":"094c92b6-f049-4215-9bef-2eefbe02b3c9","lesson_slug":"criar-documento-pelo-tray","lesson_title":"Criar documento pelo tray"},"lessonGroup":{"id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","slug":"features-do-electron","title":"Features do Electron"}},{"id":"2290ba53-09af-4367-83a7-76553e0af532","slug":"configurando-hotkeys","type":"VIDEO","title":"Configurando hotkeys","lessonJourneyId":"87c4b9fc-30f5-41fd-9a41-5d6d50bbea78","description":"Configure hotkeys globais no Electron usando `GlobalShortcut.register`. Entenda o `CommandOrControl` para compatibilidade cross-OS. Aprenda a controlar o escopo das hotkeys, registrando-as no foco da janela (`browser-window-focus`) e desregistrando-as ao perder o foco (`browser-window-blur`), garantindo que funcionem apenas quando a aplicação estiver ativa.","content":null,"duration":282,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"541b2423-14f9-41d3-8d2a-ba19a20bd9e7","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/features-do-electron/aula/configurando-hotkeys","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","group_slug":"features-do-electron","group_title":"Features do Electron","lesson_id":"de322c54-3dc0-4f69-b752-21acf19e8e26","lesson_slug":"configurando-hotkeys","lesson_title":"Configurando hotkeys"},"lessonGroup":{"id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","slug":"features-do-electron","title":"Features do Electron"}},{"id":"d8422248-e032-43f7-b2b0-f5ae2a791a58","slug":"busca-na-aplicacao","type":"VIDEO","title":"Busca na aplicação","lessonJourneyId":"f043dfc9-2035-441c-9640-0ede44aebf05","description":"Implementa a busca de documentos usando a biblioteca Command K para uma paleta de comandos. Gerencia o estado de abertura/fechamento e integra a busca de documentos via React Query, otimizando chamadas com cache. Permite navegar para o documento selecionado e fecha a busca. Ajusta a visualização da scrollbar com plugin Tailwind.","content":null,"duration":626,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"c2808b99-1cb6-4e3e-98a0-b1ebc2831ca3","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/features-do-electron/aula/busca-na-aplicacao","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","group_slug":"features-do-electron","group_title":"Features do Electron","lesson_id":"f8004ede-8fd6-45ed-aea9-745eead6dc5d","lesson_slug":"busca-na-aplicacao","lesson_title":"Busca na aplicação"},"lessonGroup":{"id":"bf4a200a-3de0-4208-b0da-d1fa3b77a3f4","slug":"features-do-electron","title":"Features do Electron"}}]},{"id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","slug":"build-e-distribuicao","title":"Build e distribuição","lessons":[{"id":"ed28301e-09c6-40b1-b0b5-76b2f1874a53","slug":"assinatura-e-distribuicao","type":"VIDEO","title":"Assinatura e distribuição","lessonJourneyId":"6c132fe3-6d0a-4f09-844f-499999ddd8a6","description":"Esta aula aborda build e distribuição de apps Electron, explicando a importância e o custo da assinatura de código para evitar avisos de segurança. Discute o auto-update (Electron Updater, que exige apps assinados) e apresenta uma alternativa via GitHub releases. O curso focará na distribuição sem certificação.","content":null,"duration":429,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"b52e17a6-2cc4-43df-b967-140ba59a9998","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/build-e-distribuicao/aula/assinatura-e-distribuicao","metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","group_slug":"build-e-distribuicao","group_title":"Build e distribuição","lesson_id":"2b0dfc90-65ac-46dd-8d8b-356b5096655b","lesson_slug":"assinatura-e-distribuicao","lesson_title":"Assinatura e distribuição"},"lessonGroup":{"id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","slug":"build-e-distribuicao","title":"Build e distribuição"}},{"id":"0dbecf61-2073-4090-9fe0-f98bb5406f13","slug":"ajustes-para-build-download-icns","type":"VIDEO","title":"Ajustes para build","lessonJourneyId":"42fa7a82-1579-49d0-b259-ad3c69ac2e15","description":null,"content":null,"duration":767,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":false,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"1d4878f7-958b-4c2c-87ae-bcf73dd7047e","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/build-e-distribuicao/aula/ajustes-para-build-download-icns","files":[{"name":"Link","url":"https://storage.googleapis.com/golden-wind/ignite/curso-electron-assets/icon.icns","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","group_slug":"build-e-distribuicao","group_title":"Build e distribuição","lesson_id":"28f84da2-f4e9-4465-a78a-6f7d28795ac2","lesson_slug":"ajustes-para-build-download-icns","lesson_title":"Ajustes para build"},"lessonGroup":{"id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","slug":"build-e-distribuicao","title":"Build e distribuição"}},{"id":"7f6a32c2-b0ca-486f-80b2-32b307f7da59","slug":"fluxo-de-ci-multi-plataforma-download-workflow-yml","type":"VIDEO","title":"Fluxo de CI multi-plataforma","lessonJourneyId":"90f69aba-5988-4d4e-8fdb-f1db66702dc3","description":"Nesta aula, configure o CI multi-plataforma (Windows, Mac, Linux) para seu app Electron usando GitHub Actions. Aprenda a automatizar builds e releases via tags do GitHub e versionamento semântico, otimizando o processo de distribuição da sua aplicação.","content":null,"duration":983,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"educators":[{"id":"7ba12b22-ed9e-4f55-9be2-87bb810fab81","slug":"diego3g","name":"Diego Schell Fernandes","avatarUrl":"https://xesque.rocketseat.dev/users/avatar/profile-7ba12b22-ed9e-4f55-9be2-87bb810fab81-1715983024496.jpg"}],"tags":[],"video":{"jupiterVideoId":"b1e342e3-e210-4344-a215-b9cdc4d2c7de","platform":"nivo"},"route":"/jornada/apps-desktop-com-electron/sala/apps-desktop-com-electron-3/grupo/build-e-distribuicao/aula/fluxo-de-ci-multi-plataforma-download-workflow-yml","files":[{"name":"Link","url":"https://storage.googleapis.com/golden-wind/ignite/curso-electron-assets/release.yml","type":"LINK"}],"metadata":{"journey_id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","journey_title":"Apps desktop com Electron","type":"cluster","is_expert_content":false,"node_id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","node_title":"Apps desktop com Electron","node_slug":"apps-desktop-com-electron-3","roadmap_slug":null,"cluster_id":"cd49df80-7286-4ba3-93af-06cd43e159e6","cluster_title":"Apps desktop com Electron","cluster_slug":"apps-desktop-com-electron-3","cluster_thumbnail_url":null,"lesson_group_id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","group_slug":"build-e-distribuicao","group_title":"Build e distribuição","lesson_id":"39efbbb6-569a-40c8-8b13-daaf3060a410","lesson_slug":"fluxo-de-ci-multi-plataforma-download-workflow-yml","lesson_title":"Fluxo de CI multi-plataforma"},"lessonGroup":{"id":"e0fef98f-f594-47ef-9b6c-2f176655c76d","slug":"build-e-distribuicao","title":"Build e distribuição"}}]}],"journeyNode":{"id":"1a8ef505-07a7-4e28-81f4-f344c29176e1","slug":"apps-desktop-com-electron-3","title":"Electron","description":"Nesse módulo, você irá aprender sobre os fundamentos do Electron (setup inicial, typescript, ESLint, fontes, ícones, nome da aplicação, estrutura). Em seguida, partiremos para a construção do app (roteamento, layout, editor de texto, sidebar). Na sequência, você irá aprender sobre Storage e Comunicação (React Query, IPC Handlers, CRUD). Além disso, você irá aprender mais algumas features do Electron como tray menu, hotkeys e busca na aplicação. Por fim, realizaremos o build e distribuição da aplicação.","isFreemium":false,"isBonus":false,"releaseAt":null},"journey":{"id":"eab9e51e-a3fe-4839-a3c5-5a9fe2e8fcca","slug":"apps-desktop-com-electron","title":"Apps desktop com Electron","iconUrl":"https://xesque.rocketseat.dev/platform/1760969809953.svg","isFree":false,"freeUntil":null,"isEntryCourse":false,"isCertificable":true,"certificate":{},"contentType":"COURSE","hasAfterAccess":false,"shouldRedirectToInternalPage":true,"plutoOfferSlug":"apps-desktop-com-electron","parentJourney":null}},"dataUpdateCount":0,"dataUpdatedAt":1786293514701,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":["GetJourneyLessonByNodeSlug",{"nodeSlug":"apps-desktop-com-electron-3"}],"queryHash":"[\"GetJourneyLessonByNodeSlug\",{\"nodeSlug\":\"apps-desktop-com-electron-3\"}]"}]});Conceitos Essenciais | Automação com Make | Rocketseat