Launching Android App with Admob by Cordova + Framer-X

Kyuho Lee
2 min readMar 11, 2020

--

The easier and quicker way to build an Android app

https://images.pexels.com/photos/441795/pexels-photo-441795.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260

Overall Flow

  1. Build a Web app by Framer-X
  2. Prepare new ad of AdMob
  3. Build an Android app by Cordova
  4. Launch on Google Play

1. Build a Web app with Framer-X

Design by Sketch tool

Copy Sketch screens to Framer-X

Modify Framer-X screen due to incompleted compatibility

Prototyping and export as web files by Framer-X

2. Prepare new ad of AdMob

  • Create an account
  • Create new ad types (banner, interstitial) to have IDs

3. Build an Android app by Cordova

  • Create a dummy project
cordova create <fold name> com.xxx.yyy "<app name>"cd <fold name>
  • Install the android platform plugin and Admob plugin
# cordova platform add androidcordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID=”ca-app-pub-XXX"
#remove
cordova plugin rm cordova-plugin-admob-free --save --variable ADMOB_APP_ID="XXX"
  • Modify Config file
- Define icon positions and types- Enable/disable some options of fullscreen, portrait only mode
  • Prepare Admod file for Framer-X exported files
index.html, index.js from plugin github
  • Test with emulator or android phones
cordova run android
  • Prepare Keystroke
keytool -genkey -v -keystore android.keystore -alias android -keyalg RSA -keysize 2048 -validity 10000
  • Create build.json
  • Build as a released version APK
cordova build android --release

4. Launch on Google Play

  • Design icons, promotion images and upload them in Google Play

--

--