Bootcamp, iOS Development, Journey, Lambda School, Projects, Swift

The iPhone app that Google and I built

Screen Shot 2020-03-27 at 4.55.40 PM

The app started off as a way to make sure I could use an API to make an iPhone app and once I got that working I wanted to add some more functionality. When I first started the app only showed a random recipe for a cocktail and it was plain white with black text. You can see the initial product on my previous blog post.

 

The API that I used had several different endpoints that I wanted to add to it. I wanted the user to be able to search a cocktail by name, search by the first letter and to search by an ingredient, as well as keeping the random API.

The first thing I had to do was to change my storyboard I only had two screens, the first one was just a single button with the text “Make me a drink”. The second screen is the picture above where the user got the name, image, ingredients and instructions.

Screen Shot 2020-03-24 at 8.46.44 PM

It went from that to this. I changed the first screen to have 4 buttons, one for each option, then depending on the button they would be taken to a table view then the detail screen or the detail screen. The image that you see there is a loading screen. If the app was taking a long time getting data then the launch screen comes up. More on this later.

Screen Shot 2020-04-02 at 5.27.24 PM

With the layout complete now it was time to work on getting the data from the API. Initially with the random cocktail the data that I got back was just one drink that looked like this.

Screen Shot 2020-04-02 at 5.32.16 PM

So working with that was fairly easy now when I did a search by either name or letter I would get something like this

This was 5 entries but the data could bring back more or less depending on what was being searched. I had the challenge of putting that information into a table view.

Screen Shot 2020-04-02 at 5.38.39 PMScreen Shot 2020-04-02 at 5.38.54 PM

This is about the time that Google got involved in the process and after some searching and coding I ended up with this. I had some struggles with this area because the data was slightly different but luckily StackOverflow had some suggestions and I was able to keep going.

Once the data was on the table view then the user can pick a drink and see the full recipe. This was just reusing the same view as the random cocktail.

3 down and 1 to go. Just one more search method. Searching by ingredient was completely different. To start off with the data from the API came back like this

I was like, “well ok then, where to even start”. Time to go to Google! Well this part involved putting this data in a separate model that complicated the navigation of the app because it can now get data from two different files and it took some creative thinking on my behalf to get the data to show up correctly no matter where it came from. Now this part two took different API calls. As you saw from the video the first set of data came only with the title, a link to the image and an id. Using that id I was then able to use a different API endpoint to get the drink itself. This brought on a new problem.

The detail screen was loading without any data

Google appearance #3UGH

I was watching so much youtube I felt like my teenage son. I also learned that when Hot-Tipsearching videos it’s important to add which version of swift I’m using because there are a lot of videos and articles of swift 2 and 3. They were what I was looking for but swift has changed enough to make those suggestions obsolete.

This was the night I fell asleep way past my bedtime and no solution worked. Until I came across this video on creating a launch screen. It was meant to be the one as it used the legend of Zelda in the example and that is my all-time favorite video game. giphy

It was the first video game I passed without the help of my brother.

 

It was too late and I was beyond tired so I had to wait till the next day to try it. It took some tweaking and changes but I got it to work and it did exactly what it needed to do!!!!

That was the last of the data struggles now I had a fully functioning app, but it was still so plain. I thought,  “how hard could that possibly be to make the app the same color as the button that is being pushed? It doesn’t seem so hard it’s just a matter of passing in data.

Yup it was way harder than I thought. Back to google. I ended up storing the colors in its own file, creating an enum with the different button options and then changing the colors. I got it to work but it was another challenge. I’m glad I got it to work because it gives it a bit of an extra wow factor.

There’s more I could do but that was so many ups and downs that I just couldn’t get myself to build more on it. I learned so much making this and honestly I enjoyed every minute of it even when I wanted to pick up my computer and throw it out the window.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s