Tampilkan postingan dengan label IONIC. Tampilkan semua postingan
Tampilkan postingan dengan label IONIC. Tampilkan semua postingan

Senin, 30 Desember 2024

Tidak bisa build ionic 8

 disini kita kembali lagi memberikan pengalaman kita, saya tidak bisa build ionic 8 menjadi aplikasi

untuk peringatannya saya lupa apa yang keluar tetapi saya akan share ini terlebih dahulu sebelum lupa,

jadi kita harus menambah file ini sebelum build.

add file dengan nama local.properties di dalam folder android dan isi manual, dan sesuaikan tempat SDK teman-teman, kemudian save

sdk.dir=C:/Users/ITKU/AppData/Local/Android/Sdk




ionic 8 Saat add android tidak keluar capacitor.settings.gradle

 Berjumpa lagi, kali ini saya mendapat kendala aplikasi ionic 8 Saat add android tidak keluar capacitor.settings.gradle, jadi setelah saya membuat project dan menuliskan ionic capacitor add android tetapi saat saya buka tidak ada file capacitor.settings.gradle sehingga tidak bisa saya build,


 

setelah melakukan beberapa cara ternyata sebelum kita add android coba jalankan perintah

ionic capacitor sync

Ionic 8 tidak bisa mengakses data mysql

Ionic 8 tidak bisa mengakses data mysql padahal saat menggunakan ionic serve data vase dapat di akses dengan normal.

hal ini dapat dikarenakan beberapa sebab.

1. Perhatikan Protokol HTTP/HTTPS

Gunakan HTTPS

Pada Android 9 (Pie) dan yang lebih baru, koneksi HTTP non-aman akan diblokir secara default. Pastikan backend Anda menggunakan HTTPS.

Jika server Anda belum memiliki SSL, Anda bisa menggunakan layanan seperti Let's Encrypt untuk mendapatkan sertifikat SSL gratis.

Setelah HTTPS aktif, ubah URL API Anda menjadi https://.


2. Buat File network_security_config.xml

Buat file XML di folder res/xml/network_security_config.xml (buat folder xml jika belum ada).

Isi file network_security_config.xml:

<?xml version="1.0" encoding="utf-8"?> <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="true">primbon.oncrit.my.id</domain> </domain-config> </network-security-config>

Konfigurasi di AndroidManifest.xml

Tambahkan referensi ke file network_security_config.xml di dalam tag <application>:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">

    <!-- Izin internet -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:networkSecurityConfig="@xml/network_security_config"
        android:usesCleartextTraffic="true"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher">
        ...
    </application>
</manifest> 


Penjelasan:

    <network-security-config>:
        Mengatur kebijakan keamanan jaringan.
        cleartextTrafficPermitted="true": Mengizinkan koneksi HTTP (non-HTTPS).

    <uses-permission>:
        Mengizinkan aplikasi untuk mengakses internet.

    Referensi File Konfigurasi:
        Atribut android:networkSecurityConfig menunjuk ke file res/xml/network_security_config.xml.

Catatan Penting

Gunakan HTTPS: Sangat disarankan untuk menggunakan HTTPS di server Anda. Jika menggunakan HTTP, itu hanya untuk pengujian dan pengembangan.

Sabtu, 21 Desember 2024

Status reject saat kita publish project ionic 8

 Status reject saat kita publish project ionic 8.

ini saya mengalami penolakan dari project saya saat saya mengupload untuk publish di play store/google develeper. keterangannya seperti ini..




 

setelah saya cek ternyata kendala ini terjadi karena saya lupa memasukkan kode  admob saya pada aplikasi tersebut

file tersebut berada di platforms/android/app/src/main/AndroidManifest.xml

yaitu kode 

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY"/>

Selasa, 10 Desember 2024

Perintah-Perintah di IONIC 8

- Create Prject Baru

 ionic start myApp tabs--type=angular

- Menambah Folder Android

 ionic capacitor add android

- Setelah melakukan perubahan Sinkronkan proyek:

ionic capacitor sync android

- Build ulang aplikasi:

gradlew.bat assembleRelease (file akan berformat apk)

gradlew.bat bundleRelease (file akan berformat aab)

gradlew.bat assembleDebug

untuk build aplikasi masuk ke folder android sebelum mengetik perintah tersebut 

- Install adb pada project- masuk terlebih dahulu di C:\Users\(name)\AppData\Local\Android\Sdk\platform-tools>

adb install -r D:\PROJEK\(project)\android\app\build\outputs\apk\debug\app-debug.apk

kita pernah juga mengalami sudah di edit pada tabs awal tapi saat di build tidak berubah, kita melakukan penghapusan www dan di singkronkan ulang dengan cara

rmdir /s /q www dan selanjutnya ionic capacitor sync dan ionic serve

Selasa, 16 Juli 2024

Cara mengganti lokasi gradle JDK

 Cara mengganti lokasi gradle JDK

langsung saja ya kita buka android studio pada komputer kita

Pilih costomise dan all setting


Pilih build, > build tool > gradle

dan sesuaikan dimana jdh kita berada

terimakasih

Could not resolve com.android.tools.build:gradle:8.3.0 saat build ionic

 Could not resolve com.android.tools.build:gradle:8.3.0 saat build ionic

kendala yang saya alami ber bulan bulan saat membuild ionic Could not resolve com.android.tools.build:gradle:8.3.0 dan ini sangat menyebalkan.

hal tersebut dikarenakan kurangnya pengetahuan dan googling saya, bayak tutorial yang hasilnya nihil.

dan akhirnya saya menemukan solusi soal masalah ini,,

saya sudah menginstal gradle dari 6.xx sampai 8.xx dan masih tidak bisa hal tersebut dikarenakan jdk yang kurang kompatible, akhirnya saya install jdk 17.0.1 dan akhirnya bisa,

selain itu rubah gradle JDH ke lokasi tempat kita tadi menginstall JDK 17

lengkapnya disini



setelah semua step ini di selesaikan jangan lupan rubah juga di environment nya..selamat mencoba

Minggu, 30 Oktober 2022

Update API 30 Ke 31 di cordova ionic

Kali ini kita akan membahas tentang update atau migrasi dari API 30 Ke 31 yang akan kita pakai untuk aplikasi ionic. saya pribadi juga sangat kesulitan dikarenakan membutuhkan beberapa hal yang harus di update. salah satu nya update SDK itu sendiri yang ada pada menu SDK Manager yang ada di Android Studio.


yang ke 2 Update JAVA ke seri 11, kalau sudah terupdate. selanjutnya jangan lupa update Environment Variables nya

JAVA_HOME = C:\Program Files\Java\jdk-11.0.17
PATH = C:\Program Files\Java\jdk-11.0.17\bin

Hal tersebut sangat di butuhkan untuk membuild aplikasi khususnya yang saya pakai, yaitu aplikasi ionic/yang memakai cordova

Setelah itu hapus Android dengan Perintah
ionic cordova platform remove android

setelah itu install kembali dengan perintah
ionic cordova platform add android@11


Hapus tag Splash

config.xml Anda tidak lagi mendukung <splash> dan Anda akan menerima kesalahan ini:

The "<splash>" tags were detected and are no longer supported. Please migrate to the "preference" tag "AndroidWindowSplashScreenAnimatedIcon".

Anda harus menghapus entri di config.xml Anda di bawah platform android yang menyebutkan <splash…. Kemudian tambahkan preferensi yang diperlukan:

<preference name="AndroidWindowSplashScreenAnimatedIcon" value="[path to png/xml]" />

[ path ke png/xml] harus berupa nama file yang valid. Misalnya resource/android/icon/drawable-xxxhdpi-icon.png

(yang saya lakukan hanya menghapus tanpa menambah hal tersebut)


Hanya sebagai opsi

Hapus Plugin Splash Screen

Plugin Splash Screen sudah terpasang di Cordova sekarang, jadi hapus saja:

cordova plugin remove cordova-plugin-splashscreen

Hapus Plugin Android X

Plugin cordova-plugin-androidx tidak diperlukan karena sudah ada di dalamnya, jadi hapus saja:

cordova plugin remove cordova-plugin-androidx

Plugin cordova-plugin-androidx-adapter tidak diperlukan karena sudah ada di dalamnya, jadi hapus saja:

cordova plugin remove cordova-plugin-androidx-adapter

Catatan: Plugin phonegap-plugin-push memiliki ketergantungan pada cordova-plugin-androidx-adapter . Plugin tidak digunakan lagi dan Anda harus bermigrasi ke @have-source/cordova-plugin-Push untuk mendapatkan dukungan yang lebih baik. 


Diaktifkan AndroidX

Preferensi untuk AndroidX harus benar di config.xml:

<preference name="AndroidXEnabled" value="true" />


Hapus Plugin Whitelist

Plugin cordova-plugin-whitelist dibangun ke dalam Cordova dan harus dihapus:

cordova plugin remove cordova-plugin-whitelist


dan setelah kita build. terjadi kesalahan yang membuat kita akan berfikir ulang, kesalahan tersebut yaitu :


import android.support.annotation.NonNull;

// import android.support.annotation.NonNull;
import androidx.annotation.NonNull;

kita harus menonaktifkan script tersebut dan menambah script di bawahnya, untuk lebih detail penggantian itu dimana klik disini

setelah semua selesai coba restar komputer dan coba build kembali..
selamat mencoba


Selasa, 28 Juni 2022

Error build setelah menambah admob

Jika terjadi masalah setelah melakukan build aab ionic

kalian bisa mereplace import di bawah ini

// import android.support.annotation.NonNull;
import androidx.annotation.NonNull;

File berada di \platforms\android\app\src\main\java\name\ratson\cordova\admob




Cara Publish Aplikasi Ionic ke Google Play 2022

Cara Publish Aplikasi Ionic ke Google Play Terbaru 2022


kami akan membagikan bagaimana cara membuat apk release pada ionic dengan membuild aplikasi apk di commandprom

Cara Publish Aplikasi Ionic ke Google Play

  1. Masuk ke folder root project ionic kamu, tahan tombol shift di keyboard lalu klik kanan, pilih Open command window here
    001-cara-publish-aplikasi-ionic-ke-google-play
  2. Maka akan muncul jendela CMD, ketik perintah "Cordova build --release android"  untuk membuat file Release APK Release Unsigned-nya. Lalu tekan Enter.

    Maka akan dibuat dile app-release.aab yang disimpan di folder root_project\platforms\android\build\outputs\apk. Nanti kita akan membutuhkan file apk ini pada langkah nomor 10.
  3. Berikutnya kita akan generate keystore-nya menggunakan perintah berikut ini.

    "keytool -genkey -v -keystore apk-release-key.keystore -alias alias_name -keyalg
     RSA -keysize 2048 -validity 10000"
    Perintah diatas akan membuat file apk-release-key.keystore dengan nama aliasnya alias_name. Silahkan kamu ganti apk-release-key dan alias_name-nya sesuai keinginan kamu. Jika tidak ingin kamu ganti samakan saja namanya seperti contoh diatas. Perintah ini digunakan untuk membuat file keystore-nya, pada contoh kasus ini saya beri nama imt-release-key.keystore, jika sudah tekan Enter.


  4. Maka kamu akan diminta membuat password keystore yang akan kamu gunakan nanti saat membuat file apk release-nya. Isikan passwordnya sesuai yang kamu inginkan.
    002-cara-publish-aplikasi-ionic-ke-google-play
  5. Maka kamu akan diminta memasukkan kembali passwordnya, masukkan kembali password yang sama.
    003-cara-publish-aplikasi-ionic-ke-google-play
  6. Selanjutnya akan diminta pertanyaan seperti dibawah ini, seperti first and last name, organization unit, your organization, City or Locality, State and Province dan Country Code. Isikan sesuai yang kamu inginkan. Lalu tekan Enter.
    004-cara-publish-aplikasi-ionic-ke-google-play
  7. Jika muncul konfirmasi seperti gambar dibawah ini, ketik Y, lalu Enter.
    005-cara-publish-aplikasi-ionic-ke-google-play
  8. Maka akan dimintai ulang password keystore yang tadi, masukkan kembali password keystore-nya sampai dua kali untuk konfirmasi password. Lalu tekan Enter.
    006-cara-publish-aplikasi-ionic-ke-google-play
  9. Maka keystore akan berhasil dibuat dan disimpan di folder project kamu, disini keystore yang tadi saya buat saya namakan imt2-release-key.keystore.
  10. Masuk ke folder root_project\platforms\android\app\build\outputs\bundle\release. Rename file app-release.aab yang ada di folder tersebut menjadi nama file yang kamu inginkan diikuti Unsigned dibelakangnya, contoh pada kasus ini saya namakan dengan imtUnsigned.aab
  11. Copy file apk Unsigned yang barusan kamu rename ke direktori root project kamu, seperti gambar dibawah ini.
  12. Selanjutnya kita akan mebuat unsigned APK lagi dengan perintah jarsigner, ketikan perintah berikut ini.
    "jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore imt2-release-key.keystore imtUnsigned.aab alias_name"
  13. Pada bagian keystore isi sesuai nama keystore yang tadi kamu buat, lalu isi nama apk-nya sesuai yang tadi kamu buat, pada contoh ini saya namakan imtUnsigned.aab, terakhir isi nama aliasnya yang tadi kamu buat, pada contoh saya disini nama aliasnya alias_name. Jika sudah tekan Enter dan masukkan kembali password keystore-nya.
  14. Jika berhasil maka akan muncul pesan jar signed, seperti pada gambar dibawah ini. Abaikan saja pesan warning dibawahnya.
    010-cara-publish-aplikasi-ionic-ke-google-play
  15. Terakhir, kita akan membuat release file apk-nya yang akan kita siap upload ke Google Play. Caranya, copy file apk unsigned tadi ke folder buil-tools pada direktori Andorid SDK kamu di C:\Users\nama_user\AppData\Local\Android\Sdk\build-tools\24.0.0.
  16. Buka cmd dan arahkan ke folder build-tools yang ada di folder Android SDK kamu, letaknya biasanya di :C:\Users\nama_user\AppData\Local\Android\Sdk\build-tools\24.0.0, nama_user merujuk ke nama user komputer kamu, adapun 24.0.0adalah versi build-tools nya, kamu bisa pake versi berapa saja, bisa versi 23 atau versi 25.
  17. Di CMD, ketikan perintah berikut ini :
    "zipalign -v 4 imtUnsigned.aab imtRelease.aab"

    Lalu tekan Enter.
    012-cara-publish-aplikasi-ionic-ke-google-play
    Fungsi ini akan membuat file release aab yang siap kamu publish ke Google Play.
  18. Selesai, kamu bisa upload file apk release yang dihasilkan tersebut ke Google Play.

Semoga bermanfaat

Senin, 27 Juni 2022

No Java files found that extend CordovaActivity

Terjadi Error saat build ionic.

    Kejadian error No Java files found that extend CordovaActivity saat build ionic, padahal sebelumnya tidak ada masalah dan lancar-lancar saja, hal ini dikarenakan beberapa hal, yang saya alami kejadian ini terjadi ketika menambah id pada config.xml setelah platform sudah kita tambah.


Langsung saja ya, sebetulnya kita cukup menghapus dan menambahkan lagi platform androidnya dengan cara:

cordova platform rm android

dan install lagi

cordova platform add android@10.1.2


kenapa saya tambahkan dengan 10.1.2 di karenakan jika hanya menambahkan cordova platform add android maka hanya akan menginstall cordova android 8 dan hal itu sudah tidak di support di playstore.

semoga membatu

Senin, 20 Juni 2022

Menambah Iklan di IONIC

Cara Menambah Iklan di ionic

saat ini kita akan mencoba mengkoneksikan admob dengan ionic, pertama-tama kita add aplikasi di admob kita, kita catat kode app id yang tertera pada aplikasi admob kita,,

ketik kode tersebut pada commandprom node.js di project yang kita buat.

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-10731XXXX~XXXX53227" 
Install Plugin ADMOB 
npm install --save @ionic-native/admob-free@4
 
Setelah semua terinstall import admob pada project ionic dengan cara sebagai berikut
buka app.module.ts
 
 
Tambah kode tersebut pada project
import {AdMobFree} from '@ionic-native/admob-free';
 
AdMobFree,

Rabu, 15 Juni 2022

Perintah-Perintah di Node.JS dan Angular

Uninstall Angular
npm uninstall -g @angular/cli

Clear cache
npm cache clean --force

Install Angular 12
npm i @angular/cli@12.0.0

Mengetahui versi Node
node -v

Uninstall ionic
npm uninstall -g ionic

Install ionic 3
npm install -g ionic@3.20.0

Play ionic
ionic serve

Build Ionic
ionic build 
ionic build --prod

Add Platform
$ ionic cordova platform 
$ ionic cordova platform add ios
$ ionic cordova platform add android
$ ionic cordova platform add android@latest
$ ionic cordova platform rm ios
 
Mengetahui versi-versi yang di gunakan di project
cordova platform

Menginstall cordova versi terbaru
npm install -g cordova

Menginstall cordova sesuai versi
npm install -g cordova@10
npm install -g cordova@11
npm install -g cordova@12
 
Menghapus Cordova
npm rm -g cordova
npm uninstall -g cordova

Menghapus Android di project
cordova platform rm android

Menambah Android di Project Versi 10.1.2
cordova platform add android@10.1.2

Meng install keseluruhan data project
npm install

Membuat/Play db Json
json-server --watch db.json

Menambah Folder/file dalam project
ng g nama folder

Create angular dengan menyertakan modul.js
ng new prod2 --no-standalone

Kamis, 16 September 2021

Error SyntaxError: Unexpected token

 Haloo teman-teman semua, ada hal yang paling menyebalkan lagi saat mencoba build ionic agan menjadi sebuah apk yang dapat saya gunakan di hp. kali ini saya menemukan masalah yang cukup membuatk ku mencari solusi selama beberapa hari, 

peringatan tersebut terjadi saat build dan mencoba mengetahui versi cordova yang saya install adapun peringatannya seperti di gambar di bawah ini


SyntaxError: Unexpected token {
    at createScript (vm.js:80:80)

dan setelah saya mencoba uninstall node pun juga tidak bisa,,dan akhirnya



Baca juga: 
Cara Menambah Platform

Setelah saya menggunakan perintah untuk install cordova versi 9 akhirnya bisa

dengan perintah npm install -g cordova@9.0.0

selamat mencoba, semoga sukses

Rabu, 15 September 2021

ERROR npm warm deprecated @angular/http@5.0.0

sering kita temui beberapa hal error pada project yang akan kita buat, dan hal itu sangat menyebalkan, kita akan mencoba memberitau error yang pernah kita alami dalam membuat project dengan ionic. 

Saat kalian membuat project ionic dan keluar peringatan seperti ini ERROR npm warm deprecated @angular/http@5.0.0

itu tandanya node kita terlalu tinggi atau tidaksesuai dengan ionic yang sudah ter install, coba untuk menginstall node js 6.10 ataau 8.10


Baca juga: 

Rabu, 06 Januari 2021

Cara Downgrade ionic 4 dan 5 ke ionic 3

Setelah kita sudah terbiasa menggunakan ionic 3 terkadang kita akan upgrade ke ionic 4 bahkan 5, kan tetapi saat kita mulai terkadang kita sedikit mendapat kendala dikarenakan penempatan folder dan scriptnya berbeda dengan ionic 3

BAGAIMANA CARANYA

Disini kita akan memberitahu bagaimana downgrade ionic 4 dan 5 ke ionic 3

lansung saja masuk di cmd


ketik dibawah ini untuk uninstall

npm uninstall -g ionic

Install ionic 3 dengan mengetikkan perintah ini

npm install -g ionic@3.20.1

Terakhir hapus cache npm

npm cache clean –force


selamat mencoba


Selasa, 04 Agustus 2020

Error A dynamic import call returns a 'Promise'. Make sure you have a declaration for 'Promise' or include 'ES2015' in your `--lib` option

[ts] A dynamic import call returns a 'Promise'. Make sure you have a declaration for 'Promise' or include 'ES2015' in your `--lib` option.

peringatan di atas terjadi pada saat kita melakukan coding di ionic,
akan sangan menjengkelkan jika coding kita merah seperti terjadi kesalahan saat coding.
langsung saja ya temen-temen. gimana cara menghilangkan error tersebut

tambah "ES2015", pada tsconfig.json dibawah lib seperti di bawah ini..


setelah itu close VS dan buka kembali
selamat mencoba

Senin, 04 Februari 2019

JARSIGNER TIDAK BISA

JARSIGNER TIDAK BISA

kita akan pusing jika ketika project kita jadi akan tetapi tidak bisa merilis dengan alasan Jarsigner is not recognized internal external command.

peringatan di RUN

"Jarsigner is not recognized internal external command"

langsung saja kita to the poin


Solution: Tambah android jdk bin pada folder environment variables.

Dengan cara:

1- Right click on "This PC" > right-click Properties > Advanced system settings > Environment Variables > select PATH then EDIT.

2- Tambah jdk bin folder path to environment variables, contohnya seperti dibawah ini:

"C:\Program Files\Java\jdk1.8.0_40\bin".


selamat mencoba

Selasa, 11 Desember 2018

Jika Tidak Kita Tidak Bisa Membuild Project

Selamat datang kembali di web kita ini..
Banyak hal yang harus kita ketahui tentang ionic dan sebelum melangkah lebih jauh kita harus mengetahui step satu ini  jika tidak kita tidak bisa membuild project kita..

Sebelum mem build project ionic kita harus meng input tempat dimana instalan java kita berada.
Langsung saja :

1. Klik kanan my computer – Properties


2. Pilih Advanced system setting


3. Pilih Environment Variables


4. Pilih New

5. Ketik sesuai gambar di atas. isi Variable value sesuai alamat program java yang terdapat di komputer kita..ini contoh C:\Program Files\Java\jdk1.8.0_192

6. Kemudian OK

selamat mencoba..

Jumat, 23 Maret 2018

Ionic Part 2 Menambah platform

Menambah platform

jadi setelah kita melakukan perintah ionic start
(bisa di lihat di publikasi kita sebelumnya) klik



langkah selanjutnya, instal platform...langsung saja..

$ ionic cordova platform


Contoh:
pilih salah satu penambahan platform di bawah ini:

$ ionic cordova platform
$ ionic cordova platform add ios
$ ionic cordova platform add android
$ ionic cordova platform rm ios

terimakasih sudah belajar bersama..