{"id":13383,"date":"2024-03-08T14:01:48","date_gmt":"2024-03-08T17:01:48","guid":{"rendered":"https:\/\/uds.com.br\/blog\/?p=13383"},"modified":"2024-12-28T03:54:28","modified_gmt":"2024-12-28T06:54:28","slug":"como-criar-app-para-apple-vision-pro","status":"publish","type":"post","link":"https:\/\/uds.com.br\/blog\/como-criar-app-para-apple-vision-pro\/","title":{"rendered":"Como criar um app para o Vision Pro: um tutorial para desenvolvedores"},"content":{"rendered":"\n<p>VisionOS \u00e9 a nova plataforma que permite criar aplicativos e jogos imersivos e interativos para o Apple Vision Pro, um dispositivo de realidade virtual que oferece experi\u00eancias de imers\u00e3o e computa\u00e7\u00e3o espacial. Com ela, voc\u00ea pode criar aplicativos que usam janelas, volumes e espa\u00e7os para exibir conte\u00fados 2D e 3D no pr\u00f3prio ambiente do usu\u00e1rio, ou ent\u00e3o mergulh\u00e1-lo completamente em um mundo novo totalmente customizado.<\/p>\n\n\n\n<p>Neste artigo, mostraremos como usar o <a href=\"https:\/\/developer.apple.com\/xcode\/swiftui\/\">SwiftUI<\/a> e o <a href=\"https:\/\/developer.apple.com\/xcode\/\">Xcode 15<\/a> para criar um aplicativo para o VisionOS e adicionar recursos como conte\u00fado 3D, RealityView e pop-ups modais. O SwiftUI \u00e9 uma \u00f3tima linguagem para criar um aplicativo para o VisionOS, pois oferece acesso aos recursos do mesmo e se integra ao RealityKit, o mecanismo de renderiza\u00e7\u00e3o 3D da Apple. J\u00e1 o Xcode 15 \u00e9 o ambiente de desenvolvimento que suporta o VisionOS e fornece ferramentas como Simulator, Reality Composer Pro e RealityView para ajud\u00e1-lo a projetar, testar e depurar seu aplicativo.<\/p>\n\n\n\n<p>Como exemplo, vamos desenvolver o <strong>Streamy<\/strong>: um aplicativo de streaming que permite que os usu\u00e1rios naveguem e assistam a filmes e s\u00e9ries de v\u00e1rios g\u00eaneros e categorias. O Streamy usa janelas e volumes para exibir conte\u00fado 2D e 3D e fornece uma experi\u00eancia imersiva com o RealityView e pop-ups modais.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Criando o projeto de aplicativo para o VisionOS<\/strong><\/h2>\n\n\n\n<p>O primeiro passo \u00e9 criar um novo projeto no Xcode. Para isso, execute as seguintes etapas:<\/p>\n\n\n\n<p><strong>1.<\/strong> Inicie o Xcode e escolha Arquivo &gt; Novo Projeto &gt;.<\/p>\n\n\n\n<p><strong>2.<\/strong> Navegue at\u00e9 a se\u00e7\u00e3o VisionOS do seletor de modelos e escolha o modelo Aplicativo.<\/p>\n\n\n\n<p><strong>3.<\/strong> Quando solicitado, especifique um nome para seu projeto (Streamy), juntamente com outras op\u00e7\u00f5es.<\/p>\n\n\n\n<p><strong>4. <\/strong>Ao criar um novo aplicativo VisionOS, voc\u00ea pode configurar os tipos de cena iniciais do aplicativo na caixa de di\u00e1logo de configura\u00e7\u00e3o.<\/p>\n\n\n\n<p><strong>\u2192 (a) <\/strong>Para exibir principalmente conte\u00fado 2D na cena inicial, escolha uma Janela como tipo de cena inicial.<br>\u2192 <strong>(b) <\/strong>Para conte\u00fado principalmente 3D, escolha um Volume. Voc\u00ea tamb\u00e9m pode adicionar uma cena imersiva para colocar seu conte\u00fado no ambiente da pessoa. Para o Streamy, escolheremos uma Janela como nosso tipo de cena inicial e adicionaremos uma cena imersiva mais tarde.<\/p>\n\n\n\n<p><strong>5. <\/strong>Inclua um arquivo de projeto do Reality Composer Pro quando quiser criar ativos ou cenas 3D para exibir a partir do seu aplicativo. Use este arquivo de projeto para criar conte\u00fado a partir de formas primitivas e ativos USDZ existentes. Voc\u00ea tamb\u00e9m pode us\u00e1-lo para criar e testar anima\u00e7\u00f5es e comportamentos personalizados do RealityKit para seu conte\u00fado. Para o Streamy, incluiremos um arquivo de projeto do Reality Composer Pro, pois o usaremos para criar modelos 3D para nosso aplicativo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Depois de criar seu projeto, voc\u00ea ver\u00e1 os seguintes arquivos no navegador:<\/strong><br><\/h4>\n\n\n\n<ul>\n<li><strong>StreamyApp.swift:<\/strong> este \u00e9 o principal ponto de entrada para seu aplicativo, onde voc\u00ea define sua estrutura e comportamento;<\/li>\n\n\n\n<li><strong>ContentView.swift:<\/strong> \u00e9 o modo de exibi\u00e7\u00e3o padr\u00e3o para seu aplicativo, onde voc\u00ea define a interface do usu\u00e1rio e o layout;<\/li>\n\n\n\n<li><strong>Streamy.rcproject:<\/strong> por fim, este \u00e9 o arquivo de projeto do Reality Composer Pro, onde voc\u00ea cria e edita ativos e cenas 3D.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/uds.com.br\/blog\/o-que-e-vision-pro\"><strong><em>\u2192 Leia tamb\u00e9m: Vision Pro: o que \u00e9 e como funciona o \u00f3culos da Apple?<\/em><\/strong><\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Aprimorando a interface do aplicativo<\/strong><\/h2>\n\n\n\n<p>Agora que criamos o projeto, podemos come\u00e7ar a aprimorar a interface do aplicativo. Usaremos o SwiftUI para criar visualiza\u00e7\u00f5es e controles e adicionar conte\u00fado 3D usando o RealityKit.&nbsp;<\/p>\n\n\n\n<p>SwiftUI \u00e9 uma estrutura declarativa que permite criar interfaces de usu\u00e1rio com sintaxe simples e expressiva. J\u00e1 o RealityKit \u00e9 um mecanismo de renderiza\u00e7\u00e3o 3D que possibilita apresentar conte\u00fado 3D, anima\u00e7\u00f5es e efeitos visuais.<\/p>\n\n\n\n<p><strong>Para melhorar a interface do aplicativo, faremos o seguinte:<\/strong><\/p>\n\n\n\n<ol>\n<li>Busque dados de uma API para preencher o aplicativo com informa\u00e7\u00f5es de filmes e s\u00e9ries.<\/li>\n\n\n\n<li>Crie um modo de exibi\u00e7\u00e3o personalizado para exibir cada item de filme ou s\u00e9rie em uma grade.<\/li>\n\n\n\n<li>Insira uma vista de navega\u00e7\u00e3o e uma vista de separador para organizar o conte\u00fado em categorias e g\u00eaneros.<\/li>\n\n\n\n<li>Adicione uma vista detalhada para mostrar mais informa\u00e7\u00f5es sobre um filme ou s\u00e9rie selecionado e forne\u00e7a um bot\u00e3o para a ver no RealityView.<\/li>\n\n\n\n<li>Insira um modelo 3D de uma sala de cinema ao projeto Reality Composer Pro e use-o para criar uma cena para a experi\u00eancia RealityView.<\/li>\n\n\n\n<li>Adicione um pop-up modal para solicitar que o usu\u00e1rio fa\u00e7a login antes de assistir a um filme ou s\u00e9rie.<\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Explicando: Como buscar dados de uma API<\/strong><\/h2>\n\n\n\n<p>Para preencher nosso aplicativo com informa\u00e7\u00f5es de filmes e s\u00e9ries, usaremos uma API que fornece dados sobre m\u00eddias populares e tend\u00eancias: a The Movie Database API. Ela \u00e9 um servi\u00e7o gratuito e de c\u00f3digo aberto que oferece uma variedade de endpoints para diferentes tipos de dados. Para usar essa API, voc\u00ea precisar\u00e1 se registrar e obter uma chave de API.<\/p>\n\n\n\n<p>Para buscar dados da API, usaremos a classe URLSession, que fornece uma maneira f\u00e1cil de executar solicita\u00e7\u00f5es de rede e lidar com as respostas. Tamb\u00e9m usaremos o protocolo Codable, que permite codificar e decodificar dados entre tipos Swift e formato JSON.&nbsp;<\/p>\n\n\n\n<p>Criaremos uma estrutura chamada <em>Movie<\/em>, que est\u00e1 em conformidade com o protocolo Codable e representa um item de filme ou s\u00e9rie. Tamb\u00e9m criaremos uma classe chamada <em>MovieFetcher<\/em>, que \u00e9 respons\u00e1vel por buscar dados da API e armazen\u00e1-los na matriz de objetos <em>Movie<\/em>.<\/p>\n\n\n\n<p>\u2192 <strong>Para criar a estrutura <em>Movie<\/em><\/strong>, adicione o seguinte c\u00f3digo a um novo arquivo chamado Movie.swift:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"449\" height=\"293\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2024\/03\/Imagem-1-2.png\" alt=\"\" class=\"wp-image-13388\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>\u2192 <strong>J\u00e1 para criar a classe MovieFetcher<\/strong>, adicione o seguinte c\u00f3digo a um novo arquivo chamado MovieFetcher.swift:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"820\" height=\"1396\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2024\/03\/Imagem-2.png\" alt=\"\" class=\"wp-image-13386\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>\u00daltimos ajustes<\/strong><\/h2>\n\n\n\n<p>Agora que criamos as classes Movie e MovieFetcher, podemos us\u00e1-las em nosso ContentView para exibir os filmes e s\u00e9ries no aplicativo. Para fazer isso, criaremos uma inst\u00e2ncia de MovieFetcher como uma propriedade @StateObject e usaremos um loop ForEach para iterar sobre a matriz de filmes e criar uma exibi\u00e7\u00e3o personalizada para cada item. Tamb\u00e9m adicionaremos uma exibi\u00e7\u00e3o de navega\u00e7\u00e3o e uma exibi\u00e7\u00e3o de guia para organizar o conte\u00fado do Streamy em categorias e g\u00eaneros.<\/p>\n\n\n\n<p>\u2192 <strong>Para usar o MovieFetcher e criar os modos de exibi\u00e7\u00e3o personalizados<\/strong>, modifique o arquivo ContentView.swift da seguinte maneira:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"850\" height=\"1363\" src=\"https:\/\/uds.com.br\/blog\/wp-content\/uploads\/2024\/03\/Imagem-3.png\" alt=\"\" class=\"wp-image-13387\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Uma oportunidade de neg\u00f3cio e inova\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n<p>Neste artigo, aprendemos a criar um aplicativo de <a href=\"https:\/\/uds.com.br\/blog\/desenvolvimendo-software-streaming-tendencias\/\">streaming<\/a> para o VisionOS usando SwiftUI e Xcode 15. Vimos como buscar dados de uma API, criar visualiza\u00e7\u00f5es personalizadas, adicionar visualiza\u00e7\u00f5es de navega\u00e7\u00e3o e guias, exibir conte\u00fado 3D, usar o RealityView e criar pop-ups modais. Tamb\u00e9m exploramos os recursos e benef\u00edcios do VisionOS, como janelas, volumes, espa\u00e7os e imers\u00e3o.<\/p>\n\n\n\n<p>Criar aplicativos para o VisionOS \u00e9 uma \u00f3tima maneira de criar experi\u00eancias envolventes e interativas para seus clientes. Tecnologias como realidade aumentada, realidade virtual, realidade mista e hologramas est\u00e3o avan\u00e7ando rapidamente e abrindo novas possibilidades de neg\u00f3cios para empresas dos mais diversos setores. N\u00e3o \u00e9 \u00e0 toa que a Disney j\u00e1 adaptou o seu streaming para o Apple Vision Pro, disponibilizando mais de 40 filmes em 3D.<\/p>\n\n\n\n<p>De acordo com o relat\u00f3rio da <a href=\"https:\/\/www.grandviewresearch.com\/industry-analysis\/immersive-technology-market-report\">Grand View Research<\/a>, o tamanho do mercado global de tecnologia imersiva foi avaliado em<strong> US $ 22,5 bilh\u00f5es em 2022<\/strong> e deve atingir cerca de <strong>US $ 167,75 bilh\u00f5es at\u00e9 2032<\/strong>, crescendo a uma taxa composta anual (CAGR) de 22,3%. O mercado \u00e9 impulsionado pela populariza\u00e7\u00e3o dos dispositivos de realidade aumentada e realidade virtual, a crescente ado\u00e7\u00e3o dessas tecnologias em diversos setores, os investimentos em tecnologia imersiva e o surgimento do Metaverso e da Web 3.0.<\/p>\n\n\n\n<p>Alguns dos setores que est\u00e3o investindo em tecnologias imersivas s\u00e3o sa\u00fade, educa\u00e7\u00e3o, varejo, manufatura, m\u00eddia, entretenimento, jogos e seguran\u00e7a p\u00fablica. Eles as utilizam para melhorar a colabora\u00e7\u00e3o entre as pessoas, alcan\u00e7ar novos clientes, treinar funcion\u00e1rios, aumentar a produtividade e ajudar na continuidade dos neg\u00f3cios, entre outros.<\/p>\n\n\n\n<p><strong>Ficou com d\u00favidas? Entre em contato pelo formul\u00e1rio abaixo.<\/strong><\/p>\n\n\n\n<div role=\"main\" id=\"blog-dev-app-formulario-1ea8d72ab0dfd3ed5a53\"><\/div><script type=\"text\/javascript\" src=\"https:\/\/d335luupugsy2.cloudfront.net\/js\/rdstation-forms\/stable\/rdstation-forms.min.js\"><\/script><script type=\"text\/javascript\"> new RDStationForms('blog-dev-app-formulario-1ea8d72ab0dfd3ed5a53', 'UA-92829983-1').createForm();<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Desenvolver apps para o Apple Vision Pro exige conhecimento em tecnologias como visionOS e SwiftUI. A UDS Tecnologia ajuda empresas a criar aplicativos imersivos e otimizados para a realidade aumentada, entregando experi\u00eancias inovadoras e alinhadas \u00e0s exig\u00eancias da Apple para essa plataforma de ponta.<\/p>\n","protected":false},"author":34,"featured_media":13389,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[384,986],"tags":[],"yst_prominent_words":[],"_links":{"self":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts\/13383"}],"collection":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/comments?post=13383"}],"version-history":[{"count":0,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts\/13383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/media\/13389"}],"wp:attachment":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/media?parent=13383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/categories?post=13383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/tags?post=13383"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=13383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}