loading...

Publish my first App, the worst Nightmare I never had.

alexgomez88 profile image Alejandro Augusto Gomez Rodriguez ・3 min read

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.

1) The Plugins first ring of Hell

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>

2) Fetching is your second ring. Be ready with this chainsaw.

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.

3) The Key store Signing third ring of hell.

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.

4) Icons and Splash screen... the ring that really smell like beacon.

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...

5) Console Play Market where you hear the CiberDeamon calling for you.

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?

6) Waiting the 6th Ring, Spider Mastermind

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.

7) The Icon of Sin. Your self.

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!

Discussion

pic
Editor guide
Collapse
leob profile image
leob

Been through all of this, but I also had to publish my app for iOS (Apple App Store). You think publishing for Android is hard? Think again, when you've struggled with XCode, iTunes Connect and all the other Apple tools then you'll really know what "hard" means.

Collapse
alexgomez88 profile image
Alejandro Augusto Gomez Rodriguez Author

Yep, the people of QA on the company where I work the really pass nightmares when it means to publish on AppleStore.

Collapse
karandpr profile image
Karan Gandhi

Welcome to cordova hell. Where a change in webview version breaks your app in inappropriate ways.
Where your app doesn't work on some smartphones and the only way to fix it is to ask user to factory reset his phone.

Also it's ironic that Google Play used to publish apps under 4 hours and App Store used to take weeks.
Today I can publish on App Store under a day and Play Store takes 7 days+.

P.S. Global ClearTextTraffic is not recommended. Android and iOS both block http natively.
If you are using Ionic , check the resources/android/xml/network_security_config.xml file.
Add your domain

<domain includeSubdomains="true">yunohttps.com</domain>

Else create your own network security config as shown here

Cheers !

Collapse
alexgomez88 profile image
Alejandro Augusto Gomez Rodriguez Author

Thanks for the trick, I will checkout in the next release.

Collapse
mustafaanaskh99 profile image
Mustafa Anas

Certainly sounds like hell.
Are you going to try React Native or Flutter soon? I'd like to hear your comparison about both.

Collapse
alexgomez88 profile image
Alejandro Augusto Gomez Rodriguez Author

I have tried both, but in a minimal scale. React Native is very easy to jump to it, but you need to make your own UI components and elements first to avoid large pile of line codes. Flutter is very interested but is really hard to make a UI from it, you really need to be clear how each widget work and also how to modify them. It means that in both cases you really need a lot of practice.

I'm evaluating to build my second app on Flutter or Kotlin, it could be wonderful to work it with Flutter.

Collapse
mustafaanaskh99 profile image
Mustafa Anas

I built a relatively complex app with Flutter including real time data updating, I think Flutter did just fine. Worth mentioning that I had zero experience doing mobile dev or Dart. I was satisfied with the outcome but I just really disliked Dart :/.
As for the UI, I think you can find a variety of cool ready templates and widgets. More of Flutter than RN.

Collapse
samiplamsal profile image
Samip Lamsal

I have tried so many admob plugins for my cordova app but none has worked so far, i will try with the one you have mentioned now.

Collapse
samiplamsal profile image
Samip Lamsal

the admob plugin link isn't working,