Recently, I published my first android app on Play Store and let me tell you it’s not as hard as you think. There are plenty of open source tools out there which makes the task easy; and Google will have answers to almost all your hiccups that you’ll face during your journey.

To start off, let’s discuss the types of Mobile App. There are primarily 3 basic types of mobile applications:
1. Web App
2. Native App
3. Hybrid App

Web Apps are such applications which run on a Web Browser. For example, Flipkart.com or Myntra.com are examples of web apps.

Native Apps are those which are built on proprietary software provided by the OS manufacturers like Android Studio for Android or Xcode for iOS etc. They use the native features of a mobile device in the most efficient way which results into good App performance, Graphics etc. But they have one drawback native apps are platform specific, Android app will work on Android phones/tablets or iOS apps will work only on iPhone/iPad etc.

Hybrid Apps are platform independent. Once created it can be run on any platforms like Android, iOS, Windows etc. They are built on HTML, CSS, and JS.

So in this post, I will talk about a Hybrid App Framework, Framework7, which I used to develop my app. The framework is totally open sourced and is continuously evolving.

I will not be sharing the exact process, but yes I will give you an outline which will be enough for you to get started and also at the end of the post there is a forum; you can post your questions/doubts there and we can work together to solve them. Let’s get started.

  • First of all, you need to install Node JS in your system. Go to Nodejs.org & download the installer file for Windows and install it. People from all around the globe have built thousands of open-source libraries for Node.js – most of them hosted on the npm website. NPM (node package manager) is the default package manager for the JavaScript runtime environment Node.js. Using npm only we will install rest of the things that we require for our development; instead of going to respective websites and downloading them.

  • The next thing that we have to do is to install Cordova. Apache Cordova enables us to build applications for mobile devices using CSS, HTML, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It enables wrapping up of CSS, HTML, and JavaScript code depending upon the platform of the device. It extends the features of HTML and JavaScript to work with the device. Long Story short, it takes the Html, CSS and Js files and wraps it as per the Mobile platform like Android, IOS, Windows phone etc. To install Cordova go to Run -> CMD, write the command and press Enter.
    npm install -g cordova 

  • Once you’re done with installing Cordova, install Ionic. Ionic is another Hybrid App framework, but we would only be using it for hosting the App on our Local Server. Although there are other ways to do this, I have chosen Ionic because of its easiness. Now, again go to CMD, write the command and press Enter.
    npm install -g ionic

  • Next, on the list is creating a Cordova project. This is where all the magic happens. Go to CMD and then go to the location where you want your project to be. For example, if you want your project in Desktop, change the directory to Desktop using the CD command and then run the command:
    cordova create
    So for example if my App  folder name is MyApp, the domain is com.app.mathseasy and app name is MathsEasy; you should run the command as:
    cordova create MyApp com.app.mathseasy MathsEasy
    Make sure that the app domain name is in the format of com.app.MyAppname.

  • Now to run the ionic, we need to have two files inside the Cordova project folder. For that, first install Notepad++(Notepad++ is a free source code editor) and create two files ionic.config.json and package.json. To create them, open notepad++ write the below code and while saving, give the file name mentioned in bold and choose the Save as type: as All types (*). Make sure you place the two files inside the Cordova Project Folder only and not any subfolder.

For ionic.config.json and package.json and write. Both the file will have the same content.

{

“name”:”MathsEasy”,

“app_id”:”100″

}

  • Now, download the framework 7 starter template. Starter template helps you with the start you need to create the app. Go to the GitHub repository and download the project from here. Make sure you download the zip file outside the project folder. Once downloaded, unzip it, go to dist folder; copy all the files and paste it in the www folder of the cordova project.

  • Go to cmd again and write ionic serve to start the server (make sure you’re inside project folder while running ionic serve). If everything goes well your project will be loaded into your default browser and you can see something like this.

From here on you have to just get that artist out of you. The best part about using Framework7 is that you get ready made codes, you just have to paste it in your project and rest will be taken care of. Browse the Docs section, there are tons of functionalities and features to be explored. Go through the Docs content one by one, make changes in the starter template and you’re good to go. If you need a crash course on basic Html, js, and CSS, go to W3schools. If you’re stuck anywhere you can post your queries on Stackoverflow or you can post them at Framework7’s official forum. And remember, Google is your best friend so use it to your fullest.

There are chances you might not get answers to your queries because these are big forums and many a time your queries will get unheard, I have experienced that myself. So to tackle that I have created a forum to make sure that all your queries are addressed. So start building, Keep Failing and Keep Learning. I have mentioned Failing because if you don’t fail, you won’t learn.

Forum Link: https://muut.com/letsbuild/

Pin It on Pinterest