اذا كنت من الاشخاص الذين يعانون من طريقة عرض البيانات المخزنة على قواعد بيانات Sqlite او الـ SharedPrefrance او تريد معرفة البيانات التي يستقبلها او يرسلها تطبيق عبر الشبكة, فهذه الاضافة ستعجبك بالتأكيد.

ماهي Stetho؟

مؤخراً قامت FaceBook باطلاق أداة تدعى Stetho والتي تسمح لمطوري الاندرويد بعرض البيانات الخاصة بتطبيقاتهم والمخزنة في ملفات الـ Cach سواء كانت بيانات مخزنة في SharedPrefrance او حتى في قواعد بيانات Sqlite, ومن احد اهم الامور التي تميزت بها هذه الاداة هو امكانيه تنفيذ اوامر باستخادم JavaScript او حتى امكانية استعراض البيانات التي يستقبلها او يرسلها تطبيقك عبر الشبكة.

اضافة Stetho

عند التعامل مع هذا النوع من المكتبات فانت تحتاج لها فقط في وقت تجربة المشروع ولا تريد ان تضيفها الى النسخة النهائية للمستخدمين, لذلك يفضل ان تضيف المكتبة فقط في وضع الـ Debug Mode وذلك عن طريق استخدام DebugCmpile بدلاً من Compile

<code class="language-groovy" data-lang="groovy"><span class="n">depencencies</span><span class="o">{</span><span class="c1">// your other dependencies here...</span><span class="n">debugCompile</span><span class="s1">'com.facebook.stetho:stetho:1.3.1'</span><span class="o">}</span>

تهيئة Stheto

بعد اضافتك للمكتبة فانت بحاجة الى اعداد الاداة عن طريق استدعاء Stetho واضافة الخصائص التي تحتاجها, وذلك عن طريق انشاء كلاس جديد تحت المسار التالي src/debug/java والسبب اننا نريد استخدامها فقط في اصدارات الـ Debug, هذا الكلاس يجب ان يكون extend من Application

<code class="language-java" data-lang="java"><span class="kn">import</span><span class="nn">com.facebook.stetho.Stetho</span><span class="o">;</span><span class="kd">public</span><span class="kd">class</span><span class="nc">MyDebugApplication</span><span class="kd">extends</span><span class="n">Application</span><span class="o">{</span><span class="nd">@Override</span><span class="kd">public</span><span class="kt">void</span><span class="nf">onCreate</span><span class="o">()</span><span class="o">{</span><span class="kd">super</span><span class="o">.</span><span class="na">onCreate</span><span class="o">();</span><span class="n">Stetho</span><span class="o">.</span><span class="na">initialize</span><span class="o">(</span><span class="n">Stetho</span><span class="o">.</span><span class="na">newInitializerBuilder</span><span class="o">(</span><span class="k">this</span><span class="o">)</span><span class="o">.</span><span class="na">enableDumpapp</span><span class="o">(</span><span class="n">Stetho</span><span class="o">.</span><span class="na">defaultDumperPluginsProvider</span><span class="o">(</span><span class="k">this</span><span class="o">))</span><span class="o">.</span><span class="na">enableWebKitInspector</span><span class="o">(</span><span class="n">Stetho</span><span class="o">.</span><span class="na">defaultInspectorModulesProvider</span><span class="o">(</span><span class="k">this</span><span class="o">))</span><span class="o">.</span><span class="na">build</span><span class="o">());</span><span class="o">}</span><span class="o">}</span>

تفعيل MyDebugApplication

الخطوة الاخيرة هي اعطاء امر للـ AndroidManifest.xml والموجود في المسار src/debug باستخدام الكلاس الذي قمنا بانشائه سابقاً.

<code class="language-xml" data-lang="xml"><span class="nt"><manifest</span><span class="na">package=</span><span class="s">"com.mycompany"</span><span class="na">xmlns:android=</span><span class="s">"http://schemas.android.com/apk/res/android"</span><span class="na">xmlns:tools=</span><span class="s">"http://schemas.android.com/tools"</span><span class="nt">></span><span class="nt"><application</span><span class="na">tools:replace=</span><span class="s">"android:name"</span><span class="na">android:name=</span><span class="s">".MyDebugApplication"</span><span class="nt">/></span><span class="nt"></manifest></span>

استخدام Stetho

تستطيع الان التعامل مع الاداة عن طريق متصفح Chrome مهما كان نوع جهاز الاندرويد المتصل بجهازك وذلك عن طريق الـ ADB, قم بفتح المتصفح واكتب في شريط العنوان الامر التاليstetho-device-selection](/wp-content/uploads/2016/03/stetho-device-selection.png)

من الصفحة التي بالاعلى تستطيع تحديد جهاز الاندرويد وذلك عن طريق الضغط على عبارة inspect والتي ستوجهك مباشرة الى صفحة جديدة تستطيع من خلالها اstethostetho-1024x525.png)](/wp-content/uploads/2016/03/stetho.png)

التعامل مع الـ SharedPreferences

لعرض جميع البيانات التي قمت بتخزينها في الـ SharedPreferences من خلال تطبيقك, توجه الى التبويب Resources ومنSharedPreferencesrences-1024x552.png)](/wp-content/uploads/2016/03/SharedPreferences.png)

عرض قاعدة البيانات

اختر التبويب Resources ومن ثم اختر قاعدة البيانات التي تريد عرض بياناتها من القائمة Web SQL,  ستجد قائمة بالجداول الموجودة في قاعدة البيانات والتي تستطيع اختيار واحد منها لعرض البيانات المخزنة بداخلها او تستطيع تحديد قاعدة البيانات ومن ثم تنفيذ اوامر Sql لعرض البيانات بالاسلوب الذي يعجبك, مثال: SELECT * FROM people Wstetho-database-datae-data-1024x518.png)](/wp-content/uploads/2016/03/stetho-stetho-sql-commandsmmands-1024x347.png)](/wp-content/uploads/2016/03/stetho-sql-commands.png)

عرض قاعدة بيانات Realm

من خلال الطريقة السابقة تستطيع عرض قواعد بيانات Sqlite المخزنة في تطبيقك, ولكن لتعرض قاعدة بيانات من نوع Realm فانت بحاجة الى اضافة مكتبة stetho-realm لمشروعك وذلك عن طريق اضافة السطر التالي لملف build.gradle

<code class="language-groovy" data-lang="groovy"><span class="n">repositories{
  maven{
      url 'https://github.com/uPhyca/stetho-realm/raw/master/maven-repo'
  }
}</span>```

depencencies{
// your other dependencies here...
debugCompile 'com.uphyca:stetho_realm:0.8.0'
}```

امر اخر يجب عليك تعديل دالة enableWebKitInspector التي سبق وان قمنا باستدعائها عند تهيئة الاوبجكت Stetho الموجود في كلاس MyDebugApplication

<code class="language-java" data-lang="java"><span class="kn">import</span><span class="nn">com.facebook.stetho.Stetho</span><span class="o">;</span><span class="kd">public</span><span class="kd">class</span><span class="nc">MyDebugApplication</span><span class="kd">extends</span><span class="n">Application</span><span class="o">{</span><span class="nd">@Override</span><span class="kd">public</span><span class="kt">void</span><span class="nf">onCreate</span><span class="o">()</span><span class="o">{</span><span class="kd">super</span><span class="o">.</span><span class="na">onCreate</span><span class="o">();</span><span class="n">Stetho</span><span class="o">.</span><span class="na">initialize</span><span class="o">(</span><span class="n">Stetho</span><span class="o">.</span><span class="na">newInitializerBuilder</span><span class="o">(</span><span class="k">this</span><span class="o">)</span><span class="o">.</span><span class="na">enableDumpapp</span><span class="o">(</span><span class="n">Stetho</span><span class="o">.</span><span class="na">defaultDumperPluginsProvider</span><span class="o">(</span><span class="k">this</span><span class="o">))</span><span class="o">.</span><span class="na">enableWebKitInspector</span><span class="o">(RealmInspectorModulesProvider.builder(this).build()</span><span class="o">)</span><span class="o">.</span><span class="na">build</span><span class="o">());</span><span class="o">}</span><span class="o">}
</span>```

### عرض بيانات الشبكة

من احد افضل المميزات التي تميزت بها الاداة هو امكانية استعراض البيانات المرسلة والمستقبلة بين تطبيقك والسيرفر, فـ على سبيل المثال ان كان تطبيق يتعامل مع الانترنت وانت بحاجة الى ارسل ملفات الى سيرفر او حتى لاستقبال Responce من سيرفر فتستطيع مشاهدته عن طريق Stetho, ولكن يجب عليك اضافة مكتبة Stetho-okHtt  لمشروعك وذلك عن طريق الاسطر التالية كما فعلنا بالسابق:

depencencies{
// your other dependencies here...
debugCompile 'com.facebook.stetho:stetho-okhttp3:1.3.1' 
}```

<code class="language-java" data-lang="java"><span class="kn">import</span><span class="nn">com.facebook.stetho.Stetho</span><span class="o">;</span>
public class MyDebugApplication extends Application {
 @Override
 public void onCreate() {
 super.onCreate();
 Stetho.initialize(
 Stetho.newInitializerBuilder(this)
 .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
 .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
 .build());
 new OkHttpClient.Builder()
 .addNetworkInterceptor(new StethoInterceptor())
 .build();
 }
}

اخيرا من اداة Stetho توجه الى 10956912_1566958493590672_1981449156_n](/wp-content/uploads/2016/03/10956912_1566958493590672_1981449156_n.png)

تنفيذ اوامر Javascript

في بعض الاحيان واثناء عمل برنامج قد تحتاج الى معرفة قيمة عنصر ما في واجهة تطبيقك او حتى معرفة قيمة متغير في الكلاس ولاتريد ايقاف التطبيق لكتابة امر Log حتى لاتفقد قيمة المتغير, فالحل هو باستخدام احد مزايا هذه الاداة الا وهو تنفيذ اوامر JavaScript على تطبيقك ولكن يجب عليك اضافة مكتبة stetho-js-rhino  لمشروعك وذلك عن طريق الاسطر التالية كما فعلنا بالسابق:

<code class="language-groovy" data-lang="groovy"><span class="n">depencencies</span><span class="o">{
</span><span class="c1">// your other dependencies here...</span><span class="s1"> 
debugCompile 'com.facebook.stetho:stetho-js-rhino:1.3.1'
</span><span class="o">}</span>```

importcom.facebook.stetho.Stetho;publicclassMyDebugApplicationextendsApplication{@OverridepublicvoidonCreate(){super.onCreate();Stetho.initialize(Stetho.newInitializerBuilder(this).enableDumpapp(Stetho.defaultDumperPluginsProvider(this)).enableWebKitInspector(new InspectorModulesProvider() {
@Override
public Iterable get() {
return new DefaultInspectorModulesBuilder(context).runtimeRepl(
new JsRuntimeReplFactoryBuilder(context)
// Pass to JavaScript: var foo = "bar";
.addVariable("foo", "bar")
.build()
).finish();
}
})
).build());}}
```

بعد ذلك واثناء عمل البرنامج والاداة, فقط توجه الى التبويب Console وقم بتنفيذ الاكconsoleonsole-1024x633.png)](/wp-content/uploads/2016/03/console.png)

مراجع اضافية