Ionic Books
by Andreas Dormann
Articles
BoB Tours App
Code
Discussion
Look inside
Video
Ionic 4+
Ionic 3
Articles
BoB Tours App
Code
Discussion
Look inside
Video
Ionic 4+
Ionic 3
Articles
Articles
Ionic Vue Final is out!
October 16, 2020
Announcement / Ionic News
Today the Ionic team announces the general availability of Ionic Vue, a native Vue version of Ionic Framework that makes it easy to build apps for iOS, Android, and the web as a Progressive Web App (PWA) with one Vue codebase. Check out the announcement Tweet Ionic Vue was built to take advantage of all the great new features that shipped in Vue 3, including “improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the Vue framework”. Combining the benefits of both Ionic and Vue, Ionic Vue offers a great way for web developers to build fast, lightweight mobile applications in very little time, backed by a supportive worldwide community. Here are a few highlights of what’s included with this release: Built with Vue 3. Ionic Vue is built with Vue 3. This means that developers building with Ionic Vue will benefit from all the improvements and features in Vue 3, like the new Composition API.Vue Router Integration. We’ve created a router integration that builds on top of Vue’s router. Meaning you’ll get first class routing out of the box, as well as Ionic’s transitions and animations.Ionic CLI support. Building a new Ionic Vue project with the CLI means you’ll not only get a great app out of the box, but it will get you started with best practices already applied....
The Architect’s Guide to PWAs
October 2, 2020
Advanced Tips / Tutorial
Big brands like Twitter and Pinterest are demonstrating how Progressive Web Apps can boost user acquisition, engagement, and ultimately, revenue. This guide provides enterprise architects and app dev leaders with practical insights on which projects are right for PWAs, and how to build a production-ready PWA today. In this guide, you’ll learn: What makes a PWA. The key capabilities and features that define PWAsHow PWAs work. An overview of the APIs and browser standards that allow PWAs to provide reliable, fast, engaging experiences with the web.How PWAs fit into your app strategy. When and why to use a PWA in favor of a traditional native mobile app.How to get started. Everything you need to get started with PWAs today. Read the PWA Guide! After reading this paper, be sure to check out the Ionic PWA Toolkit. It includes everything you need to build beautiful, fast, production-ready Progressive Web Apps today....
Capacitor 3.0
September 1, 2020
Announcement / Ionic News
The Ionic team announces a new version of Capacitor. Like any major version change, Capacitor 3.0 will include some new features, but also some changes to how plugins are consumed. They’ve been tracking their ideas on GitHub and have created a few issues to share their plans. This covers new features and bug fixes to Capacitor-Core, as well as splitting out the plugins to their own packages. If you want to check on the progress or find the reason for these changes, they have a main Capacitor 3.0 issue which covers this. There are also two other issues related to plugins and upgrade guides you could also track as well: Capacitor 3.0 plugins updatesCapacitor 3.0 upgrade guide Also read Mike Hartington’s posts for more: How Capacitor WorksIonic Vue Progress UpdateBuilding With Capacitor and VueNew Capacitor Community Org...
Saying Goodbye to PhoneGap
August 12, 2020
Ionic News
Adobe just announced that they are shuttering PhoneGap, PhoneGap Build, and their (long non-existent) investment in Apache Cordova. As the pioneer of hybrid app development, aka web developers building mobile apps, this is truly the end of an era. Max Lynch, co-founder of Ionic, wrote an interesting article on this latest news. Worth reading! Here is the link: https://dev.to/ionic/saying-goodbye-to-phonegap-1gp4...
Ionic Konferenz 2020
June 1, 2020
Announcement / Ionic News
Ioniconf 2020 – die eintägige Online-Konferenz von Ionic zur modernen plattformübergreifenden App-Entwicklung Ioniconf 2020 ist eine rein digitale Veranstaltung, die am 24. Juni 2020 stattfindet und bequem von zu Hause aus besucht werden kann! Das Ionic Team hat Branchenführer zusammengebracht, um alles über Ionic und die Webplattform zu teilen und das Web und die Webentwickler zu feiern. Um mehr über die Konferenz zu erfahren, lesen Sie den neuesten Blog-Beitrag oder registrieren Sie sich einfach unten für die Konferenz. Seien Sie gespannt auf Details zu Ioniconf 2020 in den kommenden Wochen, wenn das Ionic Team Referenten, Themen und andere aufregende Details hinzufügen wird. Hier geht’s zur Registrierung!...
Nice App Wizard
May 12, 2020
Ionic News
The Ionic team provides a nice little App Wizard on https://ionicframework.com/. In just a few steps, you determine the title, icon and layout of your app, pick a JavaScript Framework (React, Angular, Vue (coming soon)), create a (free) Ionic account (if not already available), and then enter only two predefined commands in the terminal. Your Ionic app is ready! Cool....
Capacitor 2.0
April 20, 2020
Ionic News
The Ionic team is excited to announce the next evolution of Capacitor, Ionic’s native runtime that makes it easy to build web apps that run on iOS, Android, and on the web as Progressive Web Apps — all powered by a single codebase. This new version updates Capacitor and its project templates to the latest security, bug fixes, and features including: Swift 5, Android 10, & AndroidX supportFace Unlock and Iris Unlock in Ionic Identity Vault UX improvements to 23+ core pluginsImproved tooling & docsEasy update processSmaller app sizes Capacitor 2.0 is a significant update to an increasingly important part of Ionic’s app development platform. It’s now the default for all new Ionic React projects, and soon will be for Ionic Angular projects as well. Read more: Announcing Capacitor 2.0...
My Ionic 5 book is here!
March 21, 2020
Announcement
Ionic 5 / Create 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. At this website you’ll find all source code we write in this book – to every chapter the respective development progress – always up to date! You can download it from the download area here and compare it to your own code or use it as a base to start from whatever chapter you want. Ionic 5 / Create aweseome apps for iOS, Android, Desktop and Web is a comprehensive introduction to the Ionic framework 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 Publish Bonus chapters: B1. Ionic without any frameworkB2. Ionic and CapacitorB3. Ionic and ReactB4. Ionic and Vue Get it now on Amazon!...
Ionic 5 is out – my new book will follow soon!
February 12, 2020
Announcement / Ionic News
Ionic Framework 5 (Magnesium) is out today! This release includes iOS 13 design updates, a brand new API for creating your own custom animations, revamped Ionicons, updated Ionic colors, new starter designs, improvements to component customization, and more! You may be concerned about the upgrade process due to the fact that this is a major version release, but fret not! The Ionic team migrated to follow the semantic versioning convention and committed themselves to publish a major release when any known incompatible API changes were introduced. So in this case, the major version just indicates that their public API has been updated. And because they now use Web Components, API changes are handled separately between their UI components and the JavaScript framework. Long story short: for those on v4, this upgrade should be easy. And my new Ionic 5 book will follow soon! To dive in and see what’s new, read Brandy’s announcing blog article!...
How to make an X-Maze with Ionic 4 (4/4)
December 22, 2019
Tutorial
This is part 4 of an Ionic 4 tutorial. Please read part 1, part 2 and part 3 before continuing here… Part 4: Make it sound x-massy To let our app sound x-massy, I’ve prepared some audio files that you can download here:SantaClausIsComing.mp3Hohoho.mp3 After downloading the files copy them into the assets folder. Embed audio There are various ways of integrating audio in an app. We make it easy with the howler.js library. Install howler.js in the terminal with $ npm install howler Then we create a service with $ ionic g service services/audio In the new audio.service.ts we code the following lines: import { Injectable } from '@angular/core'; import { Howl } from 'howler'; @Injectable({ providedIn: 'root' }) export class AudioService { private hohoho: Howl; constructor() { } Init() { new Howl({ src: ['../assets/SantaClausIsComing.mp3'], preload: true, autoplay: true, loop: true }); this.hohoho = new Howl({ src: ['../assets/Hohoho.mp3'], preload: true, autoplay: false, loop: false }); } SayHohoho() { this.hohoho.play(); } } Now we can import and initialize this service in home.page.ts: import { Component } from '@angular/core'; import { AudioService } from '../services/audio.service'; import { GameService } from '../services/game.service'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: , }) export class HomePage { constructor( public audio: AudioService, public game: GameService ) { } ngOnInit() { this.audio.Init(); this.game.Start(); } } Since our SantaClausIsComing song was configured with the parameter autoplay: true, the song starts already, as soon as the app is restarted. Trigger audio in a specific situation With howler.js it’s easy to trigger a sound to a certain event. In our app it makes sense that Santa calls “hohoho!” when he picks up one of the presents. So we go to our game.service.ts file and add the highlighted lines: import { Injectable } from '@angular/core'; import { MazeService } from '../services/maze.service'; import { MazePosition } from 'src/app/models/maze-position'; import { ToastController } from '@ionic/angular'; import { AudioService } from '../services/audio.service'; import { Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class GameService { public status: string; /** player: position */ private playerPosition: MazePosition = new MazePosition(0, 7); /** items: positions */ private itemPresent1 = new MazePosition(7, 1); private itemPresent2 = new MazePosition(8, 15); private itemPresent3 = new MazePosition(12, 8); /** items: collected */ private hasPresent1: boolean = false; private hasPresent2: boolean = false; private hasPresent3: boolean = false; constructor( private audio: AudioService, private maze: MazeService, private toastController: ToastController ) { } /** * Starts the game. */ public async Start() { this.maze.Init(16, 16); this.initPlayer(); } /** * Navigates with the arrow keys or WASD. * * @param keydownEvent.code event code coming from keydown */ public Navigate(keypressEvent) { switch (keypressEvent) { case 'ArrowUp': case 'KeyW': if (this.maze.CanMoveUp(this.playerPosition)) { this.movePlayer(this.playerPosition.Col, this.playerPosition.Row - 1); } break; case 'ArrowLeft': case 'KeyA': if (this.maze.CanMoveLeft(this.playerPosition)) { this.movePlayer(this.playerPosition.Col - 1, this.playerPosition.Row); } else { } break; case 'ArrowDown': case 'KeyS': if (this.maze.CanMoveDown(this.playerPosition)) { this.movePlayer(this.playerPosition.Col, this.playerPosition.Row + 1); } break; case 'ArrowRight': case 'KeyD': if (this.maze.CanMoveRight(this.playerPosition)) { this.movePlayer(this.playerPosition.Col + 1, this.playerPosition.Row); } break; } } private initPlayer() { this.movePlayer(this.playerPosition.Col, this.playerPosition.Row); } private movePlayer(col: number, row: number) { if (row < 0) { this.presentToast('Hey!', 'What kind of unreliable Santa are you?'); } else if (row < this.maze.Rows) { this.moveSection('santa', col * (this.maze.CellPixels), row * (this.maze.CellPixels) ); this.playerPosition = new MazePosition(row, col); this.checkForItemHits(); } else { if (!this.hasPresent1 || !this.hasPresent2 || !this.hasPresent3) { this.presentToast('Hey!', 'You haven\'t found all the presents yet, Santa!'); } else { this.audio.SayHohoho(); this.presentToast('Ho ho ho!', 'You\'ve found all the presents, Santa!\nChristmas can come now ;-)'); } } } private moveSection(elementName: string, xOffset, yOffset) { var element = document.getElementById(elementName); if (element) { var transformAttr = ' translate(' + xOffset + ',' + yOffset + ')'; element.setAttribute('transform', transformAttr); } } private checkForItemHits() { if (this.playerPosition.Col == this.itemPresent1.Col && this.playerPosition.Row == this.itemPresent1.Row) { this.hasPresent1 = true; this.audio.SayHohoho(); this.presentToast('Hey!', 'You\'ve found present 1, Santa!'); this.hide('present1'); } if (this.playerPosition.Col == this.itemPresent2.Col && this.playerPosition.Row == this.itemPresent2.Row) { this.hasPresent2 = true; this.audio.SayHohoho(); this.presentToast('Hey!', 'You\'ve found present 2, Santa!'); this.hide('present2'); } if (this.playerPosition.Col == this.itemPresent3.Col && this.playerPosition.Row == this.itemPresent3.Row) { this.hasPresent3 = true; this.audio.SayHohoho(); this.presentToast('Hey!', 'You\'ve found present 3, Santa!'); this.hide('present3'); } } private hide(elementName: string) { var element = document.getElementById(elementName); element.style.display = "none"; } private async presentToast(header: string, message: string) { const toast = await this.toastController.create({ header: header, message: message, duration: 5000, position: 'top' }); await toast.present(); } } So, give it a try and be happy with Santa when he finds the presents in the maze and finally the exit 😉 Improvements There is of course a lot of room for improvement in this gaming app: A nice sound when Santa takes a step and/or another sound when he hits a wall. And other characters (bots) that make life difficult for Santa because they also chase after the gifts and snap them away from him. And so on… Feel free to implement further features and share them with us! Credits Without the great graphics, tools and audio files, which are available free of charge on the web, I would have had to spend a lot more time on this app. Therefore I would like to finally thank: mazegenerator.netWith this amazing tool you can generate all kinds of labyrinths … and export them as SVG!freepik.comThis is where the pretty decoration, our Santa and the presents come from. Thanks to kipargeter for this!soundcloud.comThe song “Santa Claus is coming” is by Andi del Mar and is freely available on SoundCloud. I hope you enjoyed this tutorial and you’ve found some inspiration for your own awesome apps. You want more of this cool stuff? Then look at my Ionic 4 book. Happy reading and coding!...
