چه صاحب یک فروشگاه اینترنتی باشید یا یک شرکت ساختمانی، یک کسب و کار خانگی و هنری را مدیریت کنید یا یک هولدینگ تجاری داشتن سایت و اپلیکیشن جز ضروریات حضور در فضای اینترنت است. امروزه به علت افزایش تعداد گوشیهای هوشمند و همهگیر شدن استفاده تمامی خدمات به صورت آنلاین، فقط با داشتن یک گوشی هوشمند و اپلیکیشن مناسب کسب و کار خود میتوانید از بقیه رقبا پیشی بگیرید.
با توجه به استفاده بیشمار از سرویسهای آنلاین و وجود نزدیک به ۱۵۰ میلیون دستگاه موبایل هوشمند در ایران، داشتن یک اپلیکیشن موبایل میتواند یک مزیت رقابتی بین کسب و کارهای آنلاین باشد. روش های مختلفی برای راه اندازی اپلیکیشن وجود دارد که در این مقاله قصد داریم آموزش سادهترین و کم هزینهترین روش ساخت اپلیکیشن فروشگاهی یعنی وب ویو را روی بستر اندروید آموزش دهیم. استفاده از این روش مستلزم داشتن یک وبسایت است. اپلیکیشن وبویو یک سرویس آنلاین است که برای سایتهایی که دارای قابلیت ریسپانسیو هستند به کار میرود. در واقع Web View یک نسخه از وب سایت شما را در قالب اپلیکیشن موبایل است که قابلیت نصب روی گوشی کاربران را دارد. جالب است بدانید که بازار و Google Play نیز امکان بارگذاری اپلیکیشنهای اندروید به صورت وب ویو را دارند.
در این بخش به بررسی مزیتهای اپلیکیشن اندروید Web View میپردازیم. البته در کنار همه این مزایا این مدل از اپلیکیشنها معایبی هم دارند که میتوان به عدم امکان استفاده از تمامی قابلیتهای دستگاه اندرویدی مانند احراز هویت با اثر انگشت یا.. اشاره کرد.
برخی از مزیتهای اصلی این مدل اپلیکیشنها عبارتند از:
نمونه اپلیکیشن های طراحی شده وبویو : مجموعه اپلیکیشن های شرکت اسنپ و اسنپ فود، تپسی و اسنپ مارکت نمونههای وب ویو فوق العادهای هستند.
یکی از اصلیترین پیش نیازهای طراحی اپلیکیشن فروشگاه اینترنتی داشتن یک سایت ریسپانسیو است. اگر بخواهیم به زبان ساده توضیح ریسپانسیو یعنی وقتی سایت را روی موبایل، تبلت و یا کامپیوتر باز میکنیم ظاهر سایت متناسب با سایز صفحه نمایش تغییر پیدا کند.
قبل از نصب اندروید استدیو پیشنهاد میکنیم حتما DNS های شکن را برای دور زدن تحریمها بر روی کامپیوتر خود تنظیم کنید سپس از سایت رسمی اندروید نرم افزار را دانلود و نصب کنید. (برای این کار در گوگل «شکن» را جستجو کنید.
داشتن یک VPN با IP ثابت
اگر در حین استفاده از Android Studio متوجه شود که IP شما از ایران است، با خطای ۴۰۳ به معنی عدم دسترسی مواجه میشوید. به دلیل اینکه هنگام استفاده از اندروید استودیو نیاز به آپدیتهای متعددی برای sync شدن پروژه با سرور اصلی اندروید وجود دارد به همین استفاده از نرمافزارهای تغییر IP ضروری است.
برای طراحی اپلیکیشن سایت فروشگاهی کافی است چند گام اصلی زیر را دنبال کنید.
برای ایجاد یک پروژه جدید در Android Studio ابتدا از منوی File گزینه New و سپس گزینه New Project را انتخاب کنید. در پنجره باز شده گزینه Empty Activity را انتخاب کرده و سپس در قسمت Application name یک نام برای اپلیکیشن خود انتخاب کنید.
جهت امکان برقراری ارتباط بین اپلیکیشن و شبکه (اینترنت) نیاز به تعریف مجوز دسترسی (Permission) داریم. بنابراین مجوز مربوطه را به مانیفست پروژه اضافه میکنیم. از منو سمت چپ فایل AndroidManifest.xml را باز کرده و قطعه کد زیر را اضافه می کنیم.
</”uses-permission android:name=”android.permission.INTERNET>
برای انجام این کار از منو سمت چپ فایل activity_main.xml را باز کرده و قطعه کد زیر را اضافه میکنیم.
WebView>
“android:id=”@+id/webview
“android:layout_width=”match_parent
“android:layout_height=”match_parent
“tools:layout_editor_absoluteX=”0dp
< “tools:layout_editor_absoluteY=”0dp
</WebView>
سپس در فایل MainActivity.java قطعه کد زیر را قرار میدهیم:
}public class MainActivity extends AppCompatActivity
;private WebView mWebView
Override@
}(protected void onCreate(Bundle savedInstanceState
;super.onCreate(savedInstanceState)
;setContentView(R.layout.activity_main)
;mwebView = (WebView) findViewById(R.id.webview)
;()WebSettings webSettings = mwebView.getSettings
{
{
در این بخش باید URL سایت را در فایل اصلی MainActivity.java وارد کنید. کافی است قطعه کد زیر را در ادامه کد بالا قرار دهید و دامنه خود را در آن قرار دهید:
;mwebView.loadUrl(“https://yourdomain.com/”)
اجرای کدهای جاوا اسکریپت به صورت پیشفرض در اپلیکیشن وب سایت غیرفعال است برای فعالسازی کافی است قطعه کد زیر را در ادامه کد بالا قرار دهیم.
;webSettings.setJavaScriptEnabled(true)
اگر از برنامه خروجی بگیرید و نصب کنید متوجه خواهید شد که لینک های داخل اپلیکیشن توسط مرورگر گوشی باز میشوند برای حل این مشکل کافی است قطعه کد زیر را در فایل MainActivity.java قرار دهید.
;mwebView.setWebViewClient(new WebViewClient())
این قدم معروف به one press back می باشد. د این قدم ما تعریف می کنیم که با زدن دکمه back گوشی به یک صفحه قبل برگردد و با دوبار زدن دکمه از برنامه خارج شود.
}()public void onBackPressed
} if(mwebView.canGoBack())
;()mywebView.goBack
{
}else
;()super.onBackPressed
{
برای حذف نوار پیش فرض اپلیکیشن کافی است تغییرات زیر را بر روی فایل style.xml انجام دهید.
<“style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar>
فقط در بخش آخر کد NoActionBar را اضافه می کنیم.
یکی از جذابترین بخشها داشتن یک تصویر منحصر به فرد است که قبل از لود شدن محتوای سایت برای کاربران نمایش داده شود. چند نمونه را در تصویر زیر مشاهده میکنید:
برای اضافه کردن این تصویر از منو سمت چپ مسیر زیر را دنبال کنید:
new – activity – emty activity – راست کلیک – java
نام اکتیویتی را splashactivity می گذاریم.
در بخش splashactivity.xml تصویر طاحی شده را قرار می دهیم. و در activitysplash.java کد زیر را قرار می دهیم.
}protected void onCreate(Bundle savedInstanceState)
;super.onCreate(savedInstanceState)
;setContentView(R.layout.activity_splash)
()new Handler() .postDelayed(new Runnable
{
}()public void run
;Intent intent =new Intent (splashActivity.this,MainActivity.class)
; startActivity(intent)
;overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out)
;()splashActivity.this.finish
{
{ ;Splash_time {
{
اگر گام های ذکر شده را به طبق دستورالعمل بخش طراحی سایت فروشگاهی لیموبیت انجام داده باشید، اپلیکیشن شما به درستی کار خواهد کرد و کار تمام است.
اگر میخواهید در کنار فروش آنلاین وبسایت خود یک اپلیکیشن حرفهای با تمامی قابلیتهای یک اپلیکیشن حرفهای مانند Pull to Refresh، مدیریت ارتباط با اینترنت و.. داشته باشید باید بفکر شرکتی معتبر که طراحی اپلیکیشن وبویو را انجام میدهد باشید. استفاده از قابلیت وبویو برای نمایش یک وبسایت و یا فروشگاه اینترنتی در صورتی که سایت کاملا ریسپانسیو طراحی شده باشد تجربه کاربری (UX) قابل قبولی را برای شما رقم میزند.
لیموبیت یک شرکت خلاق و دانشبنیان فعال در زمینه طراحی پلتفرمهای فروشگاه اینترنتی و طراحی سایتهای فروشگاهی است که ارائه انواع اپلیکیشنهای حرفهای موبایل چه به صورت Native یا WebView را نیز انجام میدهد. برای ارتباط با لیموبیت کافی است در گوگل جستجو کنید: «لیموبیت»
خوب بود فقط کاش تیکه کدها رو جدا میکردین ولی کدها درسته