Quickstart

This quick start guide is aimed to new users and will walk through creating a project, schema, content, running project, and querying via GraphQL. You'll need an account to get started, sign in or create a new account.

1. Create a Project

Upon login, you will seeing page like this. Click create a New Workspace then New Project, then you will see modal like this

Enter your project name, for example "My Project", then choose the template. Here we are using Empty template to get started with blank schema. If you want getting started faster and need some schema example, you can always choose your desired template. Click create button and your project will be generated.

2. Table

The default menu on microgen when entering a project is a table. You will have default User table. You can try To add schema (table) and fields directly from this table. But we'll not discuss this any further for now. Let's jump to adding schema.

3. Create Schema and it's Fields

In this quickstart guide, we'll create a simple Todo List app. First, navigate to Schema menu. Then let's add a schema called Todo and some fields. Don't forget to save your change.

Click run to deploy your app and create those schema onto table.

4. Content Entry

Navigate back to table menu, then we'll have a Todo table that we already created. Let's entry some data inside Todo table. Look that we have nicely formatted form without doing any coding. This table can be used by super admin and admin on your app. Cool, now we already have an admin panel.

5. Querying

The most fun part of using Microgen is we don't even need to touch code to get high quality, flexible, and complex server side app (backend) for your client side app (frontend).

Remember on 3rd section of this quickstart guide we have already run the project. So let's open it!

Microgen generated the code and deployed onto GraphQL and REST API. First let's discuss about GraphQL first. By default when you open the running project, you will have a GraphQL Playground (You can turn it off anytime for security issue).

GraphQL

Let's try to query Todo on our playground. At the image below, we nicely got our Todo data using simple Read Query on GraphQL.

Now let's create some data using Mutation query on GraphQL

Uh Oh, looks like that we're not authorized to create data. So what should we do?! Should we make Authentication backend manually? Don't worry, microgen already prepared it all for you! Now try to create a user in order to create a Todo.

Look at the image above, fill the form as needed. Don't worry about the "role" input for now, we'll discuss it later. For now choose "authenticated" for role, that mean that user is an authenticated or registered user. Note: you can also register a user using manual GraphQL Query!

Now we'll need to logged in the user we created before and get TOKEN from that user. Let's do it in our playground.

Copy the provided token, then paste it on the Header as JWT when creating the Todo. Don't forget to add "Bearer" prefix before the token.

But wait!! How if we don't need the Authentication process?? I mean user don't need to logged in, in order to create a Todo. Don't worry, let's get back to our admin panel and navigate to Role menu.

Turn on the "todo:create" for public (unauthenticated) user, and don't forget to RERUN your project!

Now we can get rid the authorization process, and create some data without any token provided!

REST API

Microgen also provided REST API if you are not familiar with GraphQL. Not much talking, let's try! The REST API one is pretty straightforward. If graphql using /graphql on the last url, the REST API using /api. So you can do some query like these:

[GET] https://yourproject.microgen.mejik.id/api/todos

[POST] https://yourproject.microgen.mejik.id/api/todo

[PATCH] https://yourproject.microgen.mejik.id/api/todo/:id

[DELETE] https://yourproject.microgen.mejik.id/api/todo/:id

Note: for more complex reference, look at the REST API section!

6. Client Side Setup

Now let's do the frontend part! Actually the frontend part is up to you. Microgen backend is a plain GraphQL and REST API, so you can use any tech stack to consume it on your client side (frontend). But if you insist us to let you know, here are some of our recommendation:

Apollo GraphQL

Install apollo client side from https://www.apollographql.com/client. Choose the frontend framework that you wish to use such as React, Vue, or Angular. In React for example, you can simply call the GraphQL like this from client side:

export default graphql(gql`{
  feed(type: TOP, limit: 10) {
    repository {
      name
      owner { login }
    }
    postedBy { login }
  }
}`)(props => (
  <List>
    {props.data.feed.map(item => (
      <ListItem
        title={
          item.repository.owner.login +
            item.repository.name }
        subtitle={`Posted by ${item.postedBy.login}`}
      />
    ))}
  </List>
));

REST API

Using REST API as client side is pretty straightforward. For example you have table named Post on your schema. Then you can execute some crud commands such as:

[GET] https://mcgn/678234scx/api/posts

[POST] https://mcgn/678234scx/api/post

[PATCH] https://mcgn/678234scx/api/post/:id

[DELETE] https://mcgn/678234scx/api/post/:id

for more information about how to use Microgen REST API, you can check in REST API section!

In Javascript world such as React, Vue, etc you can simply use Axios to consume the above REST API.

GraphQL using Plain REST API

Just in case if you are not familiar with apollo but still want to use the power of GraphQL, you can also call GraphQL simply using REST API. For example if you are using NodeJS, you can use Axios for your client side API call.

import axios from axios;

axios({
  url: 'https://1jzxrj179.lp.gql.zone/graphql',
  method: 'post',
  data: {
    query: `
      query PostsForAuthor {
        author(id: 1) {
          firstName
            posts {
              title
              votes
            }
          }
        }
      `
  }
}).then((result) => {
  console.log(result.data)
});