How to make applications for ios. We create a mobile application for iOS ourselves using constructors

It all started when I looked around and, not seeing the car of my dreams, decided to design it myself
Ferdinand Porsche

Hello, Habr. I want to tell you how I created my first iOS application and what came out of it.

Idea

The idea for the application arose naturally: create something that you would be happy to use yourself. I write notes all the time. After all, every busy person has a certain set of facts that he receives during the day, and which are worth remembering. And since everyone forgets (and that’s normal!), there’s no better solution than just writing it down. I always felt some kind of inconvenience when working with the note-taking applications presented in the AppStore. Excessive complexity in management, the presence of unnecessary categories, a plethora of additional information - all this prevents the application from performing its main function. Plus, many of these things just look ugly.

Therefore, putting all bets on simplicity and convenience, I began to create a concept. Application model with a single list of notes. Everything in one place, what could be simpler? If something is of great value or relevance, you don't necessarily need to label it; you can simply move the more important item to the top of the list. Old and unnecessary entries will gradually move down and will eventually be deleted by the user.

Functional

After the concept was thought up, I wrote down the main functionality - those things that I would like to focus on in management:

Quite standard functionality for this kind of application, you will agree. But this is just the tip of the iceberg, the devil is in the details.

Tools

Before writing the code in Xcode, I completely recreated the appearance of the application in the vector editor Sketch. This program is great for quickly creating layouts. There are a lot of plugins available for this application, among them there is Sketch Preview - viewing the artboard directly on the device through the Skala Preview program. You just need to download the free Skala Preview programs to your computer and mobile device and install the plugin. After that, select the desired artboard, press the Command+P combination, and within a second the appearance of the application is transmitted to the device.

In addition, the application is very convenient for creating screenshots for publication in the AppStore. For each screen size, a different set of artboards was created, along with the use of styles; the time spent on formatting was minimal. But about the publication a little later.

Development

In the application, I used only two controllers - one directly for all, all, all notes, the other to display a small tutorial when first launched. I organized work with the database using the CoreData framework.

After creating the basic functionality (creating, deleting, editing notes), I decided to improve each of these functions.

Agree, text editing in iOS is implemented quite inconveniently. If you make a mistake in a word, to move the cursor to the desired position, you must touch and, without removing your finger from the screen, try to get into the selected area. In addition, after correcting the error, you need to return the cursor back to the end of the line. In my application, I decided to rework the mechanism for moving the cursor: in order to make a change to a word, you just need to swipe in the area between the keyboard and the phrase being typed without blocking the view of the text.

I decided to implement the animations of deleting and moving to the top myself, and to bring the visual accompaniment as close as possible to real life. Something has acquired a higher priority - swipe to the right and the note moves to the top of the list. To delete, swipe left and the strikethrough animation will show how long you need to extend the swipe to complete the deletion. If you accidentally delete it, you just need to shake the device (“Shake”), and the note will return to its original place.

In order to highlight the note, I used LongTapGesture and the application's three main colors - white, blue and red, which formed the main color palette.

I decided to make the transition between day and night themes automatic - why has no one yet thought of changing the appearance depending on the position of the sun in the sky? It's very simple - after dark and after sunrise, the theme changes, and the user does not need to be distracted from taking notes, because the application will always automatically adjust to the surrounding conditions.

Naming

The name of the application is the most important part during development; it is the first thing the user sees in the store. There is information about this on Habré. I decided to approach the selection of the name thoroughly: first, I went through the list of the 1000 most popular words in the English language and wrote down all sorts of combinations that would be suitable for the name of a mobile note-taking application; besides, I wanted to keep it within 8-10 characters. But at the same time, I didn’t want to choose the name SuperNotes or NotesPlus etc, I wanted something new. I liked the combination mad note, which I accidentally came across in Urban Dictionary:
mad note - excellent, entertaining, surprising, unexpected or awesome

The slogan immediately appeared: MadNotes - Note your passion. Since I already had a palette of primary colors ready (white, blue, red), I decided to immediately come up with a suitable icon. The situation with logos for applications of this kind is deplorable:

Since notes on paper are written with a pencil or pen, I decided to display this on the icon - a pencil rotated at an angle of 45 degrees. It turned out like this:

Result

Since the project was initially conceived as a design project, I decided to participate with my application in the all-Ukrainian competition Ukrainian Design Awards: The Very Best Of in the Digital Design category. There were several weeks left before the competition, during which time I managed to make a publication on Behance, where I visually showed all the main functions of the application, and also recorded a video preview.
Since the winners of the competition are not announced until the very last moment, it was incredibly nice to see my work at the exhibition of the winners' works - the jury saw and appreciated the main concept - a minimalist and, at the same time, functional application for taking notes.


The application has been in the AppStore for several months, during which time I made six updates and rewrote the code in Swift. The latest version (1.2) added synchronization with iCloud, so the notes have already moved to the cloud.

Thank you for your attention.
Note your passion

February 9, 2015 at 5:54 pm

Creating an iOS application. From idea to result

  • iOS development
It all started when I looked around and, not seeing the car of my dreams, decided to design it myself
Ferdinand Porsche

Hello, Habr. I want to tell you how I created my first iOS application and what came out of it.

Idea

The idea for the application arose naturally: create something that you would be happy to use yourself. I write notes all the time. After all, every busy person has a certain set of facts that he receives during the day, and which are worth remembering. And since everyone forgets (and that’s normal!), there’s no better solution than just writing it down. I always felt some kind of inconvenience when working with the note-taking applications presented in the AppStore. Excessive complexity in management, the presence of unnecessary categories, a plethora of additional information - all this prevents the application from performing its main function. Plus, many of these things just look ugly.

Therefore, putting all bets on simplicity and convenience, I began to create a concept. Application model with a single list of notes. Everything in one place, what could be simpler? If something is of great value or relevance, you don't necessarily need to label it; you can simply move the more important item to the top of the list. Old and unnecessary entries will gradually move down and will eventually be deleted by the user.

Functional

After the concept was thought up, I wrote down the main functionality - those things that I would like to focus on in management:

Quite standard functionality for this kind of application, you will agree. But this is just the tip of the iceberg, the devil is in the details.

Tools

Before writing the code in Xcode, I completely recreated the appearance of the application in the vector editor Sketch. This program is great for quickly creating layouts. There are a lot of plugins available for this application, among them there is Sketch Preview - viewing the artboard directly on the device through the Skala Preview program. You just need to download the free Skala Preview programs to your computer and mobile device and install the plugin. After that, select the desired artboard, press the Command+P combination, and within a second the appearance of the application is transmitted to the device.

In addition, the application is very convenient for creating screenshots for publication in the AppStore. For each screen size, a different set of artboards was created, along with the use of styles; the time spent on formatting was minimal. But about the publication a little later.

Development

In the application, I used only two controllers - one directly for all, all, all notes, the other to display a small tutorial when first launched. I organized work with the database using the CoreData framework.

After creating the basic functionality (creating, deleting, editing notes), I decided to improve each of these functions.

Agree, text editing in iOS is implemented quite inconveniently. If you make a mistake in a word, to move the cursor to the desired position, you must touch and, without removing your finger from the screen, try to get into the selected area. In addition, after correcting the error, you need to return the cursor back to the end of the line. In my application, I decided to rework the mechanism for moving the cursor: in order to make a change to a word, you just need to swipe in the area between the keyboard and the phrase being typed without blocking the view of the text.

I decided to implement the animations of deleting and moving to the top myself, and to bring the visual accompaniment as close as possible to real life. Something has acquired a higher priority - swipe to the right and the note moves to the top of the list. To delete, swipe left and the strikethrough animation will show how long you need to extend the swipe to complete the deletion. If you accidentally delete it, you just need to shake the device (“Shake”), and the note will return to its original place.

In order to highlight the note, I used LongTapGesture and the application's three main colors - white, blue and red, which formed the main color palette.

I decided to make the transition between day and night themes automatic - why has no one yet thought of changing the appearance depending on the position of the sun in the sky? It's very simple - after dark and after sunrise, the theme changes, and the user does not need to be distracted from taking notes, because the application will always automatically adjust to the surrounding conditions.

Naming

The name of the application is the most important part during development; it is the first thing the user sees in the store. There is information about this on Habré. I decided to approach the selection of the name thoroughly: first, I went through the list of the 1000 most popular words in the English language and wrote down all sorts of combinations that would be suitable for the name of a mobile note-taking application; besides, I wanted to keep it within 8-10 characters. But at the same time, I didn’t want to choose the name SuperNotes or NotesPlus etc, I wanted something new. I liked the combination mad note, which I accidentally came across in Urban Dictionary:
mad note - excellent, entertaining, surprising, unexpected or awesome

The slogan immediately appeared: MadNotes - Note your passion. Since I already had a palette of primary colors ready (white, blue, red), I decided to immediately come up with a suitable icon. The situation with logos for applications of this kind is deplorable:

Since notes on paper are written with a pencil or pen, I decided to display this on the icon - a pencil rotated at an angle of 45 degrees. It turned out like this:

Result

Since the project was initially conceived as a design project, I decided to participate with my application in the all-Ukrainian competition Ukrainian Design Awards: The Very Best Of in the Digital Design category. There were several weeks left before the competition, during which time I managed to make a publication on Behance, where I visually showed all the main functions of the application, and also recorded a video preview.
Since the winners of the competition are not announced until the very last moment, it was incredibly nice to see my work at the exhibition of the winners' works - the jury saw and appreciated the main concept - a minimalist and, at the same time, functional application for taking notes.


The application has been in the AppStore for several months, during which time I made six updates and rewrote the code in Swift. The latest version (1.2) added synchronization with iCloud, so the notes have already moved to the cloud.

Thank you for your attention.
Note your passion

Have you ever wondered how the iOS and OS X apps that millions of iPhone, iPad, and Mac owners use every day are created? We know that many people have thought about developing programs for Apple devices, but beginners, as a rule, are afraid of the difficulties in the learning process and studying textbooks on their own.

The profession itself “developer of applications for iOS and Mac” is universal: it combines knowledge of two programming languages ​​- Objective C and Swift. The first is the main language, built on the basis of the C language and has a simple syntax. Without this language, people will not be hired to work in a mobile application studio. But Swift is a relatively new language: Apple introduced it in 2014, it is integrated with C and runs faster than Objective C and Python, allowing you to create any program - both games and useful applications.

Nowadays there are only a few specialists who know Swift, so they are in great demand on the market. Just go to any HR platform to see the average salary of iOS developers - 100 thousand rubles. Experienced programmers have salaries of several hundred thousand rubles + various bonuses from the company.

To get the best results in a short time and a guaranteed internship, you can use the GeekBrains service. It includes both Objective C and Swift, which means that you essentially get two specialties instead of one. Companies sell smart iOS programmers like hotcakes, so they don’t sit without work for even one week.

The learning process is an online broadcast of lessons, so you can study from anywhere in the world. Specially developed unique technology makes remote learning even more convenient than face-to-face learning. Do your homework, and if you couldn’t be in class, watch it in the recording. Here's what a typical lesson looks like on GeekBrains:

Why online courses? They have an obvious advantage over universities in terms of time spent and at the same time provide the opportunity to earn practical experience and get a guarantee of results. 7 out of 10 service students find work while still studying, since GeekBrains provides a guaranteed internship. In addition, students gain invaluable experience in team development and a portfolio case. Without the latter, it’s almost impossible to get a job now.

For example, this is what your resume might look like after training.

In order to create a high-quality mobile application for iOS, we will monitor the market. Having examined new products and trending applications, we will highlight promising trends in functional content and design. If you want to create an iOS application from scratch, we will develop the application together based on our market research.

2. We develop the functional component of the application

At this stage, we develop the software that you want to focus on in the application. This can be either linking to social networks or developing a user-friendly interface.

3. Selecting development tools

Before writing code in Xcode, we sketch out the appearance of the application in a vector editor. Afterwards we will show you the layout of the application. This way we will make sure that we understand each other correctly.

4. Developing an application

After all formal issues and wishes have been agreed upon, we begin development.

5. We carry out

Whatever you name the ship, that’s how it will sail. KOLORO as a branding agency pays special attention to the marketing component of its work. We will do everything to make your application sell from the first word.

Many new developers or people who are just interested in programming don't know how to quickly and easily create an iOS app.

We will analyze this entire process step by step so that everyone can read this material and carry out the development on their own.

Step one. Come up with an idea and a name

Of course, from the very beginning you need to come up with a good idea that could be popular. The application should be simple, functional and useful to users. Here are some tips to help you find a great idea and bring it to life:

1 Go to the AppStore and look at the programs presented there. Perhaps something will come to your mind.

2 Also look at your apps list(installed). It’s likely that you don’t like all of them and would like to add some functionality to some of them. This will be the idea for your creation!

3 Look at your friends' apps for the same purpose.

Important! At the end of your idea, you should have a clear understanding of what function your application will perform.

As for the name, this issue should also be taken very seriously. First, look at the most and their names. Go to apple.com/ru/itunes/ for this purpose. Be sure to check out the free and paid section.

Experts highlight several tips on what the name should be, and more specifically:

  • length about 10 characters (not much more, maybe less, but again, not too much);
  • preferably English (by the way, the interface should also have it in order to expand the consumer audience);
  • two words in the title;
  • one word must fully reflect the purpose;
  • the second word must be a description of the first.

Step four. Concept development

In the first step, you have already accepted the idea and name of the future application. Now it’s worth doing something that will allow you to start developing directly. It's about the concept. In that The concept includes the following:

  • The target audience. Be sure to think about who your user will be. This could be a young, purposeful and familiar with modern gadgets. On the other hand, this could be an elderly user who is far from technology. The remaining two components of the concept will depend on this.

  • Functional. Clearly list all the functions that the application will perform.
  • Design. Sketch out, even on a piece of paper, what the application will look like. Moreover, you must clearly understand what the start screen will be like, what buttons it will have, and what will be on the additional pages. Also, add buttons according to the list of functions. Also design all the buttons.

Once you have all the sketches, you can start coding!

Step five. Coding

Now open Xcode and run the following stages of creating software on iOS:

1 On the Start screen, in the menu on the left, tap "Application"(open this section) and select "Empty Application". Click "Next". Next, enter your details, and in the developer ID field (given by Apple) enter "example", and in the class prefix field specify "XYZ".

2 Next, select "File" and in the dropdown list "New". Then press successively "User Interface", "Storyboard" and a button "Next". In the device menu, select and enter in the name field "Main". Save this file in the same folder as your main project. After this, the Main.storyboard file will appear in the project tree (on the left). This, as you may have already understood, is a visual representation of all the screens of your program. This is what you will edit in the future.

3 Now you need to make sure that when you launch the application, exactly the screen that you create in Storyboard opens. To do this, in the folder tree on the left, sequentially select your project, "Targets", "General", "Deployment Info". Then near the inscription "Main Interface" you are taking "Main", as in Figure 8 - this is exactly what we called our screen at the previous stage.

Rice. 9. Assigning the created screen as the main one in Storyboard

4 Now, in fact, you need to create this very main screen, which will open first upon startup. To do this, in the tree on the left Click on "storyboard" once. A blank window will open in the main window. At the bottom right, click on the cube icon; this is a library of objects that can be added to the screen. Now find on the right "View Controller" and drag it with the mouse cursor onto an empty field. A rectangular object will appear. Actually, you can add all the elements there.

5 Now you can add other objects from the library. These can be text fields, input fields and other elements. If you double-click on them, you will be able to change their attributes and properties. Actually, in the same way you can write some code to react to a click. However, if you have watched video tutorials on Objective-C, then you know very well what elements you need and how to add them.

6 If you need to add another screen, do it in the same way as before - move the object to the empty space "View Controller". Then you can also move various objects onto it.

7 Now we need to make sure that the user could move between these screens using a swipe or by clicking on the appropriate link. There is an object for this called "Navigation Controller". Move it to your home screen. Next click on "Editor", then "Embedded In" and to the above mentioned object. A gray bar will appear at the top of the home screen. This means that a so-called navigation bar has been added to it.

8 To add a screen navigation button, there is an object "Bar Button". This is a button, to put it simply. Move it to the navigation panel and set the appropriate properties.

Add the remaining objects in the same way, and also set the necessary properties for them. We won’t go too deep into how to code an application, as this is a very broad topic. Moreover, if you read the above material, you will know the necessary information about this. But the above coding stages are the start of your further developments.