Jellyvision Field Trip Debriefing
Last Friday, on a day off from school, 9 of our members enjoyed an amazing day at Jellyvision, getting an inside look at what it is like to work at this tech company in a very wide variety of different roles, technical, business, and creative. Many of the brilliant and talented people at Jellyvision gave their time to make this a very special event for all of us. Kate from Jellyvision will be attending our meeting this Friday and we will have an open discussion about the experience and insights gained. How were you inspired? What did you learn?
Continue Developing Web Service and Client
We will work in our Web Service and Swift teams to continue developing the Weather Wear Service and the Swift client app to send a request to the service and display results.
Some notes on what we have so far in our Swift Client:
Consuming a Web Service in Swift
We will meet at our usual time and place: 5:45 PM at 25N Coworking
Finalize Plans for our Jellyvision Field trip!
Continue working on our multi-component Weather Wear software :
Review overall solution architecture:
- Lucid Chart diagram by Robin
C#/Swift Tutorial: Learn/review some object-oriented concepts
- Classes and Objects: Properties (values) and Methods (behaviors defined in functions/procedures)
- How are they defined and used in C#? In Swift?
- Objects as Models for Data:
- What is the data model for the JSON returned from the Weather Underground API Request for the Forecast?
- What is the data model for the JSON returned from the API of the WeatherWear Web Service we are building?
- Can/should the WeatherWear data model inherit the Weather Underground Forecast data model?
Web Service Team:
- Merge Web API code with the GitHub Repo
- Continue work on algorithm and implementation of the WeatherWear Web Service and the console app to test it
- MVC: Model/View/Controller design pattern
- Model represents the data model defined in a class; we will create a model class for the Weather Forecast, and later for the WeatherWear API Response
- View is the Presentation Layer, i.e, the screen the user sees
- Controller: Code that handles the user input, talks to the model, handles interactions between Model and View. In Swift, we will define a Class for the controller; there will be a ViewController Class defined for each View
- Review/Learn how to connect UI elements to code. Elements in the UI designed on the storyboard need to be connected to code in the appropriate controller:
- @IBOutlet: in a code module, an Interface Builder Outlet is a variable that holds a reference to an element on the storyboard. Example: our screen has a label to display a city name and we need our code to be able to access it. We add this to our view controller:
@IBOutlet weak var cityLabel: UITextField!
- Start setting up the code to send the Web API Request for WeatherWear
- We will initially set up code to access the existing Weather Underground Forecast API
This week we will continue working in our smaller teams developing the Web Service and the iOS app.
Web Service Team:
Last week the team completed the tutorial Create a Web API with ASP.Net Core MVC and Visual Studio for Mac or the equivalent version for Windows Create a Web API with ASP.Net Core MVC and Visual Studio for Windows
The team successfully completed the parts of the tutorial that got a Web Service running locally and allowed users to exercise GET requests
This week, we can use that foundation to add a new controller to the project to handle the GET request for our custom Weather Wear service that will return a JSON Response. The team can talk through design approaches and algorithms to decide what exactly the service should do and what additional components are needed. For example:
- Should there be a Class library that will handle :
- Sending a Request to the Wunderground API to get the weather?
- Parsing the JSON results? How much of this is this needed here? Should the client of our API do some of this?
- Logic to determine what our custom Response should add to the Response of the Weather Service
- Define a Class that is a Model for our custom objects?
- For the Controller for our Web API:
- What parameters (if any?) should our GET Request(s) take?
- Do we want more than one form of GET Request? Request by Zip Code? Request by City/State? Any others?? Decide on one for the initial iteration.
- What Route name would we use? Attribute Routing in Web API
- Take a look at Robin’s prototype code that includes a Web Service, a Class Library, and a Console App as Client
iOS Swift Team:
Last week, the team successfully completed the Hello World tutorial in the first chapter of the book Coding iPhone Apps for Kids The link is to the book on Amazon where you can download the first Chapter as part of the free Sample. Following the tutorial, we were able to run the Hello World app on our iPhones/iPads attached via USB to the Macs running XCode. However, we did run into one problem with “provisioning” where an Apple ID used to sign the code was not getting successfully recognized as provisioned. Apple requires all Apps to be signed with a valid id in order to run on any attached device. It may just have been a slow lag time in having the credentials go through. We will take another look at it if still an issue. This is a forum that explains a bit about dealing with the issue: Forum discussion on iOS signing and provisioning issue
This week the team can work on developing the User Interface for the App using the Storyboard in XCode to add “views” to the screen. In XCode a View is an object on the screen (a more generic description would be a widget) . Some are controllers with which the user can interact (buttons, switches, text input boxes, etc.) and some are display only, such as labels. Design the view for the app, determining what is appropriate for input and display.
- What will the Web Service need for us to send the Request? Will it be Zip Code, City/State? Check with the Web Service team to find out their specifications for the Request. Provide the appropriate user experience for inputting the required information. Think about restricting the input to valid values. If a Zip Code is required, what can we do to make sure the user only enters digits and that it is in proper format? If we need a State is there a way to only allow selection of a valid state abbreviation?
- When you get the results back from the Web Service API Request, how should it be displayed? What information do you want to display?
- Do you want more than 1 screen? One for Request and one for Response? Or some other design
- Add the appropriate views (widgets) for entering the Request and displaying the Response
- We will take an initial look at how to hook up code to our UI:
- Look at the ViewController.Swift class that is created automatically by the project
- Add code in the ViewController that connects our “views” on the StoryBoard to the code; we will do this by control-dragging from the view to the code
- @IBOutlet: Each outlet becomes a property in our ViewController class that is connected to a View (widget) on our screen. This allows us to use code to get or set the value as appropriate
- @IBAction: This becomes a method of our ViewController class that is connected to an Action such as a Button is pressed, the screen is swiped, a gesture is made, text is entered, etc. We set up the connection here, and then write code in the method to say what should happen when the action occurs
Tutorial: This Apple Tutorial explains in detail how to connect UI Elements to Code
Onward with our multi-component Project!
Last week we decided on an overall purpose for our project. We will create a Web service and several different Clients to consume the service. Today, we will break into our teams to work on development of these components.
- Review discuss overall project plan: role of Web Service and what each client component will do
- Goals: set up your development environment; decide on pairs to work together on the coding; use a tutorial to develop a sample to familiarize yourselves with the use of the IDE (Integrated Development Environment) and learn a bit about the language
Web Service Team:
- Get started developing the Web Service in C# using Visual Studio 2017 Community Edition
- Visual Studio Community Edition 2017 free versions for Windows or MacOS
- This is a nice tutorial for getting started with a sample Web Service and has versions for Mac and for Windows: Create a Web API Windows version Create a Web API MacOS version
- We will only be using the GET Request for our project, so you can focus on that when going through the above tutorial
- Look at the sample POC (Proof of Concept) code from Robin’s GitHub for a Web Service calling the existing Weather Service and for the console app that calls the new Web Service. See the Web Services channel in Slack
- Decide on what the REQUEST from the Client needs to look like and what your Web Service RESPONSE will look like. What is the JSON object structure?
Swift IOS Team:
- Get started developing an app in XCODE using the Swift programming language that will consume the Web Service, i.e. send it a REQUEST and process the RESPONSE
- XCode: Install XCode version 9 from the App Store; it may also require you to update your operating system. This can be a very slow process as we saw last week, so if your machine isn’t set up yet, we will just share the Macs that are ready and get the others started with the installation.
- Get Sample Chapters of Book: Coding iPhone Apps for Kids: This is a very nice book for learning Swift. Try the free sample chapters! You can get the free sample from Amazon (Chapter 1 and part of Chapter 2) and you can get Chapter 3 for free from the Book’s Web Site at NoStarch Press:
- Create a simple Hello World project to get familiar with the IDE; we can use the example in Chapter 1 of the book for this
- Run your sample code on your phone!: Attach your iPhone or iPad to your development Mac using the USB cable while running your project in XCode. Chapter 1 of the book explains how to do this. One additional thing that may crop up that is not in the book is that you may get a message like this when you try to run the app “Codesign wants to access key ‘access’ in your keychain”. If this appears, you need to enter your Mac login id (not your Apple id).
- For more practice and help using the XCode IDE and Swift, Apple has a good Swift Tutorial from Apple Developer Site
- Design your UI (User Interface): decide what types of “widgets” should be on the screen. Should there be more than 1 screen?
- Start building the initial iteration of the UI by adding elements to the story board
- Last week we also discussed building additional Clients, including:
- AppInventor: Web-based IDE with coding blocks for Android devices
- C# Console Application: simple application build in Visual Studio to call the Web Service and display a result
- If anyone wants to work on one of those teams we will help you get started. Or we can circle back to those in a couple of weeks….
Web Service Overview:
Check out this tutorial for more on JSON: W3C Schools JSON
Sample Code for various types of Clients calling the Weather Underground Service: Wunderground API Call Samples
Visual Studio C# Example of a Web API Client: Calling a Web API from a .NET Client
Take a look at our updated “Why” Page
Check out the updated list of summer opportunities and more….
Planning Session for multi-faceted solution
Tools: Depending on what components we decide to develop, we will identify which software tools are needed so that we can get everyone started on setting up their laptops as appropriate. Some of this configuration may need to be done later at home.
Setting up for iOS Development on a Mac with XCode/Swift:
Please bring your iPhones and/or iPads to the meeting along with their USB cables so we can connect it to the Mac to run Swift apps.
We will be coding in pairs or small groups so even if you don’t have your own Mac you will be able to do everything.
To Set Up a Mac:
- You will need an Apple ID, which you probably have if you have ever downloaded anything from the App Store
- You do not need a paid Apple Developer ID at this point; that will only be required if you want to put your apps in the store
- From the App Store download and install XCode
iOS Apps with Thunkable
We will take a deeper look at building apps with Thunkable, perhaps doing a simple prototype for part of the multi-project solution we are designing
Mobile Application Development Starts this Month!
Join us as we learn to build applications for our phones and tablets. We will be taking a look at all this over the next couple of months:
Tonight we will build apps for iOS mobile using Thunkable! So please bring your iPhone or iPad to the meeting.
First a little overview on Mobile App Building…
- Programming Languages depend on whether you are building the app for an iOS device or an Android device
- Native programming languages are the coding languages understood specifically by a target operating system
- Swift or Objective-C for Native iOS apps: requires a Mac to build and test; Objective-C is very old and Swift is much more widely used now
- Java for Native Android apps: can be developed on Windows or Mac
- Cross-Platform programming builds apps that work on both Android and iOS devices and more
- Xamarin provides developers with a full-featured IDE for building apps in C# that can run on Windows, iOS, and Android devices. The coding can be done in Visual Studio for Windows or for Mac but the iOS apps do require connection to a Mac for building
- Drag and Drop App Builders with coding blocks: Drag and drop UI components (buttons, images, text, etc.) onto a mockup of the phone’s screen; then use the blocks editor to build your program’s code by drag and drop as well. Behind the scenes the blocks are compiled into the native code that is understood by the target device.
- MIT App Inventor currently provides only Android builds but they are in the process of developing iOS capabilities too
- Thunkable allows you to choose either iOS or Android coding environments and that is what we will use today to make our apps!
Now Let’s THUNK!
Install Thunkable Live on your iPhone or iPad: go to Apple’s App Store and get the Thunkable Live app. You will use this to test your Thunkable apps as you are developing them
Start up Thunkable: Supported Browsers are Chrome, Firefox, and Safari. Go to Thunkable and get started by clicking the “Get your App Started” button; when prompted “I want to create apps for” select iOS
Logging into Thunkable: use your Google account to register and sign in
We will do the five introductory tutorials together to get familiar with the interface and some of the functionality:
Thunkable Hour of Code Tutorials
Build and modify a Weather Forecast Application!
In the Thunkable Documentation click the Sample Apps link and find the Weather app. Click “Copy the app source code” to create a copy of the app in your own Thunkable iOS projects.
The weather app is an example of using a Web Service; we will look at this in more detail and together will figure out how to modify the app to show the weather in our own location and perhaps to display additional information.