آموزش طراحی اپلیکیشن اندروید فروشگاه اینترنتی با لیموبیت + از پایه

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

با توجه به استفاده بیشمار از سرویس‌های آنلاین و وجود نزدیک به ۱۵۰ میلیون دستگاه موبایل هوشمند در ایران، داشتن یک اپلیکیشن موبایل می‌تواند یک مزیت رقابتی بین کسب و کارهای آنلاین باشد. روش های مختلفی برای راه اندازی اپلیکیشن وجود دارد که در این مقاله قصد داریم آموزش ساده‌ترین و کم هزینه‌ترین روش ساخت اپلیکیشن فروشگاهی یعنی وب ویو را روی بستر اندروید آموزش دهیم. استفاده از این روش مستلزم داشتن یک وب‌سایت است. اپلیکیشن وب‌ویو یک سرویس آنلاین است که برای سایت‌هایی که دارای قابلیت ریسپانسیو هستند به کار می‌رود. در واقع 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 را اضافه می کنیم.

قدم نهم : Splash Screen

یکی از جذاب‌ترین بخش‌ها داشتن یک تصویر منحصر به فرد است که قبل از لود شدن محتوای سایت برای کاربران نمایش داده شود. چند نمونه را در تصویر زیر مشاهده می‌کنید:

برای اضافه کردن این تصویر از منو سمت چپ مسیر زیر را دنبال کنید:

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 را نیز انجام می‌دهد. برای ارتباط با لیموبیت کافی است در گوگل جستجو کنید: «لیموبیت»