A Full-Stack app with Kotlin —by an Android Developer

This was presented at BlrKotlin Meetup.

Transcript

1. A Full-Stack app with Kotlin —by an Android Developer
2. My Experience with Backend
3. Never written a single line of server side code.
4. My Experience with Frontend
6. What are we building?
7. https://blrkotlin.herokuapp.com/
8. What are we building ? Ktor Backend React-Kotlin App Email Id Slack channel name Secret key Status Email Id Status Code
9. ‣ Basic HTML ‣ Basic CSS ‣ Optional ReactJs or React Native ‣ Basic Kotlin ‣ Familiarity with Gradle. Prerequisite
10. ‣ Develop Backend (Ktor). ‣ Deploy Backend on Heroku. ‣ Develop Frontend. (React-Kotlin App) ‣ Deploy Frontend on Heroku. Steps
11. Backend - Ktor
12. Creating a project
13. Project Structure
14. Build.gradle repositories { mavenCentral() + maven { url "https://dl.bintray.com/kotlin/ktor" } + maven { url "https://dl.bintray.com/kotlin/kotlinx" } }
15. Build.gradle dependencies { compile "org.jetbrains.kotlin:kotlin-stdlib-jre8:$kotlin_version" testCompile group: 'junit', name: 'junit', version: '4.12' + compile "org.jetbrains.ktor:ktor-core:$ktor_version" + compile "org.jetbrains.ktor:ktor-netty:$ktor_version" }
16. application.conf ktor { deployment { environment = development port = ${PORT} } application { modules = [ MainClassKt.main ] } }
17. MainClass.kt fun Application.main() { install(CORS){ anyHost() } install(DefaultHeaders) install(Routing) { get("") { call.respondText("Hello World", ContentType.Text.JavaScript) } post("/invite_post/") {- - -} } }
18. post("/invite_post/") { val vm = call.request.receive<ValuesMap>() val url = "https://$slackName.slack.com/api/users.admin.invite" val payload = mapOf("token" to slackToken, "email" to vm.get("email")) val r = post(url, data = payload) if (r.jsonObject.getBoolean("ok")) { call.respondText("{\"status\":1}", ContentType.Text.JavaScript) } else { when(r.jsonObject.getString("error")){ "already_invited" -> call.respondText("{\"status\":2}", ContentType.JavaScript) } } MainClass.kt
19. Serving JSON + compile “com.google.code.gson:gson:X.X.X” data class Response(val status: String, val error: String) val response = Response(“not-ok”, “bad params”) val gson = Gson() val json = gson.toJson(response) call.respondText(json, ContentType.Application.Json)
20. Running Dev Server
21. From Command Line +apply plugin: 'application' +mainClassName = 'org.jetbrains.ktor.netty.DevelopmentHost' ./gradlew run
22. Test your server curl -v -w "\n" http://localhost:5000/ Use Postman
23. Deployment
24. Install Heroku Mac brew install heroku Ubuntu wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh Windows Download Installer from https://devcenter.heroku.com/articles/heroku-cli
25. Configure Heroku heroku login heroku create heroku git:remote -a APP_NAME heroku config:set GRADLE_TASK="build"
26. Procfile web: ./gradlew run
27. git push heroku master http://your_app.herokuapp.com
30. Out of Memory
31. Procfile web: ./gradlew run web: java -jar build/libs/slackinvitebackend-all.jar
32. Building the Deployment Jar task deployJar(type: Jar) { manifest { attributes "Implementation-Title": "gradle-jar-file", 'Implementation-Version': 1.0, 'Main-Class': 'org.jetbrains.ktor.netty.DevelopmentHost' } baseName = project.name + '-all' from { configurations.compile.collect { it.isDirectory() ? it : zipTree(it) } } with jar }
34. Frontend - React Kotlin App
35. npm install -g create-react-kotlin-app create-react-kotlin-app yourApp cd yourApp/ npm start Then open http://localhost:3000/ to see your app. Creating React App
36. my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json src/ app/ App.css App.kt index/ index.css index.kt logo/ kotlin.svg Logo.css Logo.kt react.svg ticker/ Ticker.kt Project Structure
37. my-app/ README.md node_modules/ package.json .gitignore public/ favicon.ico index.html manifest.json src/ app/ App.css App.kt UiState.kt index/ index.css index.kt ui/ fullUi.Kt inputUi.kt Project Structure
38. UiState.kt data class UiState( var heading: String, var placeholder: String, var buttonText: String, var isInviteSent:Boolean, var email: String)
39. index.kt import app.app fun main(args: Array<String>) { render(document.getElementById("root")) { app() } }
40. App.kt interface AppUiState : RState { var uiState: UiState } class App : RComponent<RProps, AppUiState>() { override fun AppUiState.init() { uiState = UiState( "Get Invite to BlrKotlin Slack Channel", "email@yourdomain.com", "Get an Invite", false, "") } override fun RBuilder.render() { fullui(state.uiState, object : EventHandler { override fun emailChanged(email: String) {} override fun submitClicked() {} }) } private fun parse(json: dynamic): Int { return json.status } } fun RBuilder.app() = child(App::class) { }
41. fullUi.kt fun RBuilder.fullui(state: UiState, eventHandler: EventHandler) { div("App-header") { h1("Text-Vertical") { +state.heading } } div{ inputUi(state, eventHandler) } }
42. inputUi.kt interface EventHandler { fun submitClicked() fun emailChanged(email: String) } fun RBuilder.inputUi(state: UiState, eventHandler: EventHandler) { var email ="" div { input(type = InputType.email, name = "itemText") { attrs { placeholder = state.placeholder onChangeFunction = { val target = it.target as HTMLInputElement eventHandler.emailChanged(target.value) } } } button { attrs.text(state.buttonText) attrs.disabled = state.isInviteSent attrs.onClickFunction = { eventHandler.submitClicked() } } } }
43. App.kt override fun emailChanged(email: String) { setState { state.uiState.email = email } } override fun submitClicked() { if(state.uiState.email.isEmpty()){ //Show an error message maybe. return } window.fetch(url, object : RequestInit { override var method: String? = "POST" override var body: dynamic = URLSearchParams().apply { append("email", "${state.uiState.email}") } }).then { response -> response.json().then({ resolve -> when (parse(resolve)) { 1 -> { setState { state.uiState.isInviteSent = true state.uiState.buttonText = "Check your Email" } } }, { t -> console.log(t) }) } }
44. Deployment
45. Configure Heroku heroku login heroku create heroku git:remote -a APP_NAME
46. Configure Heroku https://github.com/mars/create-react-app-buildpack.git https://github.com/heroku/heroku-buildpack-jvm-common.git heroku buildpacks:add -i 1 https://github.com/heroku/heroku-buildpack-jvm-common.git CLI Dashboard
47. git push heroku master heroku open Your App will open in your default Browser. Configure Heroku
48. https://github.com/blrKotlin/slack-invite-backend https://github.com/blrKotlin/slack-invite Resources Backend Example Code Frontend Example Code KotlinConf 2017 - How to Build a React App in Kotlin by Dave Ford KotlinConf 2017 video on React app
49. Thank You !!! @iamBedant