diff --git a/guide.md b/guide.md index a40e8e109..6a897a756 100644 --- a/guide.md +++ b/guide.md @@ -10,7 +10,7 @@ Goals: ## Installation -To install Caluma, you'll need to have [Docker]() and [docker-compose]() installed on your system. +To install Caluma, you'll need to have [Docker](https://docs.docker.com/install/) and [docker-compose](https://docs.docker.com/compose/install/) installed on your system. Afterwards, create a new directory for your project, copy our [example docker-compose.yml file](https://github.com/projectcaluma/caluma/blob/master/docker-compose.yml) into it and finally run the following command: @@ -31,3 +31,139 @@ docker-compose up -d ``` You can now access [GraphiQL](https://github.com/graphql/graphiql) at [http://localhost:8000/graphql](http://localhost:8000/graphql). We'll use graphiql to interact with the Caluma service in the coming sections. + +Install the ember.js framework. Therefore you need [node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/get-npm). + +To install ember.js run + +```bash +npm install -g ember-cli +``` + +Create a new ember app + +```bash +ember new caluma-demo +``` + +Inside the new app install the ember-caluma addon + +```bash +ember install ember-caluma +``` + +## Ember-caluma (set up the frontend) + +To make `ember-caluma` work a few steps must be followed. The +form builder is a [routable engine](http://ember-engines.com) which must be mounted in `app/router.js`: + +```bash +Router.map(function() { + // ... + + this.mount("ember-caluma", { + as: "form-builder", + path: "/form-builder" + }); +}); +``` + +To make `ember-apollo-client` work, we need to pass it as dependency for our engine in `app/app.js`. Additionally, we need to specify `ember-intl` as a dependency so that the the application has access to the addon's translations. + +```bash +const App = Application.extend({ + // ... + + engines: { + emberCaluma: { + dependencies: { + services: [ + "apollo", // ember-apollo-client for graphql + "notification", // ember-uikit for notifications + "router", // ember router for navigation + "intl", // ember-intl for i18n + "caluma-options", // service to configure ember-caluma + "validator" // service for generic regex validation + ] + } + } + } +}); +``` + +Also, since our form builder needs to customize the apollo service in order to support [fragments on unions and interfaces](https://www.apollographql.com/docs/react/advanced/fragments.html#fragment-matcher), create a new service `app/services/apollo.js` and extend the apollo service with the provided mixin: + +```bash +import ApolloService from "ember-apollo-client/services/apollo"; +import CalumaApolloServiceMixin from "ember-caluma/mixins/caluma-apollo-service-mixin"; + +export default ApolloService.extend(CalumaApolloServiceMixin, {}); +``` + +It is crucial to define the options for the apollo service in +`config/environment.js`: + +```bash +module.exports = function(environment) { + // ... + + apollo: { + apiURL: "/graphql" + }, +}; +``` + +To use the ember-uikit notification service, it ist important to +config some attributes in `ember-cli-build.js`: + +```bash +module.exports = function(defaults) { + let app = new EmberApp(defaults, { + "ember-uikit": { + notification: { + "timeout": 5000, + "group": null, + "pos": "top-center", + } + } + }); +``` + +Last but not least import `ember-uikit` and `ember-caluma` to +apply styling in `app/styles/app.scss`: + +```bash +// https://github.com/uikit/uikit/blob/master/src/scss/variables-theme.scss +// custom variable definitions go here + +$modal-z-index: 1; +@import "ember-uikit"; +@import "ember-caluma"; +``` + +To show some texts in the form-builder you have to add translations to +`translations/en-us.yaml`. As example like this: + +```yaml +caluma: + form-builder: + global: + optional: optional + save: Save + question: + widgetOverrides: + powerselect: Powerselect + form: + all: All petitions + new: New petition + empty: You don't have any petitions yet. + name: Name + slug: Slug + description: Description + isArchived: Archived + isPublished: Published + notification: + form: + create: + error: Error +```