웹앱의 미래
웹앱의 미래 (The Future of Web Apps 다시 읽기)


https://www.popit.kr/웹앱의-미래/

개발자라면 마이크로 서비스와 마이크로 앱의 세계로

개발자들에게 구체적인 조언을 해주고 싶은데 아쉽게도 직접 구현을 하지 않으니 기사 내용중 구현 관련한 일부 내용을 번역해 옮기는 것으로 글을 마무리한다.

virtual tools 이란 개념을 소개하는데, UI를 통한 작업과 협업이 점차 늘어나는 방향

다양한 기술 발전으로 웹, 모바일, 데크크탑 앱의 통합이 힘을 받는 시기. 오프라인 앱은 WebRTC와 React Native 등이 대표적 기술이며, WebAssembly도 눈여겨 볼만한 기술로 언급

언젠가 웹 앱이 오프라인 응용 프로그램도 100% 대체할 것이다.

...
Posted by 홍반장水 홍반장水
TAG 웹앱



cordova 한글 문서 : https://cordova.apache.org/docs/ko/5.4.0/guide/overview/index.html



아파치 코르도바는 오픈 소스 모바일 개발 프레임 워크입니다. 각 모바일 플랫폼의 네이티브 개발 언어를 피하고 크로스 플랫폼 개발을 위한 HTML5, CSS3, 자바 스크립트 등 표준 웹 기술을 사용할 수 있습니다. 응용 프로그램 각 플랫폼을 타겟으로 래퍼 내에서 실행 하 고 표준 API 바인딩을 액세스할 각 장치 센서, 데이터 및 네트워크 상태에 의존.

아파치 코르도바 최상위 프로젝트 아파치 소프트웨어 재단 (ASF) 내에서 2012 년 10 월에에서 졸업 했다. ASF를 통해 미래의 코르도바 개발 프로젝트의 열려 지기를 지킬 것 이다. 그것은 항상 무료 및 오픈 소스 아파치 라이센스 버전 2.0 아래 유지 됩니다. 자세한 내용은 cordova.apache.org 를 방문 하십시오.

만약 당신이 아파치 코르도바를 사용:

  • 모바일 개발자 및 다시 각 플랫폼의 언어와 도구를 구현 하지 않고 하나 이상의 플랫폼에서 응용 프로그램을 확장 하려면 원하는 설정 합니다.

  • 웹 애플 리 케이 션은 다양 한 애플 리 케이 션에 배포 패키지를 배포 하 고 웹 개발자 포털을 저장 합니다.

  • 모바일 개발자는 WebView (특별 한 브라우저 창) 장치 레벨 Api에 액세스할 수 있는 기본 응용 프로그램 구성 요소를 혼합에 관심된 또는 네이티브 및 WebView 구성 요소 간의 인터페이스를 플러그인을 개발 하려는 경우.


********** [APP] Cordova 개발 환경 구축 : http://jchlee.tistory.com/37  *******


.

Posted by 홍반장水 홍반장水

[출처]

http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=41825
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=42062

 

[마소연재] 페이스북 웹앱 만들기

 

1회 : 2013.01 | 페이스북 앱 기본 설정

2회 : 2013.02 | 페이스북 PHP/자바스클비트 SDK 사용

3회 : 2013.03 | 페이스북 웹앱 완성 및 광고 설정

 

 

1.페이스북 개발자 페이지에 접속 - http://developers.facebook.com/

 

2.페이스북 개발자 등록

  : 페이지 상단의 "APP" 메뉴를 선택하면 등록된 정보를 볼 수 있다.

 

3.페이스북 앱 생성

  : "새 앱 만들기" 버튼을 선택하고, "계속하기"를 누르면 헤로쿠(Heroku)와 관련된 기본적인 설정 페이지가

      보인다. 헤로쿠를 사용하지 않느다고 선택하면 바로 앱설정 페이지로 넘어간다.

     헤로쿠 호스팅 설정 페이지에서는 서버사이드 개발에 사용할 언어 설정과 이메일 주소를 입력한다.

     서버사이드 개발언어로는 PHP를 사용하고, 이메일 주소에는 사용 중인 헤로쿠 계정이있다면

     헤로쿠 계정을 적고 계정이 없는 경우에는 헤로쿠에서 사용할 이메일 주소를 입력하면

     해당 이메일주소로 회원가입 메일이 온다.

 

     * 헤로쿠 : PaaS기반의 클라우드 서비스 플랫폼이다. 별도 호스팅 절차없이 페이스북 앱을

                     PHP,Ruby,Node.js,Python으로 개발할 수 있다.

 

# 새 앱 만들기 옵션 

 App Name

 3~32 글자 제한이며 외부에 노출될 때 보이는 앱의 제목이다.

 App Namespace

 앱의고유 ID로 앱으로 접속 시 고유 URL 주소로 사용된다.

선택사항이지만 캔버스 앱에서 URL로 쓰이므로 처음부터 설정하는 쪽이 편하다.

 Locale

 앱에서 사용할 언어를 선택한다.

특정 조건에서는 보이지 않기도 하지만 앱 설정에서 다시 설정할 수 있으니

걱정하지 말자.

 Web Hosting

 웹호스팅 서비스 헤로쿠를 사용할 것인지 묻는 항목이다.

헤로쿠를 사용하면 기본적으로 URL 설정과 SSL을 바로 제공하므로 서버 셋팅에 큰 시간을 들일 필요가 없다.

 

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

1.페이지 생성

  : 페이지 생성 주소 - http://www.facebook.com/pages/create.php

    * 페이지 탭 앱 등록방법 : http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

 

헤로쿠를 사용하면 페이스북 웹앱 개발이 빠른 이유 

  •  페이스북 앱에서 헤로쿠 연동을 처음부터 제공해주기 때문에 서버 구성에 드는 시간이 최소화된다.
  • 페이스북 앱에서 권장하는 SSL 설정을 바로 제공해죽 때문에 많은 비용과 시가니 소모되는 SSL 설정 작업을 적용 시간과 비용으로 구축 할 수 있다.
  • 페이스북 앱을 만드는 데 필요한 PHP, javascript 등의 좋은 예제 코드를 기본 페이지를 통해 제공한다. 해당 코드들은 향후 페이스북 앱 개발에 있어 많은 도움이 된다.

 

* 헤로쿠 개발 구축 환경

헤로쿠 툴밸트를 사용해 계정 로그인용 인증키를 받고, 이를 사용해 소스를 관리하고 배포할 수 있다. (윈도우용 헤로쿠 인스톨러에는 Git가 포함돼있다. )

 기존 Git을 설치해 사용하고 있었다면 Git 설치 옵션을 제히하고 설치해야 한다.

 만약 Git를 다시 설치한다면 기존의 모든 설정이 초기화되고 SSH키값이 모두 사라진다.

 

 헤로쿠 툴밸트를 모두 설치했다면 커맨드라인에 'herokulogin'을 입력하고 헤로쿠 계정으로 로그인할 수 있다.

그 후 Git를 통해 소스를 다운로드 할 수 있다.

설정이 모두 정상적으로 이루어 졌는지 확인하기 위해 다운로드한 소스중에서 index.php 파일을 수정해보자.

바꾸고 Commit후에 Push하면 페이스북 앱에 바로 적용된다.

Git의  master branch의 최신 데이터로 앱을 배포한다는 것을 알 수 있다.

 

 

* 헤로쿠 개발환경 개선

 로컬PC에서 웹서버를 설치하고 PHP를 구동하자 - www.apmsetup.com

 로컬서버의 루트폴더에 Git로 헤로쿠에서 받아온 파일을 넣는다.

 http://localhost  로  구동시 설정 문제가 있다.

 

1. 페이스북 PHP SDK 사용에 필요한 '/sdk' 폴더가 없다.

   - Facebook SDK for PHP를 페이스북 개발자 페이지에서 다운로드하고,

      로컬 테스트 서버 환경의 웹 루트 하우에 '/sdk/src/facebook.php' 가 위치하도록 설치한다.

 

2. cURL 기능이 필요하다.

   - PHP에 cURL 기능이 있는지 phpinfo()로 확인하고 없으면 설치한다.

 

3.App ID, App Secret Code가 없다.

   - /Appinfo.php 파일에서는 App ID와 App Secret Code의 설정에 getenv() 함수를 사용하고 있다.

     이와 같은 헤로쿠 서버의 정보는 http://phpinfo.herokuapp.com 을 통해 확인할 수 있다.

 

로컬 테스트 서버 환경에 설치된 아파치에도 헤로쿠와 동일하게 App ID와 App Secret Code를 설정하기 위해 httpd.conf 파일 아래에 다음의 텍스트를 추가한다.

 

<VirtualHost *:80>

DocumentRoot (설치경로)

ServerName 127.0.0.1

SetEnv FACEBOOK_APP_ID (APP_ID)

SetEnv FACEBOOK_SECRET (SECRET)

</VirtualHost>

 

이렇게 마치면 로컬 서버 환경에서도 헤로쿠와 동일한 페이지가 출력된다. 하지만 페이스북앱의 도메인 퍼미션 때문에 로그인 버튼이 동작하지 않는다. 이를 해결하기 위해서는 페이스북 앱 설정 페이지에 있는 'Website with facebook login'에 http://127.0.0.1 을 추가해 로컬 테스트 서버 환경에 접근 권한을 주면 된다.

 

마지막으로 로컬 서버에서 개발한 것을 Git에 커밋하고 Push할 때 '/sdk' 폴더를 포함시키지 않도록 주의해야 한다. 헤로쿠 서버의 '/sdk' 폴더 내의 내용을 최신 페이스북 PHP SDK 로 관리해주기 때문이다. 또한 로컬 환경에서 동작했던 값이 그래도 헤로쿠 환경에 적용될 수 있도록 버전(PHP의 경우 'phpinfo()'한수로 확인 가능)관리에 신경 쓰자.

 

** 마소지 2013.01 참고 **

 

 

* 페이스북 자바스크립트 SDK

 : http://developers.facebook.com/docs/reference/javascript/

 

* 페이스북 Dialog

 : http://developers.facebook.com/docs/reference/dialogs/

 

* 페이스북 FQL(Facebook Query Language)

 : http://developers.facebook.com/docs/reference/fql/

 

* 페이스북 그래프 API

 : http://developers.facebook.com/docs/reference/api/

 

* Facebook SDK for PHP

 : http://developers.facebook.com/docs/reference/php/

 

 

 

 

 

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水

크로스 플랫폼 개발환경 - 웹앱 인가요?

같은 서비스가 다양한 플랫폼에서 동일하게 작동하게 하고 싶은 욕구를 충족시켜주기위해 태어났지만,

일단 구색은 갇추고 있는 크로스 플랫폼들. 이제 알만한 사람은 다 아는 뭐 그런것!


폰갭 http://phonegap.com

앱스프레소 http://appspresso.com

티타늄(타이타늄) http://www.appcelerator.com

로도스 http://www.rhomobile.com

모싱크 http://mosync.com


뭐 이정도?

웹이 대세일세!!!

Posted by 홍반장水 홍반장水