مشكلة في إرسال البيانات بإستخدام flutter - dio

مرحبا ممكن تحدد أي مشكلة , لأنه مش مفهوم أي مشكلة من الصورة ؟ 

عند استعمال physical device ، وعند إرسال بينات إلى ال API يقف التطبيق عن العمل وتظهر الصورة التي أرفقتها

مع العلم / أن التطبيق يعمل بشكل طبيعي عند استعمال محاكي

هل هناك فرق بين استعمال ال physical device واستعمال محاكي في تغيير ال url الخاص بال API أو غيرها من الأمور؟

بتاريخ 19 دقائق مضت قال Mohammed Abu Yousef:

عند استعمال physical device ، وعند إرسال بينات إلى ال API يقف التطبيق عن العمل وتظهر الصورة التي أرفقتها

مع العلم / أن التطبيق يعمل بشكل طبيعي عند استعمال محاكي

معظم الأخطاء تظهر عند استعمال الجوال الحقيقي غير المحاكي لذلك يجب التأكد من أنه لا يوجد خطأ في عملية إرسال البيانات في المحاكي ثم في الجوال الحقيقي , ايضا تأكد من وضع الصلاحيات المناسبة كالاتصال ببيانات الجهاز أو Wifi. 

حاول تشغيل المشروع من موجه الأوامر باستخدام flutter run لمعرفة ما إذا كانت هناك أي مشكلة أم لا.

يمكنك ايضا من استخدام حزمة flutter_flipperkit من هنا . للتتبع الأخطاء في تطبيقك وعمل تقارير بها.

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

بتاريخ 2 ساعات قال Mohammed Abu Yousef:

هل هناك فرق بين استعمال ال physical device واستعمال محاكي في تغيير ال url الخاص بال API أو غيرها من الأمور؟

إذا كنت تستعمل local API مخدم من local host لن يستطيع الجهاز الحقيقي الاتصال مع المخدم في حاسوبك.

لحل المشكلة عليك استبدال IP الذي يتصل عليه التطبيق ووضع IP الحاسوب الذي يقوم بتشغيل المخدم حيث سوف تستخدم local IP للجهاز في الشبكة الداخلية أي جهاز router لديك.

يمكن معرفة ال IP الداخلي من خصائص اتصال واي فاي للحاسوب :

اختر Wi-Fi network > the Wi-Fi network المتصل بها > Properties خصائص.

ابحث عن IPv4 address. وقم بوضعه في التطبيق

بتاريخ 12 ساعات قال Wael Aljamal:

إذا كنت تستعمل local API مخدم من local host لن يستطيع الجهاز الحقيقي الاتصال مع المخدم في حاسوبك.

لحل المشكلة عليك استبدال IP الذي يتصل عليه التطبيق ووضع IP الحاسوب الذي يقوم بتشغيل المخدم حيث سوف تستخدم local IP للجهاز في الشبكة الداخلية أي جهاز router لديك.

يمكن معرفة ال IP الداخلي من خصائص اتصال واي فاي للحاسوب :

اختر Wi-Fi network > the Wi-Fi network المتصل بها > Properties خصائص.

ابحث عن IPv4 address. وقم بوضعه في التطبيق

 

قمت بالفعل بإضافة IPv4 address ولكن للأسف نفس المشكلة وها هي الرسالة التي تظهر:

بتاريخ 3 دقائق مضت قال Mohammed Abu Yousef:

قمت بالفعل بإضافة IPv4 address ولكن للأسف نفس المشكلة وها هي الرسالة التي تظهر:

 

يمكنك تغيير api الى 10.0.2.2:8000 وتجربة ذلك 

بتاريخ 1 دقيقة مضت قال بلال زيادة:

يمكنك تغيير api الى 10.0.2.2:8000 وتجربة ذلك 

نعم أعلم ذلك، هذا بإمكانه العمل على المحاكي، أنا أريد تجربته على physical device

بتاريخ الآن قال Mohammed Abu Yousef:

نعم أعلم ذلك، هذا بإمكانه العمل على المحاكي، أنا أريد تجربته على physical device

يجب استخدام real website لا يعمل السيرفر الشخصي على الموبايل لذلك يظهر الخطأ.

بتاريخ الآن قال بلال زيادة:

يجب استخدام real website لا يعمل السيرفر الشخصي على الموبايل لذلك يظهر الخطأ.

يعني يجب رفع السيرفر على استضافة؟

بتاريخ الآن قال Mohammed Abu Yousef:

يعني يجب رفع السيرفر على استضافة؟

صحيح. 

بتاريخ 2 ساعات قال Mohammed Abu Yousef:

قمت بالفعل بإضافة IPv4 address ولكن للأسف نفس المشكلة وها هي الرسالة التي تظهر:

بالنسبة لي، أقوم بتجريب التطبيقات على الخادم المحلي بنفس هذه الطريقة وهي الاتصال على IP الحاسب الخاص بي.

تأكد أن الحاسوب مرئي على الشبكة.

بتاريخ 6 ساعات قال Wael Aljamal:

بالنسبة لي، أقوم بتجريب التطبيقات على الخادم المحلي بنفس هذه الطريقة وهي الاتصال على IP الحاسب الخاص بي.

هل ال IP هو الذي في الصورة؟

تأكد أن الحاسوب مرئي على الشبكة.

كيف أتأكد؟

بتاريخ 6 ساعات قال Wael Aljamal:

كيف أتأكد؟

نعم هذا هو، طبعا يجب على الهاتف الاتصال على نفس شبكة wifi

بتاريخ 13 دقائق مضت قال Wael Aljamal:

نعم هذا هو، طبعا يجب على الهاتف الاتصال على نفس شبكة wifi

يصبح هكذا ؟ (علما أن التوصيل بين اللابتوب والجوال عن طريق USB)

String url = 'http://192.168.1.104:8000/api/';

بتاريخ 2 دقائق مضت قال Mohammed Abu Yousef:

التوصيل بين اللابتوب والجوال عن طريق USB

هذا لا يسبب مشكلة، فقط تأكد من اتصالهما كليهما على نفس ال router عن طريق wifi مثلا من الضروري اتصالهما على نفس الشبكة.

تأكد من جعل حاسوبك available على الشبكة من خصائص الشبكة

بالنسبة للرابط نفس الذي استخدمته من قبل فقط تبديل localhost or 127.0.0.1 بال IP لديك.

آخر تعديل يمكن أن تقوم به هو التأكد أن المخدم المحلي لديك wampp / xampp يسمح بالاتصال الخارجي من جهاز آخر ابحث عن connect to wamp from another computer حسب المخدم لديك ربما يتطلب تعديل في الاعدادات

بتاريخ 40 دقائق مضت قال Wael Aljamal:

هذا لا يسبب مشكلة، فقط تأكد من اتصالهما كليهما على نفس ال router عن طريق wifi مثلا من الضروري اتصالهما على نفس الشبكة.

تأكد من جعل حاسوبك available على الشبكة من خصائص الشبكة

بالنسبة للرابط نفس الذي استخدمته من قبل فقط تبديل localhost or 127.0.0.1 بال IP لديك.

آخر تعديل يمكن أن تقوم به هو التأكد أن المخدم المحلي لديك wampp / xampp يسمح بالاتصال الخارجي من جهاز آخر ابحث عن connect to wamp from another computer حسب المخدم لديك ربما يتطلب تعديل في الاعدادات

هوا موجود عندي public، أخليه  private زي الصورة؟

بتاريخ الآن قال Mohammed Abu Yousef:

هوا موجود عندي public، أخليه  private زي الصورة؟

نعم كما تلاحظ هذا نوع الشبكة فيقوم windose بإخفاء الجهاز عندما تكون الشبكة عامة Public للحماية من الاختراق.

و تصح قابلة للاكتشاف discoverable في الشبكة المنزلية حيث يتصل عليها أجهزة موثوقة.

بتاريخ 10 دقائق مضت قال Wael Aljamal:

نعم كما تلاحظ هذا نوع الشبكة فيقوم windose بإخفاء الجهاز عندما تكون الشبكة عامة Public للحماية من الاختراق.

و تصح قابلة للاكتشاف discoverable في الشبكة المنزلية حيث يتصل عليها أجهزة موثوقة.

للأسف نفس المشكلة، لكن الرسالة هذه المرة مختلفة، ها هي لعلك تفيدك في معرفة الخطأ

 Bad state: Insecure HTTP is not allowed by platform: http://192.168.1.104:8000/api/login

بتاريخ 3 دقائق مضت قال Mohammed Abu Yousef:

للأسف نفس المشكلة، لكن الرسالة هذه المرة مختلفة، ها هي لعلك تفيدك في معرفة الخطأ

 Bad state: Insecure HTTP is not allowed by platform: http://192.168.1.104:8000/api/login

تمام، اتصل الهاتف مع المخدم،

الآن يتطلب تعديل في 

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" /> <!-- This Line -->

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="receipt"
        android:usesCleartextTraffic="true"

حاول إضافة هذه الخاصية "android:usesCleartextTraffic="true

بتاريخ 2 دقائق مضت قال Wael Aljamal:

تمام، اتصل الهاتف مع المخدم،

الآن يتطلب تعديل في 

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" /> <!-- This Line -->

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="receipt"
        android:usesCleartextTraffic="true"

حاول إضافة هذه الخاصية "android:usesCleartextTraffic="true

هناك تقدم، لم يتوقف التطبيق عن العمل مباشرة كما كان من قبل، لكن ظهرت هذه المشكلة:

Http status error [500]

بتاريخ 40 دقائق مضت قال Mohammed Abu Yousef:

Http status error [500]

هذه المشكلة في المخدم.  Internal Server Error server error response code أرجو التأكد من كيفية ارسال الطلبات و إعادة اختباره.

يمكنك مراجعة السؤال التالي: