IDE

A very powerful WYSIWYG IDE. You can drag and drop to design the complex UI, and preview it instantly. No coding is ever needed to build the UI anymore.

A Single Language

A signle language, Javascript, can work both for UI running in the browser, and business logic, running in the Qiyun Backend Cloud. Simple, Elegant. (NOTE: more backend languages are coming).

Completely Online

A highly unified platform. It provides each and every feature you need to build a successful webapp, from brainstorming your project to design, develop and deploy it to the final users, then manage and maintain it. All can be done in a browser.

Version Control

Version Control all through webs. Distributed Version Control can be done all within web. Fork, Commit, Exam History, you can do all of them as long as you can access the web.

Code Sharing

Innovative ways of sharing runtime code. Complex Javascript projects are highly reusable and dividable. Easy code management, share and upgrade. You use a simple var mod = using(“path/to/other/module”), all other tasks are taken care of.

Cross Platform & Brower

Completely cross platform and cross browser. We now fully support Firefox, Chrome, Safari. You app can seamlessly run in these browsers in any platform. Truly write once, run everywhere. Even in mobile device.

Project Management

A complete tool suite for project management. Based on Solution and Project, you are really easy to grant and revoke access separately in projects, and divide complex tasks into small and elegant projects. Seamless distributed development environment ensure your team can always coordinate and unite together for bigger challenges.

DPS

Qiyun Data Platform Support (DPS). No Install, No Config. It just works. You can manipulate your data within Javascript, both frontend and backend.You can use Qiyun's innovative Javascript APIs to perform complex query, and you will save and get back Javascript objects, all processes are transparent to you. You can also manipulate your virtual file system residing in Qiyun Cloud within Javascript, just like it is local.

Editor

A highly intelligent editor. It provides semantic level analysis to provide code check and auto complete prompt. Greatly enhance the code quality and coding efficiency.

Secure Infrastructure

Highly secure infrastructure. Qiyun always guards your code and data.

Create An Account

Open your browser, access https://qyapp.com. Now a register window appears.

Type your account name, your password, confirm password, and enter the captcha into the auto pop out entry. Then click OK. The system tells you succeeded. Simple, isn't it? Congratulations! You now have a Qiyun account. If you input your email at the same time, you will receive an email to activate your account. If not, you can still use Qiyun Platform to build your webapp now. (NOTE: activated account has more privileges, such as creating new projects and solutions, more storage etc).

Create your WebApp

After step 1, your webtop (web desktop) becomes.

On the left, there are all Qiyun webapps you now can use. These are prepared by Qiyun webgineers (webapp engineer) for you to enjoy. On the upper right corner, it is the user panel. Among it there is a flashing icon. Let's click it...

Wow, it is Noah, Qiyun's talk wizard. It can give you all kinds of helps. Doubt it? Try typing hello to it. It is based on HTML5 WebSocket and you can use web socket inside your webapp easy as pie. You can ask Noah to add your friends, to talk about your code and proejcts etc.

Go back to webtop, click IDE, a new window pops up.

IDE

Click Toolbox on the left panel.

Select layout.

Drag and Drop DoubleVertical layout onto the design frame. When the design frame's border turns green, drop it. Now a vertical layout is created for you.


Try to pin Toolbox on the left side of the design frame.

Drag and drop Label, Button and Calendar components from Toolbox's control onto the Design Frame.

Now click to select the components and drag drop them to the desiable positions.

Double Click the Label and Button component, you can now change their labels.

Click Preview (the blue tringle on left side of the design frame toolbar),we can see our design in the new pop up window.

Go back to the IDE, we can change the properties of the selected component in the Properties lightweight panel.

You can also click the Propertis Toolbar on the right side to bring out the Properties Window.

On the Appearance section, we can change the layout, and the background and fore color, the font, the border etc of the selected component.


Click Preivew.


Add event response .

Go back to the Design Frame, select Button, double click onClick.

The cod editor will open and the cursor is positioned inside a function. This function will be called when Button is clicked. We add the following code.

	P.Button_1_onClick = function(onClick_event){
 		var date = this.Calendar_1.getDate();
       	this.Label_2.setLabel(JSON.stringify(date));

	};
                    

Select Calendar, double click onDateSelect to add a event handler.

Type the following code.

	P.Calendar_1_onDateSelect = function(date){
 		this.Label_4.setLabel(JSON.stringify(date));
	};
                    

Click Preview.

Now go back to the left side of webtop. Click Project. A new window shows up.

On the left is your project list. Now you only have one sampleproj. On the right is a cartoon introduction of Qiyun's Project Management. Click on step 1, 2.. to get a rough idea.

Editor

From the left you can see a structure of your samproj. It includes various folders and files. For a developer, myDesktop.js and myDesktop.design.js determine the UI of your webapp. Double click myDesktop.js, opening it in Qiyun's Editor.

Pretty cool editor, ha? It is very powerful, semantic analysis, error checking, auto complete, to name just a few.

Qiyun's Javascript architecture also adds many code organization and management mechanism, like DEFINE_NAMESPACE, DEFINE_CLASS, using(), using_sln_css(), inside_using(), inside_using_sln_css() etc. These infructures make developing large Javascript projects among team s become a enjoyable adventure. You can feel the joy of creating and innovating without any side efforts brought by Javascript. Qiyun Platform is completed organized by these infrastructures. Huge project, but very smooth.

Adding Server Side Logic.

How to add your logic that runs on the server side? Still very simple. Go back to IDE, click on the right side of the toolbar to bring out project management, right click on a folder named rpc, then select Add Rpc.

The system tells you Rpc is created successfully and a new file names proj.rpc.js appears. Double click it to open it in the editor and add the following code.

function export_saveToFile(filename,content){
    MyFile.ensure_dir(filename);
    return MyFile.write_file(filename,content);
}
                    

Click Save To Server.

Then open myDesktop.js[Desing] to switch back to the design frame. Drag and drop a button and change its label to Save To Server.

Double click onClick to add event handler. Change the handler function to.

P.Button_2_onClick = function(onClick_event){
   var time = this.Calendar_1.getDate();
   ns.remote.saveToFile("test.txt","time is " + time);
   qyboot.openWindow(qyboot.getServerFilePath("test.txt"),"time");
};
                    

Click Save.

Let's exam the code.

In proj.rpc.js, we define an exported function(export_) named saveToFile.It accepts two parameters, filename and content。NOTE: This function runs on the server side (inside Qiyun Cloud), so you can use the predefined MyFile to create folders and files.

MyFile.ensure_dir(filepath) ensures all folders along the filepath are created.
MyFile.write_file(filename,content) saves content to the file named filename.
                    

In file myDesktop.design.js, OnClick event calls ns.remote.saveToFile()。Every exported functions (beginning with export_) defined in proj.rpc.js can be called by ns.remote。One call, it will switch from the browser to the cloud, carry out your server logic, then return back. Qiyun platform automatically finishes all the heavy work, like parameter passing, identify verification, running your server code, returning back the result etc.
Next statement,qyboot.openWindow(url,name) is to open a browser tab named "name". qyboot.getServerFilePath() converts filename under your account to a url the browser can find.
qyboot is Qiyun's boot object, it provides many useful utilities that you can use. More details about qyboot, rpc MyFile etc can be found in the manual documents.

After all these, you can see a new window pop out.

Congratulations! Now you have built a webapp from the front end down to the backend, and have saved a file in Qiyun Cloud by your own code! Isn't that cool?

DPS

Besides MyFile, you can also access Qiyun's Data Platform Support to get a taste of how to design your object storage, how to use MyDB APIs to insert, update, query and delete your data. Very intuitive APIs are supported. Check it out.Go back to project management, click on the icon of DPS management, like in the image.

Now the Qiyun DPS Management Webapp shows up.

Right click sampleproj, select Add Object, A dialog pops up.

Enter friends and add some properties, like name, address etc.

Click Apply.

A table named friends with properties of name and address are created for you.Click friends, and add some friends there, like.


Next you may wonder how to use these data in your webapp. Close DPS and go back to projmgmt. First we add an rpc function to query your friends by the address in proj.rpc.js:

function export_getFriends(city){
    return MyDB.table('friends').where({address:city}).select();
}
                    

then back to the design frame, drag and drop a TextField, a button and a label. Change the label of the button to "Query". Click Save.

Then double click onClick to add event handler to the button, change the event handler to.

P.Button_3_onClick = function(onClick_event){
            var city = this.TextField_1.getValue();
            if(!city){
                alert("you must entry the city name");
            }
            else{
                var getFriends = ns.remote.getFriends(city);
                if(getFriends.success){
                    this.Label_7.setLabel(JSON.stringify(getFriends.result));
                }
            }
        }
                    

The code is self evident, itn't it? Now click Prview,in the entry ,enter "New York", then click Query button.

Now you have created a db inside Qiyun Cloud, add an rpc function using MyDB to query it, then calls this rpc function inside your front end browser. Great experience, really.

Version Control

Now you may wonder how you can manage your source code. Yes, Qiyun also has that prepared. Go back to projmgmt, right click sampleproj, then select Version Control.

a new window pops up.

Pretty fancy UI to manage your code, right? Behind it is a full featured Distributed Version Control System, enabling you to fork, commit, go back etc on your source code. Together with Qiyun's Solution and Project management mechanism, it will help your whole team to coordinate and unite together for any big development challenges.

FeedBack

If you like to give us any feedback, please go to the webtop, click feedback, and enter your feedback/comment/suggestions etc.

We really appreciate your effort. And we will add a thank you note on our Hall of Frame once your suggestions are adopted. If you like to see other people's suggestions, click View then a new window pops up.

All you have seen really excite you, right? Actually you can do much more than that by activate your account. Now go back to webtop. Click on Activate Account. Enter your email address then click OK. An activation email will be sent to you. Once you click on the link inside the email, your account will be activated and you can fully enjoy the power and easiness of Qiyun WebApp Cloud Platform!