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
Timo, thank you for you work: Video & this text Tutorial.
I use Linux Mint 18.3.
I do not understand at what stage it’s possible to put a frame template into a project created in Android Studio.
There is a template created in the framework.
There is a Android project Android Studio.
Both places in different directories.
How can they be combined together?
Hey, I usually do not touch the project since it gets auto generated by PG/Cordova. Also, I don’t use Android Studio. My workflow is usually: Edit the source files with any editor, then build + run through terminal.
Hi, For beginners, you might add a step between 2 and 3: npm install
help me
$ npm run cordova-run-android
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache_logs\2019-01-24T04_34_05_607Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! helloworld@1.0.0 cordova-run-android:
npm run build && cordova run androidnpm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the helloworld@1.0.0 cordova-run-android script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache_logs\2019-01-24T04_34_06_028Z-debug.log
Hi Timo, I admire your tutorials, they are the best (y)..
If I want to add authentication on this template, is there any tutorial to do that?
Thanks a lot
Hey Vilo, thanks! I’m glad those videos are helpful to you!
I have a (bit old) video on authentication for Twitter here: https://youtu.be/ybaigTnn5E0?t=1090
(Authentication part starts at 18:10)
Not sure if that’s what you’re looking for. If not, lemmi know and I might create a video on what you need!
there is a difference in creating framework7 app with the help of cordova and vice-versa. how to create framework7 app with cordova plugin and build apk