Here you will learn how to create a basic app in TideSDK. TideSDK is an open source frame work for creating desktop applications using html, css, javascript as front-end and any language like python or php as back-end. You can find the setup and installation instructions here.

First you need to install TideSDK. Now open the TideSDK developer and follow the steps:

  • Click on ‘New Project’.

  • Fill in the required information. Use the data given below:

      Project type        : Desktop
      Name                : DemoApp
      App Id              : com.myapps.demoapp
      Directory           : (Use the path of any directory where you wish to create the app.)
      Company/Personal URL: (Use your site url.)


  • Click ‘Create Project’.

    As you click the create button, you can see the information of your application in the same window with some additional information.

    Now browse to the directory in which you created the app. You will see a folder named DemoApp there. You can see some folders and files in it. You will find detailes about them here. Here is the directory structure you will get:

      |-- CHANGELOG.txt  
      |-- LICENSE.txt
      |-- dist
      |-- Resources
      |   |-- index.html
      |-- manifest
      |-- tiapp.xml


  • Now you have to create some files in the resources directory.

    1. First copy the default_app_logo.png from \path\to\TideSDK Developer\Resources\default_app_logo.png into the resources directory.

    2. app.js

       var menu = Ti.UI.createMenu(),
       fileItem = Ti.UI.createMenuItem('File'),
       exitItem = fileItem.addItem('Exit', function() {
       if (confirm('Are you sure you want to quit?')) {
           Ti.App.exit();
           }
       });
       menu.appendItem(fileItem);
       Ti.UI.setMenu(menu);

3.index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My demo app</title>
        </head>
        <body>
          <div>
            Welcome to the demo app created with TideSDK.
          </div>
          <script type="text/javascript" src="app.js"></script> 
        </body>
      </html>


  • Now in the developer, switch to the Test & Package tab of the window. Click ‘Launch App’. You can see the live demo of your application.

  • Now click ‘Package with Runtime’.

    You can now see a folder named packages in your app’s directory. Browse to packages/win32/bundle/DemoApp/ and there you can see your application file along with some other necessary files.

You have a desktop app that you can now run locally. For packaging the app for distribution, you will need some extra tools. We will see that in next post. Till then play with your app and do some useful stuff.