The overarching goal of this book is to give you the tools and know-how needed to efficiently construct modern, cross-platform solutions for your users. In this chapter, we will focus on the tools themselves, showing you how to bootstrap your development environment to tackle the challenges that we have in store for you in the remainder of the book. We will also give you a brief introduction to each tool in order to give you an idea about why they fit into your toolchain. If any such detail seems unclear at this point, do not worry. We will delve into everything you need to know about each tool in the relevant parts of the book.
After reading this chapter, you will know how to install, configure, and use the fundamental software components that we will use throughout this book. You will also have a good understanding of why these tools are appropriate for the development of modern apps.
Modern apps have several requirements, which cannot be provided by the app itself, such as central data storage, communication routing, and user management. In order to provide such services, apps rely on an external software component known as the backend. The backend will be executed on one or more remote servers, listen to network requests from the devices that run the app, and provide them with the services that requests require.
The backend that we will use in this book is Node.js, a powerful but strange beast in its category. Node.js, at the time of writing this book, is the only major backend that is written almost entirely in JavaScript, which in reality is a frontend scripting language. The creators of Node.js wanted a backend that could be integrated with the apps written in JavaScript as seamlessly as possible, and you cannot get much closer to that than Node.js. Beyond this, Node.js is known for being both reliable and high-performing.
In terms of architecture, Node.js is highly modularized and designed from the ground up to be extendable through plugins or packages. Node.js comes with its own package management system, Node Package Manager (NPM), through which you can easily install, remove, and manage packages for your project. You will see how to use NPM in order to install other necessary components later in this chapter.
Node.js is delivered as a set of JavaScript libraries, executing on a C/C++ runtime built around the Google V8 JavaScript Engine. The two come bundled together for most major operating systems (OS), and we will look at the specifics of installing it in the following sections.
Note
Google V8 JavaScript Engine is the same JavaScript engine that is used in the Chrome browser, which is built for speed and efficiency.
For Windows, there is a dedicated MSI wizard to install Node.js, which can be downloaded from the project's official website. To do so, go to the main page, navigate to Downloads, and then select Windows Installer. After it has downloaded, run the MSI wizard, follow the steps to select the installation options, and conclude the install. Keep in mind that you will need to restart your system in order to make the changes effective.
Most major Linux distributions provide convenient installs of Node.js through their own package management systems. However, it is important to keep in mind that for many of them, Node Package Manager (NPM) will not come bundled with the main Node.js package. Rather, it is provided as a separate package. We will show how to install both in the following section.
Open a terminal and issue sudo apt-get update to make sure that you have the latest package listings. After this, issue apt-get install nodejsnpm in order to install both Node.js and NPM in one swoop.
On Fedora 18 or later, open a terminal and issue sudo yum install nodejsnpm. The system will do the full setup for you.
If you are running RHEL or CentOS, you need to enable the optional EPEL repository. This can be done in conjunction with the install process, so that you do not need to do it again while upgrading the repository, by issuing the sudo yum install nodejsnpm --enablerepo=epel command.
Now that we have finished the install, let's do a sanity check and make sure that everything works as expected. To do so, we can use the Node.js shell, which is an interactive runtime environment for the execution of JavaScript code. To open it, first open a terminal, and then issue the following to it:
node
This will start the interpreter, which will appear as a shell, with the input line starting with the > sign. Once you are in it, type the following:
console.log("Hello world!);
Then press Enter. The Hello world! phrase should appear on the next line. Congratulations, your system is now set up for the running of Node.js!
For OS X, you can find a ready-to-install PKG file by going to www.nodejs.org, navigating to Downloads, and selecting the Mac OS X Installer option. Otherwise, you can click on Install, and your package file will automatically be downloaded:
Once you have downloaded the file, run it and follow the instructions on the screen. It is recommended that you keep all the default settings offered unless there are compelling reasons for you to change something with regard to your specific machine.
After the install finishes, open a terminal and start the Node.js shell by issuing the following command:
node
This will start the interactive node shell, where you can execute JavaScript code. To make sure that everything works, try issuing the following command to the interpreter:
console.log("hello world!");
After pressing the Enter key, the hello world! phrase will appear on your screen. Congratulations, Node.js is all set up and good to go!
After installing Node.js on your Mac, proceed to open your command-line application and input the following command:
$ sudonpm install -g ionic
After inputting this command, you will be prompted to input your password as shown in the following screenshot:
If you have already set up the permissions for npm on OS X, you can install Ionic with the following command:
$ npm install -g ionic
The preceding command line should result in the following output:
Installing Cordova on OS X is very similar to installing Ionic. You can run the following command to install Cordova:
$ sudonpm install -g cordova
Once you have installed Node.js, install Ionic on your Windows machine. The rest should be straightforward.
Open the command prompt and check whether you have npm installed by running the following command:
npm
Once you have ensured that you have successfully installed npm, you can go ahead and run the following command:
npm install -g ionic
This step should result in an output, which shows that you have successfully installed Ionic.
In order to install Cordova, you can also use npm and run the following command:
npm install -g cordova
Once you receive a successful output, you can go ahead and start setting up the platform dependencies.
Note
An experimental setup for Windows:
In Windows, you will have the opportunity to set up a Vagrant package, which is a one-stop-shop for the installation of Ionic on your Windows machine. This is accessible at https://github.com/driftyco/ionic- box.
To set up the platform dependencies, you need to install Java, which is explained in the following section.
If you do not have Java installed or if your version is below 6.0, install the Java JDK by heading over to http://j.mp/javadevkit-download, a customized and shortened link, and choosing the version that applies to you.
The main recommendation for these projects is that you install a version of JDK 6.0 or higher.
Select the JDK for your OS. On an Intel-based Mac, you can use the following useful table to check whether your Mac is a 32- or 64-bit OS.
You can check for Processor Name by clicking on the Apple logo in the top-left corner of your screen, followed by About my Mac:
|
Processor Name |
32- or 64-bit |
|---|---|
|
Intel Core Solo |
32 bit |
|
Intel Core Duo |
32 bit |
|
Intel Core 2 Duo |
64 bit |
|
Intel Quad-Core Xeon |
64 bit |
|
Dual-Core Intel Xeon |
64 bit |
|
Quad-Core Intel Xeon |
64 bit |
|
Core i3 |
64 bit |
|
Core i5 |
64 bit |
|
Core i7 |
64 bit |
In the case of Windows, if you have a machine that was purchased in the last few years, you should go for the x64 (64-bit) version.
To set up Android Studio for Android, Mac, and Windows, follow these steps:
Go to the Android Developers site by visiting http://developer.android.com.
Click on Android Studio, where you will be directed to the landing page. Your operating system's version will be detected automatically:
Accept the terms and conditions of the Software Use Agreement and click on Download:
For Mac, double-click on the downloaded file, follow the prompts, and then drag the Android Studio icon into your Applications folder:
For Windows, open the downloaded file, and then go through the Android Studio Setup Wizard to complete the install.
The process of setting up the Android Software Development Kit (SDK) has improved vastly with the introduction of Android Studio, as a number of software packages come pre-installed with the Android Studio install package. As a part of the preparation for getting started with our Android projects, it will be very helpful to understand how one can install (or even uninstall) SDKs within Android Studio.
There are a number of ways of accessing the SDK Manager. This can be done from the main toolbar of Android Studio:
Otherwise, it can be accessed from the Start menu by navigating to Configure—SDK Manager:
This is what the SDK Manager looks like. If you need to install a package, you need to check the mark of that particular package, click on Install packages, and then finally accept the licenses:
The following are the three main steps that need to be taken in order to enable your Android Device for development:
Enable Developer options on your specific Android device
Enable USB debugging
Provide your computer with the necessary trust credentials with the installed IDE via secure USB debugging. (devices with Android 4.4.2)
Depending on your device, this might vary slightly, but as from Android 4.2 and higher, the Developer options screen is hidden by default.
To enable it, navigate to Settings | About phone and click on the Build number seven times. You will find Developer options enabled when you return to the previous screen.
USB debugging enables the IDE to communicate with the device via the USB port. This can be activated after enabling Developer options and is done by checking the USB debugging using the following this path:
Settings—Developer Options—Debugging—USB debugging
You have to accept the RSA key on your phone or tablet before anything can flow between the device via the Android Debug Bridge (ADB). This is done by connecting the device to the computer via USB, which triggers a notification entitled Enable USB Debugging?
Check off Always allow from this Computer and click on OK.
Using Ionic and Cordova to build an Android app might require a modification to the PATH environment on Windows. This can be done with the following steps:
Right-click on My Computer and then click on Properties.
Click on Advanced System Settings in the column to the left.
In the resulting dialog box, select Environment Variables.
Select the PATH variable and click on Edit.
Append the following to the PATH based on where you installed the SDK:
;C:\Development\adt-bundle\sdk\platform-tools;C:\Deve lopment\adt-bundle\sdk\tools
Developing for iOS requires you to develop from a machine that runs on Mac OS X. At this point in time, it's not possible to develop iOS applications from Windows. In the following steps, we will outline how to get started with developing Ionic apps for iOS.
The following are two ways that can be used to download Xcode:
From the App Store, search for Xcode in the App Store application
It is available at Apple Developer Downloads, which requires you to register as an Apple Developer.
Command-line tools are integrated within Xcode. Previously, this was installed separately. Once you've downloaded and installed Xcode, you are prepared to handle iOS projects from a machine that has Mac OS X enabled.
In order to store data related to your app and users, your server will need a database—a piece of software that is dedicated solely to data storage and retrieval.
Databases come in many variants. In this book, our focus is NoSQL databases, which are so named because they don't use the traditional table-oriented SQL data access architecture that is used by the more well-known relational databases, such as Oracle, MySQL, and PostgreSQL. NoSQL databases are very novel in their design and features and excellent for the tackling of the challenges that one may face in modern app development.
The NoSQL database that we will use throughout this book is MongoDB (it is often abbreviated as MDB or simply Mongo). MongoDB is a document-oriented database that which stores data in documents, which are data structures that are almost identical to the standard JSON format.
Let's have a look at how to install and get MongoDB running. If you have used a more traditional DB system, you may be surprised at how easy it is.
MongoDB comes in the form of a package for most major OS and versions.
MongoDB ships with a complete MSI for installation on Windows systems. To download it, go to the project's official website, www.mongodb.org, navigate to Downloads, and select the Windows tab. You will be offered the following three choices to download:
Windows 64-bit R2+: Use this if you are running Windows Server 2008, Windows 7 64-bit, or a newer version of Windows
Windows 32-bit: Use this if you have a 32-bit Windows installation that is newer than Windows Vista
Windows 64-bit legacy: Use this if you are using Windows Vista 64-bit, Windows Server 2003, or Windows Server 2008.
After you have downloaded the MSI, run it with administrator privileges in order to perform the installation. The installation wizard will give you a default location where MongoDB will be installed—C:/mongodb/. You can change this if you desire, but it is recommended that you keep it as we will assume that this is the location where MongoDB resides for the remainder of the book.
After the installation has finished, the next step is to configure a data directory where MongoDB can store the data that we will feed it with. The default location for this directory is /data/db. We will need to make sure that this directory exists and is writeable before we start our MongoDB instance for the first time. So, fire up the command prompt with administrator privileges and issue the md/data/dbcommand. After doing so, we are good to start the database server itself. To do so, stay in the command prompt and issue the following command:
C:/mongodb/bin/mongodb.exe
You should receive a confirmation that MongoDB is now running and listening for connections. All is set!
On Linux, you will find MongoDB ready-packaged on most major distributions. However, we strongly recommend that you use the project's own repositories in order to make sure that you always have access to the most current security and stability updates.
First off, you will need to enable the official MongoDB repository. To do so, open a terminal and first import the project's public GNU Privacy Guard (GPG) key as follows:
sudo apt-key adv --keyserverhkp://keyserver.ubuntu.com:80 --recv7F0CEB10
Once this is done, create a listing for the repository itself by issuing the following command:
echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
Your repository listing is now active. Let's make Advanced Package Tool (APT) aware of it in order to install MongoDB, as follows:
sudo apt-get update
Finally, issue the following command to install MongoDB:
sudo apt-get install mongodb-org
Our first order of business here is to enable the official MongoDB repository. To do so, first make sure that you have the nano text editor installed by opening a terminal and issuing the following command:
sudo yum install nano
After this is done, add the repository by issuing the following command:
sudonano /etc/yum.repos.d/mongodb.repo
Nano will open a new, blank text file. Copy and paste the following into the file:
[mongodb] name=MongoDB Repository baseurl=http://downloads-distro.mongodb.org/repo/redhat/os/x86_64/ gpgcheck=0 enabled=1
Save and close the file by pressing Ctrl+O, followed by the Enter key. This is followed by Ctrl+X.
Finally, carry out the installation by issuing the following command:
sudo yum install mongodb-org
After the installation of MongoDB, you will need to start MongoDB as a service in order to get it running. To do so (on all the distros that were previously mentioned), open a terminal and run the following command:
sudo service mongodb start
It is important that if you have SELinux running, you must make sure that it allows MongoDB to access its default port. To do so, issue the following before you issue the preceding command:
sudosemanage port -a -t mongod_port_t -p tcp 27017
The easiest way to both install and stay up to date with MongoDB on OS X is by using the Homebrew package manager. Even if we just use it to install MongoDB here, you will most likely find it useful later for the installation of other software packages that you may need for your own projects after you finish this book.
Installing Homebrew is simple; just open a terminal and issue the following command:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
When this finishes, make sure that the Homebrew package database is up to date, as follows:
brew update
Finally, install MongoDB by simply issuing the following command:
brew install mongodb
When the install has finished, we will need to define a data directory in order to give a location for MongoDB to store its data. By default, this directory will be at /data/db. So, unless you specify something else, you will need to make sure that this directory exists and is both writeable and readable by the user running your MongoDB instance. For example, if the user running MongoDB on your system is john, you will have to issue the following commands:
sudomkdir -p /data/db sudochmod 0755 /data/dbsudochownmongod:mongod /data/db
Now that this is done, it is time to start up MongoDB. To do so, make sure that you are logged in as john, open a terminal, and simply issue the following command:
mongodb
That's it! You should receive a notification that MongoDB has started and is listening for a connection. Your instance is ready to go!
In order to read and write from the MongoDB instance, we will first need to connect to it. In fact, MongoDB acts as a server in its own right. It exposes its functionality via a network port on which clients can then connect either through the local machine, or even over the Internet.
Note
Since this functionality is disabled by default due to it being a shoddy security practice, it will require a special configuration of the operating system that MongoDB is running on. We will not discuss this functionality as it falls outside the scope of this book, but we will refer to the MongoDB documentation for several helpful examples of how to achieve it for a variety of OS.
To connect to a MongoDB instance, you will need at least the following information:
The IP address of the instance: If you are accessing an instance on your local machine, this will be local host by default.
The port on which MongoDB is listening: Unless you configure a custom value, this will always default to port 27017.
The database that you are trying to connect to: Don't confuse this with the MongoDB instance itself. Each MongoDB instance can contain any number of databases, with each belonging to different users. The instance simply manages access to them.
Alternatively, you may also need the following:
A username and its associated password to grant you access to the instance and any databases therein that you are authorized to interact with.
A very easy way to try out this connectivity yourself and verify that MongoDB works as expected is by using the MongoDB shell, a tool that comes installed with MongoDB itself using the methods that we have described previously. How you access the shell varies depending on your OS. I will show each method in the following section and then give an example of how to use the shell itself since this will be the same on all platforms.
First, make sure that MongoDB is running by following the process that was outlined previously. After this, issue the following command in your command prompt:
C:\mongodb\bin\mongo.exe
First, make sure that MongoDB is running. Then, open a terminal and issue the following command:
mongo
Now that our shell is running, let's verify that everything works by creating a database and adding some data to it.
To create a database, issue the following command to the shell:
use Fruits
This will create a database named Fruits, to which we can immediately start adding data. (What, you were expecting more overhead? Not in MongoDB!)
We will not add a collection to our database. A collection is simply a basket of data entries, which are grouped based on some logical characteristic. For example, let's suppose that we want a collection of chewy fruits. We then issue the following command:
db.createCollection("Chewy")
The shell should respond with the { "ok" : 1 } JSON response that tells us that everything went well. Now, let's add some chewy fruits to our collection, as follows:
db.Chewy.insert({"name" : "pear"}); db.Chewy.insert({"name" : "apple"});
Even if the naming makes it intuitively clear what is going on in the preceding code, don't worry if you do not understand all the details yet. We will get to this in due course.
Finally, let's make MongoDB show us the chewy fruits that we stored. Issue the following command:
db.Chewy.find();
The shell will respond with something like the following:
{ "_id" : ObjectId("54eb3e6043adbad374577df9"), "name" : "apple" } { "_id" : ObjectId("54eb4036cdc928dc6a32f686"), "name" : "pear" }
The _id numbers will be different on your system, but you will find that the names are the same. All the fruits are where we want them to be.
Congratulations, you now have a fully working MongoDB setup ready for action!
By now, you may have perhaps noted the red thread running through all the components that we picked for our toolchain; they are all based on JavaScript. This gives us the ability to write all our logic from top to bottom in one single language rather than using different ones for different components (Objective-C or Java for the client, PHP for the server, SQL for the database, or some other unholy combination). As you will see throughout the remainder of the book, this will make it much easier for us to write concise, focused, and comprehensible code.
Once you go through all the preceding steps, I can safely assume that you have the necessary toolkit and you are ready to tackle the upcoming chapters, where we will have an opportunity to create our very first Ionic app and make it work on both Android and iOS devices.
Once you finish setting up your workspace, I recommend that you spend some time reading the Apache Cordova documentation, especially the documentation related to the different platform dependencies.
In the next chapter, we will perform further preparations and configure persistence with MongoDB as part of our preparations for our very own backend for our Ionic app.
