The latest release of Framework7 V3 is not as much of a jump as V2 was compared to V1. However, in this video I want to introduce to you the 12 most important changes in this release. (Spoiler: React is back!)
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
- Deploy to Android Emulator
- Run on real Android device
Android Framework7 Video tutorial
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
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
In this video tutorial I will explain how to make your website/-app look good even with the iPhoneX’s notch in the way. On the next episode we’ll go a step further dealing with the same issue on PhoneGap/Cordova apps with Framework7. Enjoy!
Ps: You’ll find the source code from the video on Gist.
iPhoneX Anti-Notch video tutorial
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:
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!
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: