Over the course of our meeting planning and preparation we have developed a series of “How To” documents as reference material for the projects we work on. We are putting these together into our on-line library for easy reference. Starting off, we have documents on Web site development with Glitch and GitHub, Responsive Web Design with Bootstrap, Python Flask for Web Development, and Visual Studio Code for Web Development. We will be adding more and updating along the way.
Author: Dottie
January 31, 2020 – Meeting at 25N
We will follow the agenda posted for last week’s meeting.
January 24, 2020 -Meeting at 25N
January 24th meeting cancelled due to weather! We will follow this agenda for the January 31st meeting
AGENDA & NOTES:
WELCOME/REVIEW
- Welcome any new members
- Make sure everyone is signed up in GroupMe, Slack, Codesters, and GitHub
- Any questions, comments, or ideas from our last meeting?
- Any additional info/skills/setup needed for members attending Hack For the World hackathon in Naperville on February 1
- Sustainable Development Goals
https://sustainabledevelopment.un.org/?menu=1300
- Sustainable Development Goals
Set up Mac and Windows laptops for:
- Python, pip (Python’s package installation manager), and IDLE
- Practice Python Create a simple Python program using terminal or command window and/or IDLE
- Practice pip: Use pip to install PyGame and Kivy
- PyGame: modules for creating Python games including Sprites, sounds, and more
- Kivy: framework for creating cross-platform UI in Python
- Practice: create a simple app in kivy
- Visual Studio Code: Code editing with rich editing capabilities,including Intellisense, debugging, code snippets, and more
- Practice: create a simple Python program in VS Code
- Practice: Edit a PyGame in Visual Studio Code
Instructions for installing all of the above:
More Good Stuff to Try:
Enhanced Python Flask app on Glitch: We previously looked at a simple Python Flask app together that accepted user input for a Dream to add to a list kept in memory. We now have a working prototype that incorporates a Snake game and uses persistent storage to keep a leaderboard in a file https://glitch.com/~rainbow-brie
Classes: Use of Class as a data structure in Python. May demonstrate/practice in Kivy and is also used in the above Python Flask app
Web Sites in VS Code/Connecting VS Code to Glitch: We will not have time to do this as a group during tonight’s meeting, but if anyone is interested in creating/editing/debugging Web sites in Visual Studio Code and/or connecting your Glitch projects to Visual Studio code for editing here is a guide: Web Sites and Glitch in VS Code
January 17, 2020 Meeting Cancelled
** No Meeting Tonight** Due to weather. See you all next week on January 24th at 25N at 5:45
January 10, 2020 – Meeting at 25N
As we start off our 2020 New Year we will meet at 25N tonight.
Agenda & Notes:
Welcome/Review
- Welcome any new members
- Make sure everyone is signed up in Slack, Codesters, and GitHub
- Any questions, comments, or ideas from our last meeting?
- Review basic Web site creation on Glitch
- These are the tutorial documents from our last meeting for anyone who missed them:
New or Continued Topics for Tonight
- Discuss plans for the Naperville hackathon
- Hack For the World Web site
- What type of technology would you like to use?
- Build a Web site
- Create a game?
- Other ?
- What skills should we practice in preparation?
- Enhance your Web site with Bootstrap
- Bootstrap is a framework that makes Web sites look beautiful
- Change themes easily with Bootswatch Themes
- We will do a demo together to get this into everyone’s project
- Help with setting up Python environment on laptops as needed/wanted
March 23, 2018 Meeting
Coding Tonight!
Tonight’s meeting will focus on continuing the development of the WeatherWear Web Service and the Swift app to consume the Web Service.
Notes on Swift String Interpolation Issue with Optional variables:
String Interpolation in Swift: the term “string interpolation” refers to creating a character string that pulls values out of one or more variables and combines those values with other characters to form a string. The entire expression is enclosed in double quotes and each variable within the string is preceded by a backslash and enclosed in parentheses. Example “Hello \(name)” will print “Hello Gandalf” if Gandalf is the value in the variable name.
Optional Variables in Swift: Swift is strongly typed and insists that if there is a possibility that a variable (or constant) may not have a value at some point when the program is running, then it must be declared as optional. The variable may then either contain a value of the declared type or may be nil. The purpose is to avoid the null reference errors that can occur in other languages when someone tries to use a variable without a value. Declare a variable as optional by putting a question mark at the end of the type such as our WeatherForecast:
var forecast: WeatherForecast?
When using the values in an optional variable, the variable needs to be “unwrapped”, like removing it from a box. Consider a cardboard box labelled “Weather Forecast”; you can open it up to find a forecast object or you can find nothing, so you can’t treat it as if there is always a value there. There are several ways to unwrap and to check what is in the box, but for this problem we will force unwrapping explicitly.
The Problem with String Interpolation with Optionals:
When we tried to display the temperature in either Fahrenheit or Celsius by drilling down through the many nested levels of objects in our WeatherForecast we were getting this warning and the text on screen was gibberish:
The fix is to explicitly unwrap the values at each object level by putting an exclamation point in place of the question mark in multiple places, i.e., after each object name within the long nested object:
March 16, 2018 Meeting
Continue working on project teams for:
- Weather Wear Web Service in C#
- Swift client to consume the Web service and display results
Data Model Classes so far:
- Both of our projects already have Class definitions that we created to represent the results of the Web Service call to Weather Underground’s Web API for the forecast
- To allow the automatic decoding of the response to map to our defined Classes, the Property names in these class definitions must match the exact names of the names in the JSON object coming from the Web API Response, including Case sensitivity
- If a Property name conflicts with that of a reserved word in the language we are using (C# or Swift) the name must be “escaped” using a special character. An example is “in”, used for inches in the API Response
-
- In C# precede the name with “@”, so use “@in”
- In Swift enclose the name in back-ticks, ‵in‵
-
- WeatherWear C#:
- In the C# solution “WeatherWear”, the Class Library project “WWClassLib” has a Models folder to hold our Class definition(s) for the Web API data models. These data model classes correspond exactly to the JSON object(s) returned in the API Response
- Forecast.cs is the C Sharp file that defines the classes for the Forecast API response in a fairly complex nested class structure with multiple layers of classes within classes
- The top-level class is named “RootObject” in our model
- Weather Swift:
- In the Swift solution “Weather”, we also created a Models folder to hold our Class definitions for the Web API data models corresponding to the JSON
- WeatherForecast.swift is the Swift file that defines the model classes, using the exact same nesting structure as in the Web API’s Response and in the WeatherWear C# solution
- The top-level class is named “WeatherForecast” in our model
Should we use Object Inheritance to model the custom API Response?
- The Web Service team is working on the engine to process the Response from the Weather Underground Forecast API and determine what to wear. This will then be used in our custom Web API to enhance the results from the original Response by adding one or more properties that contain the wardrobe advice
- The Swift team will need to add a Web Service call to the custom API so the wardrobe advice can be displayed along with selected information from the forecast
- Both teams already have the “base” Model classes defined, are able to map the “base” API response to the Model, and are displaying selected fields on the console or on the app’s screen
- Should we agree on a new Model definition that “inherits” the original but adds the custom fields needed for Weather Wear? Both Swift and C# would use the same property names. Inheritance allows us to extend an existing Class, creating a new Class that contains all the same Properties of the base Class but adding new ones.
March 9, 2018 Meeting
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:
February 23, 2018 Meeting
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:
- Tools:
- 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
-
Swift Team:
- 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:
- MVC: Model/View/Controller design pattern
@IBOutlet weak var cityLabel: UITextField!
-
-
- @IBAction: in a code module, an Interface Builder Action is a function that is connected to a user interaction with a UI element. Example: update the city label when the user clicks a button. We add a connection between the function named GetWeather and the button; then define the action inside the function
@IBAction func GetWeather(_ sender: Any) { cityLabel.text = “Geneva” }
- @IBAction: in a code module, an Interface Builder Action is a function that is connected to a user interaction with a UI element. Example: update the city label when the user clicks a button. We add a connection between the function named GetWeather and the button; then define the action inside the function
- 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
-
February 9, 2018 Meeting
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