"Original" hands-on teaches you how to build a practical fuel consumption App (1), fuel consumption app

"Original" hands-on teaches you how to build a practical fuel consumption App (1), fuel consumption app
Preface:

Just 10 years ago, I had a little savings. I bought a scooter three years ago. As a result, the fuel consumption cost of vehicles has become a concern every month. Over the past three years, I have used countless fuel consumption recording software, such as the most well-known "Little Bear fuel consumption". From the first use to the latest version, I feel more and more "bloated ", the features are so rich that even the "Big Data" layer can be achieved. As a small white car owner, I only care about:How is the fuel consumption of my car?.

After experiencing the fuel consumption of several apps on the market, I felt unsatisfactory. For example, I just wanted to renew my mobile phone number (What's the ghost, mobile phone number and fuel consumption have a wool relationship? As an android user,I think: personal privacy can be rescued.!)...... In addition, the interface is as simple as only one table. I see a very strong face (dare not to be so "straightforward", not to use a complex chart as Little Bear's fuel consumption,I just want to know how the fuel fee is spent.), I used to download an app that supports cloud disk data backup in a pheasant app market. I had no choice but to find this app after I changed my mobile phone, and the fuel consumption data for more than a year could not be recovered, alas (I want to use a stable fuel consumption app.)

For a long time, I want to find an App with such fuel consumption:

• Relatively simple functions (adding, deleting, and displaying charts)
• Privacy is not involved (personal account information is not collected and no excessive permission application is required)
• Supports cloud data backup (back-end data is used for cloud backup without any worries)
• Stable updates (there is a stable App market to carry, if I am still alive, it will continue to be updated)

As a programmer, I have always believed in the phrase "do it yourself, good clothes and food". Since the Android Market cannot find an app suitable for your own fuel consumption, why not develop one on your own?

Selection: development tools and UI framework

I decided to create one by myself, but I felt too bloated when I thought about so many Android project frameworks. If I wrote Activity one by one, I felt that my obsessive-compulsive disorder was too low. What should I do ?! MetHbuilder + MUIThis front-end Hybrid development artifact, I will not repeat it too much in this article, you can go to the official website to see "Hello world ", naturally, I can understand why I will use it to complete the development tasks of our App (the portal is here: Jump to the page)

Now, we have ready the development tools and UI framework, and our App will be built on this framework. To put it simply:I only need to write a few lines of JS Code to complete the functions of a native App..

New Idea of Data Persistence: BAAS

There are a lot of explanations about BAAS on the Internet, and I am not so embarrassed here. Simply put, I am an App developer and I only need to tell Baas meWhat to save (JSON),When to Get (Anytime) and how to Get (Get/Post ). BAAS is used to complete all data operations in the background !, I don't need to write any background code!

In this way, as an independent App developer, at least the persistence of background data is solved. BAAS providers provide you with a set of "User Account" systems for your apps to use the "user" module, password retrieval and so on have saved us a lot of work.

To sum up, I chose:WilddogThis young BAAS provider serves as the cloud data backup + User Account module support for my App ~~~~ Of course, it's free and free. You can decide on your own!

 

Everything is ready, only owe coding

The problem of development tools, UI framework, data storage, and user account system has been solved. For our App, everything is ready, and we only owe it to coding. If you want to deal with this App in over 10 minutes like me in front of your computer, you should be prepared:

• Project development tool: Hbuilder (comes with MUI)
• Wilddog cloud account
• Sound hands (right hand)
• IQ no less than 70

......

Project Construction

 

Use Hbuilder to create a "mobile App" project. In "select template", select mui project. In this way, we will add necessary js, css, and font resources for our projects.

As shown in the left figure, add the images, libs, and funcs folders under the root directory. As shown in:

There are also a series of functional interfaces. Here we will not repeat them one by one. Projects will be shared on git later. The following figure shows the interface:

 

The source code of the project will be distributed using git, so we will not repeat it here. You can scan the QR code below to try it out first:

In the future, I will give you a special topic to introduce the implementation of the main function modules of this App, as well as the skills related to accessing the BAAS service.