GithubHelp home page GithubHelp logo

reyhaan / aws-amplify Goto Github PK

View Code? Open in Web Editor NEW

This project forked from aws-amplify/amplify-js

0.0 2.0 0.0 78.88 MB

A declarative JavaScript library for application development using cloud services.

Home Page: https://aws.github.io/aws-amplify

License: Apache License 2.0

Ruby 0.04% Java 3.15% JavaScript 42.25% Objective-C 1.21% C 10.61% TypeScript 27.97% CSS 0.59% HTML 14.17%

aws-amplify's Introduction

AWS Amplify

Gitter Chat npm version npm downloads build:started

AWS Amplify is a JavaScript library for frontend and mobile developers building cloud-enabled applications.

AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. AWS Amplify goes well with any JavaScript based frontend workflow, and React Native for mobile developers.

Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service.

Visit our Web Site to learn more about AWS Amplify.

Installation

Web Development

For creating cloud powered Web apps with JavaScript, AWS Amplify is available as aws-amplify package on npm

$ npm install aws-amplify --save

If you are developing a React app, you can install an additional package aws-amplify-react containing Higher Order Components:

$ npm install aws-amplify --save
$ npm install aws-amplify-react --save

If you are developing an Angular app, you can install an additional package aws-amplify-angular. This package contains an Angular module with a provider and components:

$ npm install aws-amplify --save
$ npm install aws-amplify-angular --save

Visit our Installation Guide for Web to start building your web app.

React Native Development

For React Native development, install aws-amplify

$ npm install aws-amplify --save

If you are developing a React Native app, you can install an additional package aws-amplify-react-native containing Higher Order Components:

$ npm install aws-amplify-react-native --save

Visit our Installation Guide for React Native to start building your web app.

Examples

AWS Amplify supports many category scenarios such as Auth, Analytics, APIs and Storage as outlined in the Developer Guide. A couple of samples are below:

1. Collect user session metrics

By default, AWS Amplify can collect user session tracking data with a few lines of code:

import Amplify, { Analytics } from 'aws-amplify';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);
...
Analytics.record('myCustomEvent');

See our Analytics Developer Guide for detailed information.

2. Add Authentication to your App

Adding authentication to your React or React Native app is as easy as wrapping your app's main component with our withAuthenticator higher order component. AWS Amplify will provide you customizable UI for common use cases such as user registration and login.

...
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);

...

export default withAuthenticator(App);

To add authentication to your Angular app you can also use the built-in service provider and components:

// main.ts
import Amplify from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile); // or manual configuration, see the docs
...
// app.component.ts
import { AmplifyService }  from 'aws-amplify-angular';

...

constructor( public amplify:AmplifyService ) {
  // handle auth state changes
  this.amplify.authStateChange$
      .subscribe(authState => {
        this.authenticated = authState.state === 'signedIn';
        if (!authState.user) {
          this.user = null;
        } else {
          this.user = authState.user;
        }
    });
}

// app.component.html
<amplify-authenticator></amplify-authenticator>

See our Angular Guide for more details on Angular setup and usage.

See our Authentication Developer Guide for detailed information.

3. Sign HTTP requests

AWS Amplify automatically signs your REST requests with AWS Signature Version 4 when using the API module :

let apiName = 'MyApiName';
let path = '/path'; 
let options = {
    headers: {...} // OPTIONAL
}
API.get(apiName, path, options).then(response => {
    // Add your code here
});

See our API Developer Guide for detailed information.

4. Upload and Download public or private content

AWS Amplify provides an easy-to-use API to store and get content from public or private storage folders:

  Storage.put(key, fileObj, {level: 'private'})
        .then (result => console.log(result))
        .catch(err => console.log(err));
        
    // Stores data with specifying its MIME type
    Storage.put(key, fileObj, {
        level: 'private',
        contentType: 'text/plain'
    })
    .then (result => console.log(result))
    .catch(err => console.log(err));

See our Storage Developer Guide for detailed information.

Contributing

See Contributing Guidelines

aws-amplify's People

Contributors

powerful23 avatar mlabieniec avatar richardzcode avatar mbahar avatar elorzafe avatar manueliglesias avatar yuyokk avatar undefobj avatar yuntuowang avatar rlmartin avatar ldgarcia avatar buggy avatar cheedep avatar tbroadley avatar funkmyster avatar maxdavidson avatar mrowles avatar timroesner avatar appwiz avatar mikepatrick avatar jveldboom avatar danielapt avatar krishnan-mani avatar lanceharper avatar coderbyheart avatar mattnguyen avatar mbfisher avatar ffxsam avatar lusentis avatar sbussard avatar

Watchers

James Cloos avatar Rehaan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.