Nick Barreto is the co-founder and technology director of Canelo, the London-based digital publisher. Prior to that, he worked in digital departments of various large publishing companies. His focus is on using technology in innovative ways to produce, distribute, and market books. He's going to be presenting his workshop Beyond Ebooks: Making Apps with HTML, CSS, and Javascript at ebookcraft 2017.
As an ebook developer, I am constantly aware of the limitations of ebook formats and how these can result in ebooks that are simply not fit for their purposes, which depend on the subject matter. This is because print books never really need to justify their own existence — they are physical objects that just 'are.' Digital products, however, need to clearly communicate what they are for, and sometimes, this function is not something that is best served within an ebook.
That's where apps come in, right? But publishers have experimented with mobile applications with little success. One of the reasons for this is that they don't have the in-house expertise to build them.
But what if I told you that, as an ebook developer, you already know most of what you need to build mobile applications? The languages you're already familiar with — HTML, CSS, and JavaScript — are perfectly capable of building applications that will run as native on mobile platforms like iOS and Android.
This is precisely the topic of my talk at ebookcraft 2017. And, if you're interested in being ready to start building your apps following the talk, here's exactly what you'll need to get yourself up and running.
All the tools you'll need
A Mac
Unfortunately, if you want to build iOS applications (and if you want your app to reach the most people), you're going to need a Mac. The only way to deliver applications to the App Store is using a Mac. That said, you could use these frameworks on a different platform—they will work much the same—but I'd argue at that point you're probably better off building a native Android application, rather than using these cross-platform tools.
Xcode
Xcode is going to be, paradoxically, the easiest thing to install on this list and the most difficult. You can download it from the Mac App Store for free at the click of a button. However, it is a huge download and even on a really fast connection it always seems to take forever. That said, installing the Xcode command-line tools is the only way to build iOS versions of your apps.
Android Development Studio
The Xcode equivalent for Android is the Android Development Studio, which you can download for your machine here. I think this is worth taking a look at, much like Xcode, because it'll give you some understanding of how Android apps are built. That said, what we're really after are the Android command-line tools, which you can install from within Android Studio. It's all explained here, but in short you go to Tools > Android > SDK Manager and from there you can select the Android SDK Platform-Tools that you'll need. (They'll probably already be pre-selected for you.)
If you don't want to have the whole integrated development environment installed, you can choose to install only the command-line tools, but I'm not sure that this is any easier. It is worth noting, though, because I have had some server issues when downloading the tools from within Android Studio.
Node.js
Node, and Node's package manager npm, are going to be crucial in managing the next few packages. While it is possible to install it using Homebrew, I wouldn't recommend that route because I've seen some issues crop up for npm packages that have been installed in this way. Instead, use the download from the Node project's main page. This will install Node.js and npm on your machine. Once it's installed, you can test and make sure you have the latest version by opening up the command line and running this command:
sudo npm install npm -g
The next few packages will be installed via npm in the command line.
Cordova
Cordova is really the glue that's going to take your HTML, CSS, and JavaScript code and package it in a way that will run as an app in iOS and Android. It's free and open source, and it has various plugins that will let you access device APIs like the camera, GPS, and other system features. The installation is fairly simple: just open up the npm terminal and run:
npm install -g cordova
You're nearly up and running. But since this isn't something you've done before, it's really helpful to have a framework to work within—some scaffolding with which to build your app.
Ionic
Ionic is a front-end framework for Cordova. It will take care of a lot of the basic scaffolding and design of your app, which you can alter and adjust as much or as little as you like with CSS. You install it much like Cordova, by running this command in npm:
npm install -g cordova ionic
To be able to test your iOS applications in the iOS emulator that comes with XCode you're also going to need to run:
npm install -g ios-deploy
I know it's taken a lot of installs to get here, but with Ionic installed, you can create a simple, empty app by running this command:
ionic start --v2 myApp sidemenu
And you can even run your app in an emulator in your browser to see what it looks like by running:
cd myApp
and then
ionic serve --lab.
Angular.js
This last one isn't something you need to install, but Angular.js is what Ionic uses to make life a lot easier for you when you're coding your app. I'll go through how it works and what you need to know at my ebookcraft workshop. Hopefully I'll see you there!
We hope to see you at ebookcraft 2017, too. Register today and you'll be able to absorb all the learnings in March. And be sure to follow Nick on Twitter and visit the Canelo website.
