Ionic Books
by Andreas Dormann
Articles
BoB Tours App
Code
Discussion
Look Inside
Video
Ionic 3
Articles
BoB Tours App
Code
Discussion
Look Inside
Video
Ionic 3
Articles
Articles
How to make an X-Maze with Ionic 4 (1/4)
December 1, 2019
Tutorial
I first had the idea to write a “Making of the Halloween Maze”. But Halloween is over and Christmas is coming. I think it’s better to update the topic and to start a little tutorial series “How to make an X-Maze” (a playable labyrinth with a Christmas look). It’s supposed to show the creative side of Ionic: graphics, animations, audio. The series at a glance: Part 1: Make an Ionic 4 app project Part 2: Make it look pretty Part 3: Make it move nicely Part 4: Make it sound x-massy Every Advent Sunday there will be a new part of the tutorial. For Christmas, I’ll give you the finished program code for download. Today is the first Advent! So let’s start with our first part … Part 1: Make an Ionic 4 app project Preparations Starting an Ionic project is not difficult once you have made all the necessary installations. If you are not so familiar with this topic, you’re in luck: check out the Look Inside for my new Ionic book on this website. In chapter 1.2 “Installations” you will learn how to do it. Create the project In console / terminal move to your dev folder of choice and type $ ionic start x-maze blank to create your Ionic project. Choose Angular as the framework you want to use to develop your app. After the Ionic CLI has created our project, we switch to its project folder and continue … Create components Our project will include a page called “Home” (which already exists). We’ll populate it with three components called “Arrow-Buttons”, “Decoration” and “Maze”, which we are now creating. In terminal type the following commands: $ ionic g component components/Arrow-Buttons $ ionic g component components/Decoration $ ionic g component components/Maze In a subfolder “components” you’ll now find the new components. Create a components module In order to be able to embed our components in our app page in an elegant way, let’s quickly write down a component module called components.module.ts, which we put in our “components” subfolder: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { ArrowButtonsComponent } from './arrow-buttons/arrow-buttons.component'; import { DecorationComponent } from './decoration/decoration.component'; import { MazeComponent } from './maze/maze.component'; const PAGES_COMPONENTS = @NgModule({ declarations: , imports: , exports: }) export class ComponentsModule {} Import the components module into page module In home.module.ts we can now add: import { ComponentsModule } from './../components/components.module'; and at the imports: imports: , ... Now we are able to import and use the components in the home page. Build the UI structure of our app Now we build the UI structure for our app using the components in home.page.html: <ion-content> <div id="title"></div> <app-decoration></app-decoration> <app-maze></app-maze> <app-arrow-buttons></app-arrow-buttons> </ion-content> If we start our app with $ ionic serve and take a first look at what we’ve done so far, it looks like this: Of course, that doesn’t look that great yet. But the basic architecture of our app is done and and we’ll make it look pretty in the second part of our X-Maze tutorial. CU next Sunday, December 8, 2019. Until then: Happy reading and coding!...
And the winners are…
November 16, 2019
Announcement
A few days ago my Halloween raffle ended. Thanks to all who participated! I hope you enjoyed it. And here are the lucky winners of my Ionic books: Aaron N.Evita M.Marc S. Congratulations! You’ll receive a mail from me in the next few days … Happy reading & coding! Andreas aka Andionic...
Win an Ionic book!
November 1, 2019
Announcement
Hello, today I would like to show you the creative side of the great app development framework Ionic: Have a look at https://halloween.andreas-dormann.de The labyrinth is not just a gimmick. If you don’t get lost in it, you can win one of three of my books “Ionic 4 # / Creating awesome apps for iOS, Android, Desktop and Web”! The competition will run until 11.11.2019. In the next few weeks I’ll write a tutorial “The Making of Halloween Maze”. Here I’ll describe step by step the origin of this little scary game. Let yourself be inspired and stop by on https://ionic.andreas-dormann.de. Happy Halloween!...
Advanced preloading for Ionic/Angular modules
October 26, 2019
Advanced Tips
Out of the box Angular provides two strategies already implemented for us, pretty explanatory from the name: NoPreloading — no modules are preloaded, this is the default behaviourPreloadAllModules — all modules are preloaded as fast as possible While this will work in some scenarios, we might want to create something a bit more complex here. David Dal Busco and Aaron Sterling developed a custom preloading strategy that can be triggered only on demand. Read David’s article: Preloading modules in Ionic v4...
Ionic 4+ is here!
October 2, 2019
Announcement
Ionic 4+ / Creating aweseome apps for iOS, Android, Desktop and Web. This book is aimed at software developers who previously had little or nothing to do with programming apps or who had worked with other tools and frameworks and would like to build cool apps in an easy way. The book spans from the idea of the popular app framework and its installation to the realization of a complete app including its publication on Apple App Store, Google Play, for Desktop by using Electron or as Progressive Web App (PWA). Each of the twelve chapters is dedicated to its own aspect of Ionic. In the process, new functionalities are gradually being added to an initially simply designed tourism app called „BoB Tours“. At the end of this book, the reader not only knows the key features of Ionic, but has also understood how the whole works in context. He/She finally has the necessary knowledge to be able to develop his/her own awesome apps with Ionic. A comprehensive introduction to Ionic on more than 600 pages. Level: Beginner ++ | Intermediate +++ | Advanced + Table of Contents: 1. Introduction 2. Angular Essentials3. The first app4. Navigation5. Services and Storages6. UI Components7. Form validation8. Theming, styling, customizing9. Ionic Native10. Communication and Messaging11. Debugging and Testing12. Build, Deploy and PublishBonus chapters: B1. Ionic without any frameworkB2. Ionic and CapacitorB3. Ionic and ReactB4. Ionic and Vue...
