Учебник. Создание приложения базы данных для клиента Tutorial: Create a customer database application

В этом руководстве создается простое приложение для управления списком клиентов. This tutorial creates a simple app for managing a list of customers. Это позволяет выбрать основные понятия для корпоративных приложений в UWP. In doing so, it introduces a selection of basic concepts for enterprise apps in UWP. Вы научитесь выполнять следующие действия: You’ll learn how to:

• Реализуйте операции создания, чтения, обновления и удаления в локальной базе данных SQL. Implement Create, Read, Update, and Delete operations against a local SQL database.
• Добавление сетки данных для просмотра и редактирования данных клиента в пользовательском интерфейсе. Add a data grid, to display and edit customer data in your UI.
• Размещение элементов пользовательского интерфейса в базовой структуре формы. Arrange UI elements together in a basic form layout.

Отправной точкой для этого руководства является одностраничное приложение с минимальным пользовательским интерфейсом и функциональностью на основе упрощенной версии примера приложения для работы с базой данных Customer Orders. The starting point for this tutorial is a single-page app with minimal UI and functionality, based on a simplified version of the Customer Orders Database sample app. Он написан на C# языке и XAML, и мы ожидаем, что у вас есть базовое знакомство с обоими языками. It’s written in C# and XAML, and we’re expecting that you’ve got a basic familiarity with both those languages.

Предварительные требования Prerequisites

После клонирования или скачивания репозитория можно изменить проект, открыв кустомердатабасетуториал. sln в Visual Studio. After you’ve cloned/downloaded the repo, you can edit the project by opening CustomerDatabaseTutorial.sln with Visual Studio.

Ознакомьтесь с примером базы данных «полный заказ для клиентов «, чтобы увидеть приложение, на котором основано это руководство. Check out the full Customer Orders Database sample to see the app this tutorial was based on.

Часть 1. интересующий вас код Part 1: Code of Interest

Если приложение запускается сразу после открытия, вы увидите несколько кнопок в верхней части пустого экрана. If you run your app immediately after opening it, you’ll see a few buttons at the top of a blank screen. Хотя это невидимо для вас, приложение уже содержит локальную базу данных SQLite, подготовленную с помощью нескольких тестовых клиентов. Though it’s not visible to you, the app already includes a local SQLite database provisioned with a few test customers. Здесь вы начинаете с реализации элемента управления пользовательского интерфейса для вывода этих клиентов, а затем переходите к добавлению операций в базе данных. From here, you’ll start by implementing a UI control to display those customers, and then move on to adding in operations against the database. Прежде чем начать, здесь вы будете работать. Before you begin, here’s where you’ll be working.

Представления Views

Кустомерлистпаже. XAML — это представление приложения, которое определяет пользовательский интерфейс для отдельной страницы в этом учебнике. CustomerListPage.xaml is the app’s View, which defines the UI for the single page in this tutorial. Каждый раз, когда необходимо добавить или изменить визуальный элемент в пользовательском интерфейсе, это можно сделать в этом файле. Any time you need to add or change a visual element in the UI, you’ll do it in this file. В этом руководстве описано, как добавить следующие элементы: This tutorial will walk you through adding these elements:

• Раддатагрид для отображения и редактирования клиентов. A RadDataGrid for displaying and editing your customers.
• StackPanel для установки начальных значений для нового клиента. A StackPanel to set the initial values for a new customer.

ViewModels ViewModels

Виевмоделс\кустомерлистпажевиевмодел.КС — это место, где находится основная логика приложения. ViewModels\CustomerListPageViewModel.cs is where the fundamental logic of the app is located. Каждое действие пользователя, выполненное в представлении, будет передано в этот файл для обработки. Every user action taken in the view will be passed into this file for processing. В этом руководстве вы добавите новый код и реализуем следующие методы: In this tutorial, you’ll add some new code, and implement the following methods:

• Креатеневкустомерасинк, который инициализирует новый объект CustomerViewModel. CreateNewCustomerAsync, which initializes a new CustomerViewModel object.
• Делетеневкустомерасинк, который удаляет нового клиента перед его отображением в пользовательском интерфейсе. DeleteNewCustomerAsync, which removes a new customer before it’s displayed in the UI.
• Делетеандупдатеасинк, который обрабатывает логику кнопки удаления. DeleteAndUpdateAsync, which handles the delete button’s logic.
• Жеткустомерлистасинк, который получает список клиентов из базы данных. GetCustomerListAsync, which retrieves a list of customers from the database.
• Савеинитиалчанжесасинк, который добавляет сведения о новом клиенте в базу данных. SaveInitialChangesAsync, which adds a new customer’s information to the database.
• Упдатекустомерсасинк, который обновляет пользовательский интерфейс для отражения добавленных или удаленных клиентов. UpdateCustomersAsync, which refreshes the UI to reflect any customers added or deleted.

CustomerViewModel — это программа-оболочка для информации клиента, которая отслеживает, был ли он недавно изменен. CustomerViewModel is a wrapper for a customer’s information, which tracks whether or not it’s been recently modified. В этот класс не нужно добавлять ничего, но в него будет ссылаться другой код, который вы добавите в другое место. You won’t need to add anything to this class, but some of the code you’ll add elsewhere will reference it.

Дополнительные сведения о создании образца см. в обзоре структуры приложения. For more information on how the sample is constructed, check out the app structure overview.

Часть 2. Добавление элемента управления DataGrid Part 2: Add the DataGrid

Прежде чем приступить к работе с данными клиента, необходимо добавить элемент управления пользовательского интерфейса для вывода этих клиентов. Before you begin to operate on customer data, you’ll need to add a UI control to display those customers. Для этого мы будем использовать готовый элемент управления раддатагрид стороннего производителя. To do this, we’ll be using a pre-made third-party RadDataGrid control. Пакет NuGet Telerik. UI. for. UniversalWindowsPlatform уже включен в этот проект. The Telerik.UI.for.UniversalWindowsPlatform NuGet package has already been included in this project. Давайте добавим сетку в наш проект. Let’s add the grid to our project.

Откройте виевс\кустомерлистпаже.ксамл из Обозреватель решений. Open Views\CustomerListPage.xaml from the Solution Explorer. Добавьте следующую строку кода в тег страницы , чтобы объявить сопоставление с пространством имен Telerik, содержащим сетку данных. Add the following line of code within the Page tag to declare a mapping to the Telerik namespace containing the data grid.

Под панелью команд в главной релативепанел представления добавьте элемент управления раддатагрид с некоторыми базовыми параметрами конфигурации: Below the CommandBar within the main RelativePanel of the View, add a RadDataGrid control, with some basic configuration options:

Вы добавили сетку данных, но для ее вывода нужны данные. You’ve added the data grid, but it needs data to display. Добавьте в него следующие строки кода: Add the following lines of code to it:

Теперь, когда вы определили источник данных для вывода, раддатагрид будет выполнять большую часть логики пользовательского интерфейса. Now that you have defined a source of data to display, RadDataGrid will handle most of the UI logic for you. Однако при запуске проекта данные на экране по-прежнему не отображаются. However, if you run your project, you still won’t see any data on display. Это обусловлено тем, что ViewModel еще не загружает его. That’s because the ViewModel isn’t loading it yet.

Часть 3. чтение клиентов Part 3: Read customers

При инициализации виевмоделс\кустомерлистпажевиевмодел.КС вызывает метод жеткустомерлистасинк . When it’s initialized, ViewModels\CustomerListPageViewModel.cs calls the GetCustomerListAsync method. Этот метод должен получить тестовые данные клиента из базы данных SQLite, входящей в этот учебник. That method needs to retrieve the test Customer data from the SQLite database that’s included in the tutorial.

В виевмоделс\кустомерлистпажевиевмодел.КСОбновите метод жеткустомерлистасинк следующим кодом: In ViewModels\CustomerListPageViewModel.cs, update your GetCustomerListAsync method with this code:

Метод жеткустомерлистасинк вызывается при загрузке ViewModel, но до этого шага он ничего не делал. The GetCustomerListAsync method is called when the ViewModel is loaded, but before this step, it didn’t do anything. Здесь мы добавили вызов метода с методом Async в репозитории или склкустомеррепоситори. Here, we’ve added a call to the GetAsync method in Repository/SqlCustomerRepository. Это позволяет ему обращаться к репозиторию для получения перечислимой коллекции объектов Customer. This allows it to contact the repository to retrieve an enumerable collection of Customer objects. Затем он анализирует их до отдельных объектов, прежде чем добавлять их к внутреннему ObservableCollection , чтобы их можно было отобразить и изменить. It then parses them into individual objects, before adding them to its internal ObservableCollection so they can be displayed and edited.

Запустите приложение. Теперь вы увидите сетку данных, в которой отображается список клиентов. Run your app — you’ll now see the data grid displaying the list of customers.

Часть 4. изменение клиентов Part 4: Edit customers

Можно изменить записи в сетке данных, дважды щелкнув их, но необходимо убедиться, что любые изменения, вносимые в пользовательском интерфейсе, также будут внесены в коллекцию клиентов в коде программной части. You can edit the entries in the data grid by double-clicking them, but you need to ensure that any changes you make in the UI are also made to your collection of customers in the code-behind. Это означает, что необходимо реализовать двустороннюю привязку данных. This means you’ll have to implement two-way data binding. Если вы хотите получить дополнительные сведения об этом, ознакомьтесь с нашим введением в привязку данных. If you want more information about this, check out our introduction to data binding.

Сначала объявите, что виевмоделс\кустомерлистпажевиевмодел.КС реализует интерфейс INotifyPropertyChanged : First, declare that ViewModels\CustomerListPageViewModel.cs implements the INotifyPropertyChanged interface:

Затем в основном тексте класса добавьте следующее событие и метод: Then, within the main body of the class, add the following event and method:

Метод OnPropertyChanged упрощает для методов задания вызов события PropertyChanged , которое необходимо для двусторонней привязки данных. The OnPropertyChanged method makes it easy for your setters to raise the PropertyChanged event, which is necessary for two-way data binding.

Обновите метод задания для селектедкустомер с помощью этого вызова функции: Update the setter for SelectedCustomer with this function call:

В виевс\кустомерлистпаже.ксамлдобавьте свойство селектедкустомер в сетку данных. In Views\CustomerListPage.xaml, add the SelectedCustomer property to your data grid.

Это связывает выбор пользователя в сетке данных с соответствующим объектом Customer в коде программной части. This associates the user’s selection in the data grid with the corresponding Customer object in the code-behind. Режим привязки TwoWay позволяет отражать изменения, внесенные в пользовательском интерфейсе, в этот объект. The TwoWay binding mode allows the changes made in the UI to be reflected on that object.

Запустите приложение. Run your app. Теперь вы можете видеть клиентов, отображаемых в сетке, и вносить изменения в базовые данные с помощью пользовательского интерфейса. You can now see the customers displayed in the grid, and make changes to the underlying data through your UI.

Часть 5. обновление клиентов Part 5: Update customers

Теперь, когда вы можете просматривать и изменять клиентов, необходимо иметь возможность отправлять изменения в базу данных и получать обновления, внесенные другими пользователями. Now that you can see and edit your customers, you’ll need to be able to push your changes to the database, and to pull any updates that have been made by others.

Вернитесь в виевмоделс\кустомерлистпажевиевмодел.КСи перейдите к методу упдатекустомерсасинк . Return to ViewModels\CustomerListPageViewModel.cs, and navigate to the UpdateCustomersAsync method. Обновите его с помощью этого кода, чтобы отправить изменения в базу данных и получить новые сведения: Update it with this code, to push changes to the database and to retrieve any new information:

В этом коде используется свойство виевмоделс\кустомервиевмодел.КС , которое автоматически обновляется при каждом изменении клиента. This code utilizes the IsModified property of ViewModels\CustomerViewModel.cs, which is automatically updated whenever the customer is changed. Это позволяет избежать ненужных вызовов и отправлять изменения только от обновленных клиентов в базу данных. This allows you to avoid unnecessary calls, and to only push changes from updated customers to the database.

Часть 6. Создание нового клиента Part 6: Create a new customer

Добавление нового клиента представляет проблему, так как клиент будет отображаться в виде пустой строки, если добавить его в пользовательский интерфейс перед указанием значений для его свойств. Adding a new customer presents a challenge, as the customer will appear as a blank row if you add it to the UI before providing values for its properties. Это не проблема, но здесь мы упростили Задание начальных значений клиента. That’s not a problem, but here we’ll make it easier to set a customer’s initial values. В этом учебнике мы добавим простую свертываемая панель, но если у вас есть дополнительные сведения для добавления, можно создать отдельную страницу для этой цели. In this tutorial, we’ll add a simple collapsible panel, but if you had more information to add you could create a separate page for this purpose.

Обновление кода программной части Update the code-behind

Добавьте новое закрытое поле и общедоступное свойство в виевмоделс\кустомерлистпажевиевмодел.КС. Add a new private field and public property to ViewModels\CustomerListPageViewModel.cs. Он будет использоваться для управления отображением панели. This will be used to control whether or not the panel is visible.

Добавьте в ViewModel новое открытое свойство, обратное значение аддингневкустомер. Add a new public property to the ViewModel, an inverse of the value of AddingNewCustomer. Он будет использоваться для отключения обычных кнопок панели команд при отображении панели. This will be used to disable the regular command bar buttons when the panel is visible.

Теперь вам потребуется способ отобразить свертываемая панель и создать клиента для редактирования в ней. You’ll now need a way to display the collapsible panel, and to create a customer to edit within it.

Добавьте новое закрытое свойство фиенд и public в ViewModel для хранения только что созданного клиента. Add a new private fiend and public property to the ViewModel, to hold the newly created customer.

Обновите метод креатеневкустомерасинк , чтобы создать нового клиента, добавить его в репозиторий и задать его в качестве выбранного клиента: Update your CreateNewCustomerAsync method to create a new customer, add it to the repository, and set it as the selected customer:

Обновите метод савеинитиалчанжесасинк , чтобы добавить недавно созданного клиента в репозиторий, обновите пользовательский интерфейс и закройте панель. Update the SaveInitialChangesAsync method to add a newly-created customer to the repository, update the UI, and close the panel.

Добавьте следующую строку кода в качестве конечной строки в методе задания для аддингневкустомер: Add the following line of code as the final line in the setter for AddingNewCustomer:

Это обеспечит автоматическое обновление енаблекоммандбар при каждом изменении аддингневкустомер . This will ensure that EnableCommandBar is automatically updated whenever AddingNewCustomer is changed.

Обновление пользовательского интерфейса Update the UI

Вернитесь к виевс\кустомерлистпаже.ксамли добавьте StackPanel со следующими свойствами между панелью CommandBar и сеткой данных: Navigate back to Views\CustomerListPage.xaml, and add a StackPanel with the following properties between your CommandBar and your data grid:

Атрибут x:Load гарантирует, что эта панель отображается только при добавлении нового клиента. The x:Load attribute ensures that this panel only appears when you’re adding a new customer.

Внесите следующее изменение в расположение сетки данных, чтобы убедиться, что она перемещается вниз при появлении новой панели: Make the following change to the position of your data grid, to ensure that it moves down when the new panel appears:

Обновите панель стека, используя четыре элемента управления TextBox . Update your stack panel with four TextBox controls. Они привязываются к отдельным свойствам нового клиента и позволяют изменять его значения перед добавлением в сетку данных. They’ll bind to the individual properties of the new customer, and allow you to edit its values before you add it to the data grid.

Добавьте простую кнопку на новую панель стека, чтобы сохранить только что созданного клиента: Add a simple button to your new stack panel to save the newly-created customer:

Обновите панель команд, чтобы при отображении панели стека были отключены стандартные кнопки Создать, удалить и обновить. Update the CommandBar, so the regular create, delete, and update buttons are disabled when the stack panel is visible:

Запустите приложение. Run your app. Теперь можно создать клиента и ввести его данные на панели стека. You can now create a customer and input its data in the stack panel.

Часть 7. Удаление клиента Part 7: Delete a customer

Удаление клиента — это окончательная базовая операция, которую необходимо реализовать. Deleting a customer is the final basic operation that you need to implement. При удалении клиента, выбранного в сетке данных, необходимо немедленно вызвать упдатекустомерсасинк , чтобы обновить пользовательский интерфейс. When you delete a customer you’ve selected within the data grid, you’ll want to immediately call UpdateCustomersAsync in order to update the UI. Однако вам не нужно вызывать этот метод, если вы удаляете только что созданный клиент. However, you don’t need to call that method if you’re deleting a customer you’ve just created.

Перейдите по адресу виевмоделс\кустомерлистпажевиевмодел.КСи обновите метод делетеандупдатеасинк : Navigate to ViewModels\CustomerListPageViewModel.cs, and update the DeleteAndUpdateAsync method:

В виевс\кустомерлистпаже.ксамлобновите панель стека, чтобы добавить нового клиента, чтобы он содержал вторую кнопку: In Views\CustomerListPage.xaml, update the stack panel for adding a new customer so it contains a second button:

В виевмоделс\кустомерлистпажевиевмодел.КСОбновите метод делетеневкустомерасинк , чтобы удалить нового клиента: In ViewModels\CustomerListPageViewModel.cs, update the DeleteNewCustomerAsync method to delete the new customer:

Запустите приложение. Run your app. Теперь можно удалить клиентов либо в сетке данных, либо на панели стека. You can now delete customers, either within the data grid or in the stack panel.

Заключение Conclusion

Поздравляем! Congratulations! Теперь, когда все это сделано, ваше приложение будет иметь полный спектр операций локальной базы данных. With all this done, your app now has a full range of local database operations. Вы можете создавать, читать, обновлять и удалять клиентов в пользовательском интерфейсе, и эти изменения сохраняются в базе данных и сохраняются в разных запусках приложения. You can create, read, update, and delete customers within your UI, and these changes are saved to your database and will persist across different launches of your app.

Теперь, когда все готово, учитывайте следующее. Now that you’re finished, consider the following:

• Если вы еще этого не сделали, ознакомьтесь с обзором структуры приложения , чтобы получить дополнительные сведения о том, почему приложение строится. If you haven’t already, check out the app structure overview for more information on why the app is built how it is.
• Изучите пример полной базы данных Customer Orders , чтобы увидеть приложение, на котором основано это руководство. Explore the full Customer Orders Database sample to see the app this tutorial was based on.

Если у вас возникла проблема, можно продолжить. Or if you’re up for a challenge, you can continue onwards.

Дальнейшие действия: подключение к удаленной базе данных Going further: Connect to a remote database

Мы предоставили пошаговое руководство по реализации этих вызовов в локальной базе данных SQLite. We’ve provided a step-by-step walkthrough of how to implement these calls against a local SQLite database. Но что если вместо этого вы хотите использовать удаленную базу данных? But what if you want to use a remote database, instead?

Если вы хотите сделать это, вам потребуется собственная учетная запись Azure Active Directory (AAD) и возможность размещения собственного источника данных. If you want to give this a try, you’ll need your own Azure Active Directory (AAD) account and the ability to host your own data source.

Необходимо добавить проверку подлинности, функции для управления вызовами RESTFUL, а затем создать удаленную базу данных для взаимодействия. You’ll need to add authentication, functions to handle REST calls, and then create a remote database to interact with. В образце полной базы данных Customer Orders имеется код, на который можно ссылаться для каждой необходимой операции. There’s code in the full Customer Orders Database sample that you can reference for each necessary operation.

Параметры и конфигурация Settings and configuration

Необходимые действия для подключения к собственной удаленной базе данных приведены в файле сведений примера. The necessary steps to connect to your own remote database are spelled out in the sample’s readme. Необходимо выполнить следующие действия. You’ll need to do the following:

• Укажите идентификатор клиента учетной записи Azure для Constants.CS. Provide your Azure account client Id to Constants.cs.
• Укажите URL-адрес удаленной базы данных для Constants.CS. Provide the url of the remote database to Constants.cs.
• Укажите строку подключения для базы данных Constants.CS. Provide the connection string for the database to Constants.cs.
• Свяжите приложение с Microsoft Store. Associate your app with the Microsoft Store.
• Скопируйте проект службы в приложение и разверните его в Azure. Copy over the Service project into your app, and deploy it to Azure.

Authentication Authentication

Необходимо создать кнопку для запуска последовательности проверки подлинности, а также всплывающее окно или отдельную страницу для сбора сведений о пользователе. You’ll need to create a button to start an authentication sequence, and a popup or a separate page to gather a user’s information. После создания этого кода необходимо предоставить код, который запрашивает сведения о пользователе и использует его для получения маркера доступа. Once you’ve created that, you’ll need to provide code that requests a user’s information and uses it to acquire an access token. Пример базы данных Customer Orders заключает Microsoft Graph вызовы в библиотеку вебаккаунтманажер для получения маркера и выполнения проверки подлинности для учетной записи AAD. The Customer Orders Database sample wraps Microsoft Graph calls with the WebAccountManager library to acquire a token and handle the authentication to an AAD account.

• Логика проверки подлинности реализована в AuthenticationViewModel.CS. The authentication logic is implemented in AuthenticationViewModel.cs.
• Процесс проверки подлинности отображается в пользовательском элементе управления аусентикатионконтрол. XAML . The authentication process is displayed in the custom AuthenticationControl.xaml control.

Вызовы RESTFUL REST calls

Вам не потребуется изменять код, добавленный в этом руководстве, для реализации вызовов RESTFUL. You won’t need to modify any of the code we added in this tutorial in order to implement REST calls. Вместо этого необходимо выполнить следующие действия. Instead, you’ll need to do the following:

• Создайте новые реализации интерфейсов икустомеррепоситори и итуториалрепоситори , реализуя тот же набор функций с помощью функции RESTful вместо SQLite. Create new implementations of the ICustomerRepository and ITutorialRepository interfaces, implementing the same set of functions through REST instead of SQLite. Необходимо выполнить сериализацию и десериализовать JSON, а также при необходимости переключить вызовы остальных в отдельный класс хттфелпер . You’ll need to serialize and deserialize JSON, and can wrap your REST calls in a separate HttpHelper class if you need to. См. полный пример для конкретных особенностей. Refer to the full sample for specifics.
• В app.XAML.CSсоздайте новую функцию для инициализации репозитория RESTful и вызовите ее вместо склитедатабасе при инициализации приложения. In App.xaml.cs, create a new function to initialize the REST repository, and call it instead of SqliteDatabase when the app is initialized. См. полный пример. Again, refer to the full sample.

После выполнения всех трех этапов вы сможете пройти проверку подлинности в вашей учетной записи AAD с помощью приложения. Once all three of these steps are complete, you should be able to authenticate to your AAD account through your app. Вызовы функции RESTFUL к удаленной базе данных будут заменять локальные вызовы SQLite, но взаимодействие с пользователем должно быть одинаковым. REST calls to the remote database will replace the local SQLite calls, but the user experience should be the same. Если вы еще амбициозные, можно добавить страницу параметров, чтобы разрешить пользователю динамически переключаться между ними. If you’re feeling even more ambitious, you can add a settings page to allow the user to dynamically switch between the two.