My First App

This tutorial takes approximately 10-20 minutes to complete. Good luck!

Let's create your first app to get started with DynaMaker!

For this we will follow 5 simple steps:

  1. Create new project
  2. Know your component
  3. Modify model
  4. Test changes
  5. Fix, test and final deploy

1. Create New Project

In your team dashboard you can add as many projects as you want. Try the following:

  • Add one and name it for example PenHolderApp.
  • Select the Toolbar position you want to give to your app

By clicking in the thumbnail or name of your project, you will go to the project dashboard, consisting mainly of:

  • Application: by going into the thumbnail, name of your app or Edit UI.
  • Components: that the application can use.
  • Exporters: your drawings generated as PDF or DXF.
  • Files: where you upload files with any format (pictures, manufacturing files, external drawings, STL, etc.)
  • Textures: create them from pictures you uploaded in Files.
  • Settings: in ⚙️ to set in specific settings for your app, next to Edit UI.
  • Deployment buttons: to publish your app.

Let's deploy it (click on Deployment Wizard/Skip tests/Deploy to Test) and see how it looks like!

2. Know Your Component

Understanding how the component is structured is the key to create your app in the best way possible.

  • Under the section Components, open the component Component1.
  • Here we find two sections: the Preview section (left side) and the Code section (right side).
  • On the top-right side of the Code section, you find up to 5 different tabs:
    • SPEC: for specifying how the preview section should look, including tests (we skip this for this tutorial).
    • COMP: for defining your component, including 2 sub-tabs:
      • Component: for creating the component, its properties and more.
      • Parameters: where you find the 3 parameters, used for the UI and modifying the model.
    • GEOM: for defining the geometry of the component, separated in:
      • GEOM2D: for 2D representation.
      • GEOM3D: for 3D representation.
    • CONST: to store all your constants
    • ADVANCED: intended for advanced features (we skip this as well for now).

3. Modify Model

Let's create a hole in Component1 for the pen. In order to do that:

  • In COMP/Component, go to the function generateGeometry() and notice that is using a function from the tab GEOM3D.
  • In GEOM/GEOM3D, go to the function generateModel().
  • Create a rectangle sketch for the hole and name it holeSketch.
const holeSketch = SKYSKETCH.generateRectangleSketch(10, 10, 30, 30)
// Position of bottom-left corner = (10, 10); Width = 30; Depth = 30
  • Create a plane on top of the box and name it topPlane.
const topPlane = new SKYMATH.RefPlane(0, 0, 1, height)
  • Use the existing model to add the extrude cut and give as arguments:
    • holeSketch as the sketch to define the shape of the cut.
    • topPlane as the reference plane from where the cut is done.
    • -height for the length of the cut (negative since the normal of the plane is pointing outwards).
model.addExtrudeCut(holeSketch, topPlane, -height)
  • Save & Update to save the changes and update the model.
  • Once the model is correct, don't forget to Publish to see the changes in the app.

4. Test Changes

It is good to see that your changes are correct and the model behaves as expected. Then:

  • Go back to the project dashboard.
  • Check the old version of your project through Test site, in which the hole is not implemented yet.
  • Deploy new version by clicking on Deployment Wizard/Skip tests/Deploy to Test.
  • If you published your component successfully, you will see the new model in the new version of the app.
  • After trying the parameters we realize about three things:
    • The hole should be auto-centered, not always in the bottom-left corner.
    • Depth & Width should be minimum 50 to have a rectangular hole and maximum 120 to get a size-reasonable pen holder.
    • The Depth parameter could be better as a slider instead of an input parameter.

5. Fix, Test And Deploy

Now that you've seen some bugs and things to improve, let's go through them together:

  • Go back into the component Component1 again.
  • Go to GEOM/GEOM3D.
  • Make your holeSketch dependent on width and depth. Instead of position = (10,10), the center of the hole will be always in the middle of the cube. Replace it with:
const holeSize = 30
const holeSketch = SKYSKETCH.generateRectangleSketch((width - holeSize) / 2, (depth - holeSize) / 2, holeSize, holeSize)
  • Go to COMP/Parameters.
  • For both widthParameter & depthParameter make sure you have:
minValue: 50,
maxValue: 120,
stepSize: 1,
  • Replace the definition of depthParameter with a slider. Make sure you have:
const depthParameter = SKYPARAM.generateSlider('depth', 'Depth (y)', {
  defaultValue: component.getProperty('depth'),
  minValue: 50,
  maxValue: 120,
  stepSize: 1,
})
  • Save & Update to save the changes and Publish to see them in the app.

Now that you are done with these fixes:

  • Go back to the project dashboard.
  • Click on Deployment Wizard/Skip tests/Deploy to Test, and check if your changes are good.
  • Repeat the loop test-change-fix as many times as needed.
  • When the app is ready for the end customer, click on Deployment Wizard/Skip tests/Deploy to Production.

Remember not to release to Production until you have tested the app thoroughly. If you are implementing new changes, you should always release them to Test firstly, try them, fix possible bugs and release to Production when it is ready, since this is going to be used by the end user.

Congratulations! You have created your first app and it is ready to use:

← IntroductionMy First Drawing →