Learn Ionic, Leaflet and Mocha

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build Maps with React Leaflet

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

Theming Ionic applications is a topic that is often left undiscussed. Ionic has a robust API to theme your application so you don't have to settle with the default styles.

This course will show you how Ionic’s theming system works so that your application can have its unique look. It will explore the built-in utilities, which you can leverage directly.

You'll be introduced to the built-in CSS utilities that Ionic provides, Ionics grid system, and Ionic configuration settings to create a custom look and feel to your App.

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Style and Theme Ionic v3 Applications

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

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS application into an Ionic mobile application.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Building an Angular 1.x Ionic Application

Welcome to the *Ionic Quickstart* series where you will learn how to get started with Ionic from the ground up. We will begin with how to install the required dependencies such as Node.js, Android SDKs and even GenyMotion to installing and running Ionic. By the time you finish, you will know how to create, edit and run an Ionic application. If you are on Windows or Mac and not sure where to start with hybrid mobile development, this is a great place to start!

Ionic Quickstart for Windows and Mac

In this lesson, we install the Android Software Development Kit (SDK) and the necessary Android API (Application Interface). This is the code base that allows us to run the Android platform on our PC. We also add a couple environment variables and update our PATH environment variable.

Install Android SDK for Ionic

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

Build and Run an Ionic App from Scratch

In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:
- **ion-side-menus** - A container element for side menu(s) and the main visible content.
- **ion-side-menu-content** - A container for the main visible content, sibling to one or more `ionSideMenu` directives.
- **ion-side-menu** - A container for a side menu, sibling to an `ionSideMenuContent` directive.
- **ion-nav-view** - Used to render templates in your application. Each template 
is part of a state. States are usually mapped to a url, and are defined programatically 
using angular-ui-router (see their docs for reference).
- **ion-view** - A container for view content and any navigational and header bar information. Used as a child of `ionNavView`.
- **ion-nav-bar** - If we have an `ionNavView` directive, we can also create an 
`ionNavBar`, which will create a topbar that updates as the application state changes.
- **ion-nav-buttons** - Use nav buttons to set the buttons on your `ionNavBar` 
from within an `ionView`.
- **ion-content**- Provides an easy to use content area that can be configured 
to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
- **ion-list** - The List is a widely used interface element in almost any mobile app, and can include 
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- **ion-item** - Used to create items inside of an `ionList`.

Build a Sidebar Layout with Ionic

In this lesson, we are going to dig into Ionic lists and make use of some awesome list features that Ionic gives us for free. We are going to learn how to use the following Ionic directives:

- **ion-nav-buttons** - Use nav buttons to set the buttons on your `ionNavBar`.
- **ion-list** - The List is a widely used interface element in almost any mobile app, and can include 
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- **ion-item**- Used to create items inside of an `ionList`.
- **ion-delete-button** - A child of `ionItem`, this element allows a developer to show/hide a delete button within an `ionItem` with ease.
- **ion-reorder-button** - A child of `ionItem`, this element allows a developer to reorder an `ionItem` within a list easily.

Build a Powerful List with Ionic

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

Convert a UI Route into an Angular Directive

In this lesson, we quickly demonstrate how to edit our code and re-run our app. The pertinent piece of the puzzle is knowing where the code for the HTML/Javascript/CSS is. Once we know where that is, editing it and running the app is a cinch!

Edit Your Ionic Application Code

In this lesson, we install Genymotion, which allows us to create virtual Android devices on our PC.  We could use the Android emulators provided by the Android SDK, but on Windows this proves to be problematic. Most Android developers that operate on a PC opt for using Genymotion, not only because it’s faster, but because it provides easy access to testing different native functions of Android devices, such as the camera, microphone, accelerometer, etc. 

Install the Genymotion Android Emulator for Ionic

In this lesson, we install Ionic. With just a couple command prompt commands, we gain access to the powerful Ionic command-line utility, which in turn installs Apache Cordova to aid in connecting our web apps to our mobile device’s native functionality. After this lesson, we will be able to create and run and app.

Ionic Quickstart for Windows: Installing Ionic

In this lesson, we are going to demonstrate how easy it is to copy existing Angular code into an Ionic app. It is literally as simple as removing unnecessary code from the Ionic app and pasting in the guts of our Angular application. Along the way, we will update some dependencies and discover a gotcha for including assets from a CDN.

Convert a Web Application into an Ionic App

In this lesson, we are going to build an Ionic app for the iOS platform, and then emulate iOS on our computer. We are going to cover some important command-line options when emulating an Ionic application. We will then see how these options play a critical role in debugging our applications.

Build, Emulate, and Debug an Ionic App

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

- item
- item

Device Interaction in an Ionic App with Cordova Plugins

In this lesson, we learn how to build modals in Ionic. We use the `ion-modal-view` directive to wrap our “create” and “edit” forms with modal goodness, as well as use the `ion-header-bar` directive to put a nice bar at the top of our forms. Finally, we use the `$ionicModal` service to give life to our modals by integrating them with our controllers.

Create Modals with Ionic

In this lesson, we learn how to run an app on our Mac. We are going to download Xcode, which includes an iOS simulator. Once we have Xcode, it is a matter of a couple commands in our terminal to run and view our app on our mac.

Build and Run an iOS App on a Mac

In this lesson, we are going to take an Ionic App and upload it to our Ionic account. Then we are going to download the app (via another app called Ionic View) and view it on our phone.

Upload and Share an Ionic App

In this lesson, we learn how to run an app on our PC using Genymotion. Genymotion provides a simple UI that enables us to create and run virtual devices with a couple clicks. Once our virtual device is running, it is just a matter of a couple commands in the command prompt and we can view and test our app on our PC.

Topics

Instructors

Content Type

Free or Pro