আমি একটি মোবাইল অ্যাপ্লিকেশন তৈরি করতে চাই, এইচটিএমএল / সিএসএস এবং জাভাস্ক্রিপ্ট ছাড়া আর কিছুই নয়। আমি জাভাস্ক্রিপ্ট দিয়ে কীভাবে একটি ওয়েব অ্যাপ তৈরি করতে পারি তার একটি শালীন জ্ঞান থাকা সত্ত্বেও, আমি ভেবেছিলাম আমার কাছে jquery- মোবাইলের মতো ফ্রেমওয়ার্কটি সন্ধান করা উচিত।
প্রথমদিকে, আমি ভেবেছিলাম যে মোবাইল ব্রাউজারগুলিকে লক্ষ্য করে উইজেট ফ্রেমওয়ার্কের পরে জিকিউরি মোবাইলটি আর কিছুই নয়। Jquery-ui এর সাথে খুব মিল তবে মোবাইল ওয়ার্ল্ডের জন্য। তবে আমি লক্ষ্য করেছি যে jquery- মোবাইল এর চেয়ে বেশি। এটি একগুচ্ছ আর্কিটেকচারের সাথে আসে এবং আসুন আপনি একটি ঘোষণামূলক এইচটিএমএল সিনট্যাক্স সহ অ্যাপ্লিকেশন তৈরি করুন। সুতরাং সবচেয়ে সহজ ভাবনামূলক অ্যাপ্লিকেশনটির জন্য আপনার নিজের দ্বারা জাভাস্ক্রিপ্টের একটি লাইন লেখার দরকার নেই (যা দুর্দান্ত, কারণ আমরা সবাই কম কাজ করতে পছন্দ করি, তাই না?)
একটি ঘোষণামূলক এইচটিএমএল সিনট্যাক্স ব্যবহার করে অ্যাপ্লিকেশন তৈরির পদ্ধতির সমর্থন করার জন্য, আমি মনে করি যে জকোয়ারি-মোবাইলকে নকআউটজেসের সাথে একত্রিত করা ভাল take নকআউটজস একটি ক্লায়েন্ট-সাইড এমভিভিএম কাঠামো যা লক্ষ্য করে যে এমভিভিএম সুপার পাওয়ারগুলি ডাব্লুপিএফ / সিলভারলাইট থেকে জাভাস্ক্রিপ্ট বিশ্বে নিয়ে আসে।
আমার জন্য এমভিভিএম একটি নতুন বিশ্ব। যদিও আমি ইতিমধ্যে এটি সম্পর্কে অনেক কিছু পড়েছি, আমি আসলে এটি আগে কখনও ব্যবহার করি নি।
সুতরাং এই পোস্টিংটি কীভাবে একটি অ্যাপ্লিকেশনটিকে jquery- মোবাইল এবং নকআউটজেস একসাথে ব্যবহার করে আর্কিটেকচার করবেন। আমার ধারণাটি ছিল যে কয়েক ঘন্টা দেখার পরে আমি যে পদ্ধতিটি নিয়ে এসেছি সেগুলি লিখেছিলাম এবং এটিতে মন্তব্য করার জন্য কিছু জেকারি-মোবাইল / নকআউট ইয়োডা রেখেছিল, আমাকে দেখায় যে এটি কেন চুষে বেড়ায় এবং কেন আমি প্রথম প্রোগ্রামিং করিনা? স্থান ;-)
এইচটিএমএল
jquery- মোবাইল পৃষ্ঠাগুলির একটি মৌলিক কাঠামোর মডেল সরবরাহ করে একটি ভাল কাজ করে। যদিও আমি ভাল করেই জানি যে আমার পেজগুলি এজাক্সের পরে লোড করা যেতে পারে, তবে আমি কেবল ঠিক করেছি যে সেগুলি সমস্তই একটি সূচক। Html ফাইলে রাখব। এই মৌলিক দৃশ্যে আমরা দুটি পৃষ্ঠা সম্পর্কে কথা বলছি যাতে জিনিসগুলির শীর্ষে থাকা খুব কঠিন না হয়।
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="libs/jquery-mobile/jquery.mobile-1.0a4.1.css" />
<link rel="stylesheet" href="app/base/css/base.css" />
<script src="libs/jquery/jquery-1.5.0.min.js"></script>
<script src="libs/knockout/knockout-1.2.0.js"></script>
<script src="libs/knockout/knockout-bindings-jqm.js" type="text/javascript"></script>
<script src="libs/rx/rx.js" type="text/javascript"></script>
<script src="app/App.js"></script>
<script src="app/App.ViewModels.HomeScreenViewModel.js"></script>
<script src="app/App.MockedStatisticsService.js"></script>
<script src="libs/jquery-mobile/jquery.mobile-1.0a4.1.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Demo App</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar" style="height:120px">
<h1>Tours today (please wait 10 seconds to see the effect)</h1>
<p><span data-bind="text: toursTotal"></span> total</p>
<p><span data-bind="text: toursRunning"></span> running</p>
<p><span data-bind="text: toursCompleted"></span> completed</p>
</div>
</div>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button data-bind="click: showTourList, jqmButtonEnabled: toursAvailable" data-theme="a">Tour List</button></div>
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>by Christoph Burgdorf</h4>
</div><!-- /header -->
</div><!-- /page -->
<!-- tourlist page -->
<div data-role="page" id="tourlist">
<div data-role="header">
<h1>Bar</h1>
</div><!-- /header -->
<div data-role="content">
<p><a href="#home">Back to home</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>by Christoph Burgdorf</h4>
</div><!-- /header -->
</div><!-- /page -->
</body>
</html>
জাভাস্ক্রিপ্ট
তো আসুন মজার অংশে আসা যাক - জাভাস্ক্রিপ্ট!
আমি যখন অ্যাপ্লিকেশনটি লেয়ারিংয়ের কথা ভাবতে শুরু করি তখন আমার মনে বেশ কয়েকটি জিনিস রয়েছে (যেমন টেস্টেবলি, আলগা সংযোগ)। আমি আপনাকে দেখাব যে আমি কীভাবে আমার ফাইলগুলি বিভক্ত করার সিদ্ধান্ত নিয়েছিলাম এবং কেন এমন জিনিসগুলি মন্তব্য করার সিদ্ধান্ত নিয়েছিলাম কেন আমি যাওয়ার সময় কেন আমি একটি জিনিস অন্যটির উপরে বেছে নিয়েছিলাম ...
App.js
var App = window.App = {};
App.ViewModels = {};
$(document).bind('mobileinit', function(){
// while app is running use App.Service.mockStatistic({ToursCompleted: 45}); to fake backend data from the console
var service = App.Service = new App.MockedStatisticService();
$('#home').live('pagecreate', function(event, ui){
var viewModel = new App.ViewModels.HomeScreenViewModel(service);
ko.applyBindings(viewModel, this);
viewModel.startServicePolling();
});
});
App.js হ'ল আমার অ্যাপ্লিকেশানের এন্ট্রি পয়েন্ট। এটি অ্যাপ অবজেক্ট তৈরি করে এবং ভিউ মডেলগুলির (শীঘ্রই আসার জন্য) একটি নেমস্পেস সরবরাহ করে। এটি মোবাইলের জন্য শোনে মোবাইল সরবরাহ করে ইভেন্টের ।
আপনি দেখতে পাচ্ছেন যে, আমি কিছু ধরণের এজ্যাক্স সার্ভিসের একটি উদাহরণ তৈরি করছি (যা আমরা পরে দেখব) এবং পরিবর্তনশীল "পরিষেবা" এ এটি সংরক্ষণ করব।
আমি পেজক্রিটটিও হুক করেছি হোম জন্য ইভেন্টটিও যেখানে আমি ভিউমোডেলের একটি উদাহরণ তৈরি করি যা পরিষেবাটির উদাহরণটি পাস করে। যদি কেউ মনে করেন, এটি অন্যভাবে করা উচিত, দয়া করে আপনার চিন্তাভাবনাগুলি ভাগ করুন!
মুল বক্তব্যটি হল, ভিউ মডেলটির কোনও পরিষেবাতে (গেটটিউর /, সেভটুর ইত্যাদি) কাজ করা দরকার। তবে আমি চাই না ভিউমোডেল এ সম্পর্কে আরও কিছু জানুক। সুতরাং উদাহরণস্বরূপ, আমাদের ক্ষেত্রে, আমি কেবল একটি বিদ্রূপিত এজাক্স পরিষেবাতে যাচ্ছি কারণ ব্যাকএন্ডটি এখনও বিকশিত হয়নি।
আমার আরও একটি বিষয় উল্লেখ করা উচিত যা ভিউমোডেলের আসল দৃষ্টিভঙ্গি সম্পর্কে শূন্য জ্ঞান থাকে। এজন্য আমি পেজক্রিয়েট হ্যান্ডলারের মধ্যে থেকে কো.এপ্লিবাইন্ডিংস (ভিউমোডেল, এটি) কল করছি । আমি ভিউ মডেলটিকে এটির পরীক্ষা করা আরও সহজ করার জন্য প্রকৃত দৃশ্য থেকে পৃথক করে রাখতে চেয়েছিলাম।
অ্যাপ.ভিউমোডেলস.হোমস্ক্রিনভিউমোডেল.জেএস
(function(App){
App.ViewModels.HomeScreenViewModel = function(service){
var self = {}, disposableServicePoller = Rx.Disposable.Empty;
self.toursTotal = ko.observable(0);
self.toursRunning = ko.observable(0);
self.toursCompleted = ko.observable(0);
self.toursAvailable = ko.dependentObservable(function(){ return this.toursTotal() > 0; }, self);
self.showTourList = function(){ $.mobile.changePage('#tourlist', 'pop', false, true); };
self.startServicePolling = function(){
disposableServicePoller = Rx.Observable
.Interval(10000)
.Select(service.getStatistics)
.Switch()
.Subscribe(function(statistics){
self.toursTotal(statistics.ToursTotal);
self.toursRunning(statistics.ToursRunning);
self.toursCompleted(statistics.ToursCompleted);
});
};
self.stopServicePolling = disposableServicePoller.Dispose;
return self;
};
})(App)
আপনি যখন বেশিরভাগ নকআউটজ মডেল উদাহরণগুলিকে কোনও অবজেক্ট আক্ষরিক সিনট্যাক্স ব্যবহার করে উদাহরণগুলি দেখতে পাচ্ছেন, আমি একটি 'স্ব' সহায়ক সহায়ক বস্তু সহ traditionalতিহ্যবাহী ফাংশন সিনট্যাক্সটি ব্যবহার করছি। মূলত এটি স্বাদের বিষয়। আপনি যখন অন্যটিকে রেফারেন্স দেওয়ার জন্য একটি পর্যবেক্ষণযোগ্য সম্পত্তি রাখতে চান, আপনি একবারে অবজেক্টটি আক্ষরিক লিখে রাখতে পারবেন না যা এটি কম প্রতিসামান্য করে তোলে। আমি আলাদা সিনট্যাক্সটি বেছে নেওয়ার কারণগুলির মধ্যে এটি অন্যতম।
পরের কারণটি হ'ল পরিষেবাটি যা আমি আগেই বলেছি প্যারামিটার হিসাবে পাস করতে পারি।
এই ভিউ মডেলের সাথে আরও একটি জিনিস রয়েছে যা আমি নিশ্চিত নই যে আমি সঠিক উপায়টি বেছে নিয়েছি কিনা। সার্ভার থেকে ফলাফল আনতে আমি পর্যায়ক্রমে এজাক্স পরিষেবাটি পোল করতে চাই। সুতরাং, আমি এটি করার জন্য স্টার্ট সার্ভিসপলিং / স্টপসোসরপোলিং পদ্ধতিগুলি প্রয়োগ করতে বেছে নিয়েছি । পেজ শোতে ভোটদান শুরু করা এবং ব্যবহারকারী যখন বিভিন্ন পৃষ্ঠায় নেভিগেট করেন তখন তা বন্ধ করার ধারণা।
পরিষেবাটি পোল করার জন্য ব্যবহৃত সিনট্যাক্সটিকে আপনি উপেক্ষা করতে পারেন। এটি আরএক্সজেএস জাদু। কেবল নিশ্চিত হয়ে নিন যে আমি এটির ভোট দিচ্ছি এবং সাবস্ক্রাইব (ফাংশন (পরিসংখ্যান) {..}) অংশে দেখতে পাওয়ায় প্রত্যাবর্তনযোগ্য ফলাফলটি প্রত্যাবর্তনের ফলাফলের সাথে আপডেট করব ।
অ্যাপ্লিকেশন
ঠিক আছে, আপনাকে দেখাতে কেবল একটি জিনিস বাকি আছে। এটি প্রকৃত পরিষেবা বাস্তবায়ন। আমি এখানে বিস্তারিতভাবে যাচ্ছি না। এটি কেবল একটি উপহাস যা গেট স্ট্যাটিসটিক্স বলা হয়ে গেলে কিছু নম্বর দেয় । আর একটি পদ্ধতি মকস্ট্যাটিস্টিক্স রয়েছে যা আমি অ্যাপ্লিকেশন চলাকালীন ব্রাউজারগুলির জেএস কনসোলের মাধ্যমে নতুন মান সেট করতে ব্যবহার করি।
(function(App){
App.MockedStatisticService = function(){
var self = {},
defaultStatistic = {
ToursTotal: 505,
ToursRunning: 110,
ToursCompleted: 115
},
currentStatistic = $.extend({}, defaultStatistic);;
self.mockStatistic = function(statistics){
currentStatistic = $.extend({}, defaultStatistic, statistics);
};
self.getStatistics = function(){
var asyncSubject = new Rx.AsyncSubject();
asyncSubject.OnNext(currentStatistic);
asyncSubject.OnCompleted();
return asyncSubject.AsObservable();
};
return self;
};
})(App)
ঠিক আছে, আমি প্রথমে লেখার পরিকল্পনা করার সাথে আরও অনেক কিছু লিখেছিলাম। আমার আঙুলটি আঘাত পেয়েছে, আমার কুকুরগুলি আমাকে তাদের বেড়াতে যেতে বলছে এবং আমি ক্লান্ত বোধ করছি। আমি নিশ্চিত যে এখানে প্রচুর পরিমাণে নিখোঁজ রয়েছে এবং আমি টাইপস এবং ব্যাকরণ সংক্রান্ত ভুলগুলির একটি গুচ্ছ রেখেছি। কিছু স্পষ্ট না হলে আমাকে চিৎকার করুন এবং আমি পোস্টটি পরে আপডেট করব।
পোস্টিংটি প্রশ্ন হিসাবে মনে হচ্ছে না তবে আসলে এটি! আমি চাই আপনি আমার দৃষ্টিভঙ্গি সম্পর্কে আপনার ভাবনাগুলি ভাগ করে নিন এবং আপনি যদি মনে করেন এটি ভাল বা খারাপ হয় বা যদি আমি কিছু মিস করি।
হালনাগাদ
এই পোস্টটি সর্বাধিক জনপ্রিয়তার কারণে এবং বেশ কিছু লোক আমাকে এটি করতে বলেছিল বলে আমি এই উদাহরণটির কোডটি গিথুবে রেখেছি:
https://github.com/cburgdorf/stackoverflow-knockout- উদাহরণ
গরম থাকাকালীন এটি পান!