GitLab CI 해보자!

미디엄: https://medium.freecodecamp.org/how-to-setup-ci-on-gitlab-using-docker-66e1e04dcdc2
GitLab CI quick start: https://gitlab.com/help/ci/quick_start/README
GitLab CI Demo: https://gitlab.com/ykyuen/gitlab-ci-demo

이번에 GitLab에서 CI를 자체적으로 지원해준다고 해서 한번 해보자!
하는 마음으로 시작하는 CI 설정!

쉽게 정리해보자면, 설정 순서는 다음과 같습니다.

0. 빌드하고자하는 환경을 설정
1. .gitlab-ci.yml 설정
2. gitlab에 push!
3. 빌드됨!

여기서 가장 어렵다고 생각이 드는 것은 빌드하고자 하는 환경을 설정하는 것이라고 생각합니다.
그런데 freecodecamp 미디엄 글에서는 도커 이미지를 사용해서 설정하는군요.

일단 저는 Cordova 앱을 빌드하기 위해 필요한 환경설정이 무엇인지 살펴보고자 합니다.
필요한 세팅은 아래와 같을겁니다.

Cordova Android 문서를 참고해보았습니다.
- JDK 8 이상
- Android SDK, Android SDK Packages
- Node.js 8.9.4 (NPM)
- Cordova

정리하고 나니 위에 4개 정도 필요하네요. (추가적으로는 환경변수 설정도 있겠습니다.)

미디엄 글에서 나온 것은 docker 이미지를 사용해서 CI를 설정하고 있어서 편하게 되어 있습니다.
저도 그래서 찾아봤습니다. cordova 관련한 docker 이미지가 있는지!

있습니다!
https://hub.docker.com/r/beevelop/cordova/

요거 써서 설정되어 있는 이미지를 사용하면 편할 것 같습니다.

그래서 제가 작업한 저장소는 아래에!
https://gitlab.com/pineoc/cordova-ci-demo

기본적인 프로젝트 구성은 아래와 같이 만들어졌습니다.

0. .gitignore는 platforms, plugins를 포함해서 기본적인 세팅을 했습니다.
1. npm i -g cordova
2. cordova create ci-test com.pineoc.citest ciTest
3. cordova platform add android
4. .gitlab-ci.yml 세팅

.gitlab-ci.yml 파일은 아래와 같습니다.

image: beevelop/cordova:latest

before_script:
  - cordova platform add android

stages:
  - build

build:
  stage: build
  script:
    - cordova build android

이렇게 .gitlab-ci.yml을 작성하고 올려두면 자동적으로 파일을 인식, 빌드를 시작합니다.

https://gitlab.com/pineoc/cordova-ci-demo/-/jobs/48618903

이것처럼 쭉 로그가 나오고 빌드 결과는 passed, failed로 나옵니다.
그렇게 어렵지 않게 기본 프로젝트 빌드는 세팅해보았지만
추가적인 설정이 들어가면 어려워질 수 있을 것 같네요.
(플러그인을 추가, iOS 빌드 시스템)

도움이 되었으면 좋겠습니다.

Cordova CSP(Content-Security-Policy) 문제

Cordova를 사용하는 중에 전에는 잘 동작하던 이미지 로딩이 안되어
로그를 확인해봤습니다.

Refused to load the script because it violates the following Content Security Policy directive.

cdvfile://localhost/persistance/cache/image.png 이런 경로의 이미지를 못읽는 문제였습니다.

로그에서는 img-src 쪽 CSP 문제였는데,

혹시나 안드로이드 6 마시멜로 문제인거 같아서 찾아봤는데 아니었습니다.

그래서 CSP 규칙쪽 문제인 것 같아서 수정했더니 해결되었네요.

From.

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />

To.

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' cdvfile://*; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />

추가한 코드는 default-src에  'self' cdvfile://* 입니다.

hope this helps!

Cordova, Xcode Error code 65 for command

Cordova iOS 버전 업그레이드 도중에 에러가 발생.

에러 환경은
- MacBook El capitan
- Cordova 6.2.0
- Corova iOS 4.1.1

에러코드는 아래와 같았습니다.

xcodebuild: error: The project '킹콩로켓56.xcodeproj' does not contain a target named '킹콩로켓56'.
Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/pineoc/Desktop/kingkong_project/cordova/kingkongRocket/platforms/ios/cordova/build-debug.xcconfig,-project,킹콩로켓56.xcodeproj,ARCHS=i386,-target,킹콩로켓56,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/pineoc/Desktop/kingkong_project/cordova/kingkongRocket/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/pineoc/Desktop/kingkong_project/cordova/kingkongRocket/platforms/ios/build/sharedpch

원인해결을 위해서 검색해봤지만
- 프로비저닝 파일 문제
- Xcode 문제
- ios-deploy 문제

모두 아니었습니다.

문제는 한글이름.

config.xml에 있는 앱 이름을 한글로 설정하고 진행하면 에러가 납니다.


이에 대한 해결방법은
1. 에러가 났을 경우, 일단 iOS 쪽을 삭제한다.
$cordova platform rm ios


2. config.xml에 있는 앱 이름을 영어로 바꾼후 iOS 다시 설치
$cordova platform add ios

3. 그리고 빌드해줍니다.
$cordova build ios



빌드 성공!

4. (추가적으로) 앱이름을 한글로 하시고 싶다면
우선 영어로 platform add ios, build 해주시고
그다음에 한글로 바꾸는걸 추천드립니다.

Happy Coding!

Cordova Blog

RSS: https://cordova.apache.org/feed.xml

Link: https://cordova.apache.org/blog/

You can see posts about cordova platform update.
Also plugin, docs, everything.


Tweets by apachecordova

Cordova Docs Translate contribution

https://crowdin.com/project/cordova/ko#


When i use cordova project, i can't use enough because of docs.
so, i contribute to cordova docs project.

first, cordova docs page shows like this.

https://cordova.apache.org/docs/ko/6.x/guide/platforms/android/plugin.html



In my country, Korea. Ko docs.
this context not good grammar, so we can not read effectively.

I decide to translate contribution
2 ways of contribution



1. use GitHub - edit translte page.
2. use Crowdin - crowd translate service

I use Crowdin. (because It is simple service i think)

UI like this.



and edit mode




Do some Edit!

I will translte "Android Plugin Development Guide"



As you can see,
you can be supported by Microsoft Translator. And make your translation.
and "Save" it




You can see your suggestions on log.

this can help your opensource contribution
have a good coding :)

Android, iOS, Windows Phones Viewport size table

http://viewportsizes.com/



You can use this site when you need viewport size table for make cordova applications.

Filter can use like this.

Cordova 한글 깨짐, Cordova character broken issue

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

You just add this meta info.

이거 한줄만 추가해주시면 됩니다.

Use Cordova application + Crosswalk (for performance, compatibility)

Cordova website: https://cordova.apache.org/
Crosswalk website: https://crosswalk-project.org/

in my project, i use to make app have more performace, compatibility.
Crosswalk project advantages are

The Crosswalk Project Advantage:

• Get consistent, predictable behavior by reducing Android device fragmentation.
• Use the latest web innovations and APIs. Provide a feature rich experience on all Android 4.0+ devices.
• Easily debug with Chrome DevTools.
• Improve the performance of your HTML, CSS, and JavaScript.

like that.

And I will use it in this time.

First, Install Cordova

$npm install cordova -g
(if you are not install npm, install nodejs or npm)


Second, Make Cordova app

$cordova create app com.pineoc.testapp app
$cordova platform add android


Third, Install Crosswalk plugin for Cordova

$cordova plugin add cordova-plugin-crosswalk-webview


Fourth, run android

$cordova run android


Reference post benchmark about crosswalk:
http://monaca.mobi/en/blog/crosswalk-performance/


*Crosswalk makes app good performance, but application dex size(apk file size)
bigger than not use crosswalk application.



left side info is "crosswalk + cordova"
right side info is "just cordova"

dex size added about 20MB
because of Crosswalk APIs, high performance rendering functions, Compatibility functions.

if not important about application size, use crosswalk for performance
but important about that, should be consider to use it.

Good coding day
Thanks

Cordova project .gitignore file

   


I use this .gitignore file when i make cordova project.

Cordova + jQuery mobile Contents Security policy error

Cordova + jQuery mobile Contents Security Policy error

error code :
jquery.mobile-1.4.5.js:2034 Refused to load the image 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Add this code to "Content-Security-Policy"
img-src 'self' data:;

It will be success

Cordova iOS screen not full

Cordova iOS screen not full problem

                    Error screen                              Fix error screen                

It occurred because of that Splash Screen file size not matched.
error occurred screen file - Width x Height = 640 x 1134
fix error screen file - Width x Height = 640 x 1136

If not fullscreen on iOS,
you should check splash file.

Cordova + jQuery Mobile fixed Navbar

Cordova + jQuery Mobile
Fixed Navbar in multi page.


I want UI like this.

In my project has directory tree like this.

This directory tree is project root tree.
We focus on www directory.

1. www/index.html
2. www/bookstore.html
3. www/option.html

These files are used for making fixed nav UI.











Codes here.


index.html is first page and center btn page on navbar.
bookstore.html is left btn page on navbar
option.html is right btn page on navbar

<Core Code>
The point code is footer, navbar.
<div data-role="footer" data-id="foo1" data-position="fixed">
Should use data-id same id on multi pages.

Result

Some issue on this project.
- data-transition has some problem, transition has low performance

Cordova App UUID problem in my case (코르도바 앱 업데이트시 데이터 사라짐 문제)

Cordova 프로젝트를 진행하면서 앱 내부에 파일을 저장하고 거기에 계속 접근해야하는데
안드로이드는 문제가 없으나
iOS에서 업데이트를 하면 데이터를 다시받아야한다는 문제가 생겼다.

분석해본다

- 앱을 설치한다.
- 파일을 다운로드한다.
- 파일의 경로를 본다.
반복

1. file:///var/mobile/Containers/Data/Application/DC10658C-BB87-43C1-B6D0-C95731C956BA/Documents/NoCloud/dir/data
2. file:///var/mobile/Containers/Data/Application/70B35BEC-7077-4B23-BFE2-5F5A60E3A8AB/Documents/NoCloud/dir/data
3. file:///var/mobile/Containers/Data/Application/4CFE8D38-3810-4B16-B4D8-6F3D5F7AB687/Documents/NoCloud/dir/data

이렇게 나왔는데 앱의 UUID가 다 다르다.

DC10658C-BB87-43C1-B6D0-C95731C956BA
70B35BEC-7077-4B23-BFE2-5F5A60E3A8AB
4CFE8D38-3810-4B16-B4D8-6F3D5F7AB687


이렇게 3개가 다 각각 다르다현재 테스트는 디바이스에 debug 모드로 앱을 올리고 있는데

현재 명령어인$cordova run ios --release --device
실패.

The following build commands failed:Ld build/app.build/Release-iphoneos/app.build/Objects-normal/armv7s/app normal armv7s

위와 같은 에러가 났는데 7.0 버전으로 타겟을 너무 낮게 잡아서 그런거라고 경고가 뜨길래
버전을 8.3으로 올려줘봤다.

config.xml에<preference name="deployment-target" value="8.3" />를 추가하고 진행하였으나 실패 (에러남).

그냥 xcode로 릴리즈 모드로 실행해보았다.일단 실행은 잘됨.


아까 했던 그 반복을 다시 해본다.

1. file:///var/mobile/Containers/Data/Application/C089CB02-C0ED-4E98-87EF-63BEE176BE21/Documents/NoCloud/dir/data
2. file:///var/mobile/Containers/Data/Application/392D7B12-05F3-4B3C-AD2E-2D98C3B59DBB/Documents/NoCloud/dir/data

또 달라진다...

C089CB02-C0ED-4E98-87EF-63BEE176BE21392D7B12-05F3-4B3C-AD2E-2D98C3B59DBB

일단 UUID의 뜻을 보면
Universally Unique Identifier 라고 하는 것인데시간, 
공간의 값을 섞어서 만든 128bit 겹치지 않는 유니크한 수라고 한다.

난 유니크보다 바뀌지 않았으면 했는데 왜 자꾸 바뀌는 것인가봤더니http://stackoverflow.com/questions/29219172/android-cordova-uuid-reliability
위의 글에 따르면 iOS의 경우 안정성있는 값이 아니라고 한다. 부들부들

혹시나 해서 다시 해봤는데
이 상황에도 다시 바뀜

file:///var/mobile/Containers/Data/Application/5FEEE71E-8858-4CD3-A6BD-08FF2FF16EFD/Documents/NoCloud/dir/data

혹시나 해서 device plugin에 있는 uuid를 봤는데

1. device.uuid = 6536A21C-375B-4F12-8D6B-05A2EC8025392. 
2. device.uuid = 6536A21C-375B-4F12-8D6B-05A2EC802539

안변한다.앱 내부에서의 uuid는 안변하는데app의 uuid는 변한다...


어떻게 해야할지 답이 안나온다.
실제로 앱을 업데이트 했는데 데이터가 날아가는 경우가 있는지 알아봐야겠다.

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

파일을 확인해볼수 있는 함수인
resolveLocalFileSystemURL(path , function (entry) {console.log(entry);});
로 확인해봤더니
파일은 있었더랬다...

바뀌는 앱의 UUID까지 저장한 경로를 불러오면 안된다는 소리라서
파일 경로 저장을 dir/data로 저장하고
데이터를 불러올때는 cordova.file.documentsDirectory + "NoCloud/dir/" + dataname으로 불러왔더니

성공!

Cordova Facebook Plugin iOS error

Use Cordova + Facebook plugin occur error on my project

Error under xcode:
/Plugins/com.phonegap.plugins.facebookconnect/FacebookConnectPlugin.m:27:44: No visible@interface for 'CDVPlugin' declares the selector 'initWithWebView:'

My project system versions
- Cordova 6.0.0
- Cordova iOS 4.0.1
- Cordova android 5.1.1
- phonegap-facebook-plugin 0.12.0

In this problem,
I search on google with this string.
error: no visible @interface for 'CDVPlugin' declares the selector 'initWithWebView:'

And result,
https://github.com/Wizcorp/phonegap-facebook-plugin/issues/1227

This problem can fix use this fork plugin project.
https://github.com/Telerik-Verified-Plugins/Facebook

$git clone https://github.com/Telerik-Verified-Plugins/Facebook.git
$cordova -d plugin add ./Facebook --variable APP_ID="yourappid" --variable APP_NAME="yourappname"
$cordova build ios

** BUILD SUCCEEDED **

Fix error complete!

Cordova iOS BackupWebStorage

When i publish to apple,

I was rejected by this reason

Apple의 메시지

• 2.23 - Apps must follow the iOS Data Storage Guidelines or they will be rejected

2.23 Details

On launch and content download, your app stores 11.39MB on the user's iCloud, which does not comply with the iOS Data Storage Guidelines.

Next Steps

Please verify that only the content that the user creates using your app, e.g., documents, new files, edits, etc. is backed up by iCloud as required by the iOS Data Storage Guidelines. Also, check that any temporary files used by your app are only stored in the /tmp directory; please remember to remove or delete the files stored in this location when it is determined they are no longer needed.

Data that can be recreated but must persist for proper functioning of your app - or because users expect it to be available for offline use - should be marked with the "do not back up" attribute. For NSURL objects, add the NSURLIsExcludedFromBackupKey attribute to prevent the corresponding file from being backed up. For CFURLRef objects, use the corresponding kCRUFLIsExcludedFromBackupKey attribute.

Resources

To check how much data your app is storing:

    - Install and launch your app
    - Go to Settings > iCloud > Storage > Manage Storage
    - Select your device
    - If necessary, tap "Show all apps"
    - Check your app's storage

For additional information on preventing files from being backed up to iCloud and iTunes, see Technical Q&A 1719: How do I prevent files from being backed up to iCloud and iTunes.

If you have difficulty reproducing a reported issue, please try testing the workflow described in Technical Q&A QA1764: How to reproduce bugs reported against App Store submissions.

If you have code-level questions after utilizing the above resources, you may wish to consult with Apple Developer Technical Support. When the DTS engineer follows up with you, please be ready to provide:
- complete details of your rejection issue(s)
- screenshots
- steps to reproduce the issue(s)
- symbolicated crash logs - if your issue results in a crash log

In this message,

I check the config.xml file on project folder.
<preference name="BackupWebStorage" value="local" />

I guess this config preference option not working iCloud disable.

Change the option to.
<preference name="BackupWebStorage" value="none" />

In this time, waiting for review.
It work OR reject.


=========================================================
In my case,
I use cordova-plugin-file-transfer download path that "cdvfile://localhost/persistent/"
So, i change path to cordova.file.dataDirectory.

And i use imgcache.js lib.
https://github.com/chrisben/imgcache.js

in this lib,
iOS iCloud backup problem can fix
https://github.com/chrisben/imgcache.js/issues/73#issuecomment-54437775

This means that change the ImgCache.options.localCacheFolder
to cordova.file.dataDirectory

But i didn't this solution.
because i use android also.

Please no reject! Apple!

cordova plugin add cordova-plugin-media error, skipping

Message:
Plugin doesn't support this project's cordova-android version. cordova-android: 4.1.1, failed version requirement: >=5.0.0-dev
Skipping 'cordova-plugin-media' for android

Update cordova-android platform

$cordova platform update android@5.0.0

In this time,
Release Note :
https://github.com/apache/cordova-android/blob/master/RELEASENOTES.md

Recently update version
v5.1.0

Icon generator

http://pgicons.abiro.com/

This link is used PhoneGap projects

First file input is icon file.

Second file input is splash file.

Options,
Morph to fit - The splash screen will be morphed to fill the screen, so preferably use an abstract pattern in that case.

Overlay app icon - The app icon will be overlayed with maximum the width/height ratio given by "App icon ratio".

Generate Images!

result

Example icon image
->

download image .zip file




dir zipfile/

dir zipfile/res/icons/android 

dir zipfile/res/icons/ios

Other dirs
- zipfile/res/icons/windows
- zipfile/res/icons/wp8
- zipfile/res/screens/ android, ios, windows, wp8

Cordova network check

plugin GitHub Link : https://github.com/apache/cordova-plugin-network-information

- installation

$cordova plugin add cordova-plugin-network-information

Cordova build & run to iOS simulator

iOS simulator application directory

cordova.file.applicationDirectory will change each run to iOS.

like this paths

1. file url : file:///Users/aaa/Library/Developer/CoreSimulator/Devices/2AC0A250-F6DB-4091-AC97-EB69A88F0020/data/Containers/Data/Application/6A3F53B6-093D-4CFA-8787-544DD9F800DD/Documents/dir/d.txt
2. file:///Users/aaa/Library/Developer/CoreSimulator/Devices/2AC0A250-F6DB-4091-AC97-EB69A88F0020/data/Containers/Data/Application/D21BA21E-E159-4F60-8833-BA23AB125326/Documents/dir/d.txt

I think application ID is changed each build, run to iOS.

Cordova check free space on device

Cordova check free space on device