تنزيل dat proxy browser - تنزيل كود مصدر dat proxy browser

dat proxy browser

شفرة المصدر الأخرى

تنزيل

متصفح وكيل DAT

رسم تخطيطي تقريبي للغاية لمتصفح ويب للجوال تم تصميمه باستخدام react-native ("omnibar" و WebView ). واجهات المتصفح مع واجهة برمجة تطبيقات البوابة (والتي قد أضعها في النهاية على GitHub أيضًا) والتي تعمل بمثابة نقل للبروتوكولات اللامركزية (غير المدعومة حاليًا) ( DAT حاليًا).

(لقطة شاشة للمتصفح الذي يعمل على جهاز محاكاة iOS وتحميل مثال لموقع الويب `dat://`)

مثال لواجهة برمجة تطبيقات بوابة وكيل DAT:

 const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )

app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )

app . use ( function ( req , res , next ) {
  const orig = req . url
  const { referer , host } = req . headers
  if ( referer && / ^(/) / . test ( req . url ) ) {
    // account for relative asset paths
    const folder = referer . replace ( `http:// ${ host } /` , '' )
    res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
  }

  next ( )
} )

app . get ( '/dat/:key' , ( req , res ) => {
  const { key } = req . params
  Dat ( `./dats/ ${ key } ` , {
    key : key
  } , function ( err , dat ) {
    if ( err ) throw err
    dat . joinNetwork ( { } , _ => {
      res . json ( {
        url : `http:// ${ host } : ${ port } / ${ key } `
      } )
    } )
  } )
} )

app . listen ( port , _ => console . log ( startUpMsg ) )

إنشاء تطبيق React Native Mumbo Jumbo...

تم تمهيد هذا المشروع باستخدام تطبيق Create React Native.

ستجد أدناه معلومات حول أداء المهام الشائعة. أحدث نسخة من هذا الدليل متاحة هنا.

جدول المحتويات

التحديث إلى الإصدارات الجديدة
البرامج النصية المتاحة
- بداية npm
- اختبار npm
- تشغيل npm لنظام iOS
- تشغيل npm للاندرويد
- إخراج تشغيل npm
كتابة وإجراء الاختبارات
متغيرات البيئة
- تكوين عنوان IP للرابط
تخصيص اسم عرض التطبيق وأيقونته
المشاركة والنشر
- النشر إلى مجتمع React الأصلي في Expo
- إنشاء تطبيق Expo "مستقل".
- الإخراج من إنشاء تطبيق React Native
  - بناء التبعيات (Xcode وAndroid Studio)
  - هل يجب علي استخدام ExpoKit؟
استكشاف الأخطاء وإصلاحها
- الشبكات
- لن يتم فتح محاكي iOS
- لا يتم مسح رمز الاستجابة السريعة

التحديث إلى الإصدارات الجديدة

يجب أن تحتاج فقط إلى تحديث التثبيت العام لتطبيق create-react-native-app نادرًا جدًا، ومن الأفضل عدم تحديثه مطلقًا.

يجب أن يكون تحديث تبعية react-native-scripts لتطبيقك أمرًا بسيطًا مثل رفع رقم الإصدار في package.json وإعادة تثبيت تبعيات مشروعك.

تتطلب الترقية إلى إصدار جديد من React Native تحديث إصدارات حزم react-native react و expo ، وتعيين sdkVersion الصحيح في app.json . راجع دليل الإصدار للحصول على معلومات محدثة حول توافق إصدار الحزمة.

البرامج النصية المتاحة

إذا تم تثبيت Yarn عند تهيئة المشروع، فسيتم تثبيت التبعيات عبر Yarn، وربما يجب عليك استخدامه لتشغيل هذه الأوامر أيضًا. على عكس تثبيت التبعية، فإن بناء جملة تشغيل الأوامر مطابق لـ Yarn وNPM في وقت كتابة هذه السطور.

`npm start`

تشغيل التطبيق الخاص بك في وضع التطوير.

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

في بعض الأحيان قد تحتاج إلى إعادة تعيين أو مسح ذاكرة التخزين المؤقت لمحزم React Native. للقيام بذلك، يمكنك تمرير علامة --reset-cache إلى البرنامج النصي للبدء:

 npm start --reset-cache
# or
yarn start --reset-cache

`npm test`

يقوم بتشغيل عداء اختبار الدعابة في اختباراتك.

`npm run ios`

مثل npm start ، ولكنه يحاول أيضًا فتح تطبيقك في iOS Simulator إذا كنت تستخدم جهاز Mac وقمت بتثبيته.

`npm run android`

مثل npm start ، ولكنه يحاول أيضًا فتح تطبيقك على جهاز Android متصل أو محاكي. يتطلب تثبيت أدوات بناء Android (راجع مستندات React Native للحصول على الإعداد التفصيلي). نوصي أيضًا بتثبيت Genymotion كمحاكي Android. بمجرد الانتهاء من إعداد بيئة البناء الأصلية، هناك خياران لإتاحة النسخة الصحيحة من adb لإنشاء تطبيق React Native:

باستخدام `adb` في Android Studio

تأكد من أنه يمكنك تشغيل adb من جهازك الطرفي.
افتح Genymotion وانتقل إلى Settings -> ADB . حدد "استخدام أدوات Android SDK المخصصة" وقم بالتحديث باستخدام دليل Android SDK الخاص بك.

باستخدام `adb` Genymotion

ابحث عن نسخة Genymotion من adb. على نظام التشغيل macOS على سبيل المثال، يكون هذا عادةً /Applications/Genymotion.app/Contents/MacOS/tools/ .
أضف دليل أدوات Genymotion إلى المسار الخاص بك (تعليمات لنظام التشغيل Mac وLinux وWindows).
تأكد من أنه يمكنك تشغيل adb من جهازك الطرفي.

`npm run eject`

سيبدأ هذا عملية "الإخراج" من البرامج النصية لإنشاء تطبيق React Native App. سيتم طرح بعض الأسئلة عليك حول الطريقة التي تريد بها إنشاء مشروعك.

تحذير: يعد تشغيل الإخراج إجراءً دائمًا (بصرف النظر عن نظام التحكم في الإصدار الذي تستخدمه). سيتطلب منك التطبيق الذي تم إخراجه إعداد بيئة Xcode و/أو Android Studio.

تخصيص اسم عرض التطبيق وأيقونته

يمكنك تحرير app.json لتضمين مفاتيح التكوين ضمن مفتاح expo .

لتغيير اسم العرض لتطبيقك، قم بتعيين مفتاح expo.name في app.json على سلسلة مناسبة.

لتعيين رمز تطبيق، قم بتعيين مفتاح expo.icon في app.json ليكون إما مسارًا محليًا أو عنوان URL. يوصى باستخدام ملف png بحجم 512 × 512 وبشفافية.

كتابة وإجراء الاختبارات

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

متغيرات البيئة

يمكنك تكوين بعض سلوكيات Create React Native App باستخدام متغيرات البيئة.

تكوين عنوان IP للرابط

عند بدء مشروعك، سترى شيئًا كهذا لعنوان URL لمشروعك:

 exp://192.168.0.2:19000

يخبر "البيان" الموجود في عنوان URL هذا تطبيق Expo بكيفية استرداد حزمة JavaScript الخاصة بتطبيقك وتحميلها، لذلك حتى إذا قمت بتحميلها في التطبيق عبر عنوان URL مثل exp://localhost:19000 ، فسيظل تطبيق عميل Expo يحاول استرداد التطبيق الخاص بك على عنوان IP الذي يوفره البرنامج النصي للبدء.

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

ماك ولينكس:

 REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start

ويندوز:

 set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start

قد يتسبب المثال أعلاه في أن يستمع خادم التطوير إلى exp://my-custom-ip-address-or-hostname:19000 .

المشاركة والنشر

يقوم تطبيق Create React Native بالكثير من العمل لجعل إعداد التطبيق وتطويره أمرًا بسيطًا ومباشرًا، ولكن من الصعب جدًا القيام بالشيء نفسه للنشر على متجر تطبيقات Apple أو متجر Google Play دون الاعتماد على خدمة مستضافة.

النشر إلى مجتمع React الأصلي في Expo

يوفر Expo استضافة مجانية لتطبيقات JS فقط التي أنشأتها CRNA، مما يسمح لك بمشاركة تطبيقك من خلال تطبيق عميل Expo. وهذا يتطلب التسجيل للحصول على حساب Expo.

قم بتثبيت أداة سطر الأوامر exp ، ثم قم بتشغيل أمر النشر:

 $ npm i -g exp
$ exp publish

إنشاء تطبيق Expo "مستقل".

يمكنك أيضًا استخدام خدمة مثل إصدارات Expo المستقلة إذا كنت ترغب في الحصول على IPA/APK للتوزيع دون الحاجة إلى إنشاء الكود الأصلي بنفسك.

الإخراج من إنشاء تطبيق React Native

إذا كنت ترغب في إنشاء تطبيقك ونشره بنفسك، فستحتاج إلى الإخراج من CRNA واستخدام Xcode وAndroid Studio.

عادةً ما يكون ذلك بسيطًا مثل تشغيل npm run eject في مشروعك، والذي سيرشدك خلال العملية. تأكد من تثبيت react-native-cli واتبع دليل بدء التعليمات البرمجية الأصلية لـ React Native.

هل يجب علي استخدام ExpoKit؟

إذا كنت قد استخدمت واجهات برمجة تطبيقات Expo أثناء العمل على مشروعك، فستتوقف استدعاءات واجهة برمجة التطبيقات هذه عن العمل إذا قمت بالإخراج إلى مشروع React Native عادي. إذا كنت تريد الاستمرار في استخدام واجهات برمجة التطبيقات هذه، فيمكنك الإخراج إلى "React Native + ExpoKit" الذي سيظل يسمح لك ببناء التعليمات البرمجية الأصلية الخاصة بك ومواصلة استخدام واجهات برمجة تطبيقات Expo. راجع دليل الإخراج لمزيد من التفاصيل حول هذا الخيار.

استكشاف الأخطاء وإصلاحها

الشبكات

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

حاول فتح متصفح ويب على هاتفك وفتح عنوان URL الذي يطبعه البرنامج النصي للحزم، مع استبدال exp:// بـ http:// . لذلك، على سبيل المثال، إذا رأيت أسفل رمز الاستجابة السريعة في جهازك الطرفي:

 exp://192.168.0.1:19000

حاول فتح Safari أو Chrome على هاتفك والتحميل

 http://192.168.0.1:19000

و

 http://192.168.0.1:19001

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

إذا لم تتمكن من تحميل عنوان URL http في متصفح الويب الخاص بهاتفك، فحاول استخدام ميزة التوصيل/نقطة الاتصال المحمولة على هاتفك (على الرغم من ذلك، احذر من استخدام البيانات)، وتوصيل جهاز الكمبيوتر الخاص بك بشبكة WiFi تلك، وإعادة تشغيل الحزمة. إذا كنت تستخدم VPN، فقد تحتاج إلى تعطيلها.

لن يتم فتح محاكي iOS

إذا كنت تستخدم نظام التشغيل Mac، فهناك بعض الأخطاء التي يراها المستخدمون أحيانًا عند محاولة تشغيل npm run ios :

"رمز الخروج غير الصفري: 107"
"قد تحتاج إلى تثبيت Xcode" ولكنه مثبت بالفعل
وغيرها

هناك بعض الخطوات التي قد ترغب في اتخاذها لاستكشاف هذه الأنواع من الأخطاء وإصلاحها:

تأكد من تثبيت Xcode وفتحه لقبول اتفاقية الترخيص إذا طُلب منك ذلك. يمكنك تثبيته من متجر تطبيقات Mac.
افتح تفضيلات Xcode، وعلامة التبويب "المواقع"، وتأكد من ضبط خيار قائمة Command Line Tools على شيء ما. في بعض الأحيان، عندما يتم تثبيت أدوات CLI لأول مرة بواسطة Homebrew، يتم ترك هذا الخيار فارغًا، مما قد يمنع أدوات Apple المساعدة من العثور على جهاز المحاكاة. تأكد من إعادة تشغيل npm/yarn run ios بعد القيام بذلك.
إذا لم ينجح ذلك، فافتح جهاز محاكاة، وضمن قائمة التطبيق، حدد Reset Contents and Settings... . بعد الانتهاء من ذلك، قم بإنهاء جهاز المحاكاة، وأعد تشغيل npm/yarn run ios .

لا يتم مسح رمز الاستجابة السريعة

إذا لم تتمكن من مسح رمز الاستجابة السريعة ضوئيًا، فتأكد من أن كاميرا هاتفك تركز بشكل صحيح، وتأكد أيضًا من أن التباين بين اللونين في جهازك الطرفي مرتفع بدرجة كافية. على سبيل المثال، قد لا تحتوي السمات الافتراضية لـ WebStorm على تباين كافٍ لرموز QR الطرفية بحيث يمكن مسحها ضوئيًا باستخدام ماسحات باركود النظام التي يستخدمها تطبيق Expo.

إذا كان هذا يسبب لك مشاكل، فقد ترغب في محاولة تغيير سمة اللون الخاصة بجهازك للحصول على مزيد من التباين، أو تشغيل تطبيق Create React Native من جهاز طرفي مختلف. يمكنك أيضًا إدخال عنوان URL المطبوع يدويًا بواسطة البرنامج النصي للحزم في شريط البحث الخاص بتطبيق Expo لتحميله يدويًا.

يوسع

معلومات إضافية