|
1 |
| -# inKino - a showtime browser for Finnkino cinemas |
| 1 | +# inKino - a multiplatform Dart project with code sharing between Flutter and web |
2 | 2 |
|
3 |
| -<img src="https://github.com/roughike/inKino/blob/master/screenshots/now_in_theaters.png" width="33%" /> <img src="https://github.com/roughike/inKino/blob/master/screenshots/showtimes.png" width="33%" /> <img src="https://github.com/roughike/inKino/blob/master/screenshots/event_details.png" width="33%" /> |
| 3 | +<img src="_screenshots/now_in_theaters.png" width="33%" /> <img src="_screenshots/showtimes.png" width="33%" /> <img src="_screenshots/event_details.png" width="33%" /> |
4 | 4 |
|
5 | 5 | ## What is inKino?
|
6 | 6 |
|
7 |
| -inKino is a minimal app for browsing movies and showtimes for [Finnkino](https://finnkino.fi/) cinemas. It's made with [Flutter](https://flutter.io/), uses [flutter_redux](https://github.com/brianegan/flutter_redux), and has an [extensive set of unit and widget tests](https://github.com/roughike/inKino/tree/master/test). It also has smooth transition animations and handles offline use cases gracefully. |
| 7 | +inKino is a _multiplatform_ Dart app for browsing movies and showtimes for Finnkino cinemas. |
8 | 8 |
|
9 |
| -While I built inKino for my own needs, it is also intented to showcase good app structure and a clean, well-organized Flutter codebase. |
| 9 | +InKino showcases Redux, has an extensive set of automated tests and **40% code sharing between Flutter and web**. |
| 10 | +The Android & iOS apps are made with a single [Flutter](http://flutter.io) codebase. The progressive web app is made with [AngularDart](https://webdev.dartlang.org/angular). |
| 11 | +This project is generally something that I believe is a good example of a multiplatform Dart project. |
10 | 12 |
|
11 |
| -The source code is **100% Dart**, and everything resides in the [/lib](https://github.com/roughike/inKino/tree/master/lib) folder. |
| 13 | +I plan on doing a full article series on multiplatform Dart stuff, so you might want to [check out my blog](https://iirokrankka.com) and subscribe to it. |
12 | 14 |
|
13 | 15 | <div>
|
14 |
| -<a href='https://play.google.com/store/apps/details?id=com.roughike.inkino'><img alt='Get it on Google Play' src='https://github.com/roughike/inKino/blob/master/screenshots/google_play.png' height='40px'/></a> <a href='https://itunes.apple.com/us/app/inkino/id1367181450'><img alt='Get it on the App Store' src='https://github.com/roughike/inKino/blob/master/screenshots/app_store.png' height='40px'/></a> |
| 16 | +<a href='https://play.google.com/store/apps/details?id=com.roughike.inkino'><img alt='Get it on Google Play' src='_screenshots/google_play.png' height='48px'/></a> |
| 17 | +<a href='https://itunes.apple.com/us/app/inkino/id1367181450'><img alt='Get it on the App Store' src='_screenshots/app_store.png' height='48px'/></a> |
| 18 | +<a href='https://inkino.app'><img alt='Get it on the App Store' src='_screenshots/launch_pwa.png' height='48px'/></a> |
15 | 19 | </div>
|
16 | 20 |
|
| 21 | +## Folder structure |
| 22 | + |
| 23 | +There's three different folders. Each of them is a Dart project. |
| 24 | + |
| 25 | +* **core**: contains the pure Dart business logic, such API communication, Redux, XML parsing, sanitization, i18n, models and utilities. |
| 26 | +It also has a great test coverage. |
| 27 | +* **mobile**: this is the Flutter project. It imports **core**, and it's a 100% shared codebase for the native Android & iOS apps that go on app stores. |
| 28 | +* **web**: the AngularDart progressive web app. Also imports **core**, and it's the thing that is live at https://inkino.app. |
| 29 | + |
| 30 | +To work on these projects, open each one of them in an editor of your choice. |
| 31 | + |
| 32 | +For example, if you want to do a new feature and you do it for the Flutter project first, you'd open both **core** and **mobile** in separate editor windows. |
| 33 | +To clarify, you'd do `File -> Open...` for core and then `File -> Open...` again for mobile. |
| 34 | + |
| 35 | +## Development environment setup |
| 36 | + |
| 37 | +* [Install Dart for the web](https://webdev.dartlang.org/tools/sdk#install). The customized Dart version Flutter ships with is not suitable for web development. |
| 38 | +* Install [webdev](https://webdev.dartlang.org/tools/webdev) by running `pub global activate webdev`. This requires that you ran your Dart installation properly and Dart is part of your PATH. |
| 39 | +* Install an IDE. You can't go wrong with [WebStorm](https://webdev.dartlang.org/tools/webstorm). If that doesn't tickle your fancy, [there are other options too](https://www.dartlang.org/tools#ides). |
| 40 | +* Install the Dart plugin for your IDE. |
| 41 | + |
| 42 | +Finally, if you haven't already, [install Flutter](https://flutter.io/docs/get-started/install). |
| 43 | +And the Flutter plugin for your IDE. |
| 44 | +At the time of being, inKino is built with **Flutter 0.10.2**. |
| 45 | + |
| 46 | +If you don't like IDEs, [you can apparently use Emacs or Vim too](https://news.ycombinator.com/item?id=16822780). |
| 47 | + |
17 | 48 | ## Building the project
|
18 | 49 |
|
19 |
| -While it should work on older versions as well, the project is currently built with Flutter `v0.2.3` on the `beta` channel. |
| 50 | +### Renaming the TMDB configuration file |
20 | 51 |
|
21 |
| -It won't build unless you add the following file manually: |
| 52 | +You don't need a TMDB API key, but the actor images won't load without it. |
22 | 53 |
|
23 |
| -**lib/tmdb_config.dart** |
| 54 | +If you try to build the project straight away, you'll get an error complaining that a tmdb_config.dart file is missing. |
| 55 | +To resolve that, run this on your terminal in the project root: |
24 | 56 |
|
25 |
| -```dart |
26 |
| -class TMDBConfig { |
27 |
| - /// The TMDB API is mostly used for loading actor avatars. |
28 |
| - /// |
29 |
| - /// Having a real API key here is optional; if this doesn't |
30 |
| - /// contain the real API key, the app will still work, but |
31 |
| - /// the actor avatars won't load. |
32 |
| - static final String apiKey = '<YOUR_API_KEY_HERE>'; |
33 |
| -} |
| 57 | +```bash |
| 58 | +cd core/lib/src && mv tmdb_config.dart.sample tmdb_config.dart && cd ../../.. |
34 | 59 | ```
|
35 | 60 |
|
| 61 | +**OR** |
| 62 | + |
| 63 | +If you don't trust in random bash scripts copied from the Internet, you can just rename the `tmdb_config.dart.sample` to `tmdb_config.dart` manually. |
| 64 | + |
| 65 | +### Building from source |
| 66 | + |
| 67 | +First, ensure that you followed the "Development environment setup" section above. |
| 68 | + |
| 69 | +* To run the **web project**, first run `pub get` initially, and then `webdev serve` in the root of the web project. |
| 70 | +* To run the **Flutter project**, open it in your editor and click the play button, or run `flutter run` on your terminal. |
| 71 | + |
36 | 72 | ## Contributing
|
37 | 73 |
|
38 |
| -Contributions are welcome! However, if it's going to be a major change, please create an issue first. |
| 74 | +Contributions are welcome! |
| 75 | +However, if it's going to be a major change, please create an issue first. |
| 76 | +Before starting to work on something, please comment on a specific issue and say you'd like to work on it. |
| 77 | + |
| 78 | +## Thanks |
| 79 | + |
| 80 | +Special thanks to [Olli Haataja](https://www.linkedin.com/in/olli-haataja-46b96b120/) for the design. |
| 81 | + |
| 82 | +Additional thanks for the initial release go to [Thibaud Colas](https://twitter.com/thibaud_colas), [Brian Egan](https://twitter.com/brianegan), [Alessandro Aime](https://twitter.com/aimealessandro) and [Juho Rautioaho](https://github.com/Jraut) for giving their extra pair of eyes for reviewing the source code. |
0 commit comments