การตรวจสอบประสิทธิภาพของการเปิดตัวฟีเจอร์

1. ภาพรวม

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีตรวจสอบประสิทธิภาพของแอประหว่างการเปิดตัวฟีเจอร์ แอปตัวอย่างของเราจะมีฟังก์ชันการทำงานพื้นฐาน และมีการตั้งค่าให้แสดงภาพพื้นหลังที่แตกต่างกันตามแฟล็กการกำหนดค่าระยะไกลของ Firebase เราจะพูดถึงการใช้เครื่องมือการติดตามเพื่อตรวจสอบประสิทธิภาพของแอป การเปิดตัวการเปลี่ยนแปลงการกำหนดค่าในแอป ติดตามผลกระทบและดูว่าเราจะปรับปรุงประสิทธิภาพให้ดีขึ้นได้อย่างไร

สิ่งที่คุณจะได้เรียนรู้

  • วิธีเพิ่มการตรวจสอบประสิทธิภาพของ Firebase ลงในแอปบนอุปกรณ์เคลื่อนที่เพื่อดูเมตริกที่พร้อมใช้งานทันที (เช่น เวลาเริ่มต้นของแอปและเฟรมที่ช้าหรือค้าง)
  • วิธีเพิ่มการติดตามที่กำหนดเองเพื่อทำความเข้าใจเส้นทางโค้ดที่สำคัญในเส้นทางของผู้ใช้
  • วิธีใช้หน้าแดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อทำความเข้าใจเมตริกและติดตามการเปลี่ยนแปลงที่สำคัญ เช่น การเปิดตัวฟีเจอร์
  • วิธีตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อตรวจสอบเมตริกหลัก
  • วิธีเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase

ข้อกำหนดเบื้องต้น

2. ตั้งค่าโปรเจ็กต์ตัวอย่าง

ดาวน์โหลดโค้ด

เรียกใช้คำสั่งต่อไปนี้เพื่อโคลนโค้ดตัวอย่างสำหรับ Codelab นี้ การดำเนินการนี้จะสร้างโฟลเดอร์ชื่อ codelab-perf-rc-android ในเครื่องของคุณ

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

หากไม่มี GitHub ในเครื่อง คุณยังสามารถดาวน์โหลดโค้ดจาก GitHub ได้โดยตรง

นำเข้าโปรเจ็กต์ในโฟลเดอร์ firebase-perf-rc-android-start ไปยัง Android Studio คุณอาจเห็นข้อยกเว้นรันไทม์บางรายการหรือคำเตือนเกี่ยวกับไฟล์ google-services.json ที่ขาดหายไป เราจะแก้ไขปัญหานี้ในส่วนถัดไป

ใน Codelab นี้ คุณจะใช้ปลั๊กอิน Firebase Assistant เพื่อลงทะเบียนแอป Android กับโปรเจ็กต์ Firebase และเพิ่มไฟล์การกำหนดค่า ปลั๊กอิน และทรัพยากร Dependency ที่จำเป็นของ Firebase ลงในโปรเจ็กต์ Android จากภายใน Android Studio

เชื่อมต่อแอปกับ Firebase

  1. ไปที่ Android Studio/ความช่วยเหลือ > ตรวจหาอัปเดตเพื่อให้แน่ใจว่าคุณกำลังใช้ Android Studio และ Firebase Assistant เวอร์ชันล่าสุด
  2. เลือกเครื่องมือ > Firebase เพื่อเปิดแผง Assistant

c0e42ef063d21eab.png

  1. เลือกการตรวจสอบประสิทธิภาพเพื่อเพิ่มในแอป แล้วคลิกเริ่มต้นใช้งานการตรวจสอบประสิทธิภาพ
  2. คลิกเชื่อมต่อกับ Firebase เพื่อเชื่อมต่อโปรเจ็กต์ Android กับ Firebase (ซึ่งจะเปิดคอนโซล Firebase ในเบราว์เซอร์)
  3. ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วป้อนชื่อโปรเจ็กต์ Firebase (หากมีโปรเจ็กต์ Firebase อยู่แล้ว ก็เลือกโปรเจ็กต์ที่มีอยู่แทนได้) คลิกต่อไปและยอมรับข้อกำหนดเพื่อสร้างโปรเจ็กต์ Firebase และแอป Firebase ใหม่

จากนั้นคุณควรเห็นกล่องโต้ตอบสำหรับเชื่อมต่อแอป Firebase ใหม่กับโปรเจ็กต์ Android Studio

51a549ebde2fe57a.png

  1. คลิกเชื่อมต่อ
  2. เปิด Android Studio ในแผง Assistant คุณจะเห็นการยืนยันว่าแอปเชื่อมต่อกับ Firebase แล้ว

40c24c4a56a45990.png

เพิ่มการตรวจสอบประสิทธิภาพลงในแอป

ในแผง Assistant ใน Android Studio ให้คลิกเพิ่มการตรวจสอบประสิทธิภาพลงในแอป

คุณควรเห็นกล่องโต้ตอบสำหรับยอมรับการเปลี่ยนแปลงหลังจากที่ Android Studio ควรซิงค์แอปเพื่อให้แน่ใจว่ามีการเพิ่มทรัพยากร Dependency ที่จำเป็นทั้งหมดแล้ว

3046f3e1f5fea06f.png

สุดท้าย คุณควรเห็นข้อความดำเนินการสำเร็จในแผง Assistant ใน Android Studio ที่ระบุว่าทรัพยากร Dependency ทั้งหมดได้รับการตั้งค่าอย่างถูกต้อง

62e79fd18780e320.png

ขั้นตอนเพิ่มเติมคือเปิดใช้การบันทึกการแก้ไขข้อบกพร่อง โดยทำตามวิธีการในขั้นตอน "(ไม่บังคับ) เปิดใช้การบันทึกการแก้ไขข้อบกพร่อง" ดูวิธีการเดียวกันนี้ได้ในเอกสารประกอบที่เผยแพร่ต่อสาธารณะด้วย

3. เรียกใช้แอป

ตอนนี้คุณควรเห็นไฟล์ google-services.json ในไดเรกทอรีโมดูล (ระดับแอป) ของแอป และระบบจะคอมไพล์แอปได้แล้ว ใน Android Studio คลิกเรียกใช้ > เรียกใช้ "แอป" เพื่อสร้างและเรียกใช้แอปในโปรแกรมจำลองของ Android

เมื่อแอปทำงานอยู่ คุณควรเห็นหน้าจอแนะนำดังนี้

ffbd413a6983b205.png

จากนั้นหลังจากผ่านไป 2-3 วินาที หน้าหลักที่มีรูปภาพเริ่มต้นจะปรากฏขึ้นดังนี้

d946cab0df319e50.png

เกิดอะไรขึ้นในเบื้องหลัง

ระบบจะใช้หน้าจอแนะนําใน SplashScreenActivity และทำสิ่งต่อไปนี้

  1. ใน onCreate() เราจะเริ่มต้นการตั้งค่าการกำหนดค่าระยะไกลของ Firebase และดึงค่าที่จะตั้งค่าในแดชบอร์ดการกำหนดค่าระยะไกลภายหลังใน Codelab นี้
  2. ใน executeTasksBasedOnRC() เราอ่านค่าการกำหนดค่าของแฟล็ก seasonal_image_url หาก URL ระบุโดยค่าของการกําหนดค่า เราจะดาวน์โหลดรูปภาพแบบซิงโครนัส
  3. เมื่อดาวน์โหลดเสร็จแล้ว แอปจะไปที่ MainActivity และเรียกใช้ finish() เพื่อสิ้นสุด SplashScreenActivity

ใน MainActivity หากกำหนด seasonal_image_url ผ่านการกำหนดค่าระยะไกล ระบบจะเปิดใช้ฟีเจอร์นี้และแสดงรูปภาพที่ดาวน์โหลดเป็นพื้นหลังของหน้าหลัก มิฉะนั้น ภาพเริ่มต้น (แสดงด้านบน) จะแสดงขึ้นมา

4. ตั้งการกำหนดค่าระยะไกล

ตอนนี้ที่แอปทํางานอยู่ คุณก็ตั้งค่าแฟล็กฟีเจอร์ใหม่ได้

  1. ในแผงด้านซ้ายของคอนโซล Firebase ให้ค้นหาส่วน Engage แล้วคลิกการกำหนดค่าระยะไกล
  2. คลิกปุ่มสร้างการกำหนดค่าเพื่อเปิดแบบฟอร์มการกำหนดค่า และเพิ่ม seasonal_image_url เป็นคีย์พารามิเตอร์
  3. คลิกเพิ่มคำอธิบาย จากนั้นป้อนคำอธิบาย Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. คลิกเพิ่มใหม่ -> ค่าแบบมีเงื่อนไข -> สร้างเงื่อนไขใหม่
  5. ป้อนชื่อเงื่อนไขเป็น Seasonal image rollout
  6. สำหรับส่วนApplies if... ให้เลือก User in random percentile <= 0% (คุณต้องการปิดใช้ฟีเจอร์นี้ไว้จนกว่าจะพร้อมเปิดตัวในขั้นตอนถัดไป)
  7. คลิกสร้างเงื่อนไข คุณจะต้องใช้เงื่อนไขนี้ในภายหลังเพื่อเปิดตัวฟีเจอร์ใหม่แก่ผู้ใช้

7a07526eb9e81623.png

  1. เปิดสร้างแบบฟอร์มพารามิเตอร์แรก แล้วหาช่องค่าสำหรับการเปิดตัวรูปภาพตามฤดูกาล ป้อน URL ที่จะใช้ดาวน์โหลดรูปภาพตามฤดูกาล: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. ปล่อยค่าเริ่มต้นเป็นสตริงว่างเปล่า ซึ่งหมายความว่าจะแสดงรูปภาพเริ่มต้นใน Codebase แทนที่จะเป็นรูปภาพที่ดาวน์โหลดจาก URL
  3. คลิกบันทึก

99e6cd2ebcdced.png

คุณจะเห็นว่ามีการสร้างการกำหนดค่าใหม่เป็นฉบับร่าง

  1. คลิกเผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลงที่ด้านบนเพื่ออัปเดตแอป

39cd3e96d370c7ce.png

5. เพิ่มการตรวจสอบสำหรับเวลาที่ใช้ในการโหลดข้อมูล

แอปของคุณโหลดข้อมูลบางอย่างไว้ล่วงหน้าก่อนที่จะแสดง MainActivity และแสดงหน้าจอแนะนำเพื่อซ่อนกระบวนการนี้ คุณไม่ต้องการให้ผู้ใช้รอบนหน้าจอนี้นานเกินไป ดังนั้น ปกติแล้วควรตรวจสอบระยะเวลาที่หน้าจอแนะนำจะแสดง

การตรวจสอบประสิทธิภาพของ Firebase ช่วยในเรื่องนี้ได้ คุณสามารถใช้การติดตามโค้ดที่กำหนดเองเพื่อตรวจสอบประสิทธิภาพของโค้ดที่เฉพาะเจาะจงในแอป เช่น เวลาที่ใช้ในการโหลดข้อมูล และเวลาในการประมวลผลของฟีเจอร์ใหม่

ในการติดตามระยะเวลาที่หน้าจอแนะนำจะแสดง คุณจะต้องเพิ่มการติดตามโค้ดที่กำหนดเองลงใน SplashScreenActivity ซึ่งก็คือ Activity ที่ใช้งานหน้าจอแนะนำ

  1. เริ่มต้น สร้าง และเริ่มการติดตามโค้ดที่กำหนดเองชื่อ splash_screen_trace:

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. สิ้นสุดการติดตามในเมธอด onDestroy() ของ SplashScreenActivity:

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

เนื่องจากฟีเจอร์ใหม่จะดาวน์โหลดและประมวลผลรูปภาพ คุณจะเพิ่มการติดตามโค้ดที่กำหนดเองรายการที่ 2 ซึ่งจะติดตามเวลาที่ฟีเจอร์เพิ่มขึ้นใน SplashScreenActivity

  1. เริ่มต้น สร้าง และเริ่มการติดตามโค้ดที่กำหนดเองชื่อ splash_seasonal_image_processing:

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. สิ้นสุดการติดตามในทั้งเมธอด onLoadFailed() และ onResourceReady() ของ RequestListener:

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

เมื่อเพิ่มการติดตามโค้ดที่กำหนดเองเพื่อติดตามระยะเวลาหน้าจอแนะนำ (splash_screen_trace) และเวลาในการประมวลผลของฟีเจอร์ใหม่ (splash_seasonal_image_processing) แล้ว ให้เรียกใช้แอปใน Android Studio อีกครั้ง คุณควรเห็นข้อความบันทึกที่มี Logging trace metric: splash_screen_trace ตามด้วยระยะเวลาของการติดตาม คุณจะไม่เห็นข้อความบันทึกสำหรับ splash_seasonal_image_processing เนื่องจากคุณยังไม่ได้เปิดใช้งานฟีเจอร์ใหม่

6. เพิ่มแอตทริบิวต์ที่กำหนดเองลงในการติดตาม

สำหรับการติดตามโค้ดที่กำหนดเอง การตรวจสอบประสิทธิภาพจะบันทึกแอตทริบิวต์เริ่มต้น (ข้อมูลเมตาทั่วไป เช่น เวอร์ชันของแอป ประเทศ อุปกรณ์ ฯลฯ) โดยอัตโนมัติ เพื่อให้คุณกรองข้อมูลสำหรับการติดตามในคอนโซล Firebase ได้ คุณยังเพิ่มและตรวจสอบแอตทริบิวต์ที่กำหนดเองได้ด้วย

คุณเพิ่งเพิ่มการติดตามโค้ดที่กำหนดเอง 2 รายการในแอปเพื่อตรวจสอบระยะเวลาของหน้าจอแนะนำและเวลาในการประมวลผลของฟีเจอร์ใหม่ ปัจจัยที่อาจส่งผลต่อระยะเวลาเหล่านี้คือ รูปภาพที่แสดงเป็นภาพเริ่มต้น หรือคุณต้องดาวน์โหลดรูปภาพจาก URL หรือไม่ แล้วรู้ไหมว่าท้ายที่สุดแล้วคุณอาจมี URL ที่ต่างจากเดิมที่คุณดาวน์โหลดรูปภาพมา

ดังนั้น เรามาเพิ่มแอตทริบิวต์ที่กําหนดเองซึ่งแสดง URL ของรูปภาพตามฤดูกาลลงในการติดตามโค้ดที่กําหนดเองเหล่านี้ วิธีนี้ช่วยให้คุณกรองข้อมูลระยะเวลาตามค่าเหล่านี้ได้ในภายหลัง

  1. เพิ่มแอตทริบิวต์ที่กำหนดเอง (seasonal_image_url_attribute) สำหรับ splash_screen_trace ในช่วงต้นของเมธอด executeTasksBasedOnRC ดังนี้

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. เพิ่มแอตทริบิวต์ที่กำหนดเองเดียวกันนี้สำหรับ splash_seasonal_image_processing ทันทีหลังจากการเรียก startTrace("splash_seasonal_image_processing"):

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

เมื่อคุณเพิ่มแอตทริบิวต์ที่กำหนดเอง (seasonal_image_url_attribute) สำหรับการติดตามที่กำหนดเองทั้ง 2 รายการ (splash_screen_trace และ splash_seasonal_image_processing) แล้ว โปรดเรียกใช้แอปใน Android Studio อีกครั้ง คุณควรเห็นข้อความการบันทึกที่มี Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. คุณยังไม่ได้เปิดใช้พารามิเตอร์การกำหนดค่าระยะไกล seasonalImageUrl ซึ่งเป็นเหตุผลที่ค่าแอตทริบิวต์คือ unset

Performance Monitoring SDK จะรวบรวมข้อมูลการติดตามและส่งไปยัง Firebase คุณดูข้อมูลได้ในแดชบอร์ดประสิทธิภาพของคอนโซล Firebase ซึ่งเราจะอธิบายรายละเอียดในขั้นตอนถัดไปของ Codelab

7. กำหนดค่าหน้าแดชบอร์ดการตรวจสอบประสิทธิภาพ

กำหนดค่าหน้าแดชบอร์ดเพื่อตรวจสอบฟีเจอร์

ในคอนโซล Firebase ให้เลือกโปรเจ็กต์ที่มีแอป friendly Eats

ในแผงด้านซ้าย ให้มองหาไอคอนรุ่นและ ตรวจสอบ แล้วคลิกประสิทธิภาพ

คุณควรเห็นแดชบอร์ดประสิทธิภาพที่มีจุดข้อมูลแรกในกระดานเมตริก Performance Monitoring SDK จะรวบรวมข้อมูลประสิทธิภาพจากแอปและแสดงภายในไม่กี่นาทีหลังจากเก็บรวบรวมข้อมูล

f57e5450b70034c9.png

กระดานเมตริกนี้คือที่ที่คุณสามารถติดตามเมตริกที่สำคัญของแอป มุมมองเริ่มต้นจะมีระยะเวลาของการติดตามเวลาเริ่มต้นแอป แต่คุณสามารถเพิ่มเมตริกที่คุณสนใจมากที่สุดได้ เนื่องจากกําลังติดตามฟีเจอร์ใหม่ที่เพิ่มเข้ามา คุณจึงปรับแต่งหน้าแดชบอร์ดให้แสดงระยะเวลาของการติดตามโค้ดที่กําหนดเองได้ splash_screen_trace

  1. คลิกช่องเลือกเมตริกที่ว่างอยู่ช่องใดช่องหนึ่ง
  2. ในหน้าต่างกล่องโต้ตอบ ให้เลือกประเภทการติดตามเป็นการติดตามที่กำหนดเองและชื่อการติดตาม splash_screen_trace

1fb81f4dba3220e0.png

  1. คลิกเลือกเมตริก แล้วคุณจะเห็นระยะเวลาการเพิ่ม splash_screen_trace ในหน้าแดชบอร์ด

คุณใช้ขั้นตอนเดียวกันนี้ในการเพิ่มเมตริกอื่นๆ ที่คุณสนใจเพื่อดูได้อย่างรวดเร็วว่าประสิทธิภาพของเมตริกเปลี่ยนไปอย่างไรบ้างเมื่อเวลาผ่านไปและแม้แต่ในรุ่นต่างๆ

1d465c021e58da3b.png

กระดานเมตริกเป็นเครื่องมือที่มีประสิทธิภาพในการติดตามประสิทธิภาพของเมตริกหลักที่ผู้ใช้พบ สำหรับ Codelab นี้ คุณมีข้อมูลชุดเล็กๆ ในช่วงเวลาที่แคบ ดังนั้นคุณจะใช้มุมมองหน้าแดชบอร์ดอื่นๆ ที่จะช่วยให้คุณเข้าใจประสิทธิภาพในการเปิดตัวฟีเจอร์

8. เปิดตัวฟีเจอร์

เมื่อตั้งค่าการตรวจสอบแล้ว และพร้อมเปิดตัวการเปลี่ยนแปลงการกำหนดค่าระยะไกลของ Firebase (seasonal_image_url) ที่คุณตั้งค่าไว้ก่อนหน้านี้

หากต้องการเปิดตัวการเปลี่ยนแปลง คุณจะต้องกลับไปยังหน้าการกำหนดค่าระยะไกลในคอนโซล Firebase เพื่อเพิ่มเปอร์เซ็นไทล์ผู้ใช้ของเงื่อนไขการกำหนดเป้าหมาย โดยปกติแล้ว คุณควรเปิดตัวฟีเจอร์ใหม่ๆ แก่ผู้ใช้กลุ่มเล็กๆ แล้วเพิ่มการใช้งานเฉพาะเมื่อคุณมั่นใจว่าไม่มีปัญหา แต่คุณเป็นผู้ใช้แอปเพียงคนเดียวใน Codelab นี้ ดังนั้นจึงเปลี่ยนเปอร์เซ็นไทล์เป็น 100% ได้

  1. คลิกแท็บเงื่อนไขที่ด้านบนของหน้า
  2. คลิกเงื่อนไข Seasonal image rollout ที่คุณเพิ่มไว้ก่อนหน้านี้
  3. เปลี่ยนเปอร์เซ็นไทล์เป็น 100%
  4. คลิกบันทึกเงื่อนไข
  5. คลิกเผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง

70f993502b27e7a0.png

กลับไปที่ Android Studio แล้วรีสตาร์ทแอปในโปรแกรมจำลองเพื่อดูฟีเจอร์ใหม่ หลังจากหน้าจอแนะนำแล้ว คุณจะเห็นหน้าจอหลักสถานะว่างเปล่าใหม่

b0cc91b6e48fb842.png

9. ตรวจสอบการเปลี่ยนแปลงของประสิทธิภาพ

ต่อไปเรามาดูประสิทธิภาพของการโหลดหน้าจอแนะนำโดยใช้แดชบอร์ดประสิทธิภาพในคอนโซล Firebase กัน ในขั้นตอนนี้ของ Codelab คุณจะใช้ส่วนต่างๆ ของแดชบอร์ดเพื่อดูข้อมูลประสิทธิภาพ

  1. ในแท็บแดชบอร์ดหลัก ให้เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บการติดตามที่กำหนดเอง ในตารางนี้ คุณจะเห็นการติดตามโค้ดที่กําหนดเองที่เพิ่มไว้ก่อนหน้านี้ และการติดตามที่พร้อมใช้งานทันทีบางรายการ
  2. เมื่อเปิดใช้ฟีเจอร์ใหม่แล้ว ให้มองหาการติดตามโค้ดที่กําหนดเอง splash_seasonal_image_processing ซึ่งวัดเวลาที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ จากค่า Duration ของการติดตาม คุณจะเห็นว่าการดาวน์โหลดและการประมวลผลนี้ใช้เวลานานพอสมควร

439adc3ec71805b7.png

  1. เนื่องจากมีข้อมูลสำหรับ splash_seasonal_image_processing คุณจึงเพิ่มระยะเวลาของการติดตามนี้ลงในกระดานเมตริกได้ที่ด้านบนของแท็บแดชบอร์ด

เช่นเดียวกับก่อนหน้านี้ ให้คลิกช่องเลือกเมตริกช่องใดช่องหนึ่งที่ว่างเปล่า ในหน้าต่างกล่องโต้ตอบ ให้เลือกประเภทการติดตามการติดตามที่กำหนดเองและชื่อการติดตาม splash_seasonal_image_processing สุดท้าย คลิกเลือกเมตริกเพื่อเพิ่มเมตริกนี้ลงในบอร์ดเมตริก

7fb64d2340410576.png

  1. คุณตรวจสอบข้อมูลของ splash_screen_trace อย่างละเอียดเพื่อยืนยันความแตกต่างเพิ่มเติมได้ คลิกการ์ด splash_screen_trace ในกระดานเมตริก แล้วคลิกดูรายละเอียดเมตริก

b1c275c30679062a.png

  1. ในหน้ารายละเอียด คุณจะเห็นรายการแอตทริบิวต์ที่ด้านซ้ายล่าง รวมถึงแอตทริบิวต์ที่กำหนดเองที่สร้างไว้ก่อนหน้านี้ คลิกแอตทริบิวต์ที่กำหนดเอง seasonal_image_url_attribute เพื่อดูระยะเวลาหน้าจอแนะนำสำหรับ URL รูปภาพตามฤดูกาลแต่ละรายการทางด้านขวา

8fa1a69019bb045e.png

  1. ค่าระยะเวลาหน้าจอแนะนำอาจต่างจากที่แสดงในภาพหน้าจอด้านบนเล็กน้อย แต่คุณควรมีระยะเวลานานขึ้นเมื่อดาวน์โหลดภาพจาก URL เมื่อเทียบกับการใช้รูปภาพเริ่มต้น (แสดงเป็น "ไม่ได้ตั้งค่า")

ใน Codelab นี้ เหตุผลที่ทำให้ระยะเวลานานขึ้นนี้อาจดูตรงไปตรงมา แต่ในแอปจริงอาจไม่ชัดเจนนัก ข้อมูลระยะเวลาที่รวบรวมมาจากอุปกรณ์ที่แตกต่างกันซึ่งเรียกใช้แอปในสภาวะการเชื่อมต่อเครือข่ายที่หลากหลาย และเงื่อนไขเหล่านี้อาจแย่ลงกว่าที่คุณคาดไว้ มาดูวิธีตรวจสอบปัญหานี้กันหากเป็นสถานการณ์ที่เกิดขึ้นจริง

  1. คลิกประสิทธิภาพที่ด้านบนของหน้าเพื่อกลับไปยังแท็บหลักแดชบอร์ด 640b696b79d90103.png
  2. คลิกแท็บคำขอเครือข่ายในตารางการติดตามที่ด้านล่างของหน้า ในตารางนี้ คุณจะเห็นคำขอเครือข่ายทั้งหมดจากแอปของคุณรวมอยู่ในรูปแบบ URL รวมถึงรูปแบบ URL ของ images.unsplash.com/** หากคุณเปรียบเทียบค่าของเวลาในการตอบกลับนี้กับเวลาโดยรวมที่ใช้ในการดาวน์โหลดและประมวลผลรูปภาพ (เช่น ระยะเวลาของการติดตาม splash_seasonal_image_processing) คุณจะเห็นว่าใช้เวลาไปกับการดาวน์โหลดรูปภาพเป็นอย่างมาก

6f92ce0f23494507.png

ผลการสืบค้นประสิทธิภาพ

เมื่อใช้การตรวจสอบประสิทธิภาพของ Firebase คุณเห็นผลกระทบต่อไปนี้ต่อผู้ใช้ปลายทางที่เปิดใช้ฟีเจอร์ใหม่

  1. เวลาที่ใช้ใน SplashScreenActivity เพิ่มขึ้น
  2. ระยะเวลา splash_seasonal_image_processing สูงมาก
  3. ความล่าช้าเกิดจากเวลาในการตอบสนองสำหรับการดาวน์โหลดรูปภาพและเวลาประมวลผลที่เกี่ยวข้องซึ่งจำเป็นต้องใช้สำหรับรูปภาพ

ในขั้นตอนถัดไป คุณจะลดผลกระทบต่อประสิทธิภาพโดยย้อนกลับฟีเจอร์และระบุวิธีปรับปรุงการใช้งานฟีเจอร์ได้

10. ย้อนกลับฟีเจอร์

การเพิ่มจำนวนผู้ใช้ ไม่เป็นที่น่าพอใจสำหรับการรอระหว่างหน้าจอเริ่มต้น ประโยชน์ที่สำคัญอย่างหนึ่งของการกำหนดค่าระยะไกลคือความสามารถในการหยุดชั่วคราวและย้อนกลับการเปิดตัวโดยไม่ต้องเผยแพร่อีกเวอร์ชันหนึ่งให้กับผู้ใช้ วิธีนี้จะช่วยให้คุณตอบสนองต่อปัญหาได้อย่างรวดเร็ว (เช่น ปัญหาด้านประสิทธิภาพที่พบในขั้นตอนสุดท้าย) และลดจำนวนผู้ใช้ที่ไม่พึงพอใจได้

เพื่อลดความเสี่ยงที่คุณจะรีเซ็ตเปอร์เซ็นไทล์ของการเปิดตัวกลับไปเป็น 0 เพื่อให้ผู้ใช้ทั้งหมดของคุณเห็นภาพเริ่มต้นอีกครั้ง

  1. กลับไปที่หน้าการกำหนดค่าระยะไกลในคอนโซล Firebase
  2. คลิกเงื่อนไขที่ด้านบนของหน้า
  3. คลิกเงื่อนไข Seasonal image rollout ที่คุณเพิ่มไว้ก่อนหน้านี้
  4. เปลี่ยนเปอร์เซ็นไทล์เป็น 0%
  5. คลิกบันทึกเงื่อนไข
  6. คลิกเผยแพร่การเปลี่ยนแปลง และยืนยันการเปลี่ยนแปลง

18c4f1cbac955a04.png

รีสตาร์ทแอปใน Android Studio แล้วคุณจะเห็นหน้าจอหลักเดิมสถานะว่างเปล่า:

d946cab0df319e50.png

11. แก้ไขปัญหาด้านประสิทธิภาพ

คุณค้นพบก่อนหน้านี้ใน Codelab ว่าการดาวน์โหลดรูปภาพสำหรับหน้าจอแนะนำทำให้แอปทำงานช้าลง เมื่อเข้าไปดูรูปภาพที่ดาวน์โหลดอย่างละเอียด คุณจะเห็นว่าคุณกำลังใช้ความละเอียดเดิมของรูปภาพ ซึ่งใหญ่กว่า 2 MB วิธีแก้ไขปัญหาด้านประสิทธิภาพอย่างรวดเร็วอย่างหนึ่งคือการลดคุณภาพลงเป็นความละเอียดที่เหมาะสมมากขึ้น เพื่อให้รูปภาพใช้เวลาดาวน์โหลดน้อยลง

นำค่าการกำหนดค่าระยะไกลมาใช้อีกครั้ง

  1. กลับไปที่หน้าการกำหนดค่าระยะไกลในคอนโซล Firebase
  2. คลิกไอคอนแก้ไขของพารามิเตอร์ seasonal_image_url
  3. อัปเดตค่าสำหรับการเปิดตัวรูปภาพตามฤดูกาลเป็น https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 แล้วคลิกบันทึก

828dd1951a2ec4a4.png

  1. คลิกแท็บเงื่อนไขที่ด้านบนของหน้า
  2. คลิกการเปิดตัวรูปภาพตามฤดูกาล แล้วตั้งค่าเปอร์เซ็นไทล์กลับไปเป็น 100%
  3. คลิกบันทึกเงื่อนไข

1974fa3bb789f36c

  1. คลิกปุ่มเผยแพร่การเปลี่ยนแปลง

12. ทดสอบการแก้ไขและตั้งค่าการแจ้งเตือน

เรียกใช้แอปในเครื่อง

เรียกใช้แอปอีกครั้งเมื่อตั้งค่าการกำหนดค่าใหม่ให้ใช้ URL รูปภาพการดาวน์โหลดอื่น คราวนี้ คุณจะสังเกตเห็นว่าเวลาที่ใช้ในหน้าจอแนะนำสั้นกว่าเดิม

b0cc91b6e48fb842.png

ดูประสิทธิภาพของการเปลี่ยนแปลง

กลับไปที่หน้าแดชบอร์ดประสิทธิภาพในคอนโซล Firebase เพื่อดูลักษณะของเมตริก

  1. โดยครั้งนี้คุณจะใช้ตารางการติดตามเพื่อไปยังหน้ารายละเอียด ที่ด้านล่างของตารางการติดตาม ในแท็บการติดตามที่กำหนดเอง ให้คลิกการติดตามที่กำหนดเอง splash_seasonal_image_processing เพื่อดูมุมมองที่ละเอียดมากขึ้นของเมตริกระยะเวลาอีกครั้ง

2d7aaca03112c062.png

  1. คลิกแอตทริบิวต์ที่กำหนดเอง seasonal_image_url_attribute เพื่อดูรายละเอียดแอตทริบิวต์ที่กำหนดเองอีกครั้ง หากวางเมาส์เหนือ URL คุณจะเห็นค่าที่ตรงกับ URL ใหม่ของรูปภาพที่ลดขนาดลง: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (โดยมี ?w=640 ต่อท้าย) ค่าระยะเวลาที่เชื่อมโยงกับรูปภาพนี้สั้นกว่าค่าสำหรับรูปภาพก่อนหน้าพอสมควรสำหรับผู้ใช้ของคุณ

10e30c037a4237a2.png

  1. ตอนนี้คุณได้ปรับปรุงประสิทธิภาพของหน้าจอแนะนําแล้ว คุณจึงตั้งค่าการแจ้งเตือนเมื่อมีการติดตามเกินเกณฑ์ที่ตั้งไว้ได้ เปิดแดชบอร์ดประสิทธิภาพ แล้วคลิกไอคอนเมนูรายการเพิ่มเติม (จุด 3 จุด) สำหรับ splash_screen_trace แล้วคลิกการตั้งค่าการแจ้งเตือน

4bd0a2a1faa14479.png

  1. คลิกปุ่มเปิด/ปิดเพื่อเปิดใช้การแจ้งเตือนระยะเวลา ตั้งค่าเกณฑ์ให้สูงกว่าค่าที่คุณเห็นเล็กน้อย เพื่อที่ว่าหาก Splash_screen_trace เกินเกณฑ์ คุณจะได้รับอีเมล
  1. คลิกบันทึกเพื่อสร้างการแจ้งเตือน เลื่อนลงไปที่ตารางการติดตาม แล้วคลิกแท็บการติดตามที่กำหนดเองเพื่อดูว่ามีการเปิดใช้การแจ้งเตือนแล้ว

2bb93639e2218d1.png

13. ยินดีด้วย

ยินดีด้วย คุณได้เปิดใช้ Firebase Performance Monitoring SDK และรวบรวมการติดตามเพื่อวัดประสิทธิภาพของฟีเจอร์ใหม่ คุณได้ติดตามดูเมตริกประสิทธิภาพที่สำคัญสำหรับการเปิดตัวฟีเจอร์ใหม่ และตอบกลับได้อย่างรวดเร็วเมื่อพบปัญหาเกี่ยวกับประสิทธิภาพ ทั้งหมดนี้เป็นไปได้ด้วยความสามารถในการเปลี่ยนแปลงการกำหนดค่าด้วยการกำหนดค่าระยะไกลและตรวจสอบปัญหาด้านประสิทธิภาพแบบเรียลไทม์

สรุปประเด็นที่ได้พูดถึง

  • การเพิ่ม Firebase Performance Monitoring SDK ลงในแอป
  • การเพิ่มการติดตามโค้ดที่กำหนดเองลงในโค้ดเพื่อวัดฟีเจอร์ที่เจาะจง
  • การตั้งค่าพารามิเตอร์การกำหนดค่าระยะไกลและค่าแบบมีเงื่อนไขเพื่อควบคุม/เปิดตัวฟีเจอร์ใหม่
  • การทำความเข้าใจวิธีใช้หน้าแดชบอร์ดการตรวจสอบประสิทธิภาพเพื่อระบุปัญหาระหว่างการเปิดตัว
  • การตั้งค่าการแจ้งเตือนประสิทธิภาพเพื่อแจ้งให้คุณทราบเมื่อประสิทธิภาพของแอปเกินเกณฑ์ที่คุณตั้งไว้

ดูข้อมูลเพิ่มเติม