ساخت برنامه وب موبایل: چه وقت، چرا و چگونه؟

حدود 6.8 میلیارد نفر در کره زمین زندگی می کنند که 5.1 میلیارد نفر از آنها تلفن همراه دارند. و میزان استفاده از دستگاه ها تلفن های هوشمند در حال رشد است. طبق مطالعه اخیر مرکز تحقیقات پیو ، تعداد کاربرانی که از طریق تلفن های هوشمند خود به اینترنت دسترسی دارند یا از برنامه های تلفن همراه استفاده می کنند در 5 سال گذشته بیش از دو برابر شده است. همچنین کسانی که از اینترنت یا ایمیل در تلفن های خود استفاده می کنند ، بیش از یک سوم آنها از طریق دستگاه های دستی خود آنلاین می شوند.

به عنوان یک کاربر دستگاه تلفن همراه ، کمتر چیزی به اندازه یک برنامه وب موبایلی با طراحی نامناسب یا برنامه نیتیو ناامید کننده و غیرقابل تحمل است. و به عنوان یک توسعه دهنده برنامه تلفن همراه ، کمتر چیزی می تواند به اندازه تلاش برای حمایت از طیف گسترده ای از مشتریان تلفن همراه که هر یک از آنها دارای مجموعه های ناامیدکننده خاص خود هستند ، به شدت تحریک کننده باشد. چه توسعه یک وب اپلیکیشن تلفن همراه ، برنامه بومی یا ترکیبی را انتخاب کند یا برای پشتیبانی از چندین مرورگر تلفن همراه، دستگاه های عجیب و غریب و آمدن به سیستم عامل های مختلف را انتخاب کند.

مطمئناً  امروزه همه توسعه دهندگان نگران حمایت از سرویس گیرنده های تلفن همراه نیستند. اما ماهیت فزاینده همه جانبه دستگاه ها و برنامه های تلفن همراه به  نشان می دهد کسانی که امروز نیازی به پشتیبانی از سرویس گیرندگان تلفن همراه ندارند، در آینده ای نه چندان دور به احتمال زیاد به چنین کاری نیاز دارند. بنابراین اگر قبلاً به توسعه برنامه تلفن همراه فکر نکرده اید، حالا باید فکر کنید.

مقایسه برنامه وب موبایل با برنامه بومی و برنامه ترکیبی

همان طور که در بیشتر انتخاب های فناوری صدق می کند، در مورد نوع برنامه تلفن همراه برای توسعه هیچ پاسخ ثابتی ندارد. برنامه های وب متعددی وجود دارد که باید بهترین شیوه را در نظر گرفت که همه آنها فنی نیستند:

• مخاطبان شما چه کسانی هستند؟
• آیا آنها احتمالاً  یک وب تلفن همراه یا یک برنامه بومی را ترجیح می دهند؟
• تفاوت برنامه های بومی و ترکیبی چیست؟
• چه منابع توسعه ای دارید و با کدام فناوری های موبایل بیشتر آشنا هستند؟
• مدل مجوز و فروش که برای محصول خود متصور هستید چیست؟

به طور کلی (اگرچه همیشه استثناهایی نیز وجود دارد) مسیر استفاده از برنامه وب تلفن همراه سریعتر و ارزانتر از مسیر برنامه تلفن همراه بومی است ، به ویژه هنگامی که هدف پشتیبانی از طیف گسترده ای از دستگاه ها باشد. برعکس ممکن است قابلیت های برنامه بومی دستگاه همراه (مانند سنسور حرکت و غیره) وجود داشته باشد که برای برنامه شما ضروری است در حالی که تنها از طریق یک برنامه بومی قابل دسترسی است و بنابراین انتخاب برنامه وب تلفن همراه را غیر ممکن می کند.

و فراتر از برنامه های وب قدیمی در مقابل برنامه های بومی ، بسته به نیازها و محدودیت های منابع ، یک برنامه ترکیبی تلفن همراه ممکن است پاسخ مناسبی برای شما باشد. برنامه های ترکیبی مانند برنامه های بومی روی خود دستگاه اجرا می شوند (به جای اینکه در مرورگر اجرا شوند) اما با فناوری های وب (HTML5 ، CSS و JavaScript) نوشته می شوند و به طور معمول توسط یک چارچوب برنامه ترکیبی پشتیبانی می شوند.

به طور خاص برنامه های ترکیبی در داخل یک ظرف محلی اجرا می شوند و از موتور مرورگر دستگاه (نه از خود مرورگر) برای ارائه HTML و پردازش JavaScript به صورت محلی استفاده می کنند. یک لایه انتزاع وب به بومی امکان دسترسی به قابلیت های دستگاه را فراهم می کند چرا که در برنامه های وب تلفن همراه مانند شتاب سنج ، دوربین و حافظه محلی قابل دسترسی نیستند.

اما هر انتخابی که می کنید – اعم از اینکه یک برنامه وب موبایل باشد ، یک برنامه بومی یا ترکیبی – مراقب باشید که به اندازه کافی مفروضات خود را تحقیق و تأیید کنید. به عنوان مثال ممکن است تصمیم گرفته باشید برای فروش محصولات خود یک برنامه تلفن همراه بومی برای تجارت الکترونیکی ایجاد کنید. اما ، طبق گفته Hubspot ، حدود 73٪ از کاربران تلفن های هوشمند می گویند که آنها بیشتر برای انجام خریدهای خود از برنامه های وب تلفن همراه بیشتر از برنامه های بومی تلفن همراه استفاده می کنند. بنابراین هر انتخابی را که انجام می دهید – اعم از وب تلفن همراه ، برنامه بومی یا ترکیبی – مراقب باشید که به اندازه کافی مفروضات خود را تحقیق و تأیید کنید.

البته ملاحظات عملی زمان و بودجه نیز وجود دارد. به قول معروف: “سریع تر ، بهتر ، ارزان تر … هر دو را انتخاب کنید“. در حالی که محدودیت زمان برای خرید و هزینه از اهمیت فوق العاده ای در توسعه برنامه های وب برخوردار است ، مهم این است که در این فرآیند زیاد از نظر کیفیت مصالحه نکنید. بازیابی اعتماد به نفس کاربری که اولین تجربه بد را داشته است بسیار دشوار است.

در واقع ، وب سایت موبایل ، برنامه های بومی و ترکیبی همه موجودات کاملاً متفاوتی هستند و هرکدام مجموعه منحصر به فرد مزایا و چالش های خاص خود را دارند. این مقاله برای توسعه وب موبایل به طور خاص بر روی روش ها و ابزارهای به کارگیری ، و دام هایی که باید از آنها جلوگیری کرد ، در توسعه برنامه های وب موبایلی بسیار کاربردی ، بصری و با کاربرد آسان تمرکز دارد.

توسعه برنامه وب موبایل نیاز به برنامه ریزی دقیق دارد

شناسایی نیازهای شما (یا مشتری) یکی از مهمترین اقدامات در زمینه توسعه برنامه ، موبایل یا موارد دیگر است. با دقت در مورد قابلیت های هدفمند تحقیق کنید تا مشخص کنید آیا در برنامه وب موبایل شما قابل دستیابی هستند یا خیر. چرا که کاملاً ناامیدکننده خواهد بود که بعدا متوجه شوید که  از یک یا چند کارکرد مشتری اصلی شما پشتیبانی نمی شود در حالی که قبلاً وقت و منابع خود را برای طراحی رابط وب و زیرساخت های پشتیبانی صرف کرده اید.

یکی دیگر از گفته های رایج برای تازه کارهای برنامه های وب تلفن همراه این است که تصور کنید کد مبتنی بر وب برای یک مرورگر دسک تاپ “همانطور که هست” در یک مرورگر تلفن همراه کار می کند. نه قطعاً اختلافات وجود دارد و اگر از آنها آگاهی نداشته باشید، قطعاً می توانند به کار شما آسیب برسانند. به عنوان مثال قابلیت پخش خودکار ویدئو با تگ video در مرورگرهای تلفن همراه کار نمی کند. به همین ترتیب  امروزه در اکثر مرورگرهای تلفن همراه از ویژگی های انتقال و شفافیت در CSS پشتیبانی نمی شود (یا حداقل همیشه پشتیبانی نمی شوند). همچنین با برخی از روشهای API وب در یک سیستم عامل تلفن همراه ، مانند API پخش موسیقی SoundCloud که به Adobe Flash نیاز دارد و در اکثر دستگاه های تلفن همراه پشتیبانی نمی شود ، مشکل خواهید داشت.

یک گفتگوی رایج برای تازه کارهای برنامه های وب تلفن همراه این است که اطمینان حاصل کنید که کدهای مبتنی بر وب برای یک مرورگر دسک تاپ “همانطور که هست” در مرورگر تلفن همراه کار می کنند.
یک عامل پیچیده به ویژه در ایجاد برنامه های تحت وب تلفن همراه این است که طول عمر دستگاه های تلفن همراه بسیار کمتر از نمایشگرهای دسک تاپ است (متوسط طول عمر تلفن های همراه در ایالات متحده حدود 21 ماه است). این طول عمر کوتاه تردستگاه های ، همراه با انتشار مداوم دستگاه ها و فن آوری های تلفن همراه جدید ، منظره ای همیشه در حال تغییر را برای دستگاه های هدف ایجاد می ککند. در حالی که کار در یک مرورگر با غلبه بر  تعدادی از مشکلات خاص دستگاه ، تا حدودی این مسئله کاهش می یابد. هنوز هم باید یک نمای مبتنی بر مرورگر طراحی کنید که از بسیاری از وضوح صفحه نمایش مختلف (و همچنین تنظیم مناسب جهت های افقی و عمودی) پشتیبانی کند.

همچنین باید در مورد پشتیبانی از نمایشگرهای کریستال مایع که دارای تراکم پیکسلی به اندازه کافی بالا هستند(Apple Retina Displays) به طوری که چشم انسان قادر به تشخیص پیکسل های جداگانه در یک فاصله دید معمول نیست ، فکری کرد.

چندین محصول اپل – از جمله آیفون ، iPod Touch ، iPad ، MacBook Pro ، iPad Mini و iPad Air – نمایشگرهای Retina را ارائه می دهند. به ویژه برای یک برنامه وب موبایل، مهم است که بدانید، یک صفحه نمایش رتینا باعث می شود تصاویر با وضوح پایین (که معمولاً برای دستگاه های تلفن همراه ارائه می شوند) مبهم به نظر می رسند و پیکسل سازی ممکن است رخ دهد. بهترین راه حل توسعه برنامه در این مواقع این است که سرور تشخیص دهد درخواست از دستگاه Retina است و سپس یک تصویر با رزولوشن بالاتر به مشتری ارائه می دهد.

اگر می خواهید از برخی از موارد جالب HTML5 استفاده کنید ، به یاد داشته باشید که از قبل بررسی کنید که عملکردی که به دنبال آن هستید در فضای منظره دستگاهی که احتمالاً مشتریان شما از آن استفاده می کنند پشتیبانی می شود. به عنوان مثال ، در iOS 6 و بالاتر ، هیچ پشتیبانی از قابلیت navigator getUserMedia وجود ندارد زیرا دوربین فقط از طریق برنامه های بومی قابل دسترس است. دو منبع عالی برای بررسی مواردی که در دستگاه ها و مرورگرهای خاص پشتیبانی می شوند caniuse.com و html5test.com هستند.

بهینه سازی عملکرد برنامه وب موبایل

“OMG ، این چیز خیلی آهسته است!” به عنوان یک توسعه دهنده برنامه وب موبایل، احتمالاً آخرین کلماتی هستند که می خواهید از یکی از کاربران خود بشنوید. بنابراین باید به دقت در مورد چگونگی کاهش و بهینه سازی انتقال بایت و سرور برای کاهش زمان انتظار کاربر فکر کنید. انتظار اینکه همیشه انتقال از طریق شبکه WiFi انجام شود غیرواقعی است و باید بدانید که 60٪ از کاربران وب تلفن همراه می گویند انتظار دارند سایتی در 3 ثانیه یا کمتر روی تلفن همراه آنها بارگیری شود . به همین ترتیب ، گوگل دریافت که به ازای هر پنج ثانیه زمان بارگیری ، میزان ترافیک 20٪ کاهش می یابد (و همچنین لازم به ذکر است که موتورهای جستجو زمان بارگذاری را به عنوان بخشی از محاسبه نمره کیفیت صفحه مشاهده می کنند).

در ادامه نکاتی بیان شده است که می توانند به بهینه سازی عملکرد برنامه های وب تلفن همراه شما کمک کرده و تأخیر را به حداقل برسانند:

بهینه سازی تصویر

مشهور است که زمان بارگذاری تصویر یکی از بزرگترین مشکلات عملکردی است که روی بارگذاری صفحه در دستگاههای تلفن همراه تأثیر می گذارد. استفاده از بهینه سازهای تصویر آنلاین مانند smushit.com می تواند در پرداختن به این مسئله مفید باشد.

فشرده سازی

فشرده سازی کد فایل های JavaScript و CSS شما ، بسته به مقدار کدی که دارید ، می تواند تأثیر قابل توجهی در عملکرد داشته باشد.

پرس و جوهای پایگاه داده

بعضی از مرورگرهای دستگاه تلفن همراه به اندازه مرورگرهای دسک تاپ کوکی ها را نمی پذیرند، که می تواند نیاز به اجرای حتی بیشتر از حد معمول را پیدا کند. بنابراین حافظه پنهان در سمت سرور هنگام پشتیبانی از سرویس گیرندگان برنامه وب وب بسیار مهم است.

فراموش نکنید که از فیلترهای مناسب برای جلوگیری از تزریق درخواست SQL استفاده کنید که در غیر این صورت می تواند امنیت سایت و سرور شما را به خطر بیندازد.

شبکه های تحویل محتوا (CDN)

اگر قصد تهیه فیلم ، تصویر ، فایل صوتی یا انواع دیگر رسانه را دارید ، استفاده از CDN بسیار توصیه می شود. برخی از CDN های تجاری رایج شامل Amazon S3 ، Microsoft Windows Azure و MaxCDN هستند. مزایای استفاده از CDN بسیار زیاد است و شامل موارد زیر است:

عملکرد بارگیری بهبود یافته 

استفاده از منابع CDN به شما امکان می دهد بار را توزیع کنید، پهنای باند را ذخیره کنید و عملکرد را افزایش دهید. CDN های بهتر در دسترس بودن بالاتر ، تأخیر شبکه کمتر و افت بسته کمتری دارند. علاوه بر این ، بسیاری از CDN ها مجموعه ای از توزیع جهانی مراکز داده را فراهم می کنند که امکان بارگیری از یک سرور نزدیک به مکان کاربر را فراهم می کند (در نتیجه تعداد پرش های شبکه و بارگیری سریعتر).

بارگیری همزمان

بیشتر مرورگرها معمولاً تعداد اتصالات همزمان با یک دامنه را محدود می کنند ، پس از آن بارگیری های اضافی مسدود می شود تا اینکه یکی از بارگیری های قبلی به پایان برسد. شما اغلب می توانید هنگام بارگیری بسیاری از پرونده های بزرگ از همان سایت ، این محدودیت را در عمل مشاهده کنید. هر CDN اضافی (در یک دامنه متفاوت) امکان بارگیری همزمان اضافی را فراهم می کند.

تجزیه و تحلیل پیشرفته

بسیاری از CDN های تجاری گزارش های استفاده را ارائه می دهند که می تواند تجزیه و تحلیل وب سایت شما را تکمیل کند و ممکن است کمی بهتر از بازدیدها و بارگیری فیلم ها را ارائه دهد. به عنوان مثال GTmetrix ، ابزاری عالی برای گزارشگری وب سایت برای نظارت و بهینه سازی منابع بارگیری شده در سایت شما دارد.

ابزارهای توسعه برنامه وب موبایل

“ابزارهای مناسب برای کار مناسب” جمله ای قدیمی است که به همان اندازه که در حوزه های دیگر کاربرد دارد، در مورد توسعه نرم افزار نیز صدق می کند. این آموزش برخی از محبوب ترین و پرکاربردترین ابزارها برای توسعه برنامه های وب تلفن همراه را ارائه می دهد و آنها را معرفی می کند ، اما توجه داشته باشید که بسته به موارد زیر ، ابزارهای دیگری نیز وجود دارد که با توجه به نیازهای شما و منابع موجود، “مناسب” برای توسعه برنامه وب تلفن همراه شما هستند.

انتخاب صحیح چارچوب برنامه وب جاوا اسکریپت موبایل

از آنجا که توسعه برنامه وب موبایل تمایل به ایجاد بسیاری از چالش های مشترک مشابه – از جمله سازگاری بین مرورگرها و HTML و CSS متناقض در مرورگرهای تلفن همراه – چارچوب هایی را ایجاد کرده است (مبتنی بر HTML5 و CSS3) که به طور خاص برای پرداختن به این مسائل و تا آنجا که ممکن است روی یک سری گسترده از تلفن های هوشمند و تبلت ها بی عیب و نقص کار کنید. اکثر این چارچوب های برنامه وب موبایل دارای وزن کم هستند که به شما کمک می کند مرور وب سریع تلفن همراه را بدون آسیب رساندن به ظاهر و سایت خود تسهیل کنید.

jQuery  یک چارچوب محبوب جاوا اسکریپت است. اگر با نسخه دسک تاپ آشنا هستید ، توصیه می شود jQuery Mobile را برای برنامه وب تلفن همراه خود امتحان کنید. این یک کتابخانه ویجت دارد که نشانه گذاری معنایی را به فرمت مناسب تبدیل می کند و در صفحه های لمسی عملیات را آسان می کند. آخرین نسخه آن از یک  کد بسیار سبک وزن تشکیل شده است که شامل عناصر گرافیکی زیادی است که واقعاً می تواند رابط کاربری شما را بهبود بخشد.

گزینه دیگر Sencha Touch  است که به سرعت در حال به دست آوردن سهم بازار است. در کل عملکرد عالی ارائه می دهد و به تولید یک رابط کاربری وب موبایل کمک می کند که تا حد زیادی شبیه به برنامه بومی است. کتابخانه ویجت کامل آن براساس کتابخانه JavaScript Sencha’s ExtJS ساخته شده است.

تفاوت اساسی وجود دارد که باید هنگام مقایسه jQuery Mobile و Sencha Touch در نظر گرفت:

نگاه کنید و احساس کنید – به طور کلی ظاهر و احساس یک برنامه Sencha Touch واضح تر و بهتراز یک برنامه تلفن همراه jQuery است، اما لازم به یادآوری است که چنین واکنش هایی بسیار ذهنی هستند.

قابلیت انبساط  – jQuery Mobile بسیاری از افزونه های شخص ثالث را ارائه می دهد و ذاتاً بسیار قابل توسعه است ، در حالی که Sencha Touch در حال حاضر بسیار بیشتر یک چارچوب “بسته” است.
پشتیبانی از دستگاه فعلی –  jQuery Mobile بازه وسیع تری از دستگاه ها را نسبت به Sencha Touch پشتیبانی می کند.
HTML در مقابل جاوا اسکریپت –  jQuery عمدتا HTML محور است (به عنوان مثال، گسترش و دستکاری HTML موجود در JavaScript) ، در حالی که کدگذاری Sencha Touch کاملاً مبتنی بر JavaScript است. (این نمونه ای از موارد مهمی است که تیم مهارت شما هنگام انتخاب فناوری باید در نظر داشته باشد).
وابستگی های خارجی تلفن همراه–  jQuery برای دستکاری در DOM به jQuery و jQuery UI احتیاج دارد، در حالی که Sencha Touch هیچ وابستگی خارجی ندارد.
منحنی یادگیری-بیشتر توسعه دهندگان می دانند که زمان یادگرفتن  jQuery کمتر از Sencha Touch است ، که شاید با درصد زیادی از توسعه دهندگان وب که قبلاً با کتابخانه های استاندارد jQuery آشنایی دارند ، تأمین شود.

چارچوب های واکنش گرا و برنامه های وب همراه

در سال های اخیر تعداد زیادی از چارچوب های واکنش گرا تولید شده اند که دو تا از محبوب ترین آنها Bootstrap و Foundation است. به طور خلاصه ، چارچوب های ریسپانسیو طراحی و پیاده سازی رابط کاربر مبتنی بر وب را ساده و ساده تر می کنند و متداول ترین الگوها و اجزای رابط کاربری را در یک چارچوب قابل استفاده مجدد و بهینه سازی عملکرد محصور می کنند.

بسیاری از این چارچوب ها منبع باز ، بارگیری رایگان و به راحتی قابل تنظیم هستند. تا زمانی که مجموعه خاصی از الزامات را نداشته باشید ، به احتمال زیاد استفاده از یکی از این چارچوب ها سطح تلاش برای طراحی و اجرای برنامه وب همراه شما را کاهش می دهد.

با بررسی دو گزینه اصلی ، Bootstrap و Foundation برخی از تفاوت های اساسی که باید در نظر گرفته شود عبارتند از:

سیستم عامل های میزبان – در حالی که Bootstrap از دستگاه های تلفن همراه ، رایانه لوحی و دسک تاپ پشتیبانی می کند ولی در درجه اول برای استفاده دسک تاپ طراحی شده است. از طرف دیگر ، Foundation برای همه اندازه ها و انواع صفحه نمایش طراحی شده است.
سازگاری مرورگر – بوت استرپ با IE7 یا بالاتر سازگار است ، در حالی که Foundation فقط با IE9 یا بالاتر سازگار است.
تنوع طرح بندی و مولفه ها- Bootstrap دارای مجموعه بزرگتری از عناصر نسبت به Foundation  می باشد.
تغییر اندازه خودکار – در شبکه بندی صفحه با Foundation، با توجه به ارتفاع و عرض کنونی مرورگر ستون ها کوچک یا کشیده می شود ، در حالی که Bootstrap فقط از یک مجموعه از پیش تعیین شده اندازه ستون ها بر اساس یک مجموعه استاندارد از اندازه صفحه پشتیبانی می کند.

اشکال زدایی و آزمایش برنامه های وب موبایل

اشکال زدایی از برنامه های وب تلفن همراه ممکن است مشکل و تا حدودی ناامیدکننده باشد ، به خصوص اگر نیاز دارید که دستگاه های مختلف را آزمایش کنید یا SDK ها را برای شبیه سازی سیستم عامل های مشتری هدف  نصب کنید.

در این زمینه ، یک مزیت بارز توسعه وب تلفن همراه (در مقایسه با توسعه برنامه بومی) این است که می توانید از ابزارهای استاندارد توسعه دهنده مبتنی بر مرورگر برای اشکال زدایی از برنامه خود استفاده کنید. بر اساس اولویت شخصی من برای رفع اشکال از راه دور ، چیزی که من در این آموزش توسعه برنامه توصیه می کنم Chrome با DevTools است. سایر گزینه های استاندارد عبارتند از Firefox با ابزار Firebug یا Opera’s Dragonfly.

خلاصه اینکه :

امروزه با گسترش سریع و مداوم تعداد ، تنوع و پیچیدگی دستگاه های موبایل موجود در بازار، نیاز به برنامه های کاربردی تلفن همراه  مفید، کاربر پسند و با کارایی بالا احتمالاً افزایش چشمگیری خواهد یافت. بنابراین توانایی توسعه هوشمندانه و کارآمد این برنامه ها از اهمیت فوق العاده ای برخوردار است.

هنگام انتخاب بین گزینه های برنامه تلفن همراه وب ، بومی و ترکیبی برای دستگاه های تلفن همراه ، باید عوامل زیادی را در نظر گرفت. هر کدام مزایای خاص خود را دارند ، اما برنامه های وب موبایلی اغلب نمایانگر کارآمدترین گزینه توسعه (و بنابراین زمان عرضه به بازار) شما هستند. در صورت انتخاب این مسیر ، امیدوارم که این مقاله توسعه برنامه وب وب همراه شما را به طور مستقیم و با موفقیت به هدف نزدیک کند.

منبع : www.toptal.com