DEV Community: Lankinen

Testing Startup Idea in 6 Days

Lankinen — Wed, 26 Aug 2020 08:22:43 +0000

This article is about how I tested a hypothesis I had by building a website in 3 days. It's not my first time building something to test business hypothesis but this time I wanted to do it faster and document the processes.

Hypothesis

The hypothesis is that people enjoy commenting 💩 and reading 😖 comments about news the same way they do with YouTube videos. There are some news sites offering comment option but I don't like all of them. For example Hacker News is great website but the "news" (sometimes just Wikipedia article) rarely interest me.

How to test the hypothesis?

The first step is to think how to test this hypothesis 👉AS EASILY AS POSSIBLE👈. The goal is to not build first version of the final product but test the hypothesis. If you can do it by interviewing people, then start with that.

I can't do a newsletter because commenting would be a problem. I could go some kind of forum and try to get people talk there. Or maybe Reddit. The thing is that it's always difficult to get first 100 people to even look the idea. On Reddit it would be a huge problem to get enough people to even look the subreddit. I couldn't say that people don't like the idea but it might be just that not enough people saw it.

There is a trick 🧙‍♂️. Site called Product Hunt. It's a website where users can post products (own or someone else). Other users can up vote 👍 them which increase their placement in the daily feed.

Product Hunt is a great way to get a lot of people to look the idea. You can't publish a form or subreddit on Product Hunt but it needs to be a product. That's why I need to build something I can publish on Product Hunt.

I decided to do a simple website 💻. There is no point of listing all possible news as the comments would spread. That is why I need to show only top x news of the day. I decided that 10 news a day is good.

One problem with 10 news a day is that I can't please everyone. I need to start with some small group of people. Because my goal is to launch this on Product Hunt, I should build it for the Product Hunt users. They are mostly startup and technical people (like me 🙂). I still want to list at least 3 news about some big topics and not just some niche tech news.

The step number two when building something is to decide what the MVP looks like. Most of the people should create exact list of things they want to be in the MVP because otherwise they start adding more and more features. This happens so easily and in many forms that it's hard to notice it until it's too late. I have done that mistake in the past a few times 🤦 and feel like I have learned to sense when to build something or not. I still do high level list of features for MVP.

MVP:

Show 10 news that change every day (I'm deciding them)
Users can comment news and reply other people's comments
Users can like and dislike comments (to show the best comments and hide spam or trash comments)

Okay so now I have a good plan. The idea is to create Product Hunt launch and see how people respond. If everyone churns the same day, I just assume that the hypothesis wasn't right. 🤞

In Lean Analytics book the authors said how you should have exact definition of success because otherwise you might end up the worst situation possible, which is that you get stuck to idea that works but never becomes big. At this point I don't believe it make sense to do that kind of goal because MVPs are not for everyone (some expect good looking and ready products) and you learn probably something big. If it seems like people like the idea and you do the next version, it's time to define the goal.

The opposite is to look when to quit. Especially when doing something bigger, I have found it the best to do Quitting Contract (from The Dip book). There you define the situation where you quit. Too often people end up "living dead" zone where they try a bunch of stuff without understanding that the core hypothesis doesn't work. And some people in the other hand quit too early because they face the first problem. With smaller projects like this, it's easier to do more rational decisions as I haven't invested that much time.

Building

The final website is here: https://comment-news.web.app/

15th

I spent ~2 hours coding. I decided to use ReactJS because I'm familiar with it which allows me to build stuff faster and there aren't any limitations at this point.

I always do mockups using notepad and pen instead of tools like Figma. The reason is that I can do these in a few minutes when, at least for me, it would took much longer to do it on Figma.

I'm bad at estimating but I believe I can do this during the next week. Because there is no external deadline, I don't feel like I need to do any deadlines for myself either.

At this point I don't do any kind of TODO list of all the tasks. I think it's just faster to have high level view and then plan more accurately in daily or task basis. I make TODO every evening for the next day.

16th

1.30 pm

5.00 pm

🌅 end of the day

I got the website pretty far. I still need to add a lot of functionalities to the buttons and setup database. Right now I'm using hard coded data.

17th

11am - After making reply work, the code starts to get complex so I will spend some time cleaning 🧹 it. This is something I do once in a while. I don't really plan ahead but just build stuff. This approach always causes hard to read code. It's pretty easy to then just take an hour or so and clean it. I have found it much faster than trying to plan everything ahead and write clean code right away.

2.30 pm - The code is polished and now it's much easier to work on other stuff. I made replying work properly.

3.30 pm - Sorting is ready. I don't think having ability to sort by date is something people will use a lot so I could leave it out but I added it anyways because it kind of came automatically after doing vote sorting that's anyways needed.

"It was easy to add" is often the reason why MVPs have a lot of features and it's not a good thing. MVP should focus only the core feature and everything else should be left out even if it's easy to add and doesn't seem to make the code much complex.

Locally everything is ready. The next I will setup database. I decided to use Firebase because it's again something I'm familiar with and it's not causing any limitations at this point.

When I was coding the website I had some hard coded data. I used it only through one file. Now it's easy to just change this file to use database.

6.30 pm - I got the database working.

8.00 pm - Fixed some small things and everything seems to be working fine. I still need to improve the UI but the next thing I'm going to do is a tool I can use to submit the news everyday.

I don't really care what it is going to look like because I'm the only one using it. I need some UI and possibly also ability to use it on my phone so it's probably the best to just create another ReactJS website. I actually put it to the same website but under some secret 🤫 path and behind a password.

18th

9.00 am - I'm working on dev tool that I can use to add news to the feed. I'm not going to make it secure because it requires too much work. Basically anyone can add news to the feed but it's not so easy that people without technical skills could do it.

10.30 am - Dev tool is ready. The next job is to improve UI of the website. I try to keep it simple because I'm not good at designing websites.

I like to put bright colors 🌈 to different elements at this point to easily see all paddings and the size of them. Some people go 🥜 when they see this, thinking that I'm going to make it look like this.

Emojis 🗿 always make everything look better.

1.30 pm - Small break 🌮

2.00 pm - Back to code 🧑‍💻 (or more like this 👉 💻🖥🖥)

I'm not sure if the website looks like this on my iPhone because the pixels aren't exactly right even though Chrome says it should look like this.

With "right" numbers it should look like this which is much better.

I try to deploy it at this point so I can easily test it on my real phone. I'm going to again use Firebase for this because they have great hosting solution that's super easy to setup for ReactJS projects.

Okay it looks like the first image which is the worse 😟

Got it! 🎉

It's 2.30 pm and the final UI related thing is the feed. This is what it looks like right now.

I don't want to touch it much. I like this kind of colorful design. I want to change the color of text, I need to decide how multiple items will look, and I will add a button to the right side in case people don't understand that the text is link.

This might make someone with better color sense to 🤮 but it looks cool, imo, so it's fine.

I don't think you should take everything in the product too seriously and try to make it look like some big corporation did it. Do things that make you happy and the users will notice it and like it more than trying to pretend a big company.

3.15 pm - Icon done. I just took news paper emoji 📰 and put it top of the blue color I used on the website. The name is at least for now "Comment News". I bet most of the people don't pay attention to these things and that is why I don't either.

The next I add the most important thing, analytics.

4.00 pm - I decided to use Google Analytics because again I have used it in the past and it's not limiting anything at this point. I track page loads to see how many people visits but also button clicks to see how active they are. Basically I just want to see how many people came to the website, how many of them return later, and do they vote, comment, or do any other action.

5.00 pm - I'm interested to not just see if people want to comment news and read other people's comments but also see if they like the format of getting 10 news a day. It saves a ton of time and often 10 is enough to stay updated of everything. That is why I added an input box where users can put their email to get the feed sent to their inbox everyday. I'm not going to implement that feature right away but I collect emails to database to see the demand but also have them later if needed.

I'm going to take a break to eat something and then I will figure out what to do next.

5.45 pm - Okay, so I thought that it's really important to have users because the whole point of the website is the comments. Because I need to start from zero, I need to pretend like there are users. I thought about doing some kind of automation where I scrape tweets from Twitter 🐦🔫 and submit them as comments (assuming that I find a thread where people talk about that news) but then I realize that it's probably too much.

The whole point of this experiment is to launch it on Product Hunt and then just see how they respond to it. I need to add a lot of comments at least the first day so that when the Product Hunt users come to the website they think that it's used a lot. Then hopefully those users start to comment the news, the next day. But to make sure there is always comments, I could also make fake comments for the second day. After that I might do some fake comments but the goal is that users start to comment or the website doesn't work and I shut it down. So there are only 1-3 days when I seriously need to write comments and it's faster to do them manually than trying to create some scraping tool.

I thought about buying a domain but I don't want to spend $1 for .xyz because I'm not sure if it's any better than the subdomain Firebase is offering and $9 for .com is too much for my wallet 💰 (I'm cheap).

The only thing left is to prepare Product Hunt launch. The same time I will initialize database for tomorrow. I will do the final review of every feature to make sure there aren't any major 🐛.

8.00 pm - I haven't though much about picking top 10 news but when I started doing it, I realized how hard it actually is. I first opened a bunch of different news sites and tried to find if there are some overlapping topics. There kind of were but then in some news I wasn't sure if they were about the same topic. I right away realize that it requires too much time. Then I went to Google News. They list pretty well the most interesting topics from different categories and the best is that they collect "all" the sources talking about that topic.

I started manually picking topics and trying to copy paste all the articles to notepad but after 30 minutes and 3 topics I realize how much time it would take 🤨. I don't need to do it that many day but it's still too much work for me. I needed to create a scraper.

When building automation for MVP, it's important to think how much it takes to build it and how much time it saves. It's often hard to estimate but I would say that only automate stuff that saves you double the time it takes to build. Just because often software building estimations seem to double.

The scraper takes URL of the topic and then it scrapes 5-10 sources (I don't want too many) and information about them. In the future, I could easily automate it in a way that it also picks the topics removing all work from me but I rather do it manually first to make sure the topics are interesting

The scraper is almost ready. I will continue tomorrow. I believe that I'm available to launch the website on Product Hunt the day after tomorrow.

I want to highlight that this is what always happens. I was ready to take the screenshots and launch the website tomorrow but then I realize something I didn't notice before which causes one extra day. This is not the same as building more and more features which might look very similar. Be careful if one day turns into two and two days turn into three. Then you are probably adding features, not fixing the mistakes you didn't think in the first place.

19th

10 am - Scraper is ready. I can give title, summary, and URL. Then it extracts all the other data automatically and saves it to the database.

I first built the developer tool using ReactJS. Then I started to add news and I realize that it wasn't actually the best solution. The original work was waste of time but I don't regret it. I don't think I could have predicted that it's too hard to use without first really using it. It's just important to have some time for this kind of mistakes because it's inevitable to have them. "Move fast and break things"

11 am - I ate and did some small fixes to the website. Those started to get too small 🦠, the kind of things you don't want to waste time doing when building MVP.

1 pm - I did some more fixes mostly to scraper to reduce probability 🎲 of mistakes. I cleaned the database and added some news to prepare screenshots for Product Hunt.

I was taking screenshots for Product Hunt but then I notice this 😱

The source icons look bad. Really bad. It's pretty small part of the whole website but I want to fix it as I have the whole day (these are the words people use when they start building more and more stuff to MVP 🙂).

4 pm - I'm back after a few hour break 🎾. I just notice that mobile feed is also looking bad so I need to improve it.

First I start with the source problem. I tried to look if there is some easy to way to get more high resolution photos. I couldn't find any solution to that. The other problem with icons is that some are rectangular which doesn't fit into the square space I have. Because of these problems I decided to not use the icons but show text that says the source name.

Maybe good icons would have looked better but it's fine like this.

So this is the mobile problem

Looks better

The website is ready! 👏

https://comment-news.web.app/

7 pm - I wrote description, comment, and tag line for Product Hunt. I took some screenshots too.

I checked analytics to make sure it's working as it might be the most important part. I actually realize that I had setup it incorrectly that made it to track nothing. I'm glad, I looked it once more because I was available to fix it. 😌

It's good practice to have some path of actions you follow every time and in the end, repeating it as many times as it takes to do it once without any problems.

8 pm - The database is now cleaned and I started to fill it with some news for tomorrow. The idea is that the feed changes everyday 12 am PST which is here 🌍 10 am. This gives me time at morning to prepare the feed before users see it. The idea is to schedule Product Hunt launch tomorrow morning to happen a few minutes after 12 am PST when the new day changes also on Product Hunt ⬜🐻🟥.

I'm a little bit freak out 😰 at this point. I notice some small UI things but I'm not going to touch anything that small at this point because it might cause more work and then I might not be available to publish it tomorrow. It's really common that people start to do stuff in the last minute and make mistakes or just make the whole product more complex causing more problems which postpones the launch.

20th

9.00 am - I scheduled Product Hunt launch for 10.30 am (12 am PST).

"YouTube like comments for 10 trending news of the day" is the tag line I'm going to use. Originally I thought something without the YouTube thing but then I started to think that do people get the idea if I just say that they can comment news. At least I right away like the idea when I compare it to YouTube comments that I enjoy reading. It might be confusing but I rather put it there and take the risk of being confusing than leave it boring.

10.30 am - Adding news, fake comments, and fake votes took longer than I expected but I'm still on time. Choosing 10 news was a little bit difficult. I wish I have promise to do only 5 but it's too late to change anything.

I also realize that right now analytics is not tracking what news people read but are they reading news at all 😐. I of course want to be available to track the news reading to see what kind of news they like the most but it's too late to do it for the launch at this point. I try to do it in a few hours.

Right now I'm just going to comment, reply, and vote to make it look like there is traffic on the website. I'm also going to promote the Product Hunt launch in a few places. I'm not sure how important it is but I launched something recently and it got only 3 upvotes so I don't want that it happens again. I believe that the feed is designed in a way that good products can get noticed even without extra promotion.

11 am - I ate and came back. Doesn't look good. Just one up vote on Product Hunt and it's from me. I will add a few comments to all of the news and try to promote the posting after that.

Tweeted, send messages to friends, and announced it on a few Slack channels. I also posted it to Hacker News.

1 pm - 3 upvotes. Two are from me and one is from friend. Doesn't look great but then in the other hand it's mid night in PST. I do some other stuff as there is nothing I feel important in this project.

4 pm - 4 upvotes. One from stranger. 4 users have visited based on Google Analytics.

21st

9.30 am - There are still 4 upvotes and at this point it doesn't any more matter as there is a new feed. I got 7 visits to the website. I notice that the email sign up wasn't working which is a little bit annoying.

I added 10 news for today's feed. I start to think that I need to automate this process as I'm not interested of doing it more than maybe one more day. This way I also remove all the manual work so I can just let the website live its own life and move to something else. I don't really think the website will explode 💥 on its own but I keep it running 🏃 for this article and just in case I want to show it to someone.

22nd

One user visited during yesterday and it was me 😶. I automated news scraping script in a way that I don't need to do anything 🤖.

23rd

Yesterday I had 3 visitors. One was me, one from Slovenia 🇸🇮, and one from United States🇺🇸. American left the page right away while Slovenian spent 8 seconds 🙏.

26th

There haven't been any visitors since 22nd.

I didn't focus this much since the last update. I even try to avoid thinking about this 🙈 because the way it ended annoys me. I didn't get as many users to look the idea on Product Hunt as I originally expected and I don't have any solution to get more people to look at it. I could spend a week or more trying to get people try it but I don't really want because the idea is not something I really believe but did just for testing purpose.

Conclusion

I overestimated the amount of people who would look the idea on Product Hunt. There is no feature that would allow me to see how many people saw the listing. Based on the amount of people who visited the website, I couldn't do much conclusions because the amount is not statistically significant.

I assumed that Product Hunt is working in a way that good products get noticed without extra promotion. Now I'm guessing that the sorting algorithm is too much bias towards the upvotes instead of giving all the products proper amount of user views before deciding if it's bad or good.

It might be also that my listing wasn't good enough or maybe in theory the idea doesn't sound very good.

Did this really proved that people don't like reading YouTube like comments about news? The data that I collected shows me that people didn't like this idea. Is it that they don't like reading comments about news? Maybe, I can't say it for sure. The variable I didn't remove with this MVP was that people couldn't use their current source of news but I required them to use 10 news I chose.

Now I start to realize that maybe the comments on YouTube aren't as important as I thought. If the video is not good, no one will read the comments. The same might have happen here. I expected that the comments could be the main feature but it is actually extra feature that makes the product better.

Based on all this I would say that there is possibility that this hypothesis was incorrect. I couldn't see any proof that people would like this idea. That is why I conclude this by saying that this hypothesis was incorrect.

Someone might say that it's really hard to make any predictions from the data I got, and I agree. But I'm not trying to come up a vaccine that needs to be tested perfectly. Startup hypothesis should be tested with the right balance of efficiency and accuracy. I believe that I learned something about the things I wanted from this quick, 6 day, experience. I might have missed something important that might have give the opposite conclusion but I don't see it the worth of effort to continue.

One important thing that I learned from Lean Startup is that you should never do mistakes and then just say "at least we learned something". It might be the most common excuse to fail. There should always be a question you try to answer not that you come up questions after you have failed.

There are two things that might have helped to do more accurate predictions: user interviews and getting more people. User interviews are kind of interviews where you talk with people who possibly might use the product. You don't ask directly what they think about it but things like what news sources they use, why they use them, are there comments, do they talk about the news with their friends, etc.

I hope you learned something new by reading this lengthy article. If you realized something I probably missed, please let me know so I can learn. The goal of writing this wasn't just to teach people but learn and then also allow me to later review it as I have learned more. I also notice that it helps me to analyze my decisions better and avoid common mistakes like building MVP too far. I'm going to continue documenting in the future projects as it seems to be worth of the time.

Follow me on Twitter 🥺
@RealLankinen

Originally published: https://www.notion.so/lankinen/Testing-Startup-Idea-in-6-Days-bbdddcc18e6e46478ab55786d162f83b

CS193p Notes - Lecture 14: UIKit Integration

Lankinen — Sun, 26 Jul 2020 16:42:21 +0000

UIKit is the old way of developing iOS apps
SwfitUI (which we have learned in this course) replaced it and is doing most of the things
There are still some things that might be better in UIKit or there might be some old code so it's important to understand how to use it in SwiftUI

Instead of having MVVM there is MVC
- In MVC views are grouped together and controlled by a Controller
UIKit is object-oriented (not functional)

UIKit uses a concept "delegation"
- Objects (controllers and views) often delegate some of their functionality to other objects
- They do this by having a var called delegate
- delegate var is constrained via a protocol with all the delegatable functionality

Enroute demo UIView (12:25)

We create MapView to normal Swift file (not SwiftUI) because there isn't var body

This will draw a map and add pins to the points mentioned in annotations

import SwfitUI
import UIKit
import MapKit

struct MapView: UIViewRepresentable {
  let annotations: [MKAnnotation]

  func makeUIView(context: Context) -> MKMapView {
    let mkMapView = MKMapView()
    mkMapView.delegate = context.coordinator
    mkMapView.addAnnotations(self.annotations)
    return mkMapView
  }

  func updateUIView(_ uiView: MKMapView, context: Context) {

  }

  func makeCoordinator() -> Coordinator {
    return Coordinator()
  }

  class Coordinator: NSObject, MKMapViewDelegate {
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
      let view = mapView.dequeueReusableAnnotationView(withIdentifier: "MapViewAnnotation") ??
        MKPinAnnotationView(annotation: annotation, reuseIdentifier: "MapViewAnnotation")
      view.canShowCallout = true
      return view
    }
  }
}

EmojiArt demo UIViewController (39:13)

import SwiftUI
import UIKit

typealias PickedImageHandler = (UIImage?) -> Void

struct ImagePicker: UIViewControllerRepresentable {
  // could be handled using binding but wanted to show
  // that there are different ways
  var handlePickedImage: PickedImageHandler

  func makeUIViewController(context: Context) -> UIImagePickerController {
    let picker = UIImagePickerController()
    picker.sourceType = .photoLibrary
    picker.delegate = context.coordinator
    return picker
  }

  func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {

  }

  func makeCoordinator() -> Coordinator {
    Coordinator(handlePickedImage: handlePickedImage)
  }

  class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    var handlePickedImage: PickedImageHandler

    init(handlePickedImage: @escaping PickedImageHandler) {
      self.handlePickedImage = handlePickedImage
    }

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info:
      [UIImagePickerController.InfoKey : Any]) {
      handlePickedImage(info[.originalImage] as? UIImage)
    }

    func ImagePickerControllerDidCancel(_ picker: UIImagePickerController) {
      handlePickedImage(nil)
    } 
  }
}

@RealLankinen

Originally published here

CS193p Notes - Lecture 13: Persistence

Lankinen — Sun, 26 Jul 2020 16:40:57 +0000

UserDefaults
- Simple. limited. small.
Codable/JSON
- Clean way to turn almost any data structure into an interoperable/storable format
UIDocument
- This is really the way to do things when you have a true document like EmojiArt has
- UIKit compatibility code is required (no SwiftUI interface to it yet [THIS IS SwiftUI COURSE])
Core Data
- Powerful. Object-oriented. Elegant SwiftUI integration.
Cloud Kit
- Storing data into a database in the cloud
- Has UserDefaults-like thing
- Plays nicely with Core Data

Cloud Kit

Record Type = like a class or struct
Fields = like vars in a class or struct
Record = an "instance" of a Record Type
Reference = a "pointer" to another Record
Database = a place where Records are stored
Zone = a sub-area of a Database
Container = collection of Databases
Query = a Database search
Subscription = a "standing Query" which sends push notifications when changes occur

iCloud needs to be turned on from Project Settings under Capabilities tab. Choose CloudKit from Services. Click CloudKit Dashboard.

let db = CKContainer.default.public/shared/privateCloudDatabase
let tweet = CKRecord("Tweet")
tweet["text"] = "140 characters of pure joy"
let tweeter = CKRecord("TwitterUser")
tweet["tweeter"] = CKReference(record: tweeter, action: .deleteSelf)
db.save(tweet) { (savedRecord: CKRecord?, error: NSError?) -> Void in
  if error == nil {
    // hooray!
  } else if error?.errorCode == CKErrorCode.NotAuthenticated.rawValue {
    // tell user he or she has to be logged in to iCloud for this to work
  } else {
    // report other errors (there are 29 different CKErrorCodes!)
  }
}

File System
- Unix file system
- an app can read and write only it's own "sandbox"
- Sandbox is useful because
  - No one else can damage app
  - other apps can't view your app's data
  - by deleting the sandbox, it's simple to get rid of all the data
- Sandbox contains
  - Application directory - Your executable, .jpgs, etc.; not writable
  - Documents directory - Permanent storage created by and always visible to the user
  - Application Support directory - Permanent storage not seen directly by the user
  - Caches directory - Store temporary files here (this is not backed up)
  - Other directories (see documentation) ...

let predicate = NSPredicate(format: "text contains %@", searchString)
let query = CKQuery(recordType: "Tweet", predicate: predicate)
db.perform(query) { (records: [CKRecord]?, error: NSError?) in
  if error == nil {
    // records will be an array of matching CKRecords
  } else if error?.errorCode == CKErrorCode.NotAuthenticated.rawValue {
    // tell user he or she has to be logged in to iCloud for this to work!
  } else {
    // report other errors (there are 29 different CKErrorCodes!)
  }
}

@RealLankinen

Originally published here

CS193p Notes - Lecture 12: Core Data

Lankinen — Sun, 26 Jul 2020 16:40:31 +0000

Core data
- Object-oriented database
- Core Data uses SQL to store the data but interacting with it happens using Swift and object-oriented programming
The objects we create in the database are ObservableObjects
@FetchRequest fetches the objects and represents a "standing query"
To get Core Data to a project it's required to check the box when creating a new project
- If you already have a project where you want to add Core Data, create a new project and copy paste everything there

AppName.xcdatamodeId

SceneDelgate.swift creates context that is then passed to all views using .environment

@Environment(\.managedObjectContext) var context
...
.sheet(isPresented: $showFilter) {
  FilterFlights(flightSearch: self.$flightSearch, isPresented: self.$showFilter)
    .environment(\.managedObjectContext, self.context)

@Environment(./managedObjectContext) var context
let flight = Flight(context: context)
flight.aircraft = "B737"
let ksjc = Airport(context: context)
ksjc.icao = "KSJC"
flight.origin = ksjc // add flight to ksjc.flightsFrom
try? context.save() // disk might be full but in general don't fail

let request = NSFetchRequest<Flight>(entityName: "Flight")
request.predicate = NSPredicate(format: "arrival < %@ and origin = %@", Date(), ksjc)
request.sortDescriptors = [NSSortDescriptor(key: "indent", ascending: true)]
let flights = try? context.fetch(request) // KSJC flights sorted by ident
// flights is nil if fetch failed, [] if no such flights, otherwise [Flight]

@RealLankinen

Originally published here

CS193p Notes - Lecture 11: Picker

Lankinen — Sun, 26 Jul 2020 16:39:44 +0000

var description: String { ... } can be used to define what the variable is going to show when printed. Struct needs to also function like CustomStringConvertible to this work

24:16

struct FilterFlights: View {
  @Binding var flightSearch: FlightSearch
  @Binding var isPresented: Bool

  // applies filters only when leaving the sheet
  @State private var draft: FlightSearch

  init(flightSearch: Binding<FlightSearch>, isPresented: Binding<Bool>) {
    _flightSearch = flightSearch
    _isPresented = isPresented
    _draft = State(wrappedValue: flightSearch.wrappedValue)
  }
...

Picker(...) takes 3 parameters: label, selection (binding to the thing where selected value is saved), and the views (you provide a bunch of views to choose from
- Add .tag(...) to the view that's clicked because this line will then update second argument to be what value is inside tag
- Looks much better when Picker is put inside Form
  - Form needs to be inside NavigationView to make it clickable

@RealLankinen

Originally published here

CS193p Notes - Lecture 10: Navigation + TextField

Lankinen — Sun, 26 Jul 2020 16:39:20 +0000

popover(...)
ViewModel is passed to subviews using @EnvironmentObject
- Add var with @EnvironmentObject property wrapper to the sub view and give @ObservedObject ViewModel to it by adding .environmentObject(self.viewModel)

Navigate to another view by clicking an item

NavigationView {
  List {
    ForEach(store.documents) { document in 
      NavigationLink(destination: EmojiArtDocumentView(document: document)) {
        Text(self.store.name(for: document))
      }
    }
  }
}

Delete items from list

List {
  ForEach(...) {
    ...
  }
  .onDelete { indexSet in
    indexSet.map { self.store.documents[$0] }.forEach { document in
      self.store.removeDocument(document)
    }
  }
}
.navigationBarItems(
  trailing: EditButton()
)

@RealLankinen

Originally published here

CS193p Notes - Lecture 9: Data Flow

Lankinen — Sun, 26 Jul 2020 16:38:54 +0000

Property Wrappers

Property wrappers are things like @Publish that are put before var
A property wrapper actually creates a struct

@Published var emojiArt: EmojiArt = EmojiArt()

struct Published {
  var wrappedValue: EmojiArt
  var projectedValue: Publisher<EmojiArt, Never> 
}
var _emojiArt: Published = Published(wrappedValue: EmojiArt())
var emojiArt: EmojiArt {
  get { _emojiArt.wrappedValue }
  set { _emojiArt.wrappedValue = newValue }
}

Publisher<EmojiArt, Never> is a type that property wrapper decides
- The point of wrappers is that it's possible to do something when the value is get/set
- For example when Published wrapperValue is changed, it's calling objectWillChange.send()
$ is binding
Binding is used a lot and it's very important because it's all about having a single source of the truth

struct MyView: View {
  @State var myString = "Hello"
  var body: View {
    OtherView(sharedText: $myString)
  }
}
struct OtherView: View {
  @Binding var sharedText: String
  var body: View {
    Text(sharedText)
  }
}

@EnvironmentObject is similar to .fill() because when it's use in viewModel it's actually added to all of the views under neath the main View where it's called.

Publishers (18:17)

Publisher<Output, Failure>
- Output is the type of thing this Publisher publishes
- Failure is the type of thing it communicates if it fails while trying to publish

Demo

import Combine
...
  @Published private var emojiArt: EmojiArt
  private var autosaveCancellable: AnyCancellable?
...
  init() {
...
    autosaveCancellable = $emojiArt.sink { emojiArt in
      print("\(emojiArt.json?.utf8 ?? "nill")")
      UserDefaults.standard.set(emojiArt.json, forKey: EmojiArtDocument.untitled)
    }
...

When sink is stored to a variable, it's going to work as long as this ViewModel exists
- This way it's auto saving all the changes as long as ViewModel is used

@RealLankinen

Originally published here

CS193p Notes - Lecture 8: Gestures JSON

Lankinen — Sun, 26 Jul 2020 16:38:28 +0000

UserDefaults

Numerous ways to make data persists in iOS:
- FileManager filesystem
- CoreData SQL database
- CloudKit database in the cloud
- 3rd party options
- UserDefaults simplest to use but only for lightweight data. Like dictionary.
UserDefaults is most often used by making one instance and using it everywhere
- let defaults = UserDefaults.standard
defaults.set(object, forKey: "SomeKey")
- let i: Int = defaults.integer(forKey: "MyInteger")
- let b: Data? = defaults.data(forKey: "MyData")
- let a = array(forKey: "MyArray") this returns Array<Any>
  - To use Any type it's possible to change the type with as

Gestures (8:37)

myView.gesture(theGesture)
gesture is implemented in func or computer var

var theGesture: some Gesture {
  return TapGesture(count: 2).onEnded { }
}

non-discrete gestures

To see end result

var theGesture: some Gesture {
  DragGesture(...)
    .onEnded { value in ... }
}

To see the value of gesture

@GestureState var myGestureState: MyGestureStateType = <starting value>

Returns <starting value> always when the gesture ends.

var theGesture: some Gesture {
  DragGesture(...)
    .updating($myGestureState) { value, myGestureState, transaction in
      myGestureState = /* usually something related to value */
    }
    .onEnded { value in /* do something */ }
}

myGestureState can be modified only inside .updating

var theGesture: some Gesture {
  DragGesture(...)
    .onChanged { value in
      /* do something with value (which is the state of the fingers) */
    .onEnded { value in /* do something */ }
}

.updating is better in most of the cases because you care only the relative change

Demo (22:21)

UserDefaults.standard.set(emojiArt.json, forKey: "EmojiArtDocument.Untitled")
Codable property means that struct can be encoded and decoded

var json: Data? {
  return try? JSONEncoder().encode(self)
}

init?(json: Data?) {
  if json != nil, let newEmojiArt = try? JSONDecoder().decode(EmojiArt.self, from: json!) {
    self = newEmojiArt
  } else {
    return nil
  }
}

Double tap makes zooms in a way that you can see the full image

...
.gesture(self.doubleTapToZoom(in: geometry.size))

...

private func doubleTapToZoom(in size: CGSize) -> some Gesture {
  TapGesture(count: 2)
    .onEnded {
      withAnimation {
        self.zoomToFit(self.document.backgroundImage, in: size)
      }
    }
}

private func zoomToFit(_ image: UIImage?, in size: CGSize) {
  if let image = image, image.size.width > 0, image.size.height > 0 {
    let hZoom = size.width / image.size.width
    let vZoom = size.height / image.size.height
    self.zoomScale = min(hZoom, vZoom)
  }
}

@RealLankinen

Originally published here

CS193p Notes - Lecture 7: Multithreading EmojiArt

Lankinen — Sun, 26 Jul 2020 16:38:09 +0000

Colors and Images

UIColor allows manipulating colors
Image is a View that takes name (String) of the image in Assets.xcassets folder
- Image(uiImage: self.document.backgoundImage) and backgroundImage: UIImage?
It's also possible to get system images
- See the different system images by downloading an app from here https://developer.apple.com/design/

Multithreaded Programming (6:15)

UI code is using main queue
Grand Central Dispatch (GCD) is where queue stuff is called
- Two fundamental tasks:
  1. getting access to a queue
  2. plopping a block of code on a queue
- DispatchQueue.main is the queue where all UI code must be posted
- DispatchQueue.global(qos: QoS) a non-UI queue with a certain quality of service
  - qos is one of the following
    - .userInterface do this fast because UI depends on it
    - .userInitiated the user just asked to do this, so do it now
    - .utility needs to happen but user didn't asked for it
    - .background maintenance tasks (cleanups, etc.)

let queue = DispatchQueue.main or Dispatch.global(gos: )
queue.async { }

Dispatch.global(gos: ) not used very much because there are higher level APIs for specific use cases(e.g. URLSession)

EmojiArt Demo (20:38)

View

import SwiftUI

struct EmojiArtDocumentView: View {
  @ObservedObject var document: EmojiArtDocument

  var body: some View { }
}

ModelView

import SwiftUI

class EmojiArtDocument: ObservableObject {

}

When looping through strings, it doesn't make sense to make all strings in the app identifiable but just those. There is parameter id in ForEach that can be set to \.self to use string's own value as identifier.

struct EmojiArt {
  var backgroundURL: URL?
  var emojis: [Emoji]()

  struct Emoji: Identifiable {
    let text: String
    var x: Int
    var y: Int
    var size: Int
    let id: Int

    fileprivate init(text: String, x: Int, y: Int, size: Int, id: Int) {
      self.text = text
      self.x = x
      self.y = y
      self.size = size
      self.id = id
    }
  }

  private var uniqueEmojiId = 0

  mutating func addEmoji(_ text: String, x: Int, y: Int, size: Int) {
    uniqueEmojiId += 1
    emojis.append(Emoij(text: text, x: x, y: y, size: size, id: uniqueEmojiId))
  }
}

privatefile makes init only accessible from that file and that way other files can't create emojis
- In this case we wanted to do this because there is unique way to create id for each emoji and we don't want any other file to create emojis with it's own id system
Model should be private in ViewModel because it's job is to offer intent(s) which View will use to access Model

@RealLankinen

Originally published here

CS193p Notes - Lecture 6: Animation

Lankinen — Sun, 26 Jul 2020 16:37:25 +0000

Property Observers

var isFaceUp: Bool {
  willSet {
    if newValue {
      startUsingBonusTime()
    } else {
      stopUsingBonusTime()
    }
  }
}

Syntax reminds computer var but it's not the same thing
Most of the cases newValue contains the value it's going to get but in didSet the value is in oldValue

@State (1:47)

Views are read only
Sometimes we want to keep some state and that happens by adding @state front of var
- Case might be that we want to allow user to edit some image first and then the intention is called with all the state changes and it's stored to the model.
Changing a variable with @state redraws the view

Animation (8:14)

Animation happens after the thing happened but in user's point of view it looks like happening the same time
- The idea is that the value is changed once from A to B and animation is played instead of changing the values from A to B and drawing the animation after every change
The point of animation is to draw attention to thing that change
Changes to views in containers that are already on screen
- The appearance and disappearance of Views
- Changes to the arguments to Animatable view modifiers of Views
- Changes to the arguments to the creation of Shapes
Two ways to animate
- Implicitly .animation(Animation)
  - "Automatic animation"
```
Text("Ghost")
  .opacity(scary ? 1 : 0)
  .rotationEffect(Angle.degrees(upsideDown ? 180 : 0))
  .animation(Animation.easeInOut)
```
  - You can control
    - duration
    - delay
    - repeat
    - curve
      - rate at which the animation plays out
  - When added to a container, all the items inside it get's own animation instead of animating the whole container as one
- Explicitly withAnimation(Animation) { }
  - Primary way of doing animation
  - This allows to do the same animation for a bunch of views
  - Explicit animations do not override an implicit animation
- Transitions
  - Specify how to animate the arrival/departure of Views
```
ZStack {
  if isFaceUp {
    RoundedRectangle()s
    Text("Ghost").transition(.scale)
  } else {
    RoundedRectangle(cornerRadius: 10).transition(.identity)
  }
}
```
  - If isFaceUp changed (while ZStack is on screen and an explicit animation is in progress) ...
    - ... to false, the back would appear instantly, Text would shrink to nothing, front RR fade out.
    - ... to true, the back would disappear instantly, Text grow in from nothing, front RR fade in.
- Places like if-else or for loop where the data changes are good for animations to highlight users the change.
- Difference between Button and Text with OnTouch gesture is that different operating systems (WatchOS, iOS) know how to show it the best for the user

@RealLankinen

Originally published here

CS193p Notes - Lecture 5: ViewBuilder + Shape + ViewModifier

Lankinen — Sun, 26 Jul 2020 16:36:42 +0000

Access control

private doesn't allow anyone outside the struct/class access it
private(set) means that setting is private but reading is not meaning that anyone can read it

ViewBuilder (12:05)

@ViewBuilder can be added to any function that returns a view. If there is a list of views it combines them into one.

"The contents of a @ViewBuilder is a list of Views. No need to type return. Cannot use vars.

@ViewBuilder
func front(of card: Card) -> some View {
  RoundedRectangle(cornerRadius: 10)
  RoundedRectangle(cornerRadius: 10).stroke()
  Text(card.content)
}

Shape (20:22)

CG = Core Graphics

import SwiftUI

struct Pie: Shape {
  var startAngle: Angle
  var endAngle: Angle
  var clockwise: Bool = false

  func path(in rect: CGRect) -> Path {
    let center = CGPoint(x: react.midX, y: react.midY)
    let radius = min(rect.width, rect.height) / 2
    let start = CGPoint(
      x: center.x + radius * cos(CGFloat(startAngle.radians)),
      y: center.y + radius * sin(CGFloat(startAngle.radians))
    )

    var p = Path()
    p.move(to: center)
    p.addLine(to: start)
    p.addArc(
      center: center,
      radius: radius,
      startAngle: startAngle,
      endAngle: endAngle,
      clockwise: clockwise
    )
    p.addLine(to: center)
    return p
}

0 degrees is to right
0x0 is in left top corner and increases by going down and right

ViewModifier (41:54)

There are two things that can be animated: shapes and views.
Animating views happens in ViewModifier
Modifier can for example make any view to look like a card, cardify

Text("Ghost").modifier(Cardify(isFaceUp: true))

struct Cardify: ViewModifier {
  var isFaceUp: Bool
  func body(content: Content) -> some View {
    ZStack {
      if isFaceUp {
        RoundedRectangle(cornerRadius: 10).fill(Color.white)
        RoundedRectangle(cornerRadius: 10).stroke()
        content
      } else {
        RoundedRectangle(cornerRadius: 10)
      }
    }
  }
}

Text("Ghost").cardify(isFaceUp: true)

extension View {
  func cardify(isFaceUp: Bool) -> some View {
    return self.modifier(Cardify(isFaceUp: isFaceUp))
  }
}

@RealLankinen

Originally published here

CS193p Notes - Lecture 4: Grid + enum + Optionals

Lankinen — Sun, 26 Jul 2020 16:36:11 +0000

Grid

init (_ items: [Item], viewForItem: @escaping (Item) -> ItemView) {
    self.items = items
    self.viewForItem = viewForItem
}

@escaping is required because function is not used inside init but used somewhere else.

extension Array where Element: Identifiable {
  func firstIndex(matching: Element) -> Int {
    for index in 0..<self.count {
      if self[index].id == matching.id {
        return index
      }
    }
    return 0
  }
}

Adds new function to all Arrays where elements are identifiable
Name of the file Array+Identifiable tells that it's identifiable extension to Array

Enum

enum FastFoodMenuItem {
  case hamburger(numberOfPatties: Int)
  case fries(size: FryOrderSize)
  case drink(String, ounces: Int)
  case cookie
}

enum FryOrderSize {
  case large
  case small
}

let menuItem: FastFoodMenuItem = FastFoodMenuItem.hamburger(patties: 2)

Enums can contain extra data that's just for specific item like fries can be small or large.

Optional

enum Optional<T> {
  case none
  case some(T)
}

An optional is an enum.

var hello: String?              var hello: Optional<String> = .none
var hello: String? = "hello"    var hello: Optional<String> = .some("hello")
var hello: String? = nil        var hello: Optional<String> = .none

It's possible to get the value from optional two ways

hello! // this crashes the program in case the value is none

if let safehello = hello {
  print(safehello)
} else {
  // do something else
}

Default

hello ?? "This is default value"

comma in if statement is like sequential && operator meaning that the value that is assigned in first condition can be used in the second condition.

var indexOfTheOneAndOnlyFaceUpCard: Int? {
  get {
    var faceUpCardIndices = [Int]()
    for index in cards.indices {
      if cards[index].isFaceUp {
        faceUpCardIndices.append(index)
      }
    }
    if faceUpCardIndices.count == 1 {
      return faceUpCardIndices.first
    } else {
      return nill
    }
  }
  set {
    for index in cards.indices {
      if index == newValue {
        cards[index].isFaceUp = true
      } else {
        cards[index].isFaceUp = false
      }
    }
  }
}

When setting new value it turns all the other cards face down
when getting value it is going to check if there is two face up cards

@RealLankinen

Originally published here