Ember-client-gamechanger NPM

addon-ember-client-gamechanger

Generator based on Yeoman in a Ember project based on a graphQL schema.

Requirement

yeoman

npm install -g yeoman

ember

npm install -g ember

A valid graphQL schema (see supported graphQL featured here)
aws cli
An AWS Account set up and configured on your machine ( best if you use the aws-cli to configure with aws configure command)
A Cognito User group set up (see AWS Cognito)

Installation

Locally

Get the project and install its dependencies

git clone https://gitlab.ippon.fr/abenhamida/generator-graphql-ember

cd generator-graphql-ember

npm install

Link the project to your local node_modules folder

npm link

Using npm

Not available yet

Usage

Generate your Ember application

ember new <your-app-name>

FIX Form Bug : Change version in package.json of "ember-source" as follow :

"ember-source": "~3.14.1"

Put "ember-client-gamechanger" in devDependencies of package.json file.

"ember-client-gamechanger": "*"

Delete package-lock.json file.

Install dependencies with the option offline :

npm install --prefer-offline

Run the addon default blueprint

ember g ember-client-gamechanger

Generate the application for your GraphQL schema

ember g graphql-import <directory>/yourSchema.graphql

Now we need to do some setup to connect our client app to the AWS cloud services

API Gateway

If you set up your graphQL server using out generator-aws-server-gamechanger tool, you can use the URL obtained in your constants file.
<your-app-name>/app/constant.js
If you want to go into the mirage mode, in project/app/config/environment.js, change the statement on line 27 like : ENV['ember-cli-mirage'] = {enabled: true};
Else, just use your own API endpoint. You must use the same graphQL schema in your server than the one you used here.

Cognito Service

Fill up the file <your-app-name>/config/environnement.js :

If you set up your graphQL server using out generator-aws-server-gamechanger tool, you can use the URL obtained in your cognito file.
Else, use the following info from your Cognito User Pool :
poolId : General settings > Pool Id
clientId : App integration > App client settings > ID

Now we can run the app

ember serve

See the result on http://loacalhost:4200

(Optional) Adding some entities

Generate the entity with the following syntax

ember g entity-factory <entityName> fieldSimple:<type> fieldRelation:<relation-type>:typeRelation

fieldSimple : the name of your field with a simple type. With type that can be : string, int, boolean

fieldRelation : the name of your field with a relation type. With relation-type that can be : belongs-to, has-many typeRelation : the name of the other entity which is link by this relation.

Modify some files by adding some lines:

mirage/scenarios/default.js

import create<EntityName> from './<entity-name>'
create<EntityName>(server, NUMBER_ENTITY, NUMBER_RELATION_ENTITY)

mirage/config.js

import config<EntityName> from "./config-<entity-name>"

else if (/query <entitiesName>/.test(body)) {
  return { "data": { <entitiesName>: config<EntityName>(schema, null, isPlural) } }
}
else if (/query <entityName>/.test(body)) {
  return { "data": { <entityName>: config<EntityName>(schema, bodyJSON, !isPlural) } }
}

app/templates/display-models.hbs

<li class="rr-list-item">
  <LinkTo @route="display-<entity-name>" class="rr-header-link">EntityName</LinkTo>
</li>

app/router.js

this.route('display-<entity-name>', function() {});

Notes

How to use it

When you launch your application, you need to connect with Cognito. By default, the account is : login : admin@admin.fr pasword : password

You can create users on AWS console.

When you are connected, you have a sidebar on the left with 3 parts :

Home : Home page (display the graphQL schema)
Tables : Page which manage table (create tables in database and create fake data)
Models : In this part it will have all entities of your graphQL schema.

Before accessing to models you need to create tables. On the Tables page you have a button for create Tables. If he doesn't appear, you haven't put the endpoint. See section "Usage" -> "From a graphql Schema" -> 3.