Delve into Ionic and React to build a functional mobile app. Gain confidence and skills in creating and deploying apps for iOS and Android.

data.tar.gz

ionic

ionic-start

ionic-test

The Ionic Framework is an open-source SDK for hybrid mobile app development. It’s known for providing platform-specific UI elements through a library of native components for iOS and Android.

In this course, you will cover all the most important aspects of development with Ionic and React. Throughout, you will work to build a fully functional attendance application which you can add to your portfolio. 

By the end, you will have the confidence and the means to create and deploy your own mobile app for iOS or Android.

Developing Mobile Apps with Ionic and React

# Node Version Manager

Now let’s review another way to install Node on macOS and Linux. My preferred approach to anything relating to Node or npm is to install a tool called the Node Version Manager, or nvm. It is a little more involved but far more flexible in the long run.


What is nvm? It is an elegant set of shell script functions to enable the most flexible use of node imaginable.

The primary purpose of nvm is to enable you to install and switch between multiple versions of node and npm instantly. So, if you happen to have one project that requires Node 8, but another one that requires Node 4, for example, it is easy to keep them both installed, yet still independent from one another. 

To me, the more important features of nvm revolve around root, or administrator access. Many npm package installation instructions you will find on the web instruct you to use the sudo (or super-user do) command to install packages globally. It is possible that you may not have root access to your Mac, making those instructions worthless. There are workarounds, naturally, and they work fine. I used such workarounds for a few years before a colleague showed me nvm. Now I am convinced. 

Once you commit to nvm, there is no reason ever to use sudo. In fact, you do not even need root access to install nvm. Everything gets installed under your own user account.

On macOS, install nvm with this command. It uses Homebrew, which you should now have.

```shell
brew install nvm 
```

If you are on Linux, use this command, as these tools should exist on a stock Linux system. 

```shell
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash 
```

One you have installed nvm, you can use it to install any version of node that you want. In this case, you will install the latest stable version. Simply execute the commands shown here.

| Command  | Description  |
| - | - |
| nvm install 'lts/*'  | Download and install the latest long-term-support, or LTS, version of Node.  |
|node --version   |Determine which version of node is currently in use.   |
|nvm ls   |Determine which versions of node you have installed
   |
| nvm ls-remote  |Determine what versions of node are available to you. Warning: It is a pretty long list.   |
|nvm install v10.15   | Install any available version of node (the v is optional).  |
|nvm use v12.4   |Switch to another version of nvm you have installed (the v is optional)   |

From this point forward, all of node and every npm package you install globally will be placed in the .nvm directory inside of your home directory. You should never have to use sudo to install an npm package globally. You’re welcome.

# Install Ionic

Finally, you need to install Ionic. Fortunately, this step is identical no matter which OS you use. Simply open the terminal of your choice and enter the following command:

```shell
npm install -g @ionic/cli
```

This command will download and install the Ionic Framework tooling globally (that’s what the -g flag does). Once installed, this tooling, known as the Ionic CLI, provides a variety of commands to help you in your Ionic development. Some of the important commands are shown here.

| Command  | Description  |
| - | - |
|ionic info   | Prints project, system, and environment information.  |
|ionic docs   |Opens the Ionic documentation website.   |
|ionic start   |Creates a new project   |
| ionic generate  |Creates new project assets (pages, components, interfaces, services, etc.). Note, this command currently only supports Ionic-Angular projects.   |

Additional instructions on setting up the ionic environment on macOS and Linux are provided in this lesson.

Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Appendix – Installing the Tools

Conclusion

Additional Instructions for macOS and Linux

Node Version Manager