Jetpack Glance और Remote Compose का इस्तेमाल करके, टाइल को Wear विजेट में बदलना

नमस्ते दोस्तो.

मेरा नाम फ़्रैंक है और मैं Wear OS के लिए, एक नज़र में जानकारी देने वाली सुविधाओं की टीम का लीडर हूं.

स्मार्टवॉच, आपके उपयोगकर्ताओं के लिए ज़रूरी और पूरे दिन साथ रहने वाली डिवाइस हैं. आज हम आपको Wear OS के नए विजेट के अनुभव का फ़ायदा लेने का तरीका बताएंगे.

हम दो चीज़ों पर ध्यान देंगे. हम आपके ऐप्लिकेशन की सबसे अहम सुविधाओं को सीधे आपके उपयोगकर्ताओं की कलाई पर उपलब्ध कराने की कोशिश करेंगे. इसके लिए, हम नए एपीआई का इस्तेमाल करेंगे. ये एपीआई इस तरह से डिज़ाइन किए गए हैं कि Android डेवलपर को Wear OS के लिए ऐप्लिकेशन बनाना आसान और जाना-पहचाना लगे.

आज मेरे साथ स्टेज पर मेरे शानदार कलीग और डेस्क बडी यूरी मौजूद हैं. वे बताएंगे कि हम इस काम को कैसे कर रहे हैं.

नमस्ते, मैं यूरी शिम्के हूं.

मैं Wear OS टीम में एक इंजीनियर हूं. मेरा मुख्य फ़ोकस, Remote Compose API पर काम करना है.

आज मैं आपको रिमोट कंपोज़ के बारे में खास जानकारी दूंगा. साथ ही, टाइल से Wear विजेट पर माइग्रेट करने की प्रोसेस के बारे में भी बताऊंगा.

अब मैं आपको फ़्रैंक के पास वापस ले चलता हूं.

बहुत बढ़िया.

धन्यवाद, यूरी.

हम Wear OS के लिए विजेट की सुविधा लॉन्च कर रहे हैं. इससे Android विजेट के यूनिफ़ाइड नेटवर्क में, स्मार्टवॉच के लिए भी विजेट उपलब्ध हो जाएंगे. इसके लिए, हम फ़ुल-स्क्रीन टाइल को Wear OS के लिए विजेट में बदल रहे हैं.

इन सुविधाओं को अब Jetpack Glance का इस्तेमाल करके बनाया गया है. इसलिए, आपको पता चलेगा कि यह वही इन्फ़्रास्ट्रक्चर है जिसका इस्तेमाल मोबाइल विजेट के लिए किया जाता है.

आपको दिखेगा कि आने वाले समय में, Wear के लिए ऐप्लिकेशन बनाना आपके लिए और भी आसान हो जाएगा.

इन अनुभवों को बेहतर बनाने के लिए, हम यूज़र इंटरफ़ेस (यूआई) स्टैक को बेहतर बना रहे हैं.

Wear विजेट, Remote Compose की मदद से काम करते हैं. यह रिमोट यूज़र इंटरफ़ेस (यूआई) के लिए एक नया Android फ़्रेमवर्क है.

इसका मतलब है कि अब Jetpack Compose के साथ काम करने वाले डिक्लेरेटिव एपीआई का इस्तेमाल करके, ऐप्लिकेशन के बाहर के अनुभव बनाए जा सकते हैं. जैसे, विजेट.

Remote Compose, विजेट में मॉडर्न ग्राफ़िक्स और रिस्पॉन्सिव लेआउट जोड़ता है. साथ ही, यह पक्का करता है कि विजेट की परफ़ॉर्मेंस और बैटरी लाइफ़ बेहतर हो.

यूज़र इंटरफ़ेस (यूआई) को ऐप्लिकेशन प्रोसेस से अलग करने पर, आपके विजेट सुरक्षित तरीके से सीरियलाइज़ हो जाते हैं. साथ ही, उन्हें कई तरह के Android डिवाइसों पर आसानी से रेंडर किया जा सकता है. माफ़ करें.

इसका मतलब है कि इस बेहतरीन अनुभव को, रिमोट से कंट्रोल किए जा सकने वाले उन सभी डिवाइसों पर आसानी से उपलब्ध कराया जा सकता है जिन पर यह सुविधा काम करती है.

टाइल से विजेट पर स्विच करने की प्रोसेस को आसान बनाने के लिए, हम कंटेनर के दो स्टैंडर्ड साइज़ उपलब्ध करा रहे हैं: छोटा और बड़ा.

इन्हें दो-बाय-एक और दो-बाय-दो ग्रिड-आधारित विजेट फ़ॉर्मैट के हिसाब से डिज़ाइन किया गया है. आपने मोबाइल पर विजेट बनाते समय, पहले भी इनका इस्तेमाल किया होगा.

Wear 7 से, कुछ हार्डवेयर मैन्युफ़ैक्चरर के डिवाइसों पर, Wear विजेट अब वर्टिकल स्क्रोलिंग ट्रे में दिखेंगे. इनमें अन्य ऐप्लिकेशन के विजेट भी दिखेंगे.

उदाहरण के लिए, Samsung Galaxy Watch पर Wear विजेट इस तरह दिखते हैं.

प्लैटफ़ॉर्म का आर्किटेक्चर, वर्टिकल स्क्रोलिंग ट्रे के साथ काम करने के लिए बनाया गया है. ऐसा इसलिए, क्योंकि आने वाले समय में हार्डवेयर मैन्युफ़ैक्चरर इस पैटर्न को अपनाएंगे.

साथ ही, आपको किसी भी उपयोगकर्ता या मौजूदा उपयोगकर्ता को पीछे छोड़ने की चिंता करने की ज़रूरत नहीं है.

Jetpack Glance Wear API, Wear 4 तक के पुराने सिस्टम के साथ काम करने की सुविधा के लिए डिज़ाइन किए गए हैं.

विजेट या टाइल की हॉरिज़ॉन्टल ट्रे के साथ काम करने वाले पुराने डिवाइसों पर, सिस्टम आपके लिए इसे मैनेज करेगा.

आपको अपने कोड में सिर्फ़ यह बताना होगा कि आपको फ़ुल-स्क्रीन मोड की सुविधा चाहिए. इसके बाद, सिस्टम आपके बड़े विजेट को इन डिवाइसों पर फ़ुल-स्क्रीन वाली ट्रेडिशनल टाइल के तौर पर दिखाएगा.

अब यूरी, कोड के बारे में बताएंगे. इससे आपको पता चलेगा कि मौजूदा टाइल को Wear विजेट में कैसे माइग्रेट किया जा सकता है.

धन्यवाद, फ़्रैंक.

अगर आपको Wear के लिए नया विजेट बनाना है, तो यह बहुत आसान है.

आपको बस GlanceWearWidgetService को तय करना होगा और Remote Compose का इस्तेमाल करके अपना यूज़र इंटरफ़ेस (यूआई) बनाना होगा.

हालांकि, अगर आपके ऐप्लिकेशन में पहले से ही प्रोडक्शन में कोई टाइल मौजूद है, तो आपको अपनी सेवाओं, यूज़र इंटरफ़ेस (यूआई), और डेटा, दोनों को माइग्रेट करना होगा.

इस बदलाव को आसान बनाने के लिए, हमने मौजूदा उपयोगकर्ताओं को बेहतर अनुभव देने के तरीके उपलब्ध कराए हैं.

सेवा के लिए, दो रणनीतियों में से किसी एक को चुना जा सकता है: ड्यूअल सर्विस या सिंगल सर्विस.

हमारा सुझाव है कि आप दोनों सेवाओं का इस्तेमाल करें. इससे Wear OS के पुराने डिवाइसों के लिए, मौजूदा TileService का इस्तेमाल जारी रखा जा सकेगा. साथ ही, Wear OS 7 और इसके बाद के वर्शन के लिए, नई GlanceWearWidgetService को जोड़ा जा सकेगा.

इसके उलट, सिंगल सर्विस का इस्तेमाल करने पर, आपको एक नया GlanceWearWidgetService बनाना होगा. यह दोनों प्रोटोकॉल को हैंडल करता है. साथ ही, यह कंपैटबिलिटी मोड में चलता है, ताकि पुराने डिवाइसों पर आपके विजेट को टाइल में बदला जा सके.

दोनों ही मामलों में, आपके उपयोगकर्ताओं तक आपकी पहुंच बनी रहेगी.

इससे सिर्फ़ इस बात पर असर पड़ता है कि आपको आगे कौनसा कोड मैनेज करना है.

हमने Android डेवलपर साइट पर पूरी जानकारी वाला दस्तावेज़ पब्लिश किया है. इसमें बताया गया है कि इन दोनों पैटर्न का इस्तेमाल कब और कैसे करना है.

इस लेख को पढ़ें और जानें कि आपके ऐप्लिकेशन के लिए कौनसी रणनीति सबसे सही है.

चलिए, अब यूज़र इंटरफ़ेस (यूआई) लेयर के बारे में बात करते हैं.

माइग्रेट करते समय, आपका मेंटल मॉडल बदल जाता है.

पहले, टाइल के लिए ProtoLayout का इस्तेमाल किया जाता था. यह एक ऐसी लाइब्रेरी है जिसे खास तौर पर Wear टाइल के लिए बनाया गया है.

दूसरी ओर, Wear Widgets को Remote Compose पर बनाया गया है.

Remote Compose, Jetpack Compose यूज़र इंटरफ़ेस (यूआई) के जैसे ही काम करता है. यह उसी कोर कंपाइलर और रनटाइम का इस्तेमाल करता है.

इसे इस तरह से डिज़ाइन किया गया है कि यह Compose यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी, जैसे कि Foundation और Material 3 से काफ़ी मिलती-जुलती है.

हालांकि, बॉक्स, कॉलम या टेक्स्ट के बजाय, आपको उन्हें RemoteBox, RemoteColumn या RemoteText से बदलना होगा.

इस मामले में, आपको "remote" लिखने की आदत हो जाएगी.

साथ ही, आपके वर्कफ़्लो को तेज़ करने के लिए, हमने इस्तेमाल के लिए तैयार Remote Compose कॉम्पोनेंट का पूरा सेट शामिल किया है. इन्हें खास तौर पर विजेट के लिए डिज़ाइन किया गया है.

इसका मतलब है कि Wear Material 3 के आपके मौजूदा डिज़ाइन, विजेट के साथ आसानी से काम कर सकते हैं. इनमें Figma में मौजूद डिज़ाइन भी शामिल हैं. इससे इंजीनियर और डिज़ाइनर, दोनों के लिए इन्हें समझना आसान हो जाता है.

यह देखने के लिए कि ये फ़्रेमवर्क कितने अलाइन हैं, आइए एक उदाहरण देखें.

हम Material 3 के स्विच बटन के ऊपर, अपना ऐप्लिकेशन कॉम्पोनेंट बनाएंगे.

बाईं ओर, स्टैंडर्ड Wear Compose कॉम्पोनेंट है, जिसे आपको अपने ऐप्लिकेशन में लिखना होगा. दाईं ओर, Remote Compose वर्शन है.

// Wear Compose
@Composable
fun HistoryEraserButton(
  onClick: () -> Unit,
  modifier: Modifier = Modifier,
  checked: Boolean = true,
  onCheckedChange: (Boolean) -> Unit = {},
)

// Wear RemoteCompose
@RemoteComposable
@Composable
fun RemoteHistoryEraserButton(
  onClick: Action,
  modifier: RemoteModifier = RemoteModifier,
  checked: RemoteBoolean = true.rb,
  onCheckedChange: Action = Action.Empty,
)

ध्यान दें कि ये पैटर्न कितने मिलते-जुलते हैं.

हालांकि, Remote Compose कोड लिखते समय, आपको RemoteComposable एनोटेशन का इस्तेमाल करना होगा.

साथ ही, जहां मॉडिफ़ायर और बूलियन जैसे जाने-पहचाने पैरामीटर का इस्तेमाल किया जाता है वहां उनके बराबर के Remote Compose टाइप होते हैं, जैसे कि RemoteModifier और RemoteBoolean.

साथ ही, लैम्ब्डा के बजाय ऐक्शन का इस्तेमाल किया जाता है.

लैम्ब्डा के अंदर कोड को लागू करने के बजाय, आपको कोई कार्रवाई तय करनी होगी. जैसे, कोई पेंडिंग इंटेंट लॉन्च करना, किसी सेवा को कॉल करना या कोई वैल्यू अपडेट करना.

चलिए, अब कॉम्पोनेंट के मुख्य हिस्से पर चलते हैं.

आपको यह भी दिखेगा कि थीम भी अलाइन की गई है.

Remote Compose कॉम्पोनेंट पर Material 3 की कलर स्कीम को ठीक उसी तरह लागू किया जा सकता है जिस तरह स्टैंडर्ड Compose में किया जाता है. इससे आपका विजेट, आपके ऐप्लिकेशन की ब्रैंडिंग से पूरी तरह मैच करता है.

// Wear Compose
  val colors = MaterialTheme.colorScheme
  SplitSwitchButton(
    checked = checked,
    onCheckedChange = onCheckedChange,
    toggleContentDescription = "Arm Eraser",
    onContainerClick = onClick,
    modifier = modifier.fillMaxWidth(),
    colors =
      SwitchButtonDefaults.splitSwitchButtonColors(
        checkedContainerColor = colors.errorContainer, …
      ),
    label = { Text("History Eraser") },
    secondaryLabel = { Text("Don't touch it!") },
  )

// Wear RemoteCompose
  val colors = RemoteMaterialTheme.colorScheme
  RemoteSplitSwitchButton(
    checked = checked,
    onCheckedChange = onCheckedChange,
    toggleContentDescription = "Arm Eraser".rs,
    onContainerClick = onClick,
    modifier = modifier.fillMaxWidth(),
    colors =
      RemoteSplitSwitchButtonDefaults.splitSwitchButtonColors(
        checkedContainerColor = colors.errorContainer, …
      ),
    label = { RemoteText("History Eraser".rs) },
    secondaryLabel = { RemoteText("Don't touch it!".rs) },
  )

आखिर में, चलिए नतीजा देखते हैं. इससे आपको अपनी उम्मीद के मुताबिक यूज़र इंटरफ़ेस (यूआई) मिलता है. यह एक साफ़, रिस्पॉन्सिव, और ऐनिमेशन वाला टॉगल बटन होता है.

दोनों में अंतर बताना मुश्किल है.

हमने Wear विजेट के लिए, Compose की झलक देखने की सुविधा जोड़ी है. इससे आपको विजेट के लेआउट डिज़ाइन करने, उनमें बदलाव करने, और उनकी पुष्टि करने में मदद मिलेगी. इसके लिए, आपको हर बार डिवाइस या एम्युलेटर पर विजेट चलाने की ज़रूरत नहीं पड़ेगी.

विजेट, ओईएम के हिसाब से कंटेनर की सीमाओं पर निर्भर करते हैं. जैसे, साइज़, आकार, पैडिंग, कोने का दायरा. इसलिए, हम स्टैंडर्ड झलक एनोटेशन पर आधारित विजेट बनाते हैं. हालांकि, इन कॉन्फ़िगरेशन को इंजेक्ट करने के लिए, एक अतिरिक्त पैरामीटर प्रोवाइडर का इस्तेमाल किया जाता है.

@Preview(name = "Squircle Preview", device = "spec:width=1000dp,height=1000dp,dpi=320")
@Composable
fun WeatherWidgetSquirclePreview(
    @PreviewParameter(SquircleAllWidgetPreviewParams::class) params: WearWidgetParams
) = WearWidgetPreview(MockWeatherWidget(65, WeatherCondition.CLOUDY), params)

@Preview(name = "Round Preview", device = "spec:width=1000dp,height=1000dp,dpi=320")
@Composable
fun WeatherWidgetRoundPreview(
    @PreviewParameter(RoundAllWidgetPreviewParams::class) params: WearWidgetParams
) = WearWidgetPreview(MockWeatherWidget(65, WeatherCondition.CLOUDY), params)

लाइब्रेरी में, पहले से कॉन्फ़िगर किए गए PreviewParameter प्रोवाइडर के ऐसे इंप्लिमेंटेशन होते हैं जो असल दुनिया के Wear OS डिवाइसों से मैच करते हैं.

झलक दिखाने वाले इन एनोटेशन की मदद से, अलग-अलग हार्डवेयर शेप में अपने लेआउट की आसानी से पुष्टि की जा सकती है.

अपने लेआउट की जांच करने के अलावा, इन झलक का इस्तेमाल करके स्टैटिक इमेज जनरेट की जा सकती हैं. ये इमेज, उपयोगकर्ता के डिवाइस पर मौजूद विजेट पिकर के लिए ज़रूरी होती हैं.

@Preview(name = "Widget Picker Preview", device = "spec:width=1000dp,height=1000dp,dpi=320")
@Composable
fun WeatherWidgetRectangularPreview(
    @PreviewParameter(RectangularAllWidgetPreviewParams::class) params: WearWidgetParams
) = WearWidgetPreview(MockWeatherWidget(65, WeatherCondition.CLOUDY), params)

लाइब्रेरी, रेक्टैंगल शेप में झलक दिखाने के लिए एक पैरामीटर उपलब्ध कराती है. यह पैरामीटर, बिना क्रॉप किए गए रेक्टैंगल कंटेनर की तरह काम करता है.

अगर आपको यह देखना है कि यह सुविधा असल में कैसे काम करती है, तो हमने Horologist मीडिया सैंपल के तौर पर मिले ऐप्लिकेशन को रीफ़्रेश किया है. इसमें एक नया विजेट शामिल किया गया है, जो इस एपीआई को दिखाता है.

हम आपको मीडिया विजेट के छोटे और बड़े, दोनों वर्शन जोड़ने का तरीका बताएंगे.

GitHub पर जाकर, लेगसी ProtoLayout कोड और नए Remote Compose को लागू करने के तरीके की तुलना देखें.

हमें उम्मीद है कि आपको यह पसंद आएगा.

आखिर में, एआई के बारे में बात किए बिना यह बातचीत अधूरी रह जाएगी.

माइग्रेशन की प्रोसेस को तेज़ करने के लिए, हमने GitHub पर टाइल से विजेट पर माइग्रेट करने की नई स्किल पब्लिश की है.

इसका इस्तेमाल अपनी पसंद के एजेंट के साथ किया जा सकता है. इसके अलावा, Android का सीएलआई का इस्तेमाल करके, इसे सीधे Android Studio में जोड़ा जा सकता है.

android skills add wear-widgets
android skills add --all

अब मैं फ़्रांसवा को सेशन सौंपता हूं, ताकि वे इसे खत्म कर सकें.

धन्यवाद.

धन्यवाद, यूरी.

जैसा कि आपने देखा, टाइल को Wear विजेट में बदलना बहुत आसान है.

Jetpack Glance Wear और Remote Compose पर माइग्रेट करने का मतलब सिर्फ़ यूज़र इंटरफ़ेस (यूआई) को अपडेट करना नहीं है, बल्कि Android विजेट के ज़्यादा बेहतर नेटवर्क में शामिल होना है.

अब Jetpack Compose के साथ पूरी तरह से अलाइन किए गए मॉडर्न, डिक्लेरेटिव फ़्रेमवर्क का इस्तेमाल करके, पुराने सिस्टम के साथ काम करने वाले शानदार विजेट बनाए जा सकते हैं.

आज ही अपनी टाइल माइग्रेट करना शुरू करें. इसके लिए, Android Developers साइट पर जाएं और शुरुआती निर्देश पढ़ें. यहां आपको पूरी जानकारी मिलेगी.

हमें आपके बनाए गए ऐसे ऐप्लिकेशन देखने का इंतज़ार रहेगा जो स्मार्टवॉच पर आसानी से इस्तेमाल किए जा सकें और जिनमें ज़रूरी जानकारी एक नज़र में दिख सके.

आज सुबह हमारे साथ जुड़ने के लिए आपका बहुत-बहुत धन्यवाद. हमें उम्मीद है कि आपको इस कॉन्फ़्रेंस का बाकी हिस्सा भी पसंद आएगा.

धन्यवाद.