Learn Android, Angularfire and Axios

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

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

nativescript

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

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

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

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the [Google I/O 2016 clock](https://github.com/lypeer/GoogleClock). Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the [Android app manifest file](https://developer.android.com/guide/topics/manifest/manifest-intro.html).

Build a custom NativeScript view component for Android

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.


Writing Platform-Specific Components for iOS and Android in React Native

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

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Get Started with Firebase and AngularFire

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Let's see how to use the `vue-axios` NPM package to make a request to an API, and make use of the data returned.

Make a request to an API with Axios in Vue

In this lesson, we will start with a list of content from a React Native FlatList that we will then transform into a three-per-row grid.

Display Contents of a React Native FlatList as a Grid

In this lesson, you will learn how to use the `SafeAreaView` component to avoid the sensor cluster (the notch) and home activity indicator on the iPhone X.

Use the SafeAreaView Component in React Native for iPhone X Compatibility

Cascading Style Sheets bring order and beauty to our applications.

We can emulate different operating systems, browsers, and devices within a desktop operating system. We’re going to discuss iOS and Android options we have available to us, and how to debug on those devices.

Use Remote Sources to Debug a Web App on an Emulator, Simulator, or Physical Device

First, install redux with: `npm install --save redux` and install react-redux with: `npm install --save react-redux`

In the top level of your component tree, import `createStore` from redux, and use it to create a new store with a simple reducer:

`import { createStore } from 'redux'`

`const rootReducer = (state = {}, action) => {
  return state
}`

`const store = createStore(rootReducer)`

Also import `Provider` from react-redux:

`import { Provider } from 'react-redux'`

And then wrap your app's components with a `Provider` component, and pass in your `store` as a prop:

`<Provider store={store}>`
  `...`
`</Provider>`

Then, you can connect any sub components with the `connect` function, by first importing it:

`import { connect } from 'react-redux'`

And then calling it with a `mapStateToProps` or `mapDispatchToProps` argument, and then passing in the unconnected component:

`const ConnectedLoginGate = connect(state => ({
  username: state.auth.username
}))(LoginGate)`





Add Redux to an Existing React Native Application

iOS and Android come with several built in fonts, but if you want to use a custom font in your react native application, you'll need to add it first.

You can add a custom font by copying the font files to your project, telling react native where to find those files by adding an `rnpm` entry to your `package.json` file, and then linking them with `react-native link`. 

Then, you can use that new font by specify it as the `fontFamily` style for a `Text` component, and you can change the `fontWeight` or `fontStyle` component if you've added additional style and weight font files.



Add a Custom Font to a React Native Application

There are two ways to open urls in React Native.  One is to open, and switch to the device's web browser, and the other is to embed the web page within your application.

To open the mobile device's web browser, we'll import `Linking` from react native, and use the `openURL` function, which will open any url that starts with `http` or `https` in that web browser.

If you want to stay within your current application however,  you can import `WebView` from react native, and use that as a component in your application.  Pass in a `uri` param to display that web page in the embedded web view.

Open a Webpage in React Native with Linking and WebView

When you bring up the on screen keyboard in a mobile app, it will cover any text input or buttons on the bottom half of the screen, which can be frustrating for users.  There are a few common ways to deal with this in React Native - and this video shows the following solutions:

First, you can use the built in `KeyboardAvoidingView` to move components around when the keyboard comes on screen.  It has the advantage to being built in to React Native already - but it can be overly complicated to get this approach to work consistently across both iOS and Android.

There is also a third party library called `KeyboardAwareScrollView`, which will allow your entire view to scroll, and will keep the currently selected text inputs up and out of the way of the keyboard.

Prevent the On-screen Keyboard from Covering up Text Inputs

We’ll create a brand new React Native app, and get it to launch on the iOS simulator and Android emulator.  A Mac is required to build for iOS, but Android development can be done on Mac, Windows, or Linux.

Create a React Native App and Run it on the iOS Simulator and Android Emulator

Once your React Native app is up and running, we’ll make a simple change and reload the simulator to show the change.  We’ll look at manually reloading the simulator, reloading with Live Reload and reloading with Hot Reloading, and talk about the pros and cons of each method.

Reload the Simulator when Changes Occur in React Native Apps

Displaying text is a key component of mobile apps, so we’ll look at how to show text on the screen, and how it differs from text on the web.  We’ll also format the text style to change the size, alignment, and more.

Display and Format Text in a React Native Application

React Native uses Flexbox to layout most components, which makes it easy to run your app on devices of many different screen sizes.  We’ll learn the basics of Flexbox in React Native, and how to use it to build a flexible screen layout.  We’ll also look at some differences between flexbox on the web and on mobile.

Layout React Native Components with Flexbox

One way to style React Native components is with a `StyleSheet`, which was designed to be similar to css.  We’ll go over the differences between React Native styles and web styles, and we’ll create a new StyleSheet, and use it to change the style of components in our app.

Topics

Instructors

Content Type

Free or Pro