-
Notifications
You must be signed in to change notification settings - Fork 1
Development
You can work on your app locally using the editor of your choice. If you don't have a preferred editor, you might consider Atom, VSCode, or SublimeText.
As you make changes, you'll likely want to see what your changes look like. While you could open app/index.html in your browser, we have specially built tools for more easily previewing:
$ movable serve
Build successful (1120ms) – Serving on http://localhost:4200/
This starts a local webserver on port 4200. You can open up your web browser to http://localhost:4200/ and see the MDK GUI. The GUI enables previewing and also has a number of editing capabilities:
You can easily see how your app works along two dimensions: you can test various contexts such as location, device, etc similar to the Preview Panel in the Movable Ink platform, but you can also test various app configurations marketers may set. For instance, if your Weather app contains a dropdown for the marketer to display weather in Celsius or Fahrenheit, you can locally test how your app will look with each set. You have two different previewing modes, which you can toggle with the switch in the top left:
Local previewing renders the app within your browser's rendering engine. The advantage of this is that it's very quick, and you can use browser tools such as the JavaScript Console and Debugger while developing your app.
Rendered previewing sends a preview of your app to the Movable Ink platform and converts it to an image. It is a bit slower, but will allow you to see how it gets rendered by the Movable Ink rendering engine.
Create new Tools for marketers to use in your app, and imbue them with logic by referencing them in code.
Think of Tools as reusable components that your users can add to your app while editing it. For instance, for a countdown timer, minutes and hours numbers would each be tools. Tools don't get any special logic on their own, but instead get added to the workspace as Tags with tool-[toolname] css classes which you can use to access them via your javascript.
When you click Save on the tools page, the tools you've added will be persisted to the tools key in manifest.yml.
Many times when you create an app, you want people who use your app to be able to configure it to their use cases by exposing options. For instance, a Current Weather app may want the app user to be able to decide whether to display the temperature in fahrenheit, celsius, or automatically detect it. You could use a Field to create a dropdown in the app sidebar with those three options.
When you click Save on the Fields page, the fields you've added will be persisted to the fields key in manifest.yml.
This configures general settings around the app itself. You can change the displayed name, the icon, or add query parameters that get automatically passed to the app page.
When you click Save on the Settings page, the settings you've changed will be persisted in manifest.yml.
Build new app UIs as easily as composing elements in Photoshop. Assign them class names if you want to drop down to CSS or JavaScript to modify them.
Anything you build in the cold state will get saved in app/index.html.
Next: Deploying