Upgrade to Pro — share decks privately, control downloads, hide ads and more …

From Idea to "Hey It Works": Building an app wi...

Chris Ball
February 22, 2017

From Idea to "Hey It Works": Building an app with React Native

We'll take a detailed look at an app idea called Breaktivity - a way to help manage your work / break cycles by forcing you to move during each break.

While we won't be able to cover building the entire app during the talk, you should leave with a better understanding on how to get started, how to think about and build components and screens, or simply an appreciation for how React Native enables us to build great mobile apps.

Chris Ball

February 22, 2017
Tweet

More Decks by Chris Ball

Other Decks in Programming

Transcript

  1. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND We’re going to take a detailed look at an app that helps you manage work/break cycles. Eventually, maybe a real app. Right now, a Proof of Concept. Breaktivity
  2. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND You’ve never used React Native and want a general idea how to get going. Option 1: How to get started Start thinking high level before writing any code Option 2: Thinking in Components See first hand some of the reasons people are so excited. Option 3: What’s all the hype about? Here’s what I’d like you to get out of this talk.
  3. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Pomodoro is a good idea but a little boring -Long work cycles are common -Little to no breaks are common -We all sit too much. Try and enforce movement. The Problem with work / break cycles
  4. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Have configurable work cycles, max 1 hour -Have configurable break cycles, min 2 minutes -Try and enforce movement by ensuring phone moves a certain distance (x, y, z axis) A solution to bad work / break cycles
  5. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -SettingsIcon -CountdownTimer -CircularProgressBar (animated) -PlayPauseButton What components exist?
  6. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -CloseIcon -Slider -Checkbox (Toggle) What components exist?
  7. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Image -Progressbar (animated) What components exist?
  8. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Image -CountdownTimer -Progressbar (animated) What components exist?
  9. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Image -Button What components exist?
  10. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Image -Button What components exist? -SettingsIcon -CountdownTimer -CircularProgressBar (animated) -PlayPauseButton -Progressbar (animated) -CloseIcon -Slider -Checkbox (Toggle)
  11. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND -Do I write my own? Timers? -Should I use it or something else? SVG? -Do I even need one? Which Router? -Do I need it? Redux? -Accelerometer, magnetometer? step counter? Determine movement? -What can I use? Animated progress?
  12. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Getting Started -Follow the guides: https:/ /facebook.github.io/react-native/docs/getting-started.html -Recommend Genymotion for Android, much nicer -warning: setting up sdks properly can be -Assuming React Native is installed, is it up-to-date?
  13. From Idea to “Hey it Works!” cball_ Getting Started Lots

    of files you didn’t have to create.
  14. From Idea to “Hey it Works!” cball_ Tip! At this

    point, focus on a single platform. Note things to followup on.
  15. From Idea to “Hey it Works!” cball_ Folder Structure? A

    few community conventions but still a bit of wild west. Shoutout to Ignite but, I don’t recommend using to start.
  16. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND The Main Screen react-native-circular-progress
  17. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND The Main Screen react-native link
  18. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Top Level App Container
  19. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND The Main Screen - CountdownTimer
  20. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND The Main Screen - CountdownTimer
  21. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Let’s it! Animated Progress + Timer
  22. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Play / Pause Button react-native-vector-icons
  23. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Let’s it! Toggle + Button w/ Icon
  24. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Let’s it! Formatted Time
  25. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Let’s it! Settings navigation
  26. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Settings Screen Let’s it! Settings controls
  27. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND What’s with the green color on the slider and switches?
  28. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Settings Screen Let’s it! Theme change
  29. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Give yourself a hug! Things kind of work.
  30. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND When we navigate back and forth, data goes back to initial state. How to fix that?
  31. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Navigating back and forth Let’s it! Data gets reset
  32. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Option 1: Lift state to higher component Option 2: Implement Redux to manage state
  33. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Redux to Settings Screen
  34. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Redux to Settings Screen
  35. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Redux to Settings Screen
  36. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Rinse & repeat but with Timer actions/reducer
  37. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND The Break Screen Let’s it! Static screen
  38. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Using device sensors react-native-sensor-manager
  39. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Using device sensors Let’s it! Magnetometer data
  40. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Launch icons React Native generates these for us!
  41. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Persist Settings redux-persist just works
  42. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Persist Settings Add a loading screen Top of view stack in RootContainer
  43. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Persist + Loading Screen Let’s it! Launch, quit, relaunch
  44. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND YES! Things work better.
  45. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Theme Tweak Add a background to the window
  46. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Theme Tweak Let’s it! Loading is nicer
  47. From Idea to “Hey it Works!” cball_ OUR BET AT

    ECHOBIND Future Updates Better UI Debounce Redux Persist? Connect React Navigator to Redux Add local notifications - use in background Save stats Bring up to parity on iOS Still a ways to go
  48. From Idea to “Hey it Works!” cball_ THANKS! COME SAY

    HI, TELL ME WHAT YOU’RE WORKING ON. https:/ /github.com/cball/breaktivity