開発を加速させる Retty 式チーム開発術

Reloaded2014/05/29

Retty株式会社 櫻井　洋一郎

Self Introduction

• Name: Yoichiro Sakurai (@saku2saku)

• Job: iOS Engineer @ Retty.Inc TONKATSU Engineer

• Major : Objective-C, PHP, Java, etc..

• Hobby: Reading comics, Cooking, etc..

Works

for iPhone for iPad for Web

(not commiter)

What is “Retty” ?

Table of Contents

1. App Structure

2. Development Environment

3. Advanced Development Environment

Table of Contents

1. App Structure

2. Development Environment

3. Advanced Development Environment

App Structure

• Retty app using many “UIWebView”

• Web page, Web API

• Non-iOS Engineers can create/modify App UI

Type of WebView

• “REMOTE” WebView

• show web page on server

• “LOCAL” WebView

• show HTML, CSS, JS in App

Why include HTMLs in App ?

• You can show background view immediately

• Dynamic contents can get by JavaScript lazily

• You can create/modify App UI, even if you don’t know Objective-C !

Custom URL Scheme

• Retty App uses Custom URL Scheme effectively

• Using screen transition

• retty://?paramA=XXX&paramB=YYY

• Webview call Native method through URL

Table of Contents

1. App Structure

2. Development Environment

3. Advanced Development Environment

Retty Server Environment

Route53 ELB EC2

CloudWatch

ElasticCache

RDS

S3SQS

＿人人人人人人＿ ＞　Many AWS!!　＜ ‾Y^Y^Y^Y^Y‾

EC2 valiation

• Production (http://retty.me/)

• Staging (http://retty.me/)

• Development (http://devserverXXX.retty.me/)

EC2 valiation

• Production (http://retty.me/)

• Staging (http://retty.me/)

• Development (http://devserverXXX.retty.me/)

？！

Switch Production and Staging

Production Staging

Production RDS

Production WiFi Staging WiFi

Switch Production and Staging

Production Staging

Production RDS

Non-VPN VPN with Proxy

Development Server

Dev-saku

Development RDS

Dev-take Dev-yoshidaDev-natsukaDev-uchinoDev-hirano

Retty-saku

Jenkins & TestFlight

source: http://hazi.jp/wp-content/uploads/2012/12/jenkins-wallpaper-phone1.jpg http://www.mevvy.com/wp-content/uploads/2012/12/TestFlight-logo-on-mevvy.com_.png

Development Server

Dev-saku

Development RDS

Dev-take Dev-yoshidaDev-natsukaDev-uchinoDev-hirano

Retty-saku Retty-yoshidaRetty-hirano Retty-uchino Retty-natsuka Retty-take

And DeployGate

source: https://lh4.ggpht.com/AOPLh8AvXlTt5evzK-koQIyR7SFjoj6MMcW45eFtY0WSuU4Fz4burnpKwGp9k0wv-gk=w300

Why so many Dev Servers ?!

Table of Contents

1. App Structure

2. Development Environment

3. Advanced Development Environment

Advanced Retty Server Environment

Route53 ELB EC2

CloudWatch

ElasticCache

RDS

S3SQS

ElasticBeanstalk

What is changed byElastic Beanstalk

• Visualization server versions

• Simple & fast deploy, auto scaling

• Swap environment instantly

Visualization server versions

Simple & fast deploy, auto scaling

Swap environment instantly

SUMMARY• Accelerate team development

• Use WebView (appropriately), if needed

• Production & Staging & Development

• Switch and Generate App easily

• Improve environment continuously !

WE’RE HIRING Designer!!

https://www.wantedly.com/projects/3873

Thank you.