Ink API अब बीटा वर्शन में उपलब्ध है. इसे आपके ऐप्लिकेशन में इंटिग्रेट किया जा सकता है. यह उपलब्धि, डेवलपर से मिले सुझावों की वजह से हासिल हुई है. इससे एपीआई की परफ़ॉर्मेंस, स्थिरता, और विज़ुअल क्वालिटी में लगातार सुधार हो रहा है.

Google Docs, Pixel Studio, Google Photos, Chrome PDF, YouTube Effect Maker जैसे Google ऐप्लिकेशन और Android की यूनीक सुविधाएं, जैसे कि 'सर्कल बनाकर खोजें',सभी नए एपीआई का इस्तेमाल करती हैं. 

इस माइलस्टोन को यादगार बनाने के लिए, हमें Cahier लॉन्च करते हुए खुशी हो रही है. यह नोट लेने वाला एक ऐप्लिकेशन सैंपल है. इसे सभी साइज़ के Android डिवाइसों के लिए ऑप्टिमाइज़ किया गया है. खास तौर पर, टैबलेट और फ़ोल्ड किए जा सकने वाले फ़ोन के लिए.

Cahier क्या है?

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

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

इस सैंपल में दिखाई गई मुख्य सुविधाएं ये हैं:

• नोट बनाने के अलग-अलग तरीके: इसमें कॉन्टेंट बनाने के ऐसे सिस्टम को लागू करने का तरीका बताया गया है जो एक ही नोट में कई फ़ॉर्मैट में कॉन्टेंट बनाने की सुविधा देता है. जैसे, टेक्स्ट, फ़्रीफ़ॉर्म ड्रॉइंग, और इमेज अटैचमेंट.
• इंक करने के क्रिएटिव टूल: Ink API का इस्तेमाल करके, ड्राइंग का बेहतरीन अनुभव मिलता है. इसमें बिना रुकावट के प्रोसेसिंग होती है. इस सैंपल में, अलग-अलग ब्रशिंग, कलर पिकर, पहले जैसा करें/दोबारा करें सुविधा, और मिटाने वाले टूल को इंटिग्रेट करने का एक व्यावहारिक उदाहरण दिया गया है.
• खींचें और छोड़ें सुविधा के साथ फ़्लूड कॉन्टेंट इंटिग्रेशन: इसमें बताया गया है कि खींचें और छोड़ें सुविधा का इस्तेमाल करके, आने वाले और जाने वाले कॉन्टेंट को कैसे मैनेज किया जाता है. इसमें, दूसरे ऐप्लिकेशन से ड्रॉप की गई इमेज स्वीकार करना और उपयोगकर्ताओं को आसानी से शेयर करने के लिए, आपके ऐप्लिकेशन से कॉन्टेंट को बाहर खींचने की सुविधा देना शामिल है.
• नोट व्यवस्थित करना: नोट को पसंदीदा के तौर पर मार्क करें, ताकि उन्हें आसानी से ऐक्सेस किया जा सके. व्यू को फ़िल्टर करके, व्यवस्थित रहें.
• ऑफ़लाइन फ़र्स्ट आर्किटेक्चर:  इसे ऑफ़लाइन फ़र्स्ट आर्किटेक्चर का इस्तेमाल करके बनाया गया है. इसमें Room का इस्तेमाल किया गया है. इससे यह पक्का किया जाता है कि सारा डेटा स्थानीय तौर पर सेव हो और ऐप्लिकेशन बिना इंटरनेट कनेक्शन के पूरी तरह से काम करता रहे.
• एक साथ कई विंडो और इंस्टेंस इस्तेमाल करने की सुविधा: इसमें बताया गया है कि एक साथ कई इंस्टेंस इस्तेमाल करने की सुविधा कैसे काम करती है. इससे आपके ऐप्लिकेशन को कई विंडो में लॉन्च किया जा सकता है, ताकि उपयोगकर्ता अलग-अलग नोट पर एक साथ काम कर सकें. इससे बड़ी स्क्रीन पर काम करने की क्षमता और क्रिएटिविटी बढ़ती है.
• सभी स्क्रीन के लिए अडैप्टिव यूज़र इंटरफ़ेस (यूआई): यूज़र इंटरफ़ेस (यूआई), ListDetailPaneScaffold और NavigationSuiteScaffold का इस्तेमाल करके, अलग-अलग स्क्रीन साइज़ और ओरिएंटेशन के हिसाब से अपने-आप अडजस्ट हो जाता है. इससे फ़ोन, टैबलेट, और फ़ोल्ड किए जा सकने वाले डिवाइसों पर उपयोगकर्ताओं को बेहतर अनुभव मिलता है.
• सिस्टम के साथ बेहतर तरीके से इंटिग्रेट करना: इसमें यह गाइड दी गई है कि Android 14 और इसके बाद के वर्शन पर, अपने ऐप्लिकेशन को नोट लेने वाले डिफ़ॉल्ट ऐप्लिकेशन के तौर पर कैसे सेट करें. इसके लिए, आपको सिस्टम के सभी नोट इंटेंट का जवाब देना होगा. इससे, सिस्टम के अलग-अलग एंट्री पॉइंट से कॉन्टेंट को तुरंत कैप्चर किया जा सकेगा.

बड़ी स्क्रीन पर बेहतर प्रोडक्टिविटी और क्रिएटिविटी के लिए बनाया गया

शुरुआत में, हम इस सूचना में कुछ मुख्य सुविधाओं के बारे में बता रहे हैं. ये सुविधाएं, Cahier को क्रिएटिविटी और बेहतर तरीके से काम करने के लिए एक अहम संसाधन बनाती हैं.

अडैप्टिविटी की बुनियादी बातें

Cahier को शुरुआत से ही अडैप्टिव बनाया गया है. इस सैंपल में, material3-adaptive लाइब्रेरी का इस्तेमाल किया गया है. इसमें खास तौर पर, ListDetailPaneScaffold और NavigationSuiteScaffold का इस्तेमाल किया गया है, ताकि ऐप्लिकेशन के लेआउट को अलग-अलग स्क्रीन साइज़ और ओरिएंटेशन के हिसाब से आसानी से अडजस्ट किया जा सके. यह आधुनिक Android ऐप्लिकेशन के लिए एक ज़रूरी एलिमेंट है. Cahier में, इसे असरदार तरीके से लागू करने का एक उदाहरण दिया गया है.

Material 3 अडैप्टिव लाइब्रेरी की मदद से बनाया गया Cahier अडैप्टिव यूज़र इंटरफ़ेस

मुख्य एपीआई और इंटिग्रेशन दिखाना

इस सैंपल में, बेहतर ढंग से काम करने में मदद करने वाले ऐसे एपीआई दिखाए गए हैं जिनका इस्तेमाल अपने ऐप्लिकेशन में किया जा सकता है. इनमें ये एपीआई शामिल हैं:

• Ink API
• नोट जोड़ने की भूमिका
• एक साथ कई इंस्टेंस, एक साथ कई विंडो, और डेस्कटॉप विंडोविंग
• खींचें और छोड़ें

मुख्य एपीआई के बारे में ज़्यादा जानकारी

आइए, Cahier के दो मुख्य एपीआई के बारे में ज़्यादा जानें. Cahier, इन एपीआई को इंटिग्रेट करके नोट लेने की बेहतरीन सुविधा देता है.

Ink API की मदद से, नैचुरल इंक स्ट्रोक बनाने की सुविधा

स्टाइलस से इनपुट करने की सुविधा की मदद से, बड़ी स्क्रीन वाले डिवाइसों को डिजिटल नोटबुक और स्केचबुक में बदला जा सकता है. आपको बेहतर और नैचुरल इंक़िंग अनुभव देने के लिए, हमने Ink API को सैंपल का मुख्य हिस्सा बनाया है. Ink API की मदद से, बेहतरीन इंक स्ट्रोक आसानी से बनाए, रेंडर किए, और उनमें बदलाव किए जा सकते हैं. साथ ही, इसमें इंतज़ार का समय भी कम होता है.

Ink API में मॉड्यूलर आर्किटेक्चर होता है. इसलिए, इसे अपने ऐप्लिकेशन के स्टैक और ज़रूरतों के हिसाब से बनाया जा सकता है. एपीआई मॉड्यूल में ये शामिल हैं:

• लेखन मॉड्यूल (Compose - views): ये मॉड्यूल, रीयलटाइम में इंक इनपुट को मैनेज करते हैं. इससे डिवाइस पर कम से कम समय में स्मूद स्ट्रोक बनाए जा सकते हैं.
  • DrawingSurface में, Cahier ने हाल ही में लॉन्च किए गए InProgressStrokes कंपोज़ेबल का इस्तेमाल किया है. इससे स्टाइलस या टच इनपुट को रीयलटाइम में हैंडल किया जा सकता है. यह मॉड्यूल, पॉइंटर इवेंट कैप्चर करने और कम से कम इंतज़ार के समय में गीली स्याही के स्ट्रोक रेंडर करने के लिए ज़िम्मेदार होता है.
• स्ट्रोक मॉड्यूल: यह इंक इनपुट और उसके विज़ुअल को दिखाता है.  जब कोई उपयोगकर्ता लाइन खींचना पूरा कर लेता है, तब onStrokesFinished कॉलबैक, ऐप्लिकेशन को फ़ाइनल/ड्राई Stroke ऑब्जेक्ट उपलब्ध कराता है. यह अपरिवर्तनीय ऑब्जेक्ट, इंक स्ट्रोक को दिखाता है. इसे DrawingCanvasViewModel में मैनेज किया जाता है.
• रेंडरिंग मॉड्यूल: यह इंक स्ट्रोक को बेहतर तरीके से दिखाता है. इससे इन्हें Jetpack Compose या Android व्यू के साथ जोड़ा जा सकता है.
  • Cahier, मौजूदा और नए स्ट्रोक, दोनों को दिखाने के लिए CanvasStrokeRenderer का इस्तेमाल करता है. यह DrawingSurface में, ऐक्टिव ड्राइंग के लिए और DrawingDetailPanePreview में, नोट की स्टैटिक झलक दिखाने के लिए इस्तेमाल किया जाता है. यह मॉड्यूल, स्ट्रोक ऑब्जेक्ट को कैनवस पर आसानी से बनाता है.
• ब्रश मॉड्यूल (Compose - views): ये स्ट्रोक की विज़ुअल स्टाइल को तय करने का तरीका बताते हैं. हाल ही के अपडेट (alpha03 रिलीज़ के बाद) में, एक नया डैश वाली लाइन का ब्रश शामिल है. यह खास तौर पर, लैसो सिलेक्शन जैसी सुविधाओं के लिए उपयोगी है. DrawingCanvasViewModel, currentBrush के लिए स्थिति को सेव करता है. DrawingCanvas में मौजूद टूलबॉक्स की मदद से, लोग अलग-अलग तरह के ब्रश (जैसे, StockBrushes.pressurePen() या StockBrushes.highlighter()) चुन सकते हैं और उनके रंग बदल सकते हैं. ViewModel, Brush ऑब्जेक्ट को अपडेट करता है. इसके बाद, InProgressStrokes कंपोज़ेबल, नए स्ट्रोक के लिए इसका इस्तेमाल करता है.
• ज्यामिति मॉड्यूल (Compose - views): मिटाने और चुनने जैसी सुविधाओं के लिए, स्ट्रोक में बदलाव करने और उनका विश्लेषण करने में मदद करते हैं.
  • टूलबॉक्स में मौजूद मिटाने वाला टूल और DrawingCanvasViewModel में मौजूद फ़ंक्शन, ज्यामिति मॉड्यूल पर निर्भर करते हैं. इरेज़र चालू होने पर, यह उपयोगकर्ता के जेस्चर के पाथ के चारों ओर एक MutableParallelogram बनाता है. इसके बाद, मिटाने वाला टूल यह देखता है कि मौजूदा स्ट्रोक के बाउंडिंग बॉक्स और शेप के बीच कहां-कहां इंटरसेक्शन हो रहा है. इससे यह तय किया जाता है कि किन स्ट्रोक को मिटाना है. इससे मिटाने वाला टूल, सटीक तरीके से काम करता है और इसे इस्तेमाल करना आसान होता है.
• स्टोरेज मॉड्यूल: यह मॉड्यूल, इंक डेटा को बेहतर तरीके से क्रम से लगाने और क्रम से हटाने की सुविधाएं देता है. इससे डिस्क और नेटवर्क के साइज़ को काफ़ी हद तक कम किया जा सकता है. ड्रॉइंग सेव करने के लिए, Cahier अपने Room डेटाबेस में Stroke ऑब्जेक्ट सेव करता है. Converters में, सैंपल, स्टोरेज मॉड्यूल के encode फ़ंक्शन का इस्तेमाल करके, StrokeInputBatch (पॉइंट का रॉ डेटा) को ByteArray में बदलता है. बाइट ऐरे को ब्रशिंग प्रॉपर्टी के साथ JSON स्ट्रिंग के तौर पर सेव किया जाता है. नोट लोड होने पर, स्ट्रोक को फिर से बनाने के लिए decode फ़ंक्शन का इस्तेमाल किया जाता है.

इन मुख्य मॉड्यूल के अलावा, हाल ही के अपडेट में Ink API की क्षमताओं को बढ़ाया गया है:

• कस्टम BrushFamily ऑब्जेक्ट के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध नए एपीआई की मदद से डेवलपर, क्रिएटिव और यूनीक ब्रश टाइप बना सकते हैं. इससे पेंसिल और लेज़र पॉइंटर जैसे टूल के लिए ब्रश बनाने की संभावनाएं मिलती हैं.

Cahier, क्रिएटिविटी को बेहतर बनाने के लिए कस्टम ब्रश का इस्तेमाल करता है. इनमें नीचे दिखाया गया यूनीक म्यूज़िक ब्रश भी शामिल है.

Ink API के कस्टम ब्रश की मदद से बनाई गई रेनबो लेज़र

Ink API के कस्टम ब्रश की मदद से बनाया गया म्यूज़िक ब्रश

• Jetpack Compose के साथ काम करने वाले नेटिव मॉड्यूल, इंक करने की सुविधाओं को सीधे तौर पर Compose यूज़र इंटरफ़ेस (यूआई) में इंटिग्रेट करने की प्रोसेस को आसान बनाते हैं. इससे आपको ज़्यादा बेहतर और असरदार डेवलपमेंट का अनुभव मिलता है.

Ink API से कई फ़ायदे मिलते हैं. इसलिए, यह कस्टम तौर पर लागू किए गए समाधान की तुलना में, प्रॉडक्टिविटी और क्रिएटिविटी ऐप्लिकेशन के लिए सबसे सही विकल्प है:

• इस्तेमाल में आसान: Ink API, ग्राफ़िक और ज्यामिति की जटिलताओं को कम करता है. इससे आपको Cahier की मुख्य सुविधाओं पर फ़ोकस करने में मदद मिलती है.
• परफ़ॉर्मेंस: इसमें कम इंतज़ार के समय की सुविधा पहले से मौजूद होती है. साथ ही, रेंडरिंग को ऑप्टिमाइज़ किया जाता है. इससे इंक स्ट्रोक इस्तेमाल करने का अनुभव बेहतर और रिस्पॉन्सिव होता है.
• लचीलापन: मॉड्यूलर डिज़ाइन की वजह से, आपको अपनी ज़रूरत के हिसाब से कॉम्पोनेंट चुनने की सुविधा मिलती है. इससे Ink API को Cahier के आर्किटेक्चर में आसानी से इंटिग्रेट किया जा सकता है.

Ink API को पहले से ही Google के कई ऐप्लिकेशन में इस्तेमाल किया जा रहा है. जैसे, Docs में मार्कअप करने के लिए, 'सर्कल बनाकर ढूंढें' सुविधा के लिए, और Orion Notes और PDF Scanner जैसे पार्टनर ऐप्लिकेशन के लिए.

“सर्कल बनाकर ढूंढने की सुविधा (सीटीएस) के लिए, Ink API हमारी पहली पसंद था. Ink API को इंटिग्रेट करना बहुत आसान था, क्योंकि इसका दस्तावेज़ बहुत ज़्यादा जानकारी वाला है. इसकी मदद से, हम सिर्फ़ एक हफ़्ते में अपना पहला वर्किंग प्रोटोटाइप तैयार कर पाए. Ink में, कस्टम ब्रश टेक्सचर और ऐनिमेशन की सुविधा उपलब्ध है. इससे हमें स्ट्रोक डिज़ाइन को तुरंत दोहराने में मदद मिली.” - जॉर्डन कोमोडा, सॉफ़्टवेयर इंजीनियर - Google

नोट लेने की सुविधा देने वाले ऐप्लिकेशन को डिफ़ॉल्ट ऐप्लिकेशन के तौर पर सेट करना

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

Cahier में लागू करना

नोट्स की भूमिका को लागू करने के लिए, कुछ ज़रूरी चरण शामिल होते हैं. इन सभी को सैंपल में दिखाया गया है:

1. मेनिफ़ेस्ट में एलान: सबसे पहले, ऐप्लिकेशन को नोट लेने के इंटेंट को हैंडल करने की अपनी क्षमता का एलान करना होगा. Cahier, AndroidManifest.xml में android.intent.action.CREATE_NOTE कार्रवाई के लिए <intent-filter> शामिल करता है. इससे सिस्टम को यह सिग्नल मिलता है कि ऐप्लिकेशन, नोट की भूमिका के लिए संभावित उम्मीदवार है.
2. भूमिका की स्थिति की जांच करना: SettingsViewModel, मौजूदा स्थिति का पता लगाने के लिए Android के RoleManager का इस्तेमाल करता है. SettingsViewModel यह जांच करता है कि डिवाइस पर नोट की भूमिका उपलब्ध है या नहीं (isRoleAvailable) और Cahier के पास फ़िलहाल वह भूमिका है या नहीं (isRoleHeld). इस स्थिति को Kotlin फ़्लो का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) पर दिखाया जाता है.
3. भूमिका का अनुरोध करना: अगर भूमिका उपलब्ध है, लेकिन उपयोगकर्ता के पास नहीं है, तो Settings.kt फ़ाइल में उपयोगकर्ता को Button दिखता है. इस बटन पर क्लिक करने पर, ViewModel में मौजूद requestNotesRole फ़ंक्शन कॉल होता है. यह फ़ंक्शन, डिफ़ॉल्ट ऐप्लिकेशन की सेटिंग स्क्रीन खोलने के लिए एक इंटेंट बनाता है. इस स्क्रीन पर उपयोगकर्ता, Cahier को चुन सकता है. इस प्रोसेस को rememberLauncherForActivityResult एपीआई का इस्तेमाल करके मैनेज किया जाता है. यह एपीआई, इंटेंट लॉन्च करने और नतीजे पाने की प्रोसेस को मैनेज करता है.
4. यूज़र इंटरफ़ेस (यूआई) अपडेट करना: जब उपयोगकर्ता सेटिंग स्क्रीन से वापस आता है, तो ActivityResultLauncher कॉलबैक, ViewModel में मौजूद फ़ंक्शन को ट्रिगर करता है. इससे भूमिका की स्थिति अपडेट हो जाती है. साथ ही, यह पक्का हो जाता है कि यूज़र इंटरफ़ेस (यूआई) में यह सही तरीके से दिखे कि ऐप्लिकेशन अब डिफ़ॉल्ट ऐप्लिकेशन है या नहीं.

हमारे नोट लेने वाला ऐप्लिकेशन बनाने की गाइड में, अपने ऐप्लिकेशन में नोट की भूमिका को इंटिग्रेट करने का तरीका जानें.

Lenovo टैबलेट पर, नोट लेने के लिए डिफ़ॉल्ट ऐप्लिकेशन के तौर पर Cahier को फ़्लोटिंग विंडो में लॉन्च किया गया

एक अहम कदम: Lenovo ने नोट लेने की सुविधा चालू की

हमें यह बताते हुए खुशी हो रही है कि बड़ी स्क्रीन वाले Android डिवाइसों पर काम करने की सुविधा को बेहतर बनाने के लिए, हमने एक अहम कदम उठाया है: Lenovo ने Android 15 और इसके बाद के वर्शन वाले टैबलेट पर, Notes Role की सुविधा चालू कर दी है! इस अपडेट के बाद, अब नोट लेने वाले ऐप्लिकेशन को अपडेट किया जा सकता है. इससे, Lenovo के साथ काम करने वाले डिवाइसों का इस्तेमाल करने वाले लोग, इन ऐप्लिकेशन को डिफ़ॉल्ट ऐप्लिकेशन के तौर पर सेट कर पाएंगे. इससे उन्हें लॉक स्क्रीन से बिना किसी रुकावट के ऐक्सेस मिलेगा. साथ ही, वे सिस्टम लेवल पर कॉन्टेंट कैप्चर करने की सुविधाओं को अनलॉक कर पाएंगे.

एक प्रमुख ओईएम की ओर से यह प्रतिबद्धता, Android पर उपयोगकर्ता अनुभव को बेहतर बनाने में नोट की भूमिका के बढ़ते महत्व को दिखाती है. 

मल्टी-इंस्टेंस, मल्टी-विंडोइंग, और डेस्कटॉप विंडोइंग

बड़ी स्क्रीन पर बेहतर तरीके से काम करने के लिए, जानकारी और वर्कफ़्लो को असरदार तरीके से मैनेज करना ज़रूरी है. इसलिए, Cahier को Android की ऐडवांस विंडो की सुविधाओं के साथ काम करने के लिए बनाया गया है. इससे उपयोगकर्ताओं को एक ऐसा वर्कस्पेस मिलता है जो उनकी ज़रूरतों के हिसाब से काम करता है. यह ऐप्लिकेशन इन सुविधाओं के साथ काम करता है:

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

Pixel Tablet पर डेस्कटॉप विंडो मोड में चल रहा Cahier

हमने Cahier में इन सुविधाओं को इस तरह लागू किया है:

मल्टी-इंस्टेंस की सुविधा चालू करने के लिए, हमें सिस्टम को यह बताना था कि ऐप्लिकेशन को एक से ज़्यादा बार लॉन्च किया जा सकता है. इसके लिए, हमें AndroidManifest में MainActivity के एलान में PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI प्रॉपर्टी जोड़नी थी:

<activity

    android:name="com.example.cahier.MainActivity"

    android:exported="true"

    android:label="@string/app_name"

    android:theme="@style/Theme.MyApplication"

    android:showWhenLocked="true"

    android:turnScreenOn="true"

    android:resizeableActivity="true"

    android:launchMode="singleInstancePerTask">


    <property

        android:name="android.window.PROPERTY_SUPPORTS_MULTI_INSTANCE_SYSTEM_UI"

        android:value="true"/>

    ...

</activity>

इसके बाद, हमने ऐप्लिकेशन का नया इंस्टेंस लॉन्च करने के लिए लॉजिक लागू किया. CahierHomeScreen.kt में, जब कोई उपयोगकर्ता नई विंडो में नोट खोलने का विकल्प चुनता है, तो हम खास फ़्लैग के साथ एक नया इंटेंट बनाते हैं. ये फ़्लैग, सिस्टम को बताते हैं कि नई गतिविधि को कैसे लॉन्च करना है. FLAG_ACTIVITY_NEW_TASK, FLAG_ACTIVITY_MULTIPLE_TASK, और FLAG_ACTIVITY_LAUNCH_ADJACENT के कॉम्बिनेशन से यह पक्का होता है कि नोट, मौजूदा विंडो के साथ-साथ एक नई विंडो में खुले.

fun openNewWindow(activity: Activity?, note: Note) {

    val intent = Intent(activity, MainActivity::class.java)

    intent.putExtra(AppArgs.NOTE_TYPE_KEY, note.type)

    intent.putExtra(AppArgs.NOTE_ID_KEY, note.id)

    intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_MULTIPLE_TASK or

        Intent.FLAG_ACTIVITY_LAUNCH_ADJACENT


    activity?.startActivity(intent)

}

मल्टी-विंडो मोड के लिए, हमें सिस्टम को यह बताना था कि ऐप्लिकेशन का साइज़ बदला जा सकता है. इसके लिए, हमने मेनिफ़ेस्ट के <activity> या <application> एलिमेंट को सेट किया.

<activity

    android:name="com.example.cahier.MainActivity"

    android:resizeableActivity="true"

    ...>

</activity>

यूज़र इंटरफ़ेस (यूआई) को Material 3 अडैप्टिव लाइब्रेरी की मदद से बनाया गया है. इससे, यह मल्टी-विंडो के साथ आसानी से काम कर पाता है. जैसे, Android का स्प्लिट स्क्रीन मोड. 

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, हमने खींचकर छोड़ने की सुविधा जोड़ी है. हमने Cahier में इसे कैसे लागू किया है, यह नीचे देखें.

खींचना और छोड़ना

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

• आसानी से इंपोर्ट करना: उपयोगकर्ता, वेब ब्राउज़र, फ़ोटो गैलरी या फ़ाइल मैनेजर जैसे अन्य ऐप्लिकेशन से इमेज को खींचकर, सीधे नोट कैनवस पर छोड़ सकते हैं. इसके लिए, Cahier dragAndDropTarget मॉडिफ़ायर का इस्तेमाल करता है. इससे ड्रॉप ज़ोन तय किया जाता है, image/* जैसे काम करने वाले कॉन्टेंट की जांच की जाती है, और आने वाले यूआरआई को प्रोसेस किया जाता है.
• आसानी से शेयर करना: Cahier में मौजूद कॉन्टेंट को शेयर करना उतना ही आसान है जितना दूसरे ऐप्लिकेशन में मौजूद कॉन्टेंट को शेयर करना. उपयोगकर्ता, टेक्स्ट नोट में मौजूद किसी इमेज को दबाकर रख सकते हैं. इसके अलावा, वे ड्रॉइंग नोट और इमेज कंपोज़िट के पूरे कैनवस को दबाकर रख सकते हैं. इसके बाद, वे इसे किसी दूसरे ऐप्लिकेशन में खींचकर ले जा सकते हैं.

तकनीकी जानकारी: ड्रॉइंग कैनवस से खींचकर ले जाना

ड्राइंग कैनवस पर ड्रैग जेस्चर लागू करना एक मुश्किल काम है. हमारे DrawingSurface में, लाइव ड्रॉइंग इनपुट (Ink API का InProgressStrokes) को हैंडल करने वाले कंपोज़ेबल और ड्रैग करने की सुविधा शुरू करने के लिए, लंबे समय तक दबाकर रखने के जेस्चर का पता लगाने वाला Box, सिबलिंग कंपोज़ेबल हैं.

डिफ़ॉल्ट रूप से, Jetpack Compose का पॉइंटर इनपुट सिस्टम इस तरह से डिज़ाइन किया गया है कि सिर्फ़ एक सिबलिंग कंपोज़ेबल को इवेंट मिलता है. यह कंपोज़ेबल, एलान के क्रम में पहला कंपोज़ेबल होता है और टच लोकेशन पर ओवरलैप होता है. Cahier के मामले में, हम चाहते हैं कि ड्रैग-एंड-ड्रॉप इनपुट हैंडलिंग लॉजिक को चलाने का मौका मिले. साथ ही, InProgressStrokes कंपोज़ेबल के, ड्राइंग के लिए इस्तेमाल न किए गए सभी इनपुट का इस्तेमाल करने और फिर उस इनपुट का इस्तेमाल करने से पहले, वह इनपुट का इस्तेमाल कर सके. अगर हम चीज़ों को सही क्रम में व्यवस्थित नहीं करते हैं, तो हमारा Box, खींचने की सुविधा शुरू करने के लिए लंबे समय तक दबाए रखने के जेस्चर का पता नहीं लगा पाएगा. इसके अलावा, InProgressStrokes को ड्रॉ करने के लिए इनपुट नहीं मिलेगा.

इस समस्या को हल करने के लिए, हमने एक कस्टम pointerInputWithSiblingFallthrough मॉडिफ़ायर बनाया. साथ ही, हमने कंपोज़ेबल कोड में InProgressStrokes से पहले, उस मॉडिफ़ायर का इस्तेमाल करके Box को रखा. यह यूटिलिटी, स्टैंडर्ड pointerInput सिस्टम के चारों ओर एक थिन रैपर है. हालांकि, इसमें एक ज़रूरी बदलाव किया गया है: यह sharePointerInputWithSiblings() फ़ंक्शन को ओवरराइड करके true दिखाता है. इससे Compose फ़्रेमवर्क को यह निर्देश मिलता है कि वह पॉइंटर इवेंट को इस्तेमाल करने के बाद भी, उन्हें सिबलिंग कंपोज़ेबल तक पहुंचने दे.

internal fun Modifier.pointerInputWithSiblingFallthrough(

    pointerInputEventHandler: PointerInputEventHandler

) = this then PointerInputSiblingFallthroughElement(pointerInputEventHandler)


private class PointerInputSiblingFallthroughModifierNode(

    pointerInputEventHandler: PointerInputEventHandler

) : PointerInputModifierNode, DelegatingNode() {


    var pointerInputEventHandler: PointerInputEventHandler

        get() = delegateNode.pointerInputEventHandler

        set(value) {

            delegateNode.pointerInputEventHandler = value

        }


    val delegateNode = delegate(

        SuspendingPointerInputModifierNode(pointerInputEventHandler)

    )


    override fun onPointerEvent(

        pointerEvent: PointerEvent,

        pass: PointerEventPass,

        bounds: IntSize

    ) {

        delegateNode.onPointerEvent(pointerEvent, pass, bounds)

    }


    override fun onCancelPointerInput() {

        delegateNode.onCancelPointerInput()

    }


    override fun sharePointerInputWithSiblings() = true

}


private data class PointerInputSiblingFallthroughElement(

    val pointerInputEventHandler: PointerInputEventHandler

) : ModifierNodeElement<PointerInputSiblingFallthroughModifierNode>() {


    override fun create() = PointerInputSiblingFallthroughModifierNode(pointerInputEventHandler)


    override fun update(node: PointerInputSiblingFallthroughModifierNode) {

        node.pointerInputEventHandler = pointerInputEventHandler

    }


    override fun InspectorInfo.inspectableProperties() {

        name = "pointerInputWithSiblingFallthrough"

        properties["pointerInputEventHandler"] = pointerInputEventHandler

    }

}

DrawingSurface में इसका इस्तेमाल इस तरह किया जाता है:

Box(

    modifier = Modifier

        .fillMaxSize()

        // Our custom modifier enables this gesture to coexist with the drawing input.

        .pointerInputWithSiblingFallthrough {

            detectDragGesturesAfterLongPress(

                onDragStart = { onStartDrag() },

                onDrag = { _, _ -> /* consume drag events */ },

                onDragEnd = { /* No action needed */ }

            )

        }

) 

// The Ink API's composable for live drawing sits here as a sibling.

InProgressStrokes(...)

इस सुविधा के चालू होने पर, सिस्टम एक साथ ड्रॉइंग स्ट्रोक और लंबे समय तक दबाकर खींचने के जेस्चर का सही तरीके से पता लगाता है. ड्रैग शुरू होने के बाद, हम FileProvider के साथ शेयर किया जा सकने वाला content:// यूआरआई बनाते हैं. इसके बाद, view.startDragAndDrop() का इस्तेमाल करके, यूआरआई को सिस्टम के ड्रैग और ड्रॉप फ़्रेमवर्क में पास करते हैं. इस समाधान से, उपयोगकर्ता को बेहतर अनुभव मिलता है. साथ ही, यह दिखाता है कि लेयर वाले यूज़र इंटरफ़ेस में, जेस्चर से जुड़ी मुश्किल समस्याओं को कैसे हल किया जा सकता है.

आधुनिक वास्तुकला के हिसाब से बनाया गया

Cahier, कुछ खास एपीआई के अलावा, अच्छी क्वालिटी वाले अडैप्टिव ऐप्लिकेशन बनाने के लिए ज़रूरी आर्किटेक्चरल पैटर्न भी दिखाता है.

प्रज़ेंटेशन लेयर: Jetpack Compose और अडैप्टेबिलिटी

प्रज़ेंटेशन लेयर को पूरी तरह से Jetpack Compose की मदद से बनाया गया है. जैसा कि बताया गया है, Cahier, यूज़र इंटरफ़ेस (यूआई) को अडैप्टिव बनाने के लिए material3-adaptive लाइब्रेरी का इस्तेमाल करता है. स्टेट मैनेजमेंट, एकतरफ़ा डेटा फ़्लो (यूडीएफ़) के पैटर्न का पालन करता है. इसमें ViewModel इंस्टेंस का इस्तेमाल डेटा कंटेनर के तौर पर किया जाता है. ये कंटेनर, नोट की जानकारी और यूज़र इंटरफ़ेस (यूआई) की स्थिति को सेव रखते हैं.

डेटा लेयर: रिपॉज़िटरी और Room

डेटा लेयर के लिए, Cahier सभी डेटा ऑपरेशन को एब्स्ट्रैक्ट करने के लिए, NoteRepository इंटरफ़ेस का इस्तेमाल करता है. इस डिज़ाइन की मदद से, ऐप्लिकेशन को स्थानीय डेटा सोर्स (Room) और आने वाले समय में इस्तेमाल होने वाले रिमोट बैकएंड के बीच आसानी से स्विच करने की सुविधा मिलती है. नोट में बदलाव करने जैसी कार्रवाई के लिए डेटा फ़्लो आसान होता है:

1. Jetpack Compose यूज़र इंटरफ़ेस (यूआई), ViewModel में मौजूद किसी तरीके को ट्रिगर करता है.
2. ViewModel, NoteRepository से नोट फ़ेच करता है, लॉजिक को हैंडल करता है, और अपडेट किए गए नोट को वापस रिपॉज़िटरी में भेजता है.
3. NoteRepository, अपडेट को Room डेटाबेस में सेव करता है.

इनपुट के लिए बेहतर सहायता

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

• स्टाइलस: Ink API के साथ इंटिग्रेशन, हथेली को स्क्रीन पर रखने पर इनपुट न मिलना, नोट बनाने की सुविधा के लिए रजिस्टर करना, टेक्स्ट फ़ील्ड में स्टाइलस से इनपुट देना, और इमर्सिव मोड.
• कीबोर्ड: कीबोर्ड के ज़्यादातर सामान्य शॉर्टकट और कॉम्बिनेशन (जैसे, ctrl+क्लिक, meta+क्लिक) के लिए सहायता उपलब्ध है. साथ ही, कीबोर्ड फ़ोकस के बारे में साफ़ तौर पर बताया गया है.
• माउस और ट्रैकपैड: राइट क्लिक करने और कर्सर घुमाने की सुविधा.

हमारा मुख्य फ़ोकस, कीबोर्ड, माउस, और ट्रैकपैड के साथ बेहतर तरीके से इंटरैक्ट करने की सुविधा को बेहतर बनाना है. 

आज ही शुरू करें

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

क्या आप शुरू करने के लिए तैयार हैं?

• कोड एक्सप्लोर करें: Cahier के कोडबेस को एक्सप्लोर करने और डिज़ाइन के सिद्धांतों को ऐक्शन में देखने के लिए, हमारी GitHub रिपॉज़िटरी पर जाएं.
• अपनी ज़रूरत के हिसाब से बनाएं: Cahier का इस्तेमाल, नोट लेने, दस्तावेज़ मार्कअप करने या क्रिएटिव ऐप्लिकेशन के तौर पर करें.
• योगदान दें: हम आपके योगदान का स्वागत करते हैं! Android डेवलपर कम्यूनिटी के लिए, Cahier को और भी बेहतर संसाधन बनाने में हमारी मदद करें.

डेवलपर के लिए बनी आधिकारिक गाइड देखें. साथ ही, आज ही अगली जनरेशन का प्रॉडक्टिविटी और क्रिएटिविटी ऐप्लिकेशन बनाना शुरू करें. हमें यह देखने का बेसब्री से इंतज़ार है कि आप किस तरह का कॉन्टेंट बनाते हैं!