در مقاله پیش رو سعی داریم شما خوانندگان عزیز را با مفهوم اپلیکیشن وب ویو و مسائلی که پیرامون آن وجود دارد آشنا کنیم. امید است تا پایان این مقاله همراه ما باشید.
تعریف اپلیکیشن وب ویو(Application Webview): وب ویو یک برنامه کاربری ساده میباشد که با استفاده از یک مرورگر داخلی، وب سایت شما را به عنوان صفحه اصلی خود نمایش میدهد و کاربران قادرند درون خود اپلیکیشن در داخل وب سایت شما به جستجو بپردازند.
اپ کارا یک سرویس آنلاین میباشد که برای ساخت اپلیکیشن وب ویو پیشرفته، برای سایتهایی که ریسپانسیو(Responsive) و یا واکنشگرا میباشند و یا به عبارتی دارای نسخه موبایل هستند به کار میرود. در این روش نسخه موبایل وب سایت شما با همان امکاناتی که دارد به اپلیکیشن اندروید تبدیل میشود و مشابه یک مرورگر عمل مینماید. برای استفاده از این سرویس تنها آدرس سایت مورد نظر نیاز بوده و نیازی نیست که وب سایت کنونی شما تغییر، بارگذاری و یا حتی مجدداً کدنویسی گردد.
وب ویو چیست؟
نمایش صفحات وب بر روی یک اپلیکیشن اندروید یا ios کاری است که وب ویو (Webview) انجام میدهد. با استفاده از وب ویو میتوانید سایت خود را به صورت آنلاین بر روی گوشی بارگذاری کنید. حتی بدون اتصال به اینترنت هم قادرید سایت خود را داخل گوشی لود نمائید! همانطور که گفته شد توسط وب ویو میتوانید صفحات سایت خود را بدون اینکه به اینترنت وصل باشید به مخاطبین خود نشان دهید. به عبارت دیگر میتوان گفت که وب ویو (Webview) نوعی نمایش میباشد که صفحات وب را درون برنامه شما نشان میدهد. از این سرویس برای تبدیل سایت های وردپرس به اپلیکیشن و دیگر سیستم های مدیریت محتوا استفاده می گردد.
شما قادر هستید که رشته HTML را معین کنید و توسط وب ویو آن را درون برنامه خود به نمایش بگذارید. در حقیقت کاری که Webview انجام میدهد این است که برنامه شما را به برنامه وب تبدیل مینماید و صفحات وب را برای شما نشان میدهد. افزون بر این میتوان گفت که وب ویو یکی از ویوهای کاربردی پلتفرم(Platform) اندروید محسوب میشود که با استفاده از آن میتوانید یک صفحه وب آنلاین و یا حتی آفلاین را داخل یک Activity (کار، فعالیت) به کاربر نشان دهید. دقیقاً مشابه اینکه وب سایتی را در مرورگری همچون Chrome باز میکنید البته باید گفت که تفاوتی هم با آن دارد و آن، این است که کاربر، صفحه وب را داخل برنامه میبیند و به مرورگری مستقل انتقال پیدا نمیکند.
در وب ویو امکان این امر وجود دارد که محتوای دریافتی از صفحه وب کنترل گردد. به طور مثال میتوانید مشخص کنید که کدهای جاوا اسکریپت که در طراحی صفحات وب با کدهای HTML ترکیب میگردند امکان اینکه اجرا شوند را داشته باشند یا نه.
در حالت کلی میتوان گفت که:
- برای ساختن نسخه وب ویونیاز به دانش برنامه نویسی بالا ندارید و میتوانید آن را در عرض چند ساعت بسازید.
- اپلیکیشنی که با Webview نوشته شده است همانند یک مرورگر عمل مینماید.
- با استفاده از وب ویو میتوانید برای همه افرادیکه اپلیکیشن شما را بر روی گوشی موبایلشان نصب نمودهاند، نوتیفیکیشن ارسال نمائید.
- بدون صرف هزینه و یا زمان زیاد میتوانید نسخه اپلیکیشن اندروید و ios وب سایت خود را توسط وب ویو بسازید.
علاوه بر تمامی موارد ذکر شده میتوان اذعان کرد که Webview افزون بر اینکه وب سایت شما را به صورت یک اپلیکیشن به مخاطبین نمایش میدهد در صورتیکه از نسخه آنلاین آن استفاده نمائید سبب میشود که رتبه سایت شما در موتورهای جستوجو افزایش یابد چرا که هر بار که کاربری با استفاده از اپلیکیشن، سایت شما را بررسی میکند در حقیقت سایت شما را میبینید و به عنوان فردی که از سایت شما دیدن میکند به حساب میآید بنابراین میتوان گفت که وب ویو بازدیدکنندگان سایت شما را افزایش میدهد و از این طریق موجب میشود رتبه سایت شما افزایش پیدا کند. علاوه بر اینها شما میتوانید تبلیغات درون برنامهای را در نسخه Webview به انجام برسانید.
وب ویو در اندروید و ios
دستگاههای هوشمند اندرویدی از بازیها و همچنین برنامه های مختلفی بر روی اسمارت فون خود بهره میبرند که هر کدام از آنها دارای وظیفه ای هستند. در بین این نرم افزارها تعدادی از آنها از برنامه های اصلی سیستم عامل به شمار میآیند بنابراین اگر غیر فعال باشند قسمتی از دستورات اجرا نخواهند شد و حتی تعداد زیادی از دستورات هم با خطا مواجه خواهند گردید. گاهی اوقات این خطاها به اندازهای ادامه مییابند که کاربر تصور میکند قطعه ای از گوشی همراهش اشکال پیدا کرده است.
در صورتی که باید گفت این چنین نیست و احتمالاً فقط یک ابزار خاص به روز نشده است. در این حین از بین تمامی مولفه های اصلی سیستم عامل که تا به امروز گوگل منتشر کرده است، شماری از آنها جزو مهمترینها محسوب میگردد. یکی از این مولفه ها اندروید سیستم وب ویو( Android System WebView) است که عنوان جزئی اصلی از سیستم عامل میباشد که جهت نمایش دادن محتوای وب در برنامه ها مورد استفاده قرار میگیرد و Google LLC آن را منتشر نموده است. همانطور که مستحضرید تعدادی از نرم افزارهای اندرویدی در قسمتی از خود به سایت توسعه دهندهاشان متصل میشوند و اطلاعاتی که لازم بوده و مورد نیاز میباشد برای کاربران نشان میدهند که البته بایستی بدانید نمایش این قبیل از صفحات توسط اندروید سیستم وب ویو انجام میگیرد و هر چیزی را به راحتی به نمایش میگذارد.
لازم به ذکر است که این ابزار خاص از کروم قدرت گرفته است و سعی دارد که بتواند هر چیزی را به طور صحیح و با نهایت کیفیت به نمایش درآورد. افزون بر همه اینها در صورتیکه این اپلیکیشن بروز نباشد بسیاری از اپلیکیشنهایی که دارید با مشکلاتی مواجه خواهند شد پس به شما توصیه میکنیم هرچه سریعتر آن را بروز کنید تا بتوانید تجربهای جدید در مشاهده محتوای وب کسب کنید.
همانطور که در بالا هم اشاره شد اپلیکیشن سیستم اندروید وب ویو به عنوان جزئی اصلی از سیستم عامل اندروید بوده که تا به امروز توانسته است توجه بیش از 5 میلیارد کاربر مختلف را جلب نماید. لازم به ذکر است که این اپلیکیشن موفق به اخذ امتیاز 4/4 از 5 توسط کاربران در گوگل پلی شده است. شما هم میتوانید جدیدترین نسخه اصلی این اپلیکیشن را بدون کوچکترین تبلیغاتی از وب سایت معروف و بااعتبار فارسروید دریافت کنید.
در نهایت میتوان گفت که در اندروید، Webview صفحات وب شما را در قالب برنامه APK اندرویدی در اختیار شما قرار میدهد. از این رو موارد مورد استفاده وب ویو، به نمایش درآوردن وب سایت و همچنین کدهای Html میباشد.
کاربردهای وب ویو در اندروید
وب ویو کاربردهای زیادی دارد. یکی از کاربردهایی که میتوان برای Webview نام برد نمایش دادن نقشه های آنلاین همچون Google Maps میباشد. چنانچه میخواهید محل شرکت خود را روی نقشهای نشان دهید، استفاده از وب ویو یکی از گزینه هایی است که پیش روی شما قرار دارد که هم ساده بوده و هم در دسترس میباشد و میتوانید به راحتی از آن استفاده کنید. از کاربرد دیگر وب ویو میتوان به نمایش محتواهایی که مرتباً در حال تغییر و همچنین بروز رسانی میباشند اشاره کرد. شماری از اپلیکیشنهای مورد توجه از قبیل اینستاگرام به منظور نمایش متن"شرایط و قوانین استفاده از اپلیکیشن" از وب ویو بهره میبرند. بنابراین کاربر با مراجعه به این صفحه(Activity) متن قوانین را به صورت آنلاین و آپدیت شده از سرورهای اینستاگرام اخذ میکند. مزیتی که این روش دارد این است که به منظور اصلاح و آپدیت متن نیاز به ایجاد تغییراتی داخل برنامه و همچنین انتشار نسخه جدیدی نیست و کاربر بدون اینکه اپلیکیشن را آپدیت نماید هر دفعه که تصمیم دارد قوانین برنامه را مطالعه کند آخرین نسخه را میبیند.
به عنوان مثالی دیگر تصور کنید که یک وب سایت فروشگاهی راه اندازی نموده اید و به دلایلی اعم از هزینه زیاد، زمان کم و ... امکان اینکه اپلیکیشن کامل آن را بسازید برایتان وجود ندارد. در این زمان است که میتوانید به آسانی همان وب سایت را در قالب یک اپلیکیشن موبایلی به کاربر ارائه کنید. این کار دقیقاً مشابه این است که کاربر وارد مرورگری شده است و آدرس وب سایت شما را وارد کرده است. البته تفاوت آن در این است که نیازی نیست که آدرس را وارد نماید و به محض اینکه برنامه را اجرا کرد وب سایت بارگذاری میشود. برای مثال می توان یک سایت پرستا شاپ را به اپلیکیشن اندروید تبدیل نمود.
نکته قابل توجهی که حتماً بایستی آن را در نظر داشته باشید این است که استفاده کردن از این قابلیت به منظور نمایش دادن یک وب سایت کامل به صورت یک اپلیکیشن موبایلی، راه حل استانداردی نبوده و تجربه کاری مقبولی را رقم نخواهد زد. زمانیکه هیچ گزینه دیگری پیش رو ندارید از این راهکار استفاده نمائید. در این صورت بایستی وب سایت برای انواع صفحات نمایش بهینه شده باشد به عبارتی باید طراحی آن به صورت واکنشگرا باشد.
ساخت اپلیکیشن وب ویو ساده در اندروید استودیو
همانطور که در بالا هم ذکر شد وب ویو یکی از ویوهای کاربردی پلتفرم(Platform) اندروید محسوب میشود و از طریق پیوند مناسب وب با ساختار Dynamic(پویا)، اپلیکیشن تا حدی که ممکن است امکان دستکاری و همچنین تغییردهی را در این محیط برای برنامه نویسان فراهم مینماید. به طور مثال با پیاده سازی متدهایی که مورد نیاز است برنامه نویس میتواند فرایند شروع، بارگذاری، پایان یافتن بارگذاری و خطاها را به درستی مدیریت نماید. بنابراین چنانچه تمایل دارید به عنوان بخشی از رابط کاربر خود، HTML را نشان دهید میتوانید در اپلیکیشن خود از وب ویو بهره ببرید. در ادامه نحوه ساخت اپلیکیشن وب ویو در اندروید استودیو شرح داده شده است.
قبل از اینکه شروع به ساخت وب ویو کنید باید به این نکته توجه داشته باشید که سایت مورد نظرتان Responsive (ریسپانسیو و یا واکنشگر) باشد به این معنی که جهت استفاده در تمامی مرورگرها و نیز دستگاههایی از قبیل موبایل و تبلت که مورد استفاده کاربران قرار میگیرد مناسب باشد.
پس اولین گام شما داشتن سایتی واکنشگرا است.
نکتهای که باید در نظر داشته باشید این است که تیمهای کاری جهت ریسپانسیو نمودن سایتها وجود دارند که در صورت ریسپانسیو نبودن سایتتان میتوانید از آنها کمک بگیرید. یکی از سایتهایی که این کار را برای شما انجام میدهد سایت"موبی سافت" است.
گام دوم: یک پروژه جدید در Android Studio بسازید. برای این کار نرم افزار را باز کنید و مطابق تصویری که در شکل زیر مشاهده میکنید از منوی File گزینه New را انتخاب کنید و از تب باز شده گزینه New Project را انتخاب کنید.
در بخش Application name نام WebViewApp برای پروژه خود انتخاب کنید.
گام سوم: در این مرحله بایستی رابط کاربری ایجاد کنید و وب ویو را به آن اضافه کنید. به این منظور مسیر Open res -> layout -> activity_main.xml (or) main.xml را دنبال کنید.
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.webviewapp.MainActivity"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /></RelativeLayout>
|
گام چهارم: بارگذاری نشانی وب سایت؛ در این مرحله باید جاوا اسکریپت را فعال کنید(مسیر زیر را دنبال کنید) و نشانی وب سایت را داخل برنامه بارگذاری نمائید.
Open src -> package -> MainActivity.java
توجه کنید در کدی که در زیر آورده شده است میتوانید نشانی هر وب سایتی را به برنامه بدهید تا آن وب سایت به اپلیکیشن تبدیل گردد.
package com.example.webviewapp;import android.support.v7.app.AppCompatActivity;import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient;public class MainActivity extends AppCompatActivity { private WebView mywebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mywebView = (WebView) findViewById(R.id.webview); WebSettings webSettings= mywebView.getSettings(); webSettings.setJavaScriptEnabled(true); mywebView.loadUrl("https://نام سایت مورد نظر/"); }}
|
گام پنجم: فایل AndroidManifest.xml را باز کنید و سپس مجوز استفاده از بسته اینترنت را به آن بیفزائید. علت این کار هم این است که برنامه به صورت آنلاین از سایت بارگذاری گردد.
گام ششم: چنانچه تا گام پنجم را به درستی انجام داده باشید و برنامه را اجرا کرده باشید خواهید فهمید که لینکها در خود مرورگر باز میشوند نه در درون نرم افزار. برای رفع این مشکل کدی که در ادامه آورده شده است در کلاس MainActivity.java بیفزائید.
mywebView.setWebViewClient(new WebViewClient());
گام هفتم: افزودن دکمه بازگشت به برنامه؛ برای اینکه دکمه برگشت به برنامه داشته باشید در کلاس MainActivity.java کدهای زیر را بیفرائید.
public void onBackPressed() { if(mywebView.canGoBack()) { mywebView.goBack(); } else{ super.onBackPressed(); } } |
گام هشتم: حذف کردن پدینگها: برای اینکه پدینگهای بالا، پایین، چپ و راست را حذف کنید activity_main.xml را باز کنید و کدی که در ادامه آورده شده است را وارد نمائید.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.webviewapp.MainActivity"> // WebView Element <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /></RelativeLayout>
|
کد کامل MainActivity.java در زیر آورده شده است.
MainActivity.java complete code:
package com.example.webviewapp;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;public class MainActivity extends AppCompatActivity { private WebView mywebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mywebView = (WebView) findViewById(R.id.webview); WebSettings webSettings= mywebView.getSettings(); webSettings.setJavaScriptEnabled(true); mywebView.loadUrl("https://mobi-soft.ir/"); // Line of Code for opening links in app mywebView.setWebViewClient(new WebViewClient()); }//Code For Back Button@Override public void onBackPressed() { if(mywebView.canGoBack()) { mywebView.goBack(); } else { super.onBackPressed(); } }} |
چنانچه میخواهید نوار پیش فرض اپلیکیشن را حذف نمائید با تغییر کوچکی در فایل styles.xml این امر تحقق مییابد. جهت باز کردن فایل styles.xml مسیر app->res->values->styles.xm را دنبال کنید و تغییر زیر را اعمال کنید.
<style name="AppTheme"parent="Theme.AppCompat.Light.NoActionBar">
در صورتیکه همه گامهای فوق را انجام دهید وب سایت شما به وب ویو تبدیل خواهد شد.
مزایا و معایب اپلیکیشن های وب ویو
اعمال تغییرات سایت در اپلیکیشن، نسخه اندروید و ios، قابلیت اتصال به Mobile App Analytics گوگل، هزینه پایین و مقرون به صرفه بودن، عدم نیاز به وب سرویس، ارسال نوتیفیکیشن، راه اندازی در کوتاهترین زمان ممکن، افزایش رنک(رتبه) و بازدید وب سایت و همچنین فعال سازی کش(cache) در اپلیکیشن جهت افزایش سرعت از مزایای طراحی اپلیکیشن وب ویو محسوب میگردند.
از معایب اپلیکیشن ویو میتوان به مواردی همچون عدم توسعه آسان، تجربه کاربری نامناسب، امکانات محدود(سایت)، سرعت پایین، عدم امکان طراحی اختصاصی، عدم سازگاری مناسب با موبایل، باگ(خطا)های بیشتر و اینکه سایت حتما باید ریسپانسیو(Responsive) باشد اشاره کرد.
تا اینجا به بررسی مسائلی که پیرامون وب ویو وجود دارد پرداختیم در ادامه بهتر است به معرفی نرم افزارهایی که جهت تبدیل وب سایت به اپلیکیشن موبایلی وجود دارد آشنا کنیم.
برنامه های تبدیل سایت به وب ویو مختلفی وجود دارد که با بهره گیری از آنها میتوانید وب سایت واکنشگرای خود را به اپلیکیشن تبدیل کنید. از جمله این نرم افزارها میتوان به نرم افزار Website 2 APK Builder اشاره کرد که تحت ویندوز میباشد. میتوانید این برنامه را نصب کنید و وب سایت خود را به فایل apk تبدیل کنید. افزون بر نرم افزار نام برده شده نرم افزار دیگری با عنوان ApkCreator – Web2App Pro وجود دارد که با بهره گیری از آن میتوانید وب سایت رپسپانسیو خود را تبدیل به اپلیکیشن موبایل کنید ولی این نرم افزارها محدودیت های زیادی دارند. افزون بر نرم افزارهای مذکور سرویسهای آنلاینی همچون اپ کارا و ... هم وجود دارند که وب سایت شما را تبدیل به نسخه اندروید میکنند.
برنامه ها و سرویسهای زیادی وجود دارند که این کار را برایتان انجام میدهند ولی هر یک محاسن و معایبی دارند و البته ممکن است برخی از سرویسهای رایگان و برنامه هایی که به این منظور وجود دارد نیاز شما را کاملاً بر طرف نکنند.
ساخت وب ویو پیشرفته
عدم پشتیبانی از بیشتر استاندارهای وب، فعال نبودن کش نرم افزار (جهت افزایش سرعت)، محدودیتهای شخصی سازی، عدم امکان درج اکشن بار و منو در خود اپلیکیشن، عدم امکان تعیین سطح دسترسی ها و پرمیشنهای مختلف، عدم باز شدن لینکهای خارجی در مرورگر خارجی، عدم امکان آپلود و دانلود فایل و ... معایبی هستند که این قبیل از برنامه ها و سرویسهای رایگان دارند بنابراین به شما توصیه میکنیم از سرویسهای آنلاین معتبر که بابت این کار هزینه هایی از شما اخذ میکنند استفاده کنید و یا برنامه نویسی برای تبدیل وب سایت به اپلیکیشن اندروید اقدام کند.
سرویس اپ کارا یکی از سرویس های آنلاین برای ساخت اپلیکیشن وب ویو پیشرفته و بدون مشکلات مطرح شده بالا می باشد. شما با هزینه بسیار پایین می توانید نسخه اندروید اپ خود را با بهترین امکانات و بدون باگ دریافت نمایید.