반응형
반응형

Important Considerations When Building Single Page Web Apps

웹앱 제작시 중요고려사항

 

http://net.tutsplus.com/tutorials/javascript-ajax/important-considerations-when-building-single-page-web-apps/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A%20nettuts%20%28Nettuts%2B%29

 

 

Single page web applications – or SPAs, as they are commonly referred to – are quickly becoming the de facto standard for web app development. The fact that a major part of the app runs inside a single web page makes it very interesting and appealing, and the accelerated growth of browser capabilities pushes us closer to the day, when all apps run entirely in the browser.

Technically, most web pages already are SPAs; it’s the complexity of a page that differentiates a web page from a web app. In my opinion, a page becomes an app when you incorporate workflows, CRUD operations, and state management around certain tasks. You’re working with a SPA when each of these tasks take place on the same page (using AJAX for client/server communication, of course).

Let’s start with this common understanding, and dive into some of the more important things that should be considered when building SPAs.


There are numerous points to consider before building a new app; to make matters worse, the expansive web development landscape can be intimidating at the outset. I have been in those unsettling shoes, but fortunately, the past few years have brought consensus on the tools and techniques that make the application development experience as enjoyable and productive as possible.

Most apps consist of both client and server-side pieces; although this article focuses mostly on the client-side portion of an app, I’ll provide a few server-side pointers toward the end of this article.

There is a colorful mix of technologies on the client-side, as well as several libraries and practices that enable a productive app development experience. This can be summarized, using the following word cloud.

Important Considerations - checklist

I will expand on each of the points above in the following sections.


Picking an Application Framework

There are an abundance of frameworks to choose from. Here’s but a handful of the most popular:

Choosing a framework is easily one of the most important choices you will make for your app. Certainly, you’ll want to choose the best framework for your team and app. Each of the above frameworks incorporate the MVC design pattern (in some form or another). As such, it’s quite common to refer to them as MVC frameworks. If we had to order these frameworks on a scale of complexity, learning curve and feature set, from left to right, it might look like:

App Frameworks

Although dissimilar in their implementation and level of sophistication, all the aforementioned frameworks provide some common abstractions, such as:

Just looking at the past five years, there has been an explosive growth in libraries, tools and practices.

  • Model: a wrapper around a JSON data structure with support for property getters/setters and property change notification.
  • Collection: a collection of models. Provides notifcations when a model is added, removed, or changed in the collection.
  • Events: a standard pattern to subscribe to and publish notifications.
  • View: A backing object for a DOM fragment with support for listening to DOM events relative to the DOM fragment. The View has access to the corresponding Model instance. In some frameworks, there is also a Controller that orchestrates changes between the View and Model.
  • Routing: Navigation within an app via URLs. Relies on the browser history API.
  • Syncing: Persisting model changes via Ajax calls.

More advanced frameworks, like CanJS, BatmanJS, EmberJS and AngularJS, expand on these basic features by providing support for automatic data-binding and client-side templates. The templates are data-bound and keep the view in sync with any changes to the model. If you decide to pick an advanced framework, you will certainly get a lot of out-of-the-box features, but it also expects you to build your app in a certain way.

Of all the previously listed frameworks, Meteor is the only full-stack framework. It provides tools not only for client-side development, but it also provides you with a server-side piece, via NodeJS, and end-to-end model synchronization, via MongoDB. This means that, when you save a model on the client, it automatically persists in MongoDB. This is a fantastic option, if you run a Node backend and use MongoDB for persistence.

Based on the complexity of your app, you should pick the framework that makes you the most productive. There certainly will be a learning curve, but that’s a one-time toll you pay for express-lane development. Be sure to carve out some time to evaluate these frameworks, based on a representative use-case.

Note: If you want to learn more about these frameworks from their creators, listen to these videos from ThroneJS.


Client-Side Templates

The most popular JavaScript-based templating systems are Underscore templates and Handlebars.

Some of the advanced frameworks from the previous section offer built-in templating systems.

For example, EmberJS has built-in support for Handlebars. However, you do have to consider a templating engine if you decide to use a lean framework, such as Backbone. Underscore is an excellent starting point, if you have limited templating requirements. Otherwise, Handlebars works great for more advanced projects. It also offers many built-in features for more expressive templates.

If you find that you require a large number of client-side templates, you can save some computation time by pre-compiling the templates on the server. Pre-compilation gives you plain JavaScript functions that you invoke to improve the load time of the page. Handlebars supports pre-compilation, making it worth the time and effort to fully explore.

ExpressJS users can even use the same templating engine on the client as on the server, giving you the benefit of sharing your templates between both the client and server.


Modular Development

Using a preprocessor requires an extra step in your build process.

JavaScript code is traditionally added to the page, via the <script /> element. You typically list libraries and other dependencies first, and then list the code that references those dependencies. This style works well, when you only need to include a few files; however, it will quickly become a nightmare to maintain, as you include additional scripts.

One solution to this problem is to treat each script file as a Module, and identify it by a name or relative file path. Using these semantics, and with the support of libraries, like RequireJS and Browserify, you can build your app using a module-based system.

The module thus becomes a way to identify the functionality within the app. You can organize these modules, using a certain folder structure that groups them based on a particular feature or functionality. Modules help in managing your application’s scripts, and it also eliminates global dependencies that must be included with <script /> elements before the application scripts. For libraries that are not AMD compatible, RequireJS offers a shim feature that exposes non-AMD scripts as modules.

There are currently two types of module-based systems: AMD (Asynchronous Module Definition) and CommonJS.

In AMD, each module contains a single top-level define() statement that lists all required dependencies, and an export function that exposes the module’s functionality. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
define([
// listing out the dependencies (relative paths)
'features/module/BaseView',
'utils/formatters'
], function(BaseView, formatters) { // Export function that takes in the dependencies and returns some object
// do something here
// An explicit require
var myModule = require('common/myModule');
// Object exposing some functionality
return { ... };
});

CommonJS module names are based on either a relative file path or a built-in module lookup process. There is no define() function in any module, and dependencies are explicitly stated by calls to require(). A module exposes its functionality, via the module.exports object, which each module automatically creates. Here’s a CommonJS example:

1
2
3
4
5
var fs = require('fs'), // standard or built-in modules
path = require('path'),
formatters = require('./utils/formatters'); // relative file path as module name
// Export my code
module.exports = { ... };

The CommonJS module style is more prevalent in NodeJS applications, where it makes sense to skip the call to define() call – you are working with a file-system based module lookup. Interestingly, you can do the same in a browser, using Browserify.


Package Management

Performance should be on your mind as you build and add features to your app.

Most apps have at least one dependency, be it a library or some other third party piece of code. You’ll find that you need some way to manage those dependencies as their number increases, and you need to insulate yourself from any breaking changes that newer versions of those dependencies may introduce.

Package management identifies all the dependencies in your app with specific names and versions. It gives you greater control over your dependencies, and ensures that everyone on your team is using an identical version of the library. The packages that your app needs are usually listed in a single file that contains a library’s version and name. Some of the common package managers for different tech stacks are:

  • Linux: Aptitude
  • .NET: Nuget
  • PERL: CPAN
  • Ruby: Gems
  • PHP: Composer
  • Node: NPM
  • Java: Maven and Gradle

Although package management is more of a server-side ability, it’s gaining popularity in client-side development circles. Twitter introduced Bower, a browser package manager similar to NPM for Node. Bower lists the client-side dependencies in component.json, and they are downloaded by running the bower CLI tool. For example, to install jQuery, from the Terminal, you would run:

1
bower install jquery

The ability to control a project’s dependencies makes development more predictable, and provides a clear list of the libraries that an app requires. If you consider consolidating your libraries in the future, doing so will be easier with your package listing file.


Unit and Integration Testing

It goes without saying that unit testing is a critical part of app development. It ensures that features continue to work as you refactor code, introduce libraries, and make sweeping changes to your app. Without unit tests, it will prove difficult to know when something fails, due to a minor code change. Coupled with end-to-end integration testing, it can be a powerful tool, when making architectural changes.

On the client-side, Jasmine, Mocha and Qunit are the most popular testing frameworks. Jasmine and Mocha support a more Behavior-Driven Development (BDD) style, where the tests read like English statements. QUnit, on the other hand, is a more traditional unit testing framework, offering an assertion-style API.

Jasmine, Mocha or Qunit run tests on a single browser.

If you want to gather test results from multiple browsers, you can try a tool like Testacular that runs your tests in multiple browsers.

To take testing the whole nine yards, you’ll likely want to have integration tests in your app, using Selenium and Cucumber/Capybara. Cucumber allows you to write tests (aka features) in an English-like syntax, called Gherkin, which can even be shared with the business folks. Each test statement in your Cucumber file is backed by executable code that you can write in Ruby, JavaScript or any of the other supported languages.

Executing a Cucumber feature file runs your executable code, which in turn tests the app and ensures that all business functionality has been properly implemented. Having an executable feature file is invaluable for a large project, but it might be overkill for smaller projects. It definitely requires a bit of effort to write and maintian these Cucumber scripts, so it really boils down to a team’s decision.


UI Considerations

Having a good working knowledge of CSS will help you achieve innovative designs in HTML.

The UI is my favorite portion of an app; it’s one of the things that immediately differentiates your product from the competition. Although apps differ in their purpose and look and feel, there are a few common responsibilities that most apps have. UI design and architecture is a fairly intensive topic, but it’s worth mentioning a few design points:

  • Form Handling: use different input controls (numeric inputs, email, date picker, color picker, autocomplete), validations on form submit, highlight errors in form inputs, and propagating server-side errors on the client.
  • Formatting: apply custom formats to numbers and other values.
  • Error Handling: propagate different kinds of client and server errors. Craft the text for different nuances in errors, maintain an error dictionary and fill placeholders with runtime values.
  • Alerts and Notifications: tell the user about important events and activities, and show system messages coming from the server.
  • Custom Controls: capture unique interaction patterns in the app as controls that can be reused. Identify the inputs and outputs from the control without coupling with a specific part of the app.
  • Grid System: build layouts using a grid system, like Compass Susy, 960gs, CSS Grid. The grid system will also help in creating responsive layout for different form factors.
  • UI Pattern Library: get comfortable with common UI patterns. Use Quince for reference.
  • Layered Graphics: understand the intricacies of CSS, the box models, floats, positioning, etc. Having a good working knowledge of CSS will help you achieve innovative designs in HTML.
  • Internationalization: adapt a site to different locales. Detect the locale using the Accept-Language HTTP header or through a round-trip to gather more info from the client.

CSS Preprocessors

CSS is a deceptively simple language that has simple constructs. Interestingly, it can also be very unwieldy to manage, especially if there are many of the same values used among the various selectors and properties. It’s not uncommon to reuse a set of colors throughout a CSS file, but doing so introduces repetition, and changing those repeated values increases the potential for human error.

CSS preprocessors solve this problem and help to organize, refactor and share common code. Features, such as variables, functions, mixins and partials, make it easy to maintain CSS. For example, you could store the value of a common color within a variable, and then use that variable wherever you want to use its value.

Using a preprocessor requires an extra step in your build process: you have to generate the final CSS.

There are, however, tools which auto-compile your files, and you can also find libraries that simplify stylesheet development. SASS and Stylus are two popular preprocessors that offer corresponding helper libraries. These libraries also make it easy to build grid-based systems and create a responsive page layout that adapts to different form factors (tablets and phones).

Although CSS preprocessors make it easy to build CSS with shared rules, you still have the responsibility of structuring it well, and isolating related rules into their own files. Some principles from SMACSS and OOCSS can serve as a great guide during this process.

Scalable and Modular Architecture for CSS is included, as part of a Tuts+ Premium membership.


Version Control

If you know a hip developer, then you’re probably aware that Git is the reigning champion of all version control systems (VCS). I won’t go into all the details of why Git is superior, but suffice it to say that branching and merging (two very common activities during development) are mostly hassle free.

A close parallel to Git, in terms of philosophy, is Mercurial (hg)–although it is not as popular as Git. The next best alternative is the long-standing Subversion. The choice of VCS is greatly dependent on your company standards, and, to some extent, your team. However, if you are part of a small task force, Git is easily the preferred option.


Browser Considerations

It goes without saying that unit testing is a critical part of app development.

There are a variety of browsers that we must support. Libraries, like jQuery and Zepto, already abstract the DOM manipulation API, but there are other differences in JavaScript and CSS, which require extra effort on our parts. The following guidelines can help you manage these differences:

  • Use a tool, like Sauce Labs or BrowserStack to test the website on multiple browsers and operating systems.
  • Use polyfills and shims, such as es5shim and Modernizr to detect if the browser supports a given feature before calling the API.
  • Use CSS resets, such as Normalize, Blueprint, and Eric Myer’s Reset to start with a clean slate look on all browsers.
  • Use vendor prefixes (-webkit-, -moz-, -ms-) on CSS properties to support different rendering engines.
  • Use browser compatibility charts, such as findmebyIP and canIuse.

Managing browser differences may involve a bit of trial and error; Google and StackOverflow can be your two best friends, when you find yourself in a browser-induced jam.


Libraries

There are a few libraries that you might want to consider:


Minification

Before deploying your application, it’s a good idea to combine all of your scripts into a single file; the same can be said for your CSS. This step is generally referred to as minification, and it aims to reduce the number of HTTP requests and the size of your scripts.

You can minify JavaScript and CSS with: RequireJS optimizer, UglifyJS, and Jammit. They also combine your images and icons into a single sprite sheet for even more optimization.

Editor’s Note: I recommend that you use Grunt or Yeoman (which uses Grunt) to easily build and deploy your applications.

Tools of the Trade

Twitter introduced Bower, a browser package manager similar to NPM for Node.

I would be remiss if I did not mention the tools for building SPAs. The following lists a few:

  • JsHint to catch lint issues in your JavaScript files. This tool can catch syntactic issues, such as missing semicolons and enforcing a certain code style on the project.
  • Instead of starting a project from scratch, consider a tool, such as Yeoman to quickly build the initial scaffolding for the project. It provides built-in support for CSS preprocessors (like SASS, Less and Stylus), compiling CoffeeScript files to JavaScript and watching for file changes. It also prepares your app for deployment by minifying and optimizing your assets. Like Yeoman, there are other tools to consider, such as MimosaJS and Middleman.
  • If you’re looking for a make-like tool for JavaScript, look no further than Grunt. It is an extensible build tool that can handle a variety of tasks. Yeoman uses Grunt to handle all of its tasks.
  • Nodemon for auto-starting a Node program each time a file changes. A simliar tool is forever.
  • Code editors, such as Sublime Text, Vim, and JetBrains WebStorm.
  • Command line tools ZSH or BASH. Master the shell because it can be very, effective especially when working with tools like Yeoman, Grunt, Bower and NPM.
  • Homebrew is a simple package manager for installing utilities.

Performance Considerations

CSS preprocessors make it easy to build CSS with shared rules.

Rather than treating this as an after-thought, performance should be on your mind as you build and add features to your app. If you encounter a performance issue, you should first profile the app. The Webkit inspector offers a built-in profiler that can provide a comprehensive report for CPU, memory and rendering bottlenecks. The profiler helps you isolate the issue, which you can then fix and optimize. Refer to the Chrome Developer Tools for in-depth coverage of the Chrome web inspector.

Some common performance improvements include:

  • Simplify CSS selectors to minimize recalculation and layout costs.
  • Minimize DOM manipulations and remove unnecessary elements.
  • Avoid data bindings when the number of DOM elements run into hundreds.
  • Clean up event handlers in view instances that are no longer needed.
  • Try to generate most of the HTML on the server-side. Once on the client, create the backing view with the existing DOM element.
  • Have region-specific servers for faster turn around.
  • Use CDNs for serving libraries and static assets.
  • Analyze your web page with tools like YSlow and take actions outlined in the report.

The above is only a cursory list. Visit Html5Rocks for more comprehensive performance coverage.


Auditing and Google Analytics

If you plan on tracking your app’s usage or gathering audit trails around certain workflows, Google Analytics (GA) is probably your best solution. By including a simple GA script on each page with your tracking code, you can gather a variety of your app’s metrics. You can also set up goals at the Google Analytics website. This fairly extensive topic is worth investigating, if tracking and auditing is an important concern.


Keeping up With the Jones

The world of web development changes quickly. Just looking at the past five years, there has been an explosive growth in libraries, tools and practices. The best way to keep tabs on the web’s evolution is to subscribe to blogs (like this one), newsletters and just being curious:


Operations Management

The client-side, although looking like a large piece of the stack, is actually only half of the equation. The other half is the server, which may also be referred to as operations management. Although beyond the scope of this article, these operations can include:

  • continuous integration, using build servers such as TeamCity, Jenkins, and Hudson.
  • persistence, data redundancy, failover and disaster recovery.
  • caching data in-memory and invalidating the cache at regular intervals.
  • handling roles and permissions and validating user requests.
  • scaling under heavy load.
  • security, SSL certificates, and exploit-testing.
  • password management.
  • support, monitoring and reporting tools.
  • deployment and staging.

Summary

As you can see, developing an app and bringing it to production involves a variety of modern technologies. We focused primarily on client-side development, but don’t forget the server-side portion of the app. Separately, they’re useless, but together, you have the necessary layers for a working application.

With so much to learn, you wouldn’t be alone if you feel overwhelmed. Just stick with it, and don’t stop! You’ll get there soon enough.

반응형
반응형

자바스크립트 소수점 보여주기

 

var tempAvg = 4.436;

 

Math.ceil(tempAvg) : 올림

 

Math.round(tempAvg) : 반올림

 

Math.floor(tempAvg) : 내림

 

parseInt(tempAvg) : 내림(정수)

 

parseFloat("123.4567") : 소수점있는 문자열을 숫자(float)로 변환

 

parseInt("13456") : 문자를 숫자(int)로 변환

 

parseFloat("13456") : 문자를 숫자(float)로 변환

 

var tempAvg = 5.0;

 

소수점 1자리 보여주시 : tempAvg.toFixed(1); -> 5.0

 

소수점 2자리 보여주시 : tempAvg.toFixed(2); -> 5.00

반응형
반응형

출처 : http://www.jquery4u.com/page-layout/12-jquery-mobile-layout-plugins-examples/

12+ jQuery Mobile Layout Plugins and Examples

Check out our compilation of 12 jQuery Mobile Layout and Examples. These plugins can help you create multiple and/or split views on your mobile page layout. These plugins will dynamically lays out the pages based on your device orientation. Have fun!

Related Posts:

1. Three Column iPad Layout

jQuery UI powered bootstrap which provides an excellent start to an tablet/mobile layout for your website.

SourceDemo

2. JQM Multiview Plugin

Jquery Mobile plugin for panel layouts/views.
JQM Multiview Plugin
SourceDemo

3. Jquery Mobile SplitView

SplitView dynamically lays out the pages based on your tablet’s (iPad, etc) orientation, as well as your desktop’s screen size. Try it out, resize your browser, or turn your iPad to see it in portrait and landscape modes!
Jquery Mobile SplitView
SourceDemo

4. Multiview Plugin

This page is a multiview page containing 4 panels and 16 pages, which all were added to the DOM when loading the page (directly or from another JQM-page!).
Multiview Plugin
SourceDemo

5. Multi-page (boiler) Template

This is a multi-page boilerplate template that you can copy to build your first jQuery Mobile page. This template contains multiple “page” containers inside, unlike a single page template that has just one page within it.
Multi-page (boiler) Template
Source + Demo

6. Multi-Page Template

This strategy can be used to prefetch multiple pages up front and achieve quicker response times when loading sub-pages.
Multi-Page Template
Source + Demo

7. jQuery Mobile Multiple Pages

In this tutorial I’ll will show you how built a simple mobile site with multiple pages. The multiple pages could be embedded in the same document or they could be in separate files.
jQuery Mobile Multiple Pages
SourceDemo

8. 960 Grid on jQuery-Mobile

It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets.
960 Grid on jQuery-Mobile
SourceDemo

9. Creating A Tablet Split View For jQuery Mobile

In this screencast we are going to look at the jquerymobile.com source and grab the CSS that is created on the jQuery Mobile Docs to create the split view.
Tablet Split View For jQuery Mobile
Source + Demo

10. jQuery Mobile and Dynamic Page Generation

This is great for applications that generate HTML pages/fragments on the server-side, but there are sometimes cases where an application needs to dynamically generate page content on the client-side from JSON or some other format.
jQuery Mobile and Dynamic Page Generation
SourceDemo

11. Fixed toolbars

Toolbars that use the “fixedtoolbar” plugin will be fixed to the top or bottom of the viewport, while the page content scrolls freely in between. In browsers that don’t support fixed positioning, the toolbars will remain positioned in flow, at the top or bottom of the page.
Fixed toolbars
Source + Demo

12. app-UI

Is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices.
app-UI
SourceDemo

13. jquery-mobile – plugin: multiview

Features:
> fullscreen footer
> popovers: unlimited panels, each with JQM pages inside
> fullscreen-mode: on small screens popovers go fullscreen (resize your browser and reload the page)
> unbind from mobileinit to allow to have sites with both splitview and normal pages
jquery-mobile - plugin: multiview
SourceDemo

반응형
반응형

 

10 jQuery Grids Plugins

10 Awesome jQuery Grid Plugins to help get those layouts you always wanted. There are already a number of high quality jQuery grid plugins. We recognize they each have an impressive set of features, capabilities, and a level of use by members of the jQuery community. Below are some of the samples that you would consider putting up on your web page. Enjoy!

Related Posts:


Updated 01/08/2012: Added 11. jQuery Grid Flex

1. Flexigrid

Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.
Flexigrid.jpg
Source

2. Flurid Plugin

A cross-browser fluid width grid system optimized for flexibility (fluidity) and one of the only fluid width grid systems to work in Internet Explorer versions 5.0 and newer* without hiding pixels in margins. Like any grid system, the basic purpose is to break the page into a series of rows and columns, giving the designer an easy, rational way to organize and present content to the user.
Flurid-Plugin.jpg
Source

3. 960 Grid on jQuery-Mobile

A port of 960 grid to jquery mobile. It merges the flexibility of 960.gs, and the ease of jQuery mobile. It aims to bring more flexibility to jQuery-mobile layout and thus make it easier to use on tablets.
960-Grid-on-jQuery-Mobile.jpg
Source

4. jQuery.sheet

Gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with MS Excel style calculations.
jQuerysheet.jpg
Source

5. jQuery Grid

A jQuery grid plugin.
jQuery-Grid.jpg
Source

6. jQuery Grid Row Sizing

This plugin, applied to n-tables of an HTML page, provides the behavior of resizing rows by clicking over a “image handler”. Based in CSS (no DIVs inside TDs needed).
jQuery-Grid-Row-Sizing.jpg
Source

7. GridIron Plugin

This plug-in lets you create a grid using either tables or divs & spans. I originally developed it to work with CouchDB but it will work with any JSON source.
GridIron-Plugin.jpg
Source

8. #grid

This is a little tool we created for our Analog holding page. It inserts a layout grid in web pages, allow you to hold it in place, and toggle between displaying it in the foreground or background.
grid.jpg
Source

9. jQuery Bubble

This plugin adds bubbling functionality to jQuery. The code is similar to jQuery.fn.trigger’s because it’s meant to extend it. It also generates its own event object, that will remain untouched through the bubbling, meaning it’s safe to attach attributes to it and grab them with the ancestors while the event bubbles up.
jQuery-Bubble.jpg
Source

10. jQuery inGrid

Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
jQuery-inGrid.jpg
Source

11. jQuery Grid Flex

jquery-grid-flex
Demo

반응형
반응형

출처 : htt//cafe.naver.com/webappdev/36110

 

< 하이브리드앱 개발방법 >

 

* 출처 : 도서 '만들면서 이해하는 웹앱 & 하이브리드 앱'

 

< 작성자 : 정동근 >

* 직업 - 앱 개발자 및 강사 (경력 10년 이상)

* 2009 'Visual C++ 윈도우 스킨&테마 프로그래밍' 출간

* 2009 '자가치유 바이블' 출간

* 2011 '따라하면서 배우는 바다 모바일 프로그래밍' 출간

* 2012 '만들면서 이해하는 웹앱 & 하이브리드 앱' 출간

* Mail : topofsan@hotmail.com

* Tel : 010-4265-0730

 

 

0 하이브리드앱 이란.

1. 네이티브앱의 특징

- 네이티브 앱은 모바일 기기에 최적화가 되어있는 앱으로 모바일 OS 제조사에서 제공하는 개발언어를 이용하여 자신들의 제품에서만 동작되는 앱을 말하는 것.

- 안드로이드 SDK를 이용한 안드로이드 앱과 iOS SDK를 이용한 아이폰 앱이 여기에 속한다.

-

- 장점 : 편리한 개발툴과 라이브러리 제공하여 개발이 쉽고 유지가 쉽다.

        모바일 기기의 고유정보을 읽고 변경할 수가 있으며 하드웨어를 제어할수 있다.

 고성능의 그래픽 처리가 가능하다.

- 단점 : 플랫폼 별로 어플리케이션을 별도로 개발해야 한다.

 

 

2. 모바일 웹앱의 특징

- 컴퓨터 브라우저에서 실행되는 웹 애플리케이션을 모바일 스크린 크기로 줄인것.

- HTML, CSS, JavaScript, JSP, PHP, ASP, ASP.NET 등의 웹 기술이 사용되며 모바일 브라우저에서 실행된다.

- 장점 : 하나의 웹사이트만 개발하면 모든 스마트폰 플랫폼에서 실행 가능.

- 단점 : 서버에서 웹페이지를 불러오기 때문에 속도가 느리다. 각각의 모바일 플랫폼에서 작동되는 API를 사용할수 없다. 앱스토어 또는 마켓에 등록할수 없다.

 

 

3. 하이브리드앱의 특징

- 모바일 웹앱의 단점을 해결하기 위해서 네이티브 앱으로 모바일 웹앱을 포장하는 기술을 하이브리드하고 부른다.

- 모바일 웹앱을 하이브리드 앱으로 변환해주는 툴로는 폰갭, 앱스프레소, 티타늄 등이 있다.

- 페이지 UI와 이미지, 파일 등 실행에 필요한 모든 리소스가 어플리케이션 내부에 저장되어서 서버에서 따로 받을 필요가 없다.

 

- 장점 : 구동속도가 모바일 웹앱 보다 빠르다. 앱스토어나 마켓에 등록할수 있다. 하드웨어 정보를 읽고 제어할수 있다. 하나의 어플리케이션만 개발하면 다른 스마트폰 플랫폼에 동일하게 적용 가능.

- 단점 : 네이티브 앱 보다는 속도가 느리다. 플랫폼이 자체적으로 지원하는 모든 기능을 사용하지 못한다.

 

 

4. 하이브리드앱 개발에 사용되는 언어와 라이브러리

 - HTML5 : html + CSS3 + jQuery

 - UI 기능 프레임 워크 : jQuery Mobile, Sencha Touch

 - 크로스 플랫폼 : 폰갭, 티타늄 모바일, 앱스프레소

 

 

0 CSS(Cascading Style Sheets)?

 - HTML 문서를 비주얼하게 꾸밀수 있는 스타일시트 언어.

 - 텍스트의 색상과 크기, 스타일(굵기, 이탤릭 처리 등), 페이지 레이아웃과 그레이디언트, 투명도는 물론, 그 이상의 복잡한 양식까지도 구현 가능.

 

 

0 CSS 사용 예시

body {

           font-size: 12px;

           font-weight: bold;

           font-family: Arial; }

 

a { font-style: italic; }

 

h1 a { font-style: italic; }

 

.loud { font-style: italic; }

 

#highlight { background-color: yellow; }

 

 

0 CSS로 컨텐츠에 사각형 테두리 지정

#header ul li a {

           background-color: #FFFFFF;

           border: 1px solid #999999;

           color: #222222;

           display: block;

           font-size: 17px;

           font-weight: bold;

           padding: 12px;

           text-decoration: none;

}

 

 

0 CSS로 컨텐츠 감추기

#footer { display: none; }

 

 

0 텍스트에 그림자 효과 적용

#footer { text-shadow: 0px 1px 1px #fff; }

수평오프셋, 수직오프셋, 블러반경, 색상 순

 

 

0 모서리 둥근 사각형 모양 만들기

.roundbox { border: 2px solid #555;

           border-radius: 20px; }

 

 

0 jQuery Mobile과 센차터치 특성 비교

 

jQuery Mobile

Sencha Touch

개발 난이도

낮음

높음

기능의 다양성

보통

높음

개발 방식

HTML과 같은 마크업 방식

JavaScript와 같은 언어 방식

테마 특징

CSS, 테마롤러 도구 지원

Sass 기반

기반 스크립트

jQuery

ExtJS

지원 기기

, 태블릿

, 태블릿

지원 플랫폼

iOS, 안드로이드, 블랙베리, 바다, 윈도우폰, 팜 웹OS, 심비안

iOS, 안드로이드, 블랙베리

 

 

0 jQuery Mobile

 - 모바일 웹 애플리케이션 개발을 목적으로 만들어진 자바스크립트 프레임 워크.

 - 모바일에 최적화된 UI 컨트롤과 이벤트 처리, 애니메이션 효과 및 자동 네비게이션, Ajax 통신 제공.

- 주요 특징

   . jQuery 기반

   . html 태그와 CSS 연동

   . 경량 라이브러리 : 다운로드 시간이 절감. 빠른 다운로드를 위해 별도의 CDN 서비스도 제공.

 

 

0 Button 컨트롤 예제

             <script type="text/javascript" charset="utf-8">

                     function onButtonOk() {

                                document.getElementById("labelMessagge").innerHTML = "OK Button clicked.";

                     }

</script>

 

<body>

           <div data-role="content" data-theme="b">

           <h2><span id="labelMessagge">Press Button.</span></h2>

           <input type="button" value="OK" onClick="onButtonOk();">

           </div>

</body>

 

 

0 Text 에디트 컨트롤 예제

           function onButtonOk() {

                     var textBrand = $('#brand').val();

                     var textPassword = $('#passwordinput').val();

           }

           ...

           <input type="text" placeholder="Brand" name="brand" id="brand" />

           <input type="password" placeholder="Password" name="passwordinput" id="passwordinput" />

           <textarea cols="40" rows="8" name="textarea" id="textarea">

 

 

0 Checkbox 컨트롤 예제

           function onCheckBox1() {

                     if($('#checkbox1').is(':checked') == true ) {

                     }

                     else {

                     }

           }

           ...

<label><input type="checkbox" name="checkbox1" id="checkbox1" onClick="onCheckBox1();" />Cheese</label>

 

 

0 ListView 컨트롤 예제

           function onListSelected(index) {

           }

           ...

           <ul data-role="listview" id="listPet" data-inset="true" data-theme="c">

                     <li data-role="list-divider">Pet</li>

                     <li><a href="javascript:onListSelected(0)">Cat</a></li>

                     <li><a href="javascript:onListSelected(1)">Dog</a></li>

           </ul>

 

 

0 Sencha Touch 개요

- 객체 지향적으로 설계된 자바 스크립트 기반의 프레임워크.

- 모바일 친화적인 사용자 인터페이스와 애니메이션처리, Ajax 통신 및 데이터 처리 등을 객체지향적인 API를 통해 프로그래밍 할수 있다.

- 공식 사이트 : http://www.sencha.com/products/touch/

 - API 도큐먼트 : http://dev.sencha.com/deploy/touch/docs/

 - 주요 특징

   . 웹표준 HTML5, CSS3 기능 이용

   . 향상된 터치 이벤트 : touchstart, touchend, tap, double tap, swipe, tap and hold, pinch, rotate

   . 폰갭과 연동하여 네이티브앱 개발 가능.

. ExtJS 라이브러리를 기반으로 jQTouch Raphal를 합쳐서 작성되었으며 방대한 API를 제공.

   . 강력하고 쉬운 데이터 통합 : 동일한 도메인 내의 요청은 AJAX로 통신하고, 크로스 도메인일 경우 JSONP로 통신할수 있도록 API를 제공한다. XML JSON은 자체 API로 파싱 가능.

   . 다양한 차트 기능 제공 : Readar, Bar, Line, Stacked, Pie 차트 등.

 

 

0 Sencha Touch 2가 제공하는 MVC(Model View Controller) 패턴

가독성 있고 테스트하기 쉽고 유지보수 하기 쉬운 코딩을 지원.

-History Support : 앱 내에서 full bacck button을 지원하고 어느 위치에서든지 link로 연결 가능.

-Deep Linking : 앱의 어떤 화면에서도 deep link들을 공유 가능. 웹페이지에 링크 걸듯 사용 가능.

-Device Profiles : 어플리케이션의 UI를 폰, 태블릿 기타 디바이스의 종류에 맞게 쉽게 customizing 가능.

 

 

0 컨트롤러의 규칙(Sencha Touch)

- 앱에 있는 각각의 컨트롤러는 모두 Ext.app.Controller subclass 이다.

- 컨트롤러는 MyApp.controller.* namespace에 존재한다. 예를 들어 세션 컨트롤러가 있다면 그것은 MyApp.controller.Sessions 라고 불려지게 된다.

 - 그리고 app/controller/Sessions.js 라는 파일로 존재하게 된다.

 

 

0 Sencha Touch 어플리케이션의 시작

Ext.application({

    name: 'MyApp',

    models: ['User', 'Product', 'nested.Order'],

    views: ['OrderList', 'OrderDetail', 'Main'],

    controllers: ['Orders'],

 

    launch: function() {

        Ext.create('MyApp.view.Main');

    }

});

 

- Models : 앱에서 객체의 타입을 표시합니다. 예를 들어 e-커머스 앱의 경우 유저, 제품, 주문과 관련한 모델이 필요하다.

- View : 객체나 데이터들을 display하는 것을 다루는 부분.

- Controllers : 어플리케이션 내의 사용자 상호 작용을 다룹니다. 어떤 이벤트를 listening하고 핸들링 하는 것도 컨트롤러에서 하게 된다.

- Store : 앱에 데이터를 로딩하는 부분. 리스트나 데이타뷰 같은 컴포넌트들도 다룬다.

- Profile : 앱의 UI를 디바이스 종류별로 쉽게 customizing 할 수 있도록 도와 준다.

 

 

0 컨트롤러 예제(Sencha Touch)

Ext.define('MyApp.controller.Sessions', {

    extend: 'Ext.app.Controller',

 

    config: {

        refs: {

            loginForm: 'formpanel'

        },

        control: {

            'formpanel button': {

                tap: 'doLogin'

            }

        }

    },

 

    doLogin: function() {

        var form   = this.getLoginForm(),

            values = form.getValues();

 

        MyApp.authenticate(values);

    }

});

 

2개의 컨트롤러 configuration이 있다. Refs formpanel 컴포넌트에 loginForm 프로퍼티를 할당.

Control configuration loginForm button tap했을때 doLogin 함수를 호출한다.

 

 

0 Stores 설명(Sencha Touch)

Store는 데이타를 다루는 매우 중요한 부분인 반면에 그 사용법은 간단하다.

Store Model 인스턴스의 배열.

Data-bound 컴포넌트는 DataView나 리스트 같이 Store의 각 Model 인스턴스에서 한 item render 한다.

Model 인스턴스가 추가되거나 삭제되는 store 이벤트가 발생하면 이 data-bound 컴포넌트가 listening 해서 update를 해주게 된다.

 

 

0 Device Profiles 예제(Sencha Touch)

Ext.application({

    name: 'MyApp',

    profiles: ['Phone', 'Tablet'],

});

 

Device Profile은 서로 다른 장치(, 태블릿)에 앱이 제대로 보여지고 동작할 수 있도록 해 주는 간단한 클래스. 처음에는 이 profile 없이 앱을 개발했다가 나중에 추가하면 된다.

이 프로파일을 사용하기 위해서는 프로파일(device)들의 정보를 Application에 전달 해주고 그 디바이스들을 위해 Ext.app.Profile 서브클래스를 생성하면 된다.

어플리케이션은 app/profile/Phone.js app/profile/Tablet.js를 로드하게 된다.

 

 

0 Tablet 프로파일에 대한 예제(Sencha Touch)

Ext.define('MyApp.profile.Tablet', {

    extend: 'Ext.app.Profile',

 

    config: {

        controllers: ['Groups'],

        views: ['GroupAdmin'],

        models: ['MyApp.model.Group']

    },

 

    isActive: function() {

        return Ext.os.is.Tablet;

    }

});

 

isActive 함수는 이 앱이 태블릿에서 작동을 할 때 true return 한다.

Ext.os.is.Tablet iPad에서 작동하면 true를 리턴하고 다른 경우엔 false를 리턴한다. isActive에 다양한 디바이스를 넣어서 사용하면 된다.

 

현재의 프로파일에 대해 추가적인 model,view,controller, store들이 있다면 이는 어플리케이션이 자동적으로 아래와 같이 해당 파일을 로딩 한다.

 

controllers: ['Groups'] - app/controller/tablet/Groups.js

views: ['GroupAdmin'] - app/view/tablet/GroupAdmin.js

models: ['MyApp.model.Group'] - app/model/Group.js

 

 

0 Launch Process(Sencha Touch)

launch 함수는 앱이 로드되고 launch될 준비가 되어있을 때 실행 되는 함수. start up 로직을 넣을 최적의 장소이고 main view structure를 생성하기에 적합한 장소.

 

launch 함수와 더불어 앱의 startup 로직을 넣을 좋은 장소가 두군데 더 있다.

첫번째로 각 controller에는 init 함수를 정의할 수 있다. 이 함수는 어플리케이션 launch 함수가 시작되기 이전에 call 된다.

두번째로는 Device Profile을 사용할 경우. 각각의 Profile에는 나름대로의 launch 함수를 정의할 수 있다. 이 함수는 controller init 함수 이후에 그리고 application launch 함수 전에 실행 된다.

주의 할 것은 해당 Profile에 매치하는 Device에서만 이 Profile launch 함수가 실행된다는 것이다.

 

앱이 시작할 때 call 되는 함수들의 순서는 아래와 같다.

 

    - Controller#init functions called

    - Profile#launch function called

    - Application#launch function called

    - Controller#launch functions called

 

Profile을 사용할 때 Profile launch 함수 안에 bootup 로직을 넣는 것이 일반적이다. 왜냐하면 각 프로파일들은 startup때 실행될 필요가 있는 각기 다른 view 세트를 가지고 있기 때문이다.

 

 

0 Routing History Support(Sencha Touch)

Sencha Touch Routing History를 지원니다. Kitchen Sink 같은 SDK 예제를 보면 각 화면별로 옮겨다니기 쉽게 history를 사용해서 지원한다. 특히 안드로이드의 경우 유용하다.

 

 

0 폰갭 개요

여러 스마트폰 플랫폼에서 제공하는 네이티브 SDK는 서로 개발 언어와 환경 그리고 API 가 서로 다르다.

여러 플랫폼의 SDK를 통합해서 하나의 SDK로 개발할수있도록 개발한것을 크로스 플랫폼이라고 한다.

현재 가장 유명한 스마트폰 크로스 플랫폼은 폰갭과 티타늄 모바일이다. 그외 국내에서 개발한 앱스프레소가 있다.

 

폰갭은하이브리드 앱(Hybrid App)’ 부류에 속한다. 하이브리드 앱이란 개발자가 플랫폼에 의존적인 기능(카메라 등의 장치 제어)만 네이티브 라이브러리로 제작하고 HTML과 자바스크립트로 네이티브 기능을 이용할수 있도록 한것.

 

티타늄 모바일은 자체 자바스크립트 API로 애플리케이션을 개발하면, 컴파일러가 자바스크립트 코드를 네이티브 개발 언어로 치환하는 방식.

 

 

0 폰갭에서 지원하는 디바이스 API 종류

          Accelerometer: 가속도계 사용

          Camera: 사진 촬영과 사진 앨범 탐색

          Capture: 동영상 녹화, 오디오 녹음, 정지 영상 촬영

          Compass: 나침반 기능

          Connection: 모바일 네트워크 상태 확인

          Contacts: 주소록 검색 및 연락처 추가/수정/탐색

          Device: 단말기, 운영체제 버전 등

          Events: 하드웨어 버튼 이벤트

          File: 파일 입출력, 전송

          Geolocation: 위치 정보

          Media: 음성 재생과 녹음

          Notification: 벨 소리, 진동, 시스템 알림 메시지 등

          Storage: 네이티브 DB 접근

 

 

0 폰갭의 활용도

 - 지원 가능한 네이티브 앱 기능 : 90%

  폰갭에서 애플리케이션에 필요한 모든 기능을 제공하지는 않는다. 추가기능을 구현하려면 네이티브 언어를 사용하거나 플러그인으로 기능확장이 필요하다.

 

 - 지원 가능한 스마트폰 플랫폼 : 90%

   안드로이드와 iOS의 렌더링 방식 차이로 불가피하게 운영체제별로 구현을 따로해야하는 부분이 있다. 또한 운영체제별로 동작에 차이가 있는 경우도 있다. 운영체제 종류를 판별하는 분기문으로 해결 가능.

 

 - 네이티브 앱만큼 미려한 UI 개발 가능 : 70%

   웹뷰 상에서 U를 표현하는 방식이므로 모바일 웹 기능의 한계를 넘는 UI는 표현할수 없다. jQuery Mobile 또는 센차터치를 사용해서 보완할수 있다.

 

 - 성능 문제

   안드로이드의 경우 UI 반응성이 iOS에 비해서 느린 경우가 많다.

   iOS 4.x 버전 이하에서는 사파리 브라우저와 웹뷰에서 사용하는 자바스크립트 엔진이 서로 다르다. 사파리용 엔진이 웹뷰용 엔진 보다 2~3배 빠르다. iOS 5 이후부터는 2개 엔진이 동일하다.

 

 

0 폰갭과 앱스프레소 특성 비교

 

폰갭

앱스프레소

지명도

높음. 2009년 시작.

낮음. 2011년 시작.

기능의 다양성

낮음

높음

개발의 편의성

개발 환경 제공하지 않음.

이클립스에 플러그인을 설치하여 자체적인 개발환경을 제공

실행속도

보통

초기 실행 느림. 웹뷰를 웹서버에 띄워서 렌더링하는 방식.

문서화 완성도

잘되어있음. 교재도 많음.

잘되어있음. 교재는 없음.

오픈소스 정책

오픈소스

무료이지만 오픈소스는 아님

지원 플랫폼

iOS, 안드로이드, 블랙베리, 바다, 윈도우폰, 팜 웹OS, 심비안

iOS, 안드로이드

 

 

0 폰갭 프로젝트 개발 환경 구축(안드로이드 기준)

 - 자바 개발 도구 JDK(Java Development Kit)를 설치

   . 사이트 주소 : http://www.oracle.com/technetwork/java/

 - 이클립스 설치

. 사이트 주소 : http://www.eclipse.org/downloads/

 - 안드로이드 SDK 설치하기

. 사이트 주소 : http://developerlandroid.com/sdk/index.html

- ADT 플러그인 설치하기

. 이클립스 메뉴 [Help > Install New Software] 에서 설치

. 메뉴 [Window > Preferences] 에서 안드로이드 SDK 경로를 지정.

- 안드로이드 플랫폼 버전용 tools, platforms, extras 설치

. 메뉴 [Windows > Android SDK Manager] 에서 Android SDK Platform-tools Android 2.3 버전을 설치.

 - 안드로이드 AVD(Android Vertual Device) 가상기기(Emulator) 생성하기

   . 메뉴 [Window > AVD Manager] 에서 생성

- 폰갭 다운로드

. 사이트 주소 : http://www.phonegap.com/download

 

 

0 폰갭 프로젝트 생성하기

 - 새 안드로이드 프로젝트 생성

. 메뉴 [FIle > New > Project]를 클릭하고, 팝업창에서 Android Project를 선택.

 - 라이브러리 파일 복사

   . /libs 폴더를 생성하고 phonegap/lib/android 디렉터리에 들어있는 cordova-x.x.x.jar 파일을 복사.

. /assets/www 폴더를 생성하고 phonegap/lib/android 디렉터리에 들어있는 cordova-x.x.x.js 파일을 복사.

. phonegap/lib/android 디렉터리에 들어있는 xml 폴더를 /res 폴더로 복사.

 - 라이브러리를 프로젝트에 등록

   . 프로젝트 단축메뉴 [Build Path > Configure Build Path...] 에서 cordova-x.x.x.jar 파일을 등록.

 - 메인 Activity 소스파일 수정

   . /src/패키지명/~.java 파일을 연다.

   . 클래스의 상속확장(extends) 클래스를 Activity 에서 DroidGap로 수정

. setContentView(R.layout.main); 구문을 삭제하고 그 위치에 다음 구문을 입력한다.

        super.loadUrl("file:///android_asset/www/index.html");

 - 매니패스트 파일 수정

   . AndroidManifest.xml 파일을 연다.

. supports-screens uses-permission 구문을 추가한다.

<supports-screens

        android:largeScreens="true"

        android:normalScreens="true"

        android:smallScreens="true"

        android:xlargeScreens="true"

        android:resizeable="true"

        android:anyDensity="true"

        />

 

    <uses-permission android:name="android.permission.CAMERA" />

    <uses-permission android:name="android.permission.VIBRATE" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.RECEIVE_SMS" />

    <uses-permission android:name="android.permission.RECORD_AUDIO" />

    <uses-permission android:name="android.permission.RECORD_VIDEO"/>

    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

    <uses-permission android:name="android.permission.READ_CONTACTS" />

    <uses-permission android:name="android.permission.WRITE_CONTACTS" />

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <uses-permission android:name="android.permission.GET_ACCOUNTS" />

    <uses-permission android:name="android.permission.BROADCAST_STICKY" />

 - index.html 파일을 생성

   . /assets/www 폴더에 파일을 생성하고 이름을 index.html 으로 지정.

   . 파일을 열고 아래 내용을 추가.

<!DOCTYPE HTML>

<html>

  <head>

    <title>Cordova</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>

  </head>

  <body>

    <h1>Hello World</h1>

  </body>

</html>

 

 

0 진동 발생 예제(폰갭)

navigator.notification.vibrate(200);

- 시간 단위는 밀리세컨드. 200이면 0.2.

 

 

0 버튼 1개 짜리 메세지박스 예제(폰갭)

    function buttonMessageBox() {

          var message = 'Do you want make Game App';

           navigator.notification.alert(message, null, 'Notice!', 'OK');

    }

 

- 매개변수

    . message (String) : 사용자에게 전달하는 텍스트 내용.

    . alertCallback (Function) : 메세지박스가 사라질때 이벤트 함수.

    . title (String) : 메세지박스 제목 텍스트. 선택사항이며, 기본값은 'Alert' 이다.

    . buttonName (String) : 버튼의 텍스트 문자열. 선택사항이며, 기본값은 'OK' 이다.

 

 

0 버튼 2개 이상 표시하는 메세지박스 예제(폰갭)

function buttonMessageBox() {

          var message = "Do you want make Game App";

navigator.notification.confirm(message, onConfirm, "Notice", "OK,Cancel,Retry");

}

 

function onConfirm(button) {

        var result = 'You selected button ' + button;

}

 

 

0 단말기 정보 구하기(폰갭)

- device.name : 단말기의 제품명이나 모델명을 문자열 형식으로 제공

- device.phonegaep : 웹앱에 탑재한 폰갭 API의 버전 정보를 제공

- device.platform : 단말기의 운영체제 이름을 알려준다.

- device.version 속성 : 단말기 운영체제 버전 정보를 제공.

- device.uuid : 단말기의 일련번호(UUID - Universally Unique Identifier) 정보를 제공.

 

 

반응형
반응형

http://www.coronalabs.com
자바스크립트와 유사한 루아(LuaScript)라는 언어를 사용하는 모바일 최적화된 플랫폼입니다. 물리엔진이 강력해서 앵그리버드를 30분만에 만들죠.

- Adobe AIR로 앱 만들기
http://facebook.com/groups/airapp

- CoronaSDK로 앱 만들기
http://facebook.com/groups/coronasdk

[출처] 자바스크립트 개발자를 유혹하는 CoronaSDK를 아시나요? (웹앱을 만드는 사람들의 모임 (HTML5, CSS3,webapp,jQuery,웹앱)) |작성자 원강민

 

================================================================================================

CoronaSDK 2012.971

SDK Download : https://developer.coronalabs.com/downloads/coronasdk

 

 

Corona SDK on Windows Build 2012.971

CoronaSDK-2012.971.msi (73.4 MB)
md5: cb6637d45a7a142f8c8345fd86dbbbae

Includes Corona SDK Simulator, sample apps, and free 30 day trial versions of Corona Project Manager, Kwik, and Spriteloq.

Please note: Due to Apple's restrictions, you cannot build for iOS on Windows.

System Requirements:
Windows XP or later, 1 GHZ processor

Device support:
Android OS 2.2 or greater (ARMv7). Corona-built apps will not install on Android ARMv6 devices.

================================================================

 

 

Corona SDK on Mac OS X Build 2012.971

CoronaSDK-2012.971.dmg (85.9 MB)
md5: 11a974b0c1723e42f78a68863724fdf8

Includes Corona SDK Simulator, sample apps, and free 30 day trial versions of Corona Project Manager, Kwik, and Spriteloq.

System Requirements:
Mac OS® X 10.7 or later, Intel Mac

Device support:
iOS 4.5 or greater (includes support for iOS 5 and iOS 6). Android OS 2.2 or greater (ARMv7). Corona-built apps will not install on Android ARMv6 devices.

 

 

 

 

반응형

+ Recent posts