Learn Docker, Ember and Ionic

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

While "It works on my computer" might give you an excuse to close a bug ticket in the backlog, it doesn't really work when you're working on a team.

You need to ensure that your application can run regardless of what hardware your teammates are running or libraries they have installed.

Docker solves this problem by collecting everything your application needs to run into a container.

Containers aren't just for source code. They can hold configuration, scripts, and even their own filesystem. It's similar to a Virtual Machine, without having to bring a full operating system along for the ride.

Because containers run in isolation, there is some configuration involved to allow for files to be saved and containers to communicate with one another.

One of the most useful ways to get your head around Docker is to see it in action.

Follow along with Joel Lord as he works through the process of preparing an application to run in separate containers for the frontend and backend of an application that searches for gifs and re-encodes them with a caption supplied by the user.

You'll see how to configure the separate containers to communicate with one another, work with environment variables, and persist data to your local machine. Along the way, you'll pick up some tips on useful commands and bash scripting. Finally, you'll learn how to use Docker Compose to make it easy to run multiple containers simultaneously.


Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

Containerize Full-Stack JavaScript Applications with Docker

Docker Fundamentals

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment. 

Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Building apps with Ionic 2

In this course we will take a simple Node.js app that connects to a MongoDB database and uses an Express web server, and learn how to setup a full software development deployment process as well as how to properly “Dockerize” the app. 

We’ll step through setting up proper version control techniques, managing configuring within the environment, setting up proper build/deploy/run processes, and all with abiding by Docker best practices. We’ll also make sure our deployment is setup for scale, and have consistent development practices in place for reliable app deployments.

Build a Twelve-Factor Node.js App with Docker

Docker containers are stateless by default. In order to persist filesystem changes, you must use docker volumes. In this lesson, we will go over how to copy files over to Docker containers, how to create volumes and copy data to them, and also how to mount remote folders for persisting updates.

Create Docker Volumes for Persistent Storage

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

Use Sliding Gestures to Reorder an Ionic 2 List

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run `ionic g --list` in your terminal. 

Use the Ionic CLI to Generate Angular 2 Mobile Components

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

Build your first page component with Ionic 2

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead. 

Create a Native Mobile Side Menu Layout in Ionic 2

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the [documentation](http://ionicframework.com/docs/api/navigation/NavController/)

Use Ionic 2 NavController to Manipulate App History

In this lesson we will cover proper version tagging when building Docker images, creating a docker-compose.yml file for proper release management, and running the tagged release by using Docker Compose to launch app resources as Docker containers.

Build, Release and Run Containers with Docker Compose

A JavaScript framework for creating ambitious web applications.

ember

In this lesson we will create an `updateContent` method that sets the value of our `content` property to the current epoch timestamp. We need to call `toString()` on the `Date.now()` method in order to make TypeScript happy.

```
updateContent() {
  this.content = Date.now().toString()
}
```

We create a constructor that takes the options parameter, call `super(options)` and call into our `this.updateContent()` method.

```
constructor(options) {
  super(options)
  this.updateContent()
}
```

When we refresh our page we can see that the value of `content` is set to the epoch timestamp. 

To make the content really dynamic we use `setInterval()` to call into `updateContent` each second: `setInterval(() => this.updateContent(), 1000)`.

When we save our file we see that our content does not get updated anymore and when we check the console we see that we get an error telling us that: The 'content' property on the my-component component was changed after it had been rendered. The error also informs us that we should Use the @tracked decorator to mark this as a tracked property.

We add the @tracked decorator to our property, we import tracked from @glimmer/component and we refresh the page. We verify that `content` gets updated each second.

We change our `updateContent` to add our the timestamp to the array. When we use `this.items.push(this.content)` to achieve this we see that the list does not get updated. This is because the `@tracked` decorator only tracks the re-assignment of properties.

The way to get this working is by re-assigning our `items` array inside `updateContent`. We assign a new array, de-structure the current items array and add the new content.

```
this.items = [...this.items, this.content]
```



Use dynamic data in a GlimmerJS component

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.


[Infinite Scroll](http://ionicframework.com/docs/2.3.0/api/components/infinite-scroll/InfiniteScroll/) and [Refresher](http://ionicframework.com/docs/2.3.0/api/components/refresher/Refresher/) can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

Lazy Load Data with Ionic 2

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController. 

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.  

Navigate Between Mobile Screens  with the Ionic 2 NavController

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s `--lab` flag to see what your app will look like before it’s even deployed to a device.


Preview an Angular 2 Mobile  App with Ionic Lab

NGINX is a free, open-source, high-performance HTTP server and reverse proxy, as well as an IMAP/POP3 proxy server. 

nginx

Learn about the concepts of managing data within Docker volumes, including all of the commands to create and manage volumes. We'll demonstrate how to mount a Docker volume to one or many containers by creating and mounting a volume to an Nginx proxy, and then verify the output with curl. You'll also see how changes to files within volumes of one container propagate to other containers with the same volume mounted, and learn various commands to inspect Docker volumes.

Manage Data within Docker Volumes

In this lesson we will use the ember cli to generate a new component. Running `ember g glimmer-component my-component` generates the template and component class. We change the content of our component and add it to the main template in order to show it on the page.

Create a new GlimmerJS component

In this lesson we will add a variable called `content` to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handlebars expression for expressions, `{ {content }}`. 

After this we create a new class variable called `items`, initialize it as an array with strings. To display this list in our template we add a `<ul></ul>` and inside this unordered list we use the handlebars `each` helper to display the list items.

And inside our each statement we will print a `<li>` tag and render `{{ item}}` inside it.

```
<ul>
  {{#each items key="@index" as |item| }}
    <li>{{item}}</li> 
  {{/each}}
</ul>
```



Use template variables in a GlimmerJS component

In this lesson we will cover how to build your own custom Docker image from scratch. We'll walk through the process of starting a Debian container, installing packages and working through configuration issues, as well as a strategy for building a Dockerfile.

Build Your Own Custom Docker Image

In this lesson, we will look at `docker container prune` to remove old docker containers. We can also use `docker system prune` to clean up any containers, images, volumes, and networks all in one command.

Search

Search Results