Learn Cycle, Ionic and Ios

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

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Optimize User Experience for Mobile Devices and Browsers

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

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

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

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

Objective C is a very interesting programming language which offers a lot of power as well as interesting paradigms. Let’s look at some Objective C api’s and how they translate to NativeScript. In particular, let’s learn how to wire up iOS delegates using [Filestack's FSPickerDelegate](https://github.com/filestack/FSPicker#fspickerdelegate) as an example. We will also look at handling WeakRef’s and iterating an NSArray.

Use Objective C Delegates in NativeScript for Angular iOS apps

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

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

Develop a consistent plugin api across your Android and iOS NativeScript app

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Overview of Cycle.js

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to [install tns-platform-declarations](https://www.npmjs.com/package/tns-platform-declarations) to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

Prepare for native iOS and Android api intellisense with NativeScript

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

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

In this lesson we'll explore debugging our React Native application in an actual iOS device.

Topics

Instructors

Content Type

Free or Pro