DEV Community: ryan cooper

Building a Pokedex App to Learn SwiftUI! Part One: UI

ryan cooper — Sat, 19 Aug 2023 19:50:15 +0000

I wouldn't be half the engineer I am today without watching Ash Ketchum ̶c̶r̶a̶s̶h̶ ̶a̶n̶d̶ ̶b̶u̶r̶n̶ learn from his mistakes so many times growing up.

What are we Building?

We're building an app that you, the aspiring Pokemon master and budding programmer can use to identify any Pokemon you find in the wild.

This project will expose you to several crucial topics for growing as an iOS developer including:

Networking
The MVVM Design Pattern (Model-View-ViewModel)
Navigation in SwiftUI
SwiftUI Syntax

The first version of our app will look something like this:

Requirements

Our app will allow users to input the name of a Pokemon and receive information about it including an image, its types, and its abilities.

If you want to follow along as you read, here is a link to the GitHub repo with the source code.

Initial UI Code

Without further ado, let's start coding!

Open up a fresh project in XCode and within that project, make a new folder called Views.

Move your ContentView file into your Views folder (not absolutely necessary so don't move your ContentView file if it gives you headaches), and create a fresh SwiftUI View File called PokedexSearchView.

So far, everything should look something like this:

The first thing we're gonna do is give our app some color, so delete the line that says Text() (Line 11), and add a ZStack.
Next, within that ZStack, add a red color view and an empty VStack.

ZStack {
  Color.red
  VStack {
  }
}

Thanks to those 5 lines of code, we now have a red background.

The ZStack lets us stack things along the Z-axis, and the VStack does the same thing but along the Y-axis.

Next, we want to add a new struct to serve as our search screen.

Outside of that struct, make a new struct called SearchScreen and add the following lines of code:

struct SearchScreen: View {
    var body: some View {
        ZStack {
            Rectangle().fill(.white).frame(width: 320, height: 430)
            Rectangle().fill(.blue).frame(width: 300, height: 400)
        }
    }
}

This creates 2 Rectangle views within a ZStack. There is a blue rectangle on top of a slightly larger, whit rectangle. Let's add the SearchScreen to our PokedexSearchView to see how it looks.

Next, create a new struct called PokeSearchBar and add the following code:

@Binding var pokemonName: String
    var body: some View {
        TextField("Who's that Pokemon?", text: $pokemonName)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }

This creates a Binding property called pokemonName. Bindings in SwiftUI are used when you need to create a two way connection between a view and its underlying data.

Binding should be used here because our PokeSearchBar view will receive the value of pokemonName from the parent view, PokedexSearchView.

Add a variable for pokemonName to the PokedexSearchView, and then add the PokeSearchBar to the line directly below SearchScreen.

Pass the pokemonName variable into PokeSearchBar. Xcode is complaining at this point, so add the pokemonName variable with a value of empty string to your Preview Provider to fix that error.

For last step, we'll add some buttons that will be mostly decorative but will eventually allow users to navigate the Pokedex.

Create a struct called PokedexButtons.

struct PokedexButtons: View {
    var body: some View{
        HStack {
            Circle().fill(.gray).frame(width: 100, height: 100).padding(.trailing, 100)

            ZStack {

            Rectangle().fill(.gray).frame(width: 100, height: 40)
            Rectangle().fill(.gray).frame(width: 40, height: 100)
            }
        }
    }
}

Add it to the parent view and we're done for the day!

In the next Part of the tutorial, we will begin adding functionality to our app, and we will get started with the PokeAPI. See you next time and thanks for following along!

If you enjoyed this, be sure to like the post and follow me for more content on APIs, iOS Development, and more!

SwiftUI Learning Resources:

3 Ways to Make Your API Beautiful

ryan cooper — Sat, 12 Aug 2023 01:03:42 +0000

Building an API is a lot like building a toilet.
If you're not sure the experience is easy for the people using it, you're doing something wrong.

The phenomenal book Web API Design: The Missing Link has inspired me to post my key takeaways about what makes an API great.

Use Links In Your APIs

APIs with links save Application Developers time reading through documentation to understand how to retrieve data.
Imagine for a second that you're an application developer using the Game of Thrones API. No spoilers here! (Some judgement though).

The data looks something like this:


// The actual API uses links. This has been edited to show my point.
// I also removed any possible spoilers for you :)

{
 "id": "583",
 "name": "Jon Snow",
 "gender": "Male",
 "culture": "Northmen",
 "born": "In 283 AC",
 "father": "2342",
 "mother": "1243",
 "spouse": "4553",
 ...,
 "playedBy": [
  "Kit Harington"
 ]
}

You want to build a website that maps all Game of Thrones characters and their relationships, but in order to do that, you have to check the documentation for the URI template to build a URL for the resource with id "2342", "1243", "4553", …

This clearly isn't ideal.

If the API Developer had instead used links when modeling their data, the application developer wouldn't have such a hard time using the t̶o̶i̶l̶e̶t̶ API.

This is a much better pattern.

{ "id": "https://anapioficeandfire.com/api/characters/583", "name": "Jon Snow", "gender": "Male", "culture": "Northmen", "born": "In 283 AC", "father": "https://anapioficeandfire.com/api/characters/2342", "mother": "https://anapioficeandfire.com/api/characters/1243", "spouse": "https://anapioficeandfire.com/api/characters/4553", ..., "playedBy": [ "Kit Harington" ] }

Now the application developer can write general-purpose code to
follow API links without having to comb through the docs.

Query URLs Should be Predictable

There are plenty of places to inject creativity into your
programming, but query URLs are not one of them.

Which query URL pattern is easier for you to remember?

Option A:

https://dogtrackercom/person/{personId}/dogs

or Option B:

https://dogtrackercom/getPeopleFunction/{personId}/getAlldogs

In addition to being easy to remember, Option A more clearly demonstrates the relationship between the person entity and the dog entity.

Designing a query language specific to your API can be helpful to you during development, but it makes it much harder to use your API.

Give Developers Only What They Need

APIs that return large collections of objects must provide a way for clients to retrieve smaller subsets of the collections at a time. These APIs need pagination.

I'm more likely to retain users if my application calls the API that returns 100 pictures of puppies in .083 ms than I am with the API that returns 1000000 pictures of puppies in 2.32 s.

It's common for APIs to follow a pattern of pagination like this:

{ self": "https://dogtracker.com/dogs?limit=25,offset=0", "kind": "Page", "pageOf": "https://dogtracker.com/dogs", "next": "https://dogtracker.com/dogs?limit=25,offset=25", "contents": [ {"self": "https://dogtracker.com/dogs/12344", "kind": "Dog", "name": "Fido", "furColor": "white" }, {"self": "https://dogtracker.com/dogs/12345", "kind": "Dog", "name": "Rover", "furColor": "brown" }, … (23 more) ] }

Where "pageOf" represents the original collection, "next" references the page after, and "previous" describes the page before (previous is missing in this example because it is the first page).
The "offset" and "limit" parameters allow the application developer to request the amount of resources they need at a time. "Offset" defines the starting point, and "limit" defines desired the number of objects.

Additionally, it can be useful to have optional fields that developers can use to retrieve only the information they need about a resource.

https://dogtracker.com/dogs?fields=name,color,location

This will retrieve only the names, colors, and locations of all dogs.

Wrapping Up

In conclusion, whether you are designing a toilet or an API, it is important to make the job as easy as possible on the people who will be using it.
Standardize things as much as possible.

TLDR:

Use Links in your APIs
Standardize your query templates
Make Pagination easy

If you enjoyed this, be sure to like the post and follow me for more content on APIs, Software Development, and more!

Online Learning: Scary but Cool

ryan cooper — Sun, 04 Sep 2022 19:16:30 +0000

Online Learning?? You mean like Coursera?

What?

Online learning is a method of machine learning where data flows in over time rather than being available all at once.

Why?

Imagine this: it's been a month since you've ~binged~ watched Stranger Things at a healthy pace and you want to find your next show to watch (it's Breaking Bad). In the dystopia without online learning, you'd have to wait a whole month* for Netflix engineers to train their ML Model based on your input data from the previous month before you they had an updated recommendation list for you.

Online learning algorithms allow them dynamically provided updates over time based on your engagement with shows and movies on the platform.

*The timespan of a month was chosen arbitrarily, the point is that it would likely be slower.

Intro to Data Structures & Algorithms

ryan cooper — Fri, 12 Aug 2022 15:56:52 +0000

What are Data Structures?

Data Structures are exactly what they sound like--structures that hold data on our computer. More formally, they're specific implementations of abstract data types. ~~Wait...wtf are abst-~~

Uhhhh too hard for my brain...Let's keep looking.

Okay. I can work with this.

Abstract Data Types?!

Abstract Data types are menus that tell you what you can ask for.

Data Structures are chefs that build your chosen menu items for you.

For example, if I want a burger with ketchup, tomatoes, and mustard, I might call this person to make it.

If I want something where each new item is added to the front and the last items in are the first items out (LIFO), I might call a stack to implement it.

Conclusion

Data structures are really important for programmers to understand because they're the cars, buses, and trains that move our data through our programs.

And just like cars, buses, and trains, they all have tradeoffs. Choosing to use a linked list in place of a hash table could save you as much time as choosing to take the subway instead of driving through rush hour traffic. But you wouldn't know that unless you took the time to learn them!

Sources

The Algorithm Design Manual
ADT vs Data Structure

Solana & Cell-Phones & Bears (Oh my)

ryan cooper — Thu, 14 Jul 2022 22:33:44 +0000

"The Solana Mobile Stack shows a new path forward on Solana that is open source, secure, optimized for web3, and easy to use."
~Anatoly Yakovenko, co-founder of Solana

TLDR: I'm not getting rid of my iPhone, iPad, & I <3 Steve Jobs tattoo yet, but the Solana Mobile Stack (SMS) and ethOS have me excited for the potential of a true web3 mobile shift and the prospect of being early to the development of new tech.

This could be big.

Ethereum has released their new mobile operating system, ethOs
Solana Labs (SOL, not SZA) recently announced the release of their upcoming phone, Saga as well as the Solana Mobile Stack (SMS).
Polygon recently announced a collab with startup Nothing on their upcoming Nothing (1) phone

In a world where 68% of website visits come from mobile devices, mobile has the potential to be monumental in terms of crypto adoption. That's the thesis of these crypto giants as they invest in building web3 for mobile devices.

Solana (Saga & SMS)

Solana Labs announced the Solana Mobile Stack recently, which is an open source mobile stack designed for devs to build mobile dApps and other functionality for the phones. Github linked here.
They are also releasing the Saga phone in early 2023 (with pre-orders available now). The specs are as follows:

"6.67 OLED display, 12 GB RAM, 512 GB storage, and the latest flagship Snapdragon® 8+ Gen 1 Mobile Platform, the security features of which will enable the Solana Mobile Stack’s Seed Vault. With the addition of a Secure Element built into the device, the Seed Vault keeps private keys, seed phrases and secrets separated from the application layer yet still capable of interacting with apps running on the device or in a mobile browser."

Per the Bankless podcast, Solana's co-founders primarily intend for Saga and SMS to serve as a starting point to push for developers and phone giants to focus more on mobile first web3 applications, but they'll grant themselves bonus points if the actual Saga phone gains traction on its own.

Ethereum (ethOS)

The next play comes from Ethereum, with their ethOS. ethOS (in addition to being impossible to Google because of collisions with the word 'ethos') is a community led mobile operating system for Ethereum. It is currently available for the Pixel 3 and Pixel 5a. Github linked here and whitepaper linked here.

Polygon (Nothing (1))

Few details are available so far for this project, other than Polygon's plans to build in easy access to dapps games, and their planned Polygon ID feature.

Why this matters to me as a dev

As a developer, all this innovation has me hype. New tech means devs with their ears to the ground can be early adopters and become experts of potentially game-changing technology.

Let me know your thoughts & how I can improve my writing in the comments!

"Developers have been blocked for too long from creating truly decentralized mobile apps because the existing gatekeeper model just doesn't work anymore," said Anatoly Yakovenko, co-founder of Solana.

Sources:

How to Explain Blockchain to your Grandma

ryan cooper — Sun, 29 May 2022 03:56:28 +0000

Intro:

I plan to write a few posts that will serve as personal summaries of topics related to web3 that I find complicated. I framed this one as a letter to my very non-tech savvy grandma explaining the concept of blockchain by analogy.

Please let me know how I can improve.

Dear Grandma,

I’ve never sent a letter before, so you’ll have to call me to scold me on my poor manners later. In the meantime, I wanted to tell you what I know about this cool idea called a Blockchain. First, I’ll explain what that word means, then I’ll talk about why it can be useful sometimes, and I’ll finish by talking about some different blockchain designs.

What is a blockchain?

A blockchain is a computer program that serves as a list of previous events. You can follow each event (or block) on the chain all the way to the beginning, kind of like a family tree.

Kind of like a family tree. It can be edited as you go, but everyone needs to have the same version of events.

Each event is “written down” on a “block”, and each block connects to the one before it to form a “chain” of blocks. (That’s why it’s called a Block Chain). The first thing a blockchain was used for was money, so it’s natural to think of most events as “transactions''.

Why use a blockchain?:

No third party middle-man needed: Do you remember having to pay the bank $25 just to send Uncle Kevin some birthday money?

Trustless peer to peer: Or wanting to buy a necklace from an ad you saw on TV but refusing to call the company because you would have to give them your credit card information

A blockchain is a tool that people can use to solve these problems.

It does that the same way people solve the problem of reneging during spades— everyone keeps track of every transaction that happens. But instead of mentally keeping track of everything, people log every transaction using their computers. If anyone spots a transaction that didn’t happen (like my mom playing a spade two turns after she claimed she had run out), that list of events is deleted and replaced with the one that everyone else agrees on.

Different types?

Blockchains were invented for people to copy the idea and put their own spins on it. Less like the Mona Lisa, more like your fried chicken recipe. So there are several different designs of blockchains that are built for different purposes. Bitcoin's blockchain is used to store people's wallet information (almost like a bank), while Ethereum's blockchain can do a few more things than that.

Okay, but what’s a Bitcoin?

Today there are many different groups using different blockchains for their own projects. Some people are using them to store artwork transactions, some healthcare companies are using them, and of course, some people are designing money that stores its transactions on them. This money is called a “cryptocurrency”.

One you might have already heard of is Bitcoin, but there are plenty of others like Ethereum, Solana, etc. These each deserve their own articles, so I will write more about them in the future.

Thanks for sticking with me through all of that, grandma! Let me know if any of that made sense and how I can explain better next time. Write back when you get the chance!

With much love from your favorite grandson,

Ryan

Please let me know if anything I said here is inaccurate or if you have any feedback that could help me improve my writing in general.

(Better) Sources (of Information):

3Blue1Brown Video Explanation

Original Bitcoin Whitepaper