Learn Algolia, Android and Radium

Today’s users expect great things from their search experiences — speed, relevance, and usability, to name a few. Algolia provides developers with out-of-the-box and customizable search experiences that are a joy to build.

This introductory course on the Algolia search solution focuses on the user-facing part of search. Using the Algolia InstantSearch.js front-end library, we’ll see how to build an engaging search experience in no time. (28 minutes, to be exact.) 

**Prerequisites:** 
You don’t need previous experience with search to follow this course — we’ll use an example index with an e-commerce data set preconfigured. We will work mainly in JavaScript, so basic JS knowledge is expected.

If you want to play with your own index settings and data set, you can [create a free Algolia account here](https://www.algolia.com/users/sign_up/hacker/?utm_medium=link&utm_source=egghead&utm_campaign=education), but this is not required to follow along with this first course. 

Algolia's full suite APIs enable teams to develop unique search and discovery experiences for their customers across all platforms and devices. Type a query. Click a link. Open an app. Everything your customers do sends a signal about what they want. Algolia decodes that intent to deliver the right content - instantly.

algolia

Getting Started with Algolia InstantSearch.js

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 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 a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.  

Radium: Updating Button Styles via Props

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like `:hover` and `:active`. By using Radium to listen to mouse events we can restore `:hover` and `:active` selectors to inline styles.

Styling a React button component with Radium

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

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

This will get you started on how to setup the Javascript API client of Algolia search solution. To follow along the video having a free Algolia account already setup will make things easier (but is not required). Once the client is setup we will test it by pushing a couple of records to an index.  

Set up the Algolia JavaScript Client

We’ll load a simple JSON file containing 500 actors records from disk and push it to our Algolia index using the Javascript API client.

Push JSON Data to an Algolia Index from the JavaScript Client

We’ll learn how to push a small amount of data from a local MySQL database to an Algolia index. The first step is to connect to the DB using the `mysql` package, then select all records from the DB and finally push them to Algolia using the JS API client.

Push MySQL Data to an Algolia Index from the JS Client

Using the Lodash library, we’ll see how to split large amounts of data from a local MySQL database into smaller chunks and push them to an Algolia index.  

Topics

Instructors

Content Type

Free or Pro