إليك سماعة الرأس Samsung Galaxy XR التي تعمل بنظام التشغيل Android XR. تشكّل مشاركة المدونة هذه جزءًا من أسبوع Android XR Spotlight، حيث نقدّم موارد، مثل مشاركات المدونة والفيديوهات ونماذج الرموز البرمجية وغيرها، وكلّها مصمّمة لمساعدتك في التعلّم والإنشاء وإعداد تطبيقاتك لنظام التشغيل Android XR.

مع إطلاق Samsung Galaxy XR، أصبح أول جهاز يعمل بنظام Android XR متاحًا رسميًا. يمكن للمستخدمين الآن الاستمتاع بالعديد من تطبيقاتهم المفضّلة من "متجر Play" في بُعد جديد تمامًا: البُعد الثالث.

أمّا البُعد الثالث، فهو واسع ويتضمّن مساحة كبيرة لتطبيقاتك أيضًا. يمكنك البدء اليوم باستخدام أي أدوات تناسب تطبيقك. على سبيل المثال، يمكنك استخدام حزمة تطوير البرامج (SDK) لمنصة Jetpack XR لإنشاء تجارب غامرة في الواقع الممتد باستخدام أدوات تطوير Android الحديثة، مثل Kotlin وCompose.

في مشاركة المدونة هذه، سنخبرك عن رحلتنا في نقل سحر تطبيق Androidify المحبوب إلى تكنولوجيا الواقع الممتد، وسنتناول أساسيات ما يلزم لنقل تطبيقاتك إلى تكنولوجيا الواقع الممتد أيضًا.

جولة في تطبيق Androidify

‫Androidify هو تطبيق مفتوح المصدر يتيح لك إنشاء روبوتات Android باستخدام بعض أحدث التقنيات، مثل Gemini وCameraX وNavigation 3، وبالطبع Jetpack Compose. تم تصميم تطبيق Androidify في البداية ليكون متوافقًا مع الهواتف والأجهزة القابلة للطي والأجهزة اللوحية من خلال إنشاء تنسيقات متجاوبة.

تطبيق Androidify يبدو رائعًا على مختلف أشكال الأجهزة

من الركائز الأساسية للتنسيقات التكيّفية هي العناصر القابلة لإعادة الاستخدام. تساعدك Jetpack Compose في إنشاء مكوّنات صغيرة لواجهة المستخدم يمكن ترتيبها بطرق مختلفة لإنشاء تجارب مستخدم سهلة الاستخدام، بغض النظر عن نوع الجهاز الذي يستخدمه المستخدم. في الواقع، يتوافق تطبيق Androidify مع Android XR بدون إجراء أي تعديلات عليه.

يتكيّف تطبيق Androidify مع الواقع الممتد باستخدام تصميمه المتجاوب مع مختلف الأجهزة على الشاشات الكبيرة بدون استخدام رمز

يمكن تنفيذ مهام متعددة في التطبيقات التي لا تتضمّن معالجة خاصة لنظام Android XR في نافذة ذات حجم مناسب، وستعمل هذه التطبيقات بشكل مشابه لما يحدث على شاشة كبيرة. لهذا السبب، تتوفّر جميع ميزات Androidify على Android XR بدون أي جهد إضافي. ولم نرد التوقف عند هذا الحد، لذا قررنا بذل جهد إضافي وإنشاء تطبيق متوافق مع الواقع الممتد لتقديم تجربة ممتعة لمستخدمي هذه التقنية.

تحديد الاتجاهات في تجارب الواقع الممتد

لنستعرض المفاهيم الأساسية الرئيسية لنظام Android XR، بدءًا من الوضعَين اللذين يمكن تشغيل التطبيقات فيهما: "المساحة المشتركة" و"المساحة الكاملة".

في المساحة المشتركة، يمكن تشغيل تطبيقات متعددة جنبًا إلى جنب ليتمكّن المستخدمون من تنفيذ مهام متعددة في نوافذ مختلفة. بهذا المعنى، يشبه إلى حد كبير العرض في نافذة على جهاز Android ذي الشاشة الكبيرة، ولكن في مساحة افتراضية.

في المساحة الكاملة، لا يحتوي التطبيق على حدود للمساحة ويمكنه الاستفادة من جميع الميزات المكانية في Android XR، مثل واجهة المستخدم المكانية والتحكّم في البيئة الافتراضية.

على الرغم من أنّ تشغيل تطبيقك في وضع "المساحة الكاملة" فقط قد يبدو خيارًا مغريًا، قد يرغب المستخدمون في تنفيذ مهام متعدّدة باستخدام تطبيقك، لذا فإنّ توفير كلا الوضعين يعزّز تجربة المستخدم بشكل أفضل.

تصميم تطبيقات تتوافق مع أبعاد Androidify الجديدة

يبدأ التطبيق الرائع بتصميم ممتاز. تولّت "آيفي نايت"، وهي من كبار المدافعين عن التصميم في فريق علاقات المطوّرين في Android، مهمة تعديل التصاميم الحالية لتطبيق Androidify وتقديم تصميم جديد لتجربة الواقع الممتد. تفضّلي، "آيفي".

تطلّب تصميم تجارب الواقع الممتد اتّباع نهج فريد، ولكنّه كان يتشارك في الكثير من الجوانب مع تصميم تطبيقات الأجهزة الجوّالة. بدأنا بالتفكير في الاحتواء: كيفية تنظيم عناصر واجهة المستخدم وتجميعها في مساحة فرعية، إما من خلال إظهار الحدود بوضوح أو من خلال الإشارة إليها بمهارة. تعلّمنا أيضًا كيفية استخدام جميع الأحجام المختلفة لعناصر واجهة المستخدم المكانية، والتي من المفترض أن يتم تعديلها ونقلها استجابةً للمستخدم. كما فعلنا مع Androidify، استخدِم التصاميم التكيّفية، لتتمكّن من تقسيم تصاميمك إلى أجزاء لواجهة المستخدم المكانية.

بدء التصميم باستخدام المساحة المشتركة

لحسن الحظ، يتيح لك Android XR بدء استخدام تطبيقك كما هو اليوم في "المساحة المشتركة"، لذا يمكننا الانتقال إلى تصاميم الواقع الممتد الموسّع من خلال إضافة شريط أدوات نافذة وزر الانتقال إلى "المساحة الكاملة".

أخذنا في الاعتبار أيضًا ميزات الأجهزة المحتملة وكيفية تفاعل المستخدم معها. تتكيّف التصاميم المتوافقة مع الأجهزة الجوّالة في Androidify مع أوضاع مختلفة وأحجام فئات وعدد الكاميرات لتوفير المزيد من خيارات الصور. وبناءً على هذا النموذج، كان علينا تعديل تصميم الكاميرا ليناسب أجهزة سماعات الرأس أيضًا. كان علينا أيضًا إجراء تعديلات على النص ليعمل مع مراعاة مدى قرب واجهة المستخدم من المستخدم.

التصميم للتحوّل الأكبر إلى "المساحة الكاملة"

كانت المساحة الكاملة أكبر تغيير، ولكنّها منحتنا أكبر مساحة إبداعية لتكييف تصميمنا. 

يستخدم تطبيق Androidify الاحتواء المرئي، أو اللوحات، لتجميع الميزات مع خلفية ومخطط تفصيلي، مثل لوحة "التقاط صورة أو اختيارها". استخدمنا أيضًا مكوّنات، مثل شريط التطبيق العلوي، لإنشاء احتواء طبيعي من خلال تأطير اللوحات الأخرى. أخيرًا، يتم اقتراح الاحتواء الجوهري من خلال قرب بعض العناصر من غيرها، مثل الزر السفلي "بدء التحويل"، الذي يقع بالقرب من اللوحة "اختيار لون الروبوت".

اللوحات المكانية مصمّمة لتسهيل الفصل. لتحديد كيفية تعديل تصاميم الأجهزة الجوّالة لتناسب اللوحات المكانية، جرِّب إزالة الأسطح بدءًا من السطح الأبعد ثم الانتقال إلى الأمام. يمكنك الاطّلاع على عدد الخلفيات التي يمكنك إزالتها والعناصر التي ستبقى. بعد أن نفّذنا هذا التمرين على Androidify، كان الشكل المتبقي هو خط Android الأخضر الكبير. لم يكن الشكل المتعرج مجرد لحظة للعلامة التجارية وخلفية، بل كان أيضًا نقطة ارتكاز للمحتوى في المساحة الثلاثية الأبعاد.

وقد سهّل إنشاء هذا العنصر الأساسي تخيّل كيفية تحرّك العناصر من حوله، وكيف يمكننا استخدام التقارب لتقسيم بقية تجربة المستخدم وتفسيرها.

نصائح أخرى بشأن التصميم لمساعدة تطبيقك في الاستفادة من الميزات المكانية

• عدم حصر العناصر في حاويات: قسِّم العناصر إلى أجزاء واعرضها في مساحة حقيقية (مكانية). حان الوقت لمنح عناصر واجهة المستخدم مساحة كافية.
• إزالة الأسطح: يمكنك إخفاء الخلفية والاطّلاع على تأثير ذلك في تصاميمك.
• التحفيز باستخدام الحركة: كيف تستخدم عمليات الانتقال في تطبيقك؟ استخدِم هذا الحرف لتتخيّل تطبيقك وهو يقتحم عالم الواقع الافتراضي.
• اختيار نقطة ارتساء: لا تفقد المستخدمين في المساحة. أن تتضمّن عنصرًا يساعد في جمع واجهة المستخدم أو توجيهها

لمزيد من المعلومات حول أنماط تصميم واجهة مستخدم XR، يمكنك الاطّلاع على التصميم لنظام التشغيل Android XR على "مطوّرو تطبيقات Android".

أساسيات واجهة المستخدم المكانية

بعد أن تناولنا تجربة "آيفي" في تغيير طريقة تفكيرها أثناء تصميم تطبيق Androidify للواقع الممتد، سنتحدث الآن عن تطوير واجهة مستخدم مكانية. يجب أن يبدو تطوير واجهة مستخدم مكانية باستخدام Jetpack XR SDK مألوفًا إذا كنت معتادًا على استخدام أدوات ومكتبات Android الحديثة. ستجد مفاهيم مألوفة لديك، مثل إنشاء التصاميم باستخدام Compose. في الواقع، تشبه التنسيقات المكانية إلى حد كبير التنسيقات الثنائية الأبعاد التي تستخدم الصفوف والأعمدة والفواصل:

يتم ترتيب هذه العناصر في SpatialRows و SpatialColumns

العناصر المكانية المعروضة هنا هي عناصر SpatialPanel قابلة للإنشاء، وتتيح لك عرض محتوى ثنائي الأبعاد، مثل النصوص والأزرار ومقاطع الفيديو.

Subspace {
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        Text("I'm a panel!")
    }
}

‫SpatialPanel هو عنصر مركّب في مساحة فرعية. يجب أن تكون العناصر القابلة للإنشاء في مساحة فرعية مضمّنة في مساحة فرعية، ويتم تعديلها بواسطة كائنات SubspaceModifier. يمكن وضع المساحات الفرعية في أي مكان ضمن التدرّج الهرمي لواجهة المستخدم في تطبيقك، ولا يمكن أن تحتوي إلا على عناصر Subspace القابلة للإنشاء. تشبه عناصر SubspaceModifier أيضًا عناصر Modifier، فهي تتحكّم في مَعلمات مثل الحجم والموضع.

يمكن إرفاق Orbiter بـ SpatialPanel ونقله مع المحتوى الذي تم إرفاقه به. وغالبًا ما تُستخدَم لتوفير عناصر تحكّم سياقية بشأن المحتوى الذي تكون مرتبطة به، ما يمنح المحتوى التركيز الأساسي. ويمكن وضعها على أي من الجوانب الأربعة للمحتوى، على مسافة قابلة للضبط.

هناك العديد من عناصر واجهة المستخدم المكانية، ولكن هذه هي العناصر الرئيسية التي استخدمناها لإنشاء تخطيطات مكانية لتطبيق Androidify.

بدء تطوير تطبيقات الواقع الممتد

لنبدأ بإعداد المشروع. أضفنا تبعية Jetpack XR Compose التي يمكنك العثور عليها في صفحة تبعيات Jetpack XR.

أضفنا رمزًا لزر ينقل المستخدم إلى "المساحة الكاملة"، بدءًا من رصد إمكانية إجراء ذلك:

@Composable
fun couldRequestFullSpace(): Boolean =
   LocalSpatialConfiguration.current.hasXrSpatialFeature && 
   !LocalSpatialCapabilities.current.isSpatialUiEnabled
}

بعد ذلك، أنشأنا مكوّن زر جديدًا يستخدم رمز توسيع المحتوى في التصاميم الحالية، وأضفنا إليه سلوك onClick:

@Composable

fun RequestFullSpaceIconButton() {
   if (!couldRequestFullSpace()) return
   val session = LocalSession.current ?: return

   IconButton(
       onClick = {
           session.scene.requestFullSpaceMode()
       },
   ) {
       Icon(
           imageVector =  
               vectorResource(R.drawable.expand_content_24px),
           contentDescription = 
               stringResource("To Full Space"),
       )
   }
}

الآن، يؤدي النقر على هذا الزر إلى عرض التنسيق "متوسط" في "مساحة كاملة". يمكننا التحقّق من إمكانات العرض المكاني وتحديد ما إذا كان يمكن عرض واجهة المستخدم المكانية. وفي هذه الحالة، سنعرض التنسيق المكاني الجديد بدلاً من ذلك:

@Composable

fun HomeScreenContents(layoutType: HomeScreenLayoutType) {
   val layoutType = when {
      LocalSpatialCapabilities.current.isSpatialUiEnabled -> 
          HomeScreenLayoutType.Spatial
      isAtLeastMedium() -> HomeScreenLayoutType.Medium
      else -> HomeScreenLayoutType.Compact
   }

   when (layoutType) {
      HomeScreenLayoutType.Compact ->
          HomeScreenCompactPager(...)

      HomeScreenLayoutType.Medium ->
          HomeScreenMediumContents(...)

      HomeScreenLayoutType.Spatial ->
          HomeScreenContentsSpatial(...)
   }
}

تنفيذ التصميم الخاص بالشاشة الرئيسية

لنرجع إلى التصميم المكاني للشاشة الرئيسية في "المساحة الكاملة" لفهم طريقة تنفيذه.

لقد حدّدنا عنصرَين من عناصر SpatialPanel هنا: لوحة واحدة تتضمّن بطاقة الفيديو على اليسار، ولوحة أخرى تحتوي على واجهة المستخدم الرئيسية. أخيرًا، هناك Orbiter مرفق بالجزء العلوي. لنبدأ بلوحة مشغّل الفيديو:

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
      SpatialPanel(SubspaceModifier
                   .fillMaxWidth(0.2f)
                   .fillMaxHeight(0.8f)
                   .aspectRatio(0.77f)
                   .rotate(0f, 0f, 5f),
      ) {
          VideoPlayer(videoLink)
      }
   }
}

لقد أعدنا استخدام مكوّن VideoPlayer ثنائي الأبعاد من التصاميم العادية في SpatialPanel بدون إجراء أي تغييرات إضافية. في ما يلي الشكل الذي يظهر به بشكل مستقل:

اتّبعت لوحة المحتوى الرئيسية القصة نفسها: أعدنا استخدام محتوى اللوحة المتوسطة في SpatialPanel.

SpatialPanel(SubspaceModifier.fillMaxSize(),
             resizePolicy = ResizePolicy(
                 shouldMaintainAspectRatio = true
             ),
             dragPolicy = MovePolicy()
) {
    Box {
        FillBackground(R.drawable.squiggle_full)
        HomeScreenSpatialMainContent(...)
    }
}

لقد منحنا هذه اللوحة ResizePolicy، ما يمنح اللوحة بعض المقابض بالقرب من الحواف التي تتيح للمستخدم تغيير حجم اللوحة. يحتوي أيضًا على MovePolicy، ما يتيح للمستخدم سحبه في أي مكان.

يؤدي وضعها في مساحة فرعية واحدة إلى جعلها مستقلة عن بعضها البعض، لذا جعلنا لوحة VideoPlayer تابعة للوحة المحتوى الرئيسية. يؤدي ذلك إلى تحرّك لوحة VideoPlayer عند سحب لوحة المحتوى الرئيسية من خلال علاقة أصل-فرع.

@Composable
fun HomeScreenContentsSpatial(...) {
   Subspace {
       SpatialPanel(SubspaceModifier..., resizePolicy, dragPolicy) {
           Box {
               FillBackground(R.drawable.squiggle_full)
               HomeScreenSpatialMainContent(...)
           }
           Subspace {
              SpatialPanel(SubspaceModifier...) {
                  VideoPlayer(videoLink)
              }
           }
       }
   }
}

هذه هي الطريقة التي أنشأنا بها الشاشة الأولى.

الانتقال إلى الشاشات الأخرى

سأستعرض أيضًا بعض الشاشات الأخرى بإيجاز، مع تسليط الضوء على الاعتبارات المحدّدة التي تم أخذها في الحسبان لكل شاشة.

استخدمنا هنا العناصر القابلة للإنشاء SpatialRow وSpatialColumn لإنشاء تنسيق يتناسب مع مساحة العرض المقترَحة، مع إعادة استخدام المكوّنات من التنسيق المتوسط مرة أخرى.

شاشة النتائج في "المساحة الكاملة": روبوت تم إنشاؤه باستخدام طلب: قبعة بيسبول حمراء ونظارات شمسية طراز "طيار" وقميص أزرق فاتح وشورت مربّعات باللونين الأحمر والأبيض ونعال أخضر، ويمسك بمضرب تنس.

تعرض شاشة النتائج الاقتباسات المجانية باستخدام تأثير التمويه، ما يسمح لها بالتلاشي بالقرب من حواف الشاشة. يستخدم التطبيق أيضًا انتقالًا ثلاثي الأبعاد عند عرض الإدخال الذي تم استخدامه، ما يؤدي إلى قلب الصورة في الفضاء.

النشر على "متجر Google Play"

بعد أن أصبح التطبيق جاهزًا للواقع الممتد مع التصاميم المكانية، واصلنا العمل لإصداره على "متجر Play". أجرينا تغييرًا نهائيًا ومهمًا على ملف AndroidManifest.xml الخاص بالتطبيق، وهو:

<!-- Androidify can use XR features if they're available; they're not required. -->
<uses-feature android:name="android.software.xr.api.spatial" 
              android:required="false" />

يتيح ذلك لـ "متجر Play" معرفة أنّ هذا التطبيق يتضمّن ميزات متوافقة مع الواقع الممتد، وعرض شارة تُعلم المستخدمين بأنّه تم تصميم التطبيق مع مراعاة تجربة الواقع الممتد:

عند تحميل الإصدار، لن تحتاج إلى اتّخاذ أي خطوات خاصة لإصداره على أجهزة XR، إذ يتم توزيع التطبيق نفسه كالمعتاد على المستخدمين في قناة الإصدار المحدود للأجهزة الجوّالة كما هو الحال مع المستخدمين على أجهزة XR. ومع ذلك، يمكنك اختيار إضافة لقطات شاشة خاصة بتجربة الواقع الممتد في تطبيقك، أو حتى تحميل معاينة غامرة لتطبيقك باستخدام مادة عرض فيديو مكاني. على أجهزة Android XR، يعرض "متجر Play" هذا المحتوى تلقائيًا كمعاينة ثلاثية الأبعاد غامرة، ما يتيح للمستخدمين تجربة عمق المحتوى وحجمه قبل تثبيت التطبيق.

ابدأ في إنشاء تجاربك الخاصة اليوم

يُعدّ تطبيق Androidify مثالاً رائعًا على كيفية تحويل تطبيق حالي ثنائي الأبعاد يستند إلى Jetpack Compose إلى تطبيق ثلاثي الأبعاد. وقد عرضنا اليوم العملية الكاملة لتطوير واجهة مستخدم ثلاثية الأبعاد لتطبيق Androidify، بدءًا من التصميم ووصولاً إلى الترميز والنشر. عدّلنا التصاميم الحالية لتتوافق مع نماذج العرض المكاني، واستخدمنا SpatialPanel وOrbiter القابلة للإنشاء لإنشاء تخطيطات مكانية تظهر عندما يدخل المستخدم إلى "المساحة الكاملة"، وأخيرًا، طرحنا الإصدار الجديد من التطبيق على "متجر Play".

نأمل أن تكون مشاركة المدوّنة هذه قد ساعدتك في فهم كيفية إتاحة تطبيقاتك على Android XR. في ما يلي بعض الروابط الإضافية التي يمكن أن تساعدك في هذا الصدد:

• يمكنك الاطّلاع على الرمز المصدري لتطبيق Androidify، وإنشاء روبوتك الخاص باستخدام تطبيق Androidify على Google Play.
• ابدأ بالاطّلاع على مستندات المطوّرين وتعرَّف على المزيد حول Jetpack Compose للواقع الممتد.
• نزِّل محاكي Android XR وجرِّب تطبيقك.