Course info

Rating

(17)

Level

Intermediate

Updated

Aug 2, 2017

Duration

3h 1m

Description

Wouldn't it be cool if your mobile Ionic apps could also run on Windows and MacOS desktops? With Electron, they can! All the time and effort you've spent learning web mobile technologies such as HTML, CSS, JavaScript, Angular, Cordova, and Ionic can be applied to the Desktop. In this course, Creating Cross-platform Apps with Ionic and Electron, you'll learn how to create cross-platform apps with Ionic and Electron. First, you'll explore this powerful and easy-to-learn technology that enabled the rapid development of powerhouse apps. Next, you'll discover Visual Studio Code, Ionic Creator, and the Atom editor. Finally, you'll learn about Slack, GitKraken, and countless others. By the end of this course, you'll have a better understanding of how to create cross-platform apps with Iconic and Electron. Whether you aspire to create the next iTunes, or just want to port your mobile app to run on Windows, this is the technology you need in your toolbox.

About the author

Software developer / Tech Lead with more than twenty years of professional software development experience, primarily in Microsoft and Linux environments, the past decade of which has been spent assembling, mentoring, and leading development teams.

More from the author

Section Introduction Transcripts

Course OverviewHi everyone! My name is Mike Callaghan. Welcome to my course, Creating Cross-platform Apps with Ionic and Electron. It's safe to say that software has defined my life. I started programming BASIC and Pascal in high school back in the 80s on HP mini-computers. That experience led to a career developing software professionally, which is now in its third decade. Does it feel as though everyone is doing web development these days? Where I work, every new app is a web app. But sometimes an application has to run on the desktop and interact with the host OS. In such cases, it seems foolish to ignore all of those web development skills. Well, now you don't have to. In this course, we're going to use our web development skills--HTML, JavaScript, and TypeScript--to build a cross-platform desktop app that will run on both Mac OS and Windows. Some of the major topics that we'll cover include building the UI with the Ionic framework showcasing that Ionic isn't just about mobile development anymore, using Electron to host the Ionic code inside of a native application shell, interacting with desktop OS to display icons and menus, loading files, and responding to user menu selections, building installers appropriate for either platform, and creating public releases from those installers, implementing auto-updates so that the users only have to install the app once. By the end of this course, you'll see just how simple it can be to build a real-world, functioning cross-platform app with Electron and Ionic. Before beginning the course, you should be familiar with the basics of web development, using HTML5, JavaScript, TypeScript, and Angular. It will help if you've already done a few of the Ionic tutorials as well. I hope you'll join me on this journey to learn more about cross-platform app development with the Creating Cross-platform Apps with Ionic and Electron course at Pluralsight.

Getting StartedWouldn't it be great if your mobile Ionic apps could also run on Windows and Mac OS desktops? With Electron they can. All the time and effort you spent learning web mobile technology such as HTML, CSS, JavaScript, Angular, and Ionic can be applied to the desktop. Hi, this is Mike Callaghan. In this course, I'll show you how easy it can be to turn web applications into full featured desktop applications. Electron is a powerful and easy-to-learn technology. It's enabled the rapid development of powerhouse apps such as Visual Studio Code, Ionic Creator, and Atom editor, Slack, and countless others. Whether you aspire to create the next iTunes or just want to port your mobile app to run on the desktop, this is one tool you absolutely need in your toolbox. We'll start by quickly previewing what this course is all about. I'll introduce the overall concept of the project I'll be building throughout the course. I'll briefly discuss some of the things you should already know. We'll touch on the hardware and software requirements for following along, and I'll quickly show you how to install the required tools and software. You're probably eager to do something cool and interesting, so let's get started.

Packaging and DeploymentWe made it! We have a working application that lets a user save commonly visited addresses and set them as their current address for emergency services purposes. Sure, there are probably plenty more features we could add, but I think you'll agree we've obtained a minimal viable product. Development can certainly continue, but it's time to get the app into the hands of our users. Hi, this is Mike Callaghan, and in this final module, we're going to look at some of the options available to build, package, and deploy our Electron app. As you know, at its core, Electron app is a native application shell hosting an instance of a Chromium web browser. If you've been following along in the rest of the course, you know that we essentially have an Ionic web app with Electron providing us with a server running Node. js. The trick now is to replicate that on a user's machine. There are a number of ways to do that. The first approach we'll take is building and packaging the app manually. This will provide an understanding of how Electron actually hosts the Ionic app, and it's really not that complicated. Next, we'll take a look at the Electron Packager, an open source command line tool that's designed to do most of the work for you. Another open source tool is Electron Builder described as a complete solution to package and build a ready-for-distribution Electron app with auto-update support out of the box. Once we have something to deploy, we'll briefly touch on getting the application into the hands of the users. Finally, we'll talk about where you might want to go from here, additional features, resources, etc. So let's dive in.