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 in 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.
- 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: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 createMake sure that the app domain name is in the format of com.app.MyAppname.cordova create MyApp com.app.mathseasy MathsEasy
- Now, download the framework 7 starter template. Starter template helps you with the start you need to create the app. Go to the Framework7 v1 GitHub repository and download the project: Download Link. 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 into the www folder of the Cordova project.
- Now to host our project on a server we would be using http-serve. To install http-serve, go to cmd, write the command and press Enter.npm i -g http-serve
- To run our project on the server, go to www folder using the command cd MyApp first and then cd www on the command prompt. Now when you are inside www folder run the following command http-serve
- Now open any browser and go to http://localhost:8080
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 into 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/
-> The next Part of this tutorial is covered here.
-> Note: At the time of creating this tutorial, there was only one version of framework7. But few days before Framework7 v2 was launched. So to avoid any confusion let me clarify that this tutorial is based on Framework7 v1.
-> Recently My App Cool Websites got Published in Framework7 Showcase. Please install it and let me know if you liked it or not.
-> Update Logs:
- Update1[16 Jan 2018] – Updated all the links as per Framework7 v1.
- Update2[31 Mar 2018] – Removed Ionic and updated the article with HTTP-Serve.
- Update3[22 July 2018] – Added Framework7 Showcase Link.