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

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

PhoneGap/Cordova templates for VueJS with Framework7

Stop!
Before you read on, you might wanna check out the 2018-version of this article!


The following article is from January 15th, 2017 and is only kept for archiving reasons!

PhoneGap development with VueJS and Framework7 seems to gain more traction lately and there are 2 new templates that help you get started easily. One made by Adobe’s Holly Schinsky and the other one by Oğuz Özcan. In this post I want to introduce how to kick off a project with both templates easily.

Holly Schinsky’s template

To download, check her Github page.

This template is based on the official static template of the Framework7 + VueJS plugin project. To get started, make sure, you have PhoneGap/Cordova installed and run:

PhoneGap

$ phonegap create myVueApp --template https://github.com/hollyschinsky/phonegap-template-framework7-vue
$ cd myVueApp
$ phonegap serve

or

$ open www/index.html

Cordova

$ cordova create myVueApp --template https://github.com/hollyschinsky/phonegap-template-framework7-vue
$ cd myVueApp
$ open www/index.html

Oğuz Özcan’s template

To download, check his Github page.

This one is Cordova-only, so make sure you have it installed:

npm i cordova -g

To kick of the project, simply do:

cordova create  com.example.projectname ProjectClassName --template cordova-template-framework7-vue-webpack

Important: ProjectClassName should be written without spaces.

Do you have additional templates and boilerplates you can suggest? Let us know in the comment :D

How to read cookies in a Phonegap-based Android app with Java

Just took me forever to get this straight, here is the trick on how to do it:

CookieSyncManager sym = CookieSyncManager.createInstance(appView.getContext());
CookieManager com = CookieManager.getInstance();
sym.sync();
String cookie = com.getCookie("file:///android_asset");

if (cookie == null) Log.d("MainActivity", "Cookie is null");
else{
	Log.d("MainActivity", "Cookie exists, value is:");
	Log.d("MainActivity", cookie);
}

The perfect syncing solution for Android-based devices on Mac computers

I own a HTC Desire for quite a while now (actually since it came out) and I’m still very happy with it – and YES, I used an iPhone before and I’d never trade it for my Desire. However, one thing that really annoyed me was that synchronization was not as smooth as on the iPhone, where you could just connect the device, fire up iTunes and that’s it. The reason for this is that HTC does not offer its software called “HTC Sync” for Mac computers (boooo, HTC!). Thus, I needed a decent synching solution for my Android phone that also works on a Mac.

The first attempt: DoubleTwist

So, I started googling around and the first thing that I found was DoubleTwist, which calls itself “iTunes for Android”. After giving it a chance for some days, I realized that this piece of software seems to be pretty buggy. Whenever I synced between my HTC Desire and the iTunes library, something went wrong, for example missing songs or even duplicates. To sum it up: It was unusable. On top of that, the integrated Amazon store, where you could buy and downloads songs from, is not available here in Germany. Epic fail, I’d say. At least it’s for free.

Salling Media Sync

After being disappointed by DoubleTwist, I had to manually sync my computer and smartphone by copying files between them. No need to say that this was definitely an unsatisfying solution. So, today I stumbled over a really nice tool called Salling Media Sync. It doesn’t include a music store. Instead, its only purpose is to sync your Android device to the iTunes library. Just what I needed, I thought and downloaded it right away. Installation was easy (since there is none). Just copy the *.app file to your application folder and that’s it. Once started, Media Sync instantly found my smartphone (wow!) and displayed some information about it (free disc space etc.). After selecting the media which I wanted to sync (music, podcasts, pictures) I pressed “sync” and that’s it. How easy is that? I was really impressed how simple Media Sync works.

The application itself is now available in the quick launch bar on the top right of your mac screen and automatically starts when the Mac has booted, so whenever you connect your Android device, Media Sync will check if synchronization is required and if yes, it will do that:

Costs

The basic version of Media Sync is free. You can just download and use it as long as you want. The only downside here is that whenever the application synchronizes your phone, it will copy all files, which is often not required and can take quite a while, especially if you carry a lot of gigabytes with you, like I do.
So, if you don’t want that, I recommend spending 15 EUR and purchase the full version which supports smart synching. That means, that Media Sync will only copy the files which are really necessary. This way, the whole synchronization process gets a lot faster.

I am really happy now with Media Sync. The 15 EUR are absolutely worth spending.