New to Kinvey? Get started today with this tutorial or attend our getting started webinar.

Getting Started

Install and Start Kinvey Studio

Kinvey Studio is a desktop app that runs on MacOS and Windows. Download the installer for your operating system from [https://studio.kinvey.com/) and install it.

When starting Kinvey Studio for the first time, you need to log in with your Kinvey account:

  1. Enter you email address and password.
  2. (Only for customers with dedicated Kinvey instances or Progress Health Cloud customers) Click Advanced and in Instance Id, enter the string representing your Kinvey instance.

    To find your Instance ID:

    1. Open Kinvey Console and log in.
    2. Open any environment of any app.

      If you don't have an app, create a new empty app.

    3. Open the menu next to the app name in the upper-left corner.

      The Instance ID appears next to the App Key and App Secret. If you don't see an Instace ID, then you can omit it and continue logging in.

  3. Click Login to authenticate yourself.

The first thing you see after you log in is the Getting Started screen. It provides access to basic actions such as creating and opening recent apps, as well as links to help resources. You can dismiss this screen by clicking the Don't show this at startup check box. The instructions in the remainder of the Kinvey Studio documentation assume that you have dismissed the Getting Started screen.

Create a Kinvey Studio App

When creating a new app, Kinvey Studio sets up project files on your local hard drive as well as creates the Kinvey backend needed for hosting app data and server-side code.

  1. On the Kinvey Studio main screen, click the plus sign in the upper-left corner.
  2. In App Name, give your app a descriptive name.
  3. In Location, select a new location for your app files on your local file system if you are not happy with the default.
  4. In Description, give the app an optional extended description.
  5. From Kinvey Backend, select Create a Sample Kinvey Backend App.

    This option creates a new app in your Kinvey backend account and populates it with sample data representing a basic automotive app.

  6. Finally, click Create App to generate the app.

To learn about the other backend creation options, see Apps.

Add a Module

Modules are the functional units of the application. Each module represents a collection of views. With the creation of each new application, Kinvey Studio provides the built-in App Module which contains predefined, system views.

To start adding custom views, you need to create a custom module first.

  1. On the Dashboard, click the card of the application to open it.
  2. Click the plus sign in the upper-left corner.
  3. In the Add Module dialog box, enter module details and click Add Module.

    • In Name, provide the name of the module, for example, Main.
    • (Optional) Click the Icon/Color icon to add an icon to the module and to select a color for the icon and the background.
    • (Optional) In Display Name, define the name of the module as it will appear in the menu and on the landing page of the generated application.

      Applies only to web.

    • (Optional) In Description, provide a short description of the module as it will appear as a tooltip on the landing page of the generated application.

For more information on managing modules, see Modules.

Add a View

Views are the main building block of an app and represent either web pages or mobile screens.

Web View

Web views represent web pages and are part of a module. Each view defines the settings and components that are available for each page of the web application.

  1. Go to the card of the created module and click it.
  2. On the Views page, click the plus sign in the upper-left corner.
  3. In the Add View dialog box, select Web to indicate that this is going to be a Web view.
  4. From the view types, select Data Grid to visualize data from the sample Kinvey backend.

    You can also select other predefined view types or you can select Blank to create a custom view.

  5. In Name, provide the name of the view, for example, vehiclesWeb.

  6. (Optional) In Display Name, define the name of the view as it will appear in the menu and on the landing page of the generated application, for example, Vehicles.
  7. Click Add View to save the view properties and close the Add View dialog box. As a result, the module loads your new view with its defined properties and available options.

After you create a Data Grid view, you need to bind it to data.

  1. With the view open, in the Inspector pane at the right-hand side, ensure the Properties tab is open.
  2. In the Data Connections category, find Collection and select a backend collection, for example Vehicles.
  3. Under Edit Options, open Edit Mode and select Popup.

    Selecting an option other than ReadOnly enables editing and determines the editing mode.

  4. Click the Save icon in the top-left corner to save the view.

For more information on managing views, see Views.

Mobile View

Mobile views represent the various screens of the mobile app and are part of a module. Each view defines the settings and components that are available for each screen.

We'll add a triad of views and then connect them to form the master-detail pattern popular in mobile development.

Adding Master-Detail Views

The following procedure adds and interconnects three views, as follows:

  • Master view—name: vehiclesMasterMobile, type: Two Lines, display name: Vehicles
  • Detail view—name: vehiclesDetailMobile, type: Blank, display name: Vehicle Details
  • New item form—name: autogenerated, type: autogenerated, display name: autogenerated
  1. Enter an application and then open the module where you want to create the view.
  2. Click the plus sign in the upper-left corner.

    The Add View dialog box appears.

  3. Select Mobile to see the available mobile view types.

  4. Select the Two Lines view type.
  5. In Name, type vehiclesMasterMobile.
  6. (Optional) In Display Name, type Vehicles.

    The display name defines the name of the view as it will appear in the navigation and on the landing page of the generated application.

  7. Click Add View to save the view properties and to close the Add View dialog box.

  8. In the Inspector on the right, click Data Connections > Collection and select Vehicles.
  9. Under List Data Mapping, select the data that will appear in the list:
    • For Title, select registrationPlate.
    • For Second Line, select make.
  10. Click the Save icon to save the changes to the view.
  11. Create a new view for the Detail with the following characteristics:

    • Name: vehiclesDetailMobile
    • Type: Blank
    • Display Name: Vehicle Details
  12. In the Inspector for the detail view on the right, click Add next to View's Data Services.

    A new data service appears, automatically bound to the first available collection in alphabetical order.

  13. In the Properties pane for the new data service, click Collection and select vehicles.

  14. For Result Type, select entity

    This option limits the view's access to only the appropriate collection data as determined by the item selected in the master view.

  15. Click Save.

  16. In the Components list on the left, find Stack Layout and drag it onto the view.
  17. Add an image:
    1. In the Components list on the left, find Image and drag it onto the view.
    2. Click the Image control on the view to reveal its properties in the Inspector.
    3. Click in Source and select {{$data.vehicles?.image}} from the list.
  18. Add textual data:

    1. In the Components list on the left, find Label and drag it onto the view beneath the image.
    2. Click the Label control on the view to reveal its properties in the Inspector.
    3. In Text, type Make:.
    4. Add another Label under the first one and click it to reveal its properties in the Inspector.
    5. In Text, start typing make and select {{$data.viewDataSource1?.make}} from the autocompletion list.

      Repeat the steps to add labels for the rest of the data: model, registrationPlate, vin, year.

      Tip Use a nested horizontal Stack Layouts to arrange the labels in a pair of columns.

  19. Click the Save icon to save the changes to the view.

  20. Open the master view.
  21. In the Inspector on the right, open the Select a view to navigate to when an item in the list is tapped list and select the detail view (Main / Vehicle Details).
  22. Click the Save icon to save the changes to the view.
  23. In the list of views, click the gear icon next to the master (Vehicles) view and select Create Form.

    A new view (vehiclesMasterMobile-form) appears that serves as a form for creating new records in the Vehicles collection. It has the following preconfigured:

    • Same data connection as the master view
    • Input fields for all data inside a collection entity with appropriate labels
  24. Go back to the master view.

  25. In Inspector > Properties, ensure that Add New Item Button is selected.
  26. Change New Item Button Text to Add Vehicle.
  27. In Select a view to navigate to when add new item is tapped, select the form view (vehiclesMasterMobile-form).
  28. Click the Save icon to save the changes to the view.

For more information on managing views, see Views.

Set Up Navigation

You can select which views appear in the app's navigation.

Web Navigation

To set up the navigation of your web app:

  1. In the app's left-side navigation, click Navigation > Web Navigation.
  2. In the Web Navigation window that opens, move the web view that you created (Main.vehiclesWeb) from the Excluded from navigation list to the Included in navigation list to make it appear in the app navigation.
  3. Click Save.

Mobile Navigation

To set up the navigation of your mobile app:

  1. In the app's left-side navigation, click Navigation > Mobile Navigation.
  2. In the Mobile Navigation window that opens, ensure that the master view (Main.vehiclesMasterMobile) is in:

    • The top position of the Tabs navigation list.

      The top position ensures that the master view from the master-detail pair appears as soon as the app loads or right after logging in (in case you've set up authentication).

    • The Drawer navigation list.

      The view disappears from All views as soon as you add it to both navigations.

  3. Ensure that the detail view (Main.vehiclesDetailMobile) is not in any of the navigations.

  4. Ensure that the new item view (Main.vehiclesMasterMobile-form) is not in any of the navigations.
  5. Click Save.

Set Up Authentication

Kinvey Studio offers you three choices for authentication, all of which are completely code-less:

  • Anonymous for public apps
  • Kinvey Authentication if you want to offer user management specifically tailored to your app with features like email verification and account restoration
  • Mobile Identity Connect when you want to use your corporate authentication for your app or you want to offer social login to the general public

To set up authentication:

  1. In the main Kinvey Studio navigation, go to Authentication.
  2. Select authentication type for Web and Mobile and Save the changes.
  3. In the main Kinvey Studio navigation, go to Modules.
  4. Open the System module.
  5. Select each of the login views for mobile and web and make any visual changes if you want to.

Start Your App

After you've created a module with a couple of views as well as configured authentication and navigation, you have everything you need for a simple working app.

Start Web App

Take the following steps to start the web application:

  1. In the toolbar in the upper-right corner, click Generate.
  2. After generation completes, click Start Dev Server.

    This action starts the Angular development server. After a few moments, Kinvey Studio opens the app in your default web browser.

    If the app does not open, you can access it manually at the following address:

    https://localhost:4200

Start Mobile App

Take the following steps to start the mobile application:

  1. In the toolbar in the upper-right corner, click Generate.
  2. In the same toolbar, click Preview on Mobile to open the Mobile Sidekick window.
  3. On the Preview App tab, click Start Preview.

    A QR code appears on the screen.

  4. Above the QR code, click Kinvey Scanner app, scan the QR code that appears and install the app.

  5. Click Hide to close the installation QR code and return to the preview QR code.
  6. Open the Kinvey Preview app on your device and scan the preview QR code.

    The app downloads and starts. Allow a few moments for it to download.

You can leave the app running on the device while developing. After you make a change, click Generate and the app will automatically reload on the device, showing the latest developments.

Next Steps

Got a question?