Case Web

Here, you’ll find a tutorial to start a web project with Beagle.

Starting a Web project

Requirements

To create a Beagle’s project for, check out if have installed the following programs:

You must have Visual Studio Code to start your project. In case you don’t have installed it yet, you can find more information about it.

After the installation, follow the steps according to framework you chose:

Step 1: Open the terminal and use the command below:

ng new caseAngular

Wait until the CLI finishes to create the project.

Step 2: Go to the cd caseAngulargenerated project’s folder, add Beagle Angular to your repository with one of the commands below, according to your package manager:

npm install --save @zup-it/beagle-angular
yarn add @zup-it/beagle-angular

Now, wait for the installation.

Step 3: Type one of these commands and press enter:

yarn beagle init
npx beagle init
  • On the question ‘Would you like to use yarn or npm?’, type the option you chose to use as a manager. For example, if you chose yarn, then type yarnand press enter.

  • On the question ‘Path to the beagle module (press enter to use default)', type which module path you’re using for Beagle. Considering the project was just created, and there aren’t any modules, press enter without informing anything.

  • On the question ‘Path to the module with the components to use with beagle (press enter to use default)', type which module path will be used for Beagle. Considering the project was just created, and there aren’t any modules, press enter without informing anything.

  • On the question ‘What’s the base url of the backend providing your beagle JSONs? (press enter to use default)', type which will be the backend’s basis URL that will be used to rescue the JSONs. Here, we’ll use mockyio, so type https://www.mocky.io/v2/and press enter. Then wait until the configuration finishes:

  • At the end, two files were created on your project:beagle-components.module.ts andbeagle.module.ts.

Step 1: Open the terminal and use the command below:

npx create-react-app case-react --template typescript
yarn create react-app case-react --template typescript

Step 2: Access the cd case-react project’s file and add Beagle React to your repository. On your terminal, type:

npm install --save @zup-it/beagle-react

or

yarn add @zup-it/beagle-react

And wait until the installation finishes.

Configuration

Now it’s time to configure Beagle’s files inside your application, following these instructions:

Open the app.module.ts file and import Beagle’s module that was just generated:

...
import { Beagle } from './beagle.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Beagle
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Open the beagle.module.ts file and put the baseUrl path

import { BeagleModule } from '@zup-it/beagle-angular'
// import all the components you wish to use with Beagle.

@BeagleModule({
  baseUrl: 'http://localhost:4200/assets',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    // Associate every beagle component to your angular component.
  },
})
export class Beagle {}

On the /src path, create another folder named beagle and, inside it, create a new file calledbeagle-service.ts. Its structure should be similar to the image below:

Now, open the beagle-service.ts created file and copy this code:

import { createBeagleUIService } from '@zup-it/beagle-react'

export default createBeagleUIService({
  baseUrl: "",
  components: {}
})

Creating a JSON to be rendered

Now you need a JSON to render the components. Usually, this call is made by an external server that would return the JSON, but for this example we’ll use a local file that will be created for this test:

On your angular project, navigate to the src/assets folder and create a new file named payload.json. Insert this new file on the JSON content below.

On your react project, navigate to the /public folder and create a new file named payload.json. Insert on the new file the JSON content below:

{
    "_beagleComponent_":"beagle:screenComponent",
   "child":{
      "_beagleComponent_":"beagle:container",
      "children":[
         {
            "_beagleComponent_":"beagle:text",
            "text":"Hello Beagle!",
            "style":{
               "cornerRadius":{},
               "size":{},
               "margin":{
                  "top":{
                     "value":16,
                     "type":"REAL"
                  }
               },
               "flex":{
                  "alignSelf":"CENTER"
               }
            }
         },
         {
            "_beagleComponent_":"beagle:text",
            "text":"Beagle is a cross-platform framework which provides usage of the Server-Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code.",
            "_beagleComponent_":"beagle:text",
            "style":{
               "cornerRadius":{},
               "size":{},
               "margin":{
                  "left":{
                     "value":16,
                     "type":"REAL"
                  },
                  "top":{
                     "value":20,
                     "type":"REAL"
                  },
                  "right":{
                     "value":16,
                     "type":"REAL"
                  }
               },
               "flex":{}
            }
         }
      ]
   }
}

Rendering components

Now it’s necessary to add on your application the local where the components will be rendered through JSON. The Beagle’s library provides a component with this functionality: beagle remote view. To configure this component, follow these steps:

Open the app.component.html file and replace all the content with this code:

<beagle-remote-view route="/payload.json"></beagle-remote-view>

route in the code above states which route will be loaded. The URL specified here is relative to the baseUrl declared in the configuration.

Open the App.tsx file where the JSON will be rendered and change it until it looks like the example below:

import React from 'react';
import './App.css';
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';

function App() {
  return (
    <BeagleProvider value={BeagleService}>
      <BeagleRemoteView route={'/payload.json'} />
    </BeagleProvider>
  );
}

export default App;

On this step, you will see where the layout defined with payload.json file should be rendered. Here, there are two components provided by Beagle:

<BeagleProvider>: Receives the value propriety as the beagle-service created on the previous step and that contains the initials configurations.

<BeagleRemoteView>: Receives theroute propriety that’s the path for our JSON file. Notice here that we add ' / ‘ because this value will be associated to a definedbaseUrl onbeagle-service.ts file.

Testing your application

Once you have finished the project’s basic configuration, now you have to run one of the commands below to initialize your application:

If you use npm:

npm run serve

If you use yarn:

yarn serve

If you use npm:

npm run start

If you use yarn:

yarn start

After you finish these commands, access your application’s address on your navigator. If a screen with components would be rendered, that means that’s correctly working.