👩🏽‍⚖️ 🖕🏿 🤛🏽 किवी - # 1 क्रॉस-प्लेटफॉर्म विकास ढांचा 👩🏻‍⚕️ 👦🏼 💊

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

अच्छा किवी क्या है? पहला यह है कि यह जावास्क्रिप्ट नहीं है। यह पायथन है। इसलिए विकास की गति, कोड की संक्षिप्तता, तुरंत बदलने और अनुप्रयोगों में बदलाव को ट्रैक करने की क्षमता, यह केवल एक समय में कोड लिखने की क्षमता है जब अन्य अपने आवेदन को खत्म करने या अपनी परियोजनाओं के लिए अगली कड़ी बैसाखी बनाने के असफल प्रयासों में दाढ़ी बढ़ाते हैं। दूसरे, यह 99.9% वास्तविक क्रॉस-प्लेटफ़ॉर्म फ्रेमवर्क है जिसके साथ आप यह सुनिश्चित कर सकते हैं कि आपका कोड, एक बार लिखा गया है, लॉन्च किया जाएगा और सभी उपलब्ध प्लेटफार्मों पर काम करेगा। संदर्भ के लिए: ज़मरीन कोड का केवल 60% है जो पुन: उपयोग किया जा सकता है, डेवलपर्स के 80% होने का दावा करने के बावजूद। कीवी एक परिपक्व ढांचा है जिसे 2011 से विकसित किया गया है और यह अपने साथी रिएक्ट नेटिव (2015) और एक वर्षीय ज़ामरीन (2011) से पुराना है।

आज के लेख के लिए, मैंने एक छोटा उदाहरण तैयार किया जो कि किवी के उपरोक्त सभी लाभों को स्पष्ट रूप से प्रदर्शित करता है। हम सांत्वना उपयोगिता CreatorKivyProject का उपयोग करके एक नई परियोजना बनाएंगे , देखें कि किवी में विजेट्स को कैसे चेतन करें और निम्नलिखित सामग्री के साथ एक स्क्रीन का निर्माण करें:

तो, CreatorKivyProject उपयोगिता डाउनलोड करें और README के निर्देशों का पालन करते हुए एक नई परियोजना बनाएं। एक साधारण कमांड को निष्पादित करने के बाद, एक खाली परियोजना एक मुख्य स्क्रीन और दो अतिरिक्त स्क्रीन 'अबाउट' और 'लाइसेंस' के साथ बनाई जाएगी, जिसे नेविगेशन ड्रॉअर मेनू में खोला जा सकता है। यह मोबाइल प्लेटफ़ॉर्म के लिए तैयार अनुप्रयोग नहीं है, लेकिन यह पहले से ही आपके कंप्यूटर पर स्रोतों से सीधे चलाया और परीक्षण किया जा सकता है। प्रोजेक्ट को शुरू करने के लिए आपको मेनफ्रेम स्क्रिप्ट को चलाने की जरूरत है, जो कि एप्लीकेशन का एंट्री पॉइंट है।

लॉन्च के बाद, निम्नलिखित स्क्रीन उपलब्ध होंगे:

हमारा कार्य स्क्रीन में फ़्लोटिंगएशनबटन के चार बटन, उनके लिए फ़्लोटिंग लेबल और बटन घटनाओं के लिए न्यूनतम कार्यक्षमता के ढेर को एकीकृत करना है। बटन के ढेर से, मेरा मतलब है कि बटन जो स्क्रीन के निचले दाएं कोने में रखे गए हैं और एक दूसरे को ओवरलैप करते हैं। चूंकि इस तरह के स्टैक एक से अधिक प्रोजेक्ट में उपयोगी हो सकते हैं, इसलिए हम एक मॉड्यूल फ़्लोटिंगबुटनशोफोम बनाएँगे, जिसे हम बाद में हर जगह, किसी भी प्रोजेक्ट में और किसी भी प्लेटफ़ॉर्म पर उपयोग कर सकते हैं। एप्लिकेशन / पैकेज और मॉड्यूल स्थित हैं, जहां लिब / एपलिबस डायरेक्टरी खोलें, और फ़्लोटिंगबुटन पैकेज को __init__.py , floactionsbuttons.kv और फ़्लोटिंगbuttons.py के साथ बनाएँ।

फ़्लोटिंगबुटन्स.केवी फ़ाइल में विशेष केवी भाषा में यूआई तत्वों के लेआउट का वर्णन किया गया है, जो कि ज़ैमरीन के एक्सएएमएल की तुलना में बहुत सरल और अधिक समझ में आता है, जावा में एक्सएमएल या रिएक्ट नेटिव में जेएसएक्स मार्कअप।

फ़्लोटिंगबुटनसोन फ़ाइल फ़्लोट्सबुटन.केवी में वर्णित तत्वों और उनके तर्क के व्यवहार को नियंत्रित करती है।

इस तरह से हमारे बटन के साथ स्टैक का लेआउट स्पष्ट रूप से दिखता है और तत्वों की आसानी से दिखाई देने वाली पदानुक्रम के साथ संरचित होता है:

floatingactionsbuttons.kv

#: import Window kivy.core.window.Window #: import MDFloatingActionButton kivymd.button.MDFloatingActionButton <FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25) size_hint: None, None size: dp(46), dp(46) elevation: 5 md_bg_color: app.theme_cls.primary_color on_release: self.parent.callback(self) <FloatingLabel>: size_hint: None, None height: dp(20) width: label.texture_size[0] border_color_a: .5 md_bg_color: app.theme_cls.primary_color x: -self.width Label: id: label color: 0, 0, 0, 1 bold: True markup: True text: ' %s ' % root.text <FloatingActionButtons>: FloatingButton: id: f_btn_1 icon: list(root.floating_data.values())[0] FloatingButton: id: f_btn_2 icon: list(root.floating_data.values())[1] FloatingButton: id: f_btn_3 icon: list(root.floating_data.values())[2] FloatingLabel: id: f_lbl_1 text: list(root.floating_data.keys())[0] y: dp(117) FloatingLabel: id: f_lbl_2 text: list(root.floating_data.keys())[1] y: dp(170) FloatingLabel: id: f_lbl_3 text: list(root.floating_data.keys())[2] y: dp(226) MDFloatingActionButton: icon: root.icon size: dp(56), dp(56) x: Window.width - (self.width + dp(15)) md_bg_color: app.theme_cls.primary_color y: dp(15) on_release: root.show_floating_buttons()

आइए देखें कि हमारे स्टैक में कौन से तत्व मार्कअप के अनुरूप हैं। हमने एक हस्ताक्षर बनाया है जो प्रत्येक बटन के अनुरूप होगा:

बटन जो स्टैक में होगा:

मुख्य बटन, जो स्क्रीन के निचले दाएं कोने में लंगर डाला गया है:

और स्क्रीन पर यह सब रखा, हस्ताक्षर को स्क्रीन के बाईं ओर स्थित पदों (दृश्यता से बाहर), और सभी बटन के लिए - निचले दाएं कोने में स्थितियां दर्शाता है:

बटन हम केवल ओवरलैप करते हैं। अब उन्हें पुनर्जीवित करने का समय आ गया है। फ़ाइल खोलें

floatingactionsbuttons.py

 import os from kivy.animation import Animation from kivy.lang import Builder from kivy.core.window import Window from kivy.uix.floatlayout import FloatLayout from kivy.logger import PY2 from kivy.lang import Builder from kivy.properties import StringProperty, DictProperty, ObjectProperty from kivy.metrics import dp from kivymd.card import MDCard kv_file = os.path.splitext(__file__)[0] + '.kv' if PY2: Builder.load_file(kv_file) else: with open(kv_file, encoding='utf-8') as kv: Builder.load_string(kv.read()) class FloatingLabel(MDCard): text = StringProperty() class FloatingActionButtons(FloatLayout): icon = StringProperty('checkbox-blank-circle') callback = ObjectProperty(lambda x: None) floating_data = DictProperty() show = False def __init__(self, **kwargs): super(FloatingActionButtons, self).__init__(**kwargs) self.lbl_list = [self.ids.f_lbl_1, self.ids.f_lbl_2, self.ids.f_lbl_3] self.btn_list = [self.ids.f_btn_1, self.ids.f_btn_2, self.ids.f_btn_3] def show_floating_buttons(self): step = dp(46) for btn in self.btn_list: step += dp(56) Animation(y=step, d=.5, t='out_elastic').start(btn) self.show = True if not self.show else False self.show_floating_labels() if self.show \ else self.hide_floating_labels() def show_floating_labels(self): i = 0 for lbl in self.lbl_list: i += .5 pos_x = Window.width - (lbl.width + dp(46 + 21 * 1.5)) Animation(x=pos_x, d=i, t='out_elastic').start(lbl) def hide_floating_buttons(self): for btn in self.btn_list: Animation(y=25, d=.5, t='in_elastic').start(btn) def hide_floating_labels(self): i = 1 for lbl in self.lbl_list: i -= .3 Animation(x=-lbl.width, d=i, t='out_elastic').start(lbl) self.hide_floating_buttons()

कीवी एनिमेशन क्लास का उपयोग करके एनिमेशन बनाता है। जावा में के रूप में, यह उस तत्व के पैरामीटर को निर्दिष्ट करने के लिए पर्याप्त है जिसे हम चेतन करना चाहते हैं, अंतिम मूल्य पास करना। उदाहरण के लिए, ध्यान दें कि kv लेआउट में हमारे बटन की ऊँचाई 25, यानी स्क्रीन के नीचे से 25 पिक्सेल पर सेट है:

 <FloatingButton@MDFloatingActionButton>: x: Window.width - (self.width + dp(21)) y: dp(25) #     y

चूंकि हमारे पास तीन बटन हैं, लूप में हम प्रत्येक ऊँचाई (पैरामीटर "y" ) को इंगित करते हैं, जिस पर इसे उठाया जाना चाहिए, और फ़ंक्शन का नाम ( "out_elastic" ) पास करें, जो एनीमेशन के प्रकार के लिए ज़िम्मेदार है (हमारे प्रोजेक्ट में, मैंने इलास्टिक स्प्रिंग एनीमेशन का उपयोग किया है) , और बाकी सब कुछ अपने आप हो जाता है:

  def show_floating_buttons(self): '''         .     Puthon/C++/Php. ''' step = dp(46) for btn in self.btn_list: step += dp(56) Animation(y=step, d=.5, t='out_elastic').start(btn)

हस्ताक्षरों का एनीमेशन बिल्कुल वैसा ही है, सिवाय इसके कि एनिमेशन में हम x पैरामीटर के मान को पास करते हैं - तत्व की क्षैतिज स्थिति:

  def show_floating_labels(self): '''         .     Puthon/C++/Php. ''' i = 0 #      for lbl in self.lbl_list: i += .5 pos_x = Window.width - (lbl.width + dp(46 + 21 * 1.5)) Animation(x=pos_x, d=i, t='out_elastic').start(lbl)

पैकेज तैयार है। इसे हमारी सिंगल स्क्रीन में कैसे जोड़ा जाए? मुख्य स्क्रीन नियंत्रण फ़ाइल को खोलें AnimatedButtons / libs / uix / baseclass / basescreen.py :

... हमारे द्वारा बनाए गए पैकेज को आयात करें और इसे स्क्रीन पर जोड़ें:

 from libs.applibs.floatingactionbuttons import FloatingActionButtons class BaseScreen(Screen): '''  .''' def on_enter(self): '''    .''' #      . self.add_widget(FloatingActionButtons( icon='lead-pencil', floating_data={ 'Python': 'language-python', 'Php': 'language-php', 'C++': 'language-cpp'}, callback=self.set_my_language))

जैसा कि आप देख सकते हैं, सब कुछ सरल, पारदर्शी और तेज है। मुझे यह कल्पना करने में डर लगता है कि इस तरह की कार्यक्षमता का कार्यान्वयन, इस लेख में "हैलो वर्ल्ड" जैसे एप्लिकेशन को लागू करने के लिए लेखक को कितना कोड लगा, यह रिएक्ट नेटिव की तरह दिखेगा। कीवी के बगल में, मैं केवल ज़मैरीन रख सकता हूं, जो पैकेज बनाते समय, मोनो और अन्य पुस्तकालयों को अपने साथ खींचता है, ठीक उसी तरह जैसे किवी पायथन दुभाषिया को खींचता है। Kivy और Xamarin पर तैयार किए गए अनुप्रयोगों का आकार और अनुमानित लॉन्च गति समान है, लेकिन Xamarin की फिलहाल बहुत अधिक समस्याएं हैं, इसलिए मैं विश्वास के साथ कह सकता हूं कि आज Kivy # 1 क्रॉस-प्लेटफॉर्म डेवलपमेंट फ्रेमवर्क है!

आप GitHub पर प्रोजेक्ट का स्रोत कोड डाउनलोड कर सकते हैं।

किवी अनुप्रयोगों के उदाहरण:

vimeo.com/29348760
vimeo.com/206290310
vimeo.com/25680681
www.youtube.com/watch?v=u4NRu7mBXtA
www.youtube.com/watch?v=9rk9OQLSoJw
www.youtube.com/watch?v=aa9LXpg_gd0
www.youtube.com/watch?v=FhRXAD8-UkE
www.youtube.com/watch?v=GJ3f88ebDqc&t=111s
www.youtube.com/watch?v=D_M1I9GvpYs
www.youtube.com/watch?v=VotPQafL7Nw
youtu.be/-gfwyi7TgLI

play.google.com/store/apps/details?id=org.kognitivo.kognitivo
play.google.com/store/apps/details?id=net.inclem.pyonicinterpreter
play.google.com/store/apps/details?id=com.madhattersoft.guessthequote
play.google.com/store/apps/details?id=com.prog.ders.ceyhan
play.google.com/store/apps/details?id=com.heattheatr.quotessaints

किवी - # 1 क्रॉस-प्लेटफॉर्म विकास ढांचा

More articles: