How to create an Android/iOS app with Framework7 and Cordova.

I have recently been learning about app development with JavaScript and I can say it’s really cool, less stressful and not as mindboggling as compared to writing apps in languages like Java, Kotlin etc.

That’s what happens when you developing things in Java.

Before we get started let me shade some light on what exactly Framework7 and Cordova are.
What is Framework7?

Framework7 — is a free and open source framework to develop mobile, desktop or web apps with native look and feel. It is also an indispensable prototyping tool to show working app prototype as soon as possible in case you need to.

I spent some time evaluating it recently and was surprised to see that it now has support for Material Design as well as several new components. If you’re looking for a mobile app framework to get started building beautiful apps quickly, you should definitely try Framework7. It doesn’t rely on any particular framework other than it’s own DOM manipulation framework (DOM7), think of it as a mobile-optimized version of jQuery. It now can be used with other popular frameworks like React.JS, Vue.JS, Angular etc.

Features

FastClick library built-in to handle click delays for touch UI’s

  • Easy, familiar syntax for anyone familiar with jQuery to get started quickly
  • Framework agnostic — can be used with React, Angular and other templating engines like Handlebars
  • Oodles of pre-styled widgets/components. Some examples listed below but check out their kitchen sink apps for iOS and Android to see them all per platform:
  • Search Bar with built-in filtering
  • Login screen
  • Popups
  • Overlays and pickers
  • Master/Detail Split Views
  • Side Panels (left/right with transition choices)
  • Photo Browser
  • Text messaging view
  • Numerous List choices (media list, contacts list, sortable list, virtual list)
  • Swipeouts (swipe list item to delete etc)
  • Accordions
  • Tabs
  • Preloaders (spinners)
  • Floating Action Button
  • Cards
  • Chips (Material Design)
  • Form Components
  • Pull-to-refresh
  • Built-in Layout Grid system
  • Customizable
  • Themes and color schemes
  • Numerous options to handle a variety of scenarios easily (i.e: hide navbars and toolbars on scroll etc)
  • Flexible Router — Load pages from templates, using Ajax, inline or dynamically via the flexible router api
mainView.router.load({url: 'list.html'});    mainView.router.load({     template: Template7.templates.listTemplate,     context: resp.results   });

<div data-background="path/to/image.jpg" class="lazy">

  • Virtual list support
  • Utilizes native scrolling
  • HTML configurable caching for faster page loading
  • Bootstrap-like styles
  • Plugins API
  • Extend the framework and share with the community. Already includes many useful plugins listed on their site like an welcome/tutorial screen, indexed scroll list, 3D Panels, additional custom keyboards and more.
  • Icons — includes some basic ones (menu, search), but you can use any icon font or library with it such as Font Awesome or Ionicons. Check out the starter templates on noodl.io for more examples of using icons.
  • Good docs, visual examples, starter apps and great forum support, often by the author himself.

What is Cordova?

Apache Cordova is a mobile application development framework originally created by Nitobi. Adobe Systems purchased Nitobi in 2011, it was rebranded as PhoneGap, and later released an open source version of the software called Apache Cordova.

I think that’s enough of explaining lets get into it. Before we start writing any code you should have the following installed and setup:

Go to this link to set up the development environment. e.g Path’s and Environment variables etc for windows users.

  1. Node and NPM
  2. Git
  3. Cordova
  4. Android Studio (SDK) and Android Tools
  5. Java

You should have NVM(Node Version Manager) installed too .download link to download click here

If everything is setup and working lets get started.

1.Fire up your command line or terminal.
type ‘npm install framework7-cli -g ’ and enter to install framework7-cli.

2.In your command line or terminal.
type in ‘npm install cordova -g ’ and enter to install cordova.

3.In your command line or terminal.
type in ‘mkdir my_first_app && cd my_first_app’ hit enter and type in ‘framework7 create’ hit enter.

4. Upon entering ‘framework7 create’ in your command line or terminal the Framework 7 CLI will ask you questions on how it should setup your app.
pick the following options:
1. Cordova app (target native iOS and Android).
2. Enter any name you would like to i will call mine EmmanuelApp then click enter.
3. Just click enter on the App package (Bundle ID).
4. Press ‘a’ to toggle all and click enter.
5. Pick Framework7 Core.
6. Tabbed Views.
7. No bundler.
8. No, use default color theme.
9. Yes, include icon fonts.

Give it time to finish doing its business.

5. Open the folder in your text editor of choice. Before we build the app into an APK we will have a preview of it in the browser.
To preview it in the browser simply type ‘npm install http-serve -g’ in your terminal or command line to install http-serve.

6.Previewing the app in the browser make sure http-serve installed correctly and then make sure you are in the app directory. In your terminal or command line type in ‘http-serve’ it should give you the URL to preview the app from the browser.

7.Preview of the app in the browser after visiting the given URL you will want to add www as the path e.g ‘ http://192.168.56.1:8081/www/.
After checking it out from the browser stop the serve by hitting CTRL-C

8.Now we can build the App to Android or iOS simply type
‘npm run build-cordova-android’ or npm run build-cordova-ios’
I will be building mine for Android, let the building process!

After it’s done building to install the app on your device simply navigate to ‘cordova\platforms\android\app\build\outputs\apk\debug\app-debug.apk’ inside the my_first_app directory and copy ‘app-debug.apk’ to your device and install it. The name of the app will be ‘app-debug.apk’ in the debug folder if you want you can rename the .apk file to anything you want.

Here is the app being installed on an actual device:

Framework7 is something really interesting and easy to get a hang of I hope you will find sometime to learn more about it.
Thanks for checking out my story on!!!
if you liked it kindly Follow me on Medium for more cool stories.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store