{"id":14318,"date":"2024-05-02T19:27:37","date_gmt":"2024-05-02T22:27:37","guid":{"rendered":"https:\/\/uds.com.br\/blog\/?p=14318"},"modified":"2025-02-07T17:16:34","modified_gmt":"2025-02-07T20:16:34","slug":"como-criar-aplicativos-visionos","status":"publish","type":"post","link":"https:\/\/uds.com.br\/blog\/como-criar-aplicativos-visionos\/","title":{"rendered":"Apple Vision Pro: como criar aplicativos para o VisionOS?"},"content":{"rendered":"\n<p>\u00c0 medida que o <a href=\"https:\/\/uds.com.br\/blog\/o-que-e-vision-pro\/\">Apple Vision Pro<\/a> ganha popularidade, desenvolvedores de todo o mundo ficam cada vez mais interessados em explorar e criar solu\u00e7\u00f5es inovadoras para o novo gadget. Seu sistema operacional, o <a href=\"https:\/\/developer.apple.com\/visionos\/\"><strong>VisionOS<\/strong><\/a>, abre um leque de oportunidades para aplica\u00e7\u00f5es que unem o digital ao f\u00edsico, o que permite experi\u00eancias que v\u00e3o desde realidades aumentadas at\u00e9 imers\u00f5es totais.<\/p>\n\n\n\n<p>Desenvolvido especificamente para o headset de realidade mista Vision Pro, o VisionOS \u00e9 integrado com outros produtos da Apple e permite a instala\u00e7\u00e3o de aplicativos diretamente da Apple Store. Projetado para funcionar independentemente de dispositivos como telas convencionais, mouses ou teclados, o sistema \u00e9 operado por meio de gestos com as m\u00e3os, movimentos dos olhos ou comandos de voz.<\/p>\n\n\n\n<p>Neste artigo, voc\u00ea descobre como dar os primeiros passos na cria\u00e7\u00e3o de apps para o VisionOS, al\u00e9m de descobrir mais sobre esse sistema operacional!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Revelando o canvas espacial infinito<\/h2>\n\n\n\n<p>Um mundo onde suas cria\u00e7\u00f5es digitais n\u00e3o est\u00e3o mais limitadas \u00e0s telas planas: esse \u00e9 o cora\u00e7\u00e3o do VisionOS. Com ele,&nbsp; \u00e9 poss\u00edvel manipular e explorar objetos digitais em um espa\u00e7o que se estende ao redor do usu\u00e1rio, quase como se fossem parte do mundo real. A funcionalidade dual do Apple Vision Pro, facilitada pelo VisionOS, n\u00e3o s\u00f3 enriquece a intera\u00e7\u00e3o do usu\u00e1rio com a tecnologia, mas tamb\u00e9m expande as possibilidades de cria\u00e7\u00e3o e inova\u00e7\u00e3o no espa\u00e7o digital.<\/p>\n\n\n\n<p>Por mesclar conte\u00fados digitais com espa\u00e7os f\u00edsicos, em um ambiente tridimensional, o sistema operacional permite que os aplicativos sejam exibidos em janelas flutuantes ao redor do usu\u00e1rio, criando uma experi\u00eancia de m\u00faltiplos monitores virtuais. Ao girar a cabe\u00e7a, o usu\u00e1rio pode visualizar diferentes aplicativos em execu\u00e7\u00e3o, e manter a visibilidade do ambiente, mesmo sem remover os \u00f3culos.<\/p>\n\n\n\n<p>Al\u00e9m disso, o VisionOS oferece integra\u00e7\u00e3o com apps nativos como Safari, Fotos, Notas, Facetime e Apple Maps, todos sincronizados com o <strong>ecossistema Apple<\/strong>. H\u00e1 ainda suporte para conectar o Magic Keyboard para uma digita\u00e7\u00e3o mais confort\u00e1vel e at\u00e9 para espelhar a tela do MacBook no <a href=\"https:\/\/www.apple.com\/apple-vision-pro\/\">Vision Pro<\/a>, o que expande as possibilidades de uso e intera\u00e7\u00e3o com os dispositivos da marca.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/G25YhbABa4J74K4GLwZV8YfW0EbQv7zK9aAu5mSKKFVODBJHc53pfQAyiF6hRfvqHfZyiZM63qYNv3lX3-QOxczlA37UDYPm8baPVqj3OzH2p0Vw4X5NUoUSU9RWqTdqeleSyTXtkTDLo6xec9lkigQ\" alt=\"\"\/><\/figure><\/div>\n\n\n<pre class=\"wp-block-verse has-text-align-center\">Reprodu\u00e7\u00e3o: <a href=\"https:\/\/medium.com\/@nayankhadase97?source=post_page-----8b6597059931--------------------------------\">Nayan Khadase<\/a>.<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Pontos importantes antes de come\u00e7ar&nbsp;<\/h2>\n\n\n\n<p>Para iniciar o <a href=\"https:\/\/uds.com.br\/desenvolvimento-de-aplicativos\/\">Desenvolvimento de Aplicativo<\/a>s para VisionOS, \u00e9 essencial compreender as experi\u00eancias que o sistema pode oferecer. Essas experi\u00eancias s\u00e3o alcan\u00e7\u00e1veis atrav\u00e9s de tr\u00eas componentes fundamentais: <strong>Janelas, Volumes e Espa\u00e7os<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/xN8zUdHXsZB_d9kF6BpApwR1kbbZ59LCj4IuHcn8JF96ZRcyDtoBoOuWs3xvClBRmyPk1pTwvAmDOECC5JuPjsj_kSVUjpdKkr0EpWq2Qg_0DzBgdKJZo5KNGXWpBWdA9hrwhzF7Skyq4I8TwrQrR6I\" alt=\"\"\/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">Reprodu\u00e7\u00e3o: <a href=\"https:\/\/medium.com\/@nayankhadase97?source=post_page-----8b6597059931--------------------------------\">Nayan Khadase<\/a>.<\/p>\n\n\n\n<p><strong>\u2192 Janelas (Windows):<\/strong> em aplicativos VisionOS, o usu\u00e1rio consegue criar m\u00faltiplas janelas. Essas janelas s\u00e3o criadas usando SwiftUI e podem incluir visualiza\u00e7\u00f5es e controles padr\u00e3o. Al\u00e9m disso, \u00e9 poss\u00edvel aprimorar a experi\u00eancia incorporando conte\u00fado 3D.<\/p>\n\n\n\n<p><strong>\u2192 Volumes:<\/strong> \u00e9 poss\u00edvel aprimorar o apelo visual do aplicativo com um volume 3D. Esses volumes s\u00e3o cenas SwiftUI que podem exibir conte\u00fado 3D atrav\u00e9s do RealityKit ou Unity, o que proporciona aos usu\u00e1rios experi\u00eancias que podem ser visualizadas de qualquer \u00e2ngulo no espa\u00e7o compartilhado (Shared Space) ou espa\u00e7o completo (Full Space) do gadget.<\/p>\n\n\n\n<p><strong>\u2192 Espa\u00e7os (Spaces): <\/strong>quando um aplicativo \u00e9 aberto, ele \u00e9 executado em espa\u00e7o compartilhado. Isso \u00e9 semelhante a ter v\u00e1rios aplicativos abertos em uma \u00e1rea de trabalho de um notebook. Voc\u00ea pode ajustar a posi\u00e7\u00e3o das janelas e volumes no espa\u00e7o compartilhado conforme achar melhor. Para uma experi\u00eancia mais imersiva, um aplicativo tamb\u00e9m pode abrir em espa\u00e7o completo, que exibir\u00e1 conte\u00fado apenas daquele aplicativo espec\u00edfico. Em um espa\u00e7o completo, o aplicativo pode usar janelas e volumes, criar conte\u00fado 3D sem limites, abrir um portal para outro mundo ou imergi-lo completamente em um ambiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frameworks e ferramentas necess\u00e1rios<\/h2>\n\n\n\n<p>Existem os seguintes frameworks e ferramentas que podem ser usados para criar experi\u00eancias \u00fanicas para o usu\u00e1rio: SwiftUI, RealityKit, ARKit e Reality Composer Pro.<\/p>\n\n\n\n<ul>\n<li><strong>SwiftUI:<\/strong> utilizado para criar visualiza\u00e7\u00f5es como janelas, volumes e experi\u00eancias especiais;<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>RealityKit:<\/strong> usado para apresentar conte\u00fado 3D, anima\u00e7\u00f5es e efeitos visuais;<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>ARKit:<\/strong> respons\u00e1vel por escanear completamente o ambiente ao redor de uma pessoa, oferecendo aos seus aplicativos novas maneiras de interagir com o espa\u00e7o real;<\/li>\n<\/ul>\n\n\n\n<ul>\n<li><strong>Reality Composer Pro: <\/strong>uma ferramenta projetada para simplificar a cria\u00e7\u00e3o, pr\u00e9-visualiza\u00e7\u00e3o e otimiza\u00e7\u00e3o de conte\u00fado 3D para aplicativos visionOS.<\/li>\n<\/ul>\n\n\n\n<p>Depois que voc\u00ea tiver configurado essas ferramentas, \u00e9 poss\u00edvel come\u00e7ar o desenvolvimento do aplicativo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como criar Janelas<\/h2>\n\n\n\n<p>Para mostrar dados na Janela, precisamos criar uma visualiza\u00e7\u00e3o SwiftUI. Confira o c\u00f3digo abaixo e veja como configurar essa op\u00e7\u00e3o.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/0-vqIcb6aWRw-u0U79tP4OjxWySFoSliMBufKPkWzdQvVCFamihDzb04a8N-x07wf6YDfrd3JHfZ93m_MHdMeFj3D5a2_elGwxz9gJ0yCgxqHQFBNG_84HiuCHFuMBco5ZDC03z4ClGaDHxzlRLV390\" alt=\"\" style=\"width:684px;height:auto\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Confira a visualiza\u00e7\u00e3o dessa:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/NBcyp4iUbJSustPathhXAM7k1N6SOhq6s6sk6UblVAvdff4eW4IZjy8C7qFLb_NZ5kzoelVOHuPDjxNTS1kvVPFV11_Elz7sTak9BO_nCgpejeSgzdzUlbA5ozKe_V-FbMXBqibXQZFHR3mJZGIJTcE\" alt=\"\"\/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">Reprodu\u00e7\u00e3o: <a href=\"https:\/\/medium.com\/@nayankhadase97?source=post_page-----8b6597059931--------------------------------\">Nayan Khadase<\/a>. Imagem 2: Sa\u00edda do c\u00f3digo de exemplo acima.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Como criar&nbsp; Volumes<\/h2>\n\n\n\n<p>Para criar um Volume, precisamos usar o framework RealityKit e a visualiza\u00e7\u00e3o RealityView. Precisamos adicionar um Package da ferramenta Reality Composer Pro, onde projetamos a cena. <\/p>\n\n\n\n<p>Confira um exemplo de como fazer isso no VisionOS:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/YY1VrRv_qx3hw3M6DTQb-ZIWBj9tqOn0GntfIYv4G2D_VKKK7rUVe5inXr-7Gx4cA8TdUbDKbqm4zNFllRaKV6wvXfibCDjZxRXhsTsP03VMmD1mDII_7sF_68j1W9glD8g2C4MQkH8eUpUgTbNowEg\" alt=\"\" style=\"width:720px;height:auto\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/snDLZKVrOFhNab71678y8ZynU4rS3In3wuiiGvgi1GOmonmjaATMT4sva0-juKCZaqvd4DJNPVLayJk_ETrrPc5YX0eATQlFnCsc2Nyi07ApTgQqg46y5XhMJr1gxF6HMPeZyD4H1H_hLm4WNeOfV-M\" alt=\"\"\/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\">Reprodu\u00e7\u00e3o: <a href=\"https:\/\/medium.com\/@nayankhadase97?source=post_page-----8b6597059931--------------------------------\">Nayan Khadase<\/a>. Imagem 3: Sa\u00edda do c\u00f3digo de exemplo acima.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Como adicionar modelos USDZ \u00e0 cena<\/h2>\n\n\n\n<p>Para incorporar modelos 3D de um arquivo USDZ ou Reality em seu aplicativo SwiftUI, use o Model3D. Voc\u00ea pode ajustar o tamanho do modelo para se adequar \u00e0 interface do seu aplicativo usando m\u00e9todos no tipo ResolvedModel3D, al\u00e9m de modificadores de visualiza\u00e7\u00e3o padr\u00e3o.<\/p>\n\n\n\n<p>Ao usar o m\u00e9todo <strong>resizable(:)<\/strong>, voc\u00ea pode dimensionar o modelo para se ajustar \u00e0 visualiza\u00e7\u00e3o atual.<\/p>\n\n\n\n<p>O modificador de visualiza\u00e7\u00e3o <strong>aspectRatio(:contentMode:)<\/strong> mant\u00e9m a propor\u00e7\u00e3o original do modelo, em vez de dimensionar os eixos x, y e z independentemente para ajustar o rob\u00f4 ao quadro completo da visualiza\u00e7\u00e3o.<\/p>\n\n\n\n<p>O c\u00f3digo abaixo demonstra como incorporar um modelo USDZ no aplicativo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/03alVBK_YG1hZ1lg4_Ms7mSu7Eeeq7rpBPV0_oAHpFgk7Q6g2rNGrIm6YZjqPy4h5LNahh2VJKUcn6yiLz6g-l7cUtZ4OBCVaaqBW3eTtv8bjPBlMFU_vJg1bIXJUnCOBzi_NaEz_913IYWnXmmaODY\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Como usar WindowGroup<\/h2>\n\n\n\n<p>A cena mostra um grupo de Janelas que t\u00eam a mesma estrutura.<\/p>\n\n\n\n<p>\u2192 Para conter uma hierarquia de visualiza\u00e7\u00f5es apresentada pelo seu aplicativo, utilize um <strong>WindowGroup<\/strong>. A hierarquia declarada, que serve como o conte\u00fado para o grupo, atua como um modelo para cada janela gerada pelo aplicativo a partir desse grupo.<\/p>\n\n\n\n<p>O c\u00f3digo a seguir demonstra como criar v\u00e1rios WindowGroups.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/Zi8twvpoJ_qAC1DkxPbQX9wKUDmpNoFu9P8TZmE8EU3pEGZvftS_pM97OjgHGrUQyDGmCkdMh6PlqzV6f24J7GT2ffxO9rbXcsopr6SsrDgqH02Ib1tBU13F4d61Avh1Wi5mN8UB5xhybQW1mYVpk8g\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>O c\u00f3digo a seguir demonstra como chamar diferentes grupos de Janelas quando um bot\u00e3o \u00e9 clicado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/1UfLjV3VH7uytcc6T-sWDkS04NME2PoJkhCfZ0Ogh8qjivO3RxMriSItlVx5MBw16hOoOZnuGTe5e7B4OmdtSNnAyfJGMgM8kt4vjR5vdTB-gjPs7PvtCqbAA_DvU7qxnRhVBbVDBPp29eu6CaMIjjQ\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Como usar ImmersiveSpace<\/h2>\n\n\n\n<p>A cena exibe seu conte\u00fado sem quaisquer limites no Espa\u00e7o.&nbsp;<\/p>\n\n\n\n<p>\u2192 Use um <strong>ImmersiveSpace <\/strong>como um cont\u00eainer para uma hierarquia de visualiza\u00e7\u00f5es apresentada pelo seu aplicativo.<\/p>\n\n\n\n<p>O c\u00f3digo a seguir demonstra como criar um cont\u00eainer ImmersiveSpace para VisionOS:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/f780nRI_j7Bz_HUmk49WDaznXrK1ilqXvKimgzM1vVSYhhKI5iicFkcJkXG7n5yIbyWQ7Gw8ot395bP3hDnWcSZa7qu4WXV3fCfMgGuyFOfqTUi7uPlWxuhBxeORmqwFuXEew9SYYtiRrpCHzXFRLgU\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>O c\u00f3digo a seguir demonstra como abrir o ImmersiveSpace quando um bot\u00e3o \u00e9 clicado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/Sy8a1BX36AO1MtD2X9_j6ZoEA8dXXju6rv-C0OGEacaE8aF6XIXSQRDaiAypCU_H9mJVolNS5AlFP61R7f4ByzX4HqynU8shpEl4vT_zCwshVsJazzWuBkfr2KM5o2GsbUXp_k7jD0_w_cMj7YS1QLg\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Agora que voc\u00ea j\u00e1 entendeu sobre o papel de Janelas, Volumes e Espa\u00e7os no universo VisionOS, e j\u00e1 aprendeu a configur\u00e1-los de forma b\u00e1sica, que tal tentar construir o seu pr\u00f3prio aplicativo para o Apple Vision Pro?<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/uds.com.br\/blog\/como-criar-app-para-apple-vision-pro\/\">Confira o passo a passo aqui \u2192<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Criar aplicativos para visionOS \u00e9 essencial para explorar o universo da realidade aumentada e mista. A UDS Tecnologia oferece suporte especializado no desenvolvimento para essa plataforma, permitindo que empresas criem experi\u00eancias imersivas, inovadoras e alinhadas \u00e0s tend\u00eancias do mercado tecnol\u00f3gico.<\/p>\n","protected":false},"author":36,"featured_media":14745,"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\/14318"}],"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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/comments?post=14318"}],"version-history":[{"count":0,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/posts\/14318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/media\/14745"}],"wp:attachment":[{"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/media?parent=14318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/categories?post=14318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/tags?post=14318"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/uds.com.br\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=14318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}