Merge pull request #33 from pybee/topic/tutorial

Update tutorials to include briefcase-template

docs/tutorials/tutorial-0.rst

@@ -18,47 +18,44 @@ This tutorial assumes you've read and followed the instructions in
 Start a new project
 -------------------
 
-Lets start by creating a ``iostutorial`` directory:
+Let's get started by using `the handy template <https://github.com/pybee/briefcase-template>`_ ``briefcase-template``:
 
 .. code-block:: bash
 
-    $ mkdir iostutorial
-    $ cd iostutorial
+    $ pip install cookiecutter briefcase
+    $ cookiecutter https://github.com/pybee/briefcase-template
 
-Now, we create our simple "Hello, world!" application:
+This will ask a bunch of questions of you. We'll use an `app_name` of "tutorial_0", and a 
+`formal_name` of "Tutorial 0". Set the other values as you like
 
-.. code-block:: bash
+You'll now have a few files in this folder, including ``tutorial_0``. 
 
-    $ mkdir HelloWorld
-    $ touch HelloWorld/__init__.py
-    $ echo 'print("Hello, World!")' > HelloWorld/app.py
+Check out what the provided ``tutorial_0/app.py`` file contains:
 
-.. note:: In ``ios`` the application entry point is always ``ApplicationName/app.py``
+.. code-block:: bash
 
-Finally, we have to add the setuptools ``setup.py`` script:
+    $ cd tutorial_0
+    $ cat tutorial_0/app.py
 
 .. code-block:: python
 
-    #!/usr/bin/env python
+    def main():
+        # This needs to return an object that has a main_loop() method.
+        return None
 
-    from setuptools import setup, find_packages
+This won't do much as it is, but we can make it useful. 
 
-    setup(name='HelloWorld',
-        version = '0.1.0',
-        packages = find_packages(),
-        options = {
-            'app': {
-                'formal_name': 'Hello World',
-                'bundle': 'org.example'
-            },
-            'ios': {
-                'app_requires': [
-                ]
-            }
-        }
-    )
+Add this into the ``app.py`` to make it useful:
+
+.. code-block:: python
 
-In the setup script we included the basic information of our application (``name``, ``version`` and ``packages``) needed by setuptools for deploying our application. Additionally, we added in the ``options`` the required configuration for ``briefcase``.
+    class MyApp:
+        def main_loop(self):
+            print("Hello world")
+            
+            
+    def main():
+        return MyApp()  
 
 Create an iOS project
 ---------------------
@@ -78,13 +75,13 @@ There is a new folder in your project called 'iOS', which contains the Xcode pro
 
 .. code-block:: bash
 
-    open iOS/Hello\ World.xcodeproj
+    open iOS/Tutorial\ 0.xcodeproj
 
 You can test the app by running it in Xcode. As our application only shows a message, the iOS application will show only a blank screen. You can check if it is working in the console logs, which should contain something like this:
 
 .. code-block:: bash
 
-    Hello World.app/Library/Application Support/org.example.HelloWorld/app/HelloWorld/app.py
+    Tutorial 0.app/Library/Application Support/com.pybee.tutorial0/tutorial_0/tutorial_0/app.py
     Hello World!
     2016-09-16 10:49:14.564094 Hello World[6791:4292188] subsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 1, privacy_setting: 2, enable_private_data: 0
 

docs/tutorials/tutorial-1.rst

@@ -1,9 +1,9 @@
 Tutorial 1- Toga Hello, World
 =============================
 
-In this tutorial you will create a simple ios application using toga framework.
+In this tutorial you will create a simple application using toga framework.
 
-Update your ios project
+Update your iOS project
 -----------------------
 
 In this step we assume that you followed the :doc:`previous tutorial <tutorial-0>`. First at all, you can clean your previous app
@@ -30,35 +30,68 @@ We are going to use the Toga framework, so we have to include the
       }
   )
 
-And now you can update the application, using, for example, the Toga Hello World
-found at <https://toga.readthedocs.io/en/latest/tutorial/tutorial-0.html>,
-modified to be class-based:
+And now you can update the application.
+
+We're going to use a version of the Toga Fahrenheit to Celsius converter tutorial found at <https://toga.readthedocs.io/en/latest/tutorial/tutorial-0.html>, modified to be class-based:
 
 .. code-block:: python
 
-    import toga
+  import toga
+
+
+  class Converter(toga.App):
+      def calculate(self, widget):
+          try:
+              self.c_input.value = (float(self.f_input.value) - 32.0) * 5.0 / 9.0
+          except Exception:
+              self.c_input.value = '???'
+
+      def startup(self):
+          self.main_window = toga.MainWindow(self.name)
+          self.main_window.app = self
+
+          # Tutorial 1
+          c_box = toga.Box()
+          f_box = toga.Box()
+          box = toga.Box()
 
-    class HelloWorld(toga.App):
+          self.c_input = toga.TextInput(readonly=True)
+          self.f_input = toga.TextInput()
 
-        def startup(self):
-            self.main_window = toga.MainWindow(self.name)
-            self.main_window.app = self
+          c_label = toga.Label('Celcius', alignment=toga.LEFT_ALIGNED)
+          f_label = toga.Label('Fahrenheit', alignment=toga.LEFT_ALIGNED)
+          join_label = toga.Label('is equivalent to', alignment=toga.RIGHT_ALIGNED)
 
-            box = toga.Box()
+          button = toga.Button('Calculate', on_press=self.calculate)
 
-            button = toga.Button('Hello world', on_press=button_handler)
-            button.style.set(margin=50)
-            box.add(button)
+          f_box.add(self.f_input)
+          f_box.add(f_label)
 
-            self.main_window.content = box
-            self.main_window.show()
+          c_box.add(join_label)
+          c_box.add(self.c_input)
+          c_box.add(c_label)
 
-        def button_handler(widget):
-            print("hello")
+          box.add(f_box)
+          box.add(c_box)
+          box.add(button)
 
+          box.style.set(flex_direction='column', padding_top=10)
+          f_box.style.set(flex_direction='row', margin=5)
+          c_box.style.set(flex_direction='row', margin=5)
 
-    def main():
-        return HelloWorld('First App', 'org.pybee.helloworld')
+          self.c_input.style.set(flex=1)
+          self.f_input.style.set(flex=1, margin_left=160)
+          c_label.style.set(width=100, margin_left=10)
+          f_label.style.set(width=100, margin_left=10)
+          join_label.style.set(width=150, margin_right=10)
+          button.style.set(margin=15)
+
+          self.main_window.content = box
+          self.main_window.show()
+
+
+  def main():
+      return Converter('Converter', 'org.pybee.converter')
 
 
 Create the iOS app
@@ -77,6 +110,50 @@ Open the iOS project with Xcode
 
 If you the ios project in Xcode you will see a Toga application:
 
-.. image:: screenshots/tutorial-1.png
+.. image:: screenshots/tutorial-1-ios.png
 
 If you click on the button, you should see messages appear in the console.
+
+Use the *same code*, but for the web
+------------------------------------
+
+Edit the ``setup.py`` file to include a package helper for Django:
+
+
+.. code-block:: python
+
+  setup(name='HelloWorld',
+      ...
+      options = {
+          ...
+          'django': {
+              'app_requires': [
+                  'toga-django'
+              ]
+          }
+      }
+  )
+
+
+Now you can invoke setuptools again:
+
+.. code-block:: bash
+  $ python setup.py django
+
+Once this process has completed, there are a couple of steps left (that are helpfully outputted by the last command) to setup the django project:
+
+.. code-block:: bash
+  $ cd django
+  $ ./manage.py migrate
+  
+Then, we can run the application:
+
+
+.. code-block:: bash
+  $ ./manage.py runserver
+
+If you open up ``localhost:8000`` in your browser, you should see the same application running in the web. 
+
+.. image:: screenshots/tutorial-1-django.png
+
+✨