GitLab Create Editor Group, 7 May 2019

Previous Meeting

⏯

youtube image

►

From YouTube: iOS development using the Web IDE on an iPad

Description

Learn more about Mobile App development with GitLab https://about.gitlab.com/direction/mobile/

Links mentioned:

- https://gitlab.com/groups/gitlab-org/-/epics/756
- https://gitlab.com/groups/gitlab-org/-/epics/498

A

Hi there I'm James Ramsay product manager for the create stage of the DevOps lifecycle at gate, lab developing and delivering mobile apps with gitlab is a critical capability. My colleague Jason Lenny recorded a demo earlier this year of building and deploying an iOS app using git, Labs, CI and fast lane and wrote a blog post about the process, but as well as being able to build and deploy iOS apps using git lab CI. We also want it to be possible to do mobile app development using an iPad.

A

In this brief walkthrough I'll show the state of iOS app development in the web IDE using this app flappy bird as an example. So this is a swift project that implements a quick clone, a flappy bird and we'll open it up in the web IDE and take a look.

A

So changes to source code are pretty straightforward using the web IDE, let's start by making the pipes further apart, so that can have less trouble getting between them and get a better score. So this vertical pipe gap variable is the variable that controls it and will make that 250.

A

So you'll see that I had to backspace over the change and that's because it isn't possible to make selections using touch events or using the keyboard, I'm pressing, the arrow keys, and you can see that nothing's happening well.

A

So, if I try and make touch selections- and it doesn't do anything that we'd expect it to so mobile devices in this case touch events unsupported by Monica, which is the underlying editor that we're using and that prevents us from making a selection and the keyboard isn't of any help, because there's a bug in iOS, where key presses aren't being correctly passed from the operating system to Safari we're tracking these issues in this epoch here, which is contains a bunch of mobile, specific issues relating to the web idea and we've also here's the radar, which is tracking the keypad keyboard issue in iOS- and this is the this- is an issue tracking the touch event problem I mentioned as well.

A

A

That Xcode projects contain a lot of Xcode specific files like the project PB X proj file, which, although editable, would typically be managed by Xcode itself and get labs web ID doesn't automatically manage these files. For you, another example is storyboard files. These are specific to Xcode and would be rendered visually if you were to open it in Xcode.

A

Gitlab, of course treats these as text files, rather than providing a visual editor with drag-and-drop capabilities. So let's take a look at one other kind of editing. So let's, let's make the flappy bird happy tanuki we'll do that by replacing some of these image files.

A

At the moment, updating binary assets isn't super convenient, but it is improving with each release. So, in order to change out these assets, I'll have to delete them first and then commit that change before.

A

Stage hold these files.

A

A

Last time you made requests.

A

And then now that we've removed them we'll be able to upload the upload new ones, and so we're going to make this happy tanuki and flappy Swift.

A

Let's open this back up in the web, IDE.

A

Now we go here.

A

You need to create a new directory called.

A

A

And then inside of bird Atlas will need to upload some new files, so we can do that. I've added them to iCloud. Drive you've got the first one and we'll upload new. Second one. Okay, now we've got a new bird huge assets. Let's commit those happy to new key.

A

Agent cute those.

A

Right there's one last change that we need to make before this is going to deploy correctly to test, fly it and that's upgrading the bundle version. So this can be configured automatically, but I haven't done so yet so we'll just upgrade that.

A

Okay, the pipeline's now finished running and we can see that it's been successfully deployed. If we jump over to a test flight, we should be able to see the new build, and here we are, we can see, there's a new update. Let's install that and take a look, and here we are.

A

We can see that we've got our new happy tanuki and we've got really nice wide gaps for us to jump through and now I am getting a very high score, so you this demonstrates how you can edit an iOS app using the web IDE to edit it and then deploy it using Vaseline and get lab C I.

A

Thank you for watching and please reach out via cat lab. Your shoes leave comments below or reach out via Twitter. If you have any questions or feedback and I'll post links to those epochs that I mentioned earlier in the video, so that you can leave comments there.