كيفية إنشاء تطبيق ARKit في 5 دقائق باستخدام React Native

في WWDC 2017 ، أصدرت شركة Apple ARKit ، بعد Google و Facebook في الواقع المعزز. هذه خطوة كبيرة لأن iPhone في كل مكان تقريبًا سيصبح أول جهاز AR واسع الانتشار. سيكون للمطورين فرصة لاختبار منتجات AR الخاصة بهم على الجمهور. إنه لأمر مدهش أيضًا أن يتمكن أي مطور شخصي من استخدام ARKit لكتابة تطبيق AR الخاص به.

قامت Apple بتسهيل استخدام ARKit ، لكنها لا تزال تتطلب الكثير من الجهود لإعداده وتشغيله بشكل صحيح لأول عرض تجريبي ، خاصة لأولئك الذين ليسوا على دراية بالبرمجة ثلاثية الأبعاد. ما سوف نعرضه لك في هذا المقال ، بمساعدة React Native و react-arkit ، يمكنك تخطي الإعدادات غير التافهة وستتمكن من كتابة تطبيق AR الخاص بك في 5 دقائق فقط.

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

المتطلبات الأساسية

1. iOS 11 beta و Xcode 9 beta والأجهزة التي تحتوي على معالجات A9 +

لا تزال ARKit في مرحلة تجريبية ، لذا يجب أن يكون لديك حساب مطور من Apple وترقية جهاز iPhone / iPad إلى الإصدار التجريبي iOS 11. إذا لم تكن قد فعلت بعد ، فالرجاء التسجيل في برنامج Apple Beta Software واتبع هذا الإرشادات لترقية جهازك.

ملاحظة: تتطلب ARKit معالج A9 أو أحدث ، مما يعني أنك بحاجة إلى الحصول على iPhone 6s / 7 / SE أو iPad 2017 / Pro.

تحتاج أيضًا إلى تثبيت Xcode 9 beta لإنشاء تطبيق ARKit. يرجى تنزيله من هنا.

2. رد فعل الأصلي

قدم Facebook React Native كمكتبة مشتركة لتطوير تطبيقات iOS / Android باستخدام JavaScript. إذا كانت هذه هي المرة الأولى التي تستخدم فيها ، فيرجى الانتقال إلى Getting Started (بدء التشغيل) ومتابعة الجزء Building Projects with Native Code لتثبيت React Native وتشغيل العرض التوضيحي الأول. أنت تريد أيضًا معرفة كيفية تشغيل تطبيق React Native Apps On Devices لأنه لا يمكنك تشغيل ARKit على أجهزة المحاكاة. بعد هذه الدروس يجب ألا يأخذك أكثر من نصف ساعة.

قم بتشغيل أول تطبيق ARKit

الآن حان الوقت لكتابة أول تطبيق ARKit! انتقل إلى الإرشادات الموضحة أدناه ومعظمها يجب أن يكون بسيطًا.

  • قم بإنشاء مشروع React Native جديد وقم بتثبيت حزمة رد الفعل الأصلية
رد فعل الأصلي الحرف الأول MyFirstARKitApp
مؤتمر نزع السلاح MyFirstARKitApp
تثبيت npm - حفظ رد فعل ARKIT
  • قم بربط رد فعل arkit بحيث يمكننا استدعاء الرموز المحلية باستخدام JavaScript
رد فعل الرابط الأصلي رد فعل السكان الأصليين
  • افتح index.ios.js واستبدل كل شيء بما يلي
// index.ios.js
import React، {Component} from 'react'؛
استيراد {AppRegistry، View} من 'react-native'؛
استيراد {ARKit} من 'react-native-arkit' ؛
الفئة الافتراضية للتصدير تمدد التطبيق
  يجعل() {
    إرجاع (
      <عرض النمط = {{flex: 1}}>
        
          
        
      
    )؛
  }
}
AppRegistry.registerComponent ('MyFirstARKitApp'، () => App)؛
  • انتقل إلى مجلد ios وتأكد من استخدام الإصدار التجريبي من Xcode 9 لفتح MyFirstARKitApp.xcodeproj. ستستخدم ARKit الكاميرا لتسجيل الواقع وتحليله وعرضه ، لذلك نحتاج إلى إضافة إعداد خصوصية لمنحه حق الوصول. افتح Info.plist وأضف مفتاح الخصوصية - استخدام الكاميرا الوصف مع تذكير للمستخدمين مثل "يتطلب ARKit الوصول إلى الكاميرا".
  • في Xcode ، اضغط على + + ،، حدد تكوين المبنى المراد تحريره وأغلق مربع الحوار المنبثق. قم بتوصيل iPhone بجهاز الكمبيوتر الخاص بك وانقر فوق الزر "تشغيل". فويلا! لقد صنعنا للتو أول تطبيق ARKit!

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

شيء أكثر من ذلك

الآن يمكننا إضافة المزيد من الأشياء إلى المشهد. ARKit يدعم 9 هندسة أساسية. افتح index.ios.js وقم بتعديل مكون ARKit


  
  
  
  
  
  
  
  
  

قم بإعادة إنشاء التطبيق وستتمكن من رؤية الأشكال الهندسية التسعة أمامك. أعتقد أن هذه المعايير واضحة تمامًا وأنت مرحب بك للعب بها لبناء جسم مركب مربي الحيوانات.

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

أتمنى أن تكون سعيدًا باللعب مع ARKit حتى الآن. انها حقا بسيطة الحق؟ ما زلت أعمل على نقل المزيد من ميزات ARKit إلى arkit التفاعلية ، وستكون بعض التأثيرات الأخرى مثل بوابة الإرسال والتجسيد الفعلي ممكنة في React Native قريبًا. سأنشر المزيد من المقالات التعليمية لإظهار كيفية تنفيذها. اهلا وسهلا بكم ايضا للتحقق من بلدي جيثب ريبو للحصول على آخر التحديثات.