Panduan Instalasi Web & Build Apk Android Toko Online Blackexpo Pro

Artikel Terkait Toko Online
Melanjutkan artikel sebelumnya di Source Code Web Blackexpo V3.1 Pro. Berikut ini adalah panduan instalasi web dan tutorial build aplikasi Android toko online menggunakan framework ionic.

APA YANG BARU DI TOKO ONLINE VERSI 3.1 INI?
• Perbaikan semua Fitur versi sebelumnya
• Aplikasi Mobile dengan UI baru lebih fresh
• Topup & Tarik Saldo berfungsi sepenuhnya
• Fitur Dropship, cocok untuk reseller
• Blast Promo Massal ke Email, WA, Push Notif
• Fitur Voucher di Web & Mobile
• Checkout langsung ke Whatsapp
• Aplikasi Mobile lebih ringan & cepat
• Desain UI & UX lebih profesional
• Push Notification dengan Firebase (FCM)
• Integrasi Facebook Pixel

FITUR BLACKEXPO STORE PRO (BUG FIXED)
▪ Menggunakan Raja Ongkir PRO (Ongkir Otomatis)
▪ Pembayaran Otomatis dengan Payment Gateway dan Manual
▪ API iPaymu dan Midtrans (Virtual Account, Gopay, OVO, dll)
▪ API Whatsapp (woowa & wablas) untuk notifikasi
▪ Mendaftar & login dengan OTP WA & email (ON/OFF)
▪ Deposit & withdraw oleh saldo member
▪ Bisa checkout langsung ke WA otomatis
▪ Bisa custom kurir dan ongkos kirim
▪ Sistem Reseller sampai 5 Level harga
▪ Custom Biaya Kirim/Tambahan untuk COD
▪ Whatsapp admin rotator
▪ Email Sender bisa pake SMTP
▪ Notifikasi email ke admin apabila ada pesanan baru
▪ Saldo pembeli bisa topup/deposit
▪ Stok Produk per Variasi
▪ Bisa import produk sekaligus dengan Excel
▪ Voucher Diskon harga dan Ongkos kirim, bisa persen/nominal

FITUR UMUM
▪ Wishlist produk
▪ Blog post
▪ Review/Rating produk
▪ Fitur Pre Order produk
▪ Fitur Live Chat
▪ Fitur Sales Booster Custom
▪ Fitur Custom Testimoni
▪ Laporan penjualan sesuai tanggal/penjualan per user
▪ Fitur cetak invoice
▪ CRUD menggunakan modal (Ajax/Tanpa Reload)
▪ Menggunakan Ignited table (Data Pagination serverside)
▪ URL SEO Friendly & Desain responsive
▪ Sudah termasuk API aplikasi Android & IOS

Panduan Instalasi Web Toko Online Blackexpo V3.1

SETTING DATABASE
Dua file pengaturan koneksi database:
1. application/config/database.php
2. blackexpo/application/config/database.php

SETTING NOTIFIKASI
*PENTING AGAR EMAIL KONFIRMASI PENDAFTARAN TERKIRIM KE EMAIL USER
Untuk menjalankan notifikasi jalankan cronjobs yang diarahkan ke halaman: https://domain.com/cronjobs/update_notif

1. Buka cpanel hosting
2. Klik Cronjobs
3. Masukkan perintah berikut:
wget -q -O - https://namadomain.com/cronjobs/update_notif >/dev/null 2>&1

wget -q -O - https://blackexpostorepro.401xd.com/cronjobs/update_notif >/dev/null 2>&1
4. Setting cronjobs: 5 menit

ERROR DI HOSTING?
Jika terdapat error seperti berikut atau pesan error lainnya
A PHP Error was encountered
Severity: Core Warning
Message: Module 'pdo_mysql' already loaded
Filename: Unknown
Line Number: 0
Backtrace:

Perbaiki dengan cara:
1. Aktifkan extensi pdo_mysql di XAMPP / di cpanel hosting jika online.
2. Buka file index.php di FOLDER UTAMA dan FOLDER blackexpo
3. Kemudian cari kode ini:
define('ENVIRONMENT', isset($_SERVER['CI_ENV']) ? $_SERVER['CI_ENV'] : 'development');
4. Lalu ganti development MENJADI production menjadi seperti ini:
define('ENVIRONMENT', isset($_SERVER['CI_ENV']) ? $_SERVER['CI_ENV'] : 'production');
5. Gunakan PHP versi 7.3.+ atau 7.4.+

KETERANGAN
1. development merupakan konfigurasi default environment CodeIgniter dalam tahap pengembangan.
2. testing merupakan konfigurasi pada tahap pengujian aplikasi.
3. production merupakan konfigurasi pada aplikasi yang siap untuk digunakan oleh user.

PENGGUNAAN DI LOCALHOST

Verifikasi login dengan OTP via WA maupun Email belum bisa bekerja di localhost, karna tehubung dengan pihak ketiga (API WA) dan SMTP Email.

Email konfirmasi pendaftaran akun oleh member mungkin tidak terkirim jika menggunakan email domain Anda. Jadi untuk melihat kode verifikasi / OTP bisa langsung di database phpMyAdmin pada tabel blw_otpdaftar. Panduan cek pada video dibawah ini. Menit ke 03:51 (Login member dengan OTP).

PENGGUNAAN DI HOSTING

No problem, Siap pakai, Siap jualan 😊 Catatan: notifikasi verifikasi email pendaftaran untuk member baru harus diaktifkan dengan cronjobs di hosting, panduan telah disertakan pada panduan.pdf dalam file SOURCE CODE.

Panduan Build APK Android Toko Online Blackexpo V3.1

GUNAKAN KONEKSI INTERNET YANG STABIL

INSTALLASI NODEJS

1. Install nodejs, temukan di folder tool atau download di https://nodejs.org/en/download/
2. Lalu restart PC setelah installasi.

INSTALLASI IONIC

1. Klik windows, ketik cmd dan run as administrator
2. Masukkan perintah: npm install -g @ionic/cli

INSTALLASI CORDOVA

1. Klik windows, ketik cmd dan run as administrator
2. Masukkan perintah: npm install -g cordova

INSTALLASI ANDROID STUDIO

Disini agar kita bisa menginstal SDK bawaan Android Studio.
1. Buka pengaturan Apperance & Behavior
2. System Setting, lalu klik Android SDK
3. Atau klik SDK Manager saat membuka Android Studio
3. Pastikan Android API Level 30 telah di install, lalu diaktifkan atau dicentang.

INSTALLASI GRADLE VERSI TERBARU

1. Download di https://gradle.org/install/
2. Buat folder baru di local disk C:\ dengan nama gradle & Ekstak file gradle di folder tersebut.
3. Konfigurasikan system environment dan tambahkan lokasi folder gradle
4. Buka system environment
5. Klik environment variabels
6. Klik path dan klik edit
7. Lalu klik new dan masukkan lokasi folder gradle, contoh C:\gradle\bin (penyimpanan di local disk C)
8. Laku klik OK OK OK

KONFIGURASI WEB DENGAN IONIC

1. Buat folder baru dengan nama apapun, contoh blackexpo
2. Ekstrak file ApkBlackexpoStorePro.zip dalam folder tersebut
3. Ganti semua assets gambar dan logo sesuai web Anda.
4. Jalankan CMD dalam folder tersebut dengan cara:
- Tekan shift + klik kanan, lalu pilih Open Command Window Here
- Jika tampil Open Powershell Window Here, silakan download registry Open Command Window Here disini https://bit.ly/2U745rV
- Dan install registry enable-shortcut-cmd-win10.reg
5. Kemudian setelah terbuka CMD, masukkan perintah: npm i
6. Tunggu hingga selesai
7. Masukkan perintah: ionic serve
8. Tunggu hingga selesai
9. Secara otomatis jika berhasil maka akan mengarah ke browser dan menampilkan tampilan aplikasi, seperti membuka web di localhost.
10. Akan diarahkan ke alamat http://localhost:8100/
11. Selanjutnya buka folder project yang anda buat pada poin 1 di text editor (Sublime, VSC, dll)
12. Ubah url blackexpostorepro.401xd.com dengan url web Anda di file-file berikut:
  • config.xml
  • src/app/auth/auth.service.ts
  • src/app/services/getapi.service.ts
  • src/app/services/postapi.service.ts
*Cek video panduan untuk lengkapnya.

BUILD APK ANDROID DENGAN IONIC & CORDOVA

1. Jalankan CMD kembali dalam folder project. Tekan shift + klik kanan, lalu pilih Open Command Window Here.
2. Masukkan perintah: ionic cordova platform add android
3. Tunggu hingga selesai (memakan waktu hingga 10 menit)
4. Maka akan secara otomatis membuild folder platform, didalamnya terdapat folder source code Android APK Anda.
5. Setelah itu masukkan perintah berikut: ionic cordova build android
6. Tunggu hingga selesai
7. Anda dapat menemukan file dengan format .apk yang telah dibangun.
8. Buka pada folder platform -> android -> app -> build -> outputs -> apk -> debug -> app-debug.apk
9. Selanjutnya membuat release APK
10. Jalankan kembali CMD dalam folder project
11. Masukkan perintah: cordova build android --pred --release
12. Tunggu hingga selesai
13. Anda dapat menemukan file dengan format .apk yang telah dibangun.
14. Buka pada folder platform -> android -> app -> build -> outputs -> apk -> release -> app-release-unsigned.apk
15. SELESAI :)

MEMBUAT KEYSTORE APLIKASI DAN MENGGUNAKANNYA

Silakan pilih salah satu dari 2 cara dibawah ini, rekomendasi kami OPSI 2 seperti video panduan (menggunakan CMD)

(OPSI 1)

Opsi 1 ini Anda harus memiliki project android yang telah di build di android studio dan belum ditandatangani dengan key store atau masih dalam status app-release-unsigned.

MEMBUAT KEY STORE APK DI ANDROID STUDIO

- Buka folder project Android di Android Studio
- Klik Build
- Pilih Android App Bundle atau APK, Klik Next, Klik Create new
- Key Store Path: Lokasi dimana keystore akan disimpan setelah selesai nanti
- Masukkan password Key store & ulangi password nya
- Password: Password untuk password Key Store nya
- Confirm: Konfirmasi Password Key Store nya
- Alias: Nama untuk Key Store
- Password: Pasword Key nya
- Confirm: Konfirmasi password Key nya
- Validity (years): Masa Berlaku Key Store dalam satuan tahun, maksimal 25.
- First and last name: Nama lengkap pembuat keystore (boleh atas nama perusahaan)
- Organization Unit: Unit Kerja
- Organization: Divisi
- City/Locality: Kota 
- State or Province: Provinsi
- Country Code: Kode Negara, ID untuk indonesia
- Lalu klik OK.
- Disini kita hanya membuat key store saja, bukan menggunakan key store, jadi selanjutnya klik Cancel.
- Key store yang telah dibuat dapat ditemukan di lokasi yang diatur sebelumnya. Keystore ini bisa Anda gunakan di semua aplikasi Anda apabila ingin mengupload nya ke Playstore.

MENGGUNAKAN KEY STORE UNTUK RELEASE APK DI ANDROID STUDIO
- Selanjutnya kita menggunakan Keystore yang telah dibuat
- Klik Build, klik Generate Signed Bundle or APK
- Pilih Android App Bundle atau APK (sesuaikan dengan keystore Anda pada saat pembuatan keystore)
- Dibagian Key store path pilih key store Anda. Klik choosee existing.
- Masukkan password Key store dan nama Key store
- Lalu masukkan password Key
- Selanjutnya klik Next
- Pada bagian destination folder masukkan lokasi tempat Anda ingin menyimpan file .apk release
- Lalu pilih jenis release pada bagian build varian.
- Setelahnya centang V1 (Jar Signature) dan V2 (Full APK Signature)
- Lalu klik finish.
- Temukan file APK release Anda pada folder penyimpanan yang diatur sebelumnya.
- APK release tersebut telah Anda tandatangani dengan Keystore dan dapat diupload ke Google Playstore.


(OPSI 2) Direkomendasi

Opsi 2 ini Anda harus memiliki apk android release yang belum ditandatangani dengan key store atau masih dalam status app-release-unsigned.

MEMBUAT KEY STORE APK ANDROID DI CMD JAVA KEYTOOL

- Buka folder tempat Anda ingin menyimpan key store
- Tekan shift + klik kanan, lalu pilih Open Command Window Here
- Masukkan perintah berikut: 
keytool -genkey -keyalg RSA -alias NAMA -keystore NAMAFILE.keystore -storepass PASSWORD -validity 36000 -keysize 2048
- Keterangan:
NAMA: nama untuk key store
NAMAFILE: nama file keystore
PASSWORD: kata sandi keystore
- Setelah itu isi informasi identitas: First and last name, Organization unit, Organization, City, Prov, Country Code
- Selanjutnya konfirmasi dengan membuat password key, password ini bukan kata sandi key store. tetapi kata sandi key untuk menggunakan keystore.
- Saat mengitik password key, karakter kosong akan tetap ditampilkan. Lalu ulangi password key dan enter.
- Key store yang telah dibuat dapat ditemukan di lokasi folder tersebut dengan format .keystore

MENGGUNAKAN KEY STORE UNTUK RELEASE APK DI CMD JAVA KEYTOOL
- Instal JDK lalu buka CMD di folder C:\Program Files\Java\jdk1.8.0_281\bin (Sesuaikan dengan lokasi JDK di PC Anda)
- Jalankan perintah berikut: (NAMA FOLDER / FILE ANDA TIDAK BOLEH ADA SPASI)
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore DIRECTORYKEYSTORE DIRECTORYAPKUNRELESASE NAMAKEYSTORE
- Contoh:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore D:\BUILDAPK\mcprojectkeystore.keystore D:\Project\Programming\WEBPHP\TOKO\free\BlackexpoStore3\Versi3_1\BlackexpoStore\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk mcproject
(Sesuaikan dengan lokasi keystore, folder apk release unsigned, dan password key keystore Anda) 
- Enter passphrase for keystore: Masukkan password keystore Anda
- Enter key password for NAMA: Masukkan password key Anda
- Tunggu proses hingga selesai dan muncul TRUSTED CERTIFICATE
- Buka CMD di Folder C:\Users\AdigunawanXD\AppData\Local\Android\sdk\build-tools\30.0.3
- Jalankan perintah berikut: (NAMA FOLDER / FILE ANDA TIDAK BOLEH ADA SPASI)
zipalign -v 4 DIRECTORYAPKUNRELESASE DIRECTORYAPKRELESASE
- Contoh:
zipalign -v 4 D:\Project\Programming\WEBPHP\TOKO\free\BlackexpoStore3\Versi3_1\BlackexpoStore\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk D:\Project\Programming\WEBPHP\TOKO\free\BlackexpoStore3\Versi3_1\BlackexpoStore\platforms\android\app\build\outputs\apk\release\app-release-signed.apk
(Sesuaikan dengan lokasi folder apk release unsigned dan apk signed yang ingin disimpan)
- Tunggu proses hingga selesai dan muncul VERIFICATION SUCCESFUL

Video Instalasi Web & Build APK Android Blackexpo Store V3.1

TUTORIAL DALAM VIDEO INI
• Cara Setting Database
• Cara Setting Notifikasi
• Solusi Jika Error di Hosting
• Cara Installasi Nodejs
• Cara Installasi Ionic
• Cara Installasi Cordova
• Cara Installasi Android Studio & Sdk
• Cara Installasi Gradle
• Cara Konfigurasi Web dengan Ionic
• Cara Build Apk Android dengan Ionic & Cordova
• Cara Membuat Key Store Apk di Android Studio
• Cara Menggunakan Key Store untuk Release Apk Toko
• Catatan Bagi Pengguna di Localhost


CATATAN
  • Beberapa fitur mungkin tidak berfungsi jika penggunaan di localhost, karna sistem terhubung dengan pihak ketiga seperti Payment Gateways dan API WhatsApp.
  • Email konfirmasi pendaftaran oleh member mungkin tidak terkirim jika menggunakan email domain Anda. Jadi untuk melihat kode verifikasi / OTP bisa langsung di database phpMyAdmin pada tabel blw_otpdaftar.

Rekomendasi Web Hosting
  1. 20rb perbulan. Diskon hingga 40% kode kupon: MCP Daftar disini (apache).
  2. 10rb perbulan. Diskon hingga 75% kode kupon: MCP Daftar disini (litespeed).
  3. 10rb perbulan. Diskon hingga 70% kode kupon: aff-MCP Daftar disini (apache).