The diyprojects application also available on iOS and Android, first mobile project with Ionic 3

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:

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

To use the phone’s resources, Ionic developers have developed wrappers, a software component that links a Cordova plugin (written Java on Android, Swift or ObjectiveC on iOS) and the Javascript code of your Ionic project.

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 sidemenu gives access to all the functions of the application

The sidemenu gives access to all the functions of the application

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.

Latest articles published on the blog with infinite loading when we reach the end of the list

Latest articles published on the blog with infinite loading when we reach the end of the list

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

<ng-template *ngIf=”isTablette; then tablette; else mobile”></ng-template>
<ng-template#tablette>
<!– code HTML tablette –>
<ng-template#mobile>
<!– code HTML tablette –>

The list of articles passes on two columns as soon as the application detects that it is executed on a tablet (width of the screen greater than 767 pixels).

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/storage
@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 :

@Ionic-native/Socialsharing

Pull the screen up to open the previous article. Down to go to the next article.

Pull the screen up to open the previous article. Down to go to the next article.

 

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.

Liste des vidéos publiées sur la chaîne Youtube

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.

diprojects app android ios deals offers

When there are many promos, you can apply multiple additional filters: only with Promo Code, by price range, with a minimum discount rate.

diprojects app android ios deal filter

Search filters
Sort by price, discount rate, with promo code, shop, alphabetical.
Selection by price range and minimum reduction rate

As you can see, Ionic 3, Cordova and Angular are really very powerful.

diprojects app android ios deals selectedYou can test the application yourself by visiting the Apple Store or the Google Play Store.

 

 

 

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.

Subscribe to the weekly newsletter

No spam and no other use will be made of your email. You can unsubscribe anytime.

Tags:

DIY Projects