Deploy Framework7 apps to Android with PhoneGap/Cordova | Beginner Tutorial

6 Comments

This is an absolute beginner’s tutorial for those of you who have never before deployed a Framework7 app to a real Android device. In this video tutorial you will learn how to:

  • Create the app
  • Build
  • Deploy to Android Emulator
  • Run on real Android device

Android Framework7 Video tutorial

Steps

Here are all the steps one more time:

1. Make sure phonegap/cordova is installed
$ npm install -g phonegap cordova

2. Install template
$ cordova create MyAppName --template=phonegap-template-vue-f7-blank

3. Run in browser
$ npm run dev

4. Add Android platform
$ phonegap platform add android

5. Install Android Studio

6. Set Android PATH
Check for SDK path in studio, then do:

$ export ANDROID_HOME=~/Library/Android/sdk
$ export PATH=$PATH:$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

Make sure to add this to file ~/.bash_profile!!

7. Install Gradle
$ brew install gradle

8. Create android virtual device

  • Open Android Studio
  • Click in menu bar tools -> AVD Manager
  • Create new AVD
  • Select system image

9. Run on emulator
$ cordova run android

10. Enable USB debugging on device

  • Settings > About Phone > Build number > Tap it 7 times to become developer;
  • Settings > Developer Options > USB Debugging.

11. Run on device
cordova run android --device

2018 Framework7 V2 templates for Vue + PhoneGap/Cordova

Leave a comment

There is an older article on this blog about PhoneGap/Cordova templates for VueJS with Framework7 from January 2017, so I thought it’s time for an update since a lot has happened after one year. F7 had a major upgrade to V2 so all templates had to be brought up to date as well.

These are the latest template releases that come shipped with F7 v2, Vue and PhoneGap/Cordova:

Latest templates

I didn’t include installation/configuration instructions this time since everything is written on their GitHub/NPM websites. Hope you enjoy and let me know what your experience with these templates is!

Honorable mentions

The Framework7 team has an own list of recommended templates you might wanna check out.

Also, the Adobe PhoneGap team maintains some other nice templates, like:

I will join IBM

2 Comments

Sometimes things do not work out the way we plan them but at the same time new and maybe even better opportunities show up when you expect them the least.

As some of you may know, I’ve been working on a new startup company since last year with friends and former colleagues. Unfortunately, the outcome of this adventure was not as I expected it to be, so I decided to leave them and instead join one of the greatest IT companies out there IBM. Starting May 1st I will be working at the Watson IoT Center @Highlight Towers in the heart of Bavaria, Germany. If you’ve never been there or have some time to spare being in Munich, go check it out. It’s an astonishing piece of architecture shaped like a giant “H” while the view from the highest building in the city is simply breathtaking.

The team I join will be the IBM X-Force Command Cyber Security squad as a Frontend Developer and I can’t wait to get my hands dirty on those very exciting, upcoming projects. Joining Big Blue is not just positive news for myself or the company, but also for my YouTube channel as I will continue to have some free time to work on new videos and people at IBM really liked what I do there, so I’m confident being able to continue posting new stuff. Also, I’ll have the opportunity to travel to Cambridge Boston as well as Atlanta from time to time, so if anybody is living in these areas, I’m always in for a cup of coffee or beer! 🍺😄