डिजाइनरों के लिए प्यार के साथ: एक मोबाइल एप्लिकेशन में वेब फ़ॉर्म एम्बेड करें

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



तो, हमारे पास साझेदार परियोजना का एक बाहरी वेब पेज है, जिसमें एक वेब फ़ॉर्म है। पेज एप्लिकेशन में निर्मित ब्राउज़र में ठीक काम करता है, लेकिन इसका स्वरूप हमारे डिजाइन विभाग की सुंदरता के बारे में विचारों के साथ मेल नहीं खाता है और अंदर अकार्बनिक दिखता है। डिजाइनर एक नई सुंदर आकृति बनाते हैं और कमांड देते हैं: "इसे इस तरह दिखना चाहिए!"। हर किसी के अपने कार्य हैं, लेकिन हमारा सामान्य लक्ष्य एक गुणवत्ता अनुप्रयोग है।

हमारा कार्य स्पष्ट है। कार्यान्वयन के लिए हो रही है। एप्लिकेशन को नए डिज़ाइन में फ़ॉर्म में एम्बेड करें - कुछ भी जटिल नहीं है। लेकिन वेब फॉर्म के बारे में क्या?

ऑफहैंड, आप प्रोग्राम को पेज के तर्क को फॉर्म के साथ लागू कर सकते हैं। फिर एक HTTP अनुरोध उत्पन्न करें जो "सबमिट करें" बटन पर क्लिक करें और UIWebView में स्थानांतरित करें।

हालांकि, इसकी सभी सादगी के साथ, इस दृष्टिकोण में नुकसान हैं। एक फॉर्म में आसानी से एक CSRF टोकन हो सकता है (फिर हमें पृष्ठ को लोड करना होगा और अंतिम अनुरोध में इसे पारित करने के लिए टोकन को पार्स करना होगा), उन मूल्यों की एक सूची जो अक्सर सर्वर साइड (लोड और पार्स) पर भी बदल सकती है, और आम तौर पर राज्य में हेरफेर करती है। उपयोगकर्ता द्वारा दर्ज किए गए डेटा के आधार पर एक या अधिक छिपे हुए फ़ॉर्म फ़ील्ड (हैलो, जावास्क्रिप्ट!)। यह सब पर्याप्त रूप से कार्य को जटिल करता है, क्या आपको नहीं लगता है?

एक और तरीका है! और मंच पर, दर्शकों के ओवेशन के तहत, मेस्ट्रो क्रच दिखाई देता है। हम क्या कर रहे हैं?

सब कुछ बहुत सरल है। हम उपयोगकर्ता की आंखों से छिपे UIWebView को लेते हैं, हमारे वेब पेज को वहां लोड करते हैं और जावास्क्रिप्ट का उपयोग करके इसके डोम ऑब्जेक्ट्स में हेरफेर करते हैं।

एक सरल उदाहरण के साथ इस तकनीक पर विचार करें। एक प्रायोगिक खरगोश के रूप में, हम खोज फॉर्म को हैबर के मुख्य पृष्ठ के ऊपरी दाएं कोने में लेते हैं, जिसमें निम्नलिखित HTML पृष्ठ हैं:

<div class="search"> <form id="search_form" name="search" method="get" action="//habrahabr.ru/search/"> <input type="submit" value=""> <input type="text" name="q" x-webkit-speech="" speech="" tabindex="1" autocomplete="off"> </form> </div> 

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

 @interface MRWebViewController () <UIWebViewDelegate> @property (nonatomic, weak, readonly) UIWebView *webView; @property (nonatomic, strong, readonly) NSURLRequest *request; @property (nonatomic, assign) BOOL hasForm; // ... @end @implementation MRWebViewController { } // ... - (instancetype)initWithURLString:(NSString *)urlString { self = [super init]; if (self) { _request = [NSURLRequest requestWithURL:[NSURL URLWithString:urlString]]; } return self; } - (void)viewDidLoad { [super viewDidLoad]; [self createWebView]; self.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; self.view.alpha = 0.0; } - (void)createWebView { UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; webView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; webView.backgroundColor = UIColor.whiteColor; webView.scalesPageToFit = YES; webView.delegate = self; [self.view addSubview:webView]; _webView = webView; } // ... - (void)reload { self.hasForm = NO; self.view.alpha = 0.0; [self.webView stopLoading]; [self.webView loadRequest:self.request]; } // ... @end 

हमारे नियंत्रक में एक UIWebView होता है, जिसमें हम पृष्ठ को फ़ॉर्म और एक NSURLRequest ऑब्जेक्ट के साथ लोड करेंगे, जिसका उपयोग हम पेज लोड करने के अनुरोध को संग्रहीत करने के लिए करेंगे। व्यू ऑब्जेक्ट के लिए ऑटोरेस्पोन्गमास्क संपत्ति को निर्दिष्ट करना हमें इस नियंत्रक को समस्याओं के बिना एक चाइल्ड व्यू नियंत्रक के रूप में उपयोग करने की अनुमति देता है, और हम अल्फा संपत्ति के साथ इसकी दृश्यता को नियंत्रित करेंगे।

आइए, हमारे प्रोजेक्ट के बॉल्स में कहीं एक कंट्रोलर ऑब्जेक्ट बनाएं और उसमें एक फॉर्म के साथ एक पेज लोड करें।

 static NSString *kMRHabraURLString = @"http://habrahabr.ru"; MRWebViewController *controller = [[MRWebViewController alloc] initWithURLString:kMRHabraURLString]; [controller reload]; 

इस मामले में, पृष्ठ लोड करने का परिणाम हमारे नियंत्रक में संबंधित प्रतिनिधि समारोह द्वारा रोक दिया गया है। डोम ऑब्जेक्ट्स को मैनिप्युलेट करना jQuery के साथ सुविधाजनक है। इसलिए, हम यह सुनिश्चित करेंगे कि यह लोड पेज में निश्चित रूप से मौजूद होगा।

 - (void)webViewDidFinishLoad:(UIWebView *)webView { if (!self.hasForm) { NSLog(@"Installing jQuery at %@", webView.request.URL.absoluteString); [self.webView stringByEvaluatingJavaScriptFromString:[MRScriptsFactory jqueryScript]]; self.hasForm = YES; } // ... } 

वेब पेज लोड करने की प्रक्रिया अतुल्यकालिक रूप से होती है, और यद्यपि पेज अभी भी अंत तक लोड नहीं हो सकता है, कुछ भी हमें उपयोगकर्ता को प्रोग्रामेटिक रूप से कार्यान्वित किए गए मूल रूप को प्रदर्शित करने से रोकता है। इसी समय, मूल प्रपत्र उपयोगकर्ता से प्राप्त डेटा को दर्ज करने और सत्यापित करने की जिम्मेदारी लेता है।

उपयोगकर्ता द्वारा मूल फ़ॉर्म भरने और उसमें "खोज" बटन पर क्लिक करने के बाद, हमारे नियंत्रक को संदेश खोज प्राप्त होता है ।

 - (BOOL)searchWithString:(NSString *)searchString { BOOL result = NO; if (self.hasForm) { // ... NSString *actualString = [searchString stringByReplacingOccurrencesOfString:@"'" withString:@"\\'"]; NSString *script = [NSString stringWithFormat:[MRScriptsFactory fillFormScript], actualString]; NSString *scriptResult = [self.webView stringByEvaluatingJavaScriptFromString:script]; __autoreleasing NSError *error = nil; id object = [NSJSONSerialization JSONObjectWithData:[scriptResult dataUsingEncoding:NSUTF8StringEncoding] options:0 error:&error]; result = (!error && [object isKindOfClass:[NSDictionary class]] && [object[@"success"] boolValue]); // ... } return result; } 

हमारे मामले में, [MRScriptsFactory fillFormScript] के माध्यम से प्राप्त स्क्रिप्ट का रूप है:

 (function ($, searchString) { var components = { $text : $("form#search_form input[type='text']"), $submit : $("form#search_form input[type='submit']") }; components.$text.val(searchString); components.$submit.click(); return JSON.stringify({ "success" : true }); })(jQuery, '%@'); 

जैसा कि स्क्रिप्ट के स्रोत कोड से देखा जा सकता है, यह फ़ॉर्म के टेक्स्ट फ़ील्ड को एक खोज स्ट्रिंग के साथ भरता है और प्रोग्रामेटिक रूप से फॉर्म बटन पर क्लिक करता है।

चूंकि हमने शुरू में UIWebView में अनुरोध को निष्पादित करने के परिणामस्वरूप प्राप्त डेटा के किसी भी बाद के प्रसंस्करण की परिकल्पना नहीं की थी, इसलिए हमारे उदाहरण में हम इसे केवल उपयोगकर्ता को दिखाते हैं।

 - (void)webViewDidFinishLoad:(UIWebView *)webView { if (!self.hasForm) { // ... } else if (self.isScriptExecuting) { [UIView animateWithDuration:0.3 animations:^{ self.view.alpha = 1.0; }]; self.scriptExecuting = NO; // ... } } 

इस दृष्टिकोण का हमारे द्वारा लंबे समय तक सफलतापूर्वक उपयोग किया गया है और इसने खुद को अच्छी तरह साबित किया है। उदाहरण के लिए पूर्ण स्रोत कोड यहां स्थित है।

यदि आपके पास प्रश्न हैं, या रूपों के साथ काम करने पर अपनी सर्वोत्तम प्रथाओं को साझा करना चाहते हैं, तो मैं टिप्पणियों में इस पर चर्चा करने का सुझाव देता हूं।