After a few days looking my mom watching like crazy the Covid-19 numbers, I decide it was time to make my first mobile app by my own. Normally I use a framework of the company where I work but this time I decide to configure by my self webpack, Cordova and all the tools that we normally use. For a fast Android App I made-it to be compiled with phone gap build.
The code part was easy, I'm not so good designer but I use some basics skills to make it nice. The backend was a little hard but in two days I finally got my basic app. And then... the hell begin just like a Doom Game.
Phonegap//Cordova//Capacitor allow you to make an App with only HTML5, JS and CSS, and work great with mobile. But it has a big issue with the plugins, most of the originals plugins works great (geolocation, battery, etc...) but some community plugins are unmaintained and is hard to figure out how it will affect you. For me it was really hard to add Ads, i tested 3 different plugins and only one work:
cordova-plugin-admob-free, but the config is not really described for phonegap, just add on your config.xml this:
<plugin name="cordova-plugin-admob-free" source="npm"> <variable name="ADMOB_APP_ID" value="[[PUT YOUT ADMOB ID HERE]]"/> </plugin>
Using API fetch, sound like an easy thing, but in Cordova you need to whitelist the address of fetching. Cordova do not give you all the things you need out of the box the first time you need make it run, so you need to add another configuration:
<platform name="android"> <!-- icon and splash stuff --> <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application"> <application android:usesCleartextTraffic="true" /> </edit-config> </platform> <!-- Some stuff --> <access origin="*" /> <plugin name="cordova-plugin-whitelist" version="1" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" />
Yeap, you need to add a plugin (that could be out of the box) and allow the domain and subdomain to call outside the app. Also need to allow "usesCleartextTraffic" for ajax call.
Is maybe not so complicate but it needs that you make a KeyStore witch on linux it really easy but in windows you will need to install JDK and that's can be a little tricky on this platform. Pay really attention to the alias you add because is the same alias that you need to add on the phonegap build.
By Default phonegap add some default icons, but they will be at www/ folder. When you configure webpack with the "CleanWebpackPlugin" YOU WILL LOSE THEM. Don't worry, pick your any Design App, build a simple logo with 1024px per side and go to https://pgicons.abiro.com/. It will pack everything ready to be used and also add the icons for the web store...
Publish and App on the Play Market isn't hard but the problem is that is not a lineal thing. You may think that only need to accept all contract stuff, describe the app and add some pic, and actually it is like that but is not a linear pile of stuff that you need to answer, first you add the Play Market Resume (5th option of the lateral menu), the Content Form (6th), then go to where to publish (8th), then go back to family protection (7th) then upload the app (1er) (and please DO NOT ADD A BETA VERSION, YOU NEED TO ADD MORE FORMS)... Are you ready for the 6th ring?
After a hard day putting everything on your first app, you only spec to wait a few hours and take a coffee thinking how you finally did it... Then you discover that you need to wait more than 7 seven days. So at this point, be ready with a publishing plan, because play market is not a great place for emergency uploads.
If you test again your app and find some problem... you are in a big problem. You can stop the process of publishing. You can however add a new version. In my case, the worst case, I made a big mistake with the app name. So I had to create a new app and wait again...
I hope this experience help you with your first app!
Claim your page on DEV before someone else does
Level up every day