This repository contains sample chat applications that demonstrate different ways of building a Web Application with Layer. The main example is built using angular, but the [examples] folder contains further examples using Backbone and React.
To run this sample, you need to setup an Identity Service. This by deploying a service to Heroku's free tier of services.
To deploy this service:
- Login to the Developer Dashboard
- Navigate to your App
- Select
Toolsin the Table of contents - Click the
Startbutton in the Sample Apps section
This will startup the deploy process, and end with a zip file being downloaded which contains this repo, preconfigured for this app and your Identity Service.
This Identity Service provides you a sample server for purposes of testing and demoing Layer's products.
This server:
- Lets you setup who the users of your app are, and setup their credentials
- Sets up a
followsrelationship between the first 10 users you register, allowing your users to find each other and create conversations with each other. - When the user logs in, their credentials are sent to this service which returns an Identity Token to your application if the user has entered valid credentials. This Identit Token is used to authenticate with Layer's Services.
Before you install and run any of the sample apps provided in this repo, you will need to setup your Configuration file with your Layer appID and the URL to your Identity Provider (authenticator) server.
This JSON file contains an array of at least one:
app_id: Go to The Developer Dashboard, select your Application, and selectKeysin the table of contents on the left. You should see your Application ID.identity_provider_url: If you are using the Layer Sample Identity server deployed to your server or your Heroku account, enter the url to that server here. Note that if you are using your own custom identity service (recommended once you are no longer working on demos), you will need to replace your client's authentication code, and this configuration file is no longer needed.name: Support for this field will be added eventually to let you select between different configurations when logging in.
[{
"app_id": "layer:///apps/staging/f34bdf52-fd26-11e6-9f75-336a5aaaaaaa",
"identity_provider_url": "https://layer-quickstart-frodo-the-dodo.herokuapp.com"
"name": "Staging Demo"
}]The main demo shows how to build an application using
To install all dependencies use the following command:
npm install
To run this project use the following command:
npm start
Point your browser to: localhost:8080
You can also try out an alternate theme with localhost:8080/index_group_theme.html
- You can create a new conversation using the "pencil" button; this button will show a dialog listing all of the users you follow
- Note that the first 10 users created in your identity server will automatically follow one another
- Note that after the first 10, you must do this manually; using the websdk for example, you can call
client.followIdentity('user_id')and that user will then show up in the new conversation dialog.
- You can send and receive messages
- You can send and receive image files and video files
- You can send and receive emoji characters using :-) or 😄 or unicode characters
- You can send and receive links to images, web pages and youtube videos
- You should be able to send/receive typing indicators
There are two types of example within the examples folder:
- Examples built using the Layer WebSDK and a third party UI framework
- Examples built using the Layer WebSDK and Layer's UI widgets, along with a third party UI framework
These sample apps are built using the Layer WebSDK. These samples support two message types:
text/plainwhich is any normal message you sendtext/quotewhich is any Message you send that starts with>
The React App uses:
- Redux to implement a flux architecture
- layer-react to add Layer Query data to the state
- NPM to include the Layer WebSDK
The Angular App uses:
- CDN to include the Layer WebSDK
- Standard Angular 1.x templates and controllers to work with Layer Query data
The Backbone App uses:
- CDN to include the Layer WebSDK
- Standard Backbone Views to work with Layer Query data
Layer UI for Web is a library of Webcomponent widgets for rendering Layer data and events. To simplify use of these widgets from various frameworks, the library ships with Adapters to expose widgets as Components understood by other frameworks. Examples and initialization code for these is shown below.
The React App uses a single src/layer-ui-adapters.js file, which is imported by any Component
needing React Views created from the Webcomponent widgets. This file can be included from anywhere/everywhere requiring
an initialized UI library and initialized React Components. This is a useful pattern for many apps:
import * as Layer from 'layer-websdk';
LayerUI.init({
appId: 'layer:///apps/staging/my-app-id'
});
const LayerUIWidgets = LayerUI.adapters.react(React, ReactDom);
module.exports = LayerUIWidgets;LayerUIWidgets is now a library of React components wrapping the Layer Webcomponents, and is available to all of your Components.
Note This example is in the root folder of this repository; and not in the examples folder.
The Angular App uses the Layer UI Angular adapter to define the Angular Directives needed to recognize and work with Layer's Webcomponents. Thus with the following intialization code:
window.layerUI.init({
appId: 'layer:///apps/staging/my-app-id'
});
// Define the "layerUIControllers" controller
window.layerUI.adapters.angular(angular);
var app = angular.module('ChatApp', [
"layerUIControllers", ...
]);We have now initialized the directives that let us have partials such as:
<layer-conversation
ng-delete-message-enabled="true"
ng-app-id="appCtrlState.client.appId"
ng-conversation-id="chatCtrlState.currentConversation.id"
ng-compose-buttons="composeButtons"></layer-conversation>You can use any documented property of the webcomponents, but its recommended to prefix it with ng- so that
scope can be evaluated prior to passing the value into the webcomponent.
The Backbone App uses the Layer UI Backbone adapter to create a library of Backbone Views:
window.layerUI.init({
appId: 'layer:///apps/staging/my-app-id'
});
var LayerUIWidgets = window.layerUI.adapters.backbone(Backbone);
var NotifierView = LayerUIWidgets.Notifier;
var ConversationsListView = LayerUIWidgets.ConversationList;
var ConversationView = LayerUIWidgets.Conversation;After initializing the UI Framework, the adatpor generates the Backbone views so that they can be instantiated and used.
The Framework7 App contains a demo showing what Layer UI can look like on a mobile device. Note that for best results you should save the web app to your home screen and launch it there.