1- مقدمة
تاريخ آخر تعديل: 2022-02-03
المعلومات التي ستطّلع عليها
- كيفية إنشاء مكوّن Webview بسيط جدًا في Android
- كيفية إرسال أحداث Webview إلى Firebase
المتطلبات
- تنفيذ مشروع Firebase مع حزمة تطوير البرامج (SDK) لخدمة "إحصاءات Google"
- الإصدار 4.2 من "استوديو Android" أو الإصدارات الأحدث
- محاكي Android يعمل بالإصدار Android 5.0 أو الإصدارات الأحدث
- الإلمام بلغة برمجة Java.
- الإلمام بلغة البرمجة JavaScript.
2- إنشاء WebView بسيط على Android
جارٍ إضافة Webview في تنسيق النشاط
لإضافة مكوّن WebView إلى تطبيقك في التنسيق، أضِف الرمز التالي إلى ملف XML لتنسيق نشاطك:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WebActivity"
>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>;
إضافة WebView في onCreate()
لتحميل صفحة ويب في WebView، استخدِم واجهة برمجة التطبيقاتloadUrl(). يجب إنشاء Webview عند رصد نشاط باللون الأسود. على سبيل المثال، سأنفّذ ذلك على طريقة onCreate :
public class WebActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
// Navigate to site
myWebView.loadUrl("https://bittererhu.glitch.me");
}
}
ومع ذلك، قبل أن ينجح هذا، يجب أن يتصل تطبيقك بالإنترنت. وللوصول إلى الإنترنت، يمكنك طلب إذن INTERNET في ملف البيان. على سبيل المثال:
<uses-permission android:name="android.permission.INTERNET" />
هذا كل ما تحتاجه لاستخدام مكوّن WebView أساسي يعرض صفحة ويب.
استخدام JavaScript في مكوّنات WebView
إذا كانت صفحة الويب التي تريد تحميلها في WebView تستخدم JavaScript، يجب تفعيل JavaScript في WebView. بعد تفعيل JavaScript، يمكنك أيضًا إنشاء واجهات بين رمز تطبيقك ورمز JavaScript.
يتم إيقاف JavaScript في WebView تلقائيًا. ويمكنك تفعيله من خلال إعدادات WebSettings المرتبطة بمكوّن WebView. يمكنك استرداد WebSettings باستخدام getSettings() ، ثم تفعيل JavaScript باستخدام setJavaScriptEnabled().
على سبيل المثال:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
النشاط المحدّث :
public class WebActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
WebView myWebView = (WebView) findViewById(R.id.webview);
if(myWebView != null) {
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
}
// Navigate to site
myWebView.loadUrl("https://bittererhu.glitch.me");
}
}
3- تنفيذ واجهة JavaScript الوسيطة
معالج Javacript
تتمثل الخطوة الأولى لاستخدام "إحصاءات Google" في مكوّن WebView في إنشاء دوال JavaScript لإعادة توجيه الأحداث وخصائص المستخدمين إلى رموز برمجية أصلية. يوضّح المثال التالي كيفية إجراء ذلك بطريقة تتوافق مع الرموز الأصلية لكل من Android وApple:
في هذا المثال، قمتُ بإنشاء ملف JavaScript باسم script.js ويحتوي على ما يلي :
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
الواجهة الأصلية
لاستدعاء رمز Android الأصلي من JavaScript، نفِّذ فئة بالطرق المميزة بعلامة @JavaScriptInterface
: في المثال أدناه، أنشأتُ فئة Java جديدة باسم : AnalyticsWebInterfcae.java:
public class AnalyticsWebInterface {
public static final String TAG = "AnalyticsWebInterface";
private FirebaseAnalytics mAnalytics;
public AnalyticsWebInterface(Context context) {
mAnalytics = FirebaseAnalytics.getInstance(context);
}
@JavascriptInterface
public void logEvent(String name, String jsonParams) {
LOGD("logEvent:" + name);
mAnalytics.logEvent(name, bundleFromJson(jsonParams));
}
@JavascriptInterface
public void setUserProperty(String name, String value) {
LOGD("setUserProperty:" + name);
mAnalytics.setUserProperty(name, value);
}
private void LOGD(String message) {
// Only log on debug builds, for privacy
if (BuildConfig.DEBUG) {
Log.d(TAG, message);
}
}
private Bundle bundleFromJson(String json) {
// ...
}
}
Once you have created the native interface, register it with your WebView so that it is visible to JavaScript code running in the WebView:
// Only add the JavaScriptInterface on API version JELLY_BEAN_MR1 and above, due to
// security concerns, see link below for more information:
// https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
mWebView.addJavascriptInterface(
new AnalyticsWebInterface(this), AnalyticsWebInterface.TAG);
} else {
Log.w(TAG, "Not adding JavaScriptInterface, API Version: " + Build.VERSION.SDK_INT);
}
الرمز النهائي :
// [START analytics_web_interface]
public class AnalyticsWebInterface {
public static final String TAG = "AnalyticsWebInterface";
private FirebaseAnalytics mAnalytics;
public AnalyticsWebInterface(Context context) {
mAnalytics = FirebaseAnalytics.getInstance(context);
}
@JavascriptInterface
public void logEvent(String name, String jsonParams) {
LOGD("logEvent:" + name);
mAnalytics.logEvent(name, bundleFromJson(jsonParams));
}
@JavascriptInterface
public void setUserProperty(String name, String value) {
LOGD("setUserProperty:" + name);
mAnalytics.setUserProperty(name, value);
}
private void LOGD(String message) {
// Only log on debug builds, for privacy
if (BuildConfig.DEBUG) {
Log.d(TAG, message);
}
}
private Bundle bundleFromJson(String json) {
// [START_EXCLUDE]
if (TextUtils.isEmpty(json)) {
return new Bundle();
}
Bundle result = new Bundle();
try {
JSONObject jsonObject = new JSONObject(json);
Iterator<String> keys = jsonObject.keys();
while (keys.hasNext()) {
String key = keys.next();
Object value = jsonObject.get(key);
if (value instanceof String) {
result.putString(key, (String) value);
} else if (value instanceof Integer) {
result.putInt(key, (Integer) value);
} else if (value instanceof Double) {
result.putDouble(key, (Double) value);
} else {
Log.w(TAG, "Value for key " + key + " not one of [String, Integer, Double]");
}
}
} catch (JSONException e) {
Log.w(TAG, "Failed to parse JSON, returning empty Bundle.", e);
return new Bundle();
}
return result;
// [END_EXCLUDE]
}
لقد انتهيت الآن من إعداد واجهة JavaScript، وأنت الآن جاهز لبدء إرسال الأحداث التحليلية.
4. إرسال الأحداث من خلال الواجهة
كما ترى هنا، فإن مكوّن Webview بسيط جدًا، ويتضمّن ثلاثة أزرار منها تسجيل حدث والأخرى تُسجِّل خاصيّة مستخدم :
بمجرد النقر على الأزرار، فإنه يستدعي "script.js" وتنفيذ التعليمة البرمجية التالية :
document.getElementById("event1").addEventListener("click", function() {
console.log("event1");
logEvent("event1", { foo: "bar", baz: 123 });
});
document.getElementById("event2").addEventListener("click", function() {
console.log("event2");
logEvent("event2", { size: 123.456 });
});
document.getElementById("userprop").addEventListener("click", function() {
console.log("userprop");
setUserProperty("userprop", "custom_value");
});
ملف script.js النهائي :
/* If you're feeling fancy you can add interactivity
to your site with Javascript */
// prints "hi" in the browser's dev tools console
console.log("hi");
// [START log_event]
function logEvent(name, params) {
if (!name) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'logEvent',
name: name,
parameters: params
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
// [END log_event]
// [START set_user_property]
function setUserProperty(name, value) {
if (!name || !value) {
return;
}
if (window.AnalyticsWebInterface) {
// Call Android interface
window.AnalyticsWebInterface.setUserProperty(name, value);
} else if (window.webkit
&& window.webkit.messageHandlers
&& window.webkit.messageHandlers.firebase) {
// Call iOS interface
var message = {
command: 'setUserProperty',
name: name,
value: value
};
window.webkit.messageHandlers.firebase.postMessage(message);
} else {
// No Android or iOS interface found
console.log("No native APIs found.");
}
}
// [END set_user_property]
document.getElementById("event1").addEventListener("click", function() {
console.log("event1");
logEvent("event1", { foo: "bar", baz: 123 });
});
document.getElementById("event2").addEventListener("click", function() {
console.log("event2");
logEvent("event2", { size: 123.456 });
});
document.getElementById("userprop").addEventListener("click", function() {
console.log("userprop");
setUserProperty("userprop", "custom_value");
});
هذه هي الطريقة الأساسية لإرسال الأحداث إلى "إحصاءات Google".
5- تصحيح أخطاء أحداث Webview في Firebase
يعمل تصحيح أخطاء أحداث Webview في تطبيقك بالطريقة نفسها التي يعمل بها تصحيح أخطاء أي جزء أصلي من حزمة تطوير البرامج (SDK):
لتفعيل وضع تصحيح الأخطاء، يُرجى استخدام الأوامر التالية في وحدة تحكّم استوديو Android:
adb shell setprop debug.firebase.analytics.app package_name
بعد الانتهاء، يمكنك اختبار أحداث Webview ورؤيتها في الواقع :
6- تهانينا
تهانينا، لقد أنشأت بنجاح WebView في تطبيق Android. يمكنك إرسال أحداث مسار الإحالة الناجحة الرئيسية وقياسها في تطبيقك من خلال مكوّنات WebView. للاستفادة إلى أقصى حدّ من هذه الأحداث، نقترح أيضًا الربط بحساب "إعلانات Google" واستيراد هذه الأحداث كإحالات ناجحة.
لقد تعلمتَ
- كيفية إرسال أحداث Webview إلى Firebase
- كيفية إعداد مكوّن Webview بسيط وإنشائه في Android