Learn Angular-material, Nativescript and Serverless

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. 

In this course, we will learn how to code directly against these native api’s with NativeScript for Angular. Many libraries are written and published in these languages. With NativeScript you are no longer limited to just JavaScript based libs, but have direct access to these api’s right from JavaScript/TypeScript. Let’s look at how to include these native libraries internally to your project as well as build public plugins to share with the community. 

We will cover some considerations with Objective C and Swift based libraries as well as Java/Android libraries. You can think of CocoaPod, Gradle, and Android Arsenal like npm for native libs. iOS libraries can be found via CocoaPods, Android libraries can be found via Gradle or Android Arsenal. 

Let’s also cover how to write custom view components based on native libs since there are considerations for both iOS and Android. Lastly we will learn how to best handle cases where a plugin/library only supports 1 platform.

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

nativescript

Use Objective C, Swift and Java api’s in NativeScript for Angular iOS and Android apps 

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

In this course, we will learn how to work with NativeScript for Angular. We will start with the basic fundamentals of getting setup to run our app in the iOS Simulator in addition to an Android emulator using GenyMotion (https://www.genymotion.com/). Understand how to build your native mobile views with NativeScript XML and how to style them with CSS. Using the NativeScript for Angular starter template provides a nice setup out of the box including the core theme which provides handy CSS classes to work with speeding up view building. For page navigation, we will learn how to use the Angular Router to configure a flexible routing setup for our app. The ListView component is a powerful and highly performant native control for handling your lists powered by the UITableView on iOS and native ListView widget on Android. We’ll highlight how you can use RxJS Observables with our native views. Let's also take a look at integrating npm plugins to enrich the UI component library. Lastly, a round up of styling how-to's including integrating SASS for custom app theme creation as well as creating a live app theme switcher.

This Angular course assumes a solid understanding of the fundamentals.
We have Intermediary Angular courses including topics on [Dependency Injection](https://egghead.io/courses/angular-dependency-injection-di-explained), [Components, Directives](https://egghead.io/courses/building-angular-components), [Forms](https://egghead.io/courses/intro-to-angular-forms), [Router](https://egghead.io/courses/intro-to-angular-router), and [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)

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

Create Native Mobile Apps with NativeScript for Angular

Angular Material is an Angular-native, UI component framework from Google. It is a reference implementation of Google's Material Design and provides >30 UI components and services essential for mobile and desktop AngularJS applications.

In this course, we will quickly build a real-work application Angular UI application, take a tour of Angular Material, and learn how ngMaterial can be used in your projects.

*presented by Thomas Burleson and Aaron Frost*

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

Introduction to AngularJS Material

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

Translate common Java/Android APIs into NativeScript for Angular Android apps

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

The Angular Material Layout API wraps the flexbox CSS features with an amazingly easy, powerful HTML markup API. The Layout API hides the complexities of the CSS, is intuitive to use, and eliminates the need for developers to become flexbox experts to implement modern page layouts. 

In this lesson we will learn how to use the Angular Material Container components and the Layout API to implement the layouts specified in design wireframe.

> This course has been created by Thomas Burleson and Aaron Frost. 

Angular Material: Containers with the Layout API

Themes convey meaning through color, tones, and contrasts. And the theme color palettes, alphas, and shadows deliver a consistent tone to your application and a unified feel for all Angular Material UI components. Theming allows developers to change the intention and meaning of the application by changing the colors and shadows. 

Accessibility is a huge - often overlooked - feature in modern web applications. Angular Material components all implement ARIA features whenever possible. And for usage scenarios where the ARIA attributes are not explicitly provided and cannot be inferred, then Angular Material will provide details console warnings alerting the developer.

Let’s use the Angular Material Theming service to change the background, primary, accent, and warning colors used within the entire application. These will be configured at startup using the $mdThemeProvider.  

Let’s also resolve the two ARIA warnings shown in console. These originate from icon buttons where the ARIA label cannot be inferred. So let’s add a static aria-label and a dynamic, interpolated aria-label to those buttons.

> This course presented by Thomas Burleson and Aaron Frost

Angular Material: Theming and ARIA

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

Learn how to install Angular Material with `npm install`  and load the required libraries and stylesheets into your blank web page.

> This course has been created by Thomas Burleson and Aaron Frost

Angular Material: Installing with NPM

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

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the `@angular/cdk` to update sidenav settings based on the users screen size.

Use the Angular Material Sidenav Component

We will install the NativeScript CLI and use it to generate a project.


Set up a native mobile app using the NativeScript CLI

We can run our app in the iOS Simulator using the `tns` command line utilities. Also learn how to target specific simulator devices and versions. You must have a Mac to develop apps for iOS. Ensure you have XCode installed via the Mac App Store, and ensure you have opened it at least once to agree to the terms and install the additional components it may prompt about.

Preview NativeScript apps in the iOS Simulator

We can run our app in an Android emulator using GenyMotion, which provides flexible options and great performance. Let’s learn how to set one up and run our app in it. First install the Android SDK by installing Android Studio here: https://developer.android.com/studio/index.html. Then register for a GenyMotion account here: https://www.genymotion.com/account/create/. Once created and logged in, you will see a ‘Download’ button in the header where you can download the free tools.

Preview NativeScript Apps in the GenyMotion Android emulator

This is the fundamental building block for native views. Let’s understand the syntax and some of the options available to us to construct our views starting with Layout Containers. StackLayout and GridLayout containers are the most commonly used. Also learn about helpful snippets for a few popular IDE’s.

Create native mobile views using NativeScript XML

Learn how to use the `nsRouterLinkActive` directive with options to control styling when a route is active in [NativeScript](/q/nativescript).

Add styles to active routes using nsRouterLinkActive

Learn how to use the `ActionBar` component to provide a title for your mobile view.

Create a page title using ActionBar

The NativeScript ListView component uses the native platform list controls under the hood for superior performance and native virtual scrolling (ListView widget on Android and UITableView on iOS).

Search

Search Results