نقل تطبيق Androidify إلى الواقع الممتد باستخدام حزمة تطوير البرامج (SDK) Jetpack XR

سماعة الرأس 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 DevRel، مهمة أخذ التصاميم الحالية لتطبيق Androidify ووضع تصميم جديد للواقع الممتد. تفضّلي، إيفي.

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

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

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

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

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

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

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

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

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

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

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

لمزيد من المعلومات عن أنماط تصميم واجهة مستخدم الواقع الممتد، يمكنك الاطّلاع على مقالة التصميم لنظام Android XR على Android Developers.

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

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

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

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

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

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

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

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

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

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

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

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

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

@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 القابلة للإنشاء لإنشاء تنسيق يناسب مساحة العرض المقترَحة، وأعدنا استخدام المكوّنات من التنسيق "متوسط" مرة أخرى.

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

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

النشر على "متجر 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 وجرِّب تطبيقك.