Hello everyone. It’s been almost two months since I published any tutorials on the blog. After a little vacation, I took the time to think about other themes and other projects. For the fall, I propose to start a new category on the development of applications for iOS and Android. The idea is to propose a series of tutorials to allow you to develop your own applications for smartphone or tablet. We will see, for example, how to drive and retrieve information directly with an ESP8266, ESP32 (or Arduino) microcontroller from a phone without having to install an intermediate home automation server.
As it’s been a few years since I did not make mobile application development, I took advantage of the month of August to get back to level. Nothing like a project to motivate yourself. So I took the opportunity to develop a mobile application that incorporates the content of the blog.
The diyprojects.io application for Android and iOS developed with the Ionic 3 framework
There are 2 major technologies for developing mobile applications:
- The native code. In Java on Android and in Swift (the replacement of Objective C) for iOS
- Hybrid development. For simplicity, the application is a website that can access the resources and materials of the phone or tablet
As usual, each technology brings its share of advantages and disadvantages. Performance and perfect system integration for native applications. Speed of development and (almost) identical code for hybrid applications.
Except for the development of games or large pubic applications, hybrid cross platform development is an excellent solution. In this field, the Ionic framework stands out from other solutions.
Completely Open Source, Ionic Framework is an overlay that relies on two other major projects:
- Cordova (an Open Source project of the Apache Foundation), the engine that makes it possible to link the HTML5 code of the application and access the hardware resources (camera, accelerometer, microphone …)
- Angular (an open source project developed largely by Google), the development engine of the Web application. With Angular, we develop the application in the form of a website
Ionic comes to dress Angular with graphic elements that mimic the system on which the application is launched. The icons, the shape of the windows, the animations of transition … were reproduced with CSS styles to mimic the interface of iOS, Android or Windows Phone.
Some examples of interface components
Ionic is a complete toolbox that allows you to manage all aspects of the project until it is published on the Apple Store, the Google Play Store or simply on your personal smartphone:
- Add Cordova plugins to support features (microphone, camera, access photos, contacts …)
- Compile the application for Android or prepare the project Xcode for iOS (a Mac will be needed to compile the application and install it on an iPhone or iPad)
- Add elements to Angular HTML projects, pages, services, pipe (formatting HTML elements) …
If you discover the development of mobile applications, it’s probably Chinese, but it does not matter, we will have the opportunity to take it all in detail in the next tutorials. In the meantime, here’s a quick overview of what you can achieve with Ionic.
How does the application work?
The application connects to the blog projectsdiy.fr to retrieve articles and categories
It took me a little over 2 weeks to develop a functional version with most of the features I imagined:
View the list of latest published articles with infinite loading of old tutorials. This limits the load on the server as well as the space on your smartphone.
- Bookmark articles,
- Caching for offline reading (last 10 items),
- Access to articles by category or keyword,
- Article search on the blog,
- Integration of the Youtube channel.
The content occupies the entire screen. A sidemenu provides access to the various functions of the application. For the moment, I still block on a problem to integrate in the application the forum and the Youtube channel (besides, it is forbidden by Google, so the reading of the videos may always be done via the external browser).
The list of items automatically adjusts to the size of the screen. On smartphone, it occupies a single column.
Two tabs allow you to quickly move from the list of articles to favorites.
On tablet, article history is displayed in two columns
How to do :
Ionic-angular platform. The platform.width() function is used to change True / False to a variable that is then used in the HTML code of the page. We load the template according to the pitch / wrong value using *ngIf like this
The star in the upper right corner of the screen marks the article as a favorite. The list of favorite items is automatically updated as soon as an item is added or removed from the list. The IDs of the favorite articles and the content of each article are stored in a local SQLite database using the Local Storage plugin.
How to do :
@Ionic-angular events. Publish and subscribe functions
The share button allows you to send the link of the article by any social network or by email.
How to do :
Quick access to articles in a category. The icons come from the website icons8.com. They are free (in low resolution), provided to quote the site.
Finally the list of videos from the Youtube channel. Too bad, reading will be mandatory from the browser.
Then, it took me another week to master the compilation of the application on Android and Xcode, correct the defects of the production version and publish on the Stores.
You will not find any ads on the app. Similarly, there is no analysis of the use you make of it. To finance the purchase of components (and now the Apple Developer Account), I integrated a section Good deals with a real filter of research. It’s very interesting to learn to manipulate JSON objects.
The offers are categorized by product category. You will find only products for the development of DIY connected objects (Arduino, components, tools, Raspberry Pi, 3D printers …) as well as most home automation box and accessories manufacturers (Xiaomi Aqara, Belkin WeMo, Nest, Google Home, Amazon Alexa …). To be included in the list, the product must be at least 5% cheaper than normal. Offers are updated daily.
When there are many promos, you can apply multiple additional filters: only with Promo Code, by price range, with a minimum discount rate.
As you can see, Ionic 3, Cordova and Angular are really very powerful.
The application will be improved in the coming weeks. Caching of items is not satisfactory at this time. It had to start with a few things. In the next release, articles will be cached (in the background) for later offline reading. I also suggest you add a notification system.
We will use most of the concepts used in the next tutorials. I hope you find the app to your liking. Feel free to suggest other features or to share your ideas for other developments.